├── src
    ├── vite-env.d.ts
    ├── assets
    │   ├── bg-pattern.png
    │   └── vue.svg
    ├── App.vue
    ├── plugins
    │   └── plausible.ts
    ├── components
    │   ├── icons
    │   │   ├── Icon0.vue
    │   │   ├── IconChevron.vue
    │   │   └── IconX.vue
    │   ├── Heading.vue
    │   ├── modals
    │   │   ├── ModalDisconnect.vue
    │   │   ├── ModalInstructions.vue
    │   │   ├── ModalCountdown.vue
    │   │   ├── ModalRoundGameWinner.vue
    │   │   └── ModalRoundWinner.vue
    │   ├── Players.vue
    │   ├── Player.vue
    │   ├── Score.vue
    │   ├── Button.vue
    │   ├── Modal.vue
    │   ├── GridCell.vue
    │   ├── InputText.vue
    │   ├── IconConfetti.vue
    │   ├── TurnTimer.vue
    │   ├── Logo.vue
    │   └── GridGame.vue
    ├── supabase.ts
    ├── style.css
    ├── main.ts
    ├── layouts
    │   └── LayoutDefault.vue
    ├── router.ts
    ├── pages
    │   ├── PageAbout.vue
    │   ├── PageNewGame.vue
    │   ├── PageWaiting.vue
    │   ├── PageJoinGame.vue
    │   ├── PageGame.vue
    │   └── PageHome.vue
    └── stores
    │   └── game.ts
├── public
    ├── og-image.png
    ├── favicon.svg
    └── vite.svg
├── .vscode
    └── extensions.json
├── postcss.config.cjs
├── .prettierrc.json
├── vite.config.ts
├── tsconfig.node.json
├── .editorconfig
├── .gitignore
├── tailwind.config.cjs
├── tsconfig.json
├── .eslintrc.cjs
├── package.json
├── README.md
└── index.html


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


--------------------------------------------------------------------------------
/public/og-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pixelhop/tic-tac-go/HEAD/public/og-image.png


--------------------------------------------------------------------------------
/src/assets/bg-pattern.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pixelhop/tic-tac-go/HEAD/src/assets/bg-pattern.png


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
3 | }
4 | 


--------------------------------------------------------------------------------
/postcss.config.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "useTabs": false,
3 |   "tabWidth": 2,
4 |   "singleQuote": true,
5 |   "printWidth": 120,
6 |   "trailingComma": "es5"
7 | }


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import vue from '@vitejs/plugin-vue'
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [vue()],
7 | })
8 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "module": "ESNext",
 5 |     "moduleResolution": "Node",
 6 |     "allowSyntheticDefaultImports": true
 7 |   },
 8 |   "include": ["vite.config.ts"]
 9 | }
10 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # EditorConfig is awesome: https://EditorConfig.org
 2 | 
 3 | # top-most EditorConfig file
 4 | root = true
 5 | 
 6 | [*]
 7 | indent_style = space
 8 | indent_size = 2
 9 | end_of_line = lf
10 | charset = utf-8
11 | trim_trailing_whitespace = false
12 | insert_final_newline = false


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts"></script>
 2 | 
 3 | <template>
 4 |   <div class="h-full w-full flex items-center justify-center">
 5 |     <div class="max-w-sm max-h-[667px] h-full w-full">
 6 |       <router-view></router-view>
 7 |     </div>
 8 |   </div>
 9 | </template>
10 | 
11 | <style scoped></style>
12 | 


--------------------------------------------------------------------------------
/src/plugins/plausible.ts:
--------------------------------------------------------------------------------
 1 | import Plausible, { PlausibleOptions } from 'plausible-tracker';
 2 | 
 3 | export default {
 4 |   install: (app: any, options: PlausibleOptions) => {
 5 |     const { enableAutoPageviews } = Plausible(options);
 6 | 
 7 |     enableAutoPageviews();
 8 | 
 9 |     app.provide('plausible');
10 |   },
11 | };
12 | 


--------------------------------------------------------------------------------
/src/components/icons/Icon0.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <svg viewBox="0 0 75 75" fill="none" xmlns="http://www.w3.org/2000/svg">
3 |     <circle cx="38" cy="38" r="22" fill="#02FFFF" fill-opacity="0.2" />
4 |     <circle cx="38" cy="38" r="15" stroke="white" stroke-width="4" />
5 |     <circle cx="38" cy="38" r="6" stroke="#02FFFF" stroke-width="2" />
6 |   </svg>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/src/supabase.ts:
--------------------------------------------------------------------------------
 1 | import { createClient } from '@supabase/supabase-js';
 2 | 
 3 | const supabaseUrl = 'https://shzuzglpuckyfwbstipu.supabase.co';
 4 | const supabaseKey = import.meta.env.VITE_SUPABASE_KEY;
 5 | export const supabase = createClient(supabaseUrl, supabaseKey, {
 6 |   realtime: {
 7 |     params: {
 8 |       eventsPerSecond: 20,
 9 |     },
10 |   },
11 | });
12 | 


--------------------------------------------------------------------------------
/src/components/icons/IconChevron.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 3 |     <path
 4 |       d="M6 6L12 12L6 18M12.8571 6L18.8571 12L12.8571 18V6Z"
 5 |       stroke="white"
 6 |       stroke-width="1.71429"
 7 |       stroke-linecap="round"
 8 |       stroke-linejoin="round"
 9 |     />
10 |   </svg>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/.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 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 
26 | .env


--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | html,
 6 | body,
 7 | #app {
 8 |   height: 100%;
 9 | }
10 | 
11 | body {
12 |   font-family: 'Orbitron', sans-serif;
13 |   background-color: theme('colors.black');
14 |   background-image: url('./assets/bg-pattern.png');
15 |   background-position: center center;
16 |   background-repeat: repeat;
17 |   color: theme('colors.white');
18 | }
19 | 


--------------------------------------------------------------------------------
/src/assets/vue.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>


--------------------------------------------------------------------------------
/src/components/Heading.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | withDefaults(
 3 |   defineProps<{
 4 |     as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 5 |     border?: boolean;
 6 |   }>(),
 7 |   {
 8 |     as: 'h2',
 9 |     border: false,
10 |   }
11 | );
12 | </script>
13 | 
14 | <template>
15 |   <component
16 |     :is="as"
17 |     class="text-2xl font-medium tracking-wider text-white uppercase"
18 |     :class="{ 'border border-orange inline-block px-2': border }"
19 |     ><slot></slot
20 |   ></component>
21 | </template>
22 | 
23 | <style scoped></style>
24 | 


--------------------------------------------------------------------------------
/tailwind.config.cjs:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx,vue}'],
 4 |   theme: {
 5 |     extend: {
 6 |       colors: {
 7 |         black: '#000201',
 8 |         orange: {
 9 |           DEFAULT: '#FF7615',
10 |         },
11 |         blue: {
12 |           DEFAULT: '#02FFFF',
13 |         },
14 |       },
15 |       dropShadow: {
16 |         'blue-sm': '0px 0px 5px #02FFFF',
17 |         blue: '0px 0px 11px #02FFFF',
18 |       },
19 |     },
20 |   },
21 |   plugins: [],
22 | };
23 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ESNext",
 4 |     "useDefineForClassFields": true,
 5 |     "module": "ESNext",
 6 |     "moduleResolution": "Node",
 7 |     "strict": true,
 8 |     "jsx": "preserve",
 9 |     "resolveJsonModule": true,
10 |     "isolatedModules": true,
11 |     "esModuleInterop": true,
12 |     "lib": ["ESNext", "DOM"],
13 |     "skipLibCheck": true,
14 |     "noEmit": true
15 |   },
16 |   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
17 |   "references": [{ "path": "./tsconfig.node.json" }]
18 | }
19 | 


--------------------------------------------------------------------------------
/src/components/modals/ModalDisconnect.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import Button from '../Button.vue';
 3 | import Modal from '../Modal.vue';
 4 | </script>
 5 | 
 6 | <template>
 7 |   <Modal title="Disconnected">
 8 |     <div class="border border-gray-400 p-6 uppercase space-y-4 tracking-wider mb-6">
 9 |       <p>Oh no, you have been disconnected from the other player!</p>
10 |     </div>
11 | 
12 |     <div class="flex justify-center">
13 |       <Button as="router-link" to="/">Back home?</Button>
14 |     </div>
15 |   </Modal>
16 | </template>
17 | 
18 | <style scoped></style>
19 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue';
 2 | import { createPinia } from 'pinia';
 3 | import '@fontsource/orbitron';
 4 | import './style.css';
 5 | import App from './App.vue';
 6 | import router from './router';
 7 | import plausible from './plugins/plausible';
 8 | 
 9 | const app = createApp(App);
10 | 
11 | if (import.meta.env.VITE_PLAUSIBLE_DOMAIN) {
12 |   app.use(plausible, {
13 |     domain: import.meta.env.VITE_PLAUSIBLE_DOMAIN,
14 |     apiHost: `https://${import.meta.env.VITE_PLAUSIBLE_DOMAIN}`,
15 |   });
16 | }
17 | app.use(createPinia());
18 | app.use(router);
19 | 
20 | app.mount('#app');
21 | 


--------------------------------------------------------------------------------
/public/favicon.svg:
--------------------------------------------------------------------------------
 1 | <svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0_792_521)">
 3 | <rect width="128" height="128" rx="10" fill="#0C0E0D"/>
 4 | <circle cx="64.6001" cy="65.6" r="48.4" fill="#02FFFF" fill-opacity="0.2"/>
 5 | <circle cx="64.6001" cy="65.6" r="33" stroke="white" stroke-width="8.8"/>
 6 | <circle cx="64.6001" cy="65.6" r="13.2" stroke="#02FFFF" stroke-width="4.4"/>
 7 | </g>
 8 | <defs>
 9 | <clipPath id="clip0_792_521">
10 | <rect width="128" height="128" rx="10" fill="white"/>
11 | </clipPath>
12 | </defs>
13 | </svg>
14 | 


--------------------------------------------------------------------------------
/src/components/Players.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { storeToRefs } from 'pinia';
 3 | import Player from './Player.vue';
 4 | import { useGameStore } from '../stores/game';
 5 | 
 6 | const store = useGameStore();
 7 | const { player1Name, player2Name, game } = storeToRefs(store);
 8 | </script>
 9 | 
10 | <template>
11 |   <div class="flex justify-between items-center">
12 |     <Player :name="player1Name" :player="1" orientation="left" :class="{ 'opacity-30': game.currentPlayer !== 1 }" />
13 |     <Player :name="player2Name" :player="2" orientation="right" :class="{ 'opacity-30': game.currentPlayer !== 2 }" />
14 |   </div>
15 | </template>
16 | 
17 | <style scoped></style>
18 | 


--------------------------------------------------------------------------------
/src/components/Player.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import Icon0 from './icons/Icon0.vue';
 3 | import IconX from './icons/IconX.vue';
 4 | 
 5 | defineProps<{
 6 |   name: string;
 7 |   player: 1 | 2;
 8 |   orientation: 'left' | 'right';
 9 | }>();
10 | </script>
11 | 
12 | <template>
13 |   <div class="flex items-center" :class="{ 'flex-row-reverse': orientation === 'right' }">
14 |     <Icon0 v-if="player === 1" class="h-14 w-14" />
15 |     <IconX v-if="player === 2" class="h-14 w-14" />
16 |     <div :class="{ 'text-right': orientation === 'right' }">
17 |       <p class="uppercase font-medium text-gray-400 text-xs">Player {{ player }}</p>
18 |       <h4 class="uppercase font-medium text-white tracking-[0.25em]">{{ name }}</h4>
19 |     </div>
20 |   </div>
21 | </template>
22 | 
23 | <style scoped></style>
24 | 


--------------------------------------------------------------------------------
/src/layouts/LayoutDefault.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import Logo from '../components/Logo.vue';
 3 | 
 4 | withDefaults(
 5 |   defineProps<{
 6 |     showFooter?: boolean;
 7 |     animateLogo?: boolean;
 8 |   }>(),
 9 |   {
10 |     showFooter: true,
11 |     animateLogo: false,
12 |   }
13 | );
14 | </script>
15 | 
16 | <template>
17 |   <div class="h-full flex flex-col">
18 |     <Logo :animate-in="animateLogo" class="mt-4" />
19 |     <main class="h-full relative">
20 |       <slot />
21 |     </main>
22 |     <footer v-if="showFooter" class="text-center uppercase mb-3">
23 |       <p class="text-white text-xs">Built in the future by</p>
24 |       <a class="text-blue drop-shadow-blue" href="https://pixelhop.io" target="_blank">Pixelhop</a>
25 |     </footer>
26 |   </div>
27 | </template>
28 | 
29 | <style scoped></style>
30 | 


--------------------------------------------------------------------------------
/src/components/Score.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { storeToRefs } from 'pinia';
 3 | import { useGameStore } from '../stores/game';
 4 | 
 5 | const store = useGameStore();
 6 | const { game } = storeToRefs(store);
 7 | </script>
 8 | 
 9 | <template>
10 |   <div class="flex flex-col items-center">
11 |     <h4 class="uppercase font-medium text-white tracking-[0.25em] mb-1">Score</h4>
12 |     <div class="flex gap-2 mb-2">
13 |       <div
14 |         v-for="(round, index) in game.roundWinners"
15 |         :key="index"
16 |         class="h-4 w-4"
17 |         :class="{
18 |           'bg-gray-300': !round,
19 |           'bg-blue': round === 1,
20 |           'bg-orange': round === 2,
21 |         }"
22 |       ></div>
23 |     </div>
24 |     <p class="uppercase font-medium text-gray-400 text-xs">Best of 5</p>
25 |   </div>
26 | </template>
27 | 
28 | <style scoped></style>
29 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true,
 5 |     browser: true,
 6 |     'vue/setup-compiler-macros': true,
 7 |   },
 8 |   settings: {
 9 |     'import/resolver': {
10 |       node: {
11 |         extensions: ['.js', '.jsx', '.ts', '.tsx'],
12 |       },
13 |     },
14 |   },
15 |   extends: [
16 |     'eslint:recommended',
17 |     'plugin:@typescript-eslint/recommended',
18 |     'plugin:vue/vue3-recommended',
19 |     'airbnb-base',
20 |     'prettier',
21 |   ],
22 |   parserOptions: {
23 |     ecmaVersion: 'latest',
24 |     parser: '@typescript-eslint/parser',
25 |     sourceType: 'module',
26 |   },
27 |   plugins: ['vue', '@typescript-eslint', 'prettier'],
28 |   rules: {
29 |     'vue/script-setup-uses-vars': 'error',
30 |     'prettier/prettier': 'error',
31 |     'import/extensions': 'off',
32 |     'import/prefer-default-export': 'off',
33 |     'import/no-extraneous-dependencies': [
34 |       'error',
35 |       {
36 |         devDependencies: ['.storybook/**', 'stories/**', '**/*.stories.*'],
37 |       },
38 |     ],
39 |   },
40 | };
41 | 


--------------------------------------------------------------------------------
/src/components/modals/ModalInstructions.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { storeToRefs } from 'pinia';
 3 | import Modal from '../Modal.vue';
 4 | import Button from '../Button.vue';
 5 | import { useGameStore } from '../../stores/game';
 6 | 
 7 | const store = useGameStore();
 8 | const { player1Name, player2Name, isPlayer1, imReady } = storeToRefs(store);
 9 | </script>
10 | 
11 | <template>
12 |   <Modal title="Instructions">
13 |     <div class="border border-gray-400 p-6 uppercase space-y-4 tracking-wider mb-6">
14 |       <p>Take your turn quickly before the timer runs out.</p>
15 | 
16 |       <p>If the timer RUNs out your marker will be placed randomly!</p>
17 | 
18 |       <p>Create sets of 3 markers Vertically, Horizontally or Diagonally.</p>
19 | 
20 |       <p>The first to win 3 rounds wins.</p>
21 |     </div>
22 | 
23 |     <div class="flex justify-center">
24 |       <Button v-if="!imReady" @click="store.ready">I'm ready</Button>
25 |       <p v-if="imReady" class="text-white">Ready: Waiting for {{ isPlayer1 ? player2Name : player1Name }}</p>
26 |     </div>
27 |   </Modal>
28 | </template>
29 | 
30 | <style scoped></style>
31 | 


--------------------------------------------------------------------------------
/src/router.ts:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHistory } from 'vue-router';
 2 | import PageHome from './pages/PageHome.vue';
 3 | import PageNewGame from './pages/PageNewGame.vue';
 4 | import PageWaiting from './pages/PageWaiting.vue';
 5 | import PageJoinGame from './pages/PageJoinGame.vue';
 6 | import PageGame from './pages/PageGame.vue';
 7 | import PageAbout from './pages/PageAbout.vue';
 8 | 
 9 | const routes = [
10 |   { path: '/', component: PageHome },
11 |   { path: '/new-game', component: PageNewGame },
12 |   { path: '/waiting', component: PageWaiting },
13 |   { path: '/join-game', component: PageJoinGame },
14 |   { path: '/game', component: PageGame },
15 |   { path: '/about', component: PageAbout },
16 | ];
17 | 
18 | // 3. Create the router instance and pass the `routes` option
19 | // You can pass in additional options here, but let's
20 | // keep it simple for now.
21 | const router = createRouter({
22 |   // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
23 |   history: createWebHistory(),
24 |   routes, // short for `routes: routes`
25 | });
26 | 
27 | export default router;
28 | 


--------------------------------------------------------------------------------
/src/components/Button.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { computed } from 'vue';
 3 | 
 4 | const props = withDefaults(
 5 |   defineProps<{
 6 |     theme?: 'primary' | 'secondary';
 7 |     as?: 'button' | 'router-link';
 8 |     disabled?: boolean;
 9 |     type?: 'button' | 'submit';
10 |   }>(),
11 |   {
12 |     theme: 'primary',
13 |     as: 'button',
14 |     disabled: false,
15 |     type: 'button',
16 |   }
17 | );
18 | 
19 | const classes = computed(() => {
20 |   const classMap = {
21 |     primary: 'border-blue drop-shadow-blue hover:bg-blue hover:bg-opacity-10',
22 |     secondary: 'border-white hover:bg-white hover:bg-opacity-10',
23 |   };
24 | 
25 |   let theClasses = `${classMap[props.theme]}`;
26 | 
27 |   if (props.disabled) {
28 |     theClasses += ' opacity-50';
29 |   }
30 | 
31 |   return theClasses;
32 | });
33 | </script>
34 | 
35 | <template>
36 |   <component
37 |     v-bind="$attrs"
38 |     :is="as"
39 |     class="font-medium text-sm text-white border uppercase px-4 py-1 transition-colors appearance-none text-center flex items-center justify-center"
40 |     :class="classes"
41 |     :type="type"
42 |     ><slot></slot
43 |   ></component>
44 | </template>
45 | 
46 | <style scoped></style>
47 | 


