From e85691a8c134c52a3c7e63b0cce3166c2afc4ffe Mon Sep 17 00:00:00 2001
From: Thomas Forgione <thomas@forgione.fr>
Date: Tue, 21 Aug 2018 09:36:14 +0200
Subject: [PATCH] Created class scene

---
 Makefile      |  1 +
 src/main.js   | 38 +++++++++++++----------------------
 src/object.js |  3 ---
 src/scene.js  | 55 +++++++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 70 insertions(+), 27 deletions(-)
 delete mode 100644 src/object.js
 create mode 100644 src/scene.js

diff --git a/Makefile b/Makefile
index 7af4ea4..9aed197 100644
--- a/Makefile
+++ b/Makefile
@@ -4,6 +4,7 @@ www/js/escalator.js: $(shell find src -name "*.js")
 	mkdir -p www/js
 	cat \
 		src/open.js \
+		src/scene.js \
 		src/box.js \
 		src/main.js \
 		src/close.js \
diff --git a/src/main.js b/src/main.js
index 14f43f2..35f13e9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,40 +1,30 @@
-let canvas, ctx, box;
+let box, scene;
 
 init();
-render();
+loop();
 
 function init() {
-    // Initialize canvas
-    canvas = document.getElementById('canvas');
-    document.body.style.margin = '0px';
-    onWindowResize();
-    ctx = canvas.getContext('2d');
+
+    // Initialize scene
+    scene = new Scene(document.getElementById('canvas'));
+    scene.autoResize();
+    box = new Box();
+    scene.add(box);
 
     // Initialize listeners
-    window.addEventListener('resize', onWindowResize);
+    window.addEventListener('resize', () => scene.autoResize());
     document.addEventListener('touchstart', () => box.jump());
 
-    // Initialize game
-    box = new Box();
 }
 
-function render() {
+function loop() {
+
     // Manage physics
-    box.update();
+    scene.update();
 
     // Do rendering
-    // canvas.width = canvas.width
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    ctx.beginPath();
-    ctx.fillStyle = 'rgb(255, 0, 0)';
-    ctx.rect(0, 0, canvas.width, canvas.height);
-    ctx.fill();
+    scene.render();
 
-    box.drawOn(canvas);
-    requestAnimationFrame(render);
+    requestAnimationFrame(loop);
 }
 
-function onWindowResize() {
-    canvas.width = window.innerWidth;
-    canvas.height = window.innerHeight;
-}
diff --git a/src/object.js b/src/object.js
deleted file mode 100644
index 7a58402..0000000
--- a/src/object.js
+++ /dev/null
@@ -1,3 +0,0 @@
-class Object {
-
-}
diff --git a/src/scene.js b/src/scene.js
new file mode 100644
index 0000000..9c41808
--- /dev/null
+++ b/src/scene.js
@@ -0,0 +1,55 @@
+class Scene {
+    constructor(canvas) {
+        this.canvas = canvas;
+        this.context = canvas.getContext('2d');
+        this.objects = [];
+    }
+
+    width() {
+        return this.canvas.width;
+    }
+
+    height() {
+        return this.canvas.height;
+    }
+
+    resize(width, height) {
+        this.canvas.width = width;
+        this.canvas.height = height;
+    }
+
+    autoResize() {
+        this.canvas.width = window.innerWidth;
+        this.canvas.height = window.innerHeight;
+    }
+
+    clear() {
+        this.context.clearRect(0, 0, this.width(), this.height());
+    }
+
+    drawBackground() {
+        this.context.fillStyle = 'rgb(255, 0, 0)';
+        this.context.beginPath();
+        this.context.rect(0, 0, this.canvas.width, this.canvas.height);
+        this.context.fill();
+    }
+
+    update(time = 0.002) {
+        for (let object of this.objects) {
+            object.update(time);
+        }
+    }
+
+    add(object) {
+        this.objects.push(object);
+    }
+
+    render() {
+        this.clear();
+        this.drawBackground();
+
+        for (let object of this.objects) {
+            object.drawOn(this.canvas);
+        }
+    }
+}