├── .editorconfig
├── .github
    └── workflows
    │   └── gh-pages.yml
├── .gitignore
├── .prettierrc.json
├── .vscode
    └── extensions.json
├── README.md
├── env.d.ts
├── eslint.config.js
├── index.html
├── package-lock.json
├── package.json
├── public
    ├── favicon.svg
    ├── fonts
    │   └── big_shoulders_display.woff2
    └── screenshot.png
├── src
    ├── App.vue
    ├── assets
    │   ├── main.css
    │   └── sounds
    │   │   ├── 159698__qubodup__scroll-step-hover-sound-for-user-interface.mp3
    │   │   ├── 619832__cogfirestudios__puzzle-game-victory-melody.mp3
    │   │   ├── 619839__cogfirestudios__sine-beep-sytlized-app-ui.mp3
    │   │   ├── 619840__cogfirestudios__achievement-accomplish-jingle-app-ui.mp3
    │   │   ├── 636624__cogfirestudios__deep-hit.mp3
    │   │   ├── 636634__cogfirestudios__app-ui-puzzle-game.mp3
    │   │   ├── 636635__cogfirestudios__app-ui-puzzle-game.mp3
    │   │   ├── 636642__cogfirestudios__app-ui-puzzle-game.mp3
    │   │   ├── 636643__cogfirestudios__ui-app.mp3
    │   │   ├── 636647__cogfirestudios__ui-app.mp3
    │   │   ├── 636649__cogfirestudios__ui-app.mp3
    │   │   ├── 636655__cogfirestudios__ui-achievement-puzzle-game-application.mp3
    │   │   ├── 636659__cogfirestudios__ui-achievement-puzzle-game-application.mp3
    │   │   ├── 636674__cogfirestudios__app-ui-sound.mp3
    │   │   ├── 636677__cogfirestudios__app-ui-sound.mp3
    │   │   ├── 677860__el_boss__ui-button-click-snap.mp3
    │   │   └── 757328__steaq__ui-hover-item.mp3
    ├── cards.ts
    ├── components
    │   ├── AnimatedBackground.vue
    │   ├── GameHand.vue
    │   ├── GameHeader.vue
    │   ├── HandBet.vue
    │   ├── HandTotal.vue
    │   ├── PlayerBank.vue
    │   ├── PlayerToolbar.vue
    │   ├── PlayingCard.vue
    │   ├── SvgSprite.vue
    │   └── TitleScreen.vue
    ├── main.ts
    ├── sound.ts
    ├── store.ts
    └── types.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
├── tsconfig.vitest.json
├── vite.config.ts
└── vitest.config.ts


/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}]
2 | charset = utf-8
3 | indent_size = 2
4 | indent_style = space
5 | insert_final_newline = true
6 | trim_trailing_whitespace = true
7 | 


--------------------------------------------------------------------------------
/.github/workflows/gh-pages.yml:
--------------------------------------------------------------------------------
 1 | name: Deploy to GitHub Pages
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - main
 7 | 
 8 | jobs:
 9 |   deploy:
10 |     runs-on: ubuntu-latest
11 | 
12 |     steps:
13 |       - name: Checkout code
14 |         uses: actions/checkout@v3
15 | 
16 |       - name: Install and build
17 |         run: |
18 |           npm install
19 |           npm run build
20 | 
21 |       - name: Deploy to GitHub Pages
22 |         uses: peaceiris/actions-gh-pages@v4
23 |         with:
24 |           github_token: ${{ secrets.GITHUB_TOKEN }}
25 |           publish_dir: ./dist
26 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | .DS_Store
12 | dist
13 | dist-ssr
14 | coverage
15 | *.local
16 | 
17 | /cypress/videos/
18 | /cypress/screenshots/
19 | 
20 | # Editor directories and files
21 | .vscode/*
22 | !.vscode/extensions.json
23 | .idea
24 | *.suo
25 | *.ntvs*
26 | *.njsproj
27 | *.sln
28 | *.sw?
29 | 
30 | *.tsbuildinfo
31 | 


--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
1 | 
2 | {
3 |   "$schema": "https://json.schemastore.org/prettierrc",
4 |   "semi": false,
5 |   "singleQuote": true,
6 |   "printWidth": 100
7 | }
8 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "recommendations": [
 3 |     "Vue.volar",
 4 |     "vitest.explorer",
 5 |     "dbaeumer.vscode-eslint",
 6 |     "EditorConfig.EditorConfig",
 7 |     "esbenp.prettier-vscode"
 8 |   ]
 9 | }
10 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # VLACKJACK ♠️♥️♣️♦️
 2 | 
 3 | > [!NOTE]
 4 | > As of January 2025, Vlackjack is now written in Vue 3! 🥳 If you would still like to view the source code for the Vue 2 / vuex
 5 | > version, see the [vue2 branch](https://github.com/kevinleedrum/vlackjack/tree/vue2).
 6 | 
 7 | ## Play Now 🚀
 8 | 
 9 | https://kevinleedrum.github.io/vlackjack/
10 | 
11 | ## Introduction
12 | 
13 | Vlackjack is a single-player HTML5 blackjack game built with [Vue 3](https://vuejs.org/).
14 | 
15 | ![Screenshot](./public/screenshot.png)
16 | 
17 | All of the sounds in this game are from [Freesound](https://freesound.org) and have a CC0 license.
18 | 
19 | ## NPM Scripts
20 | 
21 | ```bash
22 | # install dependencies
23 | npm install
24 | 
25 | # serve for development
26 | npm run dev
27 | 
28 | # build
29 | npm run build
30 | ```
31 | 
32 | ## Rules
33 | 
34 | - To keep the game simple, the initial bet is always one coin
35 | - 6 Decks, shuffled after 75% have been played
36 | - Blackjack pays 2-to-1
37 | - Dealer stands on any 17 (`S17`)
38 | - Double down on any two cards (`D2`)
39 | - Double down after splitting (`DAS`) (except Aces)
40 | - No resplitting (`NR`)
41 | - No insurance (`NI`)
42 | 
43 | ## License
44 | 
45 | [MIT](http://opensource.org/licenses/MIT)
46 | 
47 | Copyright (c) 2017-Present, Kevin Lee Drum
48 | 


--------------------------------------------------------------------------------
/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import pluginVue from 'eslint-plugin-vue'
 2 | import vueTsEslintConfig from '@vue/eslint-config-typescript'
 3 | import pluginVitest from '@vitest/eslint-plugin'
 4 | import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
 5 | 
 6 | export default [
 7 |   {
 8 |     name: 'app/files-to-lint',
 9 |     files: ['**/*.{ts,mts,tsx,vue}'],
10 |   },
11 | 
12 |   {
13 |     name: 'app/files-to-ignore',
14 |     ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
15 |   },
16 | 
17 |   ...pluginVue.configs['flat/essential'],
18 |   ...vueTsEslintConfig(),
19 |   
20 |   {
21 |     ...pluginVitest.configs.recommended,
22 |     files: ['src/**/__tests__/*'],
23 |   },
24 |   skipFormatting,
25 | ]
26 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" href="/favicon.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <meta name="author" content="Kevin Lee Drum" />
 8 |     <meta name="description" content="VLACKJACK Blackjack Simulator" />
 9 |     <meta property="og:title" content="VLACKJACK" />
10 |     <meta property="og:description" content="VLACKJACK Blackjack Simulator" />
11 |     <meta property="og:image" content="/screenshot.png" />
12 |     <title>VLACKJACK</title>
13 |   </head>
14 |   <body>
15 |     <div id="app"></div>
16 |     <script type="module" src="/src/main.ts"></script>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vlackjack3",
 3 |   "version": "0.0.0",
 4 |   "private": true,
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "run-p type-check \"build-only {@}\" --",
 9 |     "preview": "vite preview",
10 |     "test:unit": "vitest",
11 |     "build-only": "vite build",
12 |     "type-check": "vue-tsc --build",
13 |     "lint": "eslint . --fix",
14 |     "format": "prettier --write src/"
15 |   },
16 |   "dependencies": {
17 |     "@types/howler": "^2.2.12",
18 |     "howler": "^2.2.4",
19 |     "vue": "^3.5.13"
20 |   },
21 |   "devDependencies": {
22 |     "@tsconfig/node22": "^22.0.0",
23 |     "@types/jsdom": "^21.1.7",
24 |     "@types/node": "^22.10.2",
25 |     "@vitejs/plugin-vue": "^5.2.1",
26 |     "@vitest/eslint-plugin": "1.1.20",
27 |     "@vue/eslint-config-prettier": "^10.1.0",
28 |     "@vue/eslint-config-typescript": "^14.1.3",
29 |     "@vue/test-utils": "^2.4.6",
30 |     "@vue/tsconfig": "^0.7.0",
31 |     "eslint": "^9.14.0",
32 |     "eslint-plugin-vue": "^9.30.0",
33 |     "jsdom": "^25.0.1",
34 |     "npm-run-all2": "^7.0.2",
35 |     "prettier": "^3.3.3",
36 |     "typescript": "~5.6.3",
37 |     "vite": "^6.0.5",
38 |     "vite-plugin-vue-devtools": "^7.6.8",
39 |     "vitest": "^2.1.8",
40 |     "vue-tsc": "^2.1.10"
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/public/favicon.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
2 |   <rect width="36" height="36" rx="5" fill="#00467f"/>
3 |   <path d="M15.862 32 13 4h2.3509l1.4821 15.5925.6985 10.3075h.9199l.6815-10.3075L20.615 4H23l-2.8961 28H15.862Z" fill="#fff"/>
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/public/fonts/big_shoulders_display.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kevinleedrum/vlackjack/f880514a3418c57862d4c79b2f62596b89581fb1/public/fonts/big_shoulders_display.woff2


--------------------------------------------------------------------------------
/public/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kevinleedrum/vlackjack/f880514a3418c57862d4c79b2f62596b89581fb1/public/screenshot.png


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { state } from '@/store'
 3 | import { onMounted } from 'vue'
 4 | import GameHand from '@/components/GameHand.vue'
 5 | import SvgSprite from '@/components/SvgSprite.vue'
 6 | import AnimatedBackground from '@/components/AnimatedBackground.vue'
 7 | import { playSound, Sounds, initSound } from '@/sound'
 8 | import PlayerToolbar from '@/components/PlayerToolbar.vue'
 9 | import TitleScreen from '@/components/TitleScreen.vue'
10 | import GameHeader from '@/components/GameHeader.vue'
11 | 
12 | onMounted(() => {
13 |   initSound()
14 | })
15 | 
16 | function onClickCapture(e: MouseEvent) {
17 |   const target = e.target as HTMLButtonElement
18 |   if (target?.tagName === 'BUTTON' && !target?.disabled) {
19 |     playSound(Sounds.Click)
20 |   }
21 | }
22 | </script>
23 | 
24 | <template>
25 |   <SvgSprite />
26 |   <AnimatedBackground />
27 |   <GameHeader />
28 |   <main @click.capture="onClickCapture">
29 |     <section
30 |       class="player"
31 |       v-for="(player, p) in state.players"
32 |       :key="p"
33 |       :class="{ dealer: player.isDealer }"
34 |     >
35 |       <GameHand v-for="hand in player.hands" :hand="hand" :player="player" :key="hand.id" />
36 |     </section>
37 |     <PlayerToolbar />
38 |   </main>
39 |   <TitleScreen />
40 | </template>
41 | 
42 | <style scoped>
43 | main {
44 |   display: flex;
45 |   flex-direction: column-reverse;
46 |   align-items: center;
47 |   gap: 8rem;
48 |   padding-bottom: 8rem;
49 |   height: 100%;
50 |   padding: 2rem 1rem 1rem 1rem;
51 | }
52 | section.player {
53 |   display: flex;
54 |   flex-wrap: wrap;
55 |   align-items: center;
56 |   justify-content: center;
57 |   gap: 8rem;
58 |   min-height: 11.2rem;
59 | }
60 | section.player:not(.dealer) {
61 |   flex-grow: 1;
62 | }
63 | section.player.dealer {
64 |   z-index: -1;
65 | }
66 | </style>
67 | 


--------------------------------------------------------------------------------
/src/assets/main.css:
--------------------------------------------------------------------------------
  1 | @font-face {
  2 |   font-family: 'Big Shoulders Display';
  3 |   font-style: normal;
  4 |   font-display: block;
  5 |   src: url('/fonts/big_shoulders_display.woff2') format('woff2');
  6 | }
  7 | 
  8 | :root {
  9 |   --color-chip: #0055ff;
 10 |   --color-red: #f33;
 11 |   --color-dark-red: #b60000;
 12 |   --color-black: #161718;
 13 |   --color-cyan: #8fe;
 14 |   --color-dark-cyan: #00467f;
 15 |   --color-white: #fff;
 16 |   --color-off-white: #ffffef;
 17 |   --color-blue-white: #deffff;
 18 |   --color-gold: #ffd900;
 19 | 
 20 |   font-size: 8px;
 21 |   font-family: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
 22 |   font-optical-sizing: auto;
 23 |   color: var(--color-black);
 24 |   -webkit-font-smoothing: antialiased;
 25 |   -moz-osx-font-smoothing: grayscale;
 26 | }
 27 | 
 28 | @media (min-width: 600px) and (min-height: 768px) {
 29 |   :root {
 30 |     font-size: 12px;
 31 |   }
 32 | }
 33 | 
 34 | @media (min-width: 1024px) and (min-height: 900px) {
 35 |   :root {
 36 |     font-size: 16px;
 37 |   }
 38 | }
 39 | 
 40 | * {
 41 |   box-sizing: border-box;
 42 |   -webkit-tap-highlight-color: transparent;
 43 |   user-select: none;
 44 |   -webkit-user-select: none;
 45 | }
 46 | 
 47 | html,
 48 | body {
 49 |   margin: 0;
 50 |   padding: 0;
 51 |   height: 100%;
 52 |   overflow: hidden;
 53 | }
 54 | 
 55 | body {
 56 |   overscroll-behavior: none;
 57 |   background-color: var(--color-dark-cyan);
 58 | }
 59 | 
 60 | #app {
 61 |   height: 100%;
 62 | }
 63 | 
 64 | h1 {
 65 |   font-weight: 400;
 66 |   margin: 0;
 67 | }
 68 | 
 69 | h1 > span {
 70 |   color: var(--color-red);
 71 | }
 72 | 
 73 | button,
 74 | input,
 75 | textarea,
 76 | select {
 77 |   font: inherit;
 78 | }
 79 | 
 80 | button {
 81 |   display: flex;
 82 |   align-items: center;
 83 |   justify-content: center;
 84 |   text-transform: uppercase;
 85 |   font-size: 2.5rem;
 86 |   font-variation-settings: 'wght' 500;
 87 |   line-height: 1;
 88 |   padding: 1rem 1.5rem;
 89 |   border-radius: 1.75rem;
 90 |   border: 0;
 91 |   letter-spacing: 0.05rem;
 92 |   background-color: rgba(from var(--color-off-white) r g b / 0.9);
 93 |   color: currentColor;
 94 |   cursor: pointer;
 95 | }
 96 | 
 97 | button:disabled {
 98 |   opacity: 0.4;
 99 |   cursor: not-allowed;
100 | }
101 | 
102 | button:focus-visible:not(:disabled),
103 | button:active:not(:disabled) {
104 |   background-color: rgba(from var(--color-off-white) r g b / 1);
105 |   transform: translateY(-0.1rem);
106 | }
107 | 
108 | @media (hover: hover) {
109 |   button:hover:not(:disabled) {
110 |     background-color: rgba(from var(--color-off-white) r g b / 1);
111 |     transform: translateY(-0.1rem);
112 |   }
113 | }
114 | 
115 | button:focus-visible:not(:disabled) {
116 |   outline-offset: 0.25rem;
117 |   outline: 2px solid var(--color-white);
118 | }
119 | 
120 | button:active:not(:disabled) {
121 |   transform: translateY(0.1rem);
122 | }
123 | 
124 | .sr-only {
125 |   position: absolute;
126 |   width: 1px;
127 |   height: 1px;
128 |   padding: 0;
129 |   margin: -1px;
130 |   overflow: hidden;
131 |   clip: rect(0, 0, 0, 0);
132 |   white-space: nowrap;
133 |   border-width: 0;
134 | }
135 | 
136 | @media (prefers-reduced-motion: reduce) {
137 |   * {
138 |     animation-duration: 0s !important;
139 |     animation-iteration-count: 1 !important;
140 |     transition-duration: 0s !important;
141 |   }
142 | }
143 | 


--------------------------------------------------------------------------------
/src/assets/sounds/159698__qubodup__scroll-step-hover-sound-for-user-interface.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kevinleedrum/vlackjack/f880514a3418c57862d4c79b2f62596b89581fb1/src/assets/sounds/159698__qubodup__scroll-step-hover-sound-for-user-interface.mp3


--------------------------------------------------------------------------------
/src/assets/sounds/619832__cogfirestudios__puzzle-game-victory-melody.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kevinleedrum/vlackjack/f880514a3418c57862d4c79b2f62596b89581fb1/src/assets/sounds/619832__cogfirestudios__puzzle-game-victory-melody.mp3


--------------------------------------------------------------------------------
/src/assets/sounds/619839__cogfirestudios__sine-beep-sytlized-app-ui.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kevinleedrum/vlackjack/f880514a3418c57862d4c79b2f62596b89581fb1/src/assets/sounds/619839__cogfirestudios__sine-beep-sytlized-app-ui.mp3


--------------------------------------------------------------------------------
/src/assets/sounds/619840__cogfirestudios__achievement-accomplish-jingle-app-ui.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kevinleedrum/vlackjack/f880514a3418c57862d4c79b2f62596b89581fb1/src/assets/sounds/619840__cogfirestudios__achievement-accomplish-jingle-app-ui.mp3


--------------------------------------------------------------------------------
/src/assets/sounds/636624__cogfirestudios__deep-hit.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kevinleedrum/vlackjack/f880514a3418c57862d4c79b2f62596b89581fb1/src/assets/sounds/636624__cogfirestudios__deep-hit.mp3


--------------------------------------------------------------------------------
/src/assets/sounds/636634__cogfirestudios__app-ui-puzzle-game.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kevinleedrum/vlackjack/f880514a3418c57862d4c79b2f62596b89581fb1/src/assets/sounds/636634__cogfirestudios__app-ui-puzzle-game.mp3


--------------------------------------------------------------------------------
/src/assets/sounds/636635__cogfirestudios__app-ui-puzzle-game.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kevinleedrum/vlackjack/f880514a3418c57862d4c79b2f62596b89581fb1/src/assets/sounds/636635__cogfirestudios__app-ui-puzzle-game.mp3


--------------------------------------------------------------------------------
/src/assets/sounds/636642__cogfirestudios__app-ui-puzzle-game.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kevinleedrum/vlackjack/f880514a3418c57862d4c79b2f62596b89581fb1/src/assets/sounds/636642__cogfirestudios__app-ui-puzzle-game.mp3


--------------------------------------------------------------------------------
/src/assets/sounds/636643__cogfirestudios__ui-app.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kevinleedrum/vlackjack/f880514a3418c57862d4c79b2f62596b89581fb1/src/assets/sounds/636643__cogfirestudios__ui-app.mp3


--------------------------------------------------------------------------------
/src/assets/sounds/636647__cogfirestudios__ui-app.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kevinleedrum/vlackjack/f880514a3418c57862d4c79b2f62596b89581fb1/src/assets/sounds/636647__cogfirestudios__ui-app.mp3


--------------------------------------------------------------------------------
/src/assets/sounds/636649__cogfirestudios__ui-app.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kevinleedrum/vlackjack/f880514a3418c57862d4c79b2f62596b89581fb1/src/assets/sounds/636649__cogfirestudios__ui-app.mp3


--------------------------------------------------------------------------------
/src/assets/sounds/636655__cogfirestudios__ui-achievement-puzzle-game-application.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kevinleedrum/vlackjack/f880514a3418c57862d4c79b2f62596b89581fb1/src/assets/sounds/636655__cogfirestudios__ui-achievement-puzzle-game-application.mp3


--------------------------------------------------------------------------------
/src/assets/sounds/636659__cogfirestudios__ui-achievement-puzzle-game-application.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kevinleedrum/vlackjack/f880514a3418c57862d4c79b2f62596b89581fb1/src/assets/sounds/636659__cogfirestudios__ui-achievement-puzzle-game-application.mp3


--------------------------------------------------------------------------------
/src/assets/sounds/636674__cogfirestudios__app-ui-sound.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kevinleedrum/vlackjack/f880514a3418c57862d4c79b2f62596b89581fb1/src/assets/sounds/636674__cogfirestudios__app-ui-sound.mp3


--------------------------------------------------------------------------------
/src/assets/sounds/636677__cogfirestudios__app-ui-sound.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kevinleedrum/vlackjack/f880514a3418c57862d4c79b2f62596b89581fb1/src/assets/sounds/636677__cogfirestudios__app-ui-sound.mp3


--------------------------------------------------------------------------------
/src/assets/sounds/677860__el_boss__ui-button-click-snap.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kevinleedrum/vlackjack/f880514a3418c57862d4c79b2f62596b89581fb1/src/assets/sounds/677860__el_boss__ui-button-click-snap.mp3


--------------------------------------------------------------------------------
/src/assets/sounds/757328__steaq__ui-hover-item.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kevinleedrum/vlackjack/f880514a3418c57862d4c79b2f62596b89581fb1/src/assets/sounds/757328__steaq__ui-hover-item.mp3


--------------------------------------------------------------------------------
/src/cards.ts:
--------------------------------------------------------------------------------
 1 | import type { Card, CardRank } from './types'
 2 | 
 3 | export const CardValue = {
 4 |   A: 1,
 5 |   '2': 2,
 6 |   '3': 3,
 7 |   '4': 4,
 8 |   '5': 5,
 9 |   '6': 6,
10 |   '7': 7,
11 |   '8': 8,
12 |   '9': 9,
13 |   '10': 10,
14 |   J: 10,
15 |   Q: 10,
16 |   K: 10,
17 | } as const
18 | 
19 | export const CardSuits = ['♠', '♦', '♣', '♥'] as const
20 | 
21 | export function generateShoe(numberOfDecks: number) {
22 |   const shoe: Card[] = []
23 |   for (let i = 0; i < numberOfDecks; i++) {
24 |     for (const card of generateDeck()) {
25 |       shoe.push(card)
26 |     }
27 |   }
28 |   return shuffle(shoe)
29 | }
30 | 
31 | export function generateDeck() {
32 |   const deck: Card[] = []
33 |   let index = 0
34 |   for (const rank of Object.keys(CardValue) as CardRank[]) {
35 |     for (const suit of CardSuits) {
36 |       deck.push({ rank, suit, index: index++ })
37 |     }
38 |   }
39 |   return deck
40 | }
41 | 
42 | export function shuffle<T>(array: T[]) {
43 |   for (let i = array.length - 1; i > 0; i--) {
44 |     const j = Math.floor(Math.random() * (i + 1))
45 |     ;[array[i], array[j]] = [array[j], array[i]]
46 |   }
47 |   return array
48 | }
49 | 