--------------------------------------------------------------------------------
/src/components/Modal.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import Heading from './Heading.vue';
 3 | 
 4 | defineProps<{
 5 |   title: string;
 6 | }>();
 7 | </script>
 8 | 
 9 | <template>
10 |   <Transition name="modal" appear>
11 |     <div class="fixed inset-0 bg-black bg-opacity-90 p-6 text-center z-30">
12 |       <div class="modal-container h-full w-full flex items-center justify-center">
13 |         <div class="max-w-sm max-h-[667px] h-full w-full flex flex-col justify-center">
14 |           <div class="modal-heading mb-6">
15 |             <Heading border>{{ title }}</Heading>
16 |           </div>
17 |           <div class="modal-content h-full">
18 |             <slot></slot>
19 |           </div>
20 |         </div>
21 |       </div>
22 |     </div>
23 |   </Transition>
24 | </template>
25 | 
26 | <style scoped>
27 | .modal-enter-active,
28 | .modal-leave-active {
29 |   transition: opacity 0.5s ease;
30 | }
31 | 
32 | .modal-enter-from,
33 | .modal-leave-to {
34 |   opacity: 0;
35 | }
36 | 
37 | .modal-enter-active .modal-container,
38 | .modal-leave-active .modal-container {
39 |   transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
40 | }
41 | 
42 | .modal-enter-from .modal-container,
43 | .modal-leave-to .modal-container {
44 |   transform: translateY(100%);
45 | }
46 | </style>
47 | 


--------------------------------------------------------------------------------
/src/components/GridCell.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { computed } from 'vue';
 3 | import IconX from './icons/IconX.vue';
 4 | import Icon0 from './icons/Icon0.vue';
 5 | 
 6 | const props = defineProps<{
 7 |   contents?: 'x' | '0';
 8 |   highlight?: boolean;
 9 | }>();
10 | 
11 | const highlightClasses = computed(() => {
12 |   if (props.highlight && props.contents === 'x') {
13 |     return 'bg-orange bg-opacity-10';
14 |   }
15 | 
16 |   if (props.highlight && props.contents === '0') {
17 |     return 'bg-blue bg-opacity-10';
18 |   }
19 | 
20 |   return '';
21 | });
22 | </script>
23 | 
24 | <template>
25 |   <button class="appearance-none flex items-center justify-center" :class="highlightClasses">
26 |     <transition name="fade">
27 |       <IconX v-if="contents === 'x'" class="h-16 w-16" />
28 |     </transition>
29 |     <transition name="fade">
30 |       <Icon0 v-if="contents === '0'" class="h-16 w-16" />
31 |     </transition>
32 |   </button>
33 | </template>
34 | 
35 | <style scoped>
36 | .fade-enter-active,
37 | .fade-leave-active {
38 |   transform-origin: center;
39 |   transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
40 | }
41 | 
42 | .fade-enter-from,
43 | .fade-leave-to {
44 |   opacity: 0;
45 |   transform: scale(0);
46 | }
47 | </style>
48 | 


--------------------------------------------------------------------------------
/src/components/modals/ModalCountdown.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { storeToRefs } from 'pinia';
 3 | import { useIntervalFn } from '@vueuse/core';
 4 | import dayjs from 'dayjs';
 5 | import { computed, ref } from 'vue';
 6 | import Modal from '../Modal.vue';
 7 | import Player from '../Player.vue';
 8 | import { useGameStore } from '../../stores/game';
 9 | 
10 | const store = useGameStore();
11 | const { game, player1Name, player2Name } = storeToRefs(store);
12 | 
13 | const playerName = computed(() => (game.value.currentPlayer === 1 ? player1Name.value : player2Name.value));
14 | 
15 | const secondsRemaining = ref(1000);
16 | useIntervalFn(() => {
17 |   secondsRemaining.value = dayjs(game.value.roundStartTime).diff(dayjs(), 'seconds');
18 | }, 100);
19 | </script>
20 | 
21 | <template>
22 |   <Modal :title="`Round ${game.round}`">
23 |     <div class="h-full flex flex-col items-center justify-center">
24 |       <Player class="-ml-4" :name="playerName" :player="game.currentPlayer" orientation="left" />
25 |       <p class="uppercase font-medium text-white tracking-[0.25em]">Will go first</p>
26 | 
27 |       <div>
28 |         <p class="text-[150px] text-white font-medium">{{ secondsRemaining }}</p>
29 |       </div>
30 |     </div>
31 |   </Modal>
32 | </template>
33 | 
34 | <style scoped></style>
35 | 


--------------------------------------------------------------------------------
/src/components/InputText.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { toRef } from 'vue';
 3 | import { useField } from 'vee-validate';
 4 | 
 5 | const props = withDefaults(
 6 |   defineProps<{
 7 |     name: string;
 8 |     label?: string;
 9 |     placeholder?: string;
10 |     type?: 'text' | 'number';
11 |     value?: string | number;
12 |   }>(),
13 |   {
14 |     label: undefined,
15 |     placeholder: undefined,
16 |     type: 'text',
17 |     value: undefined,
18 |   }
19 | );
20 | 
21 | const name = toRef(props, 'name');
22 | 
23 | const {
24 |   value: inputValue,
25 |   errorMessage,
26 |   handleBlur,
27 |   handleChange,
28 | } = useField(name, undefined, {
29 |   initialValue: props.value,
30 | });
31 | </script>
32 | 
33 | <template>
34 |   <div>
35 |     <label v-if="label" class="text-xs text-gray-400 uppercase mb-2 block" :for="name">{{ label }}</label>
36 |     <input
37 |       :id="name"
38 |       class="border border-blue bg-blue bg-opacity-10 w-full px-2 py-2 rounded-none focus:outline-none focus:drop-shadow-blue"
39 |       :type="type"
40 |       :value="inputValue"
41 |       :placeholder="placeholder"
42 |       @input="handleChange"
43 |       @blur="handleBlur"
44 |     />
45 |     <p class="text-red-600 mt-1 text-xs">{{ errorMessage }}</p>
46 |   </div>
47 | </template>
48 | 
49 | <style scoped></style>
50 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tic-tac-go",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vue-tsc && vite build",
 9 |     "preview": "vite preview"
