initial commit

1 files changed, 87 insertions, 0 deletions

diff --git a/src/engine/screen.js b/src/engine/screen.js
new file mode 100644
index 0000000..2d32b62
--- /dev/null
+++ b/src/engine/screen.js
@@ -0,0 +1,87 @@
+import { Vector } from "./vector.js"
+import { BACKGROUND } from "../assets.js"
+
+export class Screen {
+    viewport = new Vector(650, 500)
+
+    ///////////////////// START //////////////////////
+    constructor() {
+        this.createHTMLElements()
+        this.setUpTriggers()
+        this.resize()
+    }
+
+    createHTMLElements() {
+        this.div
+        this.background
+        this.spawn
+
+        /* create main div */
+        this.div = document.createElement("div")
+        this.div.id = "screen"
+        this.div.style.backgroundColor = "black"
+
+        /* create background image */
+        this.background = document.createElement("img")
+        this.background.className = "background"
+        this.background.src = `${BACKGROUND.DEFAULT}`
+        this.background.style.visibility = "hidden"
+        this.div.appendChild(this.background)
+
+        /* create relative div to append children */
+        this.spawn = document.createElement("div")
+        this.div.appendChild(this.spawn)
+        document.body.appendChild(this.div)
+    }
+
+    setUpTriggers() {
+        addEventListener("resize", () => { this.resize() });
+    }
+
+
+    ///////////////////// RESIZE //////////////////////
+    real_position = new Vector(0, 0)
+    real_size = new Vector(0, 0)
+    scale = new Vector(0, 0)
+
+    resize() {
+        let w = new Vector(window.innerWidth, window.innerHeight)
+
+        /* get max size keeping aspect ratio */
+        if (w.y / this.viewport.y > w.x / this.viewport.x) {
+            this.real_size.x = w.x
+            this.real_size.y = Math.floor(w.x / this.viewport.x * this.viewport.y)
+        } else {
+            this.real_size.y = w.y
+            this.real_size.x = Math.floor(w.y / this.viewport.y * this.viewport.x)
+        }
+        this.div.style.width = `${this.real_size.x}px`
+        this.div.style.height = `${this.real_size.y}px`
+
+        /* get centered position */
+        this.real_position.x = w.x / 2 - this.real_size.x / 2
+        this.real_position.y = w.y / 2 - this.real_size.y / 2
+        this.real_position.floor()
+
+        this.div.style.left = `${this.real_position.x}px`
+        this.div.style.top = `${this.real_position.y}px`
+
+        /* set scale */
+        this.scale = this.real_size.x / this.viewport.x
+    }
+
+
+    ///////////////////// COMMANDS //////////////////////
+    append(element) { this.spawn.appendChild(element) }
+
+    draw(span, position, size, /* rotation = 0 */) {
+        span.style.width = `${size.x * this.scale}px`
+        span.style.height = `${size.y * this.scale}px`
+        span.style.top = `${(position.y - size.x / 2) * this.scale}px`
+        span.style.left = `${(position.x - size.y / 2) * this.scale}px`
+    }
+
+    setBackground(img) { this.background.src = img }
+    showBackground() { this.background.visibility = "visible" }
+    hideBackground() { this.background.visibility = "hidden" }
+}