--------------------------------------------------------------------------------
/src/components/AnimatedBackground.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { ref, type CSSProperties } from 'vue'
 3 | 
 4 | const NUM_SHAPES = 60
 5 | const MIN_SIZE = 20
 6 | const MAX_SIZE = 80
 7 | const MIN_DURATION = 60
 8 | const MAX_DURATION = 120
 9 | 
10 | type Shape = {
11 |   id: number
12 |   suit: string
13 |   style: CSSProperties
14 | }
15 | 
16 | const shapes = ref<Shape[]>([])
17 | shapes.value = Array.from({ length: NUM_SHAPES }, (_, i) => ({
18 |   id: i,
19 |   suit: ['♣', '♦', '♥', '♠'][i % 4],
20 |   style: {
21 |     top: `${Math.random() * window.innerHeight}px`,
22 |     width: `${Math.random() * (MAX_SIZE - MIN_SIZE) + MIN_SIZE}px`,
23 |     height: `${Math.random() * (MAX_SIZE - MIN_SIZE) + MIN_SIZE}px`,
24 |     animationDuration: `${Math.random() * (MAX_DURATION - MIN_DURATION) + MIN_DURATION}s`,
25 |     animationDelay: `${-Math.random() * MAX_DURATION}s`,
26 |   },
27 | }))
28 | </script>
29 | 
30 | <template>
31 |   <div v-once class="animated-bg">
32 |     <svg v-for="shape in shapes" :key="shape.id" :style="shape.style">
33 |       <use :href="`#suit-${shape.suit}`" />
34 |     </svg>
35 |   </div>
36 | </template>
37 | 
38 | <style scoped>
39 | .animated-bg {
40 |   position: absolute;
41 |   inset: 0;
42 |   overflow: hidden;
43 |   z-index: -1;
44 | }
45 | .animated-bg svg {
46 |   opacity: 0.2;
47 |   position: absolute;
48 |   left: -80px;
49 |   animation: fall 5s linear infinite;
50 |   color: transparent;
51 |   stroke-width: 2;
52 |   stroke: var(--color-cyan);
53 |   filter: blur(0.5px);
54 | }
55 | @keyframes fall {
56 |   0% {
57 |     transform: translate3d(0, 0, 0);
58 |   }
59 |   100% {
60 |     transform: translate3d(calc(100vw + 80px), 0, 0);
61 |   }
62 | }
63 | </style>
64 | 


--------------------------------------------------------------------------------
/src/components/GameHand.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { computed } from 'vue'
  3 | import type { Card, Player, Hand} from '@/types'
  4 | import { dealer, state } from '@/store'
  5 | import HandTotal from './HandTotal.vue'
  6 | import HandBet from './HandBet.vue'
  7 | import PlayingCard from './PlayingCard.vue'
  8 | 
  9 | const props = defineProps<{
 10 |   hand: Hand
 11 |   player: Player
 12 | }>()
 13 | 
 14 | const isActiveHand = computed(() => state.activeHand === props.hand && !props.player.isDealer)
 15 | 
 16 | const isSplitHand = computed(
 17 |   () => state.activePlayer === props.player && !!state.activeHand && props.player.hands.length > 1,
 18 | )
 19 | 
 20 | const isDealer = computed(() => dealer.value.hands.includes(props.hand))
 21 | 
 22 | function isFaceDown(card: Card) {
 23 |   if (!isDealer.value) return false
 24 |   if (props.hand.cards.indexOf(card) !== 0) return false
 25 |   return !state.showDealerHoleCard
 26 | }
 27 | 
 28 | function isSplitCard(card: Card) {
 29 |   if (props.player.hands.indexOf(props.hand) !== 1) return false
 30 |   return props.hand.cards.indexOf(card) === 0
 31 | }
 32 | </script>
 33 | 
 34 | <template>
 35 |   <article class="hand" :class="{ 'active-hand': isActiveHand, 'split-hand': isSplitHand }">
 36 |     <h2 class="sr-only">{{ isDealer ? "Dealer's" : 'Your' }} hand</h2>
 37 |     <transition-group name="deal">
 38 |       <PlayingCard
 39 |         v-for="card in hand.cards"
 40 |         :card="card"
 41 |         :is-face-down="isFaceDown(card)"
 42 |         :key="card.index"
 43 |         :class="{ 'split-card': isSplitCard(card) }"
 44 |       />
 45 |     </transition-group>
 46 |     <HandBet :hand="hand" />
 47 |     <div v-if="!player.isDealer" class="hand-result">
 48 |       <transition name="result">
 49 |         <svg v-if="hand.result" :class="{ blackjack: hand.result === 'blackjack' }">
 50 |           <use :href="`#result-${hand.result}`" />
 51 |         </svg>
 52 |       </transition>
 53 |     </div>
 54 |     <HandTotal :hand="hand" />
 55 |   </article>
 56 | </template>
 57 | 
 58 | <style scoped>
 59 | .hand {
 60 |   display: flex;
 61 |   justify-content: center;
 62 |   flex-wrap: wrap;
 63 |   gap: 0.25rem;
 64 |   position: relative;
 65 |   transition: scale 0.3s ease-in-out;
 66 |   isolation: isolate;
 67 |   width: fit-content;
 68 |   min-height: 11.2rem;
 69 |   min-width: 8rem;
 70 |   max-width: 60vw;
 71 | }
 72 | .active-hand {
 73 |   scale: 1.3;
 74 |   transform-origin: center center;
 75 |   z-index: 1;
 76 | }
 77 | @media (prefers-reduced-motion: reduce) {
 78 |   .active-hand {
 79 |     scale: 1;
 80 |   }
 81 | }
 82 | .split-hand:not(.active-hand) {
 83 |   opacity: 0.5;
 84 | }
 85 | .hand-result {
 86 |   position: absolute;
 87 |   inset: 0;
 88 |   display: flex;
 89 |   align-items: center;
 90 |   justify-content: center;
 91 |   pointer-events: none;
 92 | }
 93 | .hand-result svg {
 94 |   position: absolute;
 95 |   margin-top: 2rem;
 96 |   width: 14rem;
 97 | }
 98 | .hand-result svg.blackjack {
 99 |   transform: scale(1.5);
100 | }
101 | .split-card {
102 |   animation: split 0.3s ease-in-out forwards;
103 | }
104 | .deal-enter-active {
105 |   z-index: 2;
106 |   animation: deal 0.3s;
107 | }
108 | .deal-leave-active:not(.active-hand .card) {
109 |   z-index: 2;
110 |   animation: deal 0.3s reverse;
111 | }
112 | .result-enter-active {
113 |   animation: unmask 0.4s ease-in-out forwards;
114 | }
115 | .result-leave-active {
116 |   animation: unmask 0.1s ease-in-out reverse;
117 |   z-index: 2;
118 | }
119 | @keyframes deal {
120 |   0% {
121 |     transform: translate3d(0, -100vh, 0);
122 |   }
123 |   100% {
124 |     transform: translate3d(0, 0, 0);
125 |   }
126 | }
127 | @keyframes split {
128 |   0% {
129 |     transform: translate3d(-7rem, 0, 0);
130 |   }
131 |   100% {
132 |     transform: translate3d(0, 0, 0);
133 |   }
134 | }
135 | @keyframes unmask {
136 |   0% {
137 |     clip-path: inset(0 0 100% 100%);
138 |   }
139 |   100% {
140 |     clip-path: inset(0 0 0 0);
141 |   }
142 | }
143 | </style>
144 | 


--------------------------------------------------------------------------------
/src/components/GameHeader.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { state } from '@/store'
  3 | 
  4 | function toggleSound() {
  5 |   state.isMuted = !state.isMuted
  6 |   localStorage.setItem('isMuted', state.isMuted.toString())
  7 | }
  8 | </script>
  9 | 
 10 | <template>
 11 |   <header>
 12 |     <a
 13 |       class="github"
 14 |       aria-label="Source on GitHub"
 15 |       href="https://github.com/kevinleedrum/vlackjack"
 16 |     >
 17 |       <svg role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
 18 |         <path
 19 |           fill="currentColor"
 20 |           d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
 21 |         />
 22 |       </svg>
 23 |     </a>
 24 |     <h1>Vl<span>a</span>ck<span>j</span>ack</h1>
 25 |     <button @click="toggleSound" aria-label="Toggle sound">
 26 |       <svg
 27 |         v-if="!state.isMuted"
 28 |         xmlns="http://www.w3.org/2000/svg"
 29 |         width="24"
 30 |         height="24"
 31 |         viewBox="0 0 24 24"
 32 |         fill="none"
 33 |         stroke="currentColor"
 34 |         stroke-width="2"
 35 |         stroke-linecap="round"
 36 |         stroke-linejoin="round"
 37 |       >
 38 |         <path
 39 |           d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"
 40 |         />
 41 |         <path d="M16 9a5 5 0 0 1 0 6" />
 42 |         <path d="M19.364 18.364a9 9 0 0 0 0-12.728" />
 43 |       </svg>
 44 |       <svg
 45 |         v-else
 46 |         xmlns="http://www.w3.org/2000/svg"
 47 |         width="24"
 48 |         height="24"
 49 |         viewBox="0 0 24 24"
 50 |         fill="none"
 51 |         stroke="currentColor"
 52 |         stroke-width="2"
 53 |         stroke-linecap="round"
 54 |         stroke-linejoin="round"
 55 |         class="lucide lucide-volume-off"
 56 |       >
 57 |         <path d="M16 9a5 5 0 0 1 .95 2.293" />
 58 |         <path d="M19.364 5.636a9 9 0 0 1 1.889 9.96" />
 59 |         <path d="m2 2 20 20" />
 60 |         <path
 61 |           d="m7 7-.587.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298V11"
 62 |         />
 63 |         <path d="M9.828 4.172A.686.686 0 0 1 11 4.657v.686" />
 64 |       </svg>
 65 |     </button>
 66 |   </header>
 67 | </template>
 68 | 
 69 | <style scoped>
 70 | header {
 71 |   position: fixed;
 72 |   top: 0;
 73 |   left: 0;
 74 |   right: 0;
 75 |   width: 100%;
 76 |   padding: 0 1rem;
 77 |   display: flex;
 78 |   align-items: center;
 79 |   justify-content: space-between;
 80 |   height: 60px;
 81 |   pointer-events: none;
 82 | }
 83 | h1 {
 84 |   position: absolute;
 85 |   width: 1px;
 86 |   height: 1px;
 87 |   padding: 0;
 88 |   margin: -1px;
 89 |   overflow: hidden;
 90 |   clip: rect(0, 0, 0, 0);
 91 |   white-space: nowrap;
 92 |   border-width: 0;
 93 | }
 94 | a,
 95 | button {
 96 |   border-radius: 50%;
 97 |   height: 40px;
 98 |   width: 40px;
 99 |   pointer-events: auto;
100 |   opacity: 0.75;
101 |   color: var(--color-off-white);
102 | }
103 | @media (hover: hover) {
104 |   a:hover,
105 |   button:hover {
106 |     opacity: 1;
107 |   }
108 |   button:hover {
109 |     color: var(--color-black);
110 |   }
111 | }
112 | 
113 | button {
114 |   padding: 0.625rem;
115 |   background: transparent;
116 | }
117 | 
118 | button:focus-visible,
119 | button:active {
120 |   color: var(--color-black);
121 | }
122 | 
123 | @media (min-width: 900px) {
124 |   header {
125 |     padding: 1rem 0;
126 |     right: unset;
127 |     bottom: 0;
128 |     width: 60px;
129 |     height: 100%;
130 |     flex-direction: column;
131 |     background-color: var(--color-black);
132 |   }
133 |   h1 {
134 |     display: flex;
135 |     align-items: center;
136 |     justify-content: center;
137 |     width: 100%;
138 |     font-size: 32px;
139 |     letter-spacing: 0.1rem;
140 |     color: var(--color-white);
141 |     text-transform: uppercase;
142 |     font-variation-settings: 'wght' 500;
143 |     rotate: -90deg;
144 |     position: relative;
145 |     margin: 0;
146 |     clip: unset;
147 |     height: auto;
148 |     overflow: visible;
149 |   }
150 | }
151 | </style>
152 | 


--------------------------------------------------------------------------------
/src/components/HandBet.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <transition-group
 3 |     tag="div"
 4 |     name="chip"
 5 |     class="hand-bet"
 6 |     :class="{ 'is-win': isWin, 'is-loss': isLoss }"
 7 |   >
 8 |     <svg class="chip" v-for="i in hand.bet" :key="i">
 9 |       <use href="#chip" />
10 |     </svg>
11 |   </transition-group>
12 | </template>
13 | 
14 | <script lang="ts" setup>
15 | import type { Hand } from '@/types'
16 | import { computed } from 'vue'
17 | const props = defineProps<{ hand: Hand }>()
18 | const isLoss = computed(() => ['lose', 'bust'].includes(props.hand.result!))
19 | const isWin = computed(() => ['push', 'win', 'blackjack'].includes(props.hand.result!))
20 | </script>
21 | 
22 | <style scoped>
23 | .hand-bet {
24 |   position: absolute;
25 |   bottom: -4rem;
26 |   left: 0;
27 |   width: 100%;
28 |   text-align: center;
29 | }
30 | .chip {
31 |   height: 2rem;
32 |   aspect-ratio: 1;
33 |   color: var(--color-chip);
34 |   transition: all 0.3s ease-in;
35 | }
36 | .chip.is-enter-active,
37 | .chip.is-leave-active {
38 |   will-change: transform, opacity;
39 | }
40 | .chip-leave-to,
41 | .is-win .chip-enter-from {
42 |   transform: translate3d(0, -50vh, 0);
43 |   opacity: 0;
44 | }
45 | .chip-enter-from,
46 | .is-win .chip-leave-to {
47 |   transform: translate3d(0, 50vh, 0);
48 |   opacity: 0;
49 | }
50 | </style>
51 | 


--------------------------------------------------------------------------------
/src/components/HandTotal.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { type Hand } from '@/types'
 3 | import { dealer, state } from '@/store'
 4 | import { computed } from 'vue'
 5 | 
 6 | const props = defineProps<{ hand: Hand }>()
 7 | 
 8 | const total = computed(() => {
 9 |   if (props.hand.cards.length < 2) return // Wait until two cards are dealt
10 |   const isDealer = dealer.value.hands.includes(props.hand)
11 |   if (isDealer && !state.showDealerHoleCard) return // Hide dealer's total until hole card is revealed
12 |   return props.hand.total
13 | })
14 | </script>
15 | 
16 | <template>
17 |   <transition name="pop">
18 |     <p v-if="total" class="hand-total" :class="{ bust: total > 21, 'twenty-one': total === 21 }">
19 |       <span class="sr-only">Total:</span>
20 |       {{ total }}
21 |     </p>
22 |   </transition>
23 | </template>
24 | 
25 | <style scoped>
26 | .hand-total {
27 |   --background-color: var(--color-cyan);
28 |   display: inline-block;
29 |   position: absolute;
30 |   top: -1.4rem;
31 |   right: -1.4rem;
32 |   width: 2.8rem;
33 |   height: 2.8rem;
34 |   font-size: 1.4rem;
35 |   margin: 0;
36 |   font-variation-settings: 'wght' 700;
37 |   line-height: 2em;
38 |   background: var(--background-color);
39 |   border-radius: 50%;
40 |   text-align: center;
41 |   letter-spacing: 0.05em;
42 |   color: var(--color-black);
43 |   transform-origin: center center;
44 |   z-index: 3;
45 | }
46 | .bust {
47 |   --background-color: var(--color-red);
48 |   color: var(--color-white);
49 | }
50 | .twenty-one {
51 |   --background-color: var(--color-gold);
52 | }
53 | .bust,
54 | .twenty-one {
55 |   filter: drop-shadow(0 0 0.5rem var(--background-color));
56 | }
57 | .pop-enter-active {
58 |   transition: all 0.3s ease-out;
59 | }
60 | .pop-leave-active {
61 |   transition: all 0.1s ease-in;
62 | }
63 | .pop-enter-from,
64 | .pop-leave-to {
65 |   scale: 0;
66 |   rotate: 360deg;
67 | }
68 | </style>
69 | 


--------------------------------------------------------------------------------
/src/components/PlayerBank.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <span role="status" class="bank" :class="{ 'is-increasing': isIncreasing }">
 3 |     <svg role="img" aria-label="Chips" class="chip" :class="{ 'is-spinning': isIncreasing }">
 4 |       <use href="#chip" />
 5 |     </svg>
 6 |     <span class="times">&times;</span>
 7 |     <span class="number">{{ state.players[0].bank }}</span>
 8 |   </span>
 9 | </template>
10 | 
11 | <script lang="ts" setup>
12 | import { ref, watch } from 'vue'
13 | import { state } from '../store'
14 | 
15 | const isIncreasing = ref(false)
16 | 
17 | watch(
18 |   () => state.players[0].bank,
19 |   (current, previous) => {
20 |     if (current > previous) {
21 |       isIncreasing.value = true
22 |       setTimeout(() => {
23 |         isIncreasing.value = false
24 |       }, 1000)
25 |     }
26 |   },
27 | )
28 | </script>
29 | 
30 | <style scoped>
31 | .bank {
32 |   background: rgba(0, 0, 0, 0.2);
33 |   height: 4rem;
34 |   display: flex;
35 |   align-self: center;
36 |   padding: 0.75rem;
37 |   justify-content: center;
38 |   align-items: center;
39 |   border-radius: 1.75rem;
40 |   font-size: 2.75rem;
41 |   font-variation-settings: 'wght' 600;
42 |   line-height: 1;
43 |   transition: all 0.2s ease;
44 |   color: var(--color-gold);
45 |   gap: 0.5rem;
46 | }
47 | .bank.is-increasing {
48 |   background: rgba(0, 0, 0, 0.4);
49 | }
50 | .bank.is-increasing .number {
51 |   transform: scale(1.1);
52 | }
53 | .chip {
54 |   height: 100%;
55 |   aspect-ratio: 1;
56 | }
57 | .times {
58 |   text-align: center;
59 |   font-size: 2rem;
60 |   flex: 1;
61 | }
62 | .number {
63 |   min-width: 2ch;
64 |   text-align: center;
65 |   transition: all 0.2s ease;
66 |   line-height: normal;
67 | }
68 | .is-spinning {
69 |   animation: spin 1s ease;
70 |   transform-origin: center;
71 |   transform-box: fill-box;
72 |   transform-style: preserve-3d;
73 |   backface-visibility: hidden;
74 | }
75 | @keyframes spin {
76 |   0% {
77 |     transform: rotate3d(0, 1, 0, 0deg);
78 |   }
79 |   100% {
80 |     transform: rotate3d(0, 1, 0, 2160deg);
81 |   }
82 | }
83 | </style>
84 | 


--------------------------------------------------------------------------------
/src/components/PlayerToolbar.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { canDoubleDown, canSplit, state, doubleDown, endHand, hit, split } from '@/store'
 3 | import PlayerBank from '@/components/PlayerBank.vue'
 4 | </script>
 5 | 
 6 | <template>
 7 |   <div role="toolbar">
 8 |     <button :disabled="!canDoubleDown" @click="doubleDown">Double<br />Down</button>
 9 |     <button :disabled="!canSplit" @click="split">Split</button>
10 |     <PlayerBank />
11 |     <button :disabled="state.isDealing" @click="endHand">Stand</button>
12 |     <button :disabled="state.isDealing" @click="hit">Hit</button>
13 |   </div>
14 | </template>
15 | 
16 | <style scoped>
17 | [role='toolbar'] {
18 |   display: grid;
19 |   grid-template-columns: repeat(5, 1fr);
20 |   gap: 0.5rem;
21 |   width: max-content;
22 |   margin: 0 auto;
23 |   order: -1;
24 | }
25 | button:first-of-type {
26 |   font-size: 2rem;
27 | }
28 | </style>
29 | 


