act1scene1

jmou · Nov 3, 2021 · 5aeaaa1 · 5aeaaa1
commit 5aeaaa1
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="nodes.js"></script>
+  <style>
+    html { height: 100%; }
+    body { margin: 0; padding: 0; height: 100%; background: black; text-align: center; }
+    #center { position: absolute; width: 100%; top: 50%; transform: translateY(-50%); }
+    canvas { image-rendering: pixelated; border: 0 solid #333; border-width: 0 1px; }
+    #hit, #rules { display: none; }
+    .hit #hit { display: inline; }
+    .rules #rules { display: inline-block; height: 10em; color: white; vertical-align: top; text-align: left; }
+    canvas { width: 408px; height: 360px; }  /* 1x */
+    @media (min-width: 816px) and (min-height: 720px) {
+      canvas { width: 816px; height: 720px; }  /* 2x */
+      .hit canvas { width: 408px; height: 360px; }  /* 1x */
+    }
+    @media (min-width: 1224px) and (min-height: 1080px) {
+      canvas { width: 1224px; height: 1080px; }  /* 3x */
+      .hit canvas { width: 816px; height: 720px; }  /* 2x */
+    }
+  </style>
+</head>
+<body>
+  <div id=center>
+    <canvas id=game width=1224 height=1080></canvas>
+    <canvas id=hit width=1224 height=1080></canvas>
+    <div id=rules></div>
+    <div style="display: none">
+      <img id=baba src=baba.png>
+      <img id=flag src=flag.png>
+      <img id=is src=is.png>
+      <img id=noun-baba src=noun-baba.png>
+      <img id=noun-flag src=noun-flag.png>
+      <img id=noun-rock src=noun-rock.png>
+      <img id=noun-wall src=noun-wall.png>
+      <img id=noun-water src=noun-water.png>
+      <img id=rock src=rock.png>
+      <img id=verb-push src=verb-push.png>
+      <img id=verb-sink src=verb-sink.png>
+      <img id=verb-stop src=verb-stop.png>
+      <img id=verb-win src=verb-win.png>
+      <img id=verb-you src=verb-you.png>
+      <img id=wall src=wall.png>
+      <img id=water src=water.png>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/nodes.js b/nodes.js
@@ -0,0 +1,65 @@
+// CURTAIN {{{
+// CURTAIN }}}
+// ACT1SCENE1 {{{
+
+class ECS {
+  constructor() {
+    this.maxEntity = 0;
+    this.components = {};
+  }
+
+  addEntity(...components) {
+    const entity = ++this.maxEntity;
+    for (const c of components) {
+      this.attach(entity, c);
+    }
+    return entity;
+  }
+
+  attach(entity, component) {
+    (this.components[component.constructor.name] ||= {})[entity] = component;
+  }
+}
+
+class ComponentBounds {
+  constructor(x, y, width, height) {
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+  }
+}
+
+class ComponentWhiteBox {}
+
+class SystemRender {
+  constructor(world, canvas) {
+    this.world = world;
+    this.ctx = canvas.getContext('2d');
+  }
+
+  render() {
+    const { width, height } = this.ctx.canvas;
+    this.ctx.clearRect(0, 0, width, height);
+    for (const entity in this.world.components.ComponentWhiteBox || []) {
+      const { x, y, width, height } = this.world.components.ComponentBounds[entity];
+      this.ctx.fillStyle = 'white';
+      this.ctx.fillRect(x, y, width, height);
+    }
+  }
+}
+
+let world;
+
+window.onload = function() {
+  world = new ECS();
+  const canvas = document.getElementById('game');
+  const render = new SystemRender(world, canvas);
+  world.addEntity(
+    new ComponentBounds(100, 100, 80, 50),
+    new ComponentWhiteBox(),
+  );
+  render.render();
+};
+
+// ACT1SCENE1 }}}