From a1157e8f8b0623afc3bc4f37e7a939ad6879dde5 Mon Sep 17 00:00:00 2001 From: Paul Buetow Date: Sat, 1 Aug 2026 22:04:37 +0300 Subject: Add Tetris theme Amp-Thread-ID: https://ampcode.com/threads/T-019fbeb1-4c14-7775-baa1-5cd8579b1dfd Co-authored-by: Amp --- .../templates/themes/tetris/MUSIC_LICENSE.txt | 7 ++ .../generator/templates/themes/tetris/ambient.ogg | Bin 0 -> 1937080 bytes .../generator/templates/themes/tetris/meta.json | 7 ++ .../generator/templates/themes/tetris/sounds.json | 11 +++ .../generator/templates/themes/tetris/theme.css | 97 +++++++++++++++++++++ .../generator/templates/themes/tetris/theme.js | 96 ++++++++++++++++++++ 6 files changed, 218 insertions(+) create mode 100644 internal/generator/templates/themes/tetris/MUSIC_LICENSE.txt create mode 100644 internal/generator/templates/themes/tetris/ambient.ogg create mode 100644 internal/generator/templates/themes/tetris/meta.json create mode 100644 internal/generator/templates/themes/tetris/sounds.json create mode 100644 internal/generator/templates/themes/tetris/theme.css create mode 100644 internal/generator/templates/themes/tetris/theme.js 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 Binary files /dev/null and b/internal/generator/templates/themes/tetris/ambient.ogg differ 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": "

snonux.foo

BLOCK DROP MICROBLOG · FOO.ZONE IS THE REAL BLOG

Served by NetBSD on a Raspberry Pi 3

ATOM FEED▦ DROP A LINE
", + "splash_inner_html": "
LEVEL 01 · READY
SNONUX
Stack thoughts. Clear lines.
PRESS ENTER OR CLICK TO DROP IN
", + "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'); + }; +})(); -- cgit v1.2.3