Spaces:
Running
Running
| // Playing cards drawn in HTML: corner indices, the standard pip layouts for A–10, framed court cards. | |
| (function () { | |
| const SUIT = { S: "♠", H: "♥", D: "♦", C: "♣" }; | |
| const SUIT_NAME = { S: "spades", H: "hearts", D: "diamonds", C: "clubs" }; | |
| const NAME = { 1: "A", 11: "J", 12: "Q", 13: "K" }; | |
| const RANK_NAME = { 1: "Ace", 11: "Jack", 12: "Queen", 13: "King" }; | |
| // Pip positions as [column, row, upside-down]. Columns: 0 left, 1 centre, 2 right. | |
| // Rows are percentages of the pip area, the classic layout of a French-suited deck. | |
| const L = 0, C = 1, R = 2; | |
| const PIPS = { | |
| 2: [[C, 0], [C, 100, 1]], | |
| 3: [[C, 0], [C, 50], [C, 100, 1]], | |
| 4: [[L, 0], [R, 0], [L, 100, 1], [R, 100, 1]], | |
| 5: [[L, 0], [R, 0], [C, 50], [L, 100, 1], [R, 100, 1]], | |
| 6: [[L, 0], [R, 0], [L, 50], [R, 50], [L, 100, 1], [R, 100, 1]], | |
| 7: [[L, 0], [R, 0], [C, 25], [L, 50], [R, 50], [L, 100, 1], [R, 100, 1]], | |
| 8: [[L, 0], [R, 0], [C, 25], [L, 50], [R, 50], [C, 75, 1], [L, 100, 1], [R, 100, 1]], | |
| 9: [[L, 0], [R, 0], [L, 33.3], [R, 33.3], [C, 50], [L, 66.7, 1], [R, 66.7, 1], [L, 100, 1], [R, 100, 1]], | |
| 10: [[L, 0], [R, 0], [C, 16.7], [L, 33.3], [R, 33.3], [L, 66.7, 1], [R, 66.7, 1], [C, 83.3, 1], [L, 100, 1], [R, 100, 1]], | |
| }; | |
| function el(tag, cls, text) { | |
| const node = document.createElement(tag); | |
| if (cls) node.className = cls; | |
| if (text != null) node.textContent = text; | |
| return node; | |
| } | |
| function corner(name, suit, flip) { | |
| const c = el("span", "corner" + (flip ? " flip" : "")); | |
| c.append(el("span", "corner-rank", name), el("span", "corner-suit", suit)); | |
| return c; | |
| } | |
| // A real card from the deck. | |
| function playingCard(card) { | |
| const name = NAME[card.rank] || String(card.rank); | |
| const suit = SUIT[card.suit]; | |
| const node = el("div", "card " + (card.suit === "H" || card.suit === "D" ? "red" : "black")); | |
| node.setAttribute("aria-label", `${RANK_NAME[card.rank] || card.rank} of ${SUIT_NAME[card.suit]}, value ${card.rank}`); | |
| node.append(corner(name, suit, false), corner(name, suit, true)); | |
| const face = el("div", "face"); | |
| if (card.rank === 1) { | |
| face.classList.add("ace"); | |
| face.append(el("span", "pip big", suit)); | |
| } else if (card.rank > 10) { | |
| face.classList.add("court"); | |
| const frame = el("div", "frame"); | |
| frame.append(el("span", "court-suit", suit), el("span", "court-letter", name), el("span", "court-suit flip", suit)); | |
| face.append(frame); | |
| } else { | |
| face.classList.add("pips"); | |
| for (const [col, row, flip] of PIPS[card.rank]) { | |
| const p = el("span", "pip" + (flip ? " flip" : ""), suit); | |
| p.style.left = ["22%", "50%", "78%"][col]; | |
| p.style.top = row + "%"; | |
| face.append(p); | |
| } | |
| } | |
| node.append(face); | |
| return node; | |
| } | |
| // A pile made by combining cards: shows its value and how it was made. | |
| function resultCard(valueText, exprText, count) { | |
| const node = el("div", "card made"); | |
| node.setAttribute("aria-label", `Combined pile of ${count} cards, value ${valueText}: ${exprText}`); | |
| node.append(el("span", "made-count", count + " cards")); | |
| const v = el("span", "made-value", valueText); | |
| if (valueText.length > 5) v.classList.add("long"); | |
| if (valueText.length > 8) v.classList.add("longer"); | |
| node.append(v, el("span", "made-expr", exprText)); | |
| node.title = exprText + " = " + valueText; | |
| return node; | |
| } | |
| window.Cards = { playingCard, resultCard, SUIT, NAME }; | |
| })(); | |