--------------------------------------------------------------------------------
/src/components/PlayingCard.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { type Card } from '@/types'
  3 | import { computed } from 'vue'
  4 | 
  5 | const FACE_NAMES = {
  6 |   A: 'Ace',
  7 |   J: 'Jack',
  8 |   Q: 'Queen',
  9 |   K: 'King',
 10 | }
 11 | 
 12 | const SUIT_NAMES = {
 13 |   '♠': 'Spades',
 14 |   '♦': 'Diamonds',
 15 |   '♣': 'Clubs',
 16 |   '♥': 'Hearts',
 17 | }
 18 | 
 19 | const props = defineProps<{
 20 |   card: Card
 21 |   isFaceDown?: boolean
 22 | }>()
 23 | 
 24 | const symbolCount = computed(() => {
 25 |   if (['J', 'Q', 'K', 'A', 'a'].includes(props.card.rank)) return 1
 26 |   return +props.card.rank
 27 | })
 28 | 
 29 | function getCardLabel(card: Card) {
 30 |   if (props.isFaceDown) return 'Face-down card'
 31 |   const rank = Object.keys(FACE_NAMES).includes(card.rank)
 32 |     ? FACE_NAMES[card.rank as keyof typeof FACE_NAMES]
 33 |     : card.rank
 34 |   const suit = SUIT_NAMES[card.suit as keyof typeof SUIT_NAMES]
 35 |   return `${rank} of ${suit}`
 36 | }
 37 | </script>
 38 | 
 39 | <template>
 40 |   <div
 41 |     class="card"
 42 |     :data-rank="isFaceDown ? null : card.rank.toLowerCase()"
 43 |     :data-suit="isFaceDown ? null : card.suit"
 44 |     role="img"
 45 |     :aria-label="getCardLabel(card)"
 46 |     :class="{ 'face-down': isFaceDown }"
 47 |   >
 48 |     <div class="card-face" role="presentation">
 49 |       <template v-if="!isFaceDown">
 50 |         <div class="card-corner" v-if="!isFaceDown">
 51 |           <span class="card-rank">{{ card.rank.toUpperCase() }}</span>
 52 |           <svg>
 53 |             <use :href="'#suit-' + card.suit"></use>
 54 |           </svg>
 55 |         </div>
 56 |         <div class="card-center">
 57 |           <svg v-for="i in symbolCount" :key="i">
 58 |             <use :href="'#suit-' + card.suit"></use>
 59 |           </svg>
 60 |         </div>
 61 |         <div class="card-corner" v-if="!isFaceDown">
 62 |           <span class="card-rank">{{ card.rank.toUpperCase() }}</span>
 63 |           <svg class="card-suit">
 64 |             <use :href="'#suit-' + card.suit"></use>
 65 |           </svg>
 66 |         </div>
 67 |       </template>
 68 |     </div>
 69 |     <div class="card-back" role="presentation">
 70 |       <svg>
 71 |         <use href="#flourish"></use>
 72 |       </svg>
 73 |     </div>
 74 |   </div>
 75 | </template>
 76 | 
 77 | <style scoped>
 78 | .card {
 79 |   position: relative;
 80 |   display: inline-block;
 81 |   width: 8rem;
 82 |   height: 11.2rem;
 83 |   transition: all 0.2s ease;
 84 |   line-height: 1;
 85 | }
 86 | .card[data-suit='♥'],
 87 | .card[data-suit='♦'] {
 88 |   color: var(--color-red);
 89 | }
 90 | .card-face,
 91 | .card-back {
 92 |   border-radius: 0.75rem;
 93 |   position: absolute;
 94 |   left: 0;
 95 |   right: 0;
 96 |   top: 0;
 97 |   bottom: 0;
 98 |   backface-visibility: hidden;
 99 |   transition: transform 0.5s;
100 |   transform-style: preserve-3d;
101 | }
102 | .card-face {
103 |   background-image: linear-gradient(to bottom, var(--color-white), var(--color-blue-white));
104 |   background-color: var(--color-white);
105 |   padding: 0.4rem;
106 |   display: flex;
107 |   gap: 0.25rem;
108 | }
109 | .card-corner {
110 |   font-size: 2.2rem;
111 |   display: inline-flex;
112 |   flex-direction: column;
113 |   align-items: center;
114 |   justify-content: start;
115 | }
116 | .card-corner:last-of-type {
117 |   flex-direction: column-reverse;
118 |   justify-content: end;
119 | }
120 | .card-corner:last-of-type > * {
121 |   transform-origin: center;
122 |   rotate: 180deg;
123 | }
124 | .card-center {
125 |   flex: 1;
126 |   display: grid;
127 |   grid-template-columns: repeat(3, 1fr);
128 |   grid-template-rows: repeat(8, 1fr);
129 |   align-items: center;
130 |   padding: 0.5rem 0.05rem;
131 | }
132 | .card-corner svg {
133 |   height: 0.5em;
134 |   aspect-ratio: 1;
135 | }
136 | .card-center svg {
137 |   grid-row-end: span 2;
138 |   object-fit: cover;
139 |   aspect-ratio: 1;
140 |   width: 100%;
141 |   overflow: visible;
142 | }
143 | .card-back {
144 |   display: flex;
145 |   align-items: center;
146 |   justify-content: center;
147 |   transform: rotateY(-180deg);
148 |   background-color: var(--color-red);
149 |   padding: 0.65rem;
150 |   overflow: hidden;
151 |   outline: 0.1rem solid rgba(255, 255, 255, 0.75);
152 |   outline-offset: -0.65rem;
153 |   border: 0.4rem solid var(--color-white);
154 | }
155 | .card-back svg {
156 |   --color-black: var(--color-white);
157 |   width: 100%;
158 |   opacity: 0.75;
159 | }
160 | .face-down .card-back {
161 |   transform: rotateY(0deg);
162 | }
163 | .face-down .card-face {
164 |   transform: rotateY(180deg);
165 | }
166 | [data-rank='a'] svg,
167 | [data-rank='j'] svg,
168 | [data-rank='q'] svg,
169 | [data-rank='k'] svg {
170 |   grid-row-start: 2;
171 |   grid-column-start: 1;
172 |   grid-row-end: span 6;
173 |   grid-column-end: span 3;
174 | }
175 | 
176 | [data-rank='2'] svg:first-child {
177 |   grid-row-start: 1;
178 |   grid-column-start: 2;
179 | }
180 | 
181 | [data-rank='2'] svg:nth-child(2) {
182 |   grid-row-start: 7;
183 |   grid-column-start: 2;
184 |   transform: rotate(180deg);
185 | }
186 | 
187 | [data-rank='3'] svg:first-child {
188 |   grid-row-start: 1;
189 |   grid-column-start: 2;
190 | }
191 | 
192 | [data-rank='3'] svg:nth-child(2) {
193 |   grid-row-start: 4;
194 |   grid-column-start: 2;
195 | }
196 | 
197 | [data-rank='3'] svg:nth-child(3) {
198 |   grid-row-start: 7;
199 |   grid-column-start: 2;
200 |   transform: rotate(180deg);
201 | }
202 | 
203 | [data-rank='4'] svg:first-child {
204 |   grid-row-start: 1;
205 |   grid-column-start: 1;
206 | }
207 | 
208 | [data-rank='4'] svg:nth-child(2) {
209 |   grid-row-start: 1;
210 |   grid-column-start: 3;
211 | }
212 | 
213 | [data-rank='4'] svg:nth-child(3) {
214 |   grid-row-start: 7;
215 |   grid-column-start: 1;
216 |   transform: rotate(180deg);
217 | }
218 | 
219 | [data-rank='4'] svg:nth-child(4) {
220 |   grid-row-start: 7;
221 |   grid-column-start: 3;
222 |   transform: rotate(180deg);
223 | }
224 | 
225 | [data-rank='5'] svg:first-child {
226 |   grid-row-start: 1;
227 |   grid-column-start: 1;
228 | }
229 | 
230 | [data-rank='5'] svg:nth-child(2) {
231 |   grid-row-start: 1;
232 |   grid-column-start: 3;
233 | }
234 | 
235 | [data-rank='5'] svg:nth-child(3) {
236 |   grid-row-start: 7;
237 |   grid-column-start: 1;
238 |   transform: rotate(180deg);
239 | }
240 | 
241 | [data-rank='5'] svg:nth-child(4) {
242 |   grid-row-start: 7;
243 |   grid-column-start: 3;
244 |   transform: rotate(180deg);
245 | }
246 | 
247 | [data-rank='5'] svg:nth-child(5) {
248 |   grid-row-start: 4;
249 |   grid-column-start: 2;
250 | }
251 | 
252 | [data-rank='6'] svg:first-child {
253 |   grid-row-start: 1;
254 |   grid-column-start: 1;
255 | }
256 | 
257 | [data-rank='6'] svg:nth-child(2) {
258 |   grid-row-start: 1;
259 |   grid-column-start: 3;
260 | }
261 | 
262 | [data-rank='6'] svg:nth-child(3) {
263 |   grid-row-start: 7;
264 |   grid-column-start: 1;
265 |   transform: rotate(180deg);
266 | }
267 | 
268 | [data-rank='6'] svg:nth-child(4) {
269 |   grid-row-start: 7;
270 |   grid-column-start: 3;
271 |   transform: rotate(180deg);
272 | }
273 | 
274 | [data-rank='6'] svg:nth-child(5) {
275 |   grid-row-start: 4;
276 |   grid-column-start: 1;
277 | }
278 | 
279 | [data-rank='6'] svg:nth-child(6) {
280 |   grid-row-start: 4;
281 |   grid-column-start: 3;
282 | }
283 | 
284 | [data-rank='7'] svg:first-child {
285 |   grid-row-start: 1;
286 |   grid-column-start: 1;
287 | }
288 | 
289 | [data-rank='7'] svg:nth-child(2) {
290 |   grid-row-start: 1;
291 |   grid-column-start: 3;
292 | }
293 | 
294 | [data-rank='7'] svg:nth-child(3) {
295 |   grid-row-start: 7;
296 |   grid-column-start: 1;
297 |   transform: rotate(180deg);
298 | }
299 | 
300 | [data-rank='7'] svg:nth-child(4) {
301 |   grid-row-start: 7;
302 |   grid-column-start: 3;
303 |   transform: rotate(180deg);
304 | }
305 | 
306 | [data-rank='7'] svg:nth-child(5) {
307 |   grid-row-start: 4;
308 |   grid-column-start: 1;
309 | }
310 | 
311 | [data-rank='7'] svg:nth-child(6) {
312 |   grid-row-start: 4;
313 |   grid-column-start: 3;
314 | }
315 | 
316 | [data-rank='7'] svg:nth-child(7) {
317 |   grid-row-start: 2;
318 |   grid-column-start: 2;
319 | }
320 | 
321 | [data-rank='8'] svg:first-child {
322 |   grid-row-start: 1;
323 |   grid-column-start: 1;
324 | }
325 | 
326 | [data-rank='8'] svg:nth-child(2) {
327 |   grid-row-start: 1;
328 |   grid-column-start: 3;
329 | }
330 | 
331 | [data-rank='8'] svg:nth-child(3) {
332 |   grid-row-start: 7;
333 |   grid-column-start: 1;
334 |   transform: rotate(180deg);
335 | }
336 | 
337 | [data-rank='8'] svg:nth-child(4) {
338 |   grid-row-start: 7;
339 |   grid-column-start: 3;
340 |   transform: rotate(180deg);
341 | }
342 | 
343 | [data-rank='8'] svg:nth-child(5) {
344 |   grid-row-start: 4;
345 |   grid-column-start: 1;
346 | }
347 | 
348 | [data-rank='8'] svg:nth-child(6) {
349 |   grid-row-start: 4;
350 |   grid-column-start: 3;
351 | }
352 | 
353 | [data-rank='8'] svg:nth-child(7) {
354 |   grid-row-start: 2;
355 |   grid-column-start: 2;
356 | }
357 | 
358 | [data-rank='8'] svg:nth-child(8) {
359 |   grid-row-start: 6;
360 |   grid-column-start: 2;
361 |   transform: rotate(180deg);
362 | }
363 | 
364 | [data-rank='9'] svg:first-child {
365 |   grid-row-start: 1;
366 |   grid-column-start: 1;
367 | }
368 | 
369 | [data-rank='9'] svg:nth-child(2) {
370 |   grid-row-start: 3;
371 |   grid-column-start: 1;
372 | }
373 | 
374 | [data-rank='9'] svg:nth-child(3) {
375 |   grid-row-start: 5;
376 |   grid-column-start: 1;
377 |   transform: rotate(180deg);
378 | }
379 | 
380 | [data-rank='9'] svg:nth-child(4) {
381 |   grid-row-start: 7;
382 |   grid-column-start: 1;
383 |   transform: rotate(180deg);
384 | }
385 | 
386 | [data-rank='9'] svg:nth-child(5) {
387 |   grid-row-start: 1;
388 |   grid-column-start: 3;
389 | }
390 | 
391 | [data-rank='9'] svg:nth-child(6) {
392 |   grid-row-start: 3;
393 |   grid-column-start: 3;
394 | }
395 | 
396 | [data-rank='9'] svg:nth-child(7) {
397 |   grid-row-start: 5;
398 |   grid-column-start: 3;
399 |   transform: rotate(180deg);
400 | }
401 | 
402 | [data-rank='9'] svg:nth-child(8) {
403 |   grid-row-start: 7;
404 |   grid-column-start: 3;
405 |   transform: rotate(180deg);
406 | }
407 | 
408 | [data-rank='9'] svg:nth-child(9) {
409 |   grid-row-start: 4;
410 |   grid-column-start: 2;
411 | }
412 | 
413 | [data-rank='10'] svg:first-child {
414 |   grid-row-start: 1;
415 |   grid-column-start: 1;
416 | }
417 | 
418 | [data-rank='10'] svg:nth-child(2) {
419 |   grid-row-start: 3;
420 |   grid-column-start: 1;
421 | }
422 | 
423 | [data-rank='10'] svg:nth-child(3) {
424 |   grid-row-start: 5;
425 |   grid-column-start: 1;
426 |   transform: rotate(180deg);
427 | }
428 | 
429 | [data-rank='10'] svg:nth-child(4) {
430 |   grid-row-start: 7;
431 |   grid-column-start: 1;
432 |   transform: rotate(180deg);
433 | }
434 | 
435 | [data-rank='10'] svg:nth-child(5) {
436 |   grid-row-start: 1;
437 |   grid-column-start: 3;
438 | }
439 | 
440 | [data-rank='10'] svg:nth-child(6) {
441 |   grid-row-start: 3;
442 |   grid-column-start: 3;
443 | }
444 | 
445 | [data-rank='10'] svg:nth-child(7) {
446 |   grid-row-start: 5;
447 |   grid-column-start: 3;
448 |   transform: rotate(180deg);
449 | }
450 | 
451 | [data-rank='10'] svg:nth-child(8) {
452 |   grid-row-start: 7;
453 |   grid-column-start: 3;
454 |   transform: rotate(180deg);
455 | }
456 | 
457 | [data-rank='10'] svg:nth-child(9) {
458 |   grid-row-start: 2;
459 |   grid-column-start: 2;
460 | }
461 | 
462 | [data-rank='10'] svg:nth-child(10) {
463 |   grid-row-start: 6;
464 |   grid-column-start: 2;
465 |   transform: rotate(180deg);
466 | }
467 | </style>
468 | 


--------------------------------------------------------------------------------
/src/components/SvgSprite.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <svg v-once style="display: none">
  3 |     <symbol id="suit-♣" viewBox="0 0 92 93" fill="none" xmlns="http://www.w3.org/2000/svg">
  4 |       <path d="M46 75.4124 60.6809 93H31.3191L46 75.4124Z" fill="currentColor" />
  5 |       <path
  6 |         d="M66.5594 36.8012c1.3917-3.0928 4.1235-8.4825 4.1235-12.0947C70.6829 11.0615 59.6319 0 46 0S21.3171 11.0615 21.3171 24.7065c0 3.6122 2.7318 9.0019 4.1235 12.0947C12.3659 37.4275 0 46.2779 0 59.5203c0 13.645 11.0511 24.7065 24.6829 24.7065 9.091 0 17.0339-6.8782 21.3171-14.2025 4.2832 7.3243 12.2261 14.2025 21.3171 14.2025C80.9489 84.2268 92 73.1653 92 59.5203c0-13.2424-12.3659-22.0928-25.4406-22.7191Z"
  7 |         fill="currentColor"
  8 |       />
  9 |     </symbol>
 10 |     <symbol id="suit-♦" viewBox="0 0 92 95" fill="none" xmlns="http://www.w3.org/2000/svg">
 11 |       <path d="m46 0 46 47.5L46 95 0 47.5 46 0Z" fill="currentColor" />
 12 |     </symbol>
 13 |     <symbol id="suit-♥" viewBox="0 0 103 90" fill="none" xmlns="http://www.w3.org/2000/svg">
 14 |       <path
 15 |         d="M51.5 90 7.8 46a26 26 0 0 1-7-12.2 28.3 28.3 0 0 1 0-13.9c1.2-4.6 3.6-8.6 7-12a27 27 0 0 1 38 0l5.7 5.6 5.8-5.6A26.8 26.8 0 0 1 102 33.8 25.8 25.8 0 0 1 95.2 46L51.5 90Z"
 16 |         fill="currentColor"
 17 |       />
 18 |     </symbol>
 19 |     <symbol id="suit-♠" viewBox="0 0 94 92" fill="none" xmlns="http://www.w3.org/2000/svg">
 20 |       <path
 21 |         d="M46.9951 0 86.872 40.0742c3.1809 3.1965 5.3015 6.9129 6.3617 11.149 1.0345 4.2361 1.0215 8.4462-.0387 12.6304-1.0603 4.2101-3.168 7.8745-6.3229 10.9931-3.2326 3.1966-6.9177 5.3146-11.0554 6.3542-4.1636 1.0655-8.3142 1.0655-12.4519 0-4.1635-1.0656-7.8616-3.1836-11.0942-6.3542l-5.2755-5.1457-5.2756 5.1457c-3.2584 3.1706-6.9565 5.2886-11.0941 6.3542-4.1377 1.0655-8.2754 1.0655-12.4131 0-4.1636-1.0396-7.8616-3.1576-11.09418-6.3542-3.15499-3.1186-5.26263-6.783-6.322906-10.9931-1.060285-4.1841-1.060285-8.3943-.000001-12.6304 1.034427-4.2361 3.142057-7.9524 6.322897-11.149L46.9951 0Z"
 22 |         fill="currentColor"
 23 |       />
 24 |       <path d="m47 74 15 18H32l15-18Z" fill="currentColor" />
 25 |     </symbol>
 26 |     <symbol id="chip" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51 51">
 27 |       <circle cx="26" cy="26" r="25" fill="var(--color-chip)" />
 28 |       <circle
 29 |         cx="26"
 30 |         cy="26"
 31 |         r="22"
 32 |         stroke="var(--color-white)"
 33 |         stroke-width="5"
 34 |         stroke-dasharray="9 14"
 35 |         fill="none"
 36 |       />
 37 |       <circle
 38 |         cx="26"
 39 |         cy="26"
 40 |         r="15"
 41 |         stroke="var(--color-white)"
 42 |         stroke-width="2"
 43 |         stroke-dasharray="4"
 44 |         fill="none"
 45 |       />
 46 |     </symbol>
 47 |     <symbol id="flourish" viewBox="0 0 972 975" fill="none" xmlns="http://www.w3.org/2000/svg">
 48 |       <path
 49 |         d="m881.75 487.491 43.984-43.695c3.508-3.486 7.587-5.809 12.237-6.971 4.649-1.134 9.27-1.119 13.862.042 4.621 1.162 8.643 3.472 12.066 6.929 3.508 3.542 5.833 7.58 6.974 12.114 1.169 4.562 1.169 9.11 0 13.644-1.17 4.562-3.494 8.614-6.974 12.156l-5.648 5.781 5.648 5.78c3.48 3.571 5.804 7.623 6.974 12.157 1.169 4.534 1.169 9.067 0 13.601-1.141 4.563-3.466 8.615-6.974 12.157-3.423 3.457-7.445 5.766-12.066 6.928-4.592 1.162-9.213 1.162-13.862 0-4.65-1.133-8.729-3.443-12.237-6.928l-43.984-43.695Z"
 50 |         fill="var(--color-white)"
 51 |       />
 52 |       <path
 53 |         d="m912.81 241.705-14.766 54.572c-1.178 4.353-3.336 8.047-6.475 11.084-3.151 3.014-6.804 5.108-10.957 6.281-4.177 1.187-8.404 1.194-12.682.021-4.385-1.201-8.062-3.333-11.031-6.397-3.004-3.073-5.08-6.668-6.226-10.784-1.159-4.138-1.173-8.4-.044-12.785l1.819-7.141-7.095-1.996c-4.375-1.237-8.058-3.38-11.049-6.431-2.992-3.05-5.061-6.634-6.207-10.75-1.182-4.125-1.196-8.387-.044-12.785 1.123-4.291 3.243-7.949 6.359-10.972 3.093-3.01 6.739-5.116 10.938-6.315 4.186-1.223 8.458-1.256 12.817-.099l54.643 14.497Z"
 54 |         fill="var(--color-black)"
 55 |       />
 56 |       <path d="m848.727 278.71-8.088 21.99-15-25.981 23.088 3.991Z" fill="var(--color-black)" />
 57 |       <path
 58 |         d="m727.459 69.833 16.087 64.136-63.587 18.136-16.087-64.1358 63.587-18.1362Z"
 59 |         fill="var(--color-white)"
 60 |       />
 61 |       <path d="M486 75.4124 500.681 93h-29.362L486 75.4124Z" fill="var(--color-black)" />
 62 |       <path
 63 |         d="M506.559 36.8012c1.392-3.0928 4.124-8.4825 4.124-12.0947C510.683 11.0615 499.632 0 486 0s-24.683 11.0615-24.683 24.7065c0 3.6122 2.732 9.0019 4.124 12.0947C452.366 37.4275 440 46.2779 440 59.5203c0 13.645 11.051 24.7065 24.683 24.7065 9.091 0 17.034-6.8782 21.317-14.2025 4.283 7.3243 12.226 14.2025 21.317 14.2025 13.632 0 24.683-11.0615 24.683-24.7065 0-13.2424-12.366-22.0928-25.441-22.7191Z"
 64 |         fill="var(--color-black)"
 65 |       />
 66 |       <path
 67 |         d="M90 487.495 46.0162 531.19c-3.5085 3.485-7.5874 5.809-12.2368 6.97-4.6494 1.134-9.2703 1.12-13.8626-.042-4.6209-1.162-8.6427-3.471-12.0656-6.928-3.50844-3.542-5.83314-7.58-6.97409-12.114-1.16948-4.562-1.16948-9.11 0-13.644 1.16948-4.563 3.49417-8.615 6.97409-12.157l5.6477-5.78-5.6477-5.781c-3.47992-3.57-5.80462-7.623-6.9741-12.156-1.16947-4.534-1.16948-9.068 0-13.602 1.14096-4.562 3.46565-8.614 6.97409-12.156 3.42291-3.457 7.44471-5.767 12.06561-6.929 4.5923-1.161 9.2132-1.161 13.8626 0 4.6494 1.134 8.7283 3.443 12.2368 6.929L90 487.495Z"
 68 |         fill="var(--color-white)"
 69 |       />
 70 |       <path
 71 |         d="m58.9396 733.28 14.7667-54.571c1.1779-4.353 3.3361-8.048 6.4745-11.084 3.1514-3.014 6.804-5.108 10.9577-6.282 4.1762-1.187 8.4034-1.194 12.6815-.021 4.385 1.201 8.062 3.334 11.031 6.397 3.004 3.073 5.08 6.668 6.226 10.784 1.159 4.139 1.173 8.4.044 12.785l-1.819 7.142 7.094 1.995c4.376 1.237 8.059 3.381 11.05 6.431 2.992 3.051 5.061 6.634 6.207 10.75 1.182 4.126 1.196 8.387.044 12.785-1.123 4.292-3.243 7.949-6.359 10.973-3.093 3.01-6.739 5.115-10.938 6.315-4.186 1.222-8.458 1.255-12.817.098L58.9396 733.28Z"
 72 |         fill="var(--color-black)"
 73 |       />
 74 |       <path d="m123.023 696.276 8.088-21.991 15 25.981-23.088-3.99Z" fill="var(--color-black)" />
 75 |       <path
 76 |         d="m244.291 905.152-16.087-64.136 63.587-18.136 16.087 64.136-63.587 18.136Z"
 77 |         fill="var(--color-white)"
 78 |       />
 79 |       <path
 80 |         d="m918.125 733.28-14.766-54.571c-1.178-4.353-3.336-8.048-6.475-11.084-3.151-3.014-6.804-5.108-10.957-6.282-4.177-1.187-8.404-1.194-12.682-.021-4.385 1.201-8.062 3.334-11.031 6.397-3.004 3.073-5.08 6.668-6.226 10.784-1.159 4.139-1.173 8.4-.044 12.785l1.819 7.142-7.094 1.995c-4.375 1.237-8.059 3.381-11.05 6.431-2.992 3.051-5.061 6.634-6.207 10.75-1.181 4.126-1.196 8.387-.044 12.785 1.123 4.292 3.243 7.949 6.359 10.973 3.093 3.01 6.739 5.115 10.938 6.315 4.186 1.222 8.458 1.255 12.817.098l54.643-14.497Z"
 81 |         fill="var(--color-black)"
 82 |       />
 83 |       <path d="m854.042 696.276-8.088-21.991-15 25.981 23.088-3.99Z" fill="var(--color-black)" />
 84 |       <path
 85 |         d="m732.774 905.152 16.087-64.136-63.587-18.136-16.087 64.136 63.587 18.136Z"
 86 |         fill="var(--color-white)"
 87 |       />
 88 |       <path
 89 |         d="m58.9396 233.445 14.7667 54.572c1.1779 4.353 3.3361 8.047 6.4745 11.083 3.1514 3.014 6.804 5.108 10.9577 6.282 4.1762 1.187 8.4034 1.194 12.6815.021 4.385-1.201 8.062-3.334 11.031-6.397 3.004-3.073 5.08-6.668 6.226-10.784 1.159-4.138 1.173-8.4.044-12.785l-1.819-7.141 7.094-1.996c4.376-1.237 8.059-3.381 11.05-6.431 2.992-3.051 5.061-6.634 6.207-10.75 1.182-4.126 1.196-8.387.044-12.785-1.123-4.292-3.243-7.949-6.359-10.972-3.093-3.011-6.739-5.116-10.938-6.316-4.186-1.222-8.458-1.255-12.817-.098l-54.6434 14.497Z"
 90 |         fill="var(--color-black)"
 91 |       />
 92 |       <path d="m123.023 270.449 8.088 21.991 15-25.981-23.088 3.99Z" fill="var(--color-black)" />
 93 |       <path
 94 |         d="m244.291 61.5727-16.087 64.1363 63.587 18.136 16.087-64.136-63.587-18.1363Z"
 95 |         fill="var(--color-white)"
 96 |       />
 97 |       <path d="m485.75 899.573-14.681-17.588h29.362l-14.681 17.588Z" fill="var(--color-black)" />
 98 |       <path
 99 |         d="M465.191 938.184c-1.392 3.093-4.124 8.483-4.124 12.095 0 13.645 11.051 24.706 24.683 24.706s24.683-11.061 24.683-24.706c0-3.612-2.732-9.002-4.124-12.095 13.075-.626 25.441-9.477 25.441-22.719 0-13.645-11.051-24.706-24.683-24.706-9.091 0-17.034 6.878-21.317 14.202-4.283-7.324-12.226-14.202-21.317-14.202-13.632 0-24.683 11.061-24.683 24.706 0 13.243 12.366 22.093 25.441 22.719Z"
