3 files changed, 132 insertions, 0 deletions
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..61618d9
--- /dev/null
+++ b/index.html
@@ -0,0 +1,20 @@
+<title>Game experiment</title>
+<meta charset="utf-8">
+<style>
+@font-face {
+  font-family: 'pixel-font';
+  src: url('teeny-tiny-pixls.otf') format('opentype');
+}
+
+body {
+  font-family: 'pixel-font';
+  font-size: 5px;
+}
+
+canvas {
+  image-rendering: optimizeSpeed;
+}
+</style>
+Nice.
+<canvas id="canvas"></canvas>
+<script src="index.js"></script>
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..ddf289b
--- /dev/null
+++ b/index.js
@@ -0,0 +1,112 @@
+'use strict'
+
+const canvas = document.getElementById('canvas')
+
+class ATBBar {
+  constructor() {
+    // State
+
+    this.progress = 0
+    this.segmentCount = 6
+    this.queuedActions = []
+
+    // Draw
+
+    this.canvas = document.createElement('canvas')
+    this.canvas.width = 200
+    this.canvas.height = 13
+  }
+
+  draw() {
+    const ctx = this.canvas.getContext('2d')
+    ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
+
+    /*
+    ctx.fillStyle = 'rgba(0, 0, 0, 1)'
+    ctx.fillRect(0, 0, this.canvas.width * this.progress, this.canvas.height)
+
+    ctx.globalCompositeOperation = 'source-in'
+    ctx.fillStyle = 'blue'
+    ctx.fillRect(1, 1, this.canvas.width - 2, this.canvas.height - 2)
+
+    ctx.globalCompositeOperation = 'source-over'
+    ctx.strokeStyle = '#000'
+    ctx.strokeRect(0.5, 0.5, this.canvas.width - 0.5, this.canvas.height - 0.5)
+    */
+
+    ctx.save()
+
+    ctx.beginPath()
+    ctx.rect(0, 0, this.canvas.width * this.progress, this.canvas.height)
+    ctx.clip()
+
+    ctx.fillStyle = '#77F'
+    ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)
+
+    ctx.restore()
+    ctx.strokeStyle = '#000'
+    ctx.strokeRect(0.5, 0.5, this.canvas.width - 0.5, this.canvas.height - 0.5)
+
+    const segmentWidth = this.canvas.width / this.segmentCount
+
+    for (let i = 1; i < this.segmentCount; i++) {
+      const x = Math.round(segmentWidth * i) + 0.5
+      ctx.beginPath()
+      ctx.moveTo(x, 0)
+      ctx.lineTo(x, this.canvas.height)
+      ctx.stroke()
+    }
+
+    {
+      let i = 0
+      for (const action of this.queuedActions) {
+        const rectX = Math.floor(segmentWidth * i) + 2
+        const rectW = Math.floor(segmentWidth * (i + action.size)) - rectX - 2
+        const textX = Math.round(rectX + rectW / 2)
+        const rectH = this.canvas.height - 5
+        const text = action.label
+        const actionFilled = this.progress * this.segmentCount >= i + action.size
+        if (actionFilled) {
+          ctx.fillStyle = 'gold'
+        } else {
+          ctx.fillStyle = 'white'
+        }
+        ctx.fillRect(rectX, 2, rectW, rectH)
+        ctx.strokeStyle = 'black'
+        ctx.strokeRect(rectX + 0.5, 2.5, rectW, rectH)
+        ctx.textAlign = 'center'
+        ctx.fillStyle = 'black'
+        ctx.font = '5px pixel-font'
+        ctx.fillText(text, textX, this.canvas.height / 2 + 2.5)
+        i += action.size
+      }
+    }
+  }
+
+  update(dt) {
+    this.progress = Math.min(1, this.progress + dt / 6)
+  }
+}
+
+const atbBar = new ATBBar()
+atbBar.queuedActions = [{label: 'Fire', size: 1}, {label: 'Fira', size: 2}, {label: 'Firaga', size: 3}]
+
+let lastTime = Date.now()
+
+function drawLoop() {
+  const dt = (Date.now() - lastTime) / 1000
+  lastTime = Date.now()
+
+  atbBar.update(dt)
+  atbBar.draw()
+
+  const ctx = canvas.getContext('2d')
+  ctx.clearRect(0, 0, canvas.width, canvas.height)
+  ctx.fillStyle = '#EEE'
+  ctx.fillRect(0, 0, canvas.width, canvas.height)
+  ctx.drawImage(atbBar.canvas, 20, canvas.height - 20 - atbBar.canvas.height)
+
+  requestAnimationFrame(drawLoop)
+}
+
+requestAnimationFrame(drawLoop)
diff --git a/teeny-tiny-pixls.otf b/teeny-tiny-pixls.otf
new file mode 100644
index 0000000..ebc33a5
--- /dev/null
+++ b/teeny-tiny-pixls.otf
Binary files differ