10 |   },
11 |   "dependencies": {
12 |     "@fontsource/orbitron": "^4.5.11",
13 |     "@supabase/supabase-js": "^2.4.1",
14 |     "@vueuse/core": "^9.11.1",
15 |     "animejs": "^3.2.1",
16 |     "dayjs": "^1.11.7",
17 |     "pinia": "^2.0.29",
18 |     "plausible-tracker": "^0.3.8",
19 |     "unique-names-generator": "^4.7.1",
20 |     "vee-validate": "^4.7.3",
21 |     "vue": "^3.2.45",
22 |     "vue-router": "4",
23 |     "yup": "^0.32.11"
24 |   },
25 |   "devDependencies": {
26 |     "@types/animejs": "^3.1.7",
27 |     "@typescript-eslint/eslint-plugin": "^5.48.2",
28 |     "@typescript-eslint/parser": "^5.48.2",
29 |     "@vitejs/plugin-vue": "^4.0.0",
30 |     "autoprefixer": "^10.4.13",
31 |     "eslint": "^8.32.0",
32 |     "eslint-config-airbnb-base": "^15.0.0",
33 |     "eslint-config-prettier": "^8.6.0",
34 |     "eslint-plugin-import": "^2.27.5",
35 |     "eslint-plugin-prettier": "^4.2.1",
36 |     "eslint-plugin-vue": "^9.9.0",
37 |     "postcss": "^8.4.21",
38 |     "prettier": "^2.8.3",
39 |     "tailwindcss": "^3.2.4",
40 |     "typescript": "^4.9.3",
41 |     "vite": "^4.0.0",
42 |     "vue-tsc": "^1.0.11"
43 |   }
44 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Tic Tac Go
 2 | 
 3 | This project was built as part of a tutorial series demonstrating how to build a real-time game with Supabase and Vue.
 4 | 
 5 | ## Recommended IDE Setup
 6 | 
 7 | - [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
 8 | 
 9 | ## Type Support For `.vue` Imports in TS
10 | 
11 | TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
12 | 
13 | If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
14 | 
15 | 1. Disable the built-in TypeScript Extension
16 |    1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
17 |    2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
18 | 2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
19 | 


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/src/components/IconConfetti.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import anime from 'animejs/lib/anime.es';
 3 | import { onMounted } from 'vue';
 4 | import IconX from './icons/IconX.vue';
 5 | import Icon0 from './icons/Icon0.vue';
 6 | 
 7 | defineProps<{ player: 1 | 2 }>();
 8 | 
 9 | onMounted(() => {
10 |   anime({
11 |     targets: '.winner-icon',
12 |     // opacity: [1, 1, 1, 1, 0],
13 |     translateX: () => [0, anime.random(150, 240)],
14 |     scale: () => [0, anime.random(0.8, 1)],
15 |     rotate: () => [0, anime.random(0, 360)],
16 |     duration: 600,
17 |     delay: () => anime.random(1200, 1300),
18 |     easing: 'easeOutCubic',
19 |     loop: false,
20 |   });
21 | });
22 | 
23 | const numIcons = 15;
24 | </script>
25 | 
26 | <template>
27 |   <div v-if="player === 1" class="absolute inset-0 z-10">
28 |     <div
29 |       v-for="index in numIcons"
30 |       :key="index"
31 |       class="winner-icon-container absolute left-1/2 top-1/2"
32 |       :style="`transform: translateX(-50%) translateY(-50%) rotate(${Math.random() * 360}deg)`"
33 |     >
34 |       <Icon0 class="winner-icon h-24" />
35 |     </div>
36 |   </div>
37 |   <div v-else-if="player === 2" class="absolute inset-0 z-10">
38 |     <div
39 |       v-for="index in numIcons"
40 |       :key="index"
41 |       class="winner-icon-container absolute left-1/2 top-1/2"
42 |       :style="`transform: translateX(-50%) translateY(-50%) rotate(${Math.random() * 360}deg)`"
43 |     >
44 |       <IconX class="winner-icon h-24" />
45 |     </div>
46 |   </div>
47 | </template>
48 | 
49 | <style scoped></style>
50 | 


--------------------------------------------------------------------------------
/src/pages/PageAbout.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import Heading from '../components/Heading.vue';
 3 | import LayoutDefault from '../layouts/LayoutDefault.vue';
 4 | import Button from '../components/Button.vue';
 5 | import IconChevron from '../components/icons/IconChevron.vue';
 6 | </script>
 7 | 
 8 | <template>
 9 |   <LayoutDefault>
10 |     <div class="py-12 px-6 flex flex-col justify-between h-full">
11 |       <Heading class="text-center">About</Heading>
12 | 
13 |       <div class="space-y-6">
14 |         <p>
15 |           Tic Tac Go is a game created by
16 |           <a class="underline text-blue" target="_blank" href="https://pixelhop.io">Pixelhop</a> for a tutorial series
17 |           on how to create a real-time game with
18 |           <a class="underline text-blue" target="_blank" href="https://supabase.com">supabase</a> and
19 |           <a class="underline text-blue" target="_blank" href="https://vuejs.org">Vue.js</a>
20 |         </p>
21 | 
22 |         <p>
23 |           If you would like to learn how to build something similar, read the tutorial series here:
24 |           <a class="underline text-blue" href="https://pixelhop.io/writing" target="_blank"
25 |             >Build a real-time game with supabase and Vue</a
26 |           >
27 |         </p>
28 |       </div>
29 | 
30 |       <div class="flex justify-between">
31 |         <Button as="router-link" to="/" theme="secondary"><IconChevron class="h-5 rotate-180 mr-2" /> Back</Button>
32 |       </div>
33 |     </div>
34 |   </LayoutDefault>
35 | </template>
36 | 
37 | <style scoped></style>
38 | 


--------------------------------------------------------------------------------
/src/pages/PageNewGame.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { useForm } from 'vee-validate';
 3 | import { object, string } from 'yup';
 4 | import Heading from '../components/Heading.vue';
 5 | import LayoutDefault from '../layouts/LayoutDefault.vue';
 6 | import InputText from '../components/InputText.vue';
 7 | import Button from '../components/Button.vue';
 8 | import IconChevron from '../components/icons/IconChevron.vue';
 9 | import { useGameStore } from '../stores/game';
10 | 
11 | const { newGame } = useGameStore();
12 | 
13 | const validationSchema = object({
14 |   name: string().required('Player name is required').max(20, 'Player name must be less than 20 characters'),
15 | });
16 | 
17 | const { errors, values, handleSubmit } = useForm({
18 |   validationSchema,
19 | });
20 | 
21 | const createGame = handleSubmit(() => {
22 |   newGame(values.name);
23 | });
24 | </script>
25 | 
26 | <template>
27 |   <LayoutDefault>
28 |     <div class="py-12 px-6 flex flex-col justify-between h-full">
29 |       <Heading class="text-center">New game</Heading>
30 | 
31 |       <form @submit="createGame">
32 |         <InputText name="name" label="Enter player name:" />
33 |       </form>
34 | 
35 |       <div class="flex justify-between">
36 |         <Button as="router-link" to="/" theme="secondary"><IconChevron class="h-5 rotate-180 mr-2" /> Back</Button>
37 |         <Button :disabled="!values.name || !!Object.keys(errors).length" @click="createGame"
38 |           >Next <IconChevron class="h-5 ml-2"
39 |         /></Button>
40 |       </div>
41 |     </div>
42 |   </LayoutDefault>
43 | </template>
44 | 
45 | <style scoped></style>
46 | 


--------------------------------------------------------------------------------
/src/pages/PageWaiting.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { storeToRefs } from 'pinia';
 3 | import { useClipboard } from '@vueuse/core';
 4 | import { useRouter } from 'vue-router';
 5 | import { onBeforeMount } from 'vue';
 6 | import Heading from '../components/Heading.vue';
 7 | import LayoutDefault from '../layouts/LayoutDefault.vue';
 8 | import Button from '../components/Button.vue';
 9 | import { useGameStore } from '../stores/game';
10 | 
11 | const router = useRouter();
12 | const store = useGameStore();
13 | const { game } = storeToRefs(store);
14 | 
15 | onBeforeMount(() => {
16 |   if (!game.value.code) {
17 |     router.push('/');
18 |   }
19 | });
20 | 
21 | const { copy, copied } = useClipboard({ source: game.value.code });
22 | </script>
23 | 
24 | <template>
25 |   <LayoutDefault>
26 |     <div class="py-12 px-6 flex flex-col justify-between h-full tracking-wide">
27 |       <Heading class="text-center"
28 |         >Waiting for<br />
29 |         player 2</Heading
30 |       >
31 | 
32 |       <div class="text-center">
33 |         <p class="text-xs text-gray-400 uppercase mb-1">Game code</p>
34 |         <p class="text-blue text-xl font-medium uppercase" @click="copy(game.code)">{{ game.code }}</p>
35 |         <p v-if="copied" class="text-xs text-white">Copied!</p>
36 |         <p v-else class="text-xs text-white">click to copy</p>
37 |       </div>
38 | 
39 |       <p class="uppercase text-center">
40 |         Send player 2 Your game code so They can join. The game will start once they join.
41 |       </p>
42 | 
43 |       <div class="flex justify-center">
44 |         <Button as="router-link" to="/" theme="secondary">Quit</Button>
45 |       </div>
46 |     </div>
47 |   </LayoutDefault>
48 | </template>
49 | 
50 | <style scoped></style>
51 | 


--------------------------------------------------------------------------------
/src/pages/PageJoinGame.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { useForm } from 'vee-validate';
 3 | import { object, string } from 'yup';
 4 | import Heading from '../components/Heading.vue';
 5 | import LayoutDefault from '../layouts/LayoutDefault.vue';
 6 | import InputText from '../components/InputText.vue';
 7 | import Button from '../components/Button.vue';
 8 | import IconChevron from '../components/icons/IconChevron.vue';
 9 | import { useGameStore } from '../stores/game';
10 | 
11 | const { joinGame } = useGameStore();
12 | 
13 | const validationSchema = object({
14 |   name: string().required('Player name is required').max(20, 'Player name must be less than 20 characters'),
15 |   code: string().required('Game code is required'),
16 | });
17 | 
18 | const { errors, values, handleSubmit } = useForm({
19 |   validationSchema,
20 | });
21 | 
22 | const join = handleSubmit(() => {
23 |   joinGame(values.name, values.code);
24 | });
25 | </script>
26 | 
27 | <template>
28 |   <LayoutDefault>
29 |     <form class="h-full" @submit="join">
30 |       <div class="py-12 px-6 flex flex-col justify-between h-full">
31 |         <Heading class="text-center">Join game</Heading>
32 | 
33 |         <div class="space-y-4">
34 |           <InputText name="name" label="Enter player name:" />
35 |           <InputText name="code" label="Enter game code:" />
36 |         </div>
37 | 
38 |         <div class="flex justify-between">
39 |           <Button as="router-link" to="/" theme="secondary"><IconChevron class="h-5 rotate-180 mr-2" /> Back</Button>
40 |           <Button :disabled="!values.name || !values.code || !!Object.keys(errors).length" type="submit"
41 |             >Next <IconChevron class="h-5 ml-2"
42 |           /></Button>
43 |         </div>
44 |       </div>
45 |     </form>
46 |   </LayoutDefault>
47 | </template>
48 | 
49 | <style scoped></style>
50 | 


--------------------------------------------------------------------------------
/src/pages/PageGame.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { storeToRefs } from 'pinia';
 3 | import { onBeforeMount, onBeforeUnmount } from 'vue';
 4 | import { useRouter } from 'vue-router';
 5 | import ModalInstructions from '../components/modals/ModalInstructions.vue';
 6 | import ModalCountdown from '../components/modals/ModalCountdown.vue';
 7 | import ModalRoundWinner from '../components/modals/ModalRoundWinner.vue';
 8 | import LayoutDefault from '../layouts/LayoutDefault.vue';
 9 | import GridGame from '../components/GridGame.vue';
10 | import Score from '../components/Score.vue';
11 | import Players from '../components/Players.vue';
12 | import { useGameStore } from '../stores/game';
13 | import TurnTimer from '../components/TurnTimer.vue';
14 | import ModalRoundGameWinner from '../components/modals/ModalRoundGameWinner.vue';
15 | import ModalDisconnect from '../components/modals/ModalDisconnect.vue';
16 | 
17 | const router = useRouter();
18 | const store = useGameStore();
19 | const { game } = storeToRefs(store);
20 | 
21 | onBeforeMount(() => {
22 |   if (!game.value.code) {
23 |     router.push('/');
24 |   }
25 | });
26 | 
27 | onBeforeUnmount(() => {
28 |   store.disconnect();
29 | });
30 | </script>
31 | 
32 | <template>
33 |   <LayoutDefault :show-footer="false">
34 |     <div class="px-6 flex flex-col h-full">
35 |       <GridGame class="mx-auto" />
36 | 
37 |       <Score />
38 | 
39 |       <Players />
40 | 
41 |       <TurnTimer />
42 |     </div>
43 | 
44 |     <ModalInstructions v-if="game.state === 'instructions'" />
45 |     <ModalCountdown v-else-if="game.state === 'countdown'" />
46 |     <ModalRoundWinner v-if="game.state === 'round-winner'" />
47 |     <ModalRoundGameWinner v-else-if="game.state === 'game-winner'" />
48 |     <ModalDisconnect v-else-if="game.state === 'disconnected'" />
49 |   </LayoutDefault>
50 | </template>
51 | 
52 | <style scoped></style>
53 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
 7 |     <meta name="og:site_name" property="og:site_name" content="Tic Tac Go" />
 8 |     <meta
 9 |       name="description"
10 |       content="Tic Tac Go is a game built to demonstrate supabase real-time for a tutorial series by Pixelhop"
11 |     />
12 |     <meta name="twitter:card" content="summary_large_image" />
13 |     <meta
14 |       name="twitter:description"
15 |       content="Tic Tac Go was built to demonstrate supabase real-time for a tutorial series by Pixelhop"
16 |     />
17 |     <meta
18 |       name="twitter:title"
19 |       content="Tic Tac Go - A real-time game built with supabase and Vue"
20 |     />
21 |     <meta name="twitter:site" content="@pixelhopio" />
22 |     <meta
23 |       name="twitter:image"
24 |       content="https://tic-tac-go.pixelhop.io/og-image.png"
25 |     />
26 |     <meta name="twitter:creator" content="@pixelhopio" />
27 |     <meta
28 |       property="og:title"
29 |       content="Tic Tac Go - A real-time game built with supabase and Vue"
30 |     />
31 |     <meta
32 |       property="og:description"
33 |       content="Tic Tac Go is a game built to demonstrate supabase real-time for a tutorial series by Pixelhop"
34 |     />
35 |     <meta property="og:type" content="website" />
36 |     <meta
37 |       property="og:image"
38 |       content="https://tic-tac-go.pixelhop.io/og-image.png"
39 |     />
40 |     <meta property="og:image:width" content="1600" />
41 |     <meta property="og:image:height" content="800" />
42 |     <title>Tic Tac Go</title>
43 |   </head>
44 |   <body>
45 |     <div id="app"></div>
46 |     <script type="module" src="/src/main.ts"></script>
47 |   </body>
48 | </html>
49 | 


--------------------------------------------------------------------------------
/src/components/icons/IconX.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg viewBox="0 0 79 80" fill="none" xmlns="http://www.w3.org/2000/svg">
 3 |     <rect
 4 |       x="23.0168"
 5 |       y="39.9697"
 6 |       width="23"
 7 |       height="23"
 8 |       transform="rotate(-45 23.0168 39.9697)"
 9 |       fill="#FF7615"
10 |       fill-opacity="0.22"
11 |     />
12 |     <g>
13 |       <rect x="22.3097" y="20.8778" width="51" height="3" transform="rotate(45 22.3097 20.8778)" fill="white" />
14 |       <rect x="20.1884" y="56.9402" width="51" height="3" transform="rotate(-45 20.1884 56.9402)" fill="white" />
15 |     </g>
16 |     <path
17 |       d="M43.1694 43.8587C41.0215 46.0066 37.5391 46.0066 35.3912 43.8587C33.2433 41.7109 33.2433 38.2285 35.3912 36.0806C37.5391 33.9327 41.0215 33.9327 43.1694 36.0806C45.3172 38.2285 45.3172 41.7109 43.1694 43.8587Z"
18 |       fill="#FF7615"
19 |       stroke="white"
20 |       stroke-width="2"
21 |     />
22 |     <defs>
23 |       <filter
24 |         id="filter0_d_753_1439"
25 |         x="8.18835"
26 |         y="8.87776"
27 |         width="62.1838"
28 |         height="62.1838"
29 |         filterUnits="userSpaceOnUse"
30 |         color-interpolation-filters="sRGB"
31 |       >
32 |         <feFlood flood-opacity="0" result="BackgroundImageFix" />
33 |         <feColorMatrix
34 |           in="SourceAlpha"
35 |           type="matrix"
36 |           values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
37 |           result="hardAlpha"
38 |         />
39 |         <feOffset />
40 |         <feGaussianBlur stdDeviation="6" />
41 |         <feComposite in2="hardAlpha" operator="out" />
42 |         <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" />
43 |         <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_753_1439" />
44 |         <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_753_1439" result="shape" />
45 |       </filter>
46 |     </defs>
47 |   </svg>
48 | </template>
49 | 


--------------------------------------------------------------------------------
/src/pages/PageHome.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import LayoutDefault from '../layouts/LayoutDefault.vue';
 3 | import Button from '../components/Button.vue';
 4 | </script>
 5 | 
 6 | <template>
 7 |   <LayoutDefault animate-logo>
 8 |     <div class="background-svg-container absolute inset-0 flex justify-center items-center px-12">
 9 |       <svg class="background-svg w-full" viewBox="0 0 329 329" fill="none" xmlns="http://www.w3.org/2000/svg">
10 |         <line class="cross" x1="294.388" y1="37.3191" x2="36.388" y2="295.319" stroke="#777777" stroke-opacity="0.34" />
11 |         <line class="cross" x1="36.388" y1="36.6119" x2="294.388" y2="294.612" stroke="#777777" stroke-opacity="0.34" />
12 |         <circle cx="164.5" cy="164.5" r="162.5" stroke="#482914" stroke-width="4" />
13 |         <rect x="294.192" y="28" width="13" height="13" transform="rotate(45 294.192 28)" fill="#1D5353" />
14 |         <rect x="36.1924" y="286" width="13" height="13" transform="rotate(45 36.1924 286)" fill="#1D5353" />
15 |         <rect x="36.1924" y="28" width="13" height="13" transform="rotate(45 36.1924 28)" fill="#1D5353" />
16 |         <rect x="294.192" y="286" width="13" height="13" transform="rotate(45 294.192 286)" fill="#1D5353" />
17 |       </svg>
18 |     </div>
19 |     <div class="h-full flex flex-col px-24 space-y-4 justify-center">
20 |       <Button class="button-animation" as="router-link" to="/new-game">New game</Button>
21 |       <Button class="button-animation" as="router-link" to="/join-game">Join game</Button>
22 |       <Button as="router-link" to="/about" class="button-animation">About</Button>
23 |     </div>
24 |   </LayoutDefault>
25 | </template>
26 | 
27 | <style scoped>
28 | .button-animation {
29 |   animation-name: buttonAnimation;
30 |   animation-duration: 0.6s;
31 |   animation-fill-mode: both;
32 |   animation-timing-function: ease;
33 | }
34 | .button-animation:nth-child(2) {
35 |   animation-delay: 0.1s;
36 | }
37 | 
38 | .button-animation:nth-child(3) {
39 |   animation-delay: 0.2s;
40 | }
41 | 
42 | @keyframes buttonAnimation {
43 |   from {
44 |     opacity: 0;
45 |     transform: translateY(-50%);
46 |   }
47 |   to {
48 |     opacity: 1;
49 |   }
50 | }
51 | 
52 | .background-svg-container {
53 |   transform-origin: center;
54 |   animation-name: backgroundEnter;
55 |   animation-duration: 0.4s;
56 |   animation-fill-mode: both;
57 |   animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
58 | }
59 | 
60 | @keyframes backgroundEnter {
61 |   from {
62 |     transform: scale(0);
63 |   }
64 |   to {
65 |     transform: scale(1);
66 |   }
67 | }
68 | 
69 | .background-svg {
70 |   transform-origin: center;
71 |   animation-name: backgroundRotate;
72 |   animation-duration: 100s;
73 |   animation-fill-mode: both;
74 |   animation-timing-function: linear;
75 |   animation-iteration-count: infinite;
76 | }
77 | 
78 | @keyframes backgroundRotate {
79 |   from {
80 |     transform: rotate(0);
81 |   }
82 |   to {
83 |     transform: rotate(360deg);
84 |   }
85 | }
86 | 
87 | .background-svg .cross {
88 |   transform-box: fill-box;
89 | }
90 | </style>
91 | 


--------------------------------------------------------------------------------
/src/components/modals/ModalRoundGameWinner.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | import { storeToRefs } from 'pinia';
  3 | import { useTimeoutFn } from '@vueuse/core';
  4 | import { computed } from 'vue';
  5 | import { useRouter } from 'vue-router';
  6 | import Modal from '../Modal.vue';
  7 | import Player from '../Player.vue';
  8 | import Score from '../Score.vue';
  9 | import { useGameStore } from '../../stores/game';
 10 | 
 11 | const router = useRouter();
 12 | const store = useGameStore();
 13 | const { game, player1Name, player2Name } = storeToRefs(store);
 14 | 
 15 | const gameWinner = computed(() => {
 16 |   const player1Wins = game.value.roundWinners.filter((value) => value === 1).length;
 17 |   const player2Wins = game.value.roundWinners.filter((value) => value === 2).length;
 18 | 
 19 |   if (player1Wins > player2Wins) {
 20 |     return 1;
 21 |   }
 22 | 
 23 |   if (player2Wins > player1Wins) {
 24 |     return 2;
 25 |   }
 26 | 
 27 |   return null;
 28 | });
 29 | const winnerName = computed(() => (gameWinner.value === 1 ? player1Name.value : player2Name.value));
 30 | 
 31 | // Go back to the home screen after 5 seconds
 32 | useTimeoutFn(() => {
 33 |   router.push('/');
 34 | }, 5000);
 35 | </script>
 36 | 
 37 | <template>
 38 |   <Modal title="Game winner">
 39 |     <div class="h-full flex flex-col items-center justify-between">
 40 |       <div v-if="gameWinner" class="h-2/3 flex items-center justify-center">
 41 |         <svg width="169" height="169" viewBox="0 0 169 169" fill="none" xmlns="http://www.w3.org/2000/svg">
 42 |           <g filter="url(#filter0_d_706_847)">
 43 |             <path
 44 |               d="M150.995 43.3795C150.863 32.0914 145.086 25.8745 134.729 25.8745C130.72 25.8745 126.857 26.8075 124.332 27.5861C124.584 22.9721 124.588 20.124 124.588 19.9825L124.588 18.0072H44.4136V19.9822C44.4136 20.0497 44.4204 22.9427 44.6747 27.5884C42.1498 26.8094 38.2834 25.8745 34.2708 25.8745C23.914 25.8745 18.137 32.0912 18.0045 43.3795C17.8741 54.4845 20.4069 64.3696 25.5318 72.7609C30.5634 80.9993 36.9947 85.9637 41.504 88.677C48.7262 93.0234 55.9444 93.9356 60.7282 93.9356C61.9075 93.9356 63.0437 93.8801 64.1064 93.7704C64.1768 93.7632 64.242 93.7548 64.3109 93.7473C66.6238 96.2382 69.1173 98.2335 71.7817 99.7162C73.7458 100.809 75.1119 102.715 75.58 104.906C72.9317 105.73 71.0035 108.204 71.0035 111.12C71.0035 114.101 73.02 116.619 75.7598 117.385V125.675H65.0725V134.325H54.526V150.993H114.475V134.325H103.929V125.675H93.2412V117.385C95.9812 116.619 97.9978 114.101 97.9978 111.12C97.9978 108.204 96.0696 105.73 93.4212 104.906C93.8893 102.715 95.2552 100.809 97.2195 99.7162C99.8775 98.2374 102.388 96.2312 104.695 93.7484C105.513 93.839 106.739 93.9354 108.271 93.9354C108.272 93.9354 108.272 93.9354 108.272 93.9354C113.056 93.9354 120.273 93.0226 127.495 88.6767C132.004 85.9632 138.436 80.9991 143.467 72.7606C148.593 64.3697 151.126 54.4843 150.995 43.3795ZM120.605 21.9572C120.588 22.6796 120.559 23.5877 120.516 24.6507H48.493C48.4483 23.588 48.4184 22.6786 48.3992 21.9572H120.605ZM123.292 40.0922C125.968 39.2015 129.436 38.3032 132.543 38.3032C135.148 38.3032 137.024 38.9396 138.119 40.1948C139.376 41.6376 139.782 44.0612 139.323 47.3992C137.413 61.3034 131.384 72.1569 122.346 77.9598C119.198 79.9813 115.808 80.8164 112.967 81.1131C118.977 68.4804 121.886 52.6306 123.292 40.0922ZM47.7417 53.8502C49.6845 64.2707 52.3669 73.2191 55.7147 80.4465C55.8184 80.671 55.9238 80.892 56.0288 81.1131C53.1885 80.8157 49.8001 79.9808 46.6533 77.9603C37.6158 72.1572 31.5866 61.3039 29.6766 47.3997C29.2181 44.0614 29.6233 41.6376 30.8814 40.1953C31.9758 38.9402 33.8518 38.304 36.4567 38.304C39.5664 38.304 43.0379 39.2036 45.715 40.0948C46.1933 44.3711 46.8471 49.0518 47.7417 53.8502ZM60.7282 89.9856C56.4452 89.9856 49.9861 89.1713 43.5411 85.2927C36.9495 81.3261 21.6506 69.3057 21.9545 43.426C22.0621 34.2737 26.0908 29.8247 34.2708 29.8247C38.6455 29.8247 42.9662 31.1435 44.9412 31.8392C45.0397 33.1643 45.1501 34.4932 45.2721 35.8167C42.5875 35.0281 39.4243 34.3532 36.4567 34.3532C32.6595 34.3532 29.7821 35.445 27.904 37.5985C25.8625 39.9397 25.1421 43.418 25.763 47.9366C26.8264 55.6779 29.049 62.5201 32.3691 68.2729C35.5385 73.7649 39.6264 78.1424 44.5188 81.2835C49.2975 84.3521 54.466 85.126 58.1529 85.2C58.1653 85.2218 58.1781 85.2426 58.1905 85.2642C58.3926 85.6182 58.5968 85.9663 58.8031 86.31C58.8672 86.4173 58.9319 86.5238 58.9966 86.63C59.1932 86.9531 59.3914 87.2732 59.5917 87.5867C59.6671 87.7046 59.7434 87.8197 59.8193 87.9366C59.9557 88.1462 60.0928 88.3541 60.231 88.5595C60.3645 88.7583 60.4986 88.9549 60.6334 89.1495C60.7656 89.3399 60.8981 89.5292 61.0316 89.716C61.0942 89.8038 61.1558 89.895 61.2184 89.9817C61.0594 89.9843 60.896 89.9856 60.7282 89.9856ZM110.525 138.276V147.043H58.4765V138.276H65.0728H103.929H110.525ZM93.2418 129.625H99.9785V134.325H69.023V129.625H75.76H93.2418ZM79.71 125.675V117.627H89.2915V125.675H79.71ZM94.0481 111.12C94.0481 112.53 92.9009 113.677 91.4915 113.677H77.5104C76.1006 113.677 74.9537 112.53 74.9537 111.12C74.9537 109.71 76.1006 108.563 77.5104 108.563H91.4915C92.9012 108.563 94.0481 109.71 94.0481 111.12ZM103.928 88.5401C103.906 88.5684 103.884 88.5967 103.863 88.625C103.668 88.8764 103.472 89.1217 103.275 89.3635C103.227 89.4225 103.18 89.4825 103.131 89.5412C102.915 89.8041 102.696 90.0612 102.477 90.3122C102.467 90.3241 102.457 90.3366 102.446 90.3485C100.243 92.8613 97.8391 94.8513 95.2994 96.2644C92.1689 98.0059 90.0404 101.099 89.4549 104.613H79.5469C78.9611 101.099 76.8326 98.0059 73.7022 96.2644C71.251 94.9009 69.0373 93.0782 67.0374 90.9L66.5542 90.3488C64.5904 88.1091 62.7393 85.3956 61.0526 82.2844L60.536 81.3308C52.0424 64.9196 49.4733 41.2001 48.6987 28.6007H120.317C120.284 29.1488 120.248 29.7148 120.208 30.3027C120.206 30.33 120.204 30.358 120.203 30.3853C120.159 31.0222 120.112 31.661 120.063 32.3003C120.061 32.319 120.06 32.3377 120.058 32.3567C119.9 34.3828 119.713 36.4165 119.5 38.4261L119.371 39.6413C117.936 52.5069 114.905 68.8974 108.513 81.2435L107.948 82.2841C106.692 84.6002 105.345 86.6955 103.928 88.5401ZM125.459 85.2927C119.013 89.1715 112.556 89.9856 108.273 89.9856C108.273 89.9856 108.272 89.9856 108.272 89.9856C108.104 89.9856 107.94 89.9843 107.781 89.9817C107.784 89.9781 107.786 89.9742 107.789 89.9706C108.045 89.6168 108.298 89.2578 108.546 88.8939C108.577 88.8494 108.607 88.804 108.637 88.7596C108.847 88.4499 109.054 88.1361 109.259 87.8192C109.312 87.7379 109.364 87.6563 109.417 87.5745C109.643 87.2189 109.867 86.8609 110.087 86.4967C110.122 86.4398 110.155 86.3814 110.189 86.324C110.369 86.0232 110.547 85.7195 110.723 85.413C110.764 85.3413 110.806 85.2727 110.848 85.2005C114.534 85.1265 119.703 84.3526 124.482 81.284C129.374 78.1424 133.462 73.7649 136.631 68.2734C139.951 62.5206 142.174 55.6784 143.238 47.9371C143.858 43.4183 143.138 39.94 141.097 37.599C139.219 35.4453 136.341 34.3535 132.544 34.3535C129.576 34.3535 126.413 35.0278 123.728 35.8167C123.853 34.4672 123.96 33.1728 124.051 31.9426C124.054 31.9083 124.056 31.8737 124.059 31.8397C126.035 31.1438 130.355 29.8252 134.729 29.8252C142.909 29.8252 146.938 34.2742 147.046 43.426C147.349 69.3057 132.05 81.3258 125.459 85.2927Z"
 45 |               fill="white"
 46 |             />
 47 |             <path
 48 |               d="M67.9675 81.9639L64.6685 84.1374C65.7948 85.8474 67.0053 87.4011 68.2665 88.755L71.1571 86.0622C70.0461 84.8697 68.973 83.4906 67.9675 81.9639Z"
 49 |               fill="white"
 50 |             />
 51 |             <path
 52 |               d="M59.4887 60.0618L55.6375 60.9403C57.5317 69.2437 60.0605 76.2143 63.1532 81.6582L66.5879 79.7068C63.6858 74.5985 61.2972 67.989 59.4887 60.0618Z"
 53 |               fill="white"
 54 |             />
 55 |             <path
 56 |               d="M133.249 104.634L133.246 100.684L129.912 100.686L129.909 97.3514L125.959 97.354L125.962 100.689L122.627 100.691L122.63 104.641L125.964 104.639L125.967 107.973L129.917 107.971L129.914 104.636L133.249 104.634Z"
 57 |               fill="white"
 58 |             />
 59 |             <path
 60 |               d="M47.2977 125.147L47.2935 121.197L44.4953 121.199L44.4925 118.401L40.5422 118.405L40.5451 121.203L37.7463 121.206L37.7508 125.156L40.5489 125.154L40.5518 127.952L44.5021 127.948L44.4992 125.15L47.2977 125.147Z"
 61 |               fill="white"
 62 |             />
 63 |             <path d="M34.4146 92.8543H30.6882V96.8046H34.4146V92.8543Z" fill="white" />
 64 |             <path d="M58.3635 104.542H54.6372V108.492H58.3635V104.542Z" fill="white" />
 65 |             <path d="M118.425 116.426H114.699V120.377H118.425V116.426Z" fill="white" />
 66 |           </g>
 67 |           <defs>
 68 |             <filter
 69 |               id="filter0_d_706_847"
 70 |               x="-0.000244141"
 71 |               y="0.00720215"
 72 |               width="169"
 73 |               height="168.986"
 74 |               filterUnits="userSpaceOnUse"
 75 |               color-interpolation-filters="sRGB"
 76 |             >
 77 |               <feFlood flood-opacity="0" result="BackgroundImageFix" />
 78 |               <feColorMatrix
 79 |                 in="SourceAlpha"
 80 |                 type="matrix"
 81 |                 values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
 82 |                 result="hardAlpha"
 83 |               />
 84 |               <feOffset />
 85 |               <feGaussianBlur stdDeviation="9" />
 86 |               <feComposite in2="hardAlpha" operator="out" />
 87 |               <feColorMatrix type="matrix" values="0 0 0 0 0.00784314 0 0 0 0 1 0 0 0 0 1 0 0 0 0.53 0" />
 88 |               <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_706_847" />
 89 |               <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_706_847" result="shape" />
 90 |             </filter>
 91 |           </defs>
 92 |         </svg>
 93 |       </div>
 94 | 
 95 |       <Player v-if="gameWinner" class="-ml-4" :name="winnerName" :player="gameWinner" orientation="left" />
 96 | 
 97 |       <div v-if="!gameWinner" class="h-full flex items-center">
 98 |         <h2 class="text-6xl text-white uppercase">It's a draw!</h2>
 99 |       </div>
100 | 
101 |       <Score />
102 |     </div>
103 |   </Modal>
104 | </template>
105 | 
106 | <style scoped></style>
107 | 


--------------------------------------------------------------------------------
/src/components/TurnTimer.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | import { useIntervalFn } from '@vueuse/core';
  3 | import dayjs from 'dayjs';
  4 | import { storeToRefs } from 'pinia';
  5 | import { computed, ref } from 'vue';
  6 | import { useGameStore } from '../stores/game';
  7 | 
  8 | const store = useGameStore();
  9 | const { game } = storeToRefs(store);
 10 | 
 11 | const goPercentage = ref(0);
 12 | useIntervalFn(() => {
 13 |   if (!game.value.currentGoEnd || !game.value.currentGoStart) {
 14 |     return;
 15 |   }
 16 | 
 17 |   const originalDuration = Math.abs(
 18 |     dayjs(game.value.currentGoStart).diff(dayjs(game.value.currentGoEnd), 'milliseconds')
 19 |   );
 20 | 
 21 |   const timeLeft = Math.max(0, dayjs(game.value.currentGoEnd).diff(dayjs(), 'milliseconds'));
 22 | 
 23 |   goPercentage.value = 1 - timeLeft / originalDuration;
 24 | }, 50);
 25 | 
 26 | const playerColour = computed(() => {
 27 |   const colourMap = {
 28 |     1: '#02FFFF',
 29 |     2: '#FF7615',
 30 |   };
 31 | 
 32 |   return colourMap[game.value.currentPlayer];
 33 | });
 34 | </script>
 35 | 
 36 | <template>
 37 |   <div>
 38 |     <h5 class="uppercase font-medium text-gray-400 text-xs text-center">Turn timer</h5>
 39 |     <svg
 40 |       :class="{ jiggle: goPercentage > 0.75 }"
 41 |       class="-mt-2"
 42 |       viewBox="0 0 370 62"
 43 |       fill="none"
 44 |       xmlns="http://www.w3.org/2000/svg"
 45 |     >
 46 |       <g id="turn-timer" filter="url(#filter0_d_107_88)">
 47 |         <rect id="outer" x="18" y="19" width="334" height="25" :stroke="playerColour" stroke-width="4" />
 48 |         <rect id="progress-bg" x="17" y="26" width="335" height="10" :fill="playerColour" fill-opacity="0.25" />
 49 |         <rect
 50 |           id="progress"
 51 |           x="17"
 52 |           y="26"
 53 |           :width="goPercentage * 335"
 54 |           height="10"
 55 |           :fill="playerColour"
 56 |           fill-opacity="0.72"
 57 |         />
 58 |         <g id="dashes">
 59 |           <line
 60 |             id="Line 20"
 61 |             x1="19.1868"
 62 |             y1="44.9581"
 63 |             x2="29.1868"
 64 |             y2="17.9581"
 65 |             :stroke="playerColour"
 66 |             stroke-width="6"
 67 |           />
 68 |           <line
 69 |             id="Line 24"
 70 |             x1="83.1868"
 71 |             y1="44.9581"
 72 |             x2="93.1868"
 73 |             y2="17.9581"
 74 |             :stroke="playerColour"
 75 |             stroke-width="6"
 76 |           />
 77 |           <line
 78 |             id="Line 28"
 79 |             x1="147.187"
 80 |             y1="44.9581"
 81 |             x2="157.187"
 82 |             y2="17.9581"
 83 |             :stroke="playerColour"
 84 |             stroke-width="6"
 85 |           />
 86 |           <line
 87 |             id="Line 32"
 88 |             x1="211.187"
 89 |             y1="44.9581"
 90 |             x2="221.187"
 91 |             y2="17.9581"
 92 |             :stroke="playerColour"
 93 |             stroke-width="6"
 94 |           />
 95 |           <line
 96 |             id="Line 36"
 97 |             x1="275.187"
 98 |             y1="44.9581"
 99 |             x2="285.187"
100 |             y2="17.9581"
101 |             :stroke="playerColour"
102 |             stroke-width="6"
103 |           />
104 |           <line
105 |             id="Line 22"
106 |             x1="51.1868"
107 |             y1="44.9581"
108 |             x2="61.1868"
109 |             y2="17.9581"
110 |             :stroke="playerColour"
111 |             stroke-width="6"
112 |           />
113 |           <line
114 |             id="Line 25"
115 |             x1="115.187"
116 |             y1="44.9581"
117 |             x2="125.187"
118 |             y2="17.9581"
119 |             :stroke="playerColour"
120 |             stroke-width="6"
121 |           />
122 |           <line
123 |             id="Line 29"
124 |             x1="179.187"
125 |             y1="44.9581"
126 |             x2="189.187"
127 |             y2="17.9581"
128 |             :stroke="playerColour"
129 |             stroke-width="6"
130 |           />
131 |           <line
132 |             id="Line 33"
133 |             x1="243.187"
134 |             y1="44.9581"
135 |             x2="253.187"
136 |             y2="17.9581"
137 |             :stroke="playerColour"
138 |             stroke-width="6"
139 |           />
140 |           <line
141 |             id="Line 37"
142 |             x1="307.187"
143 |             y1="44.9581"
144 |             x2="317.187"
145 |             y2="17.9581"
146 |             :stroke="playerColour"
147 |             stroke-width="6"
148 |           />
149 |           <line
150 |             id="Line 21"
151 |             x1="35.1868"
152 |             y1="44.9581"
153 |             x2="45.1868"
154 |             y2="17.9581"
155 |             :stroke="playerColour"
156 |             stroke-width="6"
157 |           />
158 |           <line
159 |             id="Line 26"
160 |             x1="99.1868"
161 |             y1="44.9581"
162 |             x2="109.187"
163 |             y2="17.9581"
164 |             :stroke="playerColour"
165 |             stroke-width="6"
166 |           />
167 |           <line
168 |             id="Line 30"
169 |             x1="163.187"
170 |             y1="44.9581"
171 |             x2="173.187"
172 |             y2="17.9581"
173 |             :stroke="playerColour"
174 |             stroke-width="6"
175 |           />
176 |           <line
177 |             id="Line 34"
178 |             x1="227.187"
179 |             y1="44.9581"
180 |             x2="237.187"
181 |             y2="17.9581"
182 |             :stroke="playerColour"
183 |             stroke-width="6"
184 |           />
185 |           <line
186 |             id="Line 38"
187 |             x1="291.187"
188 |             y1="44.9581"
189 |             x2="301.187"
190 |             y2="17.9581"
191 |             :stroke="playerColour"
192 |             stroke-width="6"
193 |           />
194 |           <line
195 |             id="Line 23"
196 |             x1="67.1868"
197 |             y1="44.9581"
198 |             x2="77.1868"
199 |             y2="17.9581"
200 |             :stroke="playerColour"
201 |             stroke-width="6"
202 |           />
203 |           <line
204 |             id="Line 27"
205 |             x1="131.187"
206 |             y1="44.9581"
207 |             x2="141.187"
208 |             y2="17.9581"
209 |             :stroke="playerColour"
210 |             stroke-width="6"
211 |           />
212 |           <line
213 |             id="Line 31"
214 |             x1="195.187"
215 |             y1="44.9581"
216 |             x2="205.187"
217 |             y2="17.9581"
218 |             :stroke="playerColour"
219 |             stroke-width="6"
220 |           />
221 |           <line
222 |             id="Line 35"
223 |             x1="259.187"
224 |             y1="44.9581"
225 |             x2="269.187"
226 |             y2="17.9581"
227 |             :stroke="playerColour"
228 |             stroke-width="6"
229 |           />
230 |           <line
231 |             id="Line 39"
232 |             x1="323.187"
233 |             y1="44.9581"
234 |             x2="333.187"
235 |             y2="17.9581"
236 |             :stroke="playerColour"
237 |             stroke-width="6"
238 |           />
239 |           <line
240 |             id="Line 40"
241 |             x1="339.187"
242 |             y1="44.9581"
243 |             x2="349.187"
244 |             y2="17.9581"
245 |             :stroke="playerColour"
246 |             stroke-width="6"
247 |           />
248 |         </g>
249 |       </g>
250 |       <defs>
251 |         <filter
252 |           v-if="game.currentPlayer === 1"
253 |           id="filter0_d_107_88"
254 |           x="0"
255 |           y="0.916107"
256 |           width="370"
257 |           height="61.0839"
258 |           filterUnits="userSpaceOnUse"
259 |           color-interpolation-filters="sRGB"
260 |         >
261 |           <feFlood flood-opacity="0" result="BackgroundImageFix" />
262 |           <feColorMatrix
263 |             in="SourceAlpha"
264 |             type="matrix"
265 |             values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
266 |             result="hardAlpha"
267 |           />
268 |           <feOffset />
269 |           <feGaussianBlur stdDeviation="8" />
270 |           <feComposite in2="hardAlpha" operator="out" />
271 |           <feColorMatrix type="matrix" values="0 0 0 0 0.00784314 0 0 0 0 1 0 0 0 0 1 0 0 0 0.71 0" />
272 |           <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_107_88" />
273 |           <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_107_88" result="shape" />
274 |         </filter>
275 | 
276 |         <filter
277 |           v-if="game.currentPlayer === 2"
278 |           id="filter0_d_107_88"
279 |           x="0"
280 |           y="0.916107"
281 |           width="370"
282 |           height="61.0839"
283 |           filterUnits="userSpaceOnUse"
284 |           color-interpolation-filters="sRGB"
285 |         >
286 |           <feFlood flood-opacity="0" result="BackgroundImageFix" />
287 |           <feColorMatrix
288 |             in="SourceAlpha"
289 |             type="matrix"
290 |             values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
291 |             result="hardAlpha"
292 |           />
293 |           <feOffset />
294 |           <feGaussianBlur stdDeviation="8" />
295 |           <feComposite in2="hardAlpha" operator="out" />
296 |           <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.462745 0 0 0 0 0.0823529 0 0 0 1 0" />
297 |           <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_107_88" />
298 |           <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_107_88" result="shape" />
299 |         </filter>
300 |       </defs>
301 |     </svg>
302 |   </div>
303 | </template>
304 | 
305 | <style scoped>
306 | .jiggle {
307 |   transform-origin: center;
308 |   animation-name: jiggle;
309 |   animation-iteration-count: infinite;
310 |   animation-direction: alternate;
311 |   animation-duration: 80ms;
312 |   animation-fill-mode: both;
313 | }
314 | 
315 | @keyframes jiggle {
316 |   from {
317 |     transform: rotate(-1deg);
318 |   }
319 |   to {
320 |     transform: rotate(1deg);
321 |   }
322 | }
323 | </style>
324 | 


--------------------------------------------------------------------------------
/src/components/modals/ModalRoundWinner.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | import { storeToRefs } from 'pinia';
  3 | import { useIntervalFn } from '@vueuse/core';
  4 | import dayjs from 'dayjs';
  5 | import { computed, ref } from 'vue';
  6 | import Modal from '../Modal.vue';
  7 | import Player from '../Player.vue';
  8 | import Score from '../Score.vue';
  9 | import { useGameStore } from '../../stores/game';
 10 | import IconConfetti from '../IconConfetti.vue';
 11 | 
 12 | const store = useGameStore();
 13 | const { game, player1Name, player2Name } = storeToRefs(store);
 14 | 
 15 | const roundWinner = computed(() => game.value.roundWinners[game.value.round - 1]);
 16 | const winnerName = computed(() => (roundWinner.value === 1 ? player1Name.value : player2Name.value));
 17 | 
 18 | const secondsRemaining = ref(1000);
 19 | useIntervalFn(() => {
 20 |   secondsRemaining.value = dayjs(game.value.roundStartTime).diff(dayjs(), 'seconds');
 21 | }, 100);
 22 | </script>
 23 | 
 24 | <template>
 25 |   <Modal title="Round winner">
 26 |     <div class="h-full flex flex-col items-center justify-between relative">
 27 |       <div v-if="roundWinner" class="h-2/3 flex items-center justify-center relative">
 28 |         <IconConfetti :player="roundWinner" />
 29 | 
 30 |         <svg class="cup" width="169" height="169" viewBox="0 0 169 169" fill="none" xmlns="http://www.w3.org/2000/svg">
 31 |           <g filter="url(#filter0_d_706_847)">
 32 |             <path
 33 |               d="M150.995 43.3795C150.863 32.0914 145.086 25.8745 134.729 25.8745C130.72 25.8745 126.857 26.8075 124.332 27.5861C124.584 22.9721 124.588 20.124 124.588 19.9825L124.588 18.0072H44.4136V19.9822C44.4136 20.0497 44.4204 22.9427 44.6747 27.5884C42.1498 26.8094 38.2834 25.8745 34.2708 25.8745C23.914 25.8745 18.137 32.0912 18.0045 43.3795C17.8741 54.4845 20.4069 64.3696 25.5318 72.7609C30.5634 80.9993 36.9947 85.9637 41.504 88.677C48.7262 93.0234 55.9444 93.9356 60.7282 93.9356C61.9075 93.9356 63.0437 93.8801 64.1064 93.7704C64.1768 93.7632 64.242 93.7548 64.3109 93.7473C66.6238 96.2382 69.1173 98.2335 71.7817 99.7162C73.7458 100.809 75.1119 102.715 75.58 104.906C72.9317 105.73 71.0035 108.204 71.0035 111.12C71.0035 114.101 73.02 116.619 75.7598 117.385V125.675H65.0725V134.325H54.526V150.993H114.475V134.325H103.929V125.675H93.2412V117.385C95.9812 116.619 97.9978 114.101 97.9978 111.12C97.9978 108.204 96.0696 105.73 93.4212 104.906C93.8893 102.715 95.2552 100.809 97.2195 99.7162C99.8775 98.2374 102.388 96.2312 104.695 93.7484C105.513 93.839 106.739 93.9354 108.271 93.9354C108.272 93.9354 108.272 93.9354 108.272 93.9354C113.056 93.9354 120.273 93.0226 127.495 88.6767C132.004 85.9632 138.436 80.9991 143.467 72.7606C148.593 64.3697 151.126 54.4843 150.995 43.3795ZM120.605 21.9572C120.588 22.6796 120.559 23.5877 120.516 24.6507H48.493C48.4483 23.588 48.4184 22.6786 48.3992 21.9572H120.605ZM123.292 40.0922C125.968 39.2015 129.436 38.3032 132.543 38.3032C135.148 38.3032 137.024 38.9396 138.119 40.1948C139.376 41.6376 139.782 44.0612 139.323 47.3992C137.413 61.3034 131.384 72.1569 122.346 77.9598C119.198 79.9813 115.808 80.8164 112.967 81.1131C118.977 68.4804 121.886 52.6306 123.292 40.0922ZM47.7417 53.8502C49.6845 64.2707 52.3669 73.2191 55.7147 80.4465C55.8184 80.671 55.9238 80.892 56.0288 81.1131C53.1885 80.8157 49.8001 79.9808 46.6533 77.9603C37.6158 72.1572 31.5866 61.3039 29.6766 47.3997C29.2181 44.0614 29.6233 41.6376 30.8814 40.1953C31.9758 38.9402 33.8518 38.304 36.4567 38.304C39.5664 38.304 43.0379 39.2036 45.715 40.0948C46.1933 44.3711 46.8471 49.0518 47.7417 53.8502ZM60.7282 89.9856C56.4452 89.9856 49.9861 89.1713 43.5411 85.2927C36.9495 81.3261 21.6506 69.3057 21.9545 43.426C22.0621 34.2737 26.0908 29.8247 34.2708 29.8247C38.6455 29.8247 42.9662 31.1435 44.9412 31.8392C45.0397 33.1643 45.1501 34.4932 45.2721 35.8167C42.5875 35.0281 39.4243 34.3532 36.4567 34.3532C32.6595 34.3532 29.7821 35.445 27.904 37.5985C25.8625 39.9397 25.1421 43.418 25.763 47.9366C26.8264 55.6779 29.049 62.5201 32.3691 68.2729C35.5385 73.7649 39.6264 78.1424 44.5188 81.2835C49.2975 84.3521 54.466 85.126 58.1529 85.2C58.1653 85.2218 58.1781 85.2426 58.1905 85.2642C58.3926 85.6182 58.5968 85.9663 58.8031 86.31C58.8672 86.4173 58.9319 86.5238 58.9966 86.63C59.1932 86.9531 59.3914 87.2732 59.5917 87.5867C59.6671 87.7046 59.7434 87.8197 59.8193 87.9366C59.9557 88.1462 60.0928 88.3541 60.231 88.5595C60.3645 88.7583 60.4986 88.9549 60.6334 89.1495C60.7656 89.3399 60.8981 89.5292 61.0316 89.716C61.0942 89.8038 61.1558 89.895 61.2184 89.9817C61.0594 89.9843 60.896 89.9856 60.7282 89.9856ZM110.525 138.276V147.043H58.4765V138.276H65.0728H103.929H110.525ZM93.2418 129.625H99.9785V134.325H69.023V129.625H75.76H93.2418ZM79.71 125.675V117.627H89.2915V125.675H79.71ZM94.0481 111.12C94.0481 112.53 92.9009 113.677 91.4915 113.677H77.5104C76.1006 113.677 74.9537 112.53 74.9537 111.12C74.9537 109.71 76.1006 108.563 77.5104 108.563H91.4915C92.9012 108.563 94.0481 109.71 94.0481 111.12ZM103.928 88.5401C103.906 88.5684 103.884 88.5967 103.863 88.625C103.668 88.8764 103.472 89.1217 103.275 89.3635C103.227 89.4225 103.18 89.4825 103.131 89.5412C102.915 89.8041 102.696 90.0612 102.477 90.3122C102.467 90.3241 102.457 90.3366 102.446 90.3485C100.243 92.8613 97.8391 94.8513 95.2994 96.2644C92.1689 98.0059 90.0404 101.099 89.4549 104.613H79.5469C78.9611 101.099 76.8326 98.0059 73.7022 96.2644C71.251 94.9009 69.0373 93.0782 67.0374 90.9L66.5542 90.3488C64.5904 88.1091 62.7393 85.3956 61.0526 82.2844L60.536 81.3308C52.0424 64.9196 49.4733 41.2001 48.6987 28.6007H120.317C120.284 29.1488 120.248 29.7148 120.208 30.3027C120.206 30.33 120.204 30.358 120.203 30.3853C120.159 31.0222 120.112 31.661 120.063 32.3003C120.061 32.319 120.06 32.3377 120.058 32.3567C119.9 34.3828 119.713 36.4165 119.5 38.4261L119.371 39.6413C117.936 52.5069 114.905 68.8974 108.513 81.2435L107.948 82.2841C106.692 84.6002 105.345 86.6955 103.928 88.5401ZM125.459 85.2927C119.013 89.1715 112.556 89.9856 108.273 89.9856C108.273 89.9856 108.272 89.9856 108.272 89.9856C108.104 89.9856 107.94 89.9843 107.781 89.9817C107.784 89.9781 107.786 89.9742 107.789 89.9706C108.045 89.6168 108.298 89.2578 108.546 88.8939C108.577 88.8494 108.607 88.804 108.637 88.7596C108.847 88.4499 109.054 88.1361 109.259 87.8192C109.312 87.7379 109.364 87.6563 109.417 87.5745C109.643 87.2189 109.867 86.8609 110.087 86.4967C110.122 86.4398 110.155 86.3814 110.189 86.324C110.369 86.0232 110.547 85.7195 110.723 85.413C110.764 85.3413 110.806 85.2727 110.848 85.2005C114.534 85.1265 119.703 84.3526 124.482 81.284C129.374 78.1424 133.462 73.7649 136.631 68.2734C139.951 62.5206 142.174 55.6784 143.238 47.9371C143.858 43.4183 143.138 39.94 141.097 37.599C139.219 35.4453 136.341 34.3535 132.544 34.3535C129.576 34.3535 126.413 35.0278 123.728 35.8167C123.853 34.4672 123.96 33.1728 124.051 31.9426C124.054 31.9083 124.056 31.8737 124.059 31.8397C126.035 31.1438 130.355 29.8252 134.729 29.8252C142.909 29.8252 146.938 34.2742 147.046 43.426C147.349 69.3057 132.05 81.3258 125.459 85.2927Z"
 34 |               fill="white"
 35 |             />
 36 |             <path
 37 |               d="M67.9675 81.9639L64.6685 84.1374C65.7948 85.8474 67.0053 87.4011 68.2665 88.755L71.1571 86.0622C70.0461 84.8697 68.973 83.4906 67.9675 81.9639Z"
 38 |               fill="white"
 39 |             />
 40 |             <path
 41 |               d="M59.4887 60.0618L55.6375 60.9403C57.5317 69.2437 60.0605 76.2143 63.1532 81.6582L66.5879 79.7068C63.6858 74.5985 61.2972 67.989 59.4887 60.0618Z"
 42 |               fill="white"
 43 |             />
 44 |             <path
 45 |               d="M133.249 104.634L133.246 100.684L129.912 100.686L129.909 97.3514L125.959 97.354L125.962 100.689L122.627 100.691L122.63 104.641L125.964 104.639L125.967 107.973L129.917 107.971L129.914 104.636L133.249 104.634Z"
 46 |               fill="white"
 47 |             />
 48 |             <path
 49 |               d="M47.2977 125.147L47.2935 121.197L44.4953 121.199L44.4925 118.401L40.5422 118.405L40.5451 121.203L37.7463 121.206L37.7508 125.156L40.5489 125.154L40.5518 127.952L44.5021 127.948L44.4992 125.15L47.2977 125.147Z"
 50 |               fill="white"
 51 |             />
 52 |             <path d="M34.4146 92.8543H30.6882V96.8046H34.4146V92.8543Z" fill="white" />
 53 |             <path d="M58.3635 104.542H54.6372V108.492H58.3635V104.542Z" fill="white" />
 54 |             <path d="M118.425 116.426H114.699V120.377H118.425V116.426Z" fill="white" />
 55 |           </g>
 56 |           <defs>
 57 |             <filter
 58 |               id="filter0_d_706_847"
 59 |               x="-0.000244141"
 60 |               y="0.00720215"
 61 |               width="169"
 62 |               height="168.986"
 63 |               filterUnits="userSpaceOnUse"
 64 |               color-interpolation-filters="sRGB"
 65 |             >
 66 |               <feFlood flood-opacity="0" result="BackgroundImageFix" />
 67 |               <feColorMatrix
 68 |                 in="SourceAlpha"
 69 |                 type="matrix"
 70 |                 values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
 71 |                 result="hardAlpha"
 72 |               />
 73 |               <feOffset />
 74 |               <feGaussianBlur stdDeviation="9" />
 75 |               <feComposite in2="hardAlpha" operator="out" />
 76 |               <feColorMatrix type="matrix" values="0 0 0 0 0.00784314 0 0 0 0 1 0 0 0 0 1 0 0 0 0.53 0" />
 77 |               <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_706_847" />
 78 |               <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_706_847" result="shape" />
 79 |             </filter>
 80 |           </defs>
 81 |         </svg>
 82 |       </div>
 83 | 
 84 |       <Player v-if="roundWinner" class="-ml-4" :name="winnerName" :player="roundWinner" orientation="left" />
 85 | 
 86 |       <div v-if="!roundWinner" class="h-full flex items-center">
 87 |         <h2 class="text-6xl text-white uppercase">Round Draw</h2>
 88 |       </div>
 89 | 
 90 |       <Score />
 91 |     </div>
 92 |   </Modal>
 93 | </template>
 94 | 
 95 | <style scoped>
 96 | .winner-icon,
 97 | .winner-icon-container {
 98 |   transform-origin: center center;
 99 | }
100 | 
101 | .cup {
102 |   animation-name: cupAnimation;
103 |   animation-duration: 400ms;
104 |   animation-fill-mode: both;
105 |   animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
106 |   animation-delay: 1s;
107 | }
108 | 
109 | @keyframes cupAnimation {
110 |   from {
111 |     opacity: 0;
112 |     transform: scale(0);
113 |   }
114 |   to {
115 |     opacity: 1;
116 |     transform: scale(1);
117 |   }
118 | }
119 | </style>
120 | 


--------------------------------------------------------------------------------
/src/stores/game.ts:
--------------------------------------------------------------------------------
  1 | import { defineStore } from 'pinia';
  2 | import dayjs from 'dayjs';
  3 | import { uniqueNamesGenerator, adjectives, colors, animals } from 'unique-names-generator';
  4 | import { useIntervalFn } from '@vueuse/core';
  5 | import { computed, reactive, ref, watch } from 'vue';
  6 | import { useRouter } from 'vue-router';
  7 | import { RealtimeChannel } from '@supabase/supabase-js';
  8 | import { supabase } from '../supabase';
  9 | 
 10 | type GameState =
 11 |   | 'waiting-for-players'
 12 |   | 'instructions'
 13 |   | 'countdown'
 14 |   | 'game'
 15 |   | 'round-winner'
 16 |   | 'game-winner'
 17 |   | 'disconnected';
 18 | type GameGrid = ('x' | '0' | undefined)[];
 19 | 
 20 | export interface Game {
 21 |   code: string;
 22 |   round: number;
 23 |   roundStartTime?: string;
 24 |   state: GameState;
 25 |   currentPlayer: 1 | 2;
 26 |   currentGoStart?: string;
 27 |   currentGoEnd?: string;
 28 |   roundWinners: ((1 | 2) | null)[];
 29 | }
 30 | 
 31 | const TURN_DURATION = 3000;
 32 | 
 33 | /**
 34 |  * The below masks represent all the winning combinations possible
 35 |  */
 36 | const WIN_MASKS = [
 37 |   [true, true, true, false, false, false, false, false, false],
 38 |   [false, false, false, true, true, true, false, false, false],
 39 |   [false, false, false, false, false, false, true, true, true],
 40 |   [true, false, false, true, false, false, true, false, false],
 41 |   [false, true, false, false, true, false, false, true, false],
 42 |   [false, false, true, false, false, true, false, false, true],
 43 |   [true, false, false, false, true, false, false, false, true],
 44 |   [false, false, true, false, true, false, true, false, false],
 45 | ];
 46 | 
 47 | export const useGameStore = defineStore('game', () => {
 48 |   const router = useRouter();
 49 | 
 50 |   const isPlayer1 = ref(false);
 51 |   const player1Name = ref('');
 52 |   const player1Connected = ref(false);
 53 |   const player1Ready = ref(false);
 54 | 
 55 |   const player2Name = ref('');
 56 |   const player2Connected = ref(false);
 57 |   const player2Ready = ref(false);
 58 | 
 59 |   const imReady = computed(() => (isPlayer1.value ? player1Ready.value : player2Ready.value));
 60 | 
 61 |   function initGameState(): Game {
 62 |     return {
 63 |       code: '',
 64 |       round: 1,
 65 |       roundStartTime: undefined,
 66 |       state: 'waiting-for-players',
 67 |       currentPlayer: 1,
 68 |       currentGoStart: undefined,
 69 |       currentGoEnd: undefined,
 70 |       roundWinners: [null, null, null, null, null],
 71 |     };
 72 |   }
 73 | 
 74 |   const game = reactive<Game>(initGameState());
 75 | 
 76 |   const grid = ref<GameGrid>([]);
 77 | 
 78 |   const winningMask = computed(() => {
 79 |     // Test X
 80 |     const winningXMask = WIN_MASKS.find((mask) =>
 81 |       mask.every((shouldMatch, index) => (shouldMatch ? grid.value[index] === 'x' : true))
 82 |     );
 83 | 
 84 |     if (winningXMask) {
 85 |       return winningXMask;
 86 |     }
 87 | 
 88 |     // Test 0
 89 |     const winning0Mask = WIN_MASKS.find((mask) =>
 90 |       mask.every((shouldMatch, index) => (shouldMatch ? grid.value[index] === '0' : true))
 91 |     );
 92 | 
 93 |     if (winning0Mask) {
 94 |       return winning0Mask;
 95 |     }
 96 | 
 97 |     return null;
 98 |   });
 99 | 
100 |   const channel = ref<RealtimeChannel>();
101 | 
102 |   /**
103 |    * Broadcast the current game state to the
104 |    * other player
105 |    */
106 |   async function broadcastState() {
107 |     const payload = {
108 |       game,
109 |       grid: grid.value,
110 |     };
111 | 
112 |     console.log('Broadcast state');
113 |     console.log({ payload });
114 | 
115 |     await channel.value?.send({
116 |       type: 'broadcast',
117 |       event: 'state',
118 |       payload,
119 |     });
120 |   }
121 | 
122 |   /**
123 |    * Recieve game state from the other player and update our local state
124 |    * @param state
125 |    */
126 |   function onReceiveState(state: { game: Game; grid: GameGrid }) {
127 |     console.log('Receive state');
128 |     console.log({ state });
129 |     Object.assign(game, state.game);
130 |     grid.value = state.grid;
131 |   }
132 | 
133 |   /**
134 |    * Conect to the supabase realtime channel for this game
135 |    * and setup listeners for the events we are interested in
136 |    */
137 |   function connect() {
138 |     channel.value = supabase.channel(game.code, {
139 |       config: {
140 |         presence: {
141 |           key: isPlayer1.value ? 'player1' : 'player2',
142 |         },
143 |       },
144 |     });
145 | 
146 |     channel.value.on('presence', { event: 'sync' }, () => {
147 |       const presenceState: any = channel.value?.presenceState();
148 |       console.log('Online users: ', channel.value?.presenceState());
149 |       if (Object.keys(channel.value?.presenceState() as object).length === 2) {
150 |         console.log({ name: presenceState.player1[0].name });
151 |         player1Name.value = presenceState.player1[0].name;
152 |         player2Name.value = presenceState.player2[0].name;
153 |         game.state = 'instructions';
154 |         router.push('/game');
155 |       }
156 |     });
157 | 
158 |     channel.value.on('presence', { event: 'join' }, ({ newPresences }) => {
159 |       console.log('New users have joined: ', newPresences);
160 |     });
161 | 
162 |     channel.value.on('presence', { event: 'leave' }, ({ leftPresences }) => {
163 |       console.log('Users have left: ', leftPresences);
164 |       game.state = 'disconnected';
165 |     });
166 | 
167 |     channel.value.on('broadcast', { event: 'player-ready' }, ({ payload }) => {
168 |       if (payload.player === 1) {
169 |         player1Ready.value = true;
170 |         router.push('/game');
171 |       }
172 | 
173 |       if (payload.player === 2) {
174 |         player2Ready.value = true;
175 |         router.push('/game');
176 |       }
177 |     });
178 | 
179 |     // Listen for updates to the grid
180 |     channel.value.on('broadcast', { event: 'grid' }, (event) => {
181 |       console.log('Update grid');
182 |       grid.value = event.payload.grid;
183 |       console.log({ grid: grid.value });
184 |     });
185 | 
186 |     // List for state broadcasts
187 |     channel.value.on('broadcast', { event: 'state' }, (event) => {
188 |       onReceiveState(event.payload);
189 |     });
190 | 
191 |     channel.value.subscribe(async (status) => {
192 |       if (status === 'SUBSCRIBED') {
193 |         const stat = await channel.value?.track({
194 |           online_at: new Date().toISOString(),
195 |           name: isPlayer1.value ? player1Name.value : player2Name.value,
196 |         });
197 |         console.log(stat);
198 |         // your callback function will now be called with the messages broadcast by the other client
199 |       }
200 |     });
201 |   }
202 | 
203 |   /**
204 |    * Disconnect from the current game
205 |    */
206 |   function disconnect() {
207 |     channel.value?.unsubscribe();
208 |     game.code = '';
209 |     player1Name.value = '';
210 |     player1Connected.value = false;
211 |     player1Ready.value = false;
212 | 
213 |     player2Name.value = '';
214 |     player2Connected.value = false;
215 |     player2Ready.value = false;
216 | 
217 |     Object.assign(game, initGameState());
218 |     grid.value = [];
219 |   }
220 | 
221 |   /**
222 |    * Create a new game. This sets the player 1 name and generates
223 |    * a new random game code that can be used to connec to the
224 |    * correct channel
225 |    * @param name
226 |    */
227 |   function newGame(name: string) {
228 |     player1Name.value = name;
229 |     game.code = uniqueNamesGenerator({
230 |       dictionaries: [adjectives, colors, animals],
231 |       separator: '-',
232 |       length: 3,
233 |     });
234 |     isPlayer1.value = true;
235 |     router.push('/waiting');
236 |     connect();
237 |   }
238 | 
239 |   /**
240 |    * Join an existing game. This will set the player 2 name
241 |    * and connect them to the supabase realtime channel
242 |    * @param name
243 |    * @param joinGameCode
244 |    */
245 |   function joinGame(name: string, joinGameCode: string) {
246 |     player2Name.value = name;
247 |     game.code = joinGameCode.toLowerCase();
248 |     connect();
249 |     router.push('/game');
250 |   }
251 | 
252 |   /**
253 |    * Mark the player as ready. When both players are ready the game will start
254 |    */
255 |   async function ready() {
256 |     if (isPlayer1.value) {
257 |       player1Ready.value = true;
258 |       const begin = performance.now();
259 |       await channel.value?.send({
260 |         type: 'broadcast',
261 |         event: 'player-ready',
262 |         payload: {
263 |           player: 1,
264 |         },
265 |       });
266 |       const end = performance.now();
267 |       console.log(`Latency is ${end - begin} milliseconds`);
268 |     } else {
269 |       player2Ready.value = true;
270 |       channel.value?.send({
271 |         type: 'broadcast',
272 |         event: 'player-ready',
273 |         payload: {
274 |           player: 2,
275 |         },
276 |       });
277 |     }
278 |   }
279 | 
280 |   watch([player1Ready, player2Ready], ([player1ReadyValue, player2ReadyValue]) => {
281 |     if (isPlayer1.value && player1ReadyValue && player2ReadyValue) {
282 |       console.log('Readyyyyy');
283 |       game.state = 'countdown';
284 |       game.roundStartTime = dayjs().add(5, 'seconds').toISOString();
285 |       broadcastState();
286 |       setTimeout(() => {
287 |         game.state = 'game';
288 |         game.currentGoStart = new Date().toISOString();
289 |         game.currentGoEnd = dayjs().add(TURN_DURATION, 'milliseconds').toISOString();
290 |         broadcastState();
291 |       }, 5000);
292 |     }
293 |   });
294 | 
295 |   function nextRound() {
296 |     grid.value = [];
297 |     game.round += 1;
298 |     game.currentPlayer = (2 - (game.round % 2)) as 1 | 2;
299 |     game.roundStartTime = dayjs().add(5, 'seconds').toISOString();
300 |     game.state = 'countdown';
301 |     broadcastState();
302 |     setTimeout(() => {
303 |       game.state = 'game';
304 |       game.currentGoStart = new Date().toISOString();
305 |       game.currentGoEnd = dayjs().add(TURN_DURATION, 'milliseconds').toISOString();
306 |       broadcastState();
307 |     }, 5000);
308 |   }
309 | 
310 |   function placeMarker(gridIndex: number) {
311 |     // Check it is the current players turn
312 |     if ((isPlayer1.value && game.currentPlayer !== 1) || (!isPlayer1.value && game.currentPlayer !== 2)) {
313 |       return;
314 |     }
315 | 
316 |     // Check we aren't placing our marker on an existing marker
317 |     if (grid.value[gridIndex]) {
318 |       console.warn('Cannot place marker here');
319 |       return;
320 |     }
321 | 
322 |     // Check someone hasn't already won
323 |     if (winningMask.value) {
324 |       return;
325 |     }
326 | 
327 |     // Logic to check if its the players turn
328 |     const marker = isPlayer1.value ? '0' : 'x';
329 |     grid.value[gridIndex] = marker;
330 | 
331 |     // Test for a win
332 |     const winner = WIN_MASKS.some((mask) =>
333 |       mask.every((shouldMatch, index) => (shouldMatch ? grid.value[index] === marker : true))
334 |     );
335 | 
336 |     if (winner) {
337 |       console.log('Winner');
338 |       game.roundWinners[game.round - 1] = isPlayer1.value ? 1 : 2;
339 | 
340 |       setTimeout(() => {
341 |         game.state = 'round-winner';
342 |         broadcastState();
343 | 
344 |         setTimeout(() => {
345 |           // If we have had less than five rounds and no player has won 3 games, start the next round
346 |           // otherwise show the game winner screen
347 |           const player1Wins = game.roundWinners.filter((value) => value === 1).length;
348 |           const player2Wins = game.roundWinners.filter((value) => value === 2).length;
349 | 
350 |           console.log({
351 |             player1Wins,
352 |             player2Wins,
353 |             gameRound: game.round,
354 |           });
355 |           if (game.round < 5 && player1Wins < 3 && player2Wins < 3) {
356 |             nextRound();
357 |           } else {
358 |             game.state = 'game-winner';
359 |             broadcastState();
360 |           }
361 |         }, 5000);
362 |       }, 2000);
363 |     }
364 | 
365 |     // Test for a draw
366 |     const usedGridCells = grid.value.filter((cell) => !!cell);
367 |     if (usedGridCells.length === 9) {
368 |       console.log('Draw');
369 |       setTimeout(() => {
370 |         game.state = 'round-winner';
371 |         broadcastState();
372 | 
373 |         setTimeout(() => {
374 |           if (game.round < 5) {
375 |             nextRound();
376 |           } else {
377 |             game.state = 'game-winner';
378 |             broadcastState();
379 |           }
380 |         }, 5000);
381 |       }, 2000);
382 |     }
383 | 
384 |     // Next go
385 |     game.currentPlayer = game.currentPlayer === 1 ? 2 : 1;
386 |     game.currentGoStart = new Date().toISOString();
387 |     game.currentGoEnd = dayjs().add(TURN_DURATION, 'milliseconds').toISOString();
388 | 
389 |     broadcastState();
390 |   }
391 | 
392 |   useIntervalFn(() => {
393 |     const player = isPlayer1.value ? 1 : 2;
394 |     if (game.state !== 'game' || game.currentPlayer !== player) {
395 |       return;
396 |     }
397 | 
398 |     // If our go has ended place a random marker
399 |     const freeIndexes = [0, 1, 2, 3, 4, 5, 6, 7, 8].filter((index) => !grid.value[index]);
400 |     if (dayjs().isAfter(dayjs(game.currentGoEnd))) {
401 |       console.log('Missed turn playing randomly!');
402 |       console.log({ freeIndexes });
403 |       const randomIndex = freeIndexes[Math.floor(Math.random() * freeIndexes.length)];
404 |       console.log({ randomIndex });
405 |       placeMarker(randomIndex);
406 |     }
407 |   }, 200);
408 | 
409 |   return {
410 |     isPlayer1,
411 |     player1Name,
412 |     player1Connected,
413 |     player1Ready,
414 |     player2Name,
415 |     player2Connected,
416 |     player2Ready,
417 |     imReady,
418 |     newGame,
419 |     joinGame,
420 |     disconnect,
421 |     ready,
422 |     // gameCode,
423 |     // gameState,
424 |     // gameRound,
425 |     // gameRoundStartTime,
426 |     // gameCurrentPlayer,
427 |     // gameCurrentGoStart,
428 |     // gameCurrentGoEnd,
429 |     // gameRoundWinners,
430 |     winningMask,
431 |     // state,
432 |     game,
433 |     grid,
434 |     placeMarker,
435 |   };
436 | });
437 | 


--------------------------------------------------------------------------------
/src/components/Logo.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import anime from 'animejs/lib/anime.es.js';
  3 | import { onMounted } from 'vue';
  4 | 
  5 | const props = withDefaults(
  6 |   defineProps<{
  7 |     animateIn?: boolean;
  8 |   }>(),
  9 |   {
 10 |     animateIn: false,
 11 |   }
 12 | );
 13 | 
 14 | function flicker() {
 15 |   anime({
 16 |     targets: ['#letter_8', '#letter_4'],
 17 |     opacity: [1, 0, 1, 0.2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
 18 |     easing: 'linear',
 19 |     direction: 'alternate',
 20 |     duration: 2000,
 21 |     delay: 0,
 22 |     loop: true,
 23 |   });
 24 | }
 25 | 
 26 | function animateIn() {
 27 |   anime({
 28 |     targets: '#letters path',
 29 |     easing: 'easeOutCubic',
 30 |     delay(el: any, i: number) {
 31 |       return i * 100;
 32 |     },
 33 |     scale: [0, 1],
 34 |     opacity: [0, 1],
 35 |     duration: 300,
 36 |   });
 37 | 
 38 |   anime({
 39 |     targets: '#arrow-path',
 40 |     strokeDashoffset: [anime.setDashoffset, 0],
 41 |     easing: 'easeOutCubic',
 42 |     duration: 800,
 43 |     delay: 200,
 44 |   });
 45 | 
 46 |   anime({
 47 |     targets: ['#arrow-tip-top', '#arrow-tip-bottom'],
 48 |     opacity: [0, 1],
 49 |     easing: 'easeOutCubic',
 50 |     duration: 300,
 51 |     delay: 900,
 52 |   });
 53 | 
 54 |   anime
 55 |     .timeline({
 56 |       duration: 300,
 57 |       easing: 'linear',
 58 |     })
 59 |     .add({
 60 |       targets: '#blue-line #square-1',
 61 |       opacity: [0, 1],
 62 |       delay: 600,
 63 |     })
 64 |     .add({
 65 |       targets: '#blue-line #thin-line',
 66 |       strokeDashoffset: [anime.setDashoffset, 0],
 67 |       easing: 'easeOutCubic',
 68 |       duration: 600,
 69 |     })
 70 |     .add(
 71 |       {
 72 |         targets: '#blue-line #thick-line-1 path',
 73 |         strokeDashoffset: [anime.setDashoffset, 0],
 74 |         easing: 'easeOutCubic',
 75 |         duration: 300,
 76 |       },
 77 |       '-=500'
 78 |     )
 79 |     .add(
 80 |       {
 81 |         targets: '#blue-line #thick-line-2 path',
 82 |         strokeDashoffset: [anime.setDashoffset, 0],
 83 |         easing: 'easeOutCubic',
 84 |         duration: 300,
 85 |       },
 86 |       '-=200'
 87 |     );
 88 | 
 89 |   anime({
 90 |     targets: '#logo-end-1',
 91 |     'fill-opacity': [0.27, 1, 0.27],
 92 |     easing: 'easeOutCubic',
 93 |     duration: 600,
 94 |     delay: 1400,
 95 |   });
 96 | 
 97 |   anime({
 98 |     targets: '#logo-end-2',
 99 |     'fill-opacity': [0.27, 1, 0.27],
100 |     easing: 'easeOutCubic',
101 |     duration: 600,
102 |     delay: 1500,
103 |   });
104 | 
105 |   anime({
106 |     targets: '#logo-end-3',
107 |     'fill-opacity': [0.27, 1, 0.27],
108 |     easing: 'easeOutCubic',
109 |     duration: 600,
110 |     delay: 1600,
111 |   });
112 | 
113 |   anime({
114 |     targets: '#logo-end-dot',
115 |     opacity: [1, 0.27, 1],
116 |     easing: 'easeOutCubic',
117 |     duration: 800,
118 |     delay: 1700,
119 |     complete: () => {
120 |       flicker();
121 |     },
122 |   });
123 | }
124 | 
125 | onMounted(() => {
126 |   if (props.animateIn) {
127 |     animateIn();
128 |   } else {
129 |     flicker();
130 |   }
131 | });
132 | </script>
133 | 
134 | <template>
135 |   <svg class="rotate-3" viewBox="0 0 950 182" fill="none" xmlns="http://www.w3.org/2000/svg">
136 |     <g id="Logo">
137 |       <g id="text" clip-path="url(#clip0_4_39)">
138 |         <g id="letters" filter="url(#filter0_d_4_39)">
139 |           <path id="letter" d="M147.274 124V74.932H122.74V61.36H185.38V74.932H160.846V124H147.274Z" fill="white" />
140 |           <path id="letter_2" d="M211.462 124V61.36H224.773V124H211.462Z" fill="white" />
141 |           <path
142 |             id="letter_3"
143 |             d="M266.869 124C264.491 124 262.316 123.42 260.344 122.26C258.43 121.1 256.893 119.563 255.733 117.649C254.573 115.677 253.993 113.502 253.993 111.124V74.236C253.993 71.858 254.573 69.712 255.733 67.798C256.893 65.826 258.43 64.26 260.344 63.1C262.316 61.94 264.491 61.36 266.869 61.36H316.459V74.932H270.349C269.421 74.932 268.696 75.164 268.174 75.628C267.71 76.092 267.478 76.817 267.478 77.803V107.557C267.478 108.485 267.71 109.21 268.174 109.732C268.696 110.196 269.421 110.428 270.349 110.428H316.459V124H266.869Z"
144 |             fill="white"
145 |           />
146 |           <path id="letter_4" d="M368.682 124V74.932H344.148V61.36H406.788V74.932H382.254V124H368.682Z" fill="white" />
147 |           <path
148 |             id="letter_5"
149 |             d="M435.219 124V74.236C435.219 71.858 435.799 69.712 436.959 67.798C438.119 65.826 439.685 64.26 441.657 63.1C443.629 61.94 445.775 61.36 448.095 61.36H484.896C487.274 61.36 489.42 61.94 491.334 63.1C493.306 64.26 494.872 65.826 496.032 67.798C497.25 69.712 497.859 71.858 497.859 74.236V124H484.2V103.816H448.704V124H435.219ZM448.704 90.244H484.2V74.932H448.704V90.244Z"
150 |             fill="white"
151 |           />
152 |           <path
153 |             id="letter_6"
154 |             d="M542.397 124C540.019 124 537.844 123.42 535.872 122.26C533.958 121.1 532.421 119.563 531.261 117.649C530.101 115.677 529.521 113.502 529.521 111.124V74.236C529.521 71.858 530.101 69.712 531.261 67.798C532.421 65.826 533.958 64.26 535.872 63.1C537.844 61.94 540.019 61.36 542.397 61.36H591.987V74.932H545.877C544.949 74.932 544.224 75.164 543.702 75.628C543.238 76.092 543.006 76.817 543.006 77.803V107.557C543.006 108.485 543.238 109.21 543.702 109.732C544.224 110.196 544.949 110.428 545.877 110.428H591.987V124H542.397Z"
155 |             fill="white"
156 |           />
157 |           <path
158 |             id="letter_7"
159 |             d="M635.685 124C633.365 124 631.219 123.42 629.247 122.26C627.275 121.1 625.709 119.534 624.549 117.562C623.389 115.59 622.809 113.444 622.809 111.124V74.236C622.809 71.858 623.389 69.712 624.549 67.798C625.709 65.826 627.275 64.26 629.247 63.1C631.219 61.94 633.365 61.36 635.685 61.36H672.486C674.864 61.36 677.01 61.94 678.924 63.1C680.896 64.26 682.462 65.826 683.622 67.798C684.84 69.712 685.448 71.858 685.448 74.236V80.152H671.789V74.932H636.294V110.428H671.789V101.032H658.218V87.46H685.448V111.124C685.448 113.444 684.84 115.59 683.622 117.562C682.462 119.534 680.896 121.1 678.924 122.26C677.01 123.42 674.864 124 672.486 124H635.685Z"
160 |             fill="white"
161 |           />
162 |           <path
163 |             id="letter_8"
164 |             d="M729.477 124C727.157 124 725.011 123.42 723.039 122.26C721.067 121.1 719.501 119.534 718.341 117.562C717.181 115.59 716.601 113.444 716.601 111.124V74.236C716.601 71.858 717.181 69.712 718.341 67.798C719.501 65.826 721.067 64.26 723.039 63.1C725.011 61.94 727.157 61.36 729.477 61.36H766.365C768.685 61.36 770.802 61.94 772.716 63.1C774.688 64.26 776.254 65.826 777.414 67.798C778.632 69.712 779.241 71.858 779.241 74.236V111.124C779.241 113.444 778.632 115.59 777.414 117.562C776.254 119.534 774.688 121.1 772.716 122.26C770.802 123.42 768.685 124 766.365 124H729.477ZM730.086 110.428H765.582V74.932H730.086V110.428Z"
165 |             fill="white"
166 |           />
167 |         </g>
168 |       </g>
169 |       <rect id="logo-end-1" x="96" y="23" width="10" height="133" fill="#FF7615" fill-opacity="0.27" />
170 |       <rect id="logo-end-2" x="69" y="38" width="10" height="103" fill="#FF7615" fill-opacity="0.27" />
171 |       <rect id="logo-end-3" x="42" y="62" width="10" height="55" fill="#FF7615" fill-opacity="0.27" />
172 |       <g id="logo-end-dot" filter="url(#filter1_d_4_39)">
173 |         <rect x="12" y="81" width="16" height="16" fill="#02FFFF" />
174 |       </g>
175 |       <g id="arrow" filter="url(#filter2_d_4_39)">
176 |         <rect
177 |           id="arrow-tip-top"
178 |           x="833"
179 |           y="64.598"
180 |           width="56"
181 |           height="10"
182 |           transform="rotate(-45 833 64.598)"
183 |           fill="#FF7615"
184 |         />
185 |         <rect
186 |           id="arrow-tip-bottom"
187 |           x="840.071"
188 |           y="57.4731"
189 |           width="56"
190 |           height="10"
191 |           transform="rotate(45 840.071 57.4731)"
192 |           fill="#FF7615"
193 |         />
194 |         <path id="arrow-path" d="M118 151.5H919.5V65H846.5" stroke="#FF7615" stroke-width="10" />
195 |       </g>
196 |       <g id="blue-line">
197 |         <g id="square-1" filter="url(#filter3_d_4_39)">
198 |           <rect x="800" y="56" width="16" height="16" fill="#02FFFF" />
199 |         </g>
200 |         <g id="thick-line-1" filter="url(#filter4_d_4_39)">
201 |           <path d="M775.5 29H559" stroke="#02FFFF" stroke-width="10" />
202 |         </g>
203 |         <g id="thick-line-2" filter="url(#filter5_d_4_39)">
204 |           <path d="M334.5 29H118" stroke="#02FFFF" stroke-width="10" />
205 |         </g>
206 |         <path id="thin-line" d="M808 70.5V29H118.5" stroke="#02FFFF" stroke-opacity="0.32" stroke-width="4" />
207 |       </g>
208 |     </g>
209 |     <defs>
210 |       <filter
211 |         id="filter0_d_4_39"
212 |         x="97.74"
213 |         y="36.36"
214 |         width="706.501"
215 |         height="112.64"
216 |         filterUnits="userSpaceOnUse"
217 |         color-interpolation-filters="sRGB"
218 |       >
219 |         <feFlood flood-opacity="0" result="BackgroundImageFix" />
220 |         <feColorMatrix
221 |           in="SourceAlpha"
222 |           type="matrix"
223 |           values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
224 |           result="hardAlpha"
225 |         />
226 |         <feOffset />
227 |         <feGaussianBlur stdDeviation="12.5" />
228 |         <feComposite in2="hardAlpha" operator="out" />
229 |         <feColorMatrix type="matrix" values="0 0 0 0 0.992157 0 0 0 0 0.466667 0 0 0 0 0.0862745 0 0 0 1 0" />
230 |         <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4_39" />
231 |         <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4_39" result="shape" />
232 |       </filter>
233 |       <filter
234 |         id="filter1_d_4_39"
235 |         x="0"
236 |         y="69"
237 |         width="40"
238 |         height="40"
239 |         filterUnits="userSpaceOnUse"
240 |         color-interpolation-filters="sRGB"
241 |       >
242 |         <feFlood flood-opacity="0" result="BackgroundImageFix" />
243 |         <feColorMatrix
244 |           in="SourceAlpha"
245 |           type="matrix"
246 |           values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
247 |           result="hardAlpha"
248 |         />
249 |         <feOffset />
250 |         <feGaussianBlur stdDeviation="6" />
251 |         <feComposite in2="hardAlpha" operator="out" />
252 |         <feColorMatrix type="matrix" values="0 0 0 0 0.00784314 0 0 0 0 1 0 0 0 0 1 0 0 0 0.84 0" />
253 |         <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4_39" />
254 |         <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4_39" result="shape" />
255 |       </filter>
256 |       <filter
257 |         id="filter2_d_4_39"
258 |         x="93"
259 |         y="0"
260 |         width="856.5"
261 |         height="181.5"
262 |         filterUnits="userSpaceOnUse"
263 |         color-interpolation-filters="sRGB"
264 |       >
265 |         <feFlood flood-opacity="0" result="BackgroundImageFix" />
266 |         <feColorMatrix
267 |           in="SourceAlpha"
268 |           type="matrix"
269 |           values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
270 |           result="hardAlpha"
271 |         />
272 |         <feOffset />
273 |         <feGaussianBlur stdDeviation="12.5" />
274 |         <feComposite in2="hardAlpha" operator="out" />
275 |         <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.462745 0 0 0 0 0.0823529 0 0 0 1 0" />
276 |         <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4_39" />
277 |         <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4_39" result="shape" />
278 |       </filter>
279 |       <filter
280 |         id="filter3_d_4_39"
281 |         x="788"
282 |         y="44"
283 |         width="40"
284 |         height="40"
285 |         filterUnits="userSpaceOnUse"
286 |         color-interpolation-filters="sRGB"
287 |       >
288 |         <feFlood flood-opacity="0" result="BackgroundImageFix" />
289 |         <feColorMatrix
290 |           in="SourceAlpha"
291 |           type="matrix"
292 |           values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
293 |           result="hardAlpha"
294 |         />
295 |         <feOffset />
296 |         <feGaussianBlur stdDeviation="6" />
297 |         <feComposite in2="hardAlpha" operator="out" />
298 |         <feColorMatrix type="matrix" values="0 0 0 0 0.00784314 0 0 0 0 1 0 0 0 0 1 0 0 0 0.84 0" />
299 |         <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4_39" />
300 |         <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4_39" result="shape" />
301 |       </filter>
302 |       <filter
303 |         id="filter4_d_4_39"
304 |         x="551"
305 |         y="16"
306 |         width="232.5"
307 |         height="26"
308 |         filterUnits="userSpaceOnUse"
309 |         color-interpolation-filters="sRGB"
310 |       >
311 |         <feFlood flood-opacity="0" result="BackgroundImageFix" />
312 |         <feColorMatrix
313 |           in="SourceAlpha"
314 |           type="matrix"
315 |           values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
316 |           result="hardAlpha"
317 |         />
318 |         <feOffset />
319 |         <feGaussianBlur stdDeviation="4" />
320 |         <feComposite in2="hardAlpha" operator="out" />
321 |         <feColorMatrix type="matrix" values="0 0 0 0 0.00784314 0 0 0 0 1 0 0 0 0 1 0 0 0 0.84 0" />
322 |         <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4_39" />
323 |         <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4_39" result="shape" />
324 |       </filter>
325 |       <filter
326 |         id="filter5_d_4_39"
327 |         x="110"
328 |         y="16"
329 |         width="232.5"
330 |         height="26"
331 |         filterUnits="userSpaceOnUse"
332 |         color-interpolation-filters="sRGB"
333 |       >
334 |         <feFlood flood-opacity="0" result="BackgroundImageFix" />
335 |         <feColorMatrix
336 |           in="SourceAlpha"
337 |           type="matrix"
338 |           values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
339 |           result="hardAlpha"
340 |         />
341 |         <feOffset />
342 |         <feGaussianBlur stdDeviation="4" />
343 |         <feComposite in2="hardAlpha" operator="out" />
344 |         <feColorMatrix type="matrix" values="0 0 0 0 0.00784314 0 0 0 0 1 0 0 0 0 1 0 0 0 0.84 0" />
345 |         <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4_39" />
346 |         <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4_39" result="shape" />
347 |       </filter>
348 |       <clipPath id="clip0_4_39">
349 |         <rect width="708" height="113" fill="white" transform="translate(97 36)" />
350 |       </clipPath>
351 |     </defs>
352 |   </svg>
353 | </template>
354 | 
355 | <style scoped>
356 | #letters path,
357 | #blue-line * {
358 |   transform-box: fill-box;
359 |   transform-origin: center;
360 | }
361 | </style>
362 | 


--------------------------------------------------------------------------------
/src/components/GridGame.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | import anime from 'animejs/lib/anime.es.js';
  3 | import { storeToRefs } from 'pinia';
  4 | import { computed, ref, watch } from 'vue';
  5 | import GridCell from './GridCell.vue';
  6 | import { useGameStore } from '../stores/game';
  7 | 
  8 | const store = useGameStore();
  9 | const { grid, game, winningMask } = storeToRefs(store);
 10 | 
 11 | const gridContainer = ref<HTMLDivElement>();
 12 | 
 13 | const playerColour = computed(() => {
 14 |   const colourMap = {
 15 |     1: '#02FFFF',
 16 |     2: '#FF7615',
 17 |   };
 18 | 
 19 |   return colourMap[game.value.currentPlayer];
 20 | });
 21 | 
 22 | watch(
 23 |   grid,
 24 |   () => {
 25 |     console.log('Play animation');
 26 |     anime({
 27 |       targets: '.lines-1 line',
 28 |       // stroke: ['#fff', '#FF7615', '#fff'],
 29 |       scale: [1, 1.7, 1],
 30 |       easing: 'easeOutCubic',
 31 |       delay: (el, i) => i * 10,
 32 |       duration: 300,
 33 |     });
 34 |     anime({
 35 |       targets: '.lines-2 line',
 36 |       // stroke: ['#fff', '#FF7615', '#fff'],
 37 |       scale: [1, 1.7, 1],
 38 |       easing: 'easeOutCubic',
 39 |       delay: (el, i) => i * 10,
 40 |       duration: 300,
 41 |     });
 42 | 
 43 |     // anime({
 44 |     //   targets: '.grid-container',
 45 |     //   scale: 1.05,
 46 |     //   // rotate: [anime.random(-2, 2), anime.random(-2, 2), anime.random(-2, 2), anime.random(-2, 2)],
 47 |     //   // // translateX: [
 48 |     //   // //   anime.random(-2, 2),
 49 |     //   // //   anime.random(-2, 2),
 50 |     //   // //   anime.random(-2, 2),
 51 |     //   // //   anime.random(-2, 2),
 52 |     //   // //   anime.random(-2, 2),
 53 |     //   // //   anime.random(-2, 2),
 54 |     //   // //   anime.random(-2, 2),
 55 |     //   // // ],
 56 |     //   easing: 'easeOutQuad',
 57 |     //   direction: 'alternate',
 58 |     //   duration: 50,
 59 |     // });
 60 |   },
 61 |   { deep: true }
 62 | );
 63 | </script>
 64 | 
 65 | <template>
 66 |   <div ref="gridContainer" class="relative grid-container">
 67 |     <svg
 68 |       class="relative z-10 pointer-events-none w-full"
 69 |       viewBox="0 0 345 342"
 70 |       fill="none"
 71 |       xmlns="http://www.w3.org/2000/svg"
 72 |     >
 73 |       <g id="Grid">
 74 |         <g id="Grid_2">
 75 |           <mask
 76 |             id="mask0_18_91"
 77 |             style="mask-type: alpha"
 78 |             maskUnits="userSpaceOnUse"
 79 |             x="29"
 80 |             y="25"
 81 |             width="288"
 82 |             height="290"
 83 |           >
 84 |             <g id="Corner mask">
 85 |               <path
 86 |                 id="Subtract"
 87 |                 fill-rule="evenodd"
 88 |                 clip-rule="evenodd"
 89 |                 d="M291.132 25H53.3844V49.3844H29V289.745H53.3844V315L291.132 315V291.486H316.387V49.3844H291.132V25ZM116.087 200.916H141.342V226.171H116.087V200.916ZM141.342 114.7H116.087V139.955H141.342V114.7ZM203.174 200.916H228.429V226.171H203.174V200.916ZM228.429 114.7H203.174V139.955H228.429V114.7Z"
 90 |                 fill="#C4C4C4"
 91 |               />
 92 |             </g>
 93 |           </mask>
 94 |           <g mask="url(#mask0_18_91)">
 95 |             <g id="Grid_3">
 96 |               <g id="Main grid">
 97 |                 <rect
 98 |                   id="Rectangle 23"
 99 |                   x="40.3213"
100 |                   y="38.0631"
101 |                   width="264.745"
102 |                   height="264.745"
103 |                   stroke="#505050"
104 |                   stroke-width="3.48348"
105 |                 />
106 |                 <line
107 |                   id="Line 3"
108 |                   x1="128.279"
109 |                   y1="38.9281"
110 |                   x2="129.153"
111 |                   y2="301.931"
112 |                   stroke="#505050"
113 |                   stroke-width="3.48348"
114 |                 />
115 |                 <line
116 |                   id="Line 5"
117 |                   x1="303.767"
118 |                   y1="126.455"
119 |                   x2="40.764"
120 |                   y2="127.329"
121 |                   stroke="#505050"
122 |                   stroke-width="3.48348"
123 |                 />
124 |                 <line
125 |                   id="Line 4"
126 |                   x1="216.237"
127 |                   y1="36.3213"
128 |                   x2="216.237"
129 |                   y2="301.937"
130 |                   stroke="#505050"
131 |                   stroke-width="3.48348"
132 |                 />
133 |                 <line
134 |                   id="Line 6"
135 |                   x1="303.767"
136 |                   y1="214.413"
137 |                   x2="40.764"
138 |                   y2="215.287"
139 |                   stroke="#505050"
140 |                   stroke-width="3.48348"
141 |                 />
142 |               </g>
143 |             </g>
144 |           </g>
145 |         </g>
146 |         <g id="Corners" filter="url(#filter0_d_18_91)">
147 |           <rect id="Rectangle 28" x="33.3544" y="29.3544" width="13.0631" height="13.0631" :fill="playerColour" />
148 |           <rect id="Rectangle 30" x="33.3544" y="298.453" width="13.0631" height="13.0631" :fill="playerColour" />
149 |           <rect id="Rectangle 29" x="298.099" y="29.3544" width="13.0631" height="13.0631" :fill="playerColour" />
150 |           <rect id="Rectangle 31" x="298.099" y="298.453" width="13.0631" height="13.0631" :fill="playerColour" />
151 |         </g>
152 |         <g id="Centers" filter="url(#filter1_i_18_91)">
153 |           <g id="Ellipse 3">
154 |             <circle cx="128.715" cy="127.327" r="6.53153" :fill="playerColour" />
155 |           </g>
156 |           <g id="Ellipse 5">
157 |             <circle cx="128.715" cy="213.544" r="6.53153" :fill="playerColour" />
158 |           </g>
159 |           <g id="Ellipse 4">
160 |             <circle cx="216.673" cy="127.327" r="6.53153" :fill="playerColour" />
161 |           </g>
162 |           <g id="Ellipse 6">
163 |             <circle cx="216.673" cy="213.544" r="6.53153" :fill="playerColour" />
164 |           </g>
165 |         </g>
166 | 
167 |         <g id="Line decoration">
168 |           <g id="Top lines decoration">
169 |             <g id="Frame 4" class="lines-1" filter="url(#filter6_dd_18_91)">
170 |               <line id="Line 7" x1="64" y1="29" x2="64" y2="23" stroke="white" stroke-width="2" />
171 |               <line id="Line 8" x1="88" y1="29" x2="88" y2="20" stroke="white" stroke-width="2" />
172 |               <line id="Line 9" x1="112" y1="29" x2="112" y2="17" stroke="white" stroke-width="2" />
173 |               <line id="Line 10" x1="136" y1="29" x2="136" y2="15" stroke="white" stroke-width="2" />
174 |               <line id="Line 11" x1="160" y1="29" x2="160" y2="11" stroke="white" stroke-width="2" />
175 |               <line id="Line 12" x1="184" y1="29" x2="184" y2="11" stroke="white" stroke-width="2" />
176 |               <line id="Line 13" x1="208" y1="29" x2="208" y2="15" stroke="white" stroke-width="2" />
177 |               <line id="Line 17" x1="232" y1="29" x2="232" y2="17" stroke="white" stroke-width="2" />
178 |               <line id="Line 18" x1="256" y1="29" x2="256" y2="20" stroke="white" stroke-width="2" />
179 |               <line id="Line 19" x1="280" y1="29" x2="280" y2="23" stroke="white" stroke-width="2" />
180 |             </g>
181 |           </g>
182 |           <g id="Bottom lines decoration">
183 |             <g id="Bottom lines decoration_2" class="lines-1" filter="url(#filter7_dd_18_91)">
184 |               <line id="Line 7_2" x1="280" y1="313" x2="280" y2="319" stroke="white" stroke-width="2" />
185 |               <line id="Line 8_2" x1="256" y1="313" x2="256" y2="322" stroke="white" stroke-width="2" />
186 |               <line id="Line 9_2" x1="232" y1="313" x2="232" y2="325" stroke="white" stroke-width="2" />
187 |               <line id="Line 10_2" x1="208" y1="313" x2="208" y2="327" stroke="white" stroke-width="2" />
188 |               <line id="Line 11_2" x1="184" y1="313" x2="184" y2="331" stroke="white" stroke-width="2" />
189 |               <line id="Line 12_2" x1="160" y1="313" x2="160" y2="331" stroke="white" stroke-width="2" />
190 |               <line id="Line 13_2" x1="136" y1="313" x2="136" y2="327" stroke="white" stroke-width="2" />
191 |               <line id="Line 17_2" x1="112" y1="313" x2="112" y2="325" stroke="white" stroke-width="2" />
192 |               <line id="Line 18_2" x1="88" y1="313" x2="88" y2="322" stroke="white" stroke-width="2" />
193 |               <line id="Line 19_2" x1="64" y1="313" x2="64" y2="319" stroke="white" stroke-width="2" />
194 |             </g>
195 |           </g>
196 |           <g id="Bottom lines decoration_3">
197 |             <g id="Bottom lines decoration_4" class="lines-1" filter="url(#filter8_dd_18_91)">
198 |               <line id="Line 7_3" x1="29" y1="279" x2="23" y2="279" stroke="white" stroke-width="2" />
199 |               <line id="Line 8_3" x1="29" y1="255" x2="20" y2="255" stroke="white" stroke-width="2" />
200 |               <line id="Line 9_3" x1="29" y1="231" x2="17" y2="231" stroke="white" stroke-width="2" />
201 |               <line id="Line 10_3" x1="29" y1="207" x2="15" y2="207" stroke="white" stroke-width="2" />
202 |               <line id="Line 11_3" x1="29" y1="183" x2="11" y2="183" stroke="white" stroke-width="2" />
203 |               <line id="Line 12_3" x1="29" y1="159" x2="11" y2="159" stroke="white" stroke-width="2" />
204 |               <line id="Line 13_3" x1="29" y1="135" x2="15" y2="135" stroke="white" stroke-width="2" />
205 |               <line id="Line 17_3" x1="29" y1="111" x2="17" y2="111" stroke="white" stroke-width="2" />
206 |               <line id="Line 18_3" x1="29" y1="87" x2="20" y2="87" stroke="white" stroke-width="2" />
207 |               <line id="Line 19_3" x1="29" y1="63" x2="23" y2="63" stroke="white" stroke-width="2" />
208 |             </g>
209 |           </g>
210 |           <g id="Bottom lines decoration_5">
211 |             <g id="Bottom lines decoration_6" class="lines-1" filter="url(#filter9_dd_18_91)">
212 |               <line id="Line 7_4" x1="316" y1="61" x2="322" y2="61" stroke="white" stroke-width="2" />
213 |               <line id="Line 8_4" x1="316" y1="85" x2="325" y2="85" stroke="white" stroke-width="2" />
214 |               <line id="Line 9_4" x1="316" y1="109" x2="328" y2="109" stroke="white" stroke-width="2" />
215 |               <line id="Line 10_4" x1="316" y1="133" x2="330" y2="133" stroke="white" stroke-width="2" />
216 |               <line id="Line 11_4" x1="316" y1="157" x2="334" y2="157" stroke="white" stroke-width="2" />
217 |               <line id="Line 12_4" x1="316" y1="181" x2="334" y2="181" stroke="white" stroke-width="2" />
218 |               <line id="Line 13_4" x1="316" y1="205" x2="330" y2="205" stroke="white" stroke-width="2" />
219 |               <line id="Line 17_4" x1="316" y1="229" x2="328" y2="229" stroke="white" stroke-width="2" />
220 |               <line id="Line 18_4" x1="316" y1="253" x2="325" y2="253" stroke="white" stroke-width="2" />
221 |               <line id="Line 19_4" x1="316" y1="277" x2="322" y2="277" stroke="white" stroke-width="2" />
222 |             </g>
223 |           </g>
224 |         </g>
225 |         <!-- <g id="Line decoration">
226 |           <g id="Top lines decoration">
227 |             <g id="Frame 2" class="lines-1" filter="url(#filter6_d_18_91)">
228 |               <line id="Line 7" x1="64" y1="29" x2="64" y2="23" stroke="white" stroke-width="2" />
229 |               <line id="Line 8" x1="88" y1="29" x2="88" y2="20" stroke="white" stroke-width="2" />
230 |               <line id="Line 9" x1="112" y1="29" x2="112" y2="17" stroke="white" stroke-width="2" />
231 |               <line id="Line 10" x1="136" y1="29" x2="136" y2="15" stroke="white" stroke-width="2" />
232 |               <line id="Line 11" x1="160" y1="29" x2="160" y2="11" stroke="white" stroke-width="2" />
233 |               <line id="Line 12" x1="184" y1="29" x2="184" y2="11" stroke="white" stroke-width="2" />
234 |               <line id="Line 13" x1="208" y1="29" x2="208" y2="15" stroke="white" stroke-width="2" />
235 |               <line id="Line 17" x1="232" y1="29" x2="232" y2="17" stroke="white" stroke-width="2" />
236 |               <line id="Line 18" x1="256" y1="29" x2="256" y2="20" stroke="white" stroke-width="2" />
237 |               <line id="Line 19" x1="280" y1="29" x2="280" y2="23" stroke="white" stroke-width="2" />
238 |             </g>
239 |             <g class="lines-2" filter="url(#filter7_d_18_91)">
240 |               <line id="Line 7_2" x1="64" y1="29" x2="64" y2="23" stroke="white" stroke-width="2" />
241 |               <line id="Line 8_2" x1="88" y1="29" x2="88" y2="20" stroke="white" stroke-width="2" />
242 |               <line id="Line 9_2" x1="112" y1="29" x2="112" y2="17" stroke="white" stroke-width="2" />
243 |               <line id="Line 10_2" x1="136" y1="29" x2="136" y2="15" stroke="white" stroke-width="2" />
244 |               <line id="Line 11_2" x1="160" y1="29" x2="160" y2="11" stroke="white" stroke-width="2" />
245 |               <line id="Line 12_2" x1="184" y1="29" x2="184" y2="11" stroke="white" stroke-width="2" />
246 |               <line id="Line 13_2" x1="208" y1="29" x2="208" y2="15" stroke="white" stroke-width="2" />
247 |               <line id="Line 17_2" x1="232" y1="29" x2="232" y2="17" stroke="white" stroke-width="2" />
248 |               <line id="Line 18_2" x1="256" y1="29" x2="256" y2="20" stroke="white" stroke-width="2" />
249 |               <line id="Line 19_2" x1="280" y1="29" x2="280" y2="23" stroke="white" stroke-width="2" />
250 |             </g>
251 |           </g>
252 |           <g id="Bottom lines decoration">
253 |             <g id="Frame 5" class="lines-1" filter="url(#filter8_d_18_91)">
254 |               <line id="Line 7_3" x1="280" y1="313" x2="280" y2="319" stroke="white" stroke-width="2" />
255 |               <line id="Line 8_3" x1="256" y1="313" x2="256" y2="322" stroke="white" stroke-width="2" />
256 |               <line id="Line 9_3" x1="232" y1="313" x2="232" y2="325" stroke="white" stroke-width="2" />
257 |               <line id="Line 10_3" x1="208" y1="313" x2="208" y2="327" stroke="white" stroke-width="2" />
258 |               <line id="Line 11_3" x1="184" y1="313" x2="184" y2="331" stroke="white" stroke-width="2" />
259 |               <line id="Line 12_3" x1="160" y1="313" x2="160" y2="331" stroke="white" stroke-width="2" />
260 |               <line id="Line 13_3" x1="136" y1="313" x2="136" y2="327" stroke="white" stroke-width="2" />
261 |               <line id="Line 17_3" x1="112" y1="313" x2="112" y2="325" stroke="white" stroke-width="2" />
262 |               <line id="Line 18_3" x1="88" y1="313" x2="88" y2="322" stroke="white" stroke-width="2" />
263 |               <line id="Line 19_3" x1="64" y1="313" x2="64" y2="319" stroke="white" stroke-width="2" />
264 |             </g>
265 |             <g id="Bottom lines decoration_2" class="lines-2" filter="url(#filter9_d_18_91)">
266 |               <line id="Line 7_4" x1="280" y1="313" x2="280" y2="319" stroke="white" stroke-width="2" />
267 |               <line id="Line 8_4" x1="256" y1="313" x2="256" y2="322" stroke="white" stroke-width="2" />
268 |               <line id="Line 9_4" x1="232" y1="313" x2="232" y2="325" stroke="white" stroke-width="2" />
269 |               <line id="Line 10_4" x1="208" y1="313" x2="208" y2="327" stroke="white" stroke-width="2" />
270 |               <line id="Line 11_4" x1="184" y1="313" x2="184" y2="331" stroke="white" stroke-width="2" />
271 |               <line id="Line 12_4" x1="160" y1="313" x2="160" y2="331" stroke="white" stroke-width="2" />
272 |               <line id="Line 13_4" x1="136" y1="313" x2="136" y2="327" stroke="white" stroke-width="2" />
273 |               <line id="Line 17_4" x1="112" y1="313" x2="112" y2="325" stroke="white" stroke-width="2" />
274 |               <line id="Line 18_4" x1="88" y1="313" x2="88" y2="322" stroke="white" stroke-width="2" />
275 |               <line id="Line 19_4" x1="64" y1="313" x2="64" y2="319" stroke="white" stroke-width="2" />
276 |             </g>
277 |           </g>
278 |           <g id="Bottom lines decoration_3">
279 |             <g id="Frame 5_2" class="lines-1" filter="url(#filter10_d_18_91)">
280 |               <line id="Line 7_5" x1="29" y1="279" x2="23" y2="279" stroke="white" stroke-width="2" />
281 |               <line id="Line 8_5" x1="29" y1="255" x2="20" y2="255" stroke="white" stroke-width="2" />
282 |               <line id="Line 9_5" x1="29" y1="231" x2="17" y2="231" stroke="white" stroke-width="2" />
283 |               <line id="Line 10_5" x1="29" y1="207" x2="15" y2="207" stroke="white" stroke-width="2" />
284 |               <line id="Line 11_5" x1="29" y1="183" x2="11" y2="183" stroke="white" stroke-width="2" />
285 |               <line id="Line 12_5" x1="29" y1="159" x2="11" y2="159" stroke="white" stroke-width="2" />
286 |               <line id="Line 13_5" x1="29" y1="135" x2="15" y2="135" stroke="white" stroke-width="2" />
287 |               <line id="Line 17_5" x1="29" y1="111" x2="17" y2="111" stroke="white" stroke-width="2" />
288 |               <line id="Line 18_5" x1="29" y1="87" x2="20" y2="87" stroke="white" stroke-width="2" />
289 |               <line id="Line 19_5" x1="29" y1="63" x2="23" y2="63" stroke="white" stroke-width="2" />
290 |             </g>
291 |             <g id="Bottom lines decoration_4" class="lines-2" filter="url(#filter11_d_18_91)">
292 |               <line id="Line 7_6" x1="29" y1="279" x2="23" y2="279" stroke="white" stroke-width="2" />
293 |               <line id="Line 8_6" x1="29" y1="255" x2="20" y2="255" stroke="white" stroke-width="2" />
294 |               <line id="Line 9_6" x1="29" y1="231" x2="17" y2="231" stroke="white" stroke-width="2" />
295 |               <line id="Line 10_6" x1="29" y1="207" x2="15" y2="207" stroke="white" stroke-width="2" />
296 |               <line id="Line 11_6" x1="29" y1="183" x2="11" y2="183" stroke="white" stroke-width="2" />
297 |               <line id="Line 12_6" x1="29" y1="159" x2="11" y2="159" stroke="white" stroke-width="2" />
298 |               <line id="Line 13_6" x1="29" y1="135" x2="15" y2="135" stroke="white" stroke-width="2" />
299 |               <line id="Line 17_6" x1="29" y1="111" x2="17" y2="111" stroke="white" stroke-width="2" />
300 |               <line id="Line 18_6" x1="29" y1="87" x2="20" y2="87" stroke="white" stroke-width="2" />
301 |               <line id="Line 19_6" x1="29" y1="63" x2="23" y2="63" stroke="white" stroke-width="2" />
302 |             </g>
303 |           </g>
304 |           <g id="Bottom lines decoration_5">
305 |             <g id="Frame 5_3" class="lines-1" filter="url(#filter12_d_18_91)">
306 |               <line id="Line 7_7" x1="316" y1="61" x2="322" y2="61" stroke="white" stroke-width="2" />
307 |               <line id="Line 8_7" x1="316" y1="85" x2="325" y2="85" stroke="white" stroke-width="2" />
308 |               <line id="Line 9_7" x1="316" y1="109" x2="328" y2="109" stroke="white" stroke-width="2" />
309 |               <line id="Line 10_7" x1="316" y1="133" x2="330" y2="133" stroke="white" stroke-width="2" />
310 |               <line id="Line 11_7" x1="316" y1="157" x2="334" y2="157" stroke="white" stroke-width="2" />
311 |               <line id="Line 12_7" x1="316" y1="181" x2="334" y2="181" stroke="white" stroke-width="2" />
312 |               <line id="Line 13_7" x1="316" y1="205" x2="330" y2="205" stroke="white" stroke-width="2" />
313 |               <line id="Line 17_7" x1="316" y1="229" x2="328" y2="229" stroke="white" stroke-width="2" />
314 |               <line id="Line 18_7" x1="316" y1="253" x2="325" y2="253" stroke="white" stroke-width="2" />
315 |               <line id="Line 19_7" x1="316" y1="277" x2="322" y2="277" stroke="white" stroke-width="2" />
316 |             </g>
317 |             <g id="Bottom lines decoration_6" class="lines-2" filter="url(#filter13_d_18_91)">
318 |               <line id="Line 7_8" x1="316" y1="61" x2="322" y2="61" stroke="white" stroke-width="2" />
319 |               <line id="Line 8_8" x1="316" y1="85" x2="325" y2="85" stroke="white" stroke-width="2" />
320 |               <line id="Line 9_8" x1="316" y1="109" x2="328" y2="109" stroke="white" stroke-width="2" />
321 |               <line id="Line 10_8" x1="316" y1="133" x2="330" y2="133" stroke="white" stroke-width="2" />
322 |               <line id="Line 11_8" x1="316" y1="157" x2="334" y2="157" stroke="white" stroke-width="2" />
323 |               <line id="Line 12_8" x1="316" y1="181" x2="334" y2="181" stroke="white" stroke-width="2" />
324 |               <line id="Line 13_8" x1="316" y1="205" x2="330" y2="205" stroke="white" stroke-width="2" />
325 |               <line id="Line 17_8" x1="316" y1="229" x2="328" y2="229" stroke="white" stroke-width="2" />
326 |               <line id="Line 18_8" x1="316" y1="253" x2="325" y2="253" stroke="white" stroke-width="2" />
327 |               <line id="Line 19_8" x1="316" y1="277" x2="322" y2="277" stroke="white" stroke-width="2" />
328 |             </g>
329 |           </g>
330 |         </g> -->
331 |       </g>
332 |       <defs>
333 |         <filter
334 |           id="filter0_d_18_91"
335 |           x="8.96999"
336 |           y="4.96997"
337 |           width="326.577"
338 |           height="330.931"
339 |           filterUnits="userSpaceOnUse"
340 |           color-interpolation-filters="sRGB"
341 |         >
342 |           <feFlood flood-opacity="0" result="BackgroundImageFix" />
343 |           <feColorMatrix
344 |             in="SourceAlpha"
345 |             type="matrix"
346 |             values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
347 |             result="hardAlpha"
348 |           />
349 |           <feOffset />
350 |           <feGaussianBlur stdDeviation="12.1922" />
351 |           <feComposite in2="hardAlpha" operator="out" />
352 |           <feColorMatrix type="matrix" values="0 0 0 0 0.00784314 0 0 0 0 1 0 0 0 0 1 0 0 0 0.84 0" />
353 |           <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_18_91" />
354 |           <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_18_91" result="shape" />
355 |         </filter>
356 |         <filter
357 |           id="filter1_i_18_91"
358 |           x="122.183"
359 |           y="120.796"
360 |           width="101.021"
361 |           height="99.2793"
362 |           filterUnits="userSpaceOnUse"
363 |           color-interpolation-filters="sRGB"
364 |         >
365 |           <feFlood flood-opacity="0" result="BackgroundImageFix" />
366 |           <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
367 |           <feColorMatrix
368 |             in="SourceAlpha"
369 |             type="matrix"
370 |             values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
371 |             result="hardAlpha"
372 |           />
373 |           <feOffset />
374 |           <feGaussianBlur stdDeviation="2.5" />
375 |           <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
376 |           <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0" />
377 |           <feBlend mode="normal" in2="shape" result="effect1_innerShadow_18_91" />
378 |         </filter>
379 |         <filter
380 |           id="filter6_dd_18_91"
381 |           x="52"
382 |           y="-9"
383 |           width="240"
384 |           height="49"
385 |           filterUnits="userSpaceOnUse"
386 |           color-interpolation-filters="sRGB"
387 |         >
388 |           <feFlood flood-opacity="0" result="BackgroundImageFix" />
389 |           <feColorMatrix
390 |             in="SourceAlpha"
391 |             type="matrix"
392 |             values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
393 |             result="hardAlpha"
394 |           />
395 |           <feOffset />
396 |           <feGaussianBlur stdDeviation="5.5" />
397 |           <feComposite in2="hardAlpha" operator="out" />
398 |           <feColorMatrix type="matrix" values="0 0 0 0 0.00784314 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" />
399 |           <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_18_91" />
400 |           <feColorMatrix
401 |             in="SourceAlpha"
402 |             type="matrix"
403 |             values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
404 |             result="hardAlpha"
405 |           />
406 |           <feOffset />
407 |           <feGaussianBlur stdDeviation="5.5" />
408 |           <feComposite in2="hardAlpha" operator="out" />
409 |           <feColorMatrix type="matrix" values="0 0 0 0 0.00784314 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" />
410 |           <feBlend mode="normal" in2="effect1_dropShadow_18_91" result="effect2_dropShadow_18_91" />
411 |           <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_18_91" result="shape" />
412 |         </filter>
413 |         <filter
414 |           id="filter7_dd_18_91"
415 |           x="52"
416 |           y="302"
417 |           width="240"
418 |           height="49"
419 |           filterUnits="userSpaceOnUse"
420 |           color-interpolation-filters="sRGB"
421 |         >
422 |           <feFlood flood-opacity="0" result="BackgroundImageFix" />
423 |           <feColorMatrix
424 |             in="SourceAlpha"
425 |             type="matrix"
426 |             values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
427 |             result="hardAlpha"
428 |           />
429 |           <feOffset />
430 |           <feGaussianBlur stdDeviation="5.5" />
431 |           <feComposite in2="hardAlpha" operator="out" />
432 |           <feColorMatrix type="matrix" values="0 0 0 0 0.00784314 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" />
433 |           <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_18_91" />
434 |           <feColorMatrix
435 |             in="SourceAlpha"
436 |             type="matrix"
437 |             values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
438 |             result="hardAlpha"
439 |           />
440 |           <feOffset />
441 |           <feGaussianBlur stdDeviation="5.5" />
442 |           <feComposite in2="hardAlpha" operator="out" />
443 |           <feColorMatrix type="matrix" values="0 0 0 0 0.00784314 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" />
444 |           <feBlend mode="normal" in2="effect1_dropShadow_18_91" result="effect2_dropShadow_18_91" />
445 |           <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_18_91" result="shape" />
446 |         </filter>
447 |         <filter
448 |           id="filter8_dd_18_91"
449 |           x="-9"
450 |           y="51"
451 |           width="49"
452 |           height="240"
453 |           filterUnits="userSpaceOnUse"
454 |           color-interpolation-filters="sRGB"
455 |         >
456 |           <feFlood flood-opacity="0" result="BackgroundImageFix" />
457 |           <feColorMatrix
458 |             in="SourceAlpha"
459 |             type="matrix"
460 |             values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
461 |             result="hardAlpha"
462 |           />
463 |           <feOffset />
464 |           <feGaussianBlur stdDeviation="5.5" />
465 |           <feComposite in2="hardAlpha" operator="out" />
466 |           <feColorMatrix type="matrix" values="0 0 0 0 0.00784314 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" />
467 |           <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_18_91" />
468 |           <feColorMatrix
469 |             in="SourceAlpha"
470 |             type="matrix"
471 |             values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
472 |             result="hardAlpha"
473 |           />
474 |           <feOffset />
475 |           <feGaussianBlur stdDeviation="5.5" />
476 |           <feComposite in2="hardAlpha" operator="out" />
477 |           <feColorMatrix type="matrix" values="0 0 0 0 0.00784314 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" />
478 |           <feBlend mode="normal" in2="effect1_dropShadow_18_91" result="effect2_dropShadow_18_91" />
479 |           <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_18_91" result="shape" />
480 |         </filter>
481 |         <filter
482 |           id="filter9_dd_18_91"
483 |           x="305"
484 |           y="49"
485 |           width="49"
486 |           height="240"
487 |           filterUnits="userSpaceOnUse"
488 |           color-interpolation-filters="sRGB"
489 |         >
490 |           <feFlood flood-opacity="0" result="BackgroundImageFix" />
491 |           <feColorMatrix
492 |             in="SourceAlpha"
493 |             type="matrix"
494 |             values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
495 |             result="hardAlpha"
496 |           />
497 |           <feOffset />
498 |           <feGaussianBlur stdDeviation="5.5" />
499 |           <feComposite in2="hardAlpha" operator="out" />
500 |           <feColorMatrix type="matrix" values="0 0 0 0 0.00784314 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" />
501 |           <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_18_91" />
502 |           <feColorMatrix
503 |             in="SourceAlpha"
504 |             type="matrix"
505 |             values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
506 |             result="hardAlpha"
507 |           />
508 |           <feOffset />
509 |           <feGaussianBlur stdDeviation="5.5" />
510 |           <feComposite in2="hardAlpha" operator="out" />
511 |           <feColorMatrix type="matrix" values="0 0 0 0 0.00784314 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" />
512 |           <feBlend mode="normal" in2="effect1_dropShadow_18_91" result="effect2_dropShadow_18_91" />
513 |           <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_18_91" result="shape" />
514 |         </filter>
515 |       </defs>
516 |     </svg>
517 | 
518 |     <div class="absolute inset-0">
519 |       <GridCell
520 |         :contents="grid[0]"
521 |         :highlight="winningMask?.[0]"
522 |         class="h-[26%] w-[25%] absolute left-[12%] top-[11%]"
523 |         @click="store.placeMarker(0)"
524 |       />
525 |       <GridCell
526 |         :contents="grid[1]"
527 |         :highlight="winningMask?.[1]"
528 |         class="h-[26%] w-[25%] absolute left-[37.5%] top-[11%]"
529 |         @click="store.placeMarker(1)"
530 |       />
531 |       <GridCell
532 |         :contents="grid[2]"
533 |         :highlight="winningMask?.[2]"
534 |         class="h-[26%] w-[25%] absolute left-[63%] top-[11%]"
535 |         @click="store.placeMarker(2)"
536 |       />
537 | 
538 |       <GridCell
539 |         :contents="grid[3]"
540 |         :highlight="winningMask?.[3]"
541 |         class="h-[26%] w-[25%] absolute left-[12%] top-[37%]"
542 |         @click="store.placeMarker(3)"
543 |       />
544 |       <GridCell
545 |         :contents="grid[4]"
546 |         :highlight="winningMask?.[4]"
547 |         class="h-[26%] w-[25%] absolute left-[37.5%] top-[37%]"
548 |         @click="store.placeMarker(4)"
549 |       />
550 |       <GridCell
551 |         :contents="grid[5]"
552 |         :highlight="winningMask?.[5]"
553 |         class="h-[26%] w-[25%] absolute left-[63%] top-[37%]"
554 |         @click="store.placeMarker(5)"
555 |       />
556 | 
557 |       <GridCell
558 |         :contents="grid[6]"
559 |         :highlight="winningMask?.[6]"
560 |         class="h-[26%] w-[25%] absolute left-[12%] top-[63%]"
561 |         @click="store.placeMarker(6)"
562 |       />
563 |       <GridCell
564 |         :contents="grid[7]"
565 |         :highlight="winningMask?.[7]"
566 |         class="h-[26%] w-[25%] absolute left-[37.5%] top-[63%]"
567 |         @click="store.placeMarker(7)"
568 |       />
569 |       <GridCell
570 |         :contents="grid[8]"
571 |         :highlight="winningMask?.[8]"
572 |         class="h-[26%] w-[25%] absolute left-[63%] top-[63%]"
573 |         @click="store.placeMarker(8)"
574 |       />
575 |     </div>
576 |   </div>
577 | </template>
578 | 
579 | <style scoped>
580 | svg * {
581 |   transform-box: fill-box;
582 |   transform-origin: center;
583 | }
584 | </style>
585 | 


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