100 |         fill="var(--color-black)"
101 |       />
102 |       <path
103 |         d="m767.083 562.82 39.391-22.384c3.142-1.786 6.469-2.646 9.982-2.581 3.507.086 6.777.973 9.811 2.661 3.054 1.695 5.468 4.082 7.241 7.164 1.818 3.157 2.703 6.438 2.657 9.843-.031 3.431-.888 6.63-2.571 9.597-1.689 2.987-4.099 5.396-7.231 7.226l-5.09 2.994 2.911 5.138c1.792 3.172 2.675 6.463 2.649 9.874-.026 3.411-.881 6.599-2.564 9.566-1.668 2.993-4.078 5.401-7.231 7.227-3.076 1.782-6.36 2.643-9.852 2.583-3.472-.055-6.745-.932-9.819-2.632-3.08-1.679-5.534-4.078-7.363-7.195l-22.921-39.081Z"
104 |         fill="var(--color-white)"
105 |       />
106 |       <path
107 |         d="m835.938 394.127-20.876 35.955c-1.666 2.867-3.902 5.081-6.709 6.641-2.812 1.541-5.806 2.333-8.98 2.376-3.192.048-6.196-.751-9.012-2.399-2.886-1.688-5.092-3.902-6.618-6.644-1.549-2.754-2.339-5.703-2.37-8.845-.036-3.16.765-6.19 2.402-9.09l2.651-4.727-4.659-2.768c-2.873-1.711-5.081-3.935-6.626-6.671-1.544-2.737-2.332-5.676-2.362-8.818-.054-3.156.746-6.186 2.402-9.09 1.615-2.835 3.816-5.03 6.605-6.584 2.771-1.55 5.761-2.351 8.972-2.404 3.206-.072 6.247.718 9.123 2.369l36.057 20.699Z"
108 |         fill="var(--color-black)"
109 |       />
110 |       <path d="m783.373 408.216-9.931 14.081-5.71-21.31 15.641 7.229Z" fill="var(--color-black)" />
111 |       <path
112 |         d="m736.988 236.758-.78 48.621-48.622.78.78-48.621 48.622-.78Z"
113 |         fill="var(--color-white)"
114 |       />
115 |       <path d="m564.515 194.477 7.153 15.23-20.962-5.617 13.809-9.613Z" fill="var(--color-black)" />
116 |       <path
117 |         d="M586.501 171.14c1.578-1.918 4.549-5.202 5.232-7.753 2.583-9.637-3.214-19.563-12.946-22.171-9.733-2.608-19.716 3.09-22.298 12.727-.684 2.552.247 6.881.655 9.331-9.453-2.059-19.957 1.827-22.463 11.179-2.582 9.637 3.215 19.564 12.947 22.172 6.49 1.739 13.463-1.6 17.907-5.953 1.672 5.992 6.041 12.369 12.531 14.109 9.733 2.607 19.716-3.091 22.298-12.728 2.506-9.353-4.647-17.969-13.863-20.913Z"
118 |         fill="var(--color-black)"
119 |       />
120 |       <path
121 |         d="m204.917 412.18-39.391 22.384c-3.142 1.786-6.469 2.646-9.982 2.581-3.507-.086-6.777-.973-9.811-2.661-3.054-1.695-5.468-4.082-7.241-7.164-1.818-3.157-2.703-6.438-2.657-9.843.031-3.431.888-6.63 2.571-9.597 1.689-2.987 4.099-5.396 7.231-7.226l5.09-2.994-2.911-5.138c-1.792-3.172-2.675-6.463-2.649-9.874.026-3.411.881-6.599 2.564-9.566 1.668-2.993 4.078-5.401 7.231-7.227 3.076-1.782 6.36-2.643 9.852-2.583 3.472.055 6.745.932 9.819 2.632 3.08 1.679 5.534 4.078 7.363 7.195l22.921 39.081Z"
122 |         fill="var(--color-white)"
123 |       />
124 |       <path
125 |         d="m135.824 580.794 20.877-35.955c1.665-2.868 3.901-5.081 6.708-6.641 2.813-1.541 5.806-2.333 8.98-2.376 3.192-.048 6.197.751 9.012 2.399 2.886 1.688 5.092 3.902 6.618 6.644 1.55 2.754 2.34 5.703 2.37 8.845.036 3.16-.765 6.19-2.402 9.09l-2.651 4.727 4.66 2.768c2.872 1.711 5.08 3.935 6.625 6.671 1.544 2.737 2.332 5.676 2.363 8.818.054 3.155-.747 6.185-2.402 9.09-1.615 2.835-3.817 5.03-6.606 6.584-2.77 1.55-5.761 2.351-8.972 2.404-3.206.072-6.247-.718-9.123-2.369l-36.057-20.699Z"
126 |         fill="var(--color-black)"
127 |       />
128 |       <path d="m188.389 566.705 9.931-14.081 5.71 21.31-15.641-7.229Z" fill="var(--color-black)" />
129 |       <path
130 |         d="m234.775 738.163.78-48.621 48.621-.78-.78 48.621-48.621.78Z"
131 |         fill="var(--color-white)"
132 |       />
133 |       <path
134 |         d="m746.149 744.33-.103-41.576c-.008-3.316-.838-6.351-2.489-9.106-1.665-2.74-3.861-4.923-6.589-6.547-2.74-1.638-5.742-2.448-9.004-2.429-3.343.019-6.361.834-9.053 2.445-2.72 1.611-4.878 3.769-6.476 6.475-1.611 2.719-2.432 5.744-2.464 9.073l-.068 5.419-5.419.068c-3.343.046-6.368.867-9.074 2.465-2.705 1.597-4.857 3.749-6.454 6.455-1.625 2.706-2.447 5.73-2.465 9.073-.019 3.263.79 6.264 2.428 9.005 1.625 2.727 3.814 4.916 6.568 6.568 2.741 1.665 5.769 2.501 9.086 2.509l41.576.103Z"
135 |         fill="var(--color-black)"
136 |       />
137 |       <path d="m707.67 705.846-1.56-17.16-15.6 15.6 17.16 1.56Z" fill="var(--color-black)" />
138 |       <path
139 |         d="m581.77 831.14 23.635-42.497-41.717-24.986-23.635 42.497 41.717 24.986Z"
140 |         fill="var(--color-white)"
141 |       />
142 |       <path
143 |         d="m230.962 225.735.102 41.576c.008 3.316.838 6.351 2.49 9.105 1.665 2.741 3.861 4.924 6.588 6.548 2.741 1.638 5.742 2.448 9.004 2.429 3.344-.019 6.361-.834 9.054-2.445 2.719-1.611 4.877-3.769 6.475-6.475 1.611-2.719 2.432-5.744 2.465-9.073l.067-5.42 5.419-.067c3.344-.046 6.368-.867 9.074-2.465 2.705-1.597 4.857-3.749 6.455-6.455 1.624-2.706 2.446-5.73 2.465-9.073.018-3.263-.791-6.264-2.429-9.005-1.624-2.727-3.814-4.916-6.568-6.568-2.741-1.665-5.769-2.501-9.086-2.509l-41.575-.103Z"
144 |         fill="var(--color-black)"
145 |       />
146 |       <path d="m269.44 264.219 1.56 17.16 15.601-15.6-17.161-1.56Z" fill="var(--color-black)" />
147 |       <path
148 |         d="m395.34 138.925-23.635 42.497 41.717 24.986 23.635-42.497-41.717-24.986Z"
149 |         fill="var(--color-white)"
150 |       />
151 |       <path d="m407.485 780.523-7.153-15.23 20.962 5.617-13.809 9.613Z" fill="var(--color-black)" />
152 |       <path
153 |         d="M385.499 803.86c-1.578 1.918-4.549 5.202-5.232 7.753-2.583 9.637 3.214 19.563 12.946 22.171 9.733 2.608 19.716-3.09 22.298-12.727.684-2.552-.247-6.881-.655-9.331 9.453 2.059 19.957-1.827 22.463-11.179 2.582-9.637-3.215-19.564-12.947-22.172-6.49-1.739-13.463 1.6-17.907 5.953-1.672-5.992-6.041-12.369-12.531-14.109-9.733-2.607-19.716 3.091-22.298 12.728-2.506 9.353 4.647 17.969 13.863 20.913Z"
154 |         fill="var(--color-black)"
155 |       />
156 |       <path
157 |         d="m709 487.003 24.435-24.605c1.95-1.963 4.216-3.271 6.799-3.925 2.583-.638 5.15-.63 7.701.024 2.567.654 4.802 1.954 6.703 3.901 1.949 1.995 3.241 4.268 3.875 6.821.649 2.569.649 5.131 0 7.684-.65 2.569-1.941 4.85-3.875 6.845l-3.137 3.255 3.137 3.255c1.934 2.011 3.225 4.292 3.875 6.845.649 2.554.649 5.107 0 7.66-.634 2.569-1.926 4.85-3.875 6.845-1.901 1.947-4.136 3.247-6.703 3.901-2.551.655-5.118.655-7.701 0-2.583-.638-4.849-1.938-6.799-3.901L709 487.003Z"
158 |         fill="var(--color-white)"
159 |       />
160 |       <path
161 |         d="m726.282 349.089-8.315 30.73c-.663 2.451-1.878 4.531-3.645 6.241-1.775 1.697-3.832 2.876-6.171 3.537-2.351.669-4.732.672-7.141.012-2.469-.676-4.539-1.877-6.211-3.602-1.692-1.731-2.861-3.755-3.506-6.073-.653-2.33-.661-4.73-.025-7.199l1.024-4.021-3.995-1.124c-2.463-.696-4.537-1.903-6.222-3.621-1.684-1.718-2.849-3.736-3.495-6.054-.665-2.323-.673-4.722-.025-7.199.633-2.416 1.827-4.476 3.581-6.178 1.742-1.695 3.795-2.881 6.159-3.556 2.357-.689 4.763-.707 7.218-.056l30.769 8.163Z"
162 |         fill="var(--color-black)"
163 |       />
164 |       <path
165 |         d="m690.197 369.927-4.555 12.382-8.446-14.629 13.001 2.247Z"
166 |         fill="var(--color-black)"
167 |       />
168 |       <path
169 |         d="m621.911 252.308 9.059 36.115-35.806 10.213-9.059-36.115 35.806-10.213Z"
170 |         fill="var(--color-white)"
171 |       />
172 |       <path d="m486 255.166 8.298 9.834h-16.596l8.298-9.834Z" fill="var(--color-black)" />
173 |       <path
174 |         d="M497.621 233.577c.786-1.729 2.33-4.743 2.33-6.763 0-7.629-6.246-13.814-13.951-13.814s-13.951 6.185-13.951 13.814c0 2.02 1.544 5.034 2.33 6.763-7.39.35-14.379 5.299-14.379 12.703 0 7.63 6.246 13.815 13.951 13.815 5.139 0 9.628-3.846 12.049-7.942 2.421 4.096 6.91 7.942 12.049 7.942 7.705 0 13.951-6.185 13.951-13.815 0-7.404-6.989-12.353-14.379-12.703Z"
175 |         fill="var(--color-black)"
176 |       />
177 |       <path
178 |         d="m263 486.997-24.924 24.605c-1.988 1.963-4.3 3.271-6.934 3.925-2.635.638-5.253.63-7.856-.024-2.618-.654-4.897-1.954-6.837-3.901-1.988-1.995-3.305-4.268-3.952-6.821-.663-2.569-.663-5.131 0-7.684.663-2.569 1.98-4.85 3.952-6.845l3.2-3.255-3.2-3.255c-1.972-2.011-3.289-4.292-3.952-6.845-.663-2.554-.663-5.107 0-7.66.647-2.569 1.964-4.85 3.952-6.845 1.94-1.947 4.219-3.247 6.837-3.901 2.603-.655 5.221-.655 7.856 0 2.634.638 4.946 1.938 6.934 3.901L263 486.997Z"
179 |         fill="var(--color-white)"
180 |       />
181 |       <path
182 |         d="m245.467 625.896 8.316-30.729c.663-2.452 1.878-4.532 3.645-6.242 1.775-1.697 3.832-2.876 6.171-3.537 2.351-.668 4.732-.672 7.141-.012 2.469.677 4.539 1.878 6.211 3.603 1.692 1.73 2.861 3.754 3.506 6.072.653 2.33.661 4.73.025 7.199l-1.024 4.022 3.995 1.123c2.463.697 4.537 1.904 6.222 3.622 1.684 1.717 2.849 3.735 3.495 6.053.665 2.323.673 4.723.025 7.199-.633 2.417-1.827 4.476-3.581 6.179-1.742 1.695-3.795 2.88-6.159 3.556-2.357.688-4.763.707-7.218.055l-30.77-8.163Z"
183 |         fill="var(--color-black)"
184 |       />
185 |       <path d="m281.553 605.059 4.555-12.383 8.446 14.63-13.001-2.247Z" fill="var(--color-black)" />
186 |       <path
187 |         d="m349.839 722.677-9.059-36.115 35.806-10.213 9.059 36.116-35.806 10.212Z"
188 |         fill="var(--color-white)"
189 |       />
190 |       <path
191 |         d="m729.275 625.896-8.315-30.729c-.663-2.452-1.878-4.532-3.646-6.242-1.774-1.697-3.831-2.876-6.17-3.537-2.351-.668-4.732-.672-7.141-.012-2.469.677-4.539 1.878-6.211 3.603-1.692 1.73-2.861 3.754-3.506 6.072-.653 2.33-.661 4.73-.025 7.199l1.024 4.022-3.995 1.123c-2.463.697-4.537 1.904-6.222 3.622-1.684 1.717-2.849 3.735-3.495 6.053-.665 2.323-.673 4.723-.025 7.199.633 2.417 1.826 4.476 3.581 6.179 1.742 1.695 3.795 2.88 6.159 3.556 2.357.688 4.763.707 7.218.055l30.769-8.163Z"
192 |         fill="var(--color-black)"
193 |       />
194 |       <path d="m693.19 605.059-4.555-12.383-8.446 14.63 13.001-2.247Z" fill="var(--color-black)" />
195 |       <path
196 |         d="m624.904 722.677 9.059-36.115-35.806-10.213-9.059 36.116 35.806 10.212Z"
197 |         fill="var(--color-white)"
198 |       />
199 |       <path
200 |         d="m245.467 344.438 8.316 30.729c.663 2.452 1.878 4.532 3.645 6.242 1.775 1.697 3.832 2.876 6.171 3.537 2.351.668 4.732.672 7.141.012 2.469-.677 4.539-1.878 6.211-3.603 1.692-1.73 2.861-3.754 3.506-6.072.653-2.33.661-4.73.025-7.199l-1.024-4.022 3.995-1.123c2.463-.697 4.537-1.904 6.222-3.622 1.684-1.717 2.849-3.735 3.495-6.053.665-2.323.673-4.723.025-7.199-.633-2.417-1.827-4.476-3.581-6.179-1.742-1.695-3.795-2.88-6.159-3.556-2.357-.688-4.763-.707-7.218-.055l-30.77 8.163Z"
201 |         fill="var(--color-black)"
202 |       />
203 |       <path d="m281.553 365.275 4.555 12.383 8.446-14.63-13.001 2.247Z" fill="var(--color-black)" />
204 |       <path
205 |         d="m349.839 247.657-9.059 36.115 35.806 10.213 9.059-36.116-35.806-10.212Z"
206 |         fill="var(--color-white)"
207 |       />
208 |       <path d="M486 719.834 477.702 710h16.596L486 719.834Z" fill="var(--color-black)" />
209 |       <path
210 |         d="M474.379 741.423c-.786 1.729-2.33 4.743-2.33 6.763 0 7.629 6.246 13.814 13.951 13.814s13.951-6.185 13.951-13.814c0-2.02-1.544-5.034-2.33-6.763 7.39-.35 14.379-5.299 14.379-12.703 0-7.63-6.246-13.815-13.951-13.815-5.139 0-9.628 3.846-12.049 7.942-2.421-4.096-6.91-7.942-12.049-7.942-7.705 0-13.951 6.185-13.951 13.815 0 7.404 6.989 12.353 14.379 12.703Z"
211 |         fill="var(--color-black)"
212 |       />
213 |       <path
214 |         d="m644.224 529.91 22.18-12.605c1.77-1.005 3.643-1.49 5.621-1.453 1.975.048 3.816.548 5.525 1.499 1.72.954 3.079 2.298 4.077 4.033 1.024 1.778 1.523 3.626 1.497 5.543-.018 1.932-.501 3.733-1.448 5.404-.951 1.682-2.308 3.038-4.072 4.069l-2.866 1.686 1.639 2.893c1.009 1.786 1.506 3.639 1.492 5.56-.015 1.921-.496 3.716-1.444 5.387-.939 1.685-2.296 3.041-4.072 4.069-1.732 1.004-3.581 1.488-5.548 1.455-1.955-.031-3.798-.525-5.529-1.482-1.734-.946-3.116-2.296-4.146-4.052l-12.906-22.006Z"
215 |         fill="var(--color-white)"
216 |       />
217 |       <path
218 |         d="m682.996 434.919-11.756 20.246c-.938 1.614-2.197 2.861-3.778 3.739-1.583.868-3.269 1.314-5.056 1.338-1.798.027-3.489-.423-5.075-1.351-1.625-.95-2.867-2.197-3.726-3.741-.873-1.551-1.318-3.211-1.335-4.98-.02-1.78.431-3.486 1.353-5.119l1.492-2.662-2.623-1.559c-1.618-.963-2.861-2.215-3.731-3.756-.87-1.541-1.313-3.196-1.33-4.965-.031-1.777.42-3.483 1.352-5.119.909-1.596 2.149-2.832 3.72-3.708 1.56-.872 3.244-1.323 5.052-1.353 1.805-.04 3.518.404 5.137 1.334l20.304 11.656Z"
219 |         fill="var(--color-black)"
220 |       />
221 |       <path d="m653.396 442.852-5.592 7.929-3.215-12 8.807 4.071Z" fill="var(--color-black)" />
222 |       <path
223 |         d="m627.277 346.304-.44 27.378-27.378.44.439-27.379 27.379-.439Z"
224 |         fill="var(--color-white)"
225 |       />
226 |       <path d="m530.157 322.496 4.028 8.576-11.804-3.163 7.776-5.413Z" fill="var(--color-black)" />
227 |       <path
228 |         d="M542.537 309.355c.889-1.081 2.562-2.93 2.947-4.366 1.454-5.427-1.81-11.017-7.29-12.485-5.481-1.468-11.102 1.74-12.556 7.167-.385 1.436.139 3.874.369 5.254-5.323-1.159-11.238 1.029-12.649 6.295-1.454 5.427 1.81 11.016 7.29 12.485 3.655.979 7.581-.901 10.084-3.352.941 3.374 3.401 6.965 7.056 7.944 5.48 1.469 11.102-1.74 12.556-7.167 1.411-5.266-2.617-10.118-7.807-11.775Z"
229 |         fill="var(--color-black)"
230 |       />
231 |       <path
232 |         d="m327.667 445.084-22.181 12.604c-1.769 1.006-3.642 1.49-5.62 1.453-1.975-.048-3.817-.547-5.525-1.498-1.72-.954-3.079-2.298-4.077-4.033-1.024-1.778-1.523-3.626-1.497-5.544.018-1.931.501-3.733 1.448-5.403.951-1.682 2.308-3.039 4.072-4.07l2.866-1.685-1.639-2.893c-1.009-1.786-1.506-3.64-1.492-5.56.015-1.921.496-3.717 1.444-5.387.939-1.685 2.296-3.042 4.072-4.07 1.732-1.003 3.581-1.488 5.547-1.454 1.955.031 3.799.525 5.53 1.482 1.734.945 3.116 2.296 4.145 4.051l12.907 22.007Z"
233 |         fill="var(--color-white)"
234 |       />
235 |       <path
236 |         d="m288.761 540.031 11.756-20.246c.937-1.615 2.197-2.862 3.777-3.74 1.584-.868 3.269-1.314 5.057-1.338 1.797-.027 3.489.423 5.075 1.351 1.625.95 2.867 2.197 3.726 3.741.873 1.551 1.318 3.211 1.335 4.981.02 1.779-.431 3.485-1.353 5.118l-1.493 2.662 2.624 1.559c1.618.963 2.861 2.216 3.731 3.756.87 1.541 1.313 3.196 1.33 4.966.031 1.776-.42 3.483-1.352 5.118-.91 1.597-2.149 2.832-3.72 3.708-1.56.872-3.244 1.324-5.052 1.353-1.805.041-3.518-.404-5.137-1.334l-20.304-11.655Z"
237 |         fill="var(--color-black)"
238 |       />
239 |       <path d="m318.361 532.097 5.592-7.929 3.215 12-8.807-4.071Z" fill="var(--color-black)" />
240 |       <path
241 |         d="m344.48 628.646.44-27.379 27.378-.439-.439 27.378-27.379.44Z"
242 |         fill="var(--color-white)"
243 |       />
244 |       <path
245 |         d="m632.435 632.118-.058-23.411c-.004-1.868-.471-3.577-1.401-5.128-.938-1.543-2.175-2.772-3.71-3.687-1.543-.922-3.234-1.378-5.071-1.368-1.882.011-3.582.47-5.098 1.377-1.531.907-2.746 2.123-3.646 3.646-.907 1.531-1.369 3.234-1.388 5.109l-.038 3.052-3.051.038c-1.883.026-3.586.488-5.109 1.388-1.524.9-2.736 2.111-3.635 3.635-.915 1.523-1.378 3.226-1.388 5.109-.011 1.837.445 3.527 1.367 5.07.915 1.536 2.148 2.769 3.699 3.699 1.543.937 3.248 1.408 5.116 1.413l23.411.058Z"
246 |         fill="var(--color-black)"
247 |       />
248 |       <path d="m610.768 610.448-.879-9.663-8.784 8.784 9.663.879Z" fill="var(--color-black)" />
249 |       <path
250 |         d="m539.873 681.001 13.309-23.93-23.491-14.07-13.309 23.93 23.491 14.07Z"
251 |         fill="var(--color-white)"
252 |       />
253 |       <path
254 |         d="m342.333 340.097.058 23.411c.005 1.868.472 3.577 1.402 5.128.937 1.543 2.174 2.772 3.71 3.687 1.543.922 3.233 1.378 5.07 1.367 1.883-.01 3.582-.469 5.098-1.376 1.531-.907 2.747-2.123 3.646-3.646.907-1.532 1.37-3.235 1.388-5.11l.038-3.051 3.052-.038c1.882-.026 3.585-.489 5.109-1.388 1.523-.9 2.735-2.111 3.635-3.635.914-1.523 1.377-3.227 1.388-5.109.01-1.837-.446-3.527-1.368-5.071-.915-1.535-2.147-2.768-3.698-3.698-1.544-.938-3.249-1.409-5.116-1.413l-23.412-.058Z"
255 |         fill="var(--color-black)"
256 |       />
257 |       <path d="m364.001 361.767.878 9.663 8.785-8.784-9.663-.879Z" fill="var(--color-black)" />
258 |       <path
259 |         d="m434.895 291.214-13.309 23.93 23.491 14.07 13.309-23.93-23.491-14.07Z"
260 |         fill="var(--color-white)"
261 |       />
262 |       <path d="m441.733 652.498-4.028-8.576 11.805 3.163-7.777 5.413Z" fill="var(--color-black)" />
263 |       <path
264 |         d="M429.353 665.639c-.889 1.08-2.561 2.929-2.946 4.366-1.454 5.427 1.81 11.016 7.29 12.485 5.48 1.468 11.102-1.741 12.556-7.167.385-1.437-.139-3.875-.369-5.255 5.323 1.16 11.238-1.028 12.649-6.294 1.454-5.427-1.81-11.017-7.29-12.485-3.655-.979-7.581.9-10.084 3.352-.941-3.374-3.402-6.965-7.056-7.945-5.481-1.468-11.102 1.741-12.556 7.167-1.411 5.267 2.617 10.119 7.806 11.776Z"
265 |         fill="var(--color-black)"
266 |       />
267 |     </symbol>
268 |     <symbol id="result-lose" viewBox="0 0 508 234" fill="none" xmlns="http://www.w3.org/2000/svg">
269 |       <path
270 |         d="M506 4V2H36A34 34 0 0 0 2 36v162a34 34 0 0 0 34 34h436a34 34 0 0 0 34-34V4Z"
271 |         fill="var(--color-red)"
272 |         stroke="var(--color-white)"
273 |         stroke-width="4"
274 |       />
275 |       <path
276 |         d="M147.5 189V45h12v133.2h28.7V189h-40.7Zm73.7 1.3c-8.3 0-14.3-1.8-18-5.4-3.6-3.7-5.5-9.7-5.7-18a3952.8 3952.8 0 0 1-.5-49.9 3366.1 3366.1 0 0 1 .5-49.9c.2-8.3 2.1-14.3 5.7-17.9 3.7-3.6 9.7-5.5 18-5.5 8.4 0 14.4 1.9 18 5.5 3.7 3.6 5.6 9.6 5.7 18a1869.2 1869.2 0 0 1 .5 49.9 1695.6 1695.6 0 0 1-.5 49.8c-.1 8.3-2 14.3-5.7 18-3.6 3.6-9.6 5.4-18 5.4Zm0-10.3c4.2 0 7.2-.8 9-2.5 1.8-1.8 2.7-4.7 2.8-8.8.2-8.9.4-17.6.4-26.2a1873 1873 0 0 0-.4-77.2c0-4.1-1-7-2.9-8.8-1.8-1.7-4.8-2.6-8.9-2.6-4 0-7 .9-8.8 2.6-1.8 1.8-2.8 4.7-2.9 8.8a1809.7 1809.7 0 0 0 0 103.4c.1 4.1 1 7 2.9 8.8 1.8 1.7 4.7 2.5 8.8 2.5Zm63.3 10.3c-8.2 0-14.2-1.9-17.9-5.5-3.6-3.8-5.6-9.8-6-18.3a635.1 635.1 0 0 1 .4-29.6h11.4a354.8 354.8 0 0 0 0 31.4c.2 4 1.2 7 3 9 2 1.8 5 2.7 9 2.7s6.9-1 8.6-2.8c1.7-1.8 2.7-4.8 3-8.9a295.7 295.7 0 0 0 .3-17.2l-.3-9.9c-.2-4.4-.8-8.1-2-11.1-1-3.1-3.3-5-6.8-6l-9.3-2.4a23.8 23.8 0 0 1-10.6-5.2 18.7 18.7 0 0 1-5.2-9.1c-.9-3.8-1.4-8.5-1.6-14a835.3 835.3 0 0 1 .1-26.2c.2-5.5 1-10 2.6-13.5 1.6-3.4 4-6 7.5-7.5a33 33 0 0 1 13.7-2.5c8 0 13.7 1.9 17.2 5.5 3.6 3.7 5.5 9.8 5.8 18.2a460.4 460.4 0 0 1-.2 27.5h-11.5a401.2 401.2 0 0 0 0-29.3c0-4-1-7-2.9-8.9-1.8-1.9-4.6-2.8-8.5-2.8-4.1 0-7 1-8.8 2.8-1.7 1.9-2.7 4.8-3 9a263.7 263.7 0 0 0 0 27.7c.2 5.4.8 9.4 2 12 1.1 2.8 3.5 4.5 7 5.4l8.9 2.2c4.7 1 8.3 2.8 10.8 5.2a19 19 0 0 1 5.2 9.3 62 62 0 0 1 1.6 13.7 300.6 300.6 0 0 1 0 25.3c-.4 8.5-2.3 14.6-6 18.3-3.5 3.6-9.4 5.5-17.5 5.5Zm40.1-1.3V45H365v10.8h-28.7v55.4h27v10.7h-27v56.3H365V189h-40.5Z"
277 |         fill="var(--color-white)"
278 |       />
279 |     </symbol>
280 |     <symbol id="result-win" viewBox="0 0 508 234" fill="none" xmlns="http://www.w3.org/2000/svg">
281 |       <path
282 |         d="M506 4V2H36A34 34 0 0 0 2 36v162a34 34 0 0 0 34 34h436a34 34 0 0 0 34-34V4Z"
283 |         fill="var(--color-gold)"
284 |         stroke="var(--color-white)"
285 |         stroke-width="4"
286 |       />
287 |       <path
288 |         d="M171.8 192 162 48h12l3.2 54.2 3.9 79h4l3.7-79 4.9-53.3h20.6l5 53.3 3.4 79h4l4-79 3.4-54.2H246l-10 144h-21.7l-4-47.3-4.1-85.3h-4.5l-4.1 85.3-4.1 47.3h-21.7Zm89.5 0V48h11.9v144h-11.9Zm31 0V48h20.3l8 45.6 12.2 87.6h4l-2-82.3L334 48h11.7v144h-21l-9-51.7-10.3-81.5H301l2 79.3.7 53.9h-11.5Z"
289 |         fill="var(--color-black)"
290 |       />
291 |       <path
292 |         class="dollar-signs"
293 |         d="M50.4 208.6v-15.7c-6.2-.8-10.7-3-13.5-6.7a30.6 30.6 0 0 1-4.7-16.7 635.1 635.1 0 0 1 .3-29.6h11.4a354.8 354.8 0 0 0 0 31.4c.2 4 1.2 7 3 9 2 1.8 5 2.7 9 2.7s6.9-1 8.6-2.8c1.7-1.8 2.7-4.8 3-8.9a295.7 295.7 0 0 0 .3-17.2l-.3-9.9a32 32 0 0 0-2-11.1c-1-3.1-3.3-5-6.8-6l-9.3-2.4a23.8 23.8 0 0 1-10.6-5.2 18.7 18.7 0 0 1-5.2-9.1c-.9-3.8-1.4-8.5-1.6-14a835.3 835.3 0 0 1 .1-26.2c.2-7.4 1.7-13 4.4-16.6 2.8-3.7 7.5-5.8 13.9-6.5v-17H61v17c6.1.7 10.6 2.8 13.3 6.6A30 30 0 0 1 79 70.4a460.4 460.4 0 0 1-.2 27.5H67.2a401.2 401.2 0 0 0 .1-29.3c-.1-4-1.1-7-3-8.9-1.8-1.9-4.6-2.8-8.5-2.8-4.1 0-7 1-8.8 2.8-1.7 1.9-2.7 4.8-3 9a263.7 263.7 0 0 0 0 27.7c.2 5.4.8 9.4 2 12 1.1 2.8 3.5 4.5 7 5.4l9 2.2c4.7 1 8.3 2.8 10.8 5.2a19 19 0 0 1 5.2 9.3 62 62 0 0 1 1.6 13.7 300.6 300.6 0 0 1 0 25.3 29.3 29.3 0 0 1-4.8 16.8c-2.8 3.8-7.4 6-13.7 6.7v15.6H50.4Zm337 0v-15.7c-6.2-.8-10.7-3-13.5-6.7a30.6 30.6 0 0 1-4.7-16.7 635.1 635.1 0 0 1 .3-29.6h11.4a354.8 354.8 0 0 0 0 31.4c.2 4 1.2 7 3 9 2 1.8 5 2.7 9 2.7s6.9-1 8.6-2.8c1.8-1.8 2.7-4.8 3-8.9a295.7 295.7 0 0 0 .3-17.2l-.3-9.9a32 32 0 0 0-2-11.1c-1-3.1-3.3-5-6.8-6l-9.3-2.4a23.8 23.8 0 0 1-10.6-5.2 18.7 18.7 0 0 1-5.2-9.1c-.9-3.8-1.4-8.5-1.6-14a835.3 835.3 0 0 1 .1-26.2c.2-7.4 1.7-13 4.4-16.6 2.8-3.7 7.5-5.8 13.9-6.5v-17H398v17c6.1.7 10.6 2.8 13.3 6.6a30 30 0 0 1 4.6 16.7 460.4 460.4 0 0 1-.2 27.5h-11.5a401.2 401.2 0 0 0 .1-29.3c-.1-4-1.1-7-3-8.9-1.8-1.9-4.6-2.8-8.5-2.8-4.1 0-7 1-8.8 2.8-1.7 1.9-2.7 4.8-3 9a263.7 263.7 0 0 0 0 27.7c.2 5.4.8 9.4 2 12 1.1 2.8 3.5 4.5 7 5.4l8.9 2.2c4.7 1 8.3 2.8 10.8 5.2a19 19 0 0 1 5.2 9.3 62 62 0 0 1 1.6 13.7 300.6 300.6 0 0 1 0 25.3 29.3 29.3 0 0 1-4.8 16.8c-2.8 3.8-7.4 6-13.7 6.7v15.6h-10.6Zm-277 0v-15.7c-6.2-.8-10.7-3-13.5-6.7a30.6 30.6 0 0 1-4.7-16.7 635.1 635.1 0 0 1 .3-29.6h11.4a354.8 354.8 0 0 0 0 31.4c.2 4 1.2 7 3 9 2 1.8 5 2.7 9 2.7s6.9-1 8.6-2.8c1.8-1.8 2.7-4.8 3-8.9a295.7 295.7 0 0 0 .3-17.2l-.3-9.9a32 32 0 0 0-2-11.1c-1-3.1-3.3-5-6.8-6l-9.3-2.4a23.8 23.8 0 0 1-10.6-5.2 18.7 18.7 0 0 1-5.2-9.1c-.9-3.8-1.4-8.5-1.6-14a835.3 835.3 0 0 1 .1-26.2c.2-7.4 1.7-13 4.4-16.6 2.8-3.7 7.5-5.8 13.9-6.5v-17H121v17c6.1.7 10.6 2.8 13.3 6.6a30 30 0 0 1 4.6 16.7 460.4 460.4 0 0 1-.2 27.5h-11.5a401.2 401.2 0 0 0 .1-29.3c-.1-4-1.1-7-3-8.9-1.8-1.9-4.6-2.8-8.5-2.8-4.1 0-7 1-8.8 2.8-1.7 1.9-2.7 4.8-3 9a263.7 263.7 0 0 0 0 27.7c.2 5.4.8 9.4 2 12 1.1 2.8 3.5 4.5 7 5.4l8.9 2.2c4.7 1 8.3 2.8 10.8 5.2a19 19 0 0 1 5.2 9.3 62 62 0 0 1 1.6 13.7 300.6 300.6 0 0 1 0 25.3 29.3 29.3 0 0 1-4.8 16.8c-2.8 3.8-7.4 6-13.7 6.7v15.6h-10.6Zm337 0v-15.7c-6.2-.8-10.7-3-13.5-6.7a30.6 30.6 0 0 1-4.7-16.7 635.1 635.1 0 0 1 .3-29.6h11.4a354.8 354.8 0 0 0 0 31.4c.2 4 1.2 7 3 9 2 1.8 5 2.7 9 2.7s6.9-1 8.6-2.8c1.8-1.8 2.7-4.8 3-8.9a295.7 295.7 0 0 0 .3-17.2l-.3-9.9a32 32 0 0 0-2-11.1c-1-3.1-3.3-5-6.8-6l-9.3-2.4a23.8 23.8 0 0 1-10.6-5.2 18.7 18.7 0 0 1-5.2-9.1c-.9-3.8-1.4-8.5-1.6-14a835.3 835.3 0 0 1 .1-26.2c.2-7.4 1.7-13 4.4-16.6 2.8-3.7 7.5-5.8 13.9-6.5v-17H458v17c6.1.7 10.6 2.8 13.3 6.6a30 30 0 0 1 4.6 16.7 460.4 460.4 0 0 1-.2 27.5h-11.5a401.2 401.2 0 0 0 .1-29.3c-.1-4-1.1-7-3-8.9-1.8-1.9-4.6-2.8-8.5-2.8-4.1 0-7 1-8.8 2.8-1.7 1.9-2.7 4.8-3 9a263.7 263.7 0 0 0 0 27.7c.2 5.4.8 9.4 2 12 1.1 2.8 3.5 4.5 7 5.4l8.9 2.2c4.7 1 8.3 2.8 10.8 5.2a19 19 0 0 1 5.2 9.3 62 62 0 0 1 1.6 13.7 300.6 300.6 0 0 1 0 25.3 29.3 29.3 0 0 1-4.8 16.8c-2.8 3.8-7.4 6-13.7 6.7v15.6h-10.6Z"
294 |         fill="var(--color-white)"
295 |       />
296 |     </symbol>
297 |     <!-- Results -->
298 |     <symbol id="result-bust" viewBox="0 0 508 234" fill="none" xmlns="http://www.w3.org/2000/svg">
299 |       <path
300 |         d="M506 4V2H36A34 34 0 0 0 2 36v162a34 34 0 0 0 34 34h436a34 34 0 0 0 34-34V4Z"
301 |         fill="var(--color-red)"
302 |         stroke="var(--color-white)"
303 |         stroke-width="4"
304 |       />
305 |       <path
306 |         d="M145 189.3v-144h21.4c8.2 0 14.1 1.8 17.8 5.4 3.8 3.6 5.8 9.5 5.9 17.9a800 800 0 0 1 0 28.7c-.3 5-1.2 9-2.9 11.8a14.7 14.7 0 0 1-8 6.2v3.3c3.8 1.2 6.5 3.3 8.2 6.1 1.7 3 2.7 6.9 2.9 12a648.7 648.7 0 0 1 0 29.3c-.3 8.2-2.3 14.2-6 17.9-3.7 3.6-9.7 5.4-17.9 5.4H145Zm11.9-10.8h9.5c4 0 7-1 8.8-3.1 2-2 3-5.2 3.1-9.5a409.4 409.4 0 0 0 0-28.8c-.1-5.4-1.2-9.2-3.2-11.5-1.9-2.3-5-3.5-9.3-3.5h-9v56.4Zm0-67h9.3c4 0 7-1.3 9-3.6 1.9-2.3 2.9-6 3-10.8a314.7 314.7 0 0 0 0-29c-.1-4.2-1.1-7.2-3-9.2-2-1.9-4.9-2.8-8.8-2.8H157v55.3Zm72.6 79c-8.2 0-14.2-1.8-17.8-5.4-3.6-3.6-5.4-9.6-5.6-18a5149 5149 0 0 1 0-121.8h12l-.4 41a4802.5 4802.5 0 0 0 .2 82.6c0 4 1 6.9 3 8.7 1.8 1.8 4.7 2.7 8.6 2.7 4 0 7-1 8.8-2.7 1.8-1.8 2.8-4.7 2.8-8.7a9019.1 9019.1 0 0 0 0-123.6h12a5149 5149 0 0 1 0 121.8c-.2 8.4-2 14.4-5.6 18-3.6 3.6-9.6 5.4-18 5.4Zm62.7 0c-8.3 0-14.3-1.8-18-5.5-3.5-3.7-5.5-9.8-5.9-18.2a635.1 635.1 0 0 1 .3-29.7H280a354.8 354.8 0 0 0 0 31.5c.2 4 1.2 7 3.1 8.9 1.9 1.8 4.9 2.8 9 2.8 4 0 6.8-1 8.6-2.8 1.7-1.9 2.7-4.9 3-9a295.7 295.7 0 0 0 .3-17.1c0-2.8-.2-6.2-.4-10-.1-4.4-.7-8-1.9-11-1-3.2-3.3-5.1-6.8-6l-9.4-2.5a23.8 23.8 0 0 1-10.6-5 18.7 18.7 0 0 1-5.1-9.3 60 60 0 0 1-1.6-14 835.3 835.3 0 0 1 0-26.1c.2-5.6 1.1-10 2.7-13.5 1.5-3.5 4-6 7.4-7.6a33 33 0 0 1 13.8-2.4c8 0 13.7 1.8 17.2 5.5 3.5 3.6 5.5 9.7 5.8 18.2v12.2c0 4.8 0 10-.2 15.3h-11.5a401.2 401.2 0 0 0 0-29.3c0-4.1-1-7-3-9-1.7-1.8-4.6-2.7-8.5-2.7-4 0-7 .9-8.7 2.8-1.7 1.8-2.7 4.8-3 8.9a263.7 263.7 0 0 0 0 27.8c.1 5.3.8 9.3 2 12 1 2.7 3.4 4.5 7 5.3l8.8 2.2a21 21 0 0 1 10.8 5.2 19 19 0 0 1 5.3 9.4 62 62 0 0 1 1.6 13.7 300.6 300.6 0 0 1-.1 25.3c-.3 8.4-2.3 14.5-5.9 18.2-3.6 3.7-9.4 5.5-17.5 5.5Zm49.8-1.2V56h-18.4V45.3h48.6V56h-18.3v133.2h-12Z"
307 |         fill="var(--color-white)"
308 |       />
309 |       <path
310 |         d="m49.9 135.3 17.8-17.8-17.9-17.9 6.8-6.7 17.8 17.9 18-18 6.7 6.8-18 18 18 17.7-6.8 6.8-17.9-17.8L56.6 142l-6.7-6.8Zm355 0 17.8-17.8-17.9-17.9 6.8-6.7 17.8 17.9 18-18 6.7 6.8-18 18 18 17.7-6.8 6.8-17.9-17.8-17.8 17.8-6.7-6.8Z"
311 |         fill="var(--color-dark-red)"
312 |       />
313 |     </symbol>
314 |     <symbol id="result-push" viewBox="0 0 508 234" fill="none" xmlns="http://www.w3.org/2000/svg">
315 |       <path
316 |         d="M506 4V2H36A34 34 0 0 0 2 36v162a34 34 0 0 0 34 34h436a34 34 0 0 0 34-34V4Z"
317 |         fill="var(--color-cyan)"
318 |         stroke="var(--color-white)"
319 |         stroke-width="4"
320 |       />
321 |       <path
322 |         d="M138 189.3v-144h21.9c8.1 0 14 1.8 17.7 5.4 3.7 3.6 5.7 9.5 6 17.9a722.5 722.5 0 0 1 0 41.1c-.3 8.3-2.4 14.2-6 17.8-3.8 3.6-9.7 5.4-17.8 5.4h-10v56.4H138Zm11.9-67h9.9c4 0 7-1 8.8-3 1.9-1.9 2.9-5 3-9.1a562.5 562.5 0 0 0 0-42.2c-.1-4.1-1.1-7.1-3-9-1.7-2-4.7-3-8.7-3h-10v66.2Zm70.7 68.2c-8.3 0-14.2-1.8-17.8-5.4-3.6-3.6-5.5-9.6-5.6-18a5149 5149 0 0 1 0-121.8h11.9l-.4 41a4802.5 4802.5 0 0 0 .3 82.6c0 4 1 6.9 2.9 8.7 1.9 1.8 4.8 2.7 8.7 2.7 4 0 7-1 8.7-2.7 1.9-1.8 2.8-4.7 2.8-8.7a9019.1 9019.1 0 0 0 0-123.6h12a5149 5149 0 0 1 0 121.8c-.1 8.4-2 14.4-5.6 18-3.6 3.6-9.6 5.4-17.9 5.4Zm62.7 0c-8.3 0-14.3-1.8-18-5.5-3.6-3.7-5.5-9.8-5.9-18.2a635.1 635.1 0 0 1 .3-29.7H271a354.8 354.8 0 0 0 0 31.5c.2 4 1.2 7 3 8.9 2 1.8 5 2.8 9 2.8s6.9-1 8.6-2.8c1.8-1.9 2.8-4.9 3-9a295.7 295.7 0 0 0 .4-17.1l-.4-10a34 34 0 0 0-1.9-11c-1-3.2-3.4-5.1-6.8-6l-9.4-2.5a23.8 23.8 0 0 1-10.6-5 18.7 18.7 0 0 1-5.1-9.3c-1-3.8-1.5-8.4-1.7-14a835.3 835.3 0 0 1 .1-26.1c.2-5.6 1-10 2.6-13.5s4-6 7.5-7.6a33 33 0 0 1 13.8-2.4c7.9 0 13.6 1.8 17.2 5.5 3.5 3.6 5.4 9.7 5.7 18.2a460.4 460.4 0 0 1-.2 27.5h-11.5a401.2 401.2 0 0 0 .1-29.3c-.1-4.1-1.1-7-3-9-1.8-1.8-4.6-2.7-8.5-2.7-4 0-7 .9-8.7 2.8-1.8 1.8-2.8 4.8-3 8.9a263.7 263.7 0 0 0 0 27.8c.1 5.3.7 9.3 1.9 12 1.1 2.7 3.5 4.5 7 5.3l9 2.2a21 21 0 0 1 10.7 5.2 19 19 0 0 1 5.2 9.4 62 62 0 0 1 1.6 13.7 300.6 300.6 0 0 1 0 25.3c-.3 8.4-2.3 14.5-5.9 18.2-3.6 3.7-9.4 5.5-17.5 5.5Zm40-1.2v-144h11.9v66.1h23V45.3H370v144h-12V122h-23v67.2h-11.8Z"
323 |         fill="var(--color-dark-cyan)"
324 |       />
325 |     </symbol>
326 |     <symbol
327 |       id="result-blackjack"
328 |       viewBox="0 0 642 374"
329 |       fill="none"
330 |       xmlns="http://www.w3.org/2000/svg"
331 |     >
332 |       <path
333 |         d="M73 114c0-17.6731 14.3269-32 32-32h468v194c0 17.673-14.327 32-32 32H105c-17.6731 0-32-14.327-32-32V114Z"
334 |         fill="var(--color-black)"
335 |         stroke="var(--color-white)"
336 |         stroke-width="4"
337 |       />
338 |       <path
339 |         d="M116 250.84v-112h16.66c6.347 0 10.967 1.4 13.86 4.2 2.94 2.8 4.457 7.443 4.55 13.93.093 4.667.14 8.75.14 12.25s-.047 6.86-.14 10.08c-.187 3.92-.933 6.977-2.24 9.17-1.307 2.193-3.36 3.803-6.16 4.83v2.59c2.893.933 4.993 2.52 6.3 4.76 1.353 2.24 2.1 5.32 2.24 9.24.093 4.107.14 7.91.14 11.41s-.047 7.303-.14 11.41c-.233 6.44-1.797 11.083-4.69 13.93-2.847 2.8-7.467 4.2-13.86 4.2H116Zm9.24-8.4h7.42c3.127 0 5.413-.793 6.86-2.38 1.493-1.587 2.287-4.06 2.38-7.42.14-3.967.21-7.7.21-11.2 0-3.5-.07-7.233-.21-11.2-.093-4.153-.91-7.117-2.45-8.89-1.493-1.82-3.92-2.73-7.28-2.73h-6.93v43.82Zm0-52.15h7.28c3.127 0 5.437-.91 6.93-2.73 1.493-1.82 2.263-4.62 2.31-8.4.187-4.013.28-7.793.28-11.34 0-3.547-.093-7.303-.28-11.27-.047-3.22-.817-5.577-2.31-7.07-1.493-1.493-3.757-2.24-6.79-2.24h-7.42v43.05ZM164.535 250.84v-112h9.24v103.6h22.4v8.4h-31.64ZM200.664 250.84l11.97-112h17.36l11.9 112h-9.45l-2.94-32.48h-16.45l-2.87 32.48h-9.52Zm13.3-40.88h14.63l-2.17-24.5-3.15-38.22h-3.92l-3.15 38.29-2.24 24.43ZM269.055 251.89c-6.393 0-10.99-1.423-13.79-4.27-2.753-2.893-4.2-7.607-4.34-14.14-.14-6.58-.233-13.067-.28-19.46-.047-6.393-.07-12.763-.07-19.11 0-6.347.023-12.717.07-19.11.047-6.44.14-12.95.28-19.53.093-6.067 1.54-10.617 4.34-13.65 2.847-3.08 7.397-4.62 13.65-4.62 6.393 0 11.013 1.423 13.86 4.27 2.847 2.8 4.387 7.49 4.62 14.07.047 1.773.07 4.013.07 6.72 0 2.66-.023 5.343-.07 8.05-.047 2.66-.093 4.877-.14 6.65h-9.24c.047-2.38.07-4.877.07-7.49.047-2.613.07-5.227.07-7.84 0-2.66-.023-5.157-.07-7.49-.047-3.313-.793-5.647-2.24-7-1.4-1.4-3.71-2.1-6.93-2.1-2.987 0-5.157.7-6.51 2.1-1.353 1.353-2.077 3.687-2.17 7-.14 6.907-.257 13.673-.35 20.3-.047 6.58-.07 13.137-.07 19.67 0 6.487.023 13.043.07 19.67.093 6.58.21 13.347.35 20.3.093 3.22.817 5.553 2.17 7 1.4 1.4 3.617 2.1 6.65 2.1 3.36 0 5.787-.7 7.28-2.1 1.493-1.447 2.263-3.78 2.31-7 .047-2.567.07-5.25.07-8.05 0-2.8-.023-5.6-.07-8.4-.047-2.8-.093-5.46-.14-7.98h9.31c.14 3.967.21 7.817.21 11.55.047 3.687.023 7.513-.07 11.48-.233 6.533-1.82 11.247-4.76 14.14-2.893 2.847-7.607 4.27-14.14 4.27ZM300.57 250.84v-112h9.8l-.14 26.53-1.33 28.56h2.38l8.89-31.08 7.77-24.01h10.15l-16.66 50.12 18.41 61.88h-9.59l-14.77-50.75-5.46 14.63v36.12h-9.45ZM363.529 251.82c-4.294 0-7.747-.63-10.36-1.89-2.567-1.26-4.457-3.243-5.67-5.95-1.167-2.707-1.797-6.253-1.89-10.64-.094-3.967-.14-7.793-.14-11.48 0-3.733.046-7.583.14-11.55h8.89c-.094 2.567-.164 5.25-.21 8.05v8.4c.046 2.753.116 5.413.21 7.98.093 3.173.816 5.483 2.17 6.93 1.353 1.447 3.64 2.17 6.86 2.17 3.08 0 5.273-.723 6.58-2.17 1.353-1.447 2.03-3.757 2.03-6.93v-95.9h9.31v94.5c0 6.58-1.377 11.317-4.13 14.21-2.707 2.847-7.304 4.27-13.79 4.27ZM390.703 250.84l11.97-112h17.36l11.9 112h-9.45l-2.94-32.48h-16.45l-2.87 32.48h-9.52Zm13.3-40.88h14.63l-2.17-24.5-3.15-38.22h-3.92l-3.15 38.29-2.24 24.43ZM459.094 251.89c-6.393 0-10.99-1.423-13.79-4.27-2.753-2.893-4.2-7.607-4.34-14.14-.14-6.58-.233-13.067-.28-19.46-.047-6.393-.07-12.763-.07-19.11 0-6.347.023-12.717.07-19.11.047-6.44.14-12.95.28-19.53.093-6.067 1.54-10.617 4.34-13.65 2.847-3.08 7.397-4.62 13.65-4.62 6.393 0 11.013 1.423 13.86 4.27 2.847 2.8 4.387 7.49 4.62 14.07.047 1.773.07 4.013.07 6.72 0 2.66-.023 5.343-.07 8.05-.047 2.66-.093 4.877-.14 6.65h-9.24c.047-2.38.07-4.877.07-7.49.047-2.613.07-5.227.07-7.84 0-2.66-.023-5.157-.07-7.49-.047-3.313-.793-5.647-2.24-7-1.4-1.4-3.71-2.1-6.93-2.1-2.987 0-5.157.7-6.51 2.1-1.353 1.353-2.077 3.687-2.17 7-.14 6.907-.257 13.673-.35 20.3-.047 6.58-.07 13.137-.07 19.67 0 6.487.023 13.043.07 19.67.093 6.58.21 13.347.35 20.3.093 3.22.817 5.553 2.17 7 1.4 1.4 3.617 2.1 6.65 2.1 3.36 0 5.787-.7 7.28-2.1 1.493-1.447 2.263-3.78 2.31-7 .047-2.567.07-5.25.07-8.05 0-2.8-.023-5.6-.07-8.4-.047-2.8-.093-5.46-.14-7.98h9.31c.14 3.967.21 7.817.21 11.55.047 3.687.023 7.513-.07 11.48-.233 6.533-1.82 11.247-4.76 14.14-2.893 2.847-7.607 4.27-14.14 4.27ZM490.609 250.84v-112h9.8l-.14 26.53-1.33 28.56h2.38l8.89-31.08 7.77-24.01h10.15l-16.66 50.12 18.41 61.88h-9.59l-14.77-50.75-5.46 14.63v36.12h-9.45Z"
340 |         fill="var(--color-gold)"
341 |       />
342 |       <g class="blackjack-confetti">
343 |         <path
344 |           d="m58.4822 148.872-5.5083-3.85c-2.015 2.15-4.1426 3.24-6.3829 3.268-2.227.01-4.8341-.944-7.8214-2.861-.9123-.609-1.7959-1.198-2.6508-1.767-.8606-.602-1.7146-1.213-2.5619-1.833-.8339-.64-1.6736-1.312-2.5191-2.017l4.09-5.852c1.4766 1.145 2.9733 2.263 4.49 3.351 1.53 1.069 3.0074 2.031 4.4322 2.884 1.1819.712 2.2573.965 3.2263.76.9499-.218 1.8525-.94 2.7079-2.164.8421-1.205 1.1825-2.262 1.0212-3.172-.1804-.923-.7947-1.836-1.8429-2.74-.8206-.658-1.5971-1.258-2.3297-1.799-.7325-.54-1.488-1.068-2.2664-1.583-.7784-.516-1.6466-1.066-2.6047-1.65-1.1819-.712-2.3082-1.158-3.3788-1.336-1.0706-.179-2.094.145-3.0701.971l-3.662 3.163c-1.6428 1.414-3.2258 2.314-4.749 2.702-1.5424.374-3.1204.31-4.7341-.192-1.6138-.501-3.3587-1.365-5.2349-2.591-1.0461-.702-2.1047-1.428-3.1758-2.176-1.0577-.768-2.1058-1.529-3.1443-2.283-2.82693-2.147-4.5996-4.254-5.31803-6.321-.72419-2.101-.38962-4.514 1.00369-7.241l-5.99592-4.19 3.80931-5.451 5.99595 4.19c1.9749-2.093 4.0892-3.163 6.3429-3.21 2.2345-.061 4.8359.86 7.8041 2.763.9638.617 2.1276 1.416 3.4913 2.398 1.3446.968 2.6758 1.955 3.9936 2.961l-4.1702 5.968c-1.3943-1.06-2.8087-2.091-4.2431-3.094-1.4402-1.035-2.8976-2.025-4.3721-2.97-1.1227-.756-2.1656-1.015-3.1288-.777-.9824.224-1.8812.92-2.6966 2.086-.8554 1.224-1.1996 2.307-1.0326 3.25.1479.929.7431 1.828 1.7856 2.699 1.1572.951 2.3574 1.861 3.6006 2.73 1.2565.85 2.5235 1.664 3.8011 2.443 1.2775.779 2.4295 1.228 3.4561 1.348 1.0266.119 2.0413-.253 3.0442-1.118l3.2579-2.89c1.6906-1.523 3.3395-2.477 4.9468-2.862 1.5882-.399 3.2083-.335 4.8602.194 1.6329.515 3.3874 1.385 5.2636 2.611.83.523 1.5701 1.012 2.2204 1.466.6503.454 1.2843.912 1.9021 1.372.5987.447 1.2547.934 1.9681 1.461 2.8461 2.16 4.6436 4.312 5.3927 6.458.7299 2.133.4116 4.544-.955 7.233l5.4509 3.809-3.8093 5.451ZM562.103 159.461l7.276-2.459c-.613-3.311-.173-6.008 1.319-8.088 1.501-2.056 4.146-3.808 7.935-5.258 1.179-.426 2.319-.84 3.423-1.241 1.136-.384 2.277-.756 3.423-1.115 1.154-.333 2.341-.65 3.563-.951l2.613 7.731c-2.056.582-4.098 1.202-6.127 1.86-2.021.683-3.907 1.391-5.658 2.123-1.457.605-2.419 1.423-2.887 2.453-.443 1.023-.391 2.342.156 3.959.538 1.592 1.28 2.621 2.226 3.09.972.459 2.229.513 3.77.161 1.163-.308 2.241-.616 3.235-.924.994-.308 1.992-.645 2.993-1.012 1.002-.367 2.097-.793 3.284-1.279 1.456-.604 2.63-1.339 3.52-2.203.89-.864 1.286-2.025 1.187-3.483l-.428-5.513c-.187-2.47.057-4.538.733-6.202.702-1.672 1.83-3.081 3.385-4.226 1.555-1.145 3.533-2.165 5.933-3.061 1.355-.486 2.74-.968 4.155-1.446 1.423-.453 2.834-.902 4.232-1.346 3.891-1.146 7.031-1.349 9.421-.609 2.423.758 4.418 2.701 5.982 5.832l7.92-2.677 2.434 7.2-7.92 2.677c.587 3.236.138 5.906-1.346 8.012-1.458 2.098-4.069 3.867-7.833 5.308-1.22.469-2.745.998-4.572 1.587-1.802.581-3.613 1.137-5.432 1.668l-2.664-7.882c1.92-.565 3.828-1.168 5.722-1.808 1.929-.624 3.828-1.293 5.697-2.01 1.456-.52 2.402-1.304 2.836-2.352.459-1.056.429-2.354-.092-3.895-.547-1.617-1.31-2.668-2.29-3.153-.955-.493-2.187-.556-3.695-.187-1.659.42-3.31.908-4.952 1.463-1.633.58-3.242 1.194-4.824 1.841-1.583.648-2.777 1.404-3.583 2.267-.806.864-1.151 2.05-1.035 3.559l.451 4.956c.255 2.588.015 4.752-.72 6.492-.709 1.732-1.867 3.179-3.473 4.341-1.58 1.153-3.57 2.178-5.97 3.073-1.044.41-1.995.759-2.854 1.05-.859.29-1.71.563-2.552.82-.817.248-1.71.521-2.678.821-3.917 1.154-7.116 1.349-9.598.584-2.458-.774-4.46-2.701-6.008-5.781l-7.2 2.433-2.433-7.2ZM72.7901 271.89l-3.8359 3.767c1.3951 1.9 1.9393 3.733 1.6328 5.499-.3195 1.753-1.4524 3.663-3.3984 5.731-.6129.628-1.2059 1.237-1.7788 1.825-.5994.589-1.2053 1.171-1.8177 1.746-.6255.562-1.2775 1.124-1.9558 1.685l-4.002-4.076c1.1179-.993 2.2161-2.006 3.2947-3.039 1.0656-1.046 2.0385-2.067 2.9187-3.062.7335-.825 1.0907-1.633 1.0715-2.425-.0325-.78-.4672-1.595-1.3042-2.448-.824-.839-1.6055-1.262-2.3446-1.268-.7525.006-1.5609.355-2.4252 1.047-.6386.548-1.2241 1.071-1.7567 1.568-.5325.496-1.0586 1.013-1.5783 1.549-.5197.537-1.0795 1.139-1.6796 1.807-.7335.825-1.2492 1.645-1.5471 2.461-.2978.815-.1934 1.668.3133 2.557l1.9495 3.344c.8707 1.499 1.3466 2.876 1.4275 4.131.0677 1.268-.2142 2.499-.8455 3.695-.6313 1.195-1.5666 2.441-2.806 3.736-.7062.72-1.4322 1.446-2.1781 2.178-.7589.719-1.5112 1.432-2.2568 2.138-2.103 1.908-4.0203 2.993-5.7519 3.254-1.7579.261-3.6069-.356-5.5468-1.852l-4.1756 4.1-3.7273-3.796 4.1755-4.1c-1.3558-1.861-1.887-3.681-1.5936-5.46.2801-1.766 1.3866-3.677 3.3193-5.731.6265-.668 1.4257-1.466 2.3978-2.394.9587-.915 1.9305-1.817 2.9154-2.706l4.0805 4.156c-1.0382.941-2.0567 1.902-3.0557 2.882-1.0253.981-2.0178 1.982-2.9775 3.003-.7594.772-1.1164 1.554-1.0708 2.346.0323.806.4473 1.615 1.2451 2.427.837.852 1.6383 1.282 2.4038 1.289.7522.02 1.5472-.316 2.3851-1.008.9179-.77 1.8096-1.58 2.6754-2.431.8527-.863 1.679-1.74 2.4792-2.63.8001-.89 1.3225-1.73 1.5673-2.52.2448-.79.1008-1.643-.432-2.558l-1.7944-2.987c-.9494-1.553-1.4577-2.989-1.5249-4.31-.0804-1.308.2083-2.572.8662-3.794.6446-1.208 1.5866-2.46 2.826-3.756.5333-.576 1.0263-1.086 1.4792-1.531.4528-.444.9056-.876 1.3582-1.294.4393-.405.9185-.85 1.4377-1.333 2.1163-1.921 4.0733-3.019 5.871-3.293 1.7844-.261 3.6334.343 5.5472 1.813l3.796-3.728 3.7273 3.796ZM292.015 43.938l-1.026-3.9985c-1.8.1953-3.227-.1487-4.283-1.0322-1.041-.887-1.874-2.3749-2.499-4.4639-.181-.649-.357-1.2771-.528-1.8844-.16-.6248-.313-1.2513-.46-1.8797-.132-.6318-.255-1.2812-.366-1.948l4.248-1.09c.229 1.125.48 2.2446.751 3.3588.285 1.1107.588 2.15.911 3.118.265.8049.665 1.3534 1.199 1.6456.53.2783 1.239.3035 2.128.0755.874-.2244 1.456-.5808 1.745-1.0693.286-.5024.365-1.1738.238-2.0143-.119-.6355-.24-1.2257-.365-1.7707-.125-.5451-.266-1.0935-.422-1.6452-.157-.5518-.341-1.1556-.554-1.8113-.266-.8049-.612-1.4633-1.039-1.9752-.428-.5118-1.034-.7706-1.82-.7761l-2.972.0079c-1.332.0012-2.43-.2127-3.295-.642-.868-.4431-1.578-1.1044-2.129-1.984-.551-.8796-1.019-1.9805-1.402-3.3026-.206-.7462-.409-1.508-.609-2.2855-.185-.7811-.369-1.5552-.551-2.3223-.458-2.1317-.441-3.8231.052-5.07417.503-1.26852 1.625-2.25926 3.366-2.97224l-1.117-4.35253 3.957-1.01519L286.29 5.187c1.758-.18467 3.171.16294 4.24 1.04283 1.066.86601 1.909 2.33654 2.531 4.41157.202.6732.424 1.5114.667 2.5146.239.9893.464 1.9821.675 2.9786l-4.331 1.1113c-.226-1.0519-.472-2.0985-.739-3.1398-.257-1.0587-.54-2.1034-.849-3.134-.22-.8017-.602-1.3399-1.147-1.61466-.547-.28863-1.244-.32431-2.091-.10703-.889.22798-1.483.59493-1.782 1.10089-.303.492-.386 1.1496-.249 1.9726.159.9064.354 1.8108.586 2.7132.245.8989.509 1.7855.793 2.6598.283.8743.64 1.5448 1.071 2.0114.43.4667 1.052.6993 1.866.6977l2.675-.0426c1.397-.0329 2.547.1825 3.451.6462.899.4499 1.628 1.1285 2.187 2.0359.554.8935 1.024 2.0013 1.407 3.3234.178.576.327 1.1.448 1.5721.121.472.233.9389.337 1.4006.1.4479.211.9374.332 1.4685.462 2.1456.438 3.8683-.072 5.1681-.514 1.286-1.627 2.2819-3.34 2.9878l1.015 3.9568-3.956 1.0152ZM487.761 32.3469l1.005-2.5965c-1.065-.5983-1.713-1.3466-1.946-2.2452-.224-.895-.098-2.0382.378-3.4295.155-.4272.305-.8409.449-1.2411.157-.4057.319-.8096.485-1.2118.175-.3988.362-.803.562-1.2128l2.759 1.0672c-.315.7073-.617 1.4199-.905 2.1376-.279.7213-.52 1.4107-.722 2.0682-.17.5459-.165 1.0036.013 1.3732.182.3605.561.6524 1.138.8756.568.2197 1.027.2522 1.377.0974.354-.1638.661-.5012.92-1.0122.184-.3952.349-.7669.494-1.115.145-.3481.283-.7042.413-1.0684.131-.3641.266-.7677.406-1.2109.17-.5459.238-1.0431.204-1.4915-.034-.4484-.265-.8281-.694-1.1392l-1.634-1.1608c-.731-.5212-1.25-1.0691-1.556-1.6437-.303-.5836-.434-1.2247-.391-1.9235.042-.6988.217-1.4862.525-2.3622.179-.4903.366-.9879.562-1.4928.204-.5014.407-.9983.607-1.4906.585-1.34947 1.257-2.27087 2.018-2.76423.774-.4989 1.778-.60279 3.013-.31167l1.093-2.82639 2.569.99398-1.093 2.82639c1.037.58777 1.677 1.33262 1.918 2.23472.246.893.132 2.0306-.34 3.4129-.153.4487-.36.9959-.62 1.6415-.257.6366-.522 1.2698-.797 1.8994l-2.813-1.0881c.289-.6657.564-1.3367.826-2.0128.274-.6817.528-1.3659.763-2.0525.193-.5264.194-.9716.003-1.3357-.187-.373-.556-.6659-1.106-.8787-.577-.2232-1.047-.2546-1.409-.0943-.359.1513-.663.4796-.91.9851-.268.5596-.516 1.1324-.742 1.7184-.218.5895-.42 1.1797-.608 1.7706-.187.591-.254 1.0989-.2 1.5237.053.4249.303.7963.75 1.1144l1.485 1.0252c.779.5296 1.326 1.0987 1.64 1.7073.318.5996.452 1.2578.402 1.9746-.045.7078-.222 1.4997-.53 2.3757-.128.3856-.252.7317-.37 1.0382-.119.3066-.24.6068-.365.9009-.12.285-.251.597-.393.9361-.587 1.3585-1.276 2.2944-2.065 2.8079-.786.5044-1.788.6145-3.004.3304l-.994 2.5694-2.57-.9939ZM497.278 306.582l1.298 2.784c1.29-.389 2.381-.333 3.274.169.883.506 1.696 1.48 2.44 2.923.221.449.436.885.644 1.306.203.435.401.872.594 1.312.183.444.361.902.535 1.374l-2.959 1.379c-.322-.791-.658-1.576-1.009-2.354-.36-.773-.725-1.492-1.093-2.156-.305-.552-.672-.898-1.103-1.039-.426-.131-.948-.052-1.567.236-.609.284-.985.624-1.13 1.021-.14.407-.106.909.102 1.506.174.449.344.864.51 1.246.166.381.344.763.534 1.145.19.382.407.799.653 1.249.304.553.648.987 1.031 1.303.382.316.861.422 1.437.318l2.173-.413c.974-.183 1.806-.177 2.498.019.695.205 1.305.592 1.829 1.159.524.568 1.016 1.31 1.478 2.224.253.518.506 1.047.758 1.589.243.546.483 1.087.721 1.623.627 1.496.846 2.736.657 3.719-.194.996-.879 1.875-2.055 2.635l1.413 3.031-2.755 1.284-1.413-3.031c-1.261.376-2.342.315-3.245-.182-.898-.487-1.716-1.448-2.455-2.88-.24-.465-.518-1.048-.832-1.748-.311-.691-.611-1.387-.902-2.087l3.016-1.406c.309.739.632 1.471.97 2.196.333.739.683 1.464 1.05 2.176.271.556.625.898 1.06 1.024.44.136.955.067 1.545-.208.619-.289 1.003-.638 1.153-1.049.154-.402.124-.894-.089-1.477-.24-.642-.506-1.276-.799-1.905-.303-.624-.618-1.236-.945-1.837-.327-.6-.68-1.042-1.059-1.324-.379-.283-.865-.368-1.46-.255l-1.951.397c-1.018.216-1.889.216-2.613 0-.719-.206-1.346-.602-1.878-1.189-.529-.578-1.023-1.324-1.485-2.239-.209-.397-.39-.76-.543-1.088-.153-.329-.299-.655-.438-.979-.135-.314-.283-.656-.445-1.028-.631-1.507-.849-2.77-.654-3.791.199-1.011.877-1.892 2.033-2.642l-1.284-2.756 2.755-1.284Z"
345 |           fill="var(--color-white)"
346 |         />
347 |         <path
348 |           d="m529.585 87.6248-12.721-17.2001c-1.015-1.372-1.604-2.8807-1.769-4.5262-.154-1.644.081-3.221.707-4.7309.628-1.5196 1.617-2.7774 2.969-3.7733 1.384-1.0209 2.879-1.6129 4.484-1.7759 1.616-.1714 3.169.0558 4.659.6816 1.499.6272 2.766 1.6234 3.802 2.9885l1.691 2.2171 2.256-1.6395c1.393-1.0098 2.892-1.601 4.499-1.7738 1.606-.1728 3.154.0537 4.644.6795 1.5.6175 2.768 1.6137 3.802 2.9885 1.009 1.3414 1.597 2.8299 1.762 4.4656.168 1.626-.063 3.2037-.692 4.733-.619 1.5308-1.612 2.8081-2.977 3.8318l-17.116 12.8341ZM219.354 102.173l-21.629-17.1738c-1.725-1.3699-2.966-3.0529-3.723-5.0489-.745-1.9976-.98-4.0425-.706-6.1348.272-2.1049 1.084-4.0048 2.434-5.6998 1.384-1.7372 3.048-2.9766 4.994-3.7184 1.958-.7558 3.97-.9935 6.036-.7131 2.08.2788 3.994 1.0954 5.743 2.4497l2.852 2.1963 2.262-2.8006c1.398-1.7261 3.069-2.9663 5.013-3.7206 1.945-.7544 3.951-.9913 6.017-.711 2.078.2663 3.992 1.0829 5.743 2.4498 1.708 1.3335 2.94 2.992 3.695 4.9754.754 1.9709.996 4.0151.725 6.1326-.258 2.1161-1.067 4.0412-2.425 5.7755l-17.031 21.7417ZM405.409 281.813l30.303 13.165c2.417 1.05 4.371 2.611 5.863 4.684 1.477 2.079 2.381 4.369 2.711 6.872.336 2.517-.015 4.963-1.052 7.339-1.062 2.436-2.603 4.382-4.623 5.841-2.029 1.478-4.28 2.374-6.756 2.689-2.489.32-4.953-.032-7.393-1.057l-3.975-1.657-1.749 3.936c-1.082 2.426-2.63 4.376-4.644 5.848-2.014 1.473-4.259 2.367-6.734 2.681-2.484.335-4.948-.018-7.393-1.057-2.387-1.013-4.323-2.549-5.809-4.608-1.48-2.045-2.391-4.332-2.732-6.863-.355-2.526-.016-5 1.019-7.424l12.964-30.389ZM181.737 314.338l8.485 15.174c.677 1.211.997 2.488.961 3.831-.045 1.341-.397 2.588-1.057 3.741-.662 1.16-1.589 2.073-2.781 2.736-1.221.681-2.487 1.004-3.798.971-1.32-.028-2.548-.371-3.685-1.029-1.144-.66-2.063-1.593-2.757-2.8l-1.136-1.961-1.987 1.089c-1.227.671-2.496.993-3.809.967-1.313-.026-2.537-.368-3.674-1.025-1.146-.652-2.065-1.586-2.757-2.8-.676-1.186-.996-2.446-.962-3.782.033-1.328.381-2.576 1.045-3.744.657-1.17 1.588-2.098 2.794-2.782l15.118-8.586ZM543.718 339.485l14.638 1.95c1.167.156 2.199.588 3.094 1.296.889.713 1.558 1.587 2.006 2.623.453 1.04.601 2.135.446 3.283-.158 1.177-.582 2.203-1.272 3.077-.691.884-1.549 1.545-2.575 1.983-1.031.442-2.133.593-3.307.451l-1.912-.226-.27 1.906c-.168 1.176-.595 2.203-1.281 3.083-.685.879-1.541 1.538-2.566 1.977-1.027.447-2.13.597-3.308.45-1.15-.143-2.17-.567-3.061-1.27-.887-.698-1.558-1.57-2.015-2.616-.462-1.042-.619-2.147-.471-3.316l1.854-14.651ZM620.416 261.327l6.524 26.008-25.785 7.354-6.524-26.008 25.785-7.354ZM463.066 20.7432l3.435 13.693-13.576 3.8721-3.435-13.693 13.576-3.8721ZM187.755 15.7711l13.461 4.2531-3.819 13.5908-13.461-4.2531 3.819-13.5908ZM249.646 293.911l4.24 16.904-16.759 4.78-4.24-16.904 16.759-4.78ZM331.646 324.91l3.435 13.693-13.576 3.872-3.434-13.692 13.575-3.873ZM55.879 192.967l21.3467 16.226-15.5334 21.857-21.3467-16.227 15.5334-21.856Z"
349 |           fill="red"
350 |         />
351 |         <path
352 |           d="m100.831 48.6341 6.981 3.3612-9.1203 4.0859 2.1393-7.4471Z"
353 |           fill="var(--color-white)"
354 |         />
355 |         <path
356 |           d="M101.901 33.9089c.007-1.144.114-3.1803-.384-4.2902-1.8781-4.1927-6.8334-6.0538-11.0676-4.1569-4.2343 1.897-6.1442 6.8337-4.2658 11.0265.4973 1.1099 2.0877 2.3859 2.9458 3.1425-3.975 2.0119-6.5977 6.4522-4.7747 10.5212 1.8784 4.1928 6.8337 6.0539 11.068 4.1569 2.8237-1.265 4.3441-4.4838 4.6663-7.3304 2.339 1.6545 5.753 2.6627 8.576 1.3976 4.235-1.897 6.145-6.8337 4.266-11.0265-1.823-4.069-6.882-5.0677-11.03-3.4407ZM462.883 327.003l-4.42-2.235 5.88-2.497-1.46 4.732Z"
357 |           fill="var(--color-white)"
358 |         />
359 |         <path
360 |           d="M462.014 336.4c-.019.731-.113 2.031.191 2.747 1.148 2.703 4.292 3.954 7.021 2.795 2.73-1.159 4.013-4.29 2.865-6.993-.304-.715-1.305-1.551-1.843-2.045 2.565-1.236 4.297-4.041 3.183-6.664-1.148-2.703-4.291-3.955-7.021-2.795-1.82.773-2.832 2.811-3.074 4.626-1.474-1.087-3.643-1.774-5.463-1.001-2.73 1.159-4.013 4.29-2.865 6.993 1.114 2.623 4.335 3.325 7.006 2.337ZM21.1011 227.397l2.7504-4.119 1.7723 6.137-4.5227-2.018Z"
361 |           fill="var(--color-white)"
362 |         />
363 |         <path
364 |           d="M11.8766 225.405c-.7235-.106-2.0028-.356-2.74966-.14-2.82134.815-4.44144 3.785-3.61861 6.635.82282 2.849 3.77702 4.498 6.59837 3.683.7469-.215 1.6964-1.108 2.2519-1.584.9187 2.696 3.495 4.752 6.2331 3.961 2.8214-.815 4.4415-3.785 3.6186-6.634-.5487-1.9-2.4503-3.15-4.2233-3.608 1.2559-1.332 2.1986-3.403 1.6499-5.303-.8228-2.85-3.777-4.499-6.5984-3.684-2.738.791-3.8216 3.904-3.1619 6.674ZM611.329 216.854l-4.689 1.594 2.329-5.948 2.36 4.354Z"
365 |           fill="var(--color-white)"
366 |         />
367 |         <path
368 |           d="M617.436 224.049c.509.524 1.372 1.501 2.096 1.784 2.735 1.071 5.828-.3 6.909-3.061 1.082-2.762-.258-5.868-2.993-6.939-.723-.284-2.02-.153-2.75-.114.911-2.698.119-5.897-2.535-6.936-2.735-1.071-5.828.299-6.909 3.061-.722 1.841.027 3.99 1.155 5.433-1.808.293-3.816 1.362-4.537 3.204-1.082 2.761.258 5.868 2.993 6.939 2.653 1.039 5.408-.772 6.571-3.371ZM389.016 96.4886l5.832 8.8994-13.623-1.654 7.791-7.2454Z"
369 |           fill="var(--color-white)"
370 |         />
371 |         <path
372 |           d="M400.705 79.9242c.818-1.3411 2.386-3.6611 2.587-5.319.76-6.2629-3.751-11.9621-10.076-12.7296-6.325-.7675-12.068 3.6873-12.828 9.9501-.201 1.6579.766 4.2855 1.239 5.7834-6.101-.4486-12.331 2.9173-13.069 8.9953-.76 6.2629 3.751 11.9621 10.076 12.7296 4.218.5119 8.287-2.1979 10.682-5.3185 1.579 3.6029 4.881 7.2075 9.099 7.7185 6.325.768 12.069-3.6869 12.829-9.9497.737-6.078-4.507-10.8364-10.539-11.8601ZM351.574 47.0045l3.215 4.1915-6.806-.3169 3.591-3.8746Z"
373 |           fill="var(--color-white)"
374 |         />
375 |         <path
376 |           d="M356.752 38.3725c.356-.6942 1.046-1.9006 1.085-2.7289.146-3.129-2.298-5.7848-5.458-5.932-3.16-.1471-5.839 2.2701-5.985 5.3991-.039.8283.537 2.0937.827 2.8179-3.038.0025-5.999 1.8985-6.14 4.9351-.146 3.129 2.298 5.7848 5.457 5.932 2.108.0981 4.022-1.3934 5.094-3.0267.914 1.7258 2.682 3.3887 4.789 3.4869 3.16.1471 5.84-2.2701 5.986-5.3991.141-3.0366-2.631-5.1996-5.655-5.4843ZM117.877 324.096l-.866-17.593c-.069-1.403.215-2.706.854-3.907.644-1.196 1.526-2.168 2.644-2.915 1.124-.753 2.376-1.161 3.757-1.224 1.415-.066 2.71.213 3.884.836 1.186.622 2.146 1.488 2.881 2.598.741 1.115 1.155 2.377 1.242 3.785l.147 2.291 2.294-.09c1.416-.053 2.713.228 3.893.845 1.18.617 2.138 1.48 2.873 2.59.746 1.109 1.16 2.371 1.241 3.785.079 1.38-.197 2.668-.83 3.863-.628 1.19-1.507 2.164-2.636 2.923-1.123.764-2.386 1.184-3.789 1.26l-17.589.953Z"
377 |           fill="var(--color-white)"
378 |         />
379 |         <path
380 |           d="m133.316 306.972.284-7.295 6.942 6.259-7.226 1.036ZM275.802 368.838l-11.656-20.304c-.93-1.619-1.379-3.333-1.35-5.141.041-1.806.497-3.488 1.37-5.048.875-1.571 2.111-2.811 3.707-3.72 1.636-.932 3.337-1.384 5.103-1.357 1.78.02 3.44.465 4.981 1.335 1.551.872 2.803 2.116 3.757 3.731l1.558 2.623 2.662-1.492c1.643-.919 3.35-1.37 5.119-1.353 1.769.017 3.424.461 4.965 1.33 1.554.863 2.806 2.106 3.757 3.731.927 1.586 1.378 3.277 1.351 5.075-.025 1.787-.476 3.471-1.354 5.052-.868 1.584-2.109 2.844-3.724 3.782l-20.246 11.756Z"
381 |           fill="var(--color-white)"
382 |         />
383 |         <path
384 |           d="m283.731 339.237-4.071-8.807 12 3.215-7.929 5.592ZM566.128 316.38l-20.857 1.499c-1.664.119-3.217-.184-4.66-.909-1.437-.733-2.613-1.753-3.53-3.061-.924-1.313-1.442-2.788-1.554-4.425-.115-1.678.181-3.222.889-4.632.707-1.424 1.709-2.587 3.006-3.489 1.304-.91 2.79-1.435 4.459-1.575l2.716-.236-.169-2.721c-.101-1.678.198-3.226.898-4.642.701-1.417 1.7-2.576 2.997-3.479 1.297-.915 2.783-1.44 4.459-1.574 1.636-.131 3.171.163 4.607.882 1.429.713 2.608 1.73 3.539 3.049.938 1.313 1.47 2.801 1.598 4.464l1.602 20.849Z"
385 |           fill="var(--color-white)"
386 |         />
387 |         <path
388 |           d="m545.391 298.516-8.665-.143 7.243-8.406 1.422 8.549ZM614.714 59.1193l-1.507 23.3627c-.121 1.8636-.693 3.5405-1.717 5.0309-1.031 1.4822-2.342 2.6323-3.931 3.4502-1.598.8249-3.313 1.1752-5.146 1.0508-1.878-.1271-3.546-.6904-5.002-1.6897-1.472-1.0003-2.61-2.2886-3.414-3.865-.81-1.5845-1.167-3.3129-1.069-5.1854l.151-3.0481-3.043-.2269c-1.877-.1423-3.548-.7096-5.013-1.7018-1.465-.9922-2.599-2.2766-3.403-3.853-.819-1.5773-1.175-3.3057-1.069-5.1853.103-1.8342.663-3.4929 1.679-4.9761 1.008-1.476 2.315-2.6301 3.921-3.4622 1.598-.8401 3.329-1.2047 5.193-1.0936l23.37 1.3925Z"
389 |           fill="var(--color-white)"
390 |         />
391 |         <path
392 |           d="m591.746 79.4057-1.475 9.5901-8.223-9.3119 9.698-.2782Z"
393 |           fill="var(--color-white)"
394 |         />
395 |       </g>
396 |     </symbol>
397 |   </svg>
398 | </template>
399 | 
400 | <style scoped>
401 | .dollar-signs {
402 |   transform-origin: 50% 50%;
403 |   animation: dollar-spin 0.1s 12 ease-out alternate;
404 |   backface-visibility: hidden;
405 | }
406 | .blackjack-confetti {
407 |   transform-origin: 50% 50%;
408 |   transform: scale(0);
409 |   animation: expand 0.6s ease-out forwards;
410 | }
411 | .blackjack-confetti path {
412 |   transform-box: fill-box;
413 |   transform-origin: 50% 50%;
414 |   animation: expand-path 2s ease-in-out forwards;
415 | }
416 | @keyframes expand {
417 |   0% {
418 |     transform: scale(0);
419 |   }
420 |   50% {
421 |     transform: scale(0);
422 |   }
423 |   100% {
424 |     transform: scale(1);
425 |   }
426 | }
427 | @keyframes expand-path {
428 |   0% {
429 |     transform: scale(1);
430 |   }
431 |   50% {
432 |     transform: scale(1);
433 |   }
434 |   100% {
435 |     transform: scale(0);
436 |   }
437 | }
438 | @keyframes dollar-spin {
439 |   0% {
440 |     transform: rotate3d(1, 0, 0, 0deg);
441 |   }
442 |   100% {
443 |     transform: rotate3d(1, 0, 0, 90deg);
444 |   }
445 | }
446 | </style>
447 | 


