totallyRonja/CabinGame
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

add formatter to project

Browse source
This commit is contained in:
Ronja 2020-02-21 13:07:18 +01:00
parent 2d597906ae
commit 1550601fa7
10 changed files with 176 additions and 167 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
Program/.prettierrc Normal file
View file

@ -0,0 +1,5 @@
{
"tabWidth": 2,
"useTabs": false,
"semi": false
}

23
Program/src/Datatypes/vector.ts
View file

@ -1,28 +1,27 @@
import { IPoint } from "pixi.js" import { IPoint } from "pixi.js"
// my own point I can extend however I want to, compatible with pixijs points // my own point I can extend however I want to, compatible with pixijs points
export class Vector implements IPoint{ export class Vector implements IPoint {
x: number x: number
y: number y: number
constructor(x: number, y?: number){ constructor(x: number, y?: number) {
if(y===undefined) if (y === undefined) y = x
y = x
this.x = x this.x = x
this.y = y this.y = y
} }
normalize(): Vector { normalize(): Vector {
let len = this.length() let len = this.length()
if(len < 0.001){ if (len < 0.001) {
return new Vector(0,0) return new Vector(0, 0)
} else { } else {
return this.scale(1/len) return this.scale(1 / len)
} }
} }
length(): number { length(): number {
return Math.sqrt(this.x*this.x + this.y*this.y) return Math.sqrt(this.x * this.x + this.y * this.y)
} }
scale(scalar: number): Vector { scale(scalar: number): Vector {
@ -35,10 +34,8 @@ export class Vector implements IPoint{
//IPoint interface functions //IPoint interface functions
set(x?: number, y?: number): void { set(x?: number, y?: number): void {
if (x !== undefined) if (x !== undefined) this.x = x
this.x = x if (y !== undefined) this.y = y
if (y !== undefined)
this.y = y
} }
copyFrom(p: IPoint): this { copyFrom(p: IPoint): this {
this.set(p.x, p.y) this.set(p.x, p.y)
@ -51,4 +48,4 @@ export class Vector implements IPoint{
equals(p: IPoint): boolean { equals(p: IPoint): boolean {
return this.x === p.x && this.y === p.y return this.x === p.x && this.y === p.y
} }
} }

49
Program/src/Systems/InfoSystem.ts
View file

@ -1,50 +1,43 @@
import { Human } from "../Components/human"; import { Container, DisplayObject, Text } from "pixi.js"
import { Container, DisplayObject, Text } from "pixi.js"; import { AABB } from "../Datatypes/aabb"
import { AABB } from "../Datatypes/aabb"; import { System, Entity } from "ecsy"
import { System, Entity } from "ecsy"; import globals from "../globals"
import globals from "../globals"; import { Name } from "../Components/name"
import { Name } from "../Components/name";
// MovableSystem // MovableSystem
export class InfoSystem extends System { export class InfoSystem extends System {
priority = 80 priority = 80
dirty: boolean
root: Container root: Container
elements: {[id: string]:DisplayObject} = {} elements: { [id: string]: DisplayObject } = {}
init(){
globals.selected.onChange(_ => this.dirty = true)
init() {
//todo: make this more flexible for other resolutions //todo: make this more flexible for other resolutions
let bounds = new AABB(0, 162, 162, 126) let bounds = new AABB(0, 162, 162, 126)
this.root = globals.app.stage.addChild(new Container()) this.root = globals.app.stage.addChild(new Container())
this.root.position = bounds.min() this.root.position = bounds.min()
this.root.width = bounds.size.x
this.root.height = bounds.size.y
let name = new Text('Name: ',{fontFamily : 'babyblocks', fontSize: 8, fill : 0xffffff}); let name = new Text("Name: ", {
name.x = 2 fontFamily: "babyblocks",
fontSize: 8,
fill: 0xffffff
})
name.x = 1
this.root.addChild(name) this.root.addChild(name)
this.elements.name = name this.elements.name = name
globals.selected.onChange(selected => this.select(selected)) globals.selected.onChange(selected => this.select(selected))
} }
execute(delta : number) { select(entity: Entity) {
; (this.elements.name as Text).text = `Name: ${entity
?.getComponent(Name)
?.fullName() || "-"}`
} }
select(entity: Entity){ execute(delta: number) { }
(this.elements.name as Text).text = `Name: ${entity?.getComponent(Name)?.fullName() || "-"}`
}
static queries = { static queries = {}
UIComponent: { queries: any
components: [ Human ] }
},
}
queries: any;
}

19
Program/src/Systems/VisibleHumanSystem.ts
View file

@ -9,13 +9,16 @@ import { Vector } from "../Datatypes/vector"
// MovableSystem // MovableSystem
export class VisibleHumanSystem extends System { export class VisibleHumanSystem extends System {
priority = 50 priority = 50
execute(delta : number) { execute(delta: number) {
// add sprite at start // add sprite at start
this.queries.newHumans.results.forEach((entity: Entity) => { this.queries.newHumans.results.forEach((entity: Entity) => {
let texture = entity.getComponent(Appearance).idleTexture let texture = entity.getComponent(Appearance).idleTexture
entity.addComponent(SpriteRenderer, <SpriteRenderer>{texture: texture, offset: new Vector(-texture.width/2, -texture.height), scale:2}) entity.addComponent(SpriteRenderer, <SpriteRenderer>{
texture: texture,
offset: new Vector(-texture.width / 2, -texture.height),
scale: 2
})
}) })
//update sprite texture //update sprite texture
this.queries.visibleHumans.changed.forEach((entity: Entity) => { this.queries.visibleHumans.changed.forEach((entity: Entity) => {
@ -26,14 +29,14 @@ export class VisibleHumanSystem extends System {
static queries = { static queries = {
newHumans: { newHumans: {
components: [ Human, Appearance, InCabin, Position, Not(SpriteRenderer) ] components: [Human, Appearance, InCabin, Position, Not(SpriteRenderer)]
}, },
visibleHumans: { visibleHumans: {
components: [ Human, Appearance, InCabin, Position, SpriteRenderer ], components: [Human, Appearance, InCabin, Position, SpriteRenderer],
listen: { listen: {
changed: [ Appearance ] changed: [Appearance]
} }
}, }
} }
queries: any queries: any
} }

8
Program/src/Systems/rendering/RenderSystem.ts
View file

@ -1,12 +1,12 @@
import { System } from "ecsy" import { System } from "ecsy"
import globals from "../../globals"; import globals from "../../globals"
// MovableSystem // MovableSystem
export class RenderSystem extends System { export class RenderSystem extends System {
priority: 100 priority: 100
// This method will get called on every frame by default // This method will get called on every frame by default
execute(_delta : number) { execute(_delta: number) {
globals.app.renderer.render(globals.app.stage); globals.app.renderer.render(globals.app.stage)
} }
} }

36
Program/src/Systems/rendering/SpriteSystem.ts
View file

@ -1,22 +1,21 @@
import { System, Entity } from "ecsy"; import { System, Entity } from "ecsy"
import { Position } from "../../Components/position"; import { Position } from "../../Components/position"
import { SpriteRenderer } from "../../Components/rendering/spriteRenderer"; import { SpriteRenderer } from "../../Components/rendering/spriteRenderer"
import { Sprite, DisplayObject } from "pixi.js"; import { Sprite, DisplayObject } from "pixi.js"
import { PixiRepresentation } from "../../Components/rendering/pixiRepresentation"; import { PixiRepresentation } from "../../Components/rendering/pixiRepresentation"
import { addOrSetComponent } from "../../util"; import { addOrSetComponent } from "../../util"
import globals from "../../globals"; import globals from "../../globals"
import { Point } from "../../Datatypes/point"; import { Point } from "../../Datatypes/point"
// MovableSystem // MovableSystem
export class SpriteSystem extends System { export class SpriteSystem extends System {
priority: 70 priority: 70
// This method will get called on every frame by default // This method will get called on every frame by default
execute(delta : number) { execute(delta: number) {
// Iterate through all the entities on the query // Iterate through all the entities on the query
this.queries.sprites.added.forEach((entity: Entity) => { this.queries.sprites.added.forEach((entity: Entity) => {
if(!(entity as any).alive) if (!(entity as any).alive) return
return
let renderer = entity.getComponent(SpriteRenderer) let renderer = entity.getComponent(SpriteRenderer)
let pos = entity.getComponent(Position) let pos = entity.getComponent(Position)
@ -24,12 +23,13 @@ export class SpriteSystem extends System {
sprite.scale = new Point(renderer.scale) sprite.scale = new Point(renderer.scale)
sprite.position = pos.value.add(renderer.offset.scale(renderer.scale)) sprite.position = pos.value.add(renderer.offset.scale(renderer.scale))
globals.app.stage.addChild(sprite) globals.app.stage.addChild(sprite)
addOrSetComponent(entity, PixiRepresentation, <PixiRepresentation>{value: <DisplayObject>sprite}) addOrSetComponent(entity, PixiRepresentation, <PixiRepresentation>{
value: <DisplayObject>sprite
})
}) })
this.queries.sprites.changed.forEach((entity: Entity) => { this.queries.sprites.changed.forEach((entity: Entity) => {
if(!(entity as any).alive) if (!(entity as any).alive) return
return
let renderer = entity.getComponent(SpriteRenderer) let renderer = entity.getComponent(SpriteRenderer)
let pos = entity.getComponent(Position) let pos = entity.getComponent(Position)
let object = entity.getComponent(PixiRepresentation).value as Sprite let object = entity.getComponent(PixiRepresentation).value as Sprite
@ -40,12 +40,12 @@ export class SpriteSystem extends System {
static queries = { static queries = {
sprites: { sprites: {
components: [ SpriteRenderer, Position ], components: [SpriteRenderer, Position],
listen: { listen: {
added: true, added: true,
changed: true changed: true
} }
}, }
} }
queries: any; queries: any
} }

13
Program/src/constants.ts
View file

@ -5,14 +5,7 @@ export const canvasHeight = 288
export const roomBounds = new AABB(19, 34, 125, 113) export const roomBounds = new AABB(19, 34, 125, 113)
export const FirstNames = [ export const FirstNames = ["Jules", "Levi", "Sarah", "Simon", "Ronja", "Marko"]
"Jules",
"Levi",
"Sarah",
"Simon",
"Ronja",
"Marko"
]
export const LastNames = [ export const LastNames = [
"Adams", "Adams",
@ -40,5 +33,5 @@ export const LastNames = [
"White", "White",
"Xiang", "Xiang",
"Yakub", "Yakub",
"Zafar", "Zafar"
] ]

105
Program/src/setup.ts
View file

@ -1,70 +1,73 @@
import { Loader, Sprite } from "pixi.js"; import { Loader, Sprite } from "pixi.js"
import { Door } from "./Components/door"; import { Door } from "./Components/door"
import { DebugRect } from "./Components/rendering/debugRect"; import { DebugRect } from "./Components/rendering/debugRect"
import { roomBounds } from "./constants"; import { roomBounds } from "./constants"
import globals from "./globals"; import globals from "./globals"
import { createRandomHuman } from "./util"; import { createRandomHuman } from "./util"
import { Position } from "./Components/position"; import { Position } from "./Components/position"
import { Point } from "./Datatypes/point"; import { Point } from "./Datatypes/point"
import { World } from "ecsy"; import { World } from "ecsy"
import { TestSystem } from "./Systems/TestSystem"; import { TestSystem } from "./Systems/TestSystem"
import { AdventureReturnSystem } from "./Systems/AdventureReturnSystem"; import { AdventureReturnSystem } from "./Systems/AdventureReturnSystem"
import { DoorSystem } from "./Systems/DoorSystem"; import { DoorSystem } from "./Systems/DoorSystem"
import { RandomWalkSystem } from "./Systems/RandomWalkSystem"; import { RandomWalkSystem } from "./Systems/RandomWalkSystem"
import { PathWalkerSystem } from "./Systems/PathWalkerSystem"; import { PathWalkerSystem } from "./Systems/PathWalkerSystem"
import { VisibleHumanSystem } from "./Systems/VisibleHumanSystem"; import { VisibleHumanSystem } from "./Systems/VisibleHumanSystem"
import { SpriteSystem } from "./Systems/rendering/SpriteSystem"; import { SpriteSystem } from "./Systems/rendering/SpriteSystem"
import { ClickableSystem } from "./Systems/ClickableSystem"; import { ClickableSystem } from "./Systems/ClickableSystem"
import { InfoSystem } from "./Systems/InfoSystem"; import { InfoSystem } from "./Systems/InfoSystem"
import { DebugRenderSystem } from "./Systems/rendering/DebugRenderSystem"; import { DebugRenderSystem } from "./Systems/rendering/DebugRenderSystem"
import { ZOrderSystem } from "./Systems/rendering/ZOrderSystem"; import { ZOrderSystem } from "./Systems/rendering/ZOrderSystem"
import { PixiCleanupSystem } from "./Systems/rendering/PixiCleanupSystem"; import { PixiCleanupSystem } from "./Systems/rendering/PixiCleanupSystem"
import { RenderSystem } from "./Systems/rendering/RenderSystem"; import { RenderSystem } from "./Systems/rendering/RenderSystem"
import { Vector } from "./Datatypes/vector"; import { Vector } from "./Datatypes/vector"
export function setup() {
export function setup(){
// Create world and register the systems on it // Create world and register the systems on it
//we could also register components here but they should get automatically registered once used for the first time //we could also register components here but they should get automatically registered once used for the first time
globals.world = new World() globals.world = new World()
globals.world globals.world
.registerSystem(TestSystem) //prio -100 .registerSystem(TestSystem) //prio -100
.registerSystem(AdventureReturnSystem) //prio -100 .registerSystem(AdventureReturnSystem) //prio -100
.registerSystem(DoorSystem) //prio 0 .registerSystem(DoorSystem) //prio 0
.registerSystem(RandomWalkSystem) //prio 0 .registerSystem(RandomWalkSystem) //prio 0
.registerSystem(PathWalkerSystem) //prio 50 .registerSystem(PathWalkerSystem) //prio 50
.registerSystem(VisibleHumanSystem) //prio 50 .registerSystem(VisibleHumanSystem) //prio 50
.registerSystem(SpriteSystem) //prio 70 .registerSystem(SpriteSystem) //prio 70
.registerSystem(ClickableSystem) //prio 80 .registerSystem(ClickableSystem) //prio 80
.registerSystem(InfoSystem) //prio 80 .registerSystem(InfoSystem) //prio 80
.registerSystem(DebugRenderSystem) //prio 90 .registerSystem(DebugRenderSystem) //prio 90
.registerSystem(ZOrderSystem) //prio 98 .registerSystem(ZOrderSystem) //prio 98
.registerSystem(PixiCleanupSystem) //prio 99 .registerSystem(PixiCleanupSystem) //prio 99
.registerSystem(RenderSystem) //prio 100 .registerSystem(RenderSystem) //prio 100
let resources = Loader.shared.resources
let resources = Loader.shared.resources;
//base sprites without entity representation //base sprites without entity representation
const bgTex = new Sprite(resources["Background"].texture) const bgTex = new Sprite(resources["Background"].texture)
bgTex.scale = new Point(2) //TODO make texture of correct size bgTex.scale = new Point(2) //TODO make texture of correct size
globals.app.stage.addChild(bgTex) globals.app.stage.addChild(bgTex)
//start entities //start entities
//door //door
globals.world.createEntity() globals.world
.addComponent(Position, <Position>{value: new Point(76, 4)}) .createEntity()
.addComponent(Door, <Door>{open: true, .addComponent(Position, <Position>{ value: new Point(76, 4) })
openOffset: new Vector(0), openTex: resources["Door"].spritesheet.textures[0], .addComponent(Door, <Door>{
closedOffset: new Vector(0), closedTex: resources["Door"].spritesheet.textures[1]}) open: true,
openOffset: new Vector(0),
openTex: resources["Door"].spritesheet.textures[0],
closedOffset: new Vector(0),
closedTex: resources["Door"].spritesheet.textures[1]
})
//debug room bounds //debug room bounds
globals.world.createEntity() globals.world
.addComponent(DebugRect, <DebugRect>{color:0x0000FF, rect: roomBounds}) .createEntity()
.addComponent(DebugRect, <DebugRect>{ color: 0x0000ff, rect: roomBounds })
//example humans //example humans
//TODO delete those //TODO delete those
for(let i=0;i<10;i++) for (let i = 0; i < 10; i++) createRandomHuman(globals.world)
createRandomHuman(globals.world) }
}

49
Program/src/util.ts
View file

@ -11,16 +11,19 @@ import { roomBounds, FirstNames, LastNames } from "./constants"
import { Clickable } from "./Components/clickable" import { Clickable } from "./Components/clickable"
import globals from "./globals" import globals from "./globals"
export function addOrSetComponent(
export function addOrSetComponent(entity: Entity, Component: ComponentConstructor<Component>, values: any) { entity: Entity,
if(entity.hasComponent(Component)){ Component: ComponentConstructor<Component>,
values: any
) {
if (entity.hasComponent(Component)) {
//component exists, copy values into it //component exists, copy values into it
let component: any = entity.getMutableComponent(Component) let component: any = entity.getMutableComponent(Component)
if(component.copy){ if (component.copy) {
component.copy(values) component.copy(values)
} else { } else {
for (let name in values) { for (let name in values) {
component[name]= values[name] component[name] = values[name]
} }
} }
} else { } else {
@ -29,22 +32,32 @@ export function addOrSetComponent(entity: Entity, Component: ComponentConstructo
} }
} }
export function randomArrayValue(array: any[]):any{ export function randomArrayValue(array: any[]): any {
let randomIndex = Math.floor(Math.random() * array.length) let randomIndex = Math.floor(Math.random() * array.length)
return array[randomIndex] return array[randomIndex]
} }
export function createRandomHuman(world: World){ export function createRandomHuman(world: World) {
let resources = Loader.shared.resources; let resources = Loader.shared.resources
let entity = world.createEntity() let entity = world.createEntity()
entity entity
.addComponent(Human) .addComponent(Human)
.addComponent(Name, <Name>{first: randomArrayValue(FirstNames), last:randomArrayValue(LastNames)}) .addComponent(Name, <Name>{
.addComponent(Appearance, <Appearance>{idleTexture: resources["Human"].texture}) //Todo: generate appearance from body traits instead? first: randomArrayValue(FirstNames),
.addComponent(InCabin) last: randomArrayValue(LastNames)
.addComponent(Position, <Position>{value: roomBounds.randomPoint()}) })
.addComponent(OrderZ) .addComponent(Appearance, <Appearance>{
.addComponent(WalkRandomly) idleTexture: resources["Human"].texture
//todo: change this into selecing the human instead of killing it... }) //Todo: generate appearance from body traits instead?
.addComponent(Clickable, { actions: { "click": (event: interaction.InteractionEvent) => {globals.selected.set(entity)} }}) .addComponent(InCabin)
} .addComponent(Position, <Position>{ value: roomBounds.randomPoint() })
.addComponent(OrderZ)
.addComponent(WalkRandomly)
.addComponent(Clickable, {
actions: {
click: (event: interaction.InteractionEvent) => {
globals.selected.set(entity)
}
}
})
}

36
Program/style.css
View file

@ -1,4 +1,5 @@
html, body { html,
body {
margin: 10; margin: 10;
padding: 0; padding: 0;
background-color: rgb(198, 221, 235); background-color: rgb(198, 221, 235);
@ -11,28 +12,29 @@ canvas {
image-rendering: crisp-edges; image-rendering: crisp-edges;
} }
canvas, img { /* makes a change, noticeable [28/05/16] */ canvas,
image-rendering: optimizeSpeed; img {
image-rendering: -moz-crisp-edges; /* makes a change, noticeable [28/05/16] */
image-rendering: -webkit-optimize-contrast; image-rendering: optimizeSpeed;
image-rendering: optimize-contrast; image-rendering: -moz-crisp-edges;
image-rendering: pixelated; image-rendering: -webkit-optimize-contrast;
-ms-interpolation-mode: nearest-neighbor; image-rendering: optimize-contrast;
image-rendering: pixelated;
-ms-interpolation-mode: nearest-neighbor;
} }
@font-face { @font-face {
font-family: 'pinch'; font-family: "pinch";
src: url('assets/Fonts/pinch.woff2') format('woff2'), src: url("assets/Fonts/pinch.woff2") format("woff2"),
url('assets/Fonts/pinch.woff') format('woff'); url("assets/Fonts/pinch.woff") format("woff");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'babyblocks'; font-family: "babyblocks";
src: url('assets/Fonts/BabyBlocks.woff2') format('woff2'), src: url("assets/Fonts/BabyBlocks.woff2") format("woff2"),
url('assets/Fonts/BabyBlocks.woff') format('woff'), url("assets/Fonts/BabyBlocks.woff") format("woff"),
url('assets/Fonts/BabyBlocks.ttf') format('ttf'); url("assets/Fonts/BabyBlocks.ttf") format("ttf");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }