add formatter to project

Program/.prettierrc

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

Program/src/Datatypes/vector.ts

@@ -6,8 +6,7 @@ export class Vector implements IPoint{
   y: number
 
   constructor(x: number, y?: number) {
-    if(y===undefined)
-      y = x
+    if (y === undefined) y = x
     this.x = x
     this.y = y
   }
@@ -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)

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)
-
     //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() || "-"}`
+    ; (this.elements.name as Text).text = `Name: ${entity
+      ?.getComponent(Name)
+      ?.fullName() || "-"}`
   }
 
-  static queries = {
-    UIComponent: {
-      components: [ Human ]
-    },
-  }
-  queries: any;
+  execute(delta: number) { }
+
+  static queries = {}
+  queries: any
 }

Program/src/Systems/VisibleHumanSystem.ts

@@ -10,12 +10,15 @@ import { Vector } from "../Datatypes/vector"
 export class VisibleHumanSystem extends System {
   priority = 50
 
-
   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) => {
@@ -33,7 +36,7 @@ export class VisibleHumanSystem extends System {
       listen: {
         changed: [Appearance]
       }
-    },
+    }
   }
   queries: any
 }

Program/src/Systems/rendering/RenderSystem.ts

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

Program/src/Systems/rendering/SpriteSystem.ts

@@ -1,11 +1,11 @@
-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 {
@@ -15,8 +15,7 @@ export class SpriteSystem extends System {
   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
@@ -45,7 +45,7 @@ export class SpriteSystem extends System {
         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,27 +1,26 @@
-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() {
   // Create world and register the systems on it
@@ -42,8 +41,7 @@ export function setup(){
     .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)
@@ -53,18 +51,23 @@ export function setup(){
   //start entities
 
   //door
-  globals.world.createEntity()
+  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]})
+    .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,8 +11,11 @@ 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) {
+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)
@@ -35,16 +38,26 @@ export function randomArrayValue(array: any[]):any{
 }
 
 export function createRandomHuman(world: World) {
-  let resources = Loader.shared.resources;
+  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(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(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,7 +12,9 @@ canvas {
   image-rendering: crisp-edges;
 }
 
-canvas, img { /* makes a change, noticeable [28/05/16] */
+canvas,
+img {
+  /* makes a change, noticeable [28/05/16] */
   image-rendering: optimizeSpeed;
   image-rendering: -moz-crisp-edges;
   image-rendering: -webkit-optimize-contrast;
@@ -20,19 +23,18 @@ canvas, img { /* makes a change, noticeable [28/05/16] */
   -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;
 }