Added hex colour

Added a countdown timer
2026-01-26 11:02:33 +11:00 · 2026-01-16 22:12:30 +11:00
11 changed files with 291 additions and 16 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1 +1,3 @@
 target/
+.vscode/
+.idea/
--- a/site/hex-color/index.html
+++ b/site/hex-color/index.html
@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Hex Color Converter - Tools</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
+  <link rel="stylesheet" href="./style.css">
+  <script src="./script.js" defer></script>
+</head>
+<body class="container">
+    <header>
+      <hgroup>
+        <h1>Hex Color Converter</h1>
+        <p>Convert hex color values to normalized RGB components</p>
+      </hgroup>
+    </header>
+    <main>
+      <button id="addHexBtn">Add Hex</button>
+
+      <table id="colorTable" class="hidden">
+        <thead>
+          <tr>
+            <th>Preview</th>
+            <th>Hex</th>
+            <th>Normalized (R, G, B, A)</th>
+            <th>Action</th>
+          </tr>
+        </thead>
+        <tbody id="colorTableBody">
+        </tbody>
+      </table>
+
+      <button id="showHiddenBtn" class="hidden secondary">Show Hidden Rows</button>
+    </main>
+</body>
+</html>
--- a/site/hex-color/script.js
+++ b/site/hex-color/script.js
@ -0,0 +1,116 @@
+async function addHexFromClipboard() {
+  try {
+    const text = await navigator.clipboard.readText();
+    const hex = text.trim();
+
+    // Parse hex color
+    const color = parseHexColor(hex);
+    if (!color) {
+      alert('Invalid hex color in clipboard. Expected format: #RRGGBB or #RRGGBBAA');
+      return;
+    }
+
+    // Add row to table
+    addColorRow(hex, color);
+
+    // Show table if hidden
+    document.getElementById('colorTable').classList.remove('hidden');
+  } catch (err) {
+    alert('Failed to read from clipboard: ' + err.message);
+  }
+}
+
+document.getElementById('addHexBtn').addEventListener('click', addHexFromClipboard);
+
+document.getElementById('showHiddenBtn').addEventListener('click', () => {
+  const rows = document.querySelectorAll('#colorTableBody tr.hidden');
+  rows.forEach(row => row.classList.remove('hidden'));
+  updateShowHiddenButton();
+});
+
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'p' || e.key === 'P') {
+    addHexFromClipboard();
+  }
+});
+
+function parseHexColor(hex) {
+  // Remove leading hash if present
+  const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
+
+  // Validate hex string (6 or 8 characters)
+  if (!/^[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$/.test(cleanHex)) {
+    return null;
+  }
+
+  // Parse components
+  const r = parseInt(cleanHex.slice(0, 2), 16) / 255;
+  const g = parseInt(cleanHex.slice(2, 4), 16) / 255;
+  const b = parseInt(cleanHex.slice(4, 6), 16) / 255;
+  const a = cleanHex.length === 8 ? parseInt(cleanHex.slice(6, 8), 16) / 255 : 1.0;
+
+  return { r, g, b, a, hex: '#' + cleanHex };
+}
+
+function addColorRow(originalHex, color) {
+  const tbody = document.getElementById('colorTableBody');
+  const row = tbody.insertRow();
+
+  // Preview cell
+  const previewCell = row.insertCell();
+  const preview = document.createElement('div');
+  preview.style.width = '40px';
+  preview.style.height = '40px';
+  preview.style.backgroundColor = `rgba(${color.r * 255}, ${color.g * 255}, ${color.b * 255}, ${color.a})`;
+  preview.style.border = '1px solid #ccc';
+  preview.style.borderRadius = '4px';
+  previewCell.appendChild(preview);
+
+  // Hex cell
+  const hexCell = row.insertCell();
+  hexCell.textContent = color.hex;
+
+  // Normalized components cell
+  const normalizedCell = row.insertCell();
+  const normalizedText = `${color.r.toFixed(1)}, ${color.g.toFixed(1)}, ${color.b.toFixed(1)}, ${color.a.toFixed(1)}`;
+  normalizedCell.textContent = normalizedText;
+
+  // Action cell with copy and hide buttons
+  const actionCell = row.insertCell();
+
+  const copyBtn = document.createElement('button');
+  copyBtn.textContent = 'Copy';
+  copyBtn.className = 'secondary';
+  copyBtn.addEventListener('click', () => {
+    navigator.clipboard.writeText(normalizedText).then(() => {
+      const originalText = copyBtn.textContent;
+      copyBtn.textContent = 'Copied!';
+      setTimeout(() => {
+        copyBtn.textContent = originalText;
+      }, 1500);
+    }).catch(err => {
+      alert('Failed to copy: ' + err.message);
+    });
+  });
+  actionCell.appendChild(copyBtn);
+
+  const hideBtn = document.createElement('button');
+  hideBtn.textContent = 'Hide';
+  hideBtn.className = 'secondary';
+  hideBtn.addEventListener('click', () => {
+    row.classList.add('hidden');
+    updateShowHiddenButton();
+  });
+  actionCell.appendChild(hideBtn);
+}
+
+function updateShowHiddenButton() {
+  const hiddenRows = document.querySelectorAll('#colorTableBody tr.hidden');
+  const showHiddenBtn = document.getElementById('showHiddenBtn');
+
+  if (hiddenRows.length > 0) {
+    showHiddenBtn.classList.remove('hidden');
+  } else {
+    showHiddenBtn.classList.add('hidden');
+  }
+}
--- a/site/hex-color/style.css
+++ b/site/hex-color/style.css
@ -0,0 +1,20 @@
+.hidden {
+  display: none;
+}
+
+#colorTable {
+  margin-top: 2rem;
+}
+
+#colorTable button {
+  margin: 0;
+  margin-right: 0.5rem;
+}
+
+#colorTable td {
+  vertical-align: middle;
+}
+
+#showHiddenBtn {
+  margin-top: 1rem;
+}
--- a/site/index.html
+++ b/site/index.html
@ -30,6 +30,7 @@
      <li><a href="/finska/">Finska Scorecard</a></li>
      <li><a href="/mental-arithmatic/">Mental Arithmatic Game</a></li>
      <li><a href="/neon-snake/">Neon Snake</a>: vibe-coded by Google Gemini</li>
