thin_ice

index.html

@@ -222,6 +222,12 @@
         </p>
 
         <div class="card-grid reveal" style="transition-delay:0.15s">
+            <a class="card" href="projects/thin_ice/thin_ice.html">
+                <span class="card-date">14 Nov 2024</span>
+                <span class="card-title">Thin Ice</span>
+                <span class="card-desc">A small tile game created inspired by a childhood game.</span>
+                <span class="card-arrow">→</span>
+            </a>
             <a class="card" href="projects/cellular_automata/index.html">
                 <span class="card-date">23 Jul 2023</span>
                 <span class="card-title">Game of Life</span>

projects/thin_ice/fs/levels/1.ice

@@ -0,0 +1,7 @@
+Level 1
+............###
+....#######.#F#
+....#~~~~~#.#~#
+#####~###~###~#
+#S~~~~#.#~~~~~#
+#######.#######

projects/thin_ice/fs/levels/2.ice

@@ -0,0 +1,8 @@
+Level 2
+###........###
+#F#........#S#
+#~#####....#~#
+#~##~~######~#
+#~~~~~~~~~~~~#
+#~~####~~##~~#
+####..########

projects/thin_ice/fs/levels/3.ice

@@ -0,0 +1,9 @@
+Level 3
+#####......#####
+#~~~########~~~#
+#~#~##~~~~##~#~#
+#~~~~~~~~~~~~~~#
+##~####~~####~##
+.#~#.#~~~~#.#~#.
+.#S#.#~~~~#.#F#.
+.###.######.###.

projects/thin_ice/fs/levels/4.ice

@@ -0,0 +1,12 @@
+Level 4
+###############...
+#~~~~~~~~~~~~~#...
+#~###########~####
+#~###F~~~~~~~&~~~#
+#~###########~##~#
+#~###########S##~#
+#~##############~#
+#~##~~~~##~~####~#
+#~~~~~~~~~~~~~~~~#
+#######~~~~~~#####
+......########....

projects/thin_ice/fs/levels/5.ice

@@ -0,0 +1,13 @@
+Level 5
+#####...#####....
+#~~~#####~~~#....
+#~#~##S##~#~#....
+#~~&~~&~~&~~####.
+###~##~##~####F#.
+.##~##~##~####~##
+.#~~~~&~~&~~##~~#
+.#~~~#~##~#~#~~~#
+.#~~~~~##~~~#~###
+.#~##########~~~#
+.#~~~~~~~~~~~~~~#
+.################

projects/thin_ice/fs/levels/6.ice

@@ -0,0 +1,13 @@
+Level 6
+.################
+##~~~~~~~~~~~~~~#
+#~~####&&~~~~&~~#
+#~~~&~~~~~~~~&~~#
+###~&###~####~###
+..#~&###F#~~#~#..
+###~&#####~~#~#..
+#~~~~~####~~#S#..
+#~###~~~~~~~###..
+#~###~~~~~#~#....
+#~~~~~###~~~#....
+#######.#####....

projects/thin_ice/script.js

@@ -0,0 +1,94 @@
+const statusElement = document.getElementById("status");
+const progressElement = document.getElementById("progress");
+const spinnerElement = document.getElementById("spinner");
+const canvasElement = document.getElementById("canvas");
+const outputElement = document.getElementById("output");
+
+if (outputElement) {
+    outputElement.value = "";
+}
+
+canvasElement.addEventListener(
+    "webglcontextlost",
+    (event) => {
+        alert("WebGL context lost. You will need to reload the page.");
+        event.preventDefault();
+    },
+    false
+);
+
+function setStatus(text) {
+    if (!setStatus.last) {
+        setStatus.last = { time: Date.now(), text: "" };
+    }
+
+    if (text === setStatus.last.text) {
+        return;
+    }
+
+    const match = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
+    const now = Date.now();
+
+    if (match && now - setStatus.last.time < 30) {
+        return;
+    }
+
+    setStatus.last.time = now;
+    setStatus.last.text = text;
+
+    if (match) {
+        statusElement.innerHTML = match[1].trim();
+        progressElement.value = 100 * parseInt(match[2], 10);
+        progressElement.max = 100 * parseInt(match[4], 10);
+        progressElement.hidden = false;
+        spinnerElement.hidden = false;
+    } else {
+        statusElement.innerHTML = text;
+        progressElement.value = null;
+        progressElement.max = null;
+        progressElement.hidden = true;
+
+        if (!text) {
+            spinnerElement.style.display = "none";
+        }
+    }
+}
+
+var Module = window.Module || {};
+Module.print = (...args) => {
+    console.log(...args);
+
+    if (!outputElement) {
+        return;
+    }
+
+    const text = args.join(" ");
+    outputElement.value += text + "\n";
+    outputElement.scrollTop = outputElement.scrollHeight;
+};
+Module.canvas = canvasElement;
+Module.setStatus = setStatus;
+Module.totalDependencies = 0;
+Module.monitorRunDependencies = function (left) {
+    this.totalDependencies = Math.max(this.totalDependencies, left);
+    setStatus(
+        left
+            ? "Preparing... (" + (this.totalDependencies - left) + "/" + this.totalDependencies + ")"
+            : "All downloads complete."
+    );
+};
+
+setStatus("Downloading...");
+
+window.onerror = (message) => {
+    setStatus("Exception thrown, see JavaScript console");
+    spinnerElement.style.display = "none";
+    setStatus = (text) => {
+        if (text) {
+            console.error("[post-exception status] " + text);
+        }
+    };
+    return message;
+};
+
+window.Module = Module;

