games: burial send-offs, money rain on wins, and honest stack targeting
Three front-end changes to the casino games:
- uno: a draw-card stack now names the seat it's actually pointed at
("+N on Beep") instead of always reading "+N on you". The bill reads
v.turn, which the engine advances to the target when a draw card lands.
- uno: the No Mercy rule buries a seat with some ceremony now. bury()
rolls one of four send-offs over the seat (or your hand, if it's you) —
a rockslide that piles up, a tombstone, a coffin, or the Mega Man death
burst — each with its own synth sound, and a static headstone under
reduced motion. The "Buried on N" badge still rides alongside.
- all games: winning makes it rain. FX.moneyRain drops a curtain of bills
and coins with a jackpot coin-cascade sound, gated by significance so it
reads as a win and not as noise: hold'em keeps its light per-pot confetti
and only rains on a real haul (>= 20bb), while the confetti stays the
rare cherry (natural 21, full board clear, phrase solved outright).
This commit is contained in:
@@ -265,13 +265,10 @@
|
||||
verdictEl.textContent = text;
|
||||
verdictEl.classList.remove("hidden");
|
||||
|
||||
// The one thing in this room that gets confetti. A natural is rare, it pays
|
||||
// 3:2, and if everything celebrated then nothing would.
|
||||
//
|
||||
// The *sound* is not so precious: a win is a win and you should hear it. So
|
||||
// the fanfare rides on the money, not on the confetti.
|
||||
if (v.outcome === "blackjack") FX.burst(verdictEl, { count: 34 });
|
||||
else if (v.net > 0) FX.sfx("win");
|
||||
// Every win gets it to rain, because a win should feel like one. A natural is
|
||||
// rarer and pays 3:2, so it keeps the confetti on top of the money as well.
|
||||
if (v.outcome === "blackjack") { FX.burst(verdictEl, { count: 34 }); FX.moneyRain({ count: 30 }); }
|
||||
else if (v.net > 0) FX.moneyRain();
|
||||
else if (v.net < 0) FX.sfx("lose");
|
||||
else FX.sfx("push");
|
||||
}
|
||||
|
||||
@@ -319,6 +319,65 @@
|
||||
return Promise.all(done);
|
||||
}
|
||||
|
||||
// moneyRain: it rains money. The big finish on a win — bills and coins tumbling
|
||||
// the whole height of the window, swaying and spinning as they fall. Louder than
|
||||
// confetti, and it carries its own sound (a coin cascade) so it can stand in for
|
||||
// the plain win fanfare wherever a table decides a win is worth the theatre.
|
||||
//
|
||||
// Like burst, the sound comes before the reduced-motion bail: no rain still
|
||||
// deserves to be heard.
|
||||
function moneyRain(opts) {
|
||||
opts = opts || {};
|
||||
if (opts.sound !== false) sfx(opts.sound || "jackpot");
|
||||
if (reduced) return Promise.resolve();
|
||||
|
||||
var n = opts.count || 22;
|
||||
var glyphs = opts.glyphs || ["💶", "💰", "🪙", "💵", "💴", "🤑"];
|
||||
var vw = window.innerWidth || document.documentElement.clientWidth;
|
||||
var vh = window.innerHeight || document.documentElement.clientHeight;
|
||||
var done = [];
|
||||
|
||||
for (var i = 0; i < n; i++) {
|
||||
var bit = document.createElement("div");
|
||||
bit.className = "pete-money";
|
||||
bit.textContent = glyphs[i % glyphs.length];
|
||||
stage().appendChild(bit);
|
||||
|
||||
// Spread across the width in even lanes, each nudged off its lane so the
|
||||
// curtain doesn't read as a grid. It sways sideways and spins on the way down.
|
||||
var x = ((i + 0.5) / n) * vw + jitter(i, vw / n / 2);
|
||||
var drift = jitter(i + 5, 80);
|
||||
var startY = -50 - Math.abs(jitter(i + 2, 180));
|
||||
var spin = jitter(i, 300);
|
||||
var scale = 0.85 + Math.abs(jitter(i + 3, 0.55));
|
||||
|
||||
done.push(
|
||||
bit
|
||||
.animate(
|
||||
[
|
||||
{ transform: t(x, startY, scale, 0), opacity: 0, offset: 0 },
|
||||
{ transform: t(x + drift, startY + 40, scale, spin * 0.2), opacity: 1, offset: 0.1 },
|
||||
{ transform: t(x - drift, vh * 0.55, scale, spin * 0.6), opacity: 1, offset: 0.6 },
|
||||
{ transform: t(x + drift * 0.5, vh + 60, scale, spin), opacity: 1, offset: 1 },
|
||||
],
|
||||
{
|
||||
duration: 1600 + Math.abs(jitter(i + 9, 1)) * 900,
|
||||
easing: "cubic-bezier(0.35, 0.15, 0.55, 1)",
|
||||
fill: "both",
|
||||
delay: Math.abs(jitter(i, 320)),
|
||||
}
|
||||
)
|
||||
.finished.catch(function () {})
|
||||
.then(
|
||||
(function (b) {
|
||||
return function () { b.remove(); };
|
||||
})(bit)
|
||||
)
|
||||
);
|
||||
}
|
||||
return Promise.all(done);
|
||||
}
|
||||
|
||||
// count rolls a number to a new value instead of swapping it. A chip count that
|
||||
// jumps is a variable; one that climbs is a payout.
|
||||
function count(el, to, opts) {
|
||||
@@ -359,6 +418,7 @@
|
||||
flyMany: flyMany,
|
||||
spot: spot,
|
||||
burst: burst,
|
||||
moneyRain: moneyRain,
|
||||
count: count,
|
||||
centre: centre,
|
||||
};
|
||||
|
||||
@@ -264,6 +264,17 @@
|
||||
});
|
||||
},
|
||||
|
||||
// It rains money. A bright run of coins spilling out over the win fanfare —
|
||||
// ten metallic pings climbing a pentatonic scale, each with a tick on the
|
||||
// front of it so it lands as coin rather than as bell.
|
||||
jackpot: function (t) {
|
||||
var notes = [784, 988, 1175, 1319, 1568, 1760];
|
||||
for (var i = 0; i < 10; i++) {
|
||||
tone(t + i * 0.05, notes[i % notes.length], { type: "triangle", decay: 0.13, gain: 0.09 });
|
||||
hiss(t + i * 0.05, { freq: 5200, q: 3, decay: 0.02, gain: 0.05 });
|
||||
}
|
||||
},
|
||||
|
||||
// Two notes down, and the second one is flat. Nobody needs telling twice.
|
||||
lose: function (t) {
|
||||
tone(t, 311.13, { type: "triangle", decay: 0.24, gain: 0.22 });
|
||||
@@ -307,6 +318,43 @@
|
||||
tick: function (t) {
|
||||
hiss(t, { freq: 3200, q: 3, decay: 0.02, gain: 0.14 });
|
||||
},
|
||||
|
||||
// The mercy rule buries someone. Four ways to go, one sound each — uno.js
|
||||
// rolls which animation plays and asks for the sound that matches it.
|
||||
//
|
||||
// Rocks coming down: a low rumble with tumbling knocks over the top, and a
|
||||
// second slump as the pile settles.
|
||||
rockslide: function (t) {
|
||||
hiss(t, { filter: "lowpass", freq: 320, sweepTo: 140, decay: 0.5, gain: 0.34, q: 0.6 });
|
||||
for (var i = 0; i < 6; i++) {
|
||||
tone(t + i * 0.055, 128 - i * 9, { type: "square", decay: 0.1, gain: 0.09 });
|
||||
}
|
||||
hiss(t + 0.3, { filter: "lowpass", freq: 200, decay: 0.32, gain: 0.3, q: 0.5 });
|
||||
},
|
||||
|
||||
// A headstone dropping in: one heavy stone thud that rings a little as it sets.
|
||||
tombstone: function (t) {
|
||||
tone(t, 92, { type: "sine", to: 58, glide: 0.16, decay: 0.42, gain: 0.32 });
|
||||
hiss(t, { filter: "lowpass", freq: 520, decay: 0.12, gain: 0.34, q: 0.6 });
|
||||
tone(t + 0.02, 184, { type: "triangle", decay: 0.5, gain: 0.08 });
|
||||
},
|
||||
|
||||
// The Mega Man death: the pieces zip outward and the pitch falls away as they go.
|
||||
zap: function (t) {
|
||||
tone(t, 1250, { type: "sawtooth", to: 170, glide: 0.34, decay: 0.36, gain: 0.12 });
|
||||
for (var i = 0; i < 4; i++) {
|
||||
tone(t + i * 0.02, 940 - i * 130, { type: "square", decay: 0.06, gain: 0.06 });
|
||||
}
|
||||
hiss(t, { freq: 3000, sweepTo: 600, decay: 0.3, gain: 0.1, q: 0.8 });
|
||||
},
|
||||
|
||||
// A coffin lid: two flat wooden knocks, the second lower and heavier.
|
||||
coffin: function (t) {
|
||||
tone(t, 150, { type: "triangle", decay: 0.14, gain: 0.26 });
|
||||
hiss(t, { filter: "lowpass", freq: 820, decay: 0.05, gain: 0.24, q: 0.7 });
|
||||
tone(t + 0.17, 108, { type: "triangle", decay: 0.22, gain: 0.28 });
|
||||
hiss(t + 0.17, { filter: "lowpass", freq: 600, decay: 0.06, gain: 0.24, q: 0.7 });
|
||||
},
|
||||
};
|
||||
|
||||
// ---- the door --------------------------------------------------------------
|
||||
|
||||
@@ -293,10 +293,10 @@
|
||||
verdictEl.textContent = text;
|
||||
verdictEl.classList.remove("hidden");
|
||||
|
||||
// Confetti for a phrase guessed outright — the one call you make on your own
|
||||
// rather than by grinding the alphabet.
|
||||
if (v.outcome === "solved" && v.net > 0) FX.burst(verdictEl, { count: 30 });
|
||||
else if (v.net > 0) FX.sfx("win");
|
||||
// A phrase guessed outright keeps the confetti — the one call you make on your
|
||||
// own rather than by grinding the alphabet — and any win at all makes it rain.
|
||||
if (v.outcome === "solved" && v.net > 0) { FX.burst(verdictEl, { count: 30 }); FX.moneyRain({ count: 28 }); }
|
||||
else if (v.net > 0) FX.moneyRain();
|
||||
else if (v.net < 0) FX.sfx("lose");
|
||||
}
|
||||
|
||||
|
||||
@@ -370,7 +370,12 @@
|
||||
return pot.sweep(s.plate, e.amount, { gap: 55 }).then(function () {
|
||||
potTotal.textContent = money(pot.amount);
|
||||
moveStack(e.seat, e.amount);
|
||||
if (e.seat === me && e.amount > 0) FX.burst(s.plate, { count: 18 });
|
||||
if (e.seat === me && e.amount > 0) {
|
||||
FX.burst(s.plate, { count: 18 });
|
||||
// A real haul makes it rain; a blind-steal doesn't, or poker would be
|
||||
// raining money every thirty seconds. Twenty big blinds is a pot.
|
||||
if (view && view.tier && e.amount >= 20 * view.tier.bb) FX.moneyRain({ count: 24 });
|
||||
}
|
||||
return wait(260);
|
||||
});
|
||||
|
||||
|
||||
@@ -576,9 +576,9 @@
|
||||
verdictEl.textContent = text;
|
||||
verdictEl.classList.remove("hidden");
|
||||
// Clearing 52 cards out of a Vegas deal is the rarest thing that happens in
|
||||
// this room, so it's the one that gets the confetti.
|
||||
if (v.outcome === "cleared") FX.burst(verdictEl, { count: 40 });
|
||||
else if (v.net > 0) FX.sfx("win");
|
||||
// this room, so it keeps the confetti — but any win now makes it rain.
|
||||
if (v.outcome === "cleared") { FX.burst(verdictEl, { count: 40 }); FX.moneyRain({ count: 34 }); }
|
||||
else if (v.net > 0) FX.moneyRain();
|
||||
else if (v.net < 0) FX.sfx("lose");
|
||||
else FX.sfx("push");
|
||||
}
|
||||
|
||||
@@ -307,8 +307,9 @@
|
||||
verdictEl.textContent = text;
|
||||
verdictEl.classList.remove("hidden");
|
||||
|
||||
// Confetti only for clearing all twelve — the one thing in here worth it.
|
||||
if (v.outcome === "cleared") FX.burst(verdictEl, { count: 34 });
|
||||
// Clearing all twelve keeps the confetti on top; any win at all makes it rain.
|
||||
if (v.outcome === "cleared") { FX.burst(verdictEl, { count: 34 }); FX.moneyRain({ count: 30 }); }
|
||||
else if (v.net > 0) FX.moneyRain();
|
||||
}
|
||||
|
||||
function setPhase(v) {
|
||||
|
||||
@@ -304,12 +304,22 @@
|
||||
colourEl.textContent = "";
|
||||
if (feltEl) feltEl.dataset.c = "";
|
||||
}
|
||||
pending(live(v) ? (v.pending || 0) : 0);
|
||||
pending(live(v) ? (v.pending || 0) : 0, v);
|
||||
}
|
||||
|
||||
function pending(n) {
|
||||
// Who the running stack lands on next: during a stack phase that's whoever's
|
||||
// turn it is. Fall back to the view the caller passed, then to the live game.
|
||||
function pendingTarget(v) {
|
||||
var src = v || game;
|
||||
if (!src) return "you";
|
||||
if (src.turn === me) return "you";
|
||||
var s = (src.seats && src.seats[src.turn]) || null;
|
||||
return (s && s.name) || "them";
|
||||
}
|
||||
|
||||
function pending(n, v) {
|
||||
if (billEl) {
|
||||
billEl.textContent = n > 0 ? "+" + n + " on you" : "";
|
||||
billEl.textContent = n > 0 ? "+" + n + " on " + pendingTarget(v) : "";
|
||||
billEl.classList.toggle("hidden", n <= 0);
|
||||
}
|
||||
if (takeN) takeN.textContent = String(n);
|
||||
@@ -355,7 +365,7 @@
|
||||
if (!text) { verdictEl.classList.add("hidden"); return; }
|
||||
verdictEl.textContent = text;
|
||||
verdictEl.classList.remove("hidden");
|
||||
if (v.winner === me && v.outcome !== "tie") FX.burst(verdictEl, { count: 34 });
|
||||
if (v.winner === me && v.outcome !== "tie") { FX.burst(verdictEl, { count: 34 }); FX.moneyRain({ count: 30 }); }
|
||||
else if (v.winner >= 0 && v.winner !== me) FX.sfx("lose");
|
||||
}
|
||||
|
||||
@@ -475,6 +485,80 @@
|
||||
return new Promise(function (r) { setTimeout(function () { b.remove(); r(); }, 900); });
|
||||
}
|
||||
|
||||
// bury gives the mercy rule some ceremony. It rolls one of four send-offs and
|
||||
// drops it over the buried seat — or over your hand, if it's you going down —
|
||||
// with the noise that goes with it. Every piece is built from scratch and
|
||||
// clears itself, so a repaint that lands mid-fall just cuts it short. Resolves
|
||||
// on the dramatic beat, not on cleanup: the hand shouldn't wait for the dust.
|
||||
var BURIALS = ["rocks", "tomb", "zap", "coffin"];
|
||||
|
||||
function bury(seat) {
|
||||
var host = seat === me ? handEl : seatEl(seat);
|
||||
if (!host) return Promise.resolve();
|
||||
|
||||
var wrap = document.createElement("div");
|
||||
wrap.className = "pete-uno-bury";
|
||||
host.appendChild(wrap);
|
||||
|
||||
// No theatre for reduced motion: a single static headstone marks the grave,
|
||||
// with the stone-drop thud so it isn't silent either.
|
||||
if (reduced) {
|
||||
FX.sfx("tombstone");
|
||||
var stone = document.createElement("div");
|
||||
stone.className = "pete-uno-tomb";
|
||||
stone.textContent = "🪦";
|
||||
wrap.appendChild(stone);
|
||||
setTimeout(function () { wrap.remove(); }, 1400);
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
var kind = BURIALS[Math.floor(Math.random() * BURIALS.length)];
|
||||
wrap.dataset.kind = kind;
|
||||
|
||||
if (kind === "rocks") {
|
||||
FX.sfx("rockslide");
|
||||
[
|
||||
{ dx: "-1.15rem", dy: "0.55rem", rot: "-20deg", d: 0 },
|
||||
{ dx: "0.95rem", dy: "0.7rem", rot: "24deg", d: 70 },
|
||||
{ dx: "-0.15rem", dy: "0.15rem", rot: "8deg", d: 150 },
|
||||
{ dx: "-1.5rem", dy: "1.0rem", rot: "-34deg", d: 220 },
|
||||
{ dx: "1.45rem", dy: "0.95rem", rot: "16deg", d: 300 },
|
||||
{ dx: "0.35rem", dy: "1.05rem", rot: "-10deg", d: 360 },
|
||||
].forEach(function (r) {
|
||||
var el = document.createElement("div");
|
||||
el.className = "pete-uno-rock";
|
||||
el.textContent = "🪨";
|
||||
el.style.setProperty("--dx", r.dx);
|
||||
el.style.setProperty("--dy", r.dy);
|
||||
el.style.setProperty("--rot", r.rot);
|
||||
el.style.setProperty("--d", r.d + "ms");
|
||||
wrap.appendChild(el);
|
||||
});
|
||||
} else if (kind === "zap") {
|
||||
FX.sfx("zap");
|
||||
var flash = document.createElement("div");
|
||||
flash.className = "pete-uno-zap-flash";
|
||||
wrap.appendChild(flash);
|
||||
for (var a = 0; a < 8; a++) {
|
||||
var bit = document.createElement("div");
|
||||
bit.className = "pete-uno-zap-bit";
|
||||
bit.style.setProperty("--ang", (a * 45) + "deg");
|
||||
wrap.appendChild(bit);
|
||||
}
|
||||
} else {
|
||||
// tomb or coffin: one heavy thing drops in and sets.
|
||||
FX.sfx(kind === "tomb" ? "tombstone" : "coffin");
|
||||
var mark = document.createElement("div");
|
||||
mark.className = kind === "tomb" ? "pete-uno-tomb" : "pete-uno-coffin";
|
||||
mark.textContent = kind === "tomb" ? "🪦" : "⚰️";
|
||||
wrap.appendChild(mark);
|
||||
}
|
||||
|
||||
// The zap is gone in half a second; the graves linger before they clear.
|
||||
setTimeout(function () { wrap.remove(); }, kind === "zap" ? 650 : 1500);
|
||||
return new Promise(function (r) { setTimeout(r, kind === "zap" ? 480 : 640); });
|
||||
}
|
||||
|
||||
// play walks the server's script for a move the acting player just made.
|
||||
function play(view) {
|
||||
var events = view.uno_events || [];
|
||||
@@ -570,7 +654,7 @@
|
||||
}
|
||||
|
||||
case "stack":
|
||||
pending(e.n);
|
||||
pending(e.n, final);
|
||||
spotlight(e.seat);
|
||||
FX.sfx("bad");
|
||||
return badge(e.seat, "+" + e.n, "bad").then(function () { return wait(140); });
|
||||
@@ -614,8 +698,12 @@
|
||||
bump(e.seat, 0);
|
||||
showHand(e.hand);
|
||||
pending(0);
|
||||
FX.sfx("bad");
|
||||
return badge(e.seat, "Buried on " + e.n, "bad").then(function () { return wait(460); });
|
||||
// bury() rolls the send-off and makes its own noise; the badge rides
|
||||
// alongside it so you still see what count did them in.
|
||||
return Promise.all([
|
||||
bury(e.seat),
|
||||
badge(e.seat, "Buried on " + e.n, "bad"),
|
||||
]).then(function () { return wait(300); });
|
||||
}
|
||||
|
||||
case "skip":
|
||||
|
||||
Reference in New Issue
Block a user