+      <li><a href="/hex-color/">Hex Color Converter</a></li>
    </ul>
  </main>
 </body>
--- a/site/mental-arithmatic/index.html
+++ b/site/mental-arithmatic/index.html
@ -2,25 +2,44 @@
 <html lang="en">
 <head>
  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
  <title>Mental Arithmatic - Tools</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
  <link rel="stylesheet" href="./style.css">
  <script src="./scripts/main.js" type="module"></script>
 </head>
 <body>
-  <div id="welcome-card" class="container" data-controller="welcome"
+  <div id="welcome-card" class="container welcome-card" data-controller="welcome"
       data-action="endGame@window->welcome#gameEnded">
    <header>
      <hgroup>
-        <h1>Mental Arithmatic</h1>
+        <h1>Fear of All Sums</h1>
        <p>A simple mental arithmetic game</p>
      </hgroup>
      <main>
+
+        <article class="game-variant">
+          <h3>Simple Sums</h3>
+          <p>A two number sum with each term up to two digits.</p>
+          <footer>
            <button data-action="click->welcome#startGame">Start Game</button>
+            <div class="high-scores" data-welcome-target="simpleHighScores"></div>
+          </footer>
+        </article>
      </main>
    </header>
  </div>
+  <div id="countdown-card" class="container game-card hidden" data-controller="countdown"
+       data-action="startCountdown@window->countdown#start">
+    <header>
+      <span>2:00</span>
+      <span>0</span>
+    </header>
+    <main>
+      <div class="countdown-timer" data-countdown-target="countdown">3</div>
+      <input class="fake" type="number" data-countdown-target="fakeinput" value="0">
+    </main>
+  </div>
  <div id="game-card" class="container game-card hidden" data-controller="game"
     data-action="startGame@window->game#start">
    <header>