projects/thin_ice/style.css

@@ -0,0 +1,295 @@
+:root {
+    --bg-0: #0b1220;
+    --bg-1: #13213a;
+    --bg-2: #1b2f4d;
+    --ice: #cfeeff;
+    --snow: #f5fbff;
+    --accent: #7fd8ff;
+    --accent-2: #a7e8ff;
+    --text: #e9f2ff;
+    --muted: #b6c8df;
+    --ok: #9cf0b4;
+    --warn: #ffd47e;
+    --shadow: rgba(0, 0, 0, 0.35);
+    --card: rgba(255, 255, 255, 0.06);
+    --card-border: rgba(255, 255, 255, 0.15);
+}
+
+* {
+    box-sizing: border-box;
+}
+
+html,
+body {
+    margin: 0;
+    min-height: 100%;
+    color: var(--text);
+    background: radial-gradient(circle at 15% 10%, #223a5f 0%, var(--bg-1) 28%, var(--bg-0) 100%);
+    font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
+    image-rendering: pixelated;
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    padding: 2rem 1rem 3rem;
+    position: relative;
+    overflow-x: hidden;
+}
+
+body::before,
+body::after {
+    content: "";
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 0;
+}
+
+body::before {
+    background-image:
+            radial-gradient(2px 2px at 15% 20%, rgba(255, 255, 255, 0.7) 50%, transparent 51%),
+            radial-gradient(2px 2px at 35% 40%, rgba(255, 255, 255, 0.5) 50%, transparent 51%),
+            radial-gradient(2px 2px at 65% 15%, rgba(255, 255, 255, 0.6) 50%, transparent 51%),
+            radial-gradient(2px 2px at 80% 75%, rgba(255, 255, 255, 0.7) 50%, transparent 51%),
+            radial-gradient(2px 2px at 25% 85%, rgba(255, 255, 255, 0.55) 50%, transparent 51%);
+    opacity: 0.35;
+}
+
+body::after {
+    background: linear-gradient(180deg, transparent 0%, rgba(181, 227, 255, 0.08) 100%);
+}
+
+.page {
+    width: min(1100px, 100%);
+    position: relative;
+    z-index: 1;
+    display: grid;
+    gap: 1rem;
+}
+
+.hero,
+.panel {
+    background: var(--card);
+    border: 1px solid var(--card-border);
+    border-radius: 14px;
+    box-shadow: 0 10px 35px var(--shadow);
+    backdrop-filter: blur(3px);
+}
+
+.hero {
+    padding: 1rem 1.25rem;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem 1rem;
+}
+
+.title-group h1 {
+    margin: 0;
+    font-size: clamp(1.5rem, 2.3vw, 2rem);
+    letter-spacing: 0.02em;
+}
+
+.title-group p {
+    margin: 0.3rem 0 0;
+    color: var(--muted);
+    max-width: 60ch;
+    font-size: 0.95rem;
+    line-height: 1.4;
+}
+
+.pill-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+.pill {
+    border: 1px solid rgba(167, 232, 255, 0.35);
+    background: rgba(127, 216, 255, 0.12);
+    color: var(--snow);
+    padding: 0.35rem 0.55rem;
+    border-radius: 999px;
+    font-size: 0.8rem;
+    white-space: nowrap;
+}
+
+.layout {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: 1rem;
+}
+
+.game-shell {
+    padding: 1rem;
+    display: grid;
+    gap: 0.8rem;
+}
+
+.status-row {
+    display: grid;
+    gap: 0.5rem;
+}
+
+.loading {
+    display: flex;
+    align-items: center;
+    gap: 0.55rem;
+    color: var(--muted);
+    font-size: 0.9rem;
+    min-height: 1.1rem;
+}
+
+.spinner {
+    width: 14px;
+    height: 14px;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-top-color: var(--accent-2);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+    flex: 0 0 auto;
+}
+
+#status {
+    font-weight: 600;
+    color: var(--ice);
+}
+
+#progress {
+    width: 100%;
+    height: 12px;
+    border: 0;
+    border-radius: 999px;
+    overflow: hidden;
+    background: rgba(255, 255, 255, 0.15);
+}
+
+#progress::-webkit-progress-bar {
+    background: rgba(255, 255, 255, 0.15);
+}
+
+#progress::-webkit-progress-value {
+    background: linear-gradient(90deg, #95dfff, #d8f4ff);
+}
+
+#progress::-moz-progress-bar {
+    background: linear-gradient(90deg, #95dfff, #d8f4ff);
+}
+
+.canvas-frame {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 12px;
+    padding: 0.6rem;
+    overflow: auto;
+}
+
+#canvas {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    margin: 0 auto;
+    border-radius: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    background: #000;
+    outline: none;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.8rem;
+    color: var(--muted);
+    font-size: 0.9rem;
+}
+
+.controls label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    user-select: none;
+    cursor: pointer;
+}
+
+.controls input[type="checkbox"] {
+    accent-color: #8ad6ff;
+    cursor: pointer;
+}
+
+.btn {
+    border: 1px solid rgba(167, 232, 255, 0.6);
+    color: var(--snow);
+    background: linear-gradient(180deg, rgba(146, 217, 255, 0.35), rgba(88, 173, 222, 0.3));
+    border-radius: 8px;
+    padding: 0.42rem 0.7rem;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.btn:hover {
+    filter: brightness(1.08);
+}
+
+.sidebar {
+    padding: 1rem;
+    display: grid;
+    gap: 0.8rem;
+    align-content: start;
+}
+
+.sidebar h2 {
+    margin: 0;
+    font-size: 1.05rem;
+}
+
+.sidebar p,
+.sidebar li {
+    margin: 0;
+    color: var(--muted);
+    font-size: 0.92rem;
+    line-height: 1.45;
+}
+
+.sidebar ul {
+    margin: 0;
+    padding-left: 1.1rem;
+    display: grid;
+    gap: 0.45rem;
+}
+
+.hint {
+    border-left: 3px solid var(--accent);
+    padding: 0.5rem 0.65rem;
+    background: rgba(127, 216, 255, 0.1);
+    border-radius: 6px;
+    color: #d5f2ff;
+}
+
+#output {
+    display: none;
+    width: 100%;
+    min-height: 120px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 8px;
+    color: #fff;
+    background: #0a0f19;
+    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+    font-size: 0.8rem;
+    padding: 0.5rem;
+    resize: vertical;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@media (max-width: 920px) {
+    .layout {
+        grid-template-columns: 1fr;
+    }
+}

projects/thin_ice/thin_ice.html

@@ -0,0 +1,63 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="description" content="Thin Ice - a cute pixel art winter puzzle game." />
+  <title>Thin Ice | havox</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <main class="page">
+    <section class="hero">
+      <div class="title-group">
+        <h1>Thin Ice</h1>
+        <p>
+          A game inspired by the Club Penguin mini-game of the same name.
+        </p>
+      </div>
+    </section>
+
+    <section class="layout">
+      <article class="panel game-shell" aria-label="Thin Ice game canvas">
+        <div class="status-row">
+          <div class="loading">
+            <div class="spinner" id="spinner" aria-hidden="true"></div>
+            <div id="status" role="status" aria-live="polite">Downloading...</div>
+          </div>
+          <progress id="progress" max="100" value="0" hidden></progress>
+        </div>
+
+        <div class="canvas-frame">
+          <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex="-1"></canvas>
+        </div>
+
+        <div class="controls" id="controls">
+          <label><input type="checkbox" id="resize" /> Resize canvas</label>
+          <label><input type="checkbox" id="pointerLock" checked /> Lock/hide mouse pointer</label>
+          <button
+            class="btn"
+            type="button"
+            onclick='Module.requestFullscreen(document.getElementById("pointerLock").checked,document.getElementById("resize").checked)'>
+            Fullscreen
+          </button>
+        </div>
+
+        <textarea id="output" rows="8" aria-label="Runtime output"></textarea>
+      </article>
+
+      <aside class="panel sidebar" aria-label="How to play">
+        <h2>How to Play</h2>
+        <ul>
+          <li>Start on the first tile and plan your route before moving.</li>
+          <li>Reach the end tile while avoiding water and broken ice.</li>
+          <li>If you slip up, reset and try a smarter path.</li>
+        </ul>
+      </aside>
+    </section>
+  </main>
+
+  <script src="script.js"></script>
+  <script async src="thin_ice.js"></script>
+</body>
+</html>