From: Geoffrey Allott Date: Sun, 14 Mar 2021 22:15:57 +0000 (+0000) Subject: add winner display X-Git-Url: https://git.pointlesshacks.com/?a=commitdiff_plain;h=636ae48838b6e1961b3d5d4dc94c94528673a94b;p=pokerwave.git add winner display --- diff --git a/site/modules/card.js b/site/modules/card.js index cceadbf..6fef6b2 100644 --- a/site/modules/card.js +++ b/site/modules/card.js @@ -33,3 +33,58 @@ export function card_href(card) { export function suit_href(suit) { return "img/suit-" + short_suit(suit) + ".svg"; } + +export const FIFTY_TWO_CARD_DECK = [ + {suit: "Clubs", rank: "Two"}, + {suit: "Clubs", rank: "Three"}, + {suit: "Clubs", rank: "Four"}, + {suit: "Clubs", rank: "Five"}, + {suit: "Clubs", rank: "Six"}, + {suit: "Clubs", rank: "Seven"}, + {suit: "Clubs", rank: "Eight"}, + {suit: "Clubs", rank: "Nine"}, + {suit: "Clubs", rank: "Ten"}, + {suit: "Clubs", rank: "Jack"}, + {suit: "Clubs", rank: "Queen"}, + {suit: "Clubs", rank: "King"}, + {suit: "Clubs", rank: "Ace"}, + {suit: "Diamonds", rank: "Two"}, + {suit: "Diamonds", rank: "Three"}, + {suit: "Diamonds", rank: "Four"}, + {suit: "Diamonds", rank: "Five"}, + {suit: "Diamonds", rank: "Six"}, + {suit: "Diamonds", rank: "Seven"}, + {suit: "Diamonds", rank: "Eight"}, + {suit: "Diamonds", rank: "Nine"}, + {suit: "Diamonds", rank: "Ten"}, + {suit: "Diamonds", rank: "Jack"}, + {suit: "Diamonds", rank: "Queen"}, + {suit: "Diamonds", rank: "King"}, + {suit: "Diamonds", rank: "Ace"}, + {suit: "Hearts", rank: "Two"}, + {suit: "Hearts", rank: "Three"}, + {suit: "Hearts", rank: "Four"}, + {suit: "Hearts", rank: "Five"}, + {suit: "Hearts", rank: "Six"}, + {suit: "Hearts", rank: "Seven"}, + {suit: "Hearts", rank: "Eight"}, + {suit: "Hearts", rank: "Nine"}, + {suit: "Hearts", rank: "Ten"}, + {suit: "Hearts", rank: "Jack"}, + {suit: "Hearts", rank: "Queen"}, + {suit: "Hearts", rank: "King"}, + {suit: "Hearts", rank: "Ace"}, + {suit: "Spades", rank: "Two"}, + {suit: "Spades", rank: "Three"}, + {suit: "Spades", rank: "Four"}, + {suit: "Spades", rank: "Five"}, + {suit: "Spades", rank: "Six"}, + {suit: "Spades", rank: "Seven"}, + {suit: "Spades", rank: "Eight"}, + {suit: "Spades", rank: "Nine"}, + {suit: "Spades", rank: "Ten"}, + {suit: "Spades", rank: "Jack"}, + {suit: "Spades", rank: "Queen"}, + {suit: "Spades", rank: "King"}, + {suit: "Spades", rank: "Ace"}, +]; diff --git a/site/modules/poker.js b/site/modules/poker.js index 7696e26..b1c6d52 100644 --- a/site/modules/poker.js +++ b/site/modules/poker.js @@ -1,6 +1,7 @@ const svgns = "http://www.w3.org/2000/svg"; import { card_href, suit_href } from "./card.js"; +import { CongratulateWinner } from "./winner.js"; export class TexasHoldEm { constructor(container, summary, actions, username, send) { @@ -68,7 +69,7 @@ export class TexasHoldEm { const fold_control_label = document.createElementNS(svgns, "text"); const fold_control_text = document.createTextNode("Fold"); fold_control_label.append(fold_control_text); - fold_control_label.setAttribute("x", "325"); + fold_control_label.setAttribute("x", "342.5"); fold_control_label.setAttribute("y", "470"); fold_control_label.classList.add("fold-control-label"); this.svg.append(fold_control_label); @@ -86,7 +87,7 @@ export class TexasHoldEm { const call_control_label = document.createElementNS(svgns, "text"); this.call_control_text = document.createTextNode("Call"); call_control_label.append(this.call_control_text); - call_control_label.setAttribute("x", "385"); + call_control_label.setAttribute("x", "402.5"); call_control_label.setAttribute("y", "470"); call_control_label.classList.add("call-control-label"); this.svg.append(call_control_label); @@ -109,7 +110,7 @@ export class TexasHoldEm { const bet_control_label = document.createElementNS(svgns, "text"); const bet_control_text = document.createTextNode("Bet"); bet_control_label.append(bet_control_text); - bet_control_label.setAttribute("x", "445"); + bet_control_label.setAttribute("x", "462.5"); bet_control_label.setAttribute("y", "470"); bet_control_label.classList.add("bet-control-label"); this.svg.append(bet_control_label); @@ -389,7 +390,7 @@ export class TexasHoldEm { this.redraw_players(); break; case "WinGame": - console.log(this); + new CongratulateWinner(this.svg, user_action.username); break; default: console.error("Unhandled action for knock-out whist", user_action); diff --git a/site/modules/random.js b/site/modules/random.js new file mode 100644 index 0000000..9e9b4ac --- /dev/null +++ b/site/modules/random.js @@ -0,0 +1,3 @@ +export function random_int(max) { + return Math.floor(Math.random() * max); +} diff --git a/site/modules/whist.js b/site/modules/whist.js index ab7eab8..424b56a 100644 --- a/site/modules/whist.js +++ b/site/modules/whist.js @@ -1,6 +1,7 @@ const svgns = "http://www.w3.org/2000/svg"; import { card_href, suit_href } from "./card.js"; +import { CongratulateWinner } from "./winner.js"; export class KnockOutWhist { constructor(container, summary, actions, username, send) { @@ -296,9 +297,9 @@ export class KnockOutWhist { this.redraw_players(); break; case "WinGame": - console.log(this); this.trumps = null; this.redraw_trumps(); + new CongratulateWinner(this.svg, user_action.username); break; default: console.error("Unhandled action for knock-out whist", user_action); diff --git a/site/modules/winner.js b/site/modules/winner.js new file mode 100644 index 0000000..80f4013 --- /dev/null +++ b/site/modules/winner.js @@ -0,0 +1,74 @@ +const svgns = "http://www.w3.org/2000/svg"; + +import { card_href, FIFTY_TWO_CARD_DECK } from "./card.js"; +import { random_int } from "./random.js"; + +export class CongratulateWinner { + constructor(svg, username) { + this.svg = svg; + this.username = username; + this.card_images = []; + this.deck = [...FIFTY_TWO_CARD_DECK]; + + this.timestep = 10; + this.new_card_interval = 100; + this.card_drop_speed = 1; + this.show_winner_time = 1000; + + this.frame = this.random_drop; + this.schedule_frame(0); + } + + schedule_frame(time) { + this.frame(time); + setTimeout(() => this.schedule_frame(time + this.timestep), this.timestep); + } + + show_winner() { + this.winner_banner = document.createElementNS(svgns, "text"); + this.winner_banner.classList.add("winner-banner"); + this.winner_banner.setAttribute("x", "250"); + this.winner_banner.setAttribute("y", "210"); + const winner_banner_text = document.createTextNode("Winner"); + this.winner_banner.append(winner_banner_text); + this.svg.append(this.winner_banner); + + this.winner_name = document.createElementNS(svgns, "text"); + this.winner_name.classList.add("winner-name"); + this.winner_name.setAttribute("x", "250"); + this.winner_name.setAttribute("y", "270"); + const winner_name_text = document.createTextNode(this.username); + this.winner_name.append(winner_name_text); + this.svg.append(this.winner_name); + } + + card_image(card) { + const image = document.createElementNS(svgns, "image"); + image.setAttribute("width", "45"); + image.setAttribute("height", "70"); + image.setAttribute("x", random_int(500 - 45)); + image.setAttribute("y", "-70"); + image.setAttribute("href", card_href(card)); + this.svg.append(image); + return image; + } + + random_drop(time) { + if (time >= this.show_winner_time && this.winner_banner === undefined) { + this.show_winner(); + } + for (let i = 0; i < this.card_images.length; i++) { + const card_time = time - this.new_card_interval * i; + const image = this.card_images[i]; + image.setAttribute("y", -70 + card_time * this.card_drop_speed); + } + const total_cards = Math.min(52, Math.floor(time / this.new_card_interval) + 1); + const new_cards = total_cards - this.card_images.length; + for (let i = 0; i < new_cards; i++) { + const index = random_int(this.deck.length); + const [card] = this.deck.splice(index, 1); + const image = this.card_image(card); + this.card_images.push(image); + } + } +} diff --git a/site/modules/words.js b/site/modules/words.js index 080e01b..95d03fa 100644 --- a/site/modules/words.js +++ b/site/modules/words.js @@ -1,3 +1,5 @@ +import { random_int } from "./random.js"; + const adjectives = [ "Amazing", "Based", @@ -56,10 +58,6 @@ const nouns = [ "Zeitgeist", ]; -function random_int(max) { - return Math.floor(Math.random() * max); -} - export function random_title() { return adjectives[random_int(26)] + " " + nouns[random_int(26)]; } diff --git a/site/style.css b/site/style.css index e3f71c0..80656cf 100644 --- a/site/style.css +++ b/site/style.css @@ -4,6 +4,7 @@ @import url("style/chatroom.css"); @import url("style/poker.css"); @import url("style/whist.css"); +@import url("style/winner.css"); html, body { width: 100%; diff --git a/site/style/poker.css b/site/style/poker.css index 00ce239..045f36d 100644 --- a/site/style/poker.css +++ b/site/style/poker.css @@ -24,4 +24,5 @@ .fold-control-label, .call-control-label, .bet-control-label { pointer-events: none; + text-anchor: middle; } diff --git a/site/style/winner.css b/site/style/winner.css new file mode 100644 index 0000000..92b5d0c --- /dev/null +++ b/site/style/winner.css @@ -0,0 +1,16 @@ +@keyframes grow { + from { fill: rgba(0, 0, 0, 0); } + to { fill: rgba(0, 0, 0, 1); } +} + +.winner-banner { + font-size: 4vw; + animation: grow 1s; + text-anchor: middle; +} + +.winner-name { + font-size: 8vw; + animation: grow 1s; + text-anchor: middle; +}