--------------------------------------------------------------------------------
/src/components/TitleScreen.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { playRound, state, resetBank } from '@/store'
  3 | import { ref } from 'vue'
  4 | 
  5 | const showTitleScreen = ref(true)
  6 | 
  7 | function startGame() {
  8 |   showTitleScreen.value = false
  9 |   resetBank()
 10 |   state.isGameOver = false
 11 | }
 12 | </script>
 13 | 
 14 | <template>
 15 |   <transition name="fade" @after-leave="playRound">
 16 |     <section v-if="showTitleScreen || state.isGameOver" class="title-screen">
 17 |       <svg>
 18 |         <use href="#flourish" />
 19 |       </svg>
 20 |       <div>
 21 |         <h1>Vl<span>a</span>ck<span>j</span>ack</h1>
 22 |         <p>Blackjack Simulator</p>
 23 |       </div>
 24 |       <transition name="fade" mode="out-in">
 25 |         <div class="progress-container" v-if="state.soundLoadProgress < 100">
 26 |           <progress :value="state.soundLoadProgress" max="100">
 27 |             {{ state.soundLoadProgress }}%
 28 |           </progress>
 29 |         </div>
 30 |         <button v-else @click="startGame">
 31 |           {{ state.isGameOver ? 'Play Again' : 'Start Game' }}
 32 |         </button>
 33 |       </transition>
 34 |     </section>
 35 |   </transition>
 36 | </template>
 37 | 
 38 | <style scoped>
 39 | .title-screen {
 40 |   position: absolute;
 41 |   inset: 0;
 42 |   overflow: hidden;
 43 |   display: flex;
 44 |   flex-direction: column;
 45 |   align-items: center;
 46 |   justify-content: center;
 47 |   text-align: center;
 48 |   gap: 3rem;
 49 |   background-color: var(--color-dark-cyan);
 50 | }
 51 | .title-screen > *:not(svg) {
 52 |   position: relative;
 53 | }
 54 | svg {
 55 |   position: absolute;
 56 |   width: max(86rem, 125vw);
 57 |   aspect-ratio: 1;
 58 |   opacity: 0.25;
 59 |   animation: rotate 120s linear infinite;
 60 | }
 61 | h1 {
 62 |   color: var(--color-white);
 63 |   text-transform: uppercase;
 64 |   font-size: 6rem;
 65 |   letter-spacing: 0.25rem;
 66 |   font-variation-settings: 'wght' 700;
 67 | }
 68 | p {
 69 |   text-transform: uppercase;
 70 |   margin: 0;
 71 |   color: var(--color-white);
 72 |   font-size: 2.5rem;
 73 |   font-weight: 300;
 74 |   letter-spacing: 0.1rem;
 75 | }
 76 | button {
 77 |   font-size: 2.5rem;
 78 |   padding: 1.5rem 2.5rem;
 79 | }
 80 | .progress-container {
 81 |   display: flex;
 82 |   align-items: center;
 83 |   height: 5.5rem;
 84 | }
 85 | progress {
 86 |   width: 300px;
 87 |   height: 1rem;
 88 |   border: 0;
 89 |   border-radius: 0.5rem;
 90 |   overflow: hidden;
 91 |   appearance: none;
 92 |   background-color: var(--color-black);
 93 |   opacity: 0.5;
 94 | }
 95 | progress::-webkit-progress-bar {
 96 |   background-color: var(--color-black);
 97 | }
 98 | progress::-webkit-progress-value {
 99 |   background-color: var(--color-white);
100 | }
101 | progress::-moz-progress-bar {
102 |   background-color: var(--color-white);
103 | }
104 | 
105 | .fade-enter-active,
106 | .fade-leave-active {
107 |   transition: opacity 0.5s ease;
108 | }
109 | .fade-enter-from,
110 | .fade-leave-to {
111 |   opacity: 0;
112 | }
113 | 
114 | @keyframes rotate {
115 |   to {
116 |     transform: rotate(360deg);
117 |   }
118 | }
119 | </style>
120 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import './assets/main.css'
2 | 
3 | import { createApp } from 'vue'
4 | import App from './App.vue'
5 | 
6 | createApp(App).mount('#app')
7 | 


