<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>tRoom* floor.exe</title> <link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet"> <style> :root{ --blue:#1F4BEF; --mag:#C82BA0; --yel:#EDDC4C; --ink:#0A0A0A; --paper:#F4F2EC; --w95:#C0C0C0; --w95-lt:#FFFFFF; --w95-dk:#808080; --w95-xdk:#000; --ui: Tahoma, Verdana, "Segoe UI", sans-serif; --body: "Helvetica Neue", Helvetica, Arial, sans-serif; --display: Anton, "Helvetica Neue", Impact, sans-serif; } *{box-sizing:border-box} [hidden]{display:none!important} html,body{margin:0;background:transparent} body{font-family:var(--body);color:var(--ink);-webkit-tap-highlight-color:transparent} .wrap{max-width:720px;margin:0 auto;padding:12px} /* window chrome */ .win{background:var(--w95);border:2px solid;border-color:var(--w95-lt) var(--w95-xdk) var(--w95-xdk) var(--w95-lt);box-shadow:inset -1px -1px var(--w95-dk),inset 1px 1px #dfdfdf;padding:3px} .titlebar{display:flex;align-items:center;justify-content:space-between;gap:8px;background:linear-gradient(90deg,var(--blue),#6a86f5);color:#fff;font:bold 13px var(--ui);padding:2px 3px 2px 6px;height:24px} .titlebar .ctrls{display:flex;gap:2px} .btn95{font:12px var(--ui);background:var(--w95);color:var(--ink);border:2px solid;border-color:var(--w95-lt) var(--w95-xdk) var(--w95-xdk) var(--w95-lt);box-shadow:inset -1px -1px var(--w95-dk);padding:5px 14px;cursor:pointer;text-decoration:none;display:inline-block;line-height:1.2} .btn95:active{border-color:var(--w95-xdk) var(--w95-lt) var(--w95-lt) var(--w95-xdk);box-shadow:inset 1px 1px var(--w95-dk)} .btn95:focus-visible{outline:1px dotted #000;outline-offset:-5px} .btn95.primary{background:var(--yel);font-weight:bold} .tiny{min-width:22px;height:18px;padding:0 4px;font-size:11px} /* stage */ .stage{position:relative;margin-top:3px;border:2px solid;border-color:var(--w95-dk) var(--w95-lt) var(--w95-lt) var(--w95-dk);background:var(--blue);aspect-ratio:4/3;max-height:72vh;width:100%;overflow:hidden;touch-action:manipulation;user-select:none;-webkit-user-select:none;cursor:pointer;outline:none} @media (max-width:520px){.stage{aspect-ratio:4/5}} canvas{position:absolute;inset:0;width:100%;height:100%;display:block} .hud{position:absolute;left:10px;right:10px;top:10px;display:flex;gap:6px;align-items:center;pointer-events:none} .chip{background:var(--yel);color:var(--ink);font:bold 12px var(--ui);padding:3px 7px;border:1px solid var(--ink);white-space:nowrap} .chip.dark{background:var(--ink);color:var(--yel)} .meter{flex:1;height:20px;background:rgba(0,0,0,.35);border:1px solid var(--ink);position:relative} .meter i{position:absolute;left:0;top:0;bottom:0;width:50%;background:var(--mag);transition:width .15s ease-out} .meter b{position:absolute;inset:0;font:bold 11px/18px var(--ui);color:#fff;padding-left:6px;letter-spacing:.04em} /* overlays */ .screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;background:rgba(31,75,239,.9);color:#fff;cursor:default} .screen[hidden]{display:none} .screen h1{font:400 clamp(40px,9vw,76px)/.88 var(--display);text-transform:uppercase;margin:0 0 14px;letter-spacing:.01em} .screen h1 span{color:var(--yel)} .screen p{margin:0 0 18px;font-size:15px;line-height:1.4;max-width:34ch} .screen .row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center} .screen .best{margin-top:14px;font:12px var(--ui);opacity:.85} .stats{display:grid;grid-template-columns:repeat(3,auto);gap:4px 18px;margin:0 0 18px;font:12px var(--ui)} .stats div{display:flex;flex-direction:column;align-items:center} .stats strong{font:400 26px/1.1 var(--display);color:var(--yel)} /* status bar */ .status{display:flex;gap:3px;margin-top:3px;font:11px var(--ui)} .status span{flex:1;border:1px solid;border-color:var(--w95-dk) var(--w95-lt) var(--w95-lt) var(--w95-dk);padding:2px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .status span:last-child{flex:0 0 auto} /* ticker */ .ticker{margin-top:10px;background:var(--yel);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);overflow:hidden;white-space:nowrap;padding:7px 0} .track{display:inline-block;font:400 20px/1 var(--display);text-transform:uppercase;animation:tick 24s linear infinite} .track span{padding:0 14px} .track em{font-style:normal;color:var(--mag)} .track .nm{text-transform:none} @keyframes tick{to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.track{animation:none}} </style> </head> <body> <div class="wrap"> <div class="win"> <div class="titlebar"> <span>✱ floor.exe — tRoom*</span> <div class="ctrls"><button class="btn95 tiny" id="mute" aria-label="Mute sound" title="sound on/off">♪</button></div> </div> <div class="stage" id="stage" tabindex="0" aria-label="Game area. Tap or press space on every kick."> <canvas id="c"></canvas> <div class="hud" id="hud" hidden> <span class="chip" id="score">0</span> <div class="meter"><i id="energy"></i><b>FLOOR</b></div> <span class="chip dark" id="combo">x1</span> </div> <div class="screen" id="start"> <h1>keep the<br><span>floor</span> moving</h1> <p>tap (or hit space) on every kick. 30 seconds. hit the rings when they land. don't overthink it <3</p> <div class="row"><button class="btn95 primary" id="play">▶ play</button></div> <div class="best" id="bestStart"></div> </div> <div class="screen" id="end" hidden> <h1 id="rating">ur on<br><span>the list</span></h1> <div class="stats"> <div><strong id="sScore">0</strong>score</div> <div><strong id="sAcc">0%</strong>on beat</div> <div><strong id="sCombo">0</strong>best combo</div> </div> <div class="row"> <button class="btn95" id="again">↻ again</button> <a class="btn95 primary" id="book" target="_top" rel="noopener" hidden>book ur spot →</a> </div> <div class="best" id="bestEnd"></div> </div> </div> <div class="status"> <span id="statusMsg">tap on the kick · space works too</span> <span>124 bpm</span> </div> </div> <div class="ticker" aria-hidden="true"><div class="track"> <span class="nm">tRoom*</span><span><em>✱</em></span><span>keep the floor moving</span><span><em>✱</em></span><span>don't overthink it <3</span><span><em>✱</em></span><span>dm 4 the addy<3</span><span><em>✱</em></span> <span class="nm">tRoom*</span><span><em>✱</em></span><span>keep the floor moving</span><span><em>✱</em></span><span>don't overthink it <3</span><span><em>✱</em></span><span>dm 4 the addy<3</span><span><em>✱</em></span> </div></div> </div> <script> /* ===== settings — edit these ===== */ const CONFIG = { BOOK_URL: "", // paste your booking link here to show a "book ur spot" button on the results screen BPM: 124, BEATS: 64 // 64 beats at 124 bpm ≈ 31 seconds }; /* ================================== */ const $ = s => document.querySelector(s); const stage = $('#stage'), cv = $('#c'), g = cv.getContext('2d'); const COUNT = 4, PERF = 0.07, GOOD = 0.14; const C = { blue:'#1F4BEF', mag:'#C82BA0', yel:'#EDDC4C', ink:'#0A0A0A', paper:'#F4F2EC' }; let W = 0, H = 0; function resize(){ const r = stage.getBoundingClientRect(), dpr = Math.min(2, window.devicePixelRatio || 1); W = r.width; H = r.height; cv.width = Math.round(W * dpr); cv.height = Math.round(H * dpr); g.setTransform(dpr, 0, 0, dpr, 0, 0); } new ResizeObserver(resize).observe(stage); resize(); /* ---------- best score (per browser, optional) ---------- */ function getBest(){ try { return +localStorage.getItem('troom_floor_best') || 0; } catch(e){ return 0; } } function setBest(v){ try { localStorage.setItem('troom_floor_best', v); } catch(e){} } function showBest(){ const b = getBest(); const t = b ? 'your best: ' + b.toLocaleString() : ''; $('#bestStart').textContent = t; $('#bestEnd').textContent = t; } showBest(); /* ---------- audio ---------- */ let ac = null, master = null, noiseBuf = null, muted = false; function initAudio(){ if (!ac){ const AC = window.AudioContext || window.webkitAudioContext; ac = new AC(); const comp = ac.createDynamicsCompressor(); comp.threshold.value = -14; comp.ratio.value = 4; master = ac.createGain(); master.gain.value = muted ? 0 : 0.8; master.connect(comp); comp.connect(ac.destination); noiseBuf = ac.createBuffer(1, ac.sampleRate * 0.5, ac.sampleRate); const d = noiseBuf.getChannelData(0); for (let i = 0; i < d.length; i++) d[i] = Math.random() * 2 - 1; } return ac.state === 'suspended' ? ac.resume() : Promise.resolve(); } function kick(t){ const o = ac.createOscillator(), gn = ac.createGain(); o.type = 'sine'; o.frequency.setValueAtTime(160, t); o.frequency.exponentialRampToValueAtTime(42, t + 0.13); gn.gain.setValueAtTime(1, t); gn.gain.exponentialRampToValueAtTime(0.001, t + 0.38); o.connect(gn); gn.connect(master); o.start(t); o.stop(t + 0.4); } function noise(t, dur, type, freq, vol, q){ const s = ac.createBufferSource(), f = ac.createBiquadFilter(), gn = ac.createGain(); s.buffer = noiseBuf; f.type = type; f.frequency.value = freq; f.Q.value = q || 1; gn.gain.setValueAtTime(vol, t); gn.gain.exponentialRampToValueAtTime(0.001, t + dur); s.connect(f); f.connect(gn); gn.connect(master); s.start(t); s.stop(t + dur + 0.02); } const hat = (t, v) => noise(t, 0.045, 'highpass', 7500, v); const clap = t => { noise(t, 0.14, 'bandpass', 1400, 0.5, 0.8); noise(t + 0.012, 0.1, 'bandpass', 1650, 0.35, 0.8); }; const crash = t => noise(t, 0.45, 'highpass', 5000, 0.25); function bass(t, f){ const o = ac.createOscillator(), lp = ac.createBiquadFilter(), gn = ac.createGain(); o.type = 'sawtooth'; o.frequency.value = f; lp.type = 'lowpass'; lp.frequency.setValueAtTime(900, t); lp.frequency.exponentialRampToValueAtTime(180, t + 0.18); gn.gain.setValueAtTime(0.0001, t); gn.gain.exponentialRampToValueAtTime(0.35, t + 0.01); gn.gain.exponentialRampToValueAtTime(0.001, t + 0.2); o.connect(lp); lp.connect(gn); gn.connect(master); o.start(t); o.stop(t + 0.22); } const BASSLINE = [55, 55, 65.41, 49]; /* ---------- game ---------- */ let S = null, timer = null; const nowG = () => ac ? ac.currentTime - (ac.outputLatency || 0) : performance.now() / 1000; function newState(){ const beat = 60 / CONFIG.BPM, t0 = ac.currentTime + 0.3, total = COUNT + CONFIG.BEATS, beats = []; for (let i = 0; i < total; i++) beats.push({ t: t0 + i * beat, res: i < COUNT ? 'count' : null }); return { beat, t0, total, beats, next: 0, score: 0, combo: 0, best: 0, energy: 50, perfect: 0, good: 0, miss: 0, pops: [], flash: 0, running: true }; } function schedule(){ const ahead = ac.currentTime + 0.12; while (S.next < S.total && S.beats[S.next].t < ahead){ const i = S.next, t = S.beats[i].t, b = S.beat, p = i - COUNT; kick(t); if (p === 0 || p === 32) crash(t); if (p >= 0) hat(t + b / 2, 0.22); if (p >= 16 && p % 2 === 1) clap(t); if (p >= 32) bass(t + b / 2, BASSLINE[Math.floor(p / 4) % 4]); if (p >= 40){ hat(t + b * 0.25, 0.08); hat(t + b * 0.75, 0.1); } S.next++; } } const mult = () => 1 + Math.min(3, Math.floor(S.combo / 8)); function pop(text, color){ S.pops.push({ text, color, at: performance.now() }); if (S.pops.length > 4) S.pops.shift(); } function tap(){ if (!S || !S.running) return; const n = nowG(); let bi = -1, bd = Infinity; for (let i = COUNT; i < S.total; i++){ const b = S.beats[i]; if (b.t > n + 1) break; if (b.res) continue; const d = n - b.t; if (Math.abs(d) < Math.abs(bd)){ bd = d; bi = i; } } if (bi >= 0 && Math.abs(bd) <= GOOD){ const b = S.beats[bi]; S.combo++; if (Math.abs(bd) <= PERF){ b.res = 'perfect'; S.perfect++; S.energy = Math.min(100, S.energy + 4); S.score += 100 * mult(); pop('perfect', C.mag); S.flash = 1; } else { b.res = 'good'; S.good++; S.energy = Math.min(100, S.energy + 2); S.score += 50 * mult(); pop(bd < 0 ? 'early' : 'late', C.yel); } S.best = Math.max(S.best, S.combo); } else { S.combo = 0; S.energy = Math.max(0, S.energy - 3); pop('off', C.paper); } hud(); } function checkMisses(n){ for (let i = COUNT; i < S.total; i++){ const b = S.beats[i]; if (b.res) continue; if (n - b.t > GOOD){ b.res = 'miss'; S.miss++; S.combo = 0; S.energy = Math.max(0, S.energy - 6); pop('miss', C.paper); hud(); } else break; } } function hud(){ $('#score').textContent = S.score.toLocaleString(); $('#combo').textContent = 'x' + mult() + (S.combo > 1 ? ' · ' + S.combo : ''); $('#energy').style.width = S.energy + '%'; $('#statusMsg').textContent = S.energy > 75 ? 'floor is going off' : S.energy > 40 ? 'keep it moving' : S.energy > 15 ? 'people are going to the bar…' : 'floor is dead. find the kick'; } const RATINGS = [ [90, 'headliner<br><span>energy <3</span>'], [75, 'ur on<br><span>the list</span>'], [50, 'floor\'s warm.<br><span>come thru</span>'], [25, 'don\'t over<br><span>think it <3</span>'], [0, 'the kick is<br><span>the loud one</span>'] ]; function finish(){ S.running = false; clearInterval(timer); const acc = Math.round((S.perfect + S.good * 0.5) / CONFIG.BEATS * 100); $('#rating').innerHTML = RATINGS.find(r => acc >= r[0])[1]; $('#sScore').textContent = S.score.toLocaleString(); $('#sAcc').textContent = acc + '%'; $('#sCombo').textContent = S.best; if (S.score > getBest()) setBest(S.score); showBest(); $('#hud').hidden = true; $('#end').hidden = false; $('#statusMsg').textContent = S.perfect + ' perfect · ' + S.good + ' good · ' + S.miss + ' missed'; $('#again').focus({ preventScroll: true }); } async function start(){ await initAudio(); S = newState(); $('#start').hidden = true; $('#end').hidden = true; $('#hud').hidden = false; hud(); schedule(); clearInterval(timer); timer = setInterval(schedule, 25); stage.focus({ preventScroll: true }); } /* ---------- drawing ---------- */ function asterisk(x, y, r, rot, color){ g.save(); g.translate(x, y); g.rotate(rot); g.strokeStyle = color; g.lineCap = 'round'; g.lineWidth = r * 0.34; for (let k = 0; k < 3; k++){ g.rotate(Math.PI / 3); g.beginPath(); g.moveTo(-r, 0); g.lineTo(r, 0); g.stroke(); } g.restore(); } function draw(){ requestAnimationFrame(draw); if (!W) return; const n = nowG(), live = S && S.running; const beatLen = S ? S.beat : 60 / CONFIG.BPM; let phase = ((n - (S ? S.t0 : 0)) / beatLen) % 1; if (phase < 0) phase += 1; const energy = S ? S.energy : 55; if (live){ checkMisses(n); if (n > S.beats[S.total - 1].t + beatLen * 1.5) finish(); } g.clearRect(0, 0, W, H); const cx = W / 2, hy = H * 0.6, cy = H * 0.42, R = Math.min(W, H) * 0.15; // floor grid — moves toward you on every beat g.strokeStyle = 'rgba(255,255,255,.14)'; g.lineWidth = 1; for (let j = -10; j <= 10; j++){ g.beginPath(); g.moveTo(cx, hy); g.lineTo(cx + j * W * 0.16, H); g.stroke(); } for (let k = 0; k < 9; k++){ const z = (k + phase) / 9, y = hy + (H - hy) * z * z; g.beginPath(); g.moveTo(0, y); g.lineTo(W, y); g.stroke(); } // target ring g.strokeStyle = 'rgba(255,255,255,.55)'; g.lineWidth = 2; g.beginPath(); g.arc(cx, cy, R, 0, Math.PI * 2); g.stroke(); // incoming rings if (live){ for (let i = COUNT; i < S.total; i++){ const b = S.beats[i], ahead = b.t - n; if (ahead > beatLen * 2) break; if (b.res || ahead < -0.05) continue; const k = Math.max(0, ahead / (beatLen * 2)); g.strokeStyle = C.yel; g.globalAlpha = 1 - k * 0.8; g.lineWidth = 3; g.beginPath(); g.arc(cx, cy, R * (1 + k * 2.2), 0, Math.PI * 2); g.stroke(); } g.globalAlpha = 1; } // center: count-in or asterisk const countIdx = live ? Math.floor((n - S.t0) / beatLen) : 99; if (live && countIdx < COUNT){ g.fillStyle = '#fff'; g.font = `${Math.round(R * 1.3)}px Anton, Impact, sans-serif`; g.textAlign = 'center'; g.textBaseline = 'middle'; g.fillText(countIdx < 0 ? '' : ['3', '2', '1', 'GO'][countIdx], cx, cy); } else { const pulse = 1 + 0.2 * Math.exp(-phase * 7); const col = S && S.flash > 0.3 ? C.mag : C.yel; asterisk(cx, cy, R * 0.6 * pulse, performance.now() / 2600, col); } // crowd const count = Math.round(4 + energy / 100 * 14); const palette = [C.ink, C.paper, C.mag, C.ink, C.yel]; for (let i = 0; i < count; i++){ const x = W * (i + 0.5) / count, s = 0.85 + ((i * 37) % 10) / 30; const ph = (phase + (i % 2 ? 0.08 : 0)) % 1; const hop = Math.pow(1 - ph, 3) * (4 + energy * 0.2) * s; const baseY = H - 8, bodyH = 26 * s, w = 13 * s; const y = baseY - bodyH - hop; g.fillStyle = palette[i % palette.length]; g.fillRect(x - w / 2, y, w, bodyH); g.beginPath(); g.arc(x, y - 8 * s, 7 * s, 0, Math.PI * 2); g.fill(); if (energy > 70){ g.strokeStyle = g.fillStyle; g.lineWidth = 3 * s; g.lineCap = 'round'; g.beginPath(); g.moveTo(x - w / 2, y + 3); g.lineTo(x - w, y - 14 * s - hop * 0.3); g.moveTo(x + w / 2, y + 3); g.lineTo(x + w, y - 14 * s - hop * 0.3); g.stroke(); } } // dim when the floor dies if (energy < 25){ g.fillStyle = `rgba(0,0,0,${(25 - energy) / 25 * 0.35})`; g.fillRect(0, 0, W, H); } // perfect flash if (S && S.flash > 0.01){ g.fillStyle = `rgba(200,43,160,${S.flash * 0.22})`; g.fillRect(0, 0, W, H); S.flash *= 0.86; } // judgement pops if (S){ const t = performance.now(); g.textAlign = 'center'; g.textBaseline = 'middle'; S.pops = S.pops.filter(p => t - p.at < 600); S.pops.forEach(p => { const a = (t - p.at) / 600; g.globalAlpha = 1 - a; g.fillStyle = p.color; g.font = `${Math.round(R * 0.42)}px Anton, Impact, sans-serif`; g.fillText(p.text.toUpperCase(), cx, cy + R * 1.45 - a * 24); }); g.globalAlpha = 1; } } requestAnimationFrame(draw); /* ---------- input ---------- */ stage.addEventListener('pointerdown', e => { if (S && S.running){ e.preventDefault(); tap(); } }); window.addEventListener('keydown', e => { if (e.repeat || e.metaKey || e.ctrlKey || e.altKey || e.key === 'Tab') return; if (S && S.running){ e.preventDefault(); tap(); return; } const onButton = document.activeElement && /^(BUTTON|A)$/.test(document.activeElement.tagName); if (!onButton && (e.code === 'Space' || e.key === 'Enter') && !$('#start').hidden){ e.preventDefault(); start(); } }); $('#play').addEventListener('click', start); $('#again').addEventListener('click', start); $('#mute').addEventListener('click', () => { muted = !muted; $('#mute').textContent = muted ? '×' : '♪'; $('#mute').setAttribute('aria-label', muted ? 'Unmute sound' : 'Mute sound'); if (master) master.gain.value = muted ? 0 : 0.8; }); if (CONFIG.BOOK_URL){ $('#book').href = CONFIG.BOOK_URL; $('#book').hidden = false; } </script> </body> </html> " style="width:100%; max-width:744px; height:690px; border:0; display:block; margin:0 auto;" title="tRoom* floor.exe">