diff --git a/Program/.prettierrc b/Program/.prettierrc new file mode 100644 index 0000000..7c28b83 --- /dev/null +++ b/Program/.prettierrc @@ -0,0 +1,5 @@ +{ + "tabWidth": 2, + "useTabs": false, + "semi": false +} diff --git a/Program/src/Datatypes/vector.ts b/Program/src/Datatypes/vector.ts index 3ea0a1e..e7ed400 100644 --- a/Program/src/Datatypes/vector.ts +++ b/Program/src/Datatypes/vector.ts @@ -1,28 +1,27 @@ import { IPoint } from "pixi.js" // 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 y: number - constructor(x: number, y?: number){ - if(y===undefined) - y = x + constructor(x: number, y?: number) { + if (y === undefined) y = x this.x = x this.y = y } normalize(): Vector { let len = this.length() - if(len < 0.001){ - return new Vector(0,0) + if (len < 0.001) { + return new Vector(0, 0) } else { - return this.scale(1/len) + return this.scale(1 / len) } } 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 { @@ -35,10 +34,8 @@ export class Vector implements IPoint{ //IPoint interface functions set(x?: number, y?: number): void { - if (x !== undefined) - this.x = x - if (y !== undefined) - this.y = y + if (x !== undefined) this.x = x + if (y !== undefined) this.y = y } copyFrom(p: IPoint): this { this.set(p.x, p.y) @@ -51,4 +48,4 @@ export class Vector implements IPoint{ equals(p: IPoint): boolean { return this.x === p.x && this.y === p.y } -} \ No newline at end of file +} diff --git a/Program/src/Systems/InfoSystem.ts b/Program/src/Systems/InfoSystem.ts index e57d24b..a3dae28 100644 --- a/Program/src/Systems/InfoSystem.ts +++ b/Program/src/Systems/InfoSystem.ts @@ -1,50 +1,43 @@ -import { Human } from "../Components/human"; -import { Container, DisplayObject, Text } from "pixi.js"; -import { AABB } from "../Datatypes/aabb"; -import { System, Entity } from "ecsy"; -import globals from "../globals"; -import { Name } from "../Components/name"; +import { Container, DisplayObject, Text } from "pixi.js" +import { AABB } from "../Datatypes/aabb" +import { System, Entity } from "ecsy" +import globals from "../globals" +import { Name } from "../Components/name" // MovableSystem export class InfoSystem extends System { priority = 80 - dirty: boolean - root: Container - elements: {[id: string]:DisplayObject} = {} - - init(){ - globals.selected.onChange(_ => this.dirty = true) + elements: { [id: string]: DisplayObject } = {} + init() { //todo: make this more flexible for other resolutions let bounds = new AABB(0, 162, 162, 126) this.root = globals.app.stage.addChild(new Container()) 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}); - name.x = 2 + let name = new Text("Name: ", { + fontFamily: "babyblocks", + fontSize: 8, + fill: 0xffffff + }) + name.x = 1 this.root.addChild(name) this.elements.name = name 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){ - (this.elements.name as Text).text = `Name: ${entity?.getComponent(Name)?.fullName() || "-"}` - } + execute(delta: number) { } - static queries = { - UIComponent: { - components: [ Human ] - }, - } - queries: any; -} \ No newline at end of file + static queries = {} + queries: any +} diff --git a/Program/src/Systems/VisibleHumanSystem.ts b/Program/src/Systems/VisibleHumanSystem.ts index 315e548..2e677e8 100644 --- a/Program/src/Systems/VisibleHumanSystem.ts +++ b/Program/src/Systems/VisibleHumanSystem.ts @@ -9,13 +9,16 @@ import { Vector } from "../Datatypes/vector" // MovableSystem export class VisibleHumanSystem extends System { priority = 50 - - execute(delta : number) { + execute(delta: number) { // add sprite at start this.queries.newHumans.results.forEach((entity: Entity) => { let texture = entity.getComponent(Appearance).idleTexture - entity.addComponent(SpriteRenderer, {texture: texture, offset: new Vector(-texture.width/2, -texture.height), scale:2}) + entity.addComponent(SpriteRenderer, { + texture: texture, + offset: new Vector(-texture.width / 2, -texture.height), + scale: 2 + }) }) //update sprite texture this.queries.visibleHumans.changed.forEach((entity: Entity) => { @@ -26,14 +29,14 @@ export class VisibleHumanSystem extends System { static queries = { newHumans: { - components: [ Human, Appearance, InCabin, Position, Not(SpriteRenderer) ] + components: [Human, Appearance, InCabin, Position, Not(SpriteRenderer)] }, visibleHumans: { - components: [ Human, Appearance, InCabin, Position, SpriteRenderer ], + components: [Human, Appearance, InCabin, Position, SpriteRenderer], listen: { - changed: [ Appearance ] + changed: [Appearance] } - }, + } } queries: any -} \ No newline at end of file +} diff --git a/Program/src/Systems/rendering/RenderSystem.ts b/Program/src/Systems/rendering/RenderSystem.ts index d9a5539..92c06ca 100644 --- a/Program/src/Systems/rendering/RenderSystem.ts +++ b/Program/src/Systems/rendering/RenderSystem.ts @@ -1,12 +1,12 @@ import { System } from "ecsy" -import globals from "../../globals"; +import globals from "../../globals" // MovableSystem export class RenderSystem extends System { priority: 100 // This method will get called on every frame by default - execute(_delta : number) { - globals.app.renderer.render(globals.app.stage); + execute(_delta: number) { + globals.app.renderer.render(globals.app.stage) } -} \ No newline at end of file +} diff --git a/Program/src/Systems/rendering/SpriteSystem.ts b/Program/src/Systems/rendering/SpriteSystem.ts index afd5842..c779409 100644 --- a/Program/src/Systems/rendering/SpriteSystem.ts +++ b/Program/src/Systems/rendering/SpriteSystem.ts @@ -1,22 +1,21 @@ -import { System, Entity } from "ecsy"; -import { Position } from "../../Components/position"; -import { SpriteRenderer } from "../../Components/rendering/spriteRenderer"; -import { Sprite, DisplayObject } from "pixi.js"; -import { PixiRepresentation } from "../../Components/rendering/pixiRepresentation"; -import { addOrSetComponent } from "../../util"; -import globals from "../../globals"; -import { Point } from "../../Datatypes/point"; +import { System, Entity } from "ecsy" +import { Position } from "../../Components/position" +import { SpriteRenderer } from "../../Components/rendering/spriteRenderer" +import { Sprite, DisplayObject } from "pixi.js" +import { PixiRepresentation } from "../../Components/rendering/pixiRepresentation" +import { addOrSetComponent } from "../../util" +import globals from "../../globals" +import { Point } from "../../Datatypes/point" // MovableSystem export class SpriteSystem extends System { priority: 70 // This method will get called on every frame by default - execute(delta : number) { + execute(delta: number) { // Iterate through all the entities on the query this.queries.sprites.added.forEach((entity: Entity) => { - if(!(entity as any).alive) - return + if (!(entity as any).alive) return let renderer = entity.getComponent(SpriteRenderer) let pos = entity.getComponent(Position) @@ -24,12 +23,13 @@ export class SpriteSystem extends System { sprite.scale = new Point(renderer.scale) sprite.position = pos.value.add(renderer.offset.scale(renderer.scale)) globals.app.stage.addChild(sprite) - addOrSetComponent(entity, PixiRepresentation, {value: sprite}) + addOrSetComponent(entity, PixiRepresentation, { + value: sprite + }) }) this.queries.sprites.changed.forEach((entity: Entity) => { - if(!(entity as any).alive) - return + if (!(entity as any).alive) return let renderer = entity.getComponent(SpriteRenderer) let pos = entity.getComponent(Position) let object = entity.getComponent(PixiRepresentation).value as Sprite @@ -40,12 +40,12 @@ export class SpriteSystem extends System { static queries = { sprites: { - components: [ SpriteRenderer, Position ], + components: [SpriteRenderer, Position], listen: { added: true, changed: true } - }, + } } - queries: any; -} \ No newline at end of file + queries: any +} diff --git a/Program/src/constants.ts b/Program/src/constants.ts index 64091cd..21dea10 100644 --- a/Program/src/constants.ts +++ b/Program/src/constants.ts @@ -5,14 +5,7 @@ export const canvasHeight = 288 export const roomBounds = new AABB(19, 34, 125, 113) -export const FirstNames = [ - "Jules", - "Levi", - "Sarah", - "Simon", - "Ronja", - "Marko" -] +export const FirstNames = ["Jules", "Levi", "Sarah", "Simon", "Ronja", "Marko"] export const LastNames = [ "Adams", @@ -40,5 +33,5 @@ export const LastNames = [ "White", "Xiang", "Yakub", - "Zafar", -] \ No newline at end of file + "Zafar" +] diff --git a/Program/src/setup.ts b/Program/src/setup.ts index 395abd1..7765632 100644 --- a/Program/src/setup.ts +++ b/Program/src/setup.ts @@ -1,70 +1,73 @@ -import { Loader, Sprite } from "pixi.js"; -import { Door } from "./Components/door"; -import { DebugRect } from "./Components/rendering/debugRect"; -import { roomBounds } from "./constants"; -import globals from "./globals"; -import { createRandomHuman } from "./util"; -import { Position } from "./Components/position"; -import { Point } from "./Datatypes/point"; -import { World } from "ecsy"; -import { TestSystem } from "./Systems/TestSystem"; -import { AdventureReturnSystem } from "./Systems/AdventureReturnSystem"; -import { DoorSystem } from "./Systems/DoorSystem"; -import { RandomWalkSystem } from "./Systems/RandomWalkSystem"; -import { PathWalkerSystem } from "./Systems/PathWalkerSystem"; -import { VisibleHumanSystem } from "./Systems/VisibleHumanSystem"; -import { SpriteSystem } from "./Systems/rendering/SpriteSystem"; -import { ClickableSystem } from "./Systems/ClickableSystem"; -import { InfoSystem } from "./Systems/InfoSystem"; -import { DebugRenderSystem } from "./Systems/rendering/DebugRenderSystem"; -import { ZOrderSystem } from "./Systems/rendering/ZOrderSystem"; -import { PixiCleanupSystem } from "./Systems/rendering/PixiCleanupSystem"; -import { RenderSystem } from "./Systems/rendering/RenderSystem"; -import { Vector } from "./Datatypes/vector"; +import { Loader, Sprite } from "pixi.js" +import { Door } from "./Components/door" +import { DebugRect } from "./Components/rendering/debugRect" +import { roomBounds } from "./constants" +import globals from "./globals" +import { createRandomHuman } from "./util" +import { Position } from "./Components/position" +import { Point } from "./Datatypes/point" +import { World } from "ecsy" +import { TestSystem } from "./Systems/TestSystem" +import { AdventureReturnSystem } from "./Systems/AdventureReturnSystem" +import { DoorSystem } from "./Systems/DoorSystem" +import { RandomWalkSystem } from "./Systems/RandomWalkSystem" +import { PathWalkerSystem } from "./Systems/PathWalkerSystem" +import { VisibleHumanSystem } from "./Systems/VisibleHumanSystem" +import { SpriteSystem } from "./Systems/rendering/SpriteSystem" +import { ClickableSystem } from "./Systems/ClickableSystem" +import { InfoSystem } from "./Systems/InfoSystem" +import { DebugRenderSystem } from "./Systems/rendering/DebugRenderSystem" +import { ZOrderSystem } from "./Systems/rendering/ZOrderSystem" +import { PixiCleanupSystem } from "./Systems/rendering/PixiCleanupSystem" +import { RenderSystem } from "./Systems/rendering/RenderSystem" +import { Vector } from "./Datatypes/vector" - -export function setup(){ +export function setup() { // 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 globals.world = new World() globals.world - .registerSystem(TestSystem) //prio -100 - .registerSystem(AdventureReturnSystem) //prio -100 - .registerSystem(DoorSystem) //prio 0 - .registerSystem(RandomWalkSystem) //prio 0 - .registerSystem(PathWalkerSystem) //prio 50 - .registerSystem(VisibleHumanSystem) //prio 50 - .registerSystem(SpriteSystem) //prio 70 - .registerSystem(ClickableSystem) //prio 80 - .registerSystem(InfoSystem) //prio 80 - .registerSystem(DebugRenderSystem) //prio 90 - .registerSystem(ZOrderSystem) //prio 98 - .registerSystem(PixiCleanupSystem) //prio 99 - .registerSystem(RenderSystem) //prio 100 + .registerSystem(TestSystem) //prio -100 + .registerSystem(AdventureReturnSystem) //prio -100 + .registerSystem(DoorSystem) //prio 0 + .registerSystem(RandomWalkSystem) //prio 0 + .registerSystem(PathWalkerSystem) //prio 50 + .registerSystem(VisibleHumanSystem) //prio 50 + .registerSystem(SpriteSystem) //prio 70 + .registerSystem(ClickableSystem) //prio 80 + .registerSystem(InfoSystem) //prio 80 + .registerSystem(DebugRenderSystem) //prio 90 + .registerSystem(ZOrderSystem) //prio 98 + .registerSystem(PixiCleanupSystem) //prio 99 + .registerSystem(RenderSystem) //prio 100 - - let resources = Loader.shared.resources; + let resources = Loader.shared.resources //base sprites without entity representation const bgTex = new Sprite(resources["Background"].texture) bgTex.scale = new Point(2) //TODO make texture of correct size globals.app.stage.addChild(bgTex) - + //start entities //door - globals.world.createEntity() - .addComponent(Position, {value: new Point(76, 4)}) - .addComponent(Door, {open: true, - openOffset: new Vector(0), openTex: resources["Door"].spritesheet.textures[0], - closedOffset: new Vector(0), closedTex: resources["Door"].spritesheet.textures[1]}) + globals.world + .createEntity() + .addComponent(Position, { value: new Point(76, 4) }) + .addComponent(Door, { + 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 - globals.world.createEntity() - .addComponent(DebugRect, {color:0x0000FF, rect: roomBounds}) + globals.world + .createEntity() + .addComponent(DebugRect, { color: 0x0000ff, rect: roomBounds }) //example humans //TODO delete those - for(let i=0;i<10;i++) - createRandomHuman(globals.world) -} \ No newline at end of file + for (let i = 0; i < 10; i++) createRandomHuman(globals.world) +} diff --git a/Program/src/util.ts b/Program/src/util.ts index 68b9f68..9df6f56 100644 --- a/Program/src/util.ts +++ b/Program/src/util.ts @@ -11,16 +11,19 @@ import { roomBounds, FirstNames, LastNames } from "./constants" import { Clickable } from "./Components/clickable" import globals from "./globals" - -export function addOrSetComponent(entity: Entity, Component: ComponentConstructor, values: any) { - if(entity.hasComponent(Component)){ +export function addOrSetComponent( + entity: Entity, + Component: ComponentConstructor, + values: any +) { + if (entity.hasComponent(Component)) { //component exists, copy values into it let component: any = entity.getMutableComponent(Component) - if(component.copy){ + if (component.copy) { component.copy(values) } else { for (let name in values) { - component[name]= values[name] + component[name] = values[name] } } } 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) return array[randomIndex] } -export function createRandomHuman(world: World){ - let resources = Loader.shared.resources; +export function createRandomHuman(world: World) { + let resources = Loader.shared.resources let entity = world.createEntity() entity - .addComponent(Human) - .addComponent(Name, {first: randomArrayValue(FirstNames), last:randomArrayValue(LastNames)}) - .addComponent(Appearance, {idleTexture: resources["Human"].texture}) //Todo: generate appearance from body traits instead? - .addComponent(InCabin) - .addComponent(Position, {value: roomBounds.randomPoint()}) - .addComponent(OrderZ) - .addComponent(WalkRandomly) - //todo: change this into selecing the human instead of killing it... - .addComponent(Clickable, { actions: { "click": (event: interaction.InteractionEvent) => {globals.selected.set(entity)} }}) -} \ No newline at end of file + .addComponent(Human) + .addComponent(Name, { + first: randomArrayValue(FirstNames), + last: randomArrayValue(LastNames) + }) + .addComponent(Appearance, { + idleTexture: resources["Human"].texture + }) //Todo: generate appearance from body traits instead? + .addComponent(InCabin) + .addComponent(Position, { value: roomBounds.randomPoint() }) + .addComponent(OrderZ) + .addComponent(WalkRandomly) + .addComponent(Clickable, { + actions: { + click: (event: interaction.InteractionEvent) => { + globals.selected.set(entity) + } + } + }) +} diff --git a/Program/style.css b/Program/style.css index eb61726..296452d 100644 --- a/Program/style.css +++ b/Program/style.css @@ -1,4 +1,5 @@ -html, body { +html, +body { margin: 10; padding: 0; background-color: rgb(198, 221, 235); @@ -11,28 +12,29 @@ canvas { image-rendering: crisp-edges; } -canvas, img { /* makes a change, noticeable [28/05/16] */ - image-rendering: optimizeSpeed; - image-rendering: -moz-crisp-edges; - image-rendering: -webkit-optimize-contrast; - image-rendering: optimize-contrast; - image-rendering: pixelated; - -ms-interpolation-mode: nearest-neighbor; +canvas, +img { + /* makes a change, noticeable [28/05/16] */ + image-rendering: optimizeSpeed; + image-rendering: -moz-crisp-edges; + image-rendering: -webkit-optimize-contrast; + image-rendering: optimize-contrast; + image-rendering: pixelated; + -ms-interpolation-mode: nearest-neighbor; } - @font-face { - font-family: 'pinch'; - src: url('assets/Fonts/pinch.woff2') format('woff2'), - url('assets/Fonts/pinch.woff') format('woff'); + font-family: "pinch"; + src: url("assets/Fonts/pinch.woff2") format("woff2"), + url("assets/Fonts/pinch.woff") format("woff"); font-weight: normal; font-style: normal; } @font-face { - font-family: 'babyblocks'; - src: url('assets/Fonts/BabyBlocks.woff2') format('woff2'), - url('assets/Fonts/BabyBlocks.woff') format('woff'), - url('assets/Fonts/BabyBlocks.ttf') format('ttf'); + font-family: "babyblocks"; + src: url("assets/Fonts/BabyBlocks.woff2") format("woff2"), + url("assets/Fonts/BabyBlocks.woff") format("woff"), + url("assets/Fonts/BabyBlocks.ttf") format("ttf"); font-weight: normal; font-style: normal; -} \ No newline at end of file +}