--------------------------------------------------------------------------------
/src/sound.ts:
--------------------------------------------------------------------------------
  1 | import { state } from './store'
  2 | 
  3 | import deal from '@/assets/sounds/757328__steaq__ui-hover-item.mp3'
  4 | import click from '@/assets/sounds/159698__qubodup__scroll-step-hover-sound-for-user-interface.mp3'
  5 | import win from '@/assets/sounds/636649__cogfirestudios__ui-app.mp3'
  6 | import bust from '@/assets/sounds/636642__cogfirestudios__app-ui-puzzle-game.mp3'
  7 | import lose from '@/assets/sounds/636647__cogfirestudios__ui-app.mp3'
  8 | import blackjack from '@/assets/sounds/619832__cogfirestudios__puzzle-game-victory-melody.mp3'
  9 | import dealerBlackjack from '@/assets/sounds/619840__cogfirestudios__achievement-accomplish-jingle-app-ui.mp3'
 10 | import chipDown from '@/assets/sounds/636635__cogfirestudios__app-ui-puzzle-game.mp3'
 11 | import chipUp from '@/assets/sounds/636634__cogfirestudios__app-ui-puzzle-game.mp3'
 12 | import bank from '@/assets/sounds/636659__cogfirestudios__ui-achievement-puzzle-game-application.mp3'
 13 | import badHit from '@/assets/sounds/636677__cogfirestudios__app-ui-sound.mp3'
 14 | import goodHit from '@/assets/sounds/636674__cogfirestudios__app-ui-sound.mp3'
 15 | import blackjackBoom from '@/assets/sounds/636624__cogfirestudios__deep-hit.mp3'
 16 | import gameOver from '@/assets/sounds/636655__cogfirestudios__ui-achievement-puzzle-game-application.mp3'
 17 | import bet from '@/assets/sounds/677860__el_boss__ui-button-click-snap.mp3'
 18 | 
 19 | export enum Sounds {
 20 |   Deal,
 21 |   Click,
 22 |   Blackjack,
 23 |   BlackjackBoom,
 24 |   Bust,
 25 |   BadHit,
 26 |   GoodHit,
 27 |   Push,
 28 |   Win,
 29 |   Bet,
 30 |   Lose,
 31 |   Title,
 32 |   ChipDown,
 33 |   ChipUp,
 34 |   Bank,
 35 |   GameOver,
 36 |   DealerBlackjack,
 37 | }
 38 | 
 39 | const files = new Map<Sounds, string>([
 40 |   [Sounds.Deal, deal],
 41 |   [Sounds.Click, click],
 42 |   [Sounds.Blackjack, blackjack],
 43 |   [Sounds.BlackjackBoom, blackjackBoom],
 44 |   [Sounds.DealerBlackjack, dealerBlackjack],
 45 |   [Sounds.Bust, bust],
 46 |   [Sounds.Win, win],
 47 |   [Sounds.ChipDown, chipDown],
 48 |   [Sounds.ChipUp, chipUp],
 49 |   [Sounds.Bet, bet],
 50 |   [Sounds.Lose, lose],
 51 |   [Sounds.Bank, bank],
 52 |   [Sounds.BadHit, badHit],
 53 |   [Sounds.GoodHit, goodHit],
 54 |   [Sounds.GameOver, gameOver],
 55 | ])
 56 | 
 57 | const SOUND_PERCENT = 100 / files.size
 58 | 
 59 | const buffers = new Map<Sounds, AudioBuffer>()
 60 | const sources = new Map<Sounds, AudioBufferSourceNode>()
 61 | 
 62 | const ctx = new AudioContext()
 63 | const gainNode = ctx.createGain()
 64 | gainNode.connect(ctx.destination)
 65 | 
 66 | /** Resume the audio context (i.e. once a user clicks on the page) */
 67 | export const initSound = async (): Promise<void> => {
 68 |   if (ctx.state === 'suspended') await ctx.resume()
 69 | }
 70 | 
 71 | /** Fetch and decode an audio file. */
 72 | const loadSound = async (sound: Sounds): Promise<void> => {
 73 |   const response = await fetch(files.get(sound)!)
 74 |   const arrayBuffer = await response.arrayBuffer()
 75 |   const audioBuffer = await ctx.decodeAudioData(arrayBuffer)
 76 |   buffers.set(sound, audioBuffer)
 77 |   state.soundLoadProgress += SOUND_PERCENT
 78 | }
 79 | 
 80 | /** Load all audio files. */
 81 | export const loadSounds = (): Promise<void[]> => {
 82 |   return Promise.all(Array.from(files.keys()).map(loadSound))
 83 | }
 84 | loadSounds()
 85 | 
 86 | /** Stop a sound from playing. */
 87 | export const stopSound = (sound: Sounds) => {
 88 |   if (!sources.has(sound)) return
 89 |   const source = sources.get(sound)!
 90 |   source.stop()
 91 |   sources.delete(sound)
 92 | }
 93 | 
 94 | /** Play a sound.  If the sound is already playing, it will be restarted unless `restartIfPlaying` is false. */
 95 | export const playSound = async (sound: Sounds, restartIfPlaying = true) => {
 96 |   if (ctx.state === 'suspended') await ctx.resume()
 97 |   if (!buffers.has(sound)) return
 98 |   if (state.isMuted) return
 99 |   if (sources.has(sound)) {
100 |     if (!restartIfPlaying) return
101 |     stopSound(sound)
102 |   }
103 |   const source = ctx.createBufferSource()
104 |   source.buffer = buffers.get(sound)!
105 |   sources.set(sound, source)
106 |   source.addEventListener('ended', () => stopSound(sound))
107 |   source.connect(gainNode)
108 |   source.start()
109 | }
110 | 
111 | /** Set a sound to loop. */
112 | export const setLooping = (sound: Sounds, loop: boolean) => {
113 |   if (!sources.has(sound)) return
114 |   sources.get(sound)!.loop = loop
115 | }
116 | 


