add formatter to project

Program/.prettierrc

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

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
   }
-}
+}

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;
-}
+  static queries = {}
+  queries: any
+}

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, <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
     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
-}
+}

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)
   }
-}
+}

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, <PixiRepresentation>{value: <DisplayObject>sprite})
+      addOrSetComponent(entity, PixiRepresentation, <PixiRepresentation>{
+        value: <DisplayObject>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;
-}
+  queries: any
+}

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",
-]
+  "Zafar"
+]

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, <Position>{value: new Point(76, 4)})
-    .addComponent(Door, <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, <Position>{ value: new Point(76, 4) })
+    .addComponent(Door, <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, <DebugRect>{color:0x0000FF, rect: roomBounds})
+  globals.world
+    .createEntity()
+    .addComponent(DebugRect, <DebugRect>{ color: 0x0000ff, rect: roomBounds })
 
   //example humans
   //TODO delete those
-  for(let i=0;i<10;i++)
-    createRandomHuman(globals.world)
-}
+  for (let i = 0; i < 10; i++) createRandomHuman(globals.world)
+}

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<Component>, values: any) {
-  if(entity.hasComponent(Component)){
+export function addOrSetComponent(
+  entity: Entity,
+  Component: ComponentConstructor<Component>,
+  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, <Name>{first: randomArrayValue(FirstNames), last:randomArrayValue(LastNames)})
-      .addComponent(Appearance, <Appearance>{idleTexture: resources["Human"].texture}) //Todo: generate appearance from body traits instead?
-      .addComponent(InCabin)
-      .addComponent(Position, <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)} }})
-}
+    .addComponent(Human)
+    .addComponent(Name, <Name>{
+      first: randomArrayValue(FirstNames),
+      last: randomArrayValue(LastNames)
+    })
+    .addComponent(Appearance, <Appearance>{
+      idleTexture: resources["Human"].texture
+    }) //Todo: generate appearance from body traits instead?
+    .addComponent(InCabin)
+    .addComponent(Position, <Position>{ value: roomBounds.randomPoint() })
+    .addComponent(OrderZ)
+    .addComponent(WalkRandomly)
+    .addComponent(Clickable, {
+      actions: {
+        click: (event: interaction.InteractionEvent) => {
+          globals.selected.set(entity)
+        }
+      }
+    })
+}

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;
-}
+}