├── .eslintrc.cjs
├── .gitignore
├── .prettierrc.json
├── README.md
├── env.d.ts
├── index.html
├── package-lock.json
├── package.json
├── public
├── assets
│ ├── base.css
│ ├── first.png
│ ├── image
│ │ ├── 1.jpg
│ │ ├── 10.jpg
│ │ ├── 11.jpg
│ │ ├── 12.jpg
│ │ ├── 2.jpg
│ │ ├── 3.jpg
│ │ ├── 4.jpg
│ │ ├── 5.jpg
│ │ ├── 6.png
│ │ ├── 7.jpg
│ │ ├── 8.jpg
│ │ ├── 9.jpg
│ │ ├── background.jpg
│ │ ├── button.png
│ │ ├── congratulation.png
│ │ ├── home.png
│ │ ├── infoboard.png
│ │ ├── play.jpg
│ │ ├── play.png
│ │ ├── question.jpg
│ │ ├── selectcard.png
│ │ ├── title.png
│ │ └── wood.jpg
│ ├── logo.svg
│ └── main.css
└── favicon.png
├── src
├── App.vue
├── assets
│ ├── base.css
│ ├── logo.svg
│ └── main.css
├── main.ts
├── router
│ └── index.ts
├── stores
│ └── timer.ts
└── views
│ ├── CardSelectView.vue
│ ├── HomeView.vue
│ └── RoomView.vue
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
├── tsconfig.vitest.json
├── vite.config.ts
└── vitest.config.ts
/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 | require('@rushstack/eslint-patch/modern-module-resolution')
3 |
4 | module.exports = {
5 | root: true,
6 | 'extends': [
7 | 'plugin:vue/vue3-essential',
8 | 'eslint:recommended',
9 | '@vue/eslint-config-typescript',
10 | '@vue/eslint-config-prettier/skip-formatting'
11 | ],
12 | parserOptions: {
13 | ecmaVersion: 'latest'
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | .DS_Store
12 | dist
13 | dist-ssr
14 | coverage
15 | *.local
16 |
17 | /cypress/videos/
18 | /cypress/screenshots/
19 |
20 | # Editor directories and files
21 | .vscode/*
22 | !.vscode/extensions.json
23 | .idea
24 | *.suo
25 | *.ntvs*
26 | *.njsproj
27 | *.sln
28 | *.sw?
29 |
30 | *.tsbuildinfo
31 |
--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/prettierrc",
3 | "semi": false,
4 | "tabWidth": 2,
5 | "singleQuote": true,
6 | "printWidth": 100,
7 | "trailingComma": "none"
8 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # memory-card
2 |
3 | This template should help get you started developing with Vue 3 in Vite.
4 |
5 | ## Recommended IDE Setup
6 |
7 | [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
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 [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
12 |
13 | ## Customize configuration
14 |
15 | See [Vite Configuration Reference](https://vitejs.dev/config/).
16 |
17 | ## Project Setup
18 |
19 | ```sh
20 | npm install
21 | ```
22 |
23 | ### Compile and Hot-Reload for Development
24 |
25 | ```sh
26 | npm run dev
27 | ```
28 |
29 | ### Type-Check, Compile and Minify for Production
30 |
31 | ```sh
32 | npm run build
33 | ```
34 |
35 | ### Run Unit Tests with [Vitest](https://vitest.dev/)
36 |
37 | ```sh
38 | npm run test:unit
39 | ```
40 |
41 | ### Lint with [ESLint](https://eslint.org/)
42 |
43 | ```sh
44 | npm run lint
45 | ```
46 |
--------------------------------------------------------------------------------
/env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Memory Game
8 |
9 |
10 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "memory-game",
3 | "version": "0.0.0",
4 | "private": true,
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "run-p type-check \"build-only {@}\" --",
9 | "preview": "vite preview",
10 | "test:unit": "vitest",
11 | "build-only": "vite build",
12 | "type-check": "vue-tsc --build --force",
13 | "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
14 | "format": "prettier --write src/"
15 | },
16 | "dependencies": {
17 | "canvas-confetti": "^1.9.3",
18 | "pinia": "^2.1.7",
19 | "vue": "^3.4.21",
20 | "vue-router": "^4.3.2"
21 | },
22 | "devDependencies": {
23 | "@rushstack/eslint-patch": "^1.8.0",
24 | "@tsconfig/node20": "^20.1.4",
25 | "@types/canvas-confetti": "^1.6.4",
26 | "@types/jsdom": "^21.1.6",
27 | "@types/node": "^20.12.5",
28 | "@vitejs/plugin-vue": "^5.0.4",
29 | "@vitejs/plugin-vue-jsx": "^3.1.0",
30 | "@vue/eslint-config-prettier": "^9.0.0",
31 | "@vue/eslint-config-typescript": "^13.0.0",
32 | "@vue/test-utils": "^2.4.5",
33 | "@vue/tsconfig": "^0.5.1",
34 | "eslint": "^8.57.0",
35 | "eslint-plugin-vue": "^9.23.0",
36 | "jsdom": "^24.0.0",
37 | "npm-run-all2": "^6.1.2",
38 | "prettier": "^3.2.5",
39 | "typescript": "~5.4.0",
40 | "vite": "^5.2.8",
41 | "vite-plugin-vue-devtools": "^7.0.25",
42 | "vitest": "^1.4.0",
43 | "vue-tsc": "^2.0.11"
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/public/assets/base.css:
--------------------------------------------------------------------------------
1 | /* color palette from */
2 | /* :root {
3 | --vt-c-white: #ffffff;
4 | --vt-c-white-soft: #f8f8f8;
5 | --vt-c-white-mute: #f2f2f2;
6 |
7 | --vt-c-black: #181818;
8 | --vt-c-black-soft: #222222;
9 | --vt-c-black-mute: #282828;
10 |
11 | --vt-c-indigo: #2c3e50;
12 |
13 | --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
14 | --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
15 | --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
16 | --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
17 |
18 | --vt-c-text-light-1: var(--vt-c-indigo);
19 | --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
20 | --vt-c-text-dark-1: var(--vt-c-white);
21 | --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
22 | } */
23 |
24 | /* semantic color variables for this project */
25 | /* :root {
26 | --color-background: var(--vt-c-white);
27 | --color-background-soft: var(--vt-c-white-soft);
28 | --color-background-mute: var(--vt-c-white-mute);
29 |
30 | --color-border: var(--vt-c-divider-light-2);
31 | --color-border-hover: var(--vt-c-divider-light-1);
32 |
33 | --color-heading: var(--vt-c-text-light-1);
34 | --color-text: var(--vt-c-text-light-1);
35 |
36 | --section-gap: 160px;
37 | }
38 |
39 | @media (prefers-color-scheme: dark) {
40 | :root {
41 | --color-background: var(--vt-c-black);
42 | --color-background-soft: var(--vt-c-black-soft);
43 | --color-background-mute: var(--vt-c-black-mute);
44 |
45 | --color-border: var(--vt-c-divider-dark-2);
46 | --color-border-hover: var(--vt-c-divider-dark-1);
47 |
48 | --color-heading: var(--vt-c-text-dark-1);
49 | --color-text: var(--vt-c-text-dark-2);
50 | }
51 | }
52 |
53 | *,
54 | *::before,
55 | *::after {
56 | box-sizing: border-box;
57 | margin: 0;
58 | font-weight: normal;
59 | }
60 |
61 | body {
62 | min-height: 100vh;
63 | color: var(--color-text);
64 | background: var(--color-background);
65 | transition:
66 | color 0.5s,
67 | background-color 0.5s;
68 | line-height: 1.6;
69 | font-family:
70 | Inter,
71 | -apple-system,
72 | BlinkMacSystemFont,
73 | 'Segoe UI',
74 | Roboto,
75 | Oxygen,
76 | Ubuntu,
77 | Cantarell,
78 | 'Fira Sans',
79 | 'Droid Sans',
80 | 'Helvetica Neue',
81 | sans-serif;
82 | font-size: 15px;
83 | text-rendering: optimizeLegibility;
84 | -webkit-font-smoothing: antialiased;
85 | -moz-osx-font-smoothing: grayscale;
86 | } */
87 |
--------------------------------------------------------------------------------
/public/assets/first.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cresolution128/vue3-memory-game/e7776d22718761bd63039767a1dc0b96cc821cef/public/assets/first.png
--------------------------------------------------------------------------------
/public/assets/image/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cresolution128/vue3-memory-game/e7776d22718761bd63039767a1dc0b96cc821cef/public/assets/image/1.jpg
--------------------------------------------------------------------------------
/public/assets/image/10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cresolution128/vue3-memory-game/e7776d22718761bd63039767a1dc0b96cc821cef/public/assets/image/10.jpg
--------------------------------------------------------------------------------
/public/assets/image/11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cresolution128/vue3-memory-game/e7776d22718761bd63039767a1dc0b96cc821cef/public/assets/image/11.jpg
--------------------------------------------------------------------------------
/public/assets/image/12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cresolution128/vue3-memory-game/e7776d22718761bd63039767a1dc0b96cc821cef/public/assets/image/12.jpg
--------------------------------------------------------------------------------
/public/assets/image/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cresolution128/vue3-memory-game/e7776d22718761bd63039767a1dc0b96cc821cef/public/assets/image/2.jpg
--------------------------------------------------------------------------------
/public/assets/image/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cresolution128/vue3-memory-game/e7776d22718761bd63039767a1dc0b96cc821cef/public/assets/image/3.jpg
--------------------------------------------------------------------------------
/public/assets/image/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cresolution128/vue3-memory-game/e7776d22718761bd63039767a1dc0b96cc821cef/public/assets/image/4.jpg
--------------------------------------------------------------------------------
/public/assets/image/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cresolution128/vue3-memory-game/e7776d22718761bd63039767a1dc0b96cc821cef/public/assets/image/5.jpg
--------------------------------------------------------------------------------
/public/assets/image/6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cresolution128/vue3-memory-game/e7776d22718761bd63039767a1dc0b96cc821cef/public/assets/image/6.png
--------------------------------------------------------------------------------
/public/assets/image/7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cresolution128/vue3-memory-game/e7776d22718761bd63039767a1dc0b96cc821cef/public/assets/image/7.jpg
--------------------------------------------------------------------------------
/public/assets/image/8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cresolution128/vue3-memory-game/e7776d22718761bd63039767a1dc0b96cc821cef/public/assets/image/8.jpg
--------------------------------------------------------------------------------
/public/assets/image/9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cresolution128/vue3-memory-game/e7776d22718761bd63039767a1dc0b96cc821cef/public/assets/image/9.jpg
--------------------------------------------------------------------------------
/public/assets/image/background.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cresolution128/vue3-memory-game/e7776d22718761bd63039767a1dc0b96cc821cef/public/assets/image/background.jpg
--------------------------------------------------------------------------------
/public/assets/image/button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cresolution128/vue3-memory-game/e7776d22718761bd63039767a1dc0b96cc821cef/public/assets/image/button.png
--------------------------------------------------------------------------------
/public/assets/image/congratulation.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cresolution128/vue3-memory-game/e7776d22718761bd63039767a1dc0b96cc821cef/public/assets/image/congratulation.png
--------------------------------------------------------------------------------
/public/assets/image/home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cresolution128/vue3-memory-game/e7776d22718761bd63039767a1dc0b96cc821cef/public/assets/image/home.png
--------------------------------------------------------------------------------
/public/assets/image/infoboard.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cresolution128/vue3-memory-game/e7776d22718761bd63039767a1dc0b96cc821cef/public/assets/image/infoboard.png
--------------------------------------------------------------------------------
/public/assets/image/play.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cresolution128/vue3-memory-game/e7776d22718761bd63039767a1dc0b96cc821cef/public/assets/image/play.jpg
--------------------------------------------------------------------------------
/public/assets/image/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cresolution128/vue3-memory-game/e7776d22718761bd63039767a1dc0b96cc821cef/public/assets/image/play.png
--------------------------------------------------------------------------------
/public/assets/image/question.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cresolution128/vue3-memory-game/e7776d22718761bd63039767a1dc0b96cc821cef/public/assets/image/question.jpg
--------------------------------------------------------------------------------
/public/assets/image/selectcard.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cresolution128/vue3-memory-game/e7776d22718761bd63039767a1dc0b96cc821cef/public/assets/image/selectcard.png
--------------------------------------------------------------------------------
/public/assets/image/title.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cresolution128/vue3-memory-game/e7776d22718761bd63039767a1dc0b96cc821cef/public/assets/image/title.png
--------------------------------------------------------------------------------
/public/assets/image/wood.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cresolution128/vue3-memory-game/e7776d22718761bd63039767a1dc0b96cc821cef/public/assets/image/wood.jpg
--------------------------------------------------------------------------------
/public/assets/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/public/assets/main.css:
--------------------------------------------------------------------------------
1 | /* @import './base.css'; */
2 |
3 | /* #app {
4 | max-width: 1280px;
5 | margin: 0 auto;
6 | padding: 2rem;
7 | font-weight: normal;
8 | }
9 |
10 | a,
11 | .green {
12 | text-decoration: none;
13 | color: hsla(160, 100%, 37%, 1);
14 | transition: 0.4s;
15 | padding: 3px;
16 | }
17 |
18 | @media (hover: hover) {
19 | a:hover {
20 | background-color: hsla(160, 100%, 37%, 0.2);
21 | }
22 | }
23 |
24 | @media (min-width: 1024px) {
25 | body {
26 | display: flex;
27 | place-items: center;
28 | }
29 |
30 | #app {
31 | display: grid;
32 | grid-template-columns: 1fr 1fr;
33 | padding: 0 2rem;
34 | }
35 | } */
36 |
--------------------------------------------------------------------------------
/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cresolution128/vue3-memory-game/e7776d22718761bd63039767a1dc0b96cc821cef/public/favicon.png
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
13 |
14 |
15 |
16 |
17 |
18 |
37 |
--------------------------------------------------------------------------------
/src/assets/base.css:
--------------------------------------------------------------------------------
1 | /* color palette from */
2 | /* :root {
3 | --vt-c-white: #ffffff;
4 | --vt-c-white-soft: #f8f8f8;
5 | --vt-c-white-mute: #f2f2f2;
6 |
7 | --vt-c-black: #181818;
8 | --vt-c-black-soft: #222222;
9 | --vt-c-black-mute: #282828;
10 |
11 | --vt-c-indigo: #2c3e50;
12 |
13 | --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
14 | --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
15 | --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
16 | --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
17 |
18 | --vt-c-text-light-1: var(--vt-c-indigo);
19 | --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
20 | --vt-c-text-dark-1: var(--vt-c-white);
21 | --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
22 | } */
23 |
24 | /* semantic color variables for this project */
25 | /* :root {
26 | --color-background: var(--vt-c-white);
27 | --color-background-soft: var(--vt-c-white-soft);
28 | --color-background-mute: var(--vt-c-white-mute);
29 |
30 | --color-border: var(--vt-c-divider-light-2);
31 | --color-border-hover: var(--vt-c-divider-light-1);
32 |
33 | --color-heading: var(--vt-c-text-light-1);
34 | --color-text: var(--vt-c-text-light-1);
35 |
36 | --section-gap: 160px;
37 | }
38 |
39 | @media (prefers-color-scheme: dark) {
40 | :root {
41 | --color-background: var(--vt-c-black);
42 | --color-background-soft: var(--vt-c-black-soft);
43 | --color-background-mute: var(--vt-c-black-mute);
44 |
45 | --color-border: var(--vt-c-divider-dark-2);
46 | --color-border-hover: var(--vt-c-divider-dark-1);
47 |
48 | --color-heading: var(--vt-c-text-dark-1);
49 | --color-text: var(--vt-c-text-dark-2);
50 | }
51 | }
52 |
53 | *,
54 | *::before,
55 | *::after {
56 | box-sizing: border-box;
57 | margin: 0;
58 | font-weight: normal;
59 | }
60 |
61 | body {
62 | min-height: 100vh;
63 | color: var(--color-text);
64 | background: var(--color-background);
65 | transition:
66 | color 0.5s,
67 | background-color 0.5s;
68 | line-height: 1.6;
69 | font-family:
70 | Inter,
71 | -apple-system,
72 | BlinkMacSystemFont,
73 | 'Segoe UI',
74 | Roboto,
75 | Oxygen,
76 | Ubuntu,
77 | Cantarell,
78 | 'Fira Sans',
79 | 'Droid Sans',
80 | 'Helvetica Neue',
81 | sans-serif;
82 | font-size: 15px;
83 | text-rendering: optimizeLegibility;
84 | -webkit-font-smoothing: antialiased;
85 | -moz-osx-font-smoothing: grayscale;
86 | } */
87 |
--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/assets/main.css:
--------------------------------------------------------------------------------
1 | /* @import './base.css'; */
2 |
3 | /* #app {
4 | max-width: 1280px;
5 | margin: 0 auto;
6 | padding: 2rem;
7 | font-weight: normal;
8 | }
9 |
10 | a,
11 | .green {
12 | text-decoration: none;
13 | color: hsla(160, 100%, 37%, 1);
14 | transition: 0.4s;
15 | padding: 3px;
16 | }
17 |
18 | @media (hover: hover) {
19 | a:hover {
20 | background-color: hsla(160, 100%, 37%, 0.2);
21 | }
22 | }
23 |
24 | @media (min-width: 1024px) {
25 | body {
26 | display: flex;
27 | place-items: center;
28 | }
29 |
30 | #app {
31 | display: grid;
32 | grid-template-columns: 1fr 1fr;
33 | padding: 0 2rem;
34 | }
35 | } */
36 |
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import './assets/main.css'
2 |
3 | import { createApp } from 'vue'
4 | import { createPinia } from 'pinia'
5 |
6 | import App from './App.vue'
7 | import router from './router'
8 |
9 | const app = createApp(App)
10 |
11 | app.use(createPinia())
12 | app.use(router)
13 |
14 | app.mount('#app')
15 |
--------------------------------------------------------------------------------
/src/router/index.ts:
--------------------------------------------------------------------------------
1 | import { createRouter, createWebHistory } from 'vue-router'
2 | import HomeView from '../views/HomeView.vue'
3 |
4 | const router = createRouter({
5 | history: createWebHistory(import.meta.env.BASE_URL),
6 | routes: [
7 | {
8 | path: '/',
9 | name: 'home',
10 | component: HomeView
11 | },
12 | {
13 | path: '/card-select',
14 | name: 'card-select',
15 | component: () => import('../views/CardSelectView.vue')
16 | },
17 | {
18 | path: '/room/:number',
19 | name: 'room',
20 | component: () => import('../views/RoomView.vue')
21 | },
22 | ]
23 | })
24 |
25 | export default router
26 |
--------------------------------------------------------------------------------
/src/stores/timer.ts:
--------------------------------------------------------------------------------
1 | import { ref } from 'vue'
2 | import { defineStore } from 'pinia'
3 |
4 | export const useTimerStore = defineStore('timer', () => {
5 | const count = ref(0)
6 | function increment() {
7 | count.value++
8 | }
9 | function resetTimer() {
10 | count.value = 0;
11 | }
12 |
13 | return { count, increment, resetTimer }
14 | })
15 |
--------------------------------------------------------------------------------
/src/views/CardSelectView.vue:
--------------------------------------------------------------------------------
1 |
14 |
15 |
16 |
25 |
26 |
27 |

28 |
29 |

35 |
36 |
37 |
42 | 2
43 |
44 |
49 | 4
50 |
51 |
56 | 6
57 |
58 |
63 | 9
64 |
65 |
70 | 12
71 |
72 |
73 |
74 |
75 |
76 |
77 |
113 |
--------------------------------------------------------------------------------
/src/views/HomeView.vue:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 |
22 |
23 |

24 |
25 |
26 |
37 |

48 |

59 |

70 |


91 |

102 |
103 |
110 |
111 |
112 |
113 |
114 |
115 |
169 |
--------------------------------------------------------------------------------
/src/views/RoomView.vue:
--------------------------------------------------------------------------------
1 |
239 |
240 |
241 |
251 |
255 |
259 |

260 |
269 |
279 |
280 | Time : {{ lastTime }}
281 |
282 |
283 | Turn : {{ turn }}
284 |
285 |
286 |
296 |
297 |
298 |
307 |
314 |
317 |
318 |
handleClick(e, card)"
323 | >
324 |
328 |
329 |
330 |
331 |
332 |
Time
333 | {{ count }}
334 |
335 |
336 |
337 |
Turns
338 | {{ turn }}
339 |
340 |
341 |
342 |
Matches
343 | {{ match }}
344 |
345 |
346 |
347 |
348 |
349 |
350 |
351 |
538 |
--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@vue/tsconfig/tsconfig.dom.json",
3 | "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
4 | "exclude": ["src/**/__tests__/*"],
5 | "compilerOptions": {
6 | "composite": true,
7 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
8 |
9 | "baseUrl": ".",
10 | "paths": {
11 | "@/*": ["./src/*"]
12 | }
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "files": [],
3 | "references": [
4 | {
5 | "path": "./tsconfig.node.json"
6 | },
7 | {
8 | "path": "./tsconfig.app.json"
9 | },
10 | {
11 | "path": "./tsconfig.vitest.json"
12 | }
13 | ]
14 | }
15 |
--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@tsconfig/node20/tsconfig.json",
3 | "include": [
4 | "vite.config.*",
5 | "vitest.config.*",
6 | "cypress.config.*",
7 | "nightwatch.conf.*",
8 | "playwright.config.*"
9 | ],
10 | "compilerOptions": {
11 | "composite": true,
12 | "noEmit": true,
13 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
14 |
15 | "module": "ESNext",
16 | "moduleResolution": "Bundler",
17 | "types": ["node"]
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/tsconfig.vitest.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.app.json",
3 | "exclude": [],
4 | "compilerOptions": {
5 | "composite": true,
6 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.vitest.tsbuildinfo",
7 |
8 | "lib": [],
9 | "types": ["node", "jsdom"]
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { fileURLToPath, URL } from 'node:url'
2 |
3 | import { defineConfig } from 'vite'
4 | import vue from '@vitejs/plugin-vue'
5 | import vueJsx from '@vitejs/plugin-vue-jsx'
6 | import VueDevTools from 'vite-plugin-vue-devtools'
7 |
8 | // https://vitejs.dev/config/
9 | export default defineConfig({
10 | plugins: [
11 | vue(),
12 | vueJsx(),
13 | VueDevTools(),
14 | ],
15 | resolve: {
16 | alias: {
17 | '@': fileURLToPath(new URL('./src', import.meta.url))
18 | }
19 | }
20 | })
21 |
--------------------------------------------------------------------------------
/vitest.config.ts:
--------------------------------------------------------------------------------
1 | import { fileURLToPath } from 'node:url'
2 | import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
3 | import viteConfig from './vite.config'
4 |
5 | export default mergeConfig(
6 | viteConfig,
7 | defineConfig({
8 | test: {
9 | environment: 'jsdom',
10 | exclude: [...configDefaults.exclude, 'e2e/**'],
11 | root: fileURLToPath(new URL('./', import.meta.url))
12 | }
13 | })
14 | )
15 |
--------------------------------------------------------------------------------