--------------------------------------------------------------------------------
/src/store.ts:
--------------------------------------------------------------------------------
  1 | import { generateShoe, shuffle } from '@/cards'
  2 | import type { GameState, HandResult, Player } from './types'
  3 | import { computed, nextTick, reactive } from 'vue'
  4 | import { Sounds, playSound } from './sound'
  5 | import { Hand } from './types'
  6 | 
  7 | const MINIMUM_BET = 1
  8 | const STARTING_BANK = 20
  9 | const NUMBER_OF_DECKS = 6
 10 | /** Reshuffle once less than 25% of the cards are left */
 11 | const SHUFFLE_THRESHOLD = 0.25
 12 | const INITIAL_PLAYERS: Player[] = [
 13 |   { isDealer: false, bank: STARTING_BANK, hands: [new Hand()] },
 14 |   { isDealer: true, bank: 0, hands: [new Hand()] },
 15 | ]
 16 | 
 17 | export const state = reactive<GameState>({
 18 |   shoe: generateShoe(NUMBER_OF_DECKS),
 19 |   cardsPlayed: 0,
 20 |   players: INITIAL_PLAYERS,
 21 |   activePlayer: null,
 22 |   activeHand: null,
 23 |   isDealing: true,
 24 |   showDealerHoleCard: false,
 25 |   isGameOver: false,
 26 |   isMuted: localStorage.getItem('isMuted') === 'true',
 27 |   soundLoadProgress: 0,
 28 | })
 29 | 
 30 | // Computed Properties
 31 | 
 32 | export const dealer = computed(() => state.players[state.players.length - 1])
 33 | 
 34 | const dealerHasBlackjack = computed(() => {
 35 |   return dealer.value.hands[0].isBlackjack
 36 | })
 37 | 
 38 | const dealerTotal = computed(() => dealer.value.hands[0].total)
 39 | 
 40 | const nextPlayer = computed(() => {
 41 |   if (!state.activePlayer || state.activePlayer === dealer.value) return null
 42 |   return state.players[state.players.indexOf(state.activePlayer) + 1]
 43 | })
 44 | 
 45 | export const canDoubleDown = computed(() => {
 46 |   if (state.isDealing) return false
 47 |   if ((state.activePlayer?.bank ?? 0) < (state.activeHand?.bet ?? 0)) return false
 48 |   return state.activeHand?.cards.length === 2 && state.activePlayer?.hands.length === 1
 49 | })
 50 | 
 51 | export const canSplit = computed(() => {
 52 |   if (state.isDealing) return false
 53 |   if ((state.activePlayer?.bank ?? 0) < (state.activeHand?.bet ?? 0)) return false
 54 |   return (
 55 |     state.activeHand?.cards.length === 2 &&
 56 |     state.activePlayer?.hands.length === 1 &&
 57 |     state.activeHand?.cards[0].rank === state.activeHand!.cards[1].rank
 58 |   )
 59 | })
 60 | 
 61 | export const resetBank = () => {
 62 |   state.players.forEach((p) => (p.bank = STARTING_BANK))
 63 | }
 64 | 
 65 | // Functions
 66 | 
 67 | /** Play a round of blackjack.  Reset hands, reshuffle, place bets, deal cards, and play the first turn. */
 68 | export async function playRound() {
 69 |   if (checkForGameOver()) return
 70 |   state.players.forEach((p) => (p.hands = [new Hand()]))
 71 |   state.showDealerHoleCard = false
 72 |   await placeBet(state.players[0], state.players[0].hands[0], MINIMUM_BET)
 73 |   await dealRound()
 74 |   if (dealerHasBlackjack.value) return endRound()
 75 |   playTurn(state.players[0])
 76 | }
 77 | 
 78 | /** If the player is bankrupt, end the game. */
 79 | function checkForGameOver(): boolean {
 80 |   if (state.players[0].bank < MINIMUM_BET) {
 81 |     playSound(Sounds.GameOver)
 82 |     state.isGameOver = true
 83 |     return true
 84 |   }
 85 |   return false
 86 | }
 87 | 
 88 | /** Draw a card from the shoe. */
 89 | function drawCard() {
 90 |   reshuffleIfNeeded()
 91 |   state.cardsPlayed++
 92 |   return state.shoe.shift()
 93 | }
 94 | 
 95 | /** Reshuffle the shoe if less than 25% of the cards are left. */
 96 | function reshuffleIfNeeded() {
 97 |   const remainingPercentage = 1 - state.cardsPlayed / (NUMBER_OF_DECKS * 52)
 98 |   if (remainingPercentage > SHUFFLE_THRESHOLD) return
 99 |   state.shoe = shuffle(state.shoe)
100 |   state.cardsPlayed = 0
101 | }
102 | 
103 | /** Deal two cards to each player */
104 | async function dealRound() {
105 |   for (let i = 0; i < 2; i++) {
106 |     for (const player of state.players) {
107 |       player.hands[0].cards.push(drawCard()!)
108 |       playSound(Sounds.Deal)
109 |       await sleep(600)
110 |     }
111 |   }
112 | }
113 | 
114 | /** Place a bet for the player. */
115 | async function placeBet(player: Player, hand: Hand, amount: number) {
116 |   state.isDealing = true
117 |   await nextTick()
118 |   player.bank -= amount
119 |   hand.bet += amount
120 |   playSound(Sounds.Bet)
121 |   await sleep()
122 | }
123 | 
124 | /** Start a player's turn by making them the active player and starting their first hand. */
125 | function playTurn(player: Player) {
126 |   state.activePlayer = player
127 |   if (player.isDealer) return playDealerHand(player.hands[0])
128 |   playHand(player.hands[0])
129 | }
130 | 
131 | /** Set a hand as the active hand. End immediately if the player has blackjack. Deal additional cards to split hands. */
132 | async function playHand(hand: Hand): Promise<void> {
133 |   state.isDealing = true
134 |   state.activeHand = hand
135 |   if (await checkForBlackjack(hand)) return
136 |   if (hand.cards.length === 1) {
137 |     // Newly split hand
138 |     await hit()
139 |     if (hand.cards[0].rank === 'A') return endHand() // Player cannot hit after splitting aces
140 |   }
141 |   state.isDealing = false
142 | }
143 | 
144 | /** Check if the player has blackjack. If so, award the player and end the hand. */
145 | async function checkForBlackjack(hand: Hand): Promise<boolean> {
146 |   if (hand.isBlackjack) {
147 |     hand.result = 'blackjack'
148 |     await sleep(100)
149 |     playSound(Sounds.BlackjackBoom)
150 |     await sleep(500)
151 |     playSound(Sounds.Blackjack)
152 |     await sleep(1200)
153 |     hand.bet *= 3
154 |     endHand()
155 |     return true
156 |   }
157 |   return false
158 | }
159 | 
160 | /** Play the dealer's hand. */
161 | async function playDealerHand(hand: Hand) {
162 |   state.isDealing = true
163 |   state.activeHand = hand
164 |   await revealDealerHoleCard()
165 |   const allPlayersDone = state.players.every(
166 |     (p) => p.isDealer || p.hands.every((h: Hand) => !!h.result),
167 |   )
168 |   if (allPlayersDone) return endRound()
169 |   if (dealerTotal.value < 17) {
170 |     await hit()
171 |     if (!dealer.value.hands[0].result) return playDealerHand(hand)
172 |   }
173 |   endRound()
174 | }
175 | 
176 | /** Deal one more card to the active hand, and check for 21 or a bust. */
177 | export async function hit() {
178 |   state.isDealing = true
179 |   state.activeHand!.cards.push(drawCard()!)
180 |   playSound(Sounds.Deal)
181 |   if (await checkForTwentyOne(state.activeHand!)) return
182 |   if (await checkForBust(state.activeHand!)) return
183 |   await sleep()
184 |   if (!state.activePlayer?.isDealer) state.isDealing = false
185 | }
186 | 
187 | /** Check if the player has 21.  If so, end the hand. */
188 | async function checkForTwentyOne(hand: Hand): Promise<boolean> {
189 |   if (hand.total === 21) {
190 |     if (!state.activePlayer?.isDealer) playSound(Sounds.GoodHit)
191 |     await sleep()
192 |     endHand()
193 |     return true
194 |   }
195 |   return false
196 | }
197 | 
198 | /** Check if the player has busted.  If so, end the hand. */
199 | async function checkForBust(hand: Hand): Promise<boolean> {
200 |   if (hand.isBust) {
201 |     if (!state.activePlayer?.isDealer) playSound(Sounds.BadHit)
202 |     await sleep()
203 |     state.activeHand = null
204 |     await sleep(300)
205 |     hand.result = 'bust'
206 |     if (!state.activePlayer?.isDealer) playSound(Sounds.Bust)
207 |     endHand()
208 |     return true
209 |   }
210 |   return false
211 | }
212 | 
213 | /** Split the active hand into two hands, and restart the player's turn. */
214 | export async function split(): Promise<void> {
215 |   if (!canSplit.value) return
216 |   state.isDealing = true
217 |   const bet = state.activeHand!.bet
218 |   const splitHands = [new Hand(bet), new Hand(0)]
219 |   splitHands[0].cards = state.activeHand!.cards.slice(0, 1)
220 |   splitHands[1].cards = state.activeHand!.cards.slice(1)
221 |   state.activeHand = null
222 |   await sleep()
223 |   state.activePlayer!.hands = splitHands
224 |   await placeBet(state.activePlayer!, state.activePlayer!.hands[1], bet)
225 |   playTurn(state.activePlayer!)
226 | }
227 | 
228 | /** Double the bet for the active hand, and hit only once. */
229 | export async function doubleDown(): Promise<void> {
230 |   if (!canDoubleDown.value) return
231 |   await placeBet(state.activePlayer!, state.activeHand!, state.activeHand!.bet)
232 |   await hit()
233 |   endHand()
234 | }
235 | 
236 | /** Advance to the next hand or player. */
237 | export async function endHand() {
238 |   const isSplit = state.activePlayer && state.activePlayer.hands.length > 1
239 |   if (isSplit && state.activePlayer?.hands[1].cards.length === 1) {
240 |     return playHand(state.activePlayer?.hands[1])
241 |   }
242 |   if (nextPlayer.value) playTurn(nextPlayer.value)
243 | }
244 | 
245 | /** Determine any remaining results, settle bets, collect winnings, and reset hands before starting a new round. */
246 | async function endRound() {
247 |   state.isDealing = true
248 |   if (!state.showDealerHoleCard) await revealDealerHoleCard()
249 |   if (dealerHasBlackjack.value) playSound(Sounds.DealerBlackjack)
250 |   state.activeHand = null
251 |   state.activePlayer = null
252 |   await determineResults()
253 |   await settleBets()
254 |   await collectWinnings()
255 |   await resetHands()
256 |   playRound()
257 | }
258 | 
259 | /** Reveal the dealer's hole card. */
260 | async function revealDealerHoleCard() {
261 |   if (state.showDealerHoleCard) return
262 |   await sleep()
263 |   playSound(Sounds.Deal)
264 |   state.showDealerHoleCard = true
265 |   await sleep()
266 | }
267 | 
268 | /** Determine the result for each hand (e.g. win, lose, push, blackjack, bust). */
269 | async function determineResults() {
270 |   for (const player of state.players) {
271 |     if (player.isDealer) continue
272 |     for (const hand of player.hands) {
273 |       if (hand.result) continue
274 |       if (dealerTotal.value > 21) hand.result = 'win'
275 |       else if (dealerTotal.value === hand.total) hand.result = 'push'
276 |       else if (dealerTotal.value < hand.total) hand.result = 'win'
277 |       else hand.result = 'lose'
278 |       playSoundForResult(hand.result)
279 |       await sleep()
280 |     }
281 |   }
282 | }
283 | 
284 | /** Play a sound for the result of a hand. */
285 | function playSoundForResult(result: HandResult) {
286 |   if (result === 'win') {
287 |     playSound(Sounds.Win)
288 |   } else if (result === 'push') {
289 |     playSound(Sounds.Push)
290 |   } else if (!dealerHasBlackjack.value) {
291 |     playSound(Sounds.Lose)
292 |   }
293 | }
294 | 
295 | /** Add each hand's winnings to the hand's bet amount (so it can be collected later).*/
296 | async function settleBets() {
297 |   let total = 0
298 |   for (const player of state.players) {
299 |     if (player.isDealer) continue
300 |     for (const hand of player.hands) {
301 |       // Blackjack is paid out immediately, so it is not handled here
302 |       if (hand.result === 'win') hand.bet *= 2
303 |       if (['lose', 'bust'].includes(hand.result!)) hand.bet = 0
304 |       total += hand.bet
305 |     }
306 |   }
307 |   playSound(total > 1 ? Sounds.ChipUp : Sounds.ChipDown)
308 |   await sleep()
309 | }
310 | 
311 | /** Collect the total winnings (from each hand's bet) and add it to the player's bank. */
312 | async function collectWinnings() {
313 |   for (const player of state.players) {
314 |     if (player.isDealer) continue
315 |     const total = player.hands.reduce((acc: number, hand: Hand) => acc + hand.bet, 0)
316 |     player.bank += total
317 |     if (total > 0) playSound(Sounds.Bank)
318 |     for (const hand of player.hands) hand.bet = 0
319 |   }
320 |   await sleep(300)
321 | }
322 | 
323 | /** Reset all hands to an initial state. */
324 | async function resetHands() {
325 |   for (const player of state.players) {
326 |     for (const hand of player.hands) {
327 |       state.shoe.push(...hand.cards)
328 |       hand.reset()
329 |     }
330 |   }
331 |   await sleep()
332 | }
333 | 
334 | /** Sleep for a given number of milliseconds. This paces the game and gives time for animations and sounds. */
335 | function sleep(ms: number = 900) {
336 |   return new Promise((resolve) => setTimeout(resolve, ms))
337 | }
338 | 


