From f19dafdd3753eafaf8459f3f3a9fad72c86b2ccf Mon Sep 17 00:00:00 2001
From: Alexander Popov <iiiypuk@fastmail.fm>
Date: Sun, 23 Apr 2023 19:13:53 +0300
Subject: [PATCH] update example

---
 .prettierignore        |  1 +
 src/js/.gitignore      |  2 +-
 src/js/game.example.js | 33 +++++++++++++++++++++++----------
 src/styles.css         |  4 ++++
 4 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/.prettierignore b/.prettierignore
index e1ee063..05b0aa4 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -2,3 +2,4 @@
 **/node_modules
 
 *.html
+*.css
diff --git a/src/js/.gitignore b/src/js/.gitignore
index 591a201..444fa09 100644
--- a/src/js/.gitignore
+++ b/src/js/.gitignore
@@ -1 +1 @@
-game.js
+game.js*
diff --git a/src/js/game.example.js b/src/js/game.example.js
index 93c84c6..2262686 100644
--- a/src/js/game.example.js
+++ b/src/js/game.example.js
@@ -1,10 +1,11 @@
 import { App } from './app.js';
 import { Scene, SceneLayer } from './scene.js';
-import { Rect, StrokeRect } from './objects.js';
+import { Rect, StrokeRect, Sprite } from './objects.js';
 
+// init player
 let Player = {
-  x: 10,
-  y: 10,
+  x: 400 / 2 - 5,
+  y: 400 / 2 - 5,
   rect: null,
 };
 Player.rect = new Rect(Player.x, Player.y, 10, 10, 'black');
@@ -13,16 +14,27 @@ Player.rect.ticker = () => {
   Player.rect.x = Player.x;
 };
 
-let app = new App(document.querySelector('canvas'), 400, 400);
-
-let firstScene = new Scene(app.canvas, app.context, 400, 400);
-let firstLayer = new SceneLayer('background', [
+// init scene layers
+let layerBg = new SceneLayer('background', [
   new Rect(50, 50, 100, 100, 'red'),
   new StrokeRect(150, 150, 40, 40, 'green', 'blue', 1),
-
-  Player.rect,
 ]);
-firstScene.addLayer(firstLayer);
+
+let layerHud = new SceneLayer('hud', [
+  new Sprite('compass.png', 15, 15),
+  new Sprite('compass-arrow.png', 27, 21),
+]);
+
+let layerInstances = new SceneLayer('Instances', [Player.rect]);
+
+// init app
+let app = new App(document.querySelector('canvas'), 400, 400);
+
+// init scene
+let firstScene = new Scene(app.canvas, app.context, 400, 400);
+firstScene.addLayer(layerBg);
+firstScene.addLayer(layerInstances);
+firstScene.addLayer(layerHud);
 
 app.scene = firstScene;
 
@@ -31,6 +43,7 @@ window.addEventListener('DOMContentLoaded', () => {
   document.body.appendChild(app.view);
 });
 
+// player key press listener
 document.addEventListener('keydown', (e) => {
   switch (e.code) {
     case 'ArrowUp':
diff --git a/src/styles.css b/src/styles.css
index e69de29..ee96c18 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -0,0 +1,4 @@
+canvas {
+	image-rendering: crisp-edges;
+	image-rendering: pixelated;
+}