--- a/site/mental-arithmatic/scripts/countdown.js
+++ b/site/mental-arithmatic/scripts/countdown.js
@ -0,0 +1,35 @@
+import { Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js";
+
+export class CountdownController extends Controller {
+    static targets = ["countdown", "fakeinput"];
+
+    start() {
+        this.element.classList.remove('hidden');
+
+        this._countdown = 3;
+        this.countdownTarget.innerText = this._countdown;
+
+        this._tickInterval = window.setInterval(this._tick.bind(this), 1000);
+        window.setTimeout(() => {
+            this.fakeinputTarget.focus();
+        }, 1);
+    }
+
+    _tick() {
+        this._countdown -= 1;
+
+        if (this._countdown === 0) {
+            this.countdownTarget.innerText = "GO!";
+        } else if (this._countdown < 0) {
+            window.clearInterval(this._tickInterval);
+            this._startActualGame();
+        } else {
+            this.countdownTarget.innerText = this._countdown;
+        }
+    }
+
+    _startActualGame() {
+        this.element.classList.add('hidden');
+        window.dispatchEvent(new CustomEvent("startGame"));
+    }
+}
--- a/site/mental-arithmatic/scripts/game.js
+++ b/site/mental-arithmatic/scripts/game.js
@ -70,16 +70,15 @@ export class GameController extends Controller {
            this.problemTarget.appendChild(div);
        }

-        this.answerTarget.disabled = false;
        this.answerTarget.value = "";
+
+        window.setTimeout(() => {
            this.answerTarget.focus();
+        }, 1);
    }

    _checkAnswer() {
        let isRight = parseInt(this.answerTarget.value) === this._answer;
-
-        this.answerTarget.disabled = true;
-
        let delay = 500;

        if (isRight) {
--- a/site/mental-arithmatic/scripts/main.js
+++ b/site/mental-arithmatic/scripts/main.js
@ -1,8 +1,10 @@
 import { Application } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js";
 import { WelcomeController } from "./welcome.js"
+import { CountdownController } from "./countdown.js"
 import { GameController } from "./game.js"

 window.Stimulus = Application.start();

 window.Stimulus.register('welcome', WelcomeController);
+window.Stimulus.register('countdown', CountdownController);
 window.Stimulus.register('game', GameController);
--- a/site/mental-arithmatic/scripts/welcome.js
+++ b/site/mental-arithmatic/scripts/welcome.js
@ -1,14 +1,35 @@
 import { Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js";

 export class WelcomeController extends Controller {
+    static targets = ["simpleHighScores"];
+
+    connect() {
+        this._buildHighScores();
+    }
+
    startGame(ev) {
        ev.preventDefault();

        this.element.classList.add('hidden');
-        window.dispatchEvent(new CustomEvent("startGame"));
+        window.dispatchEvent(new CustomEvent("startCountdown"));
    }

    gameEnded(ev) {
        this.element.classList.remove('hidden');
    }
+
+    _buildHighScores() {
+        let scores = {
+            last: 12,
+            high: 10,
+            streak: 3
+        };
+
+        let newEls = [
+            `<span>🏆 ${scores.last}</span>`,
+            `<span>🔥 ${scores.streak}</span>`,
+            `<span>↩️ ${scores.high}</span>`
+        ];
+        this.simpleHighScoresTarget.innerHTML = newEls.join('');
+    }
 }
--- a/site/mental-arithmatic/style.css
+++ b/site/mental-arithmatic/style.css
@ -3,14 +3,35 @@
 }

 body {
-    min-height: 100dvh;
    --pico-form-element-disabled-opacity: 1.0;
 }

 .game-card {
    display: flex;
    flex-direction: column;
-    min-height: 80dvh;
+    min-height: 50vh;
+}
+
+.welcome-card .game-variant footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.welcome-card .game-variant .high-scores {
+    display: flex;
+    gap: 10px;
+}
+
+.countdown-timer {
+    font-size: 3em;
+    text-align: center;
+    width: 100%;
+}
+
+input.fake {
+    position: fixed;
+    top: -600px;
 }

 .game-card header,
@ -29,6 +50,8 @@ body {

    display: flex;
    align-items: center;
+
+    padding-block-start: 40px;
 }

 .game-card .question {
@ -46,13 +69,13 @@ body {
 }

 .game-card .answer.right {
-    border-color: green;
-    color: green;
+    border-color: #4EB31B;
+    color: #4EB31B;
 }

 .game-card .answer.wrong {
-    border-color: red;
-    color: red;
+    border-color: #EE402E;
+    color: #EE402E;
 }

 .game-card .answer .indicator {
Author	SHA1	Message	Date
Leon Mika	7f6dcac154	Added hex colour All checks were successful / publish (push) Successful in 1m44s Details	2026-01-26 11:02:33 +11:00
Leon Mika	89a6b4d062	Added a countdown timer	2026-01-16 22:12:30 +11:00