--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
 1 | import { CardSuits, CardValue } from '@/cards'
 2 | 
 3 | export type CardSuit = (typeof CardSuits)[number]
 4 | export type CardRank = keyof typeof CardValue
 5 | export type HandResult = 'win' | 'lose' | 'push' | 'blackjack' | 'bust'
 6 | 
 7 | export type Card = {
 8 |   rank: CardRank
 9 |   suit: CardSuit
10 |   index: number
11 | }
12 | 
13 | export type Player = {
14 |   name?: string
15 |   isDealer: boolean
16 |   bank: number
17 |   /** The player's hands (A player can have two hands after splitting) */
18 |   hands: Hand[]
19 | }
20 | 
21 | export type GameState = {
22 |   /** The shoe of cards */
23 |   shoe: Card[]
24 |   /** Number of cards played */
25 |   cardsPlayed: number
26 |   /** The players in the game, including the dealer */
27 |   players: Player[]
28 |   /** The player whose turn it is */
29 |   activePlayer: Player | null
30 |   /** The hand that is currently being played */
31 |   activeHand: Hand | null
32 |   /** Whether the dealer is dealing cards (preventing interaction) */
33 |   isDealing: boolean
34 |   /** Whether the dealer's hole card is face up */
35 |   showDealerHoleCard: boolean
36 |   /** Whether the sound is muted */
37 |   isMuted: boolean
38 |   /** Whether the game is over due to bankruptcy */
39 |   isGameOver: boolean
40 |   /** The download progress of the sound files */
41 |   soundLoadProgress: number
42 | }
43 | 
44 | export class Hand {
45 |   id: number
46 |   cards: Card[]
47 |   bet: number
48 |   result?: 'win' | 'lose' | 'push' | 'bust' | 'blackjack'
49 | 
50 |   constructor(bet = 0) {
51 |     this.id = new Date().getTime() + Math.random()
52 |     this.cards = []
53 |     this.bet = bet
54 |   }
55 | 
56 |   get total(): number {
57 |     let total = 0
58 |     let addedHighAce = false
59 |     for (const card of this.cards) {
60 |       total += CardValue[card.rank as CardRank]
61 |       if (card.rank === 'A' && !addedHighAce) {
62 |         total += 10
63 |         addedHighAce = true
64 |       }
65 |     }
66 |     if (total > 21 && addedHighAce) total -= 10
67 |     return total
68 |   }
69 | 
70 |   get isBust(): boolean {
71 |     return this.total > 21
72 |   }
73 | 
74 |   get isBlackjack(): boolean {
75 |     return this.total === 21 && this.cards.length === 2
76 |   }
77 | 
78 |   reset() {
79 |     this.cards = []
80 |     this.bet = 0
81 |     this.result = undefined
82 |   }
83 | }
84 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@vue/tsconfig/tsconfig.dom.json",
 3 |   "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
 4 |   "exclude": ["src/**/__tests__/*"],
 5 |   "compilerOptions": {
 6 |     "incremental": true,
 7 |     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
 8 | 
 9 |     "paths": {
10 |       "@/*": ["./src/*"]
11 |     }
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "files": [],
 3 |   "references": [
 4 |     {
 5 |       "path": "./tsconfig.node.json"
 6 |     },
 7 |     {
 8 |       "path": "./tsconfig.app.json"
 9 |     },
10 |     {
11 |       "path": "./tsconfig.vitest.json"
12 |     }
13 |   ]
14 | }
15 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@tsconfig/node22/tsconfig.json",
 3 |   "include": [
 4 |     "vite.config.*",
 5 |     "vitest.config.*",
 6 |     "cypress.config.*",
 7 |     "nightwatch.conf.*",
 8 |     "playwright.config.*"
 9 |   ],
10 |   "compilerOptions": {
11 |     "noEmit": true,
12 |     "incremental": true,
13 |     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
14 | 
15 |     "module": "ESNext",
16 |     "moduleResolution": "Bundler",
17 |     "types": ["node"]
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/tsconfig.vitest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.app.json",
 3 |   "include": ["src/**/__tests__/*", "env.d.ts"],
 4 |   "exclude": [],
 5 |   "compilerOptions": {
 6 |     "incremental": true,
 7 |     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.vitest.tsbuildinfo",
 8 | 
 9 |     "lib": [],
10 |     "types": ["node", "jsdom"]
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { fileURLToPath, URL } from 'node:url'
 2 | 
 3 | import { defineConfig } from 'vite'
 4 | import vue from '@vitejs/plugin-vue'
 5 | import vueDevTools from 'vite-plugin-vue-devtools'
 6 | 
 7 | // https://vite.dev/config/
 8 | export default defineConfig({
 9 |   base: '/vlackjack/',
10 |   plugins: [
11 |     vue(),
12 |     vueDevTools(),
13 |   ],
14 |   resolve: {
15 |     alias: {
16 |       '@': fileURLToPath(new URL('./src', import.meta.url))
17 |     },
18 |   },
19 | })
20 | 


--------------------------------------------------------------------------------
/vitest.config.ts:
--------------------------------------------------------------------------------
 1 | import { fileURLToPath } from 'node:url'
 2 | import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
 3 | import viteConfig from './vite.config'
 4 | 
 5 | export default mergeConfig(
 6 |   viteConfig,
 7 |   defineConfig({
 8 |     test: {
 9 |       environment: 'jsdom',
10 |       exclude: [...configDefaults.exclude, 'e2e/**'],
11 |       root: fileURLToPath(new URL('./', import.meta.url)),
12 |     },
13 |   }),
14 | )
15 | 


--------------------------------------------------------------------------------