Add Tetris theme

Amp-Thread-ID: https://ampcode.com/threads/T-019fbeb1-4c14-7775-baa1-5cd8579b1dfd
Co-authored-by: Amp <amp@ampcode.com>

6 files changed, 218 insertions, 0 deletions

diff --git a/internal/generator/templates/themes/tetris/MUSIC_LICENSE.txt b/internal/generator/templates/themes/tetris/MUSIC_LICENSE.txt
new file mode 100644
index 0000000..b38c025
--- /dev/null
+++ b/internal/generator/templates/themes/tetris/MUSIC_LICENSE.txt
@@ -0,0 +1,7 @@
+Track: Starlight City
+Author: Zane Little Music
+License: CC0 1.0 Universal / public domain dedication
+License URL: https://creativecommons.org/publicdomain/zero/1.0/
+Source: https://opengameart.org/content/starlight-city-loop-included
+
+Bundled as ambient.ogg for the snonux tetris theme.
diff --git a/internal/generator/templates/themes/tetris/ambient.ogg b/internal/generator/templates/themes/tetris/ambient.ogg
new file mode 100644
index 0000000..980f870
--- /dev/null
+++ b/internal/generator/templates/themes/tetris/ambient.ogg
diff --git a/internal/generator/templates/themes/tetris/meta.json b/internal/generator/templates/themes/tetris/meta.json
new file mode 100644
index 0000000..7d18283
--- /dev/null
+++ b/internal/generator/templates/themes/tetris/meta.json
@@ -0,0 +1,7 @@
+{
+  "title": "snonux.foo // BLOCK DROP",
+  "header_html": "<div class=\"logo\"><div class=\"block-logo\" aria-hidden=\"true\"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div class=\"logo-title\"><h1>snonux.foo</h1><p class=\"subtitle\">BLOCK DROP MICROBLOG · <a href=\"https://foo.zone\">FOO.ZONE</a> IS THE REAL BLOG</p><p class=\"logo-host\">Served by NetBSD on a Raspberry Pi 3</p></div></div><div class=\"nav\"><a href=\"atom.xml\" class=\"header-feed-link\" rel=\"alternate\" title=\"Atom feed\" type=\"application/atom+xml\">ATOM FEED</a><a href=\"https://foo.zone/about\" class=\"transmit-btn\"><span aria-hidden=\"true\">▦</span> DROP A LINE</a></div>",
+  "splash_inner_html": "<canvas class=\"splash-gl-canvas\" id=\"splash-gl-canvas\" aria-hidden=\"true\"></canvas><div class=\"splash-inner\"><div class=\"splash-stack\" aria-hidden=\"true\"><i class=\"b1\"></i><i class=\"b2\"></i><i class=\"b3\"></i><i class=\"b4\"></i><i class=\"b5\"></i><i class=\"b6\"></i><i class=\"b7\"></i><i class=\"b8\"></i><i class=\"b9\"></i><i class=\"b10\"></i><i class=\"b11\"></i><i class=\"b12\"></i></div><div class=\"splash-kicker\">LEVEL 01 · READY</div><div class=\"splash-title\">SNONUX</div><div class=\"splash-tag\">Stack thoughts. Clear lines.</div><div class=\"splash-hint\">PRESS ENTER OR CLICK TO DROP IN</div></div>",
+  "prev_page_text": "◀ NEWER BLOCKS",
+  "next_page_text": "OLDER BLOCKS ▶"
+}
diff --git a/internal/generator/templates/themes/tetris/sounds.json b/internal/generator/templates/themes/tetris/sounds.json
new file mode 100644
index 0000000..2333601
--- /dev/null
+++ b/internal/generator/templates/themes/tetris/sounds.json
@@ -0,0 +1,11 @@
+{
+  "splash": {"freqs":[261.63,329.63,392,523.25],"spacing":0.07,"gain":0.08,"wave":"square"},
+  "nav": {"freq":440,"wave":"square","dur":0.055,"gain":0.055},
+  "open": {"wave":"square","start":220,"end":660,"dur":0.12,"gain":0.07},
+  "close": {"wave":"square","start":440,"end":110,"dur":0.1,"gain":0.065},
+  "bounce": {"wave":"triangle","start":130,"end":65,"dur":0.08,"gain":0.07},
+  "ambient": {
+    "normal": {"bpm":128,"gain":0.028,"wave":"square","droneFreqs":[65.41,130.81],"pulseFreqs":[261.63,329.63,392],"cutoffMin":900,"cutoffMax":4200,"attack":0.01,"release":0.08,"melody":[{"freq":329.63,"dur":0.16,"step":0.24},{"freq":246.94,"dur":0.16,"step":0.24},{"freq":261.63,"dur":0.16,"step":0.24},{"freq":293.66,"dur":0.16,"step":0.24}],"drums":["kick","","snare","","kick","","snare",""],"file":"ambient.ogg","volume":0.34},
+    "wild": {"bpm":196,"gain":0.06,"wave":"square","droneFreqs":[65.41,130.81,261.63],"pulseFreqs":[523.25,659.25,783.99],"cutoffMin":1800,"cutoffMax":7600,"attack":0.005,"release":0.04,"detuneCents":6,"melody":[{"freq":659.25,"dur":0.08,"step":0.12},{"freq":523.25,"dur":0.08,"step":0.12},{"freq":783.99,"dur":0.08,"step":0.12},{"freq":1046.5,"dur":0.08,"step":0.12}],"drums":["kick","snare","kick","snare","kick","snare","kick","snare"],"file":"ambient.ogg","volume":0.48}
+  }
+}
diff --git a/internal/generator/templates/themes/tetris/theme.css b/internal/generator/templates/themes/tetris/theme.css
new file mode 100644
index 0000000..8c2f804
--- /dev/null
+++ b/internal/generator/templates/themes/tetris/theme.css
@@ -0,0 +1,97 @@
+:root {
+    --board:#080b12; --panel:#101520; --grid:#252b38; --ink:#f4f7fb; --muted:#929cad;
+    --cyan:#36c5f0; --blue:#4361ee; --orange:#ff922b; --yellow:#ffd43b;
+    --green:#51cf66; --violet:#b197fc; --red:#ff5c5c;
+}
+* { box-sizing:border-box; margin:0; padding:0; }
+body {
+    height:100vh; height:100dvh; overflow:hidden; color:var(--ink); background:var(--board);
+    font-family:"Arial Narrow","Roboto Condensed",Impact,sans-serif;
+}
+body::after {
+    content:""; position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.38;
+    background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
+    background-size:32px 32px;
+}
+#three-canvas { position:fixed; inset:0; width:100%; height:100%; z-index:1; }
+.overlay { position:relative; z-index:10; height:100vh; height:100dvh; display:flex; flex-direction:column; }
+header {
+    display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px 24px;
+    background:rgba(8,11,18,.91); border-bottom:4px solid var(--ink); box-shadow:0 4px 0 var(--blue);
+}
+.logo { display:flex; align-items:center; gap:15px; min-width:0; }
+.block-logo { display:grid; grid-template-columns:repeat(4,10px); grid-template-rows:repeat(3,10px); gap:2px; flex:0 0 auto; }
+.block-logo i { display:block; background:var(--cyan); box-shadow:inset 2px 2px rgba(255,255,255,.42),inset -2px -2px rgba(0,0,0,.28); }
+.block-logo i:nth-child(2),.block-logo i:nth-child(6),.block-logo i:nth-child(10) { background:var(--violet); }
+.block-logo i:nth-child(4),.block-logo i:nth-child(8),.block-logo i:nth-child(12) { background:var(--orange); }
+.block-logo i:nth-child(5),.block-logo i:nth-child(9) { background:var(--green); }
+.logo-title h1 { font:900 clamp(1.35rem,2.4vw,2rem)/.9 Impact,"Arial Black",sans-serif; letter-spacing:.06em; text-transform:uppercase; }
+.logo-title .subtitle { margin-top:6px; color:var(--muted); font:700 .66rem/1.2 "Courier New",monospace; letter-spacing:.08em; }
+.logo-title a { color:var(--cyan); text-decoration:none; }
+.nav { display:flex; align-items:center; gap:18px; flex:0 0 auto; }
+a.header-feed-link { color:var(--muted); font:700 .72rem "Courier New",monospace; }
+a.header-feed-link:hover { color:var(--yellow); }
+.transmit-btn,.page-nav a {
+    color:var(--ink); background:var(--blue); border:0; border-right:4px solid #263ca9; border-bottom:4px solid #263ca9;
+    padding:10px 17px; font:900 .76rem "Arial Narrow",sans-serif; letter-spacing:.08em; text-decoration:none; text-transform:uppercase;
+}
+.transmit-btn:hover,.page-nav a:hover { background:var(--yellow); color:var(--board); border-color:#b69200; transform:translate(1px,1px); }
+.nav-hints { color:var(--muted); background:rgba(16,21,32,.95); border-bottom:1px solid var(--grid); font:700 .66rem "Courier New",monospace; }
+.nav-hints-row { min-height:28px; }
+.nav-hints kbd { color:var(--yellow); background:var(--board); border:1px solid #4a5364; border-radius:0; padding:1px 4px; }
+.nav-fx-button { color:var(--muted); }
+.nav-fx-button:hover,.nav-fx-button[aria-pressed="true"] { color:var(--ink); background:#252c3a; }
+.content { flex:1; min-height:0; overflow-y:auto; padding:22px 24px; scrollbar-color:var(--cyan) var(--board); scrollbar-width:thin; }
+.post {
+    margin:0 0 14px; padding:19px 21px; cursor:pointer; color:var(--ink); background:rgba(16,21,32,.91);
+    border:1px solid #343b49; border-left:7px solid var(--cyan); box-shadow:7px 7px 0 rgba(0,0,0,.42);
+    transition:opacity .18s,transform .18s,border-color .18s;
+}
+.post:nth-child(7n+2) { border-left-color:var(--blue); }
+.post:nth-child(7n+3) { border-left-color:var(--orange); }
+.post:nth-child(7n+4) { border-left-color:var(--yellow); }
+.post:nth-child(7n+5) { border-left-color:var(--green); }
+.post:nth-child(7n+6) { border-left-color:var(--violet); }
+.post:nth-child(7n) { border-left-color:var(--red); }
+.post:hover { transform:translateX(5px); border-color:var(--ink); }
+.post-active { opacity:1!important; transform:translateX(7px); background:#171d29!important; border-color:var(--ink)!important; box-shadow:0 0 0 2px var(--yellow),9px 9px 0 rgba(0,0,0,.5)!important; }
+.post-header { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; margin-bottom:11px; font:700 .72rem "Courier New",monospace; text-transform:uppercase; }
+.post-header strong::before { content:"■ "; color:var(--yellow); }
+.post-time { justify-self:end; color:var(--muted); }
+.post-text { font:400 1rem/1.62 Arial,Helvetica,sans-serif; }
+.post-text a { color:var(--cyan); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }
+.post-image { margin-top:13px; border:4px solid var(--ink); border-radius:0; }
+.post-audio { width:100%; margin-top:12px; }
+.page-nav-footer { flex-shrink:0; padding:9px 24px; background:rgba(8,11,18,.95); border-top:1px solid var(--grid); }
+.page-nav { display:flex; justify-content:center; }
+.post-modal { display:none; position:fixed; inset:0; z-index:100; padding:40px 20px; overflow-y:auto; }
+.post-modal.active { display:block; }
+.modal-inner { max-width:790px; margin:auto; padding:32px; color:var(--ink); background:#111722; border:4px solid var(--ink); box-shadow:12px 12px 0 var(--blue); }
+.modal-close { float:right; color:var(--board); background:var(--yellow); border:0; font:900 .75rem "Courier New",monospace; cursor:pointer; }
+.modal-close:focus-visible,.transmit-btn:focus-visible,.page-nav a:focus-visible { outline:3px solid var(--cyan); outline-offset:4px; }
+[data-sno-theme="tetris"] .splash-overlay { background:rgba(8,11,18,.96); font-family:"Arial Narrow",Impact,sans-serif; }
+[data-sno-theme="tetris"] .splash-inner { position:relative; z-index:2; text-align:center; }
+.splash-stack { position:relative; width:132px; height:92px; margin:0 auto 22px; border:3px solid #596274; border-top:0; background:rgba(0,0,0,.28); }
+.splash-stack i { position:absolute; width:20px; height:20px; box-shadow:inset 3px 3px rgba(255,255,255,.42),inset -3px -3px rgba(0,0,0,.3); }
+.splash-stack .b1{left:3px;bottom:3px;background:var(--blue)} .splash-stack .b2{left:24px;bottom:3px;background:var(--blue)}
+.splash-stack .b3{left:45px;bottom:3px;background:var(--orange)} .splash-stack .b4{left:66px;bottom:3px;background:var(--orange)}
+.splash-stack .b5{left:87px;bottom:3px;background:var(--green)} .splash-stack .b6{left:108px;bottom:3px;background:var(--green)}
+.splash-stack .b7{left:3px;bottom:24px;background:var(--yellow)} .splash-stack .b8{left:24px;bottom:24px;background:var(--yellow)}
+.splash-stack .b9{left:66px;bottom:24px;background:var(--violet)} .splash-stack .b10{left:87px;bottom:24px;background:var(--violet)}
+.splash-stack .b11{left:87px;bottom:45px;background:var(--violet)} .splash-stack .b12{left:108px;bottom:45px;background:var(--red);animation:blockDrop 1.2s cubic-bezier(.3,.8,.4,1) infinite}
+@keyframes blockDrop { 0%{transform:translateY(-30px)} 65%,100%{transform:translateY(0)} 80%{filter:brightness(1.8)} }
+[data-sno-theme="tetris"] .splash-kicker { color:var(--yellow); font:700 .7rem "Courier New",monospace; letter-spacing:.2em; }
+[data-sno-theme="tetris"] .splash-title { margin:.2em 0 .1em; color:var(--ink); font:900 clamp(2.4rem,9vw,5.5rem)/.9 Impact,"Arial Black",sans-serif; letter-spacing:.08em; text-shadow:5px 5px 0 var(--blue); }
+[data-sno-theme="tetris"] .splash-tag { color:var(--cyan); font:700 clamp(.9rem,2vw,1.15rem) "Courier New",monospace; }
+[data-sno-theme="tetris"] .splash-hint { margin-top:1.5rem; color:var(--muted); font:700 .7rem "Courier New",monospace; letter-spacing:.14em; animation:hintBlink 1.1s steps(2,end) infinite; }
+@keyframes hintBlink { 50%{opacity:.35} }
+@media (max-width:640px) {
+    header{padding:10px 13px}.block-logo{grid-template-columns:repeat(4,8px);grid-template-rows:repeat(3,8px)}
+    .logo-title .subtitle,.logo-host,a.header-feed-link{display:none}.logo-title h1{font-size:1.25rem}.nav{gap:7px}.transmit-btn{padding:10px 9px;font-size:.66rem}
+    .content{padding:13px}.post{padding:15px;margin-bottom:11px}.post-text{font-size:.94rem}.post-header{gap:7px}.post-time{font-size:.62rem}
+    .nav-hints{font-size:.6rem}.nav-hints kbd,.nav-hints-label,.nav-hints-spacer{display:none}.nav-fx-button{min-height:44px;flex:1 1 auto;justify-content:center}
+    .modal-inner{padding:20px 14px}.modal-close{min-width:44px;min-height:44px}.page-nav-footer{padding:8px}
+}
+@media (prefers-reduced-motion:reduce) {
+    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.post{transition:none}
+}
diff --git a/internal/generator/templates/themes/tetris/theme.js b/internal/generator/templates/themes/tetris/theme.js
new file mode 100644
index 0000000..21a2a80
--- /dev/null
+++ b/internal/generator/templates/themes/tetris/theme.js
@@ -0,0 +1,96 @@
+(function () {
+    var reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    var colors = [0x36c5f0, 0x4361ee, 0xff922b, 0xffd43b, 0x51cf66, 0xb197fc, 0xff5c5c];
+    var shapes = [
+        [[-1,0],[0,0],[1,0],[2,0]], [[-1,0],[0,0],[1,0],[1,1]], [[-1,1],[-1,0],[0,0],[1,0]],
+        [[0,0],[1,0],[0,1],[1,1]], [[-1,0],[0,0],[0,1],[1,1]], [[-1,0],[0,0],[1,0],[0,1]], [[-1,1],[0,1],[0,0],[1,0]]
+    ];
+
+    function tetromino(shape, color, size) {
+        var group = new THREE.Group();
+        var geo = new THREE.BoxGeometry(size * .92, size * .92, size * .32);
+        var mat = new THREE.MeshPhongMaterial({color:color, shininess:55, flatShading:true});
+        shape.forEach(function (cell) {
+            var cube = new THREE.Mesh(geo, mat);
+            cube.position.set(cell[0] * size, cell[1] * size, 0);
+            group.add(cube);
+        });
+        return group;
+    }
+
+    function startScene(canvas, splash) {
+        if (!canvas || typeof THREE === 'undefined') return function () {};
+        var renderer = new THREE.WebGLRenderer({canvas:canvas, antialias:true, alpha:true});
+        renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
+        var scene = new THREE.Scene();
+        var camera = new THREE.PerspectiveCamera(52, 1, .1, 100);
+        camera.position.z = splash ? 12 : 25;
+        scene.add(new THREE.AmbientLight(0xffffff, .85));
+        var light = new THREE.DirectionalLight(0xffffff, 1.5); light.position.set(3, 8, 12); scene.add(light);
+        var pieces = [], wild = false, raf = 0, last = performance.now();
+        var count = splash ? 7 : 24;
+        for (var i = 0; i < count; i++) {
+            var p = tetromino(shapes[i % shapes.length], colors[i % colors.length], splash ? .42 : .72);
+            p.position.set((Math.random() - .5) * (splash ? 13 : 34), (Math.random() - .5) * 28, (Math.random() - .5) * 10);
+            p.rotation.z = Math.floor(Math.random() * 4) * Math.PI / 2;
+            p.userData.speed = .8 + Math.random() * 1.1;
+            pieces.push(p); scene.add(p);
+        }
+        function resize() {
+            var w = canvas.clientWidth || 2, h = canvas.clientHeight || 2;
+            renderer.setSize(w, h, false); camera.aspect = w / h; camera.updateProjectionMatrix();
+        }
+        function draw(now) {
+            var dt = Math.min((now - last) / 1000, .05); last = now;
+            pieces.forEach(function (p, i) {
+                p.position.y -= p.userData.speed * dt * (wild ? 6 : 1);
+                p.rotation.z += dt * (wild ? .75 : .04) * (i % 2 ? 1 : -1);
+                if (p.position.y < -16) { p.position.y = 16; p.position.x = (Math.random() - .5) * (splash ? 13 : 34); }
+            });
+            if (!splash) { camera.position.x = Math.sin(now * .00012) * (wild ? 8 : 2); camera.lookAt(0, 0, 0); }
+            renderer.render(scene, camera);
+            if (!reduced) raf = requestAnimationFrame(draw);
+        }
+        resize(); window.addEventListener('resize', resize); draw(last);
+        return function (state) {
+            if (typeof state === 'boolean') { wild = state; return; }
+            window.removeEventListener('resize', resize); if (raf) cancelAnimationFrame(raf); renderer.dispose();
+        };
+    }
+
+    var cleanSplash = function () {};
+    if (!document.documentElement.classList.contains('sno-splash-skip')) {
+        cleanSplash = startScene(document.getElementById('splash-gl-canvas'), true);
+        window._snonuxSplashWebGLCleanup = cleanSplash;
+    }
+    var setWild = startScene(document.getElementById('three-canvas'), false);
+    var wild = false;
+
+    function lineClear(color) {
+        var line = document.createElement('div');
+        line.style.cssText = 'position:fixed;left:0;right:0;top:50%;height:28px;z-index:9000;pointer-events:none;background:' + color + ';box-shadow:0 0 26px ' + color + ';transform:scaleX(0);transition:transform .16s steps(6,end),opacity .28s';
+        document.body.appendChild(line);
+        requestAnimationFrame(function () { line.style.transform = 'scaleX(1)'; });
+        setTimeout(function () { line.style.opacity = '0'; }, 180);
+        setTimeout(function () { line.remove(); }, 480);
+    }
+    window.snonuxOpenEffect = function () {
+        var modal = document.getElementById('post-modal');
+        if (modal) { modal.classList.add('sno-modal-zoom'); setTimeout(function () { modal.classList.remove('sno-modal-zoom'); }, 400); }
+        lineClear('#ffd43b');
+    };
+    window.snonuxCloseEffect = function () { lineClear('#4361ee'); };
+    window.snonuxNavEffect = function () { lineClear('#36c5f0'); };
+    window.snonuxPageEffect = function () { lineClear('#b197fc'); };
+    window.snonuxScrollEffect = function (dir) {
+        var active = document.querySelector('.post-active');
+        if (!active) return;
+        active.style.transform = 'translateX(' + (dir === 'down' ? '14px' : '-2px') + ')';
+        setTimeout(function () { active.style.transform = ''; }, 170);
+    };
+    window.snonuxWildToggle = function () {
+        wild = !wild; setWild(wild);
+        var badge = document.getElementById('sno-wild-badge'); if (badge) badge.classList.toggle('sno-wild-on', wild);
+        document.documentElement.style.setProperty('--sno-wild-accent', wild ? '#ffd43b' : '#36c5f0');
+    };
+})();