├── env.d.ts
├── src
    ├── Application
    │   ├── types.ts
    │   ├── AppStartedUsecase.ts
    │   ├── StopGameUsecase.ts
    │   ├── StartGameUsecase.ts
    │   └── OpenCardUsecase.ts
    ├── Presentation
    │   ├── view
    │   │   ├── assets
    │   │   │   ├── card
    │   │   │   │   ├── 01.jpg
    │   │   │   │   ├── 02.jpg
    │   │   │   │   ├── 03.jpg
    │   │   │   │   ├── 04.jpg
    │   │   │   │   ├── 05.jpg
    │   │   │   │   ├── 06.jpg
    │   │   │   │   ├── 07.jpg
    │   │   │   │   └── 08.jpg
    │   │   │   ├── github-mark.png
    │   │   │   ├── bg-8-bit-nature.jpg
    │   │   │   ├── logo.svg
    │   │   │   ├── main.css
    │   │   │   └── base.css
    │   │   ├── utils
    │   │   │   ├── get-image-url.ts
    │   │   │   └── theme.ts
    │   │   ├── router
    │   │   │   └── index.ts
    │   │   ├── scss
    │   │   │   └── main.scss
    │   │   ├── components
    │   │   │   ├── AppModal.vue
    │   │   │   ├── GameCard.vue
    │   │   │   └── AppHeader.vue
    │   │   └── pages
    │   │   │   └── PageHome.vue
    │   ├── presenter
    │   │   ├── GamePresenter.ts
    │   │   ├── ShowedCardsPresenter.ts
    │   │   ├── PairCardAttempListPresenter.ts
    │   │   └── CardPresenter.ts
    │   └── usecaseMap
    │   │   └── index.ts
    ├── Domain
    │   ├── Game.ts
    │   └── Card.ts
    ├── App.vue
    ├── Data
    │   ├── game.store.ts
    │   └── card.store.ts
    ├── Repositories
    │   ├── GameRepository.ts
    │   └── CardRepository.ts
    └── main.ts
├── public
    └── favicon.ico
├── .vscode
    └── extensions.json
├── tsconfig.vitest.json
├── tsconfig.config.json
├── tsconfig.json
├── tsconfig.app.json
├── vite.config.ts
├── .gitignore
├── .eslintrc.cjs
├── index.html
├── package.json
└── README.md


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


--------------------------------------------------------------------------------
/src/Application/types.ts:
--------------------------------------------------------------------------------
1 | export interface Usecase {
2 |     execute: () => unknown
3 | }
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/attikos/ddd-vue-match-game/HEAD/public/favicon.ico


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


--------------------------------------------------------------------------------
/src/Presentation/view/assets/card/01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/attikos/ddd-vue-match-game/HEAD/src/Presentation/view/assets/card/01.jpg


--------------------------------------------------------------------------------
/src/Presentation/view/assets/card/02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/attikos/ddd-vue-match-game/HEAD/src/Presentation/view/assets/card/02.jpg


--------------------------------------------------------------------------------
/src/Presentation/view/assets/card/03.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/attikos/ddd-vue-match-game/HEAD/src/Presentation/view/assets/card/03.jpg


--------------------------------------------------------------------------------
/src/Presentation/view/assets/card/04.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/attikos/ddd-vue-match-game/HEAD/src/Presentation/view/assets/card/04.jpg


--------------------------------------------------------------------------------
/src/Presentation/view/assets/card/05.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/attikos/ddd-vue-match-game/HEAD/src/Presentation/view/assets/card/05.jpg


--------------------------------------------------------------------------------
/src/Presentation/view/assets/card/06.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/attikos/ddd-vue-match-game/HEAD/src/Presentation/view/assets/card/06.jpg


--------------------------------------------------------------------------------
/src/Presentation/view/assets/card/07.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/attikos/ddd-vue-match-game/HEAD/src/Presentation/view/assets/card/07.jpg


--------------------------------------------------------------------------------
/src/Presentation/view/assets/card/08.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/attikos/ddd-vue-match-game/HEAD/src/Presentation/view/assets/card/08.jpg


--------------------------------------------------------------------------------
/src/Presentation/view/assets/github-mark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/attikos/ddd-vue-match-game/HEAD/src/Presentation/view/assets/github-mark.png


--------------------------------------------------------------------------------
/src/Presentation/view/assets/bg-8-bit-nature.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/attikos/ddd-vue-match-game/HEAD/src/Presentation/view/assets/bg-8-bit-nature.jpg


--------------------------------------------------------------------------------
/src/Domain/Game.ts:
--------------------------------------------------------------------------------
1 | export enum GameStatus {
2 |     inProgress,
3 |     stopped,
4 | }
5 | 
6 | export interface GameState {
7 |     gameStatus: GameStatus
8 | }
9 | 


--------------------------------------------------------------------------------
/src/Presentation/view/utils/get-image-url.ts:
--------------------------------------------------------------------------------
1 | export function getImageUrl(name: string) {
2 |     return new URL(`../assets/${name}`, import.meta.url).href
3 | }
4 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | </script>
 3 | 
 4 | <template>
 5 |     <RouterView></RouterView>
 6 | </template>
 7 | 
 8 | <style lang="scss">
 9 | </style>
10 | 


--------------------------------------------------------------------------------
/tsconfig.vitest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.app.json",
 3 |   "exclude": [],
 4 |   "compilerOptions": {
 5 |     "composite": true,
 6 |     "lib": [],
 7 |     "types": ["node", "jsdom"]
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/tsconfig.config.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "@vue/tsconfig/tsconfig.node.json",
3 |   "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
4 |   "compilerOptions": {
5 |     "composite": true,
6 |     "types": ["node"]
7 |   }
8 | }
9 | 


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


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


--------------------------------------------------------------------------------
/src/Presentation/view/assets/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"  xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>


--------------------------------------------------------------------------------
/src/Presentation/presenter/GamePresenter.ts:
--------------------------------------------------------------------------------
 1 | import { useGameStore } from '@/Data/game.store';
 2 | import { storeToRefs } from 'pinia';
 3 | import type { Ref } from 'vue';
 4 | import type { GameStatus } from '@/Domain/Game';
 5 | 
 6 | export function GamePresenter(): Ref<GameStatus> {
 7 |     const { gameStatus } = storeToRefs(useGameStore());
 8 | 
 9 |     return gameStatus;
10 | }
11 | 


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


--------------------------------------------------------------------------------
/src/Presentation/presenter/ShowedCardsPresenter.ts:
--------------------------------------------------------------------------------
 1 | import { useCardStore } from '@/Data/card.store';
 2 | import { storeToRefs } from 'pinia';
 3 | import type { Ref } from 'vue';
 4 | import type { ShowedCards } from '@/Domain/Card';
 5 | 
 6 | export function ShowedCardsPresenter(): Ref<ShowedCards> {
 7 |     const { showedCards } = storeToRefs(useCardStore());
 8 | 
 9 |     return showedCards;
10 | }
11 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/src/Presentation/view/router/index.ts:
--------------------------------------------------------------------------------
 1 | import PageHome from '@/Presentation/view/pages/PageHome.vue';
 2 | import { createRouter, createWebHashHistory } from 'vue-router'
 3 | 
 4 | export const createAppRouter = () => {
 5 |     const routes = [{ path: '/', component: PageHome }];
 6 | 
 7 |     const router = createRouter({
 8 |         history: createWebHashHistory(),
 9 |         routes,
10 |     });
11 | 
12 |     return router;
13 | }
14 | 


--------------------------------------------------------------------------------
/src/Presentation/presenter/PairCardAttempListPresenter.ts:
--------------------------------------------------------------------------------
 1 | import { useCardStore } from '@/Data/card.store';
 2 | import { storeToRefs } from 'pinia';
 3 | import type { Ref } from 'vue';
 4 | import type { PairCardAttempList } from '@/Domain/Card';
 5 | 
 6 | export function PairCardAttempListPresenter(): Ref<PairCardAttempList> {
 7 |     const { pairCardAttempList } = storeToRefs(useCardStore());
 8 | 
 9 |     return pairCardAttempList;
10 | }
11 | 


--------------------------------------------------------------------------------
/src/Application/AppStartedUsecase.ts:
--------------------------------------------------------------------------------
 1 | import type { Usecase } from '@/Application/types';
 2 | import type { CardRepository } from '@/Repositories/CardRepository';
 3 | import { cardImageAsset } from '@/Domain/Card';
 4 | 
 5 | export class AppStartedUsecase implements Usecase {
 6 |     constructor(
 7 |         private cardRepository: CardRepository,
 8 |     ) {}
 9 | 
10 |     async execute(): Promise<void> {
11 |         this.cardRepository.setCardImageAsset(cardImageAsset);
12 |     }
13 | }
14 | 


--------------------------------------------------------------------------------
/src/Presentation/view/utils/theme.ts:
--------------------------------------------------------------------------------
 1 | export type Theme = 'cyan' | 'green' | 'blue' | 'purple' | 'red' | 'yellow';
 2 | 
 3 | export const setTheme = (theme: Theme) => {
 4 |     const htmpEl = document.getElementsByTagName('html')[0];
 5 | 
 6 |     htmpEl.className = '';
 7 |     htmpEl.classList.add(theme);
 8 |     window.localStorage.setItem('theme', theme);
 9 | }
10 | 
11 | export const getSavedTheme = (): Theme => {
12 |     const theme = window.localStorage.getItem('theme') as Theme;
13 | 
14 |     return theme;
15 | }
16 | 


--------------------------------------------------------------------------------
/src/Presentation/presenter/CardPresenter.ts:
--------------------------------------------------------------------------------
 1 | import { useCardStore } from '@/Data/card.store';
 2 | import { storeToRefs } from 'pinia';
 3 | import type { Ref } from 'vue';
 4 | 
 5 | export interface CardPresenter {
 6 |     cardImageAsset: Ref<string[]>
 7 |     currentCards: Ref<string[]>
 8 | }
 9 | 
10 | export function CardPresenter(): CardPresenter {
11 |     const { cardImageAsset, currentCards } = storeToRefs(useCardStore());
12 | 
13 |     return {
14 |         cardImageAsset,
15 |         currentCards,
16 |     };
17 | }
18 | 


--------------------------------------------------------------------------------
/src/Data/game.store.ts:
--------------------------------------------------------------------------------
 1 | import { defineStore } from 'pinia';
 2 | import type { GameState } from '@/Domain/Game';
 3 | import { GameStatus } from '@/Domain/Game';
 4 | 
 5 | export const useGameStore = defineStore('game', {
 6 |     state: (): GameState => ({
 7 |         gameStatus : GameStatus.inProgress,
 8 |     }),
 9 | 
10 |     actions: {
11 |         setGameStatus(gameStatus: GameStatus) {
12 |             this.gameStatus = gameStatus;
13 |         },
14 |         resetGameStatus() {
15 |             this.gameStatus = GameStatus.stopped;
16 |         },
17 |     }
18 | });
19 | 


--------------------------------------------------------------------------------
/src/Repositories/GameRepository.ts:
--------------------------------------------------------------------------------
 1 | import { useGameStore } from '@/Data/game.store';
 2 | import type { GameStatus } from '@/Domain/Game';
 3 | 
 4 | export class GameRepository {
 5 |     private _store: ReturnType<typeof useGameStore>;
 6 | 
 7 |     constructor() {
 8 |         this._store = useGameStore();
 9 |     }
10 | 
11 |     get store() {
12 |         return this._store;
13 |     }
14 | 
15 |     setGameStatus(gameStatus: GameStatus) {
16 |         this.store.setGameStatus(gameStatus);
17 |     }
18 | 
19 |     resetGameStatus() {
20 |         this.store.resetGameStatus();
21 |     }
22 | 
23 | 
24 | }
25 | 


--------------------------------------------------------------------------------
/.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 |     ],
11 |     parserOptions: {
12 |         ecmaVersion: 'latest',
13 |     },
14 |     rules: {
15 |         quotes            : ['error', 'single'],
16 |         'vue/html-indent': ['error', 4],
17 |         'vue/multi-word-component-names': 0,
18 |         '@typescript-eslint/indent': ['error', 4],
19 |     },
20 | };
21 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue';
 2 | import { createPinia } from 'pinia';
 3 | import { createAppRouter } from '@/Presentation/view/router';
 4 | import App from '@/App.vue';
 5 | import '@/Presentation/view/scss/main.scss';
 6 | import { mapUsecase } from '@/Presentation/usecaseMap';
 7 | 
 8 | const app = createApp(App);
 9 | 
10 | app.use(createPinia());
11 | 
12 | const router = createAppRouter();
13 | app.use(router);
14 | 
15 | router.isReady().then(async () => {
16 |     const appStartedUsecase = mapUsecase('AppStartedUsecase');
17 | 
18 |     await appStartedUsecase();
19 | 
20 |     app.mount('#app');
21 | });
22 | 


--------------------------------------------------------------------------------
/src/Presentation/view/assets/main.css:
--------------------------------------------------------------------------------
 1 | @import './base.css';
 2 | 
 3 | #app {
 4 |   max-width: 1280px;
 5 |   margin: 0 auto;
 6 |   padding: 2rem;
 7 | 
 8 |   font-weight: normal;
 9 | }
10 | 
11 | a,
12 | .green {
13 |   text-decoration: none;
14 |   color: hsla(160, 100%, 37%, 1);
15 |   transition: 0.4s;
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/Application/StopGameUsecase.ts:
--------------------------------------------------------------------------------
 1 | import type { Usecase } from '@/Application/types';
 2 | import { GameStatus } from '@/Domain/Game';
 3 | import type { CardRepository } from '@/Repositories/CardRepository';
 4 | import type { GameRepository } from '@/Repositories/GameRepository';
 5 | 
 6 | export class StopGameUsecase implements Usecase {
 7 |     constructor(
 8 |         private cardRepository: CardRepository,
 9 |         private gameRepository: GameRepository
10 |     ) {}
11 | 
12 |     async execute(): Promise<void> {
13 |         const STOP_GAME_ANIMATION_DELAY = 400;
14 | 
15 |         if (this.gameRepository.store.gameStatus === GameStatus.stopped) {
16 |             return;
17 |         }
18 | 
19 |         this.cardRepository.resetPairCardAttempList();
20 |         this.cardRepository.openAllShowedCards();
21 | 
22 |         setTimeout(() => {
23 |             this.gameRepository.setGameStatus(GameStatus.stopped);
24 |         }, STOP_GAME_ANIMATION_DELAY)
25 |     }
26 | }
27 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <link rel="icon" href="/favicon.ico">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | 
 8 |     <link rel="preload" as="image"  href="src/Presentation/view/assets/card/01.jpg" />
 9 |     <link rel="preload" as="image"  href="src/Presentation/view/assets/card/02.jpg" />
10 |     <link rel="preload" as="image"  href="src/Presentation/view/assets/card/03.jpg" />
11 |     <link rel="preload" as="image"  href="src/Presentation/view/assets/card/04.jpg" />
12 |     <link rel="preload" as="image"  href="src/Presentation/view/assets/card/05.jpg" />
13 |     <link rel="preload" as="image"  href="src/Presentation/view/assets/card/06.jpg" />
14 |     <link rel="preload" as="image"  href="src/Presentation/view/assets/card/07.jpg" />
15 |     <link rel="preload" as="image"  href="src/Presentation/view/assets/card/08.jpg" />
16 | 
17 |     <title>Match Match Game</title>
18 |   </head>
19 |   <body>
20 |     <div id="app"></div>
21 |     <script type="module" src="/src/main.ts"></script>
22 |   </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/src/Application/StartGameUsecase.ts:
--------------------------------------------------------------------------------
 1 | import type { Usecase } from '@/Application/types';
 2 | import { getRandomGameCards } from '@/Domain/Card';
 3 | import { GameStatus } from '@/Domain/Game';
 4 | import type { CardRepository } from '@/Repositories/CardRepository';
 5 | import type { GameRepository } from '@/Repositories/GameRepository';
 6 | 
 7 | export class StartGameUsecase implements Usecase {
 8 |     constructor(
 9 |         private cardRepository: CardRepository,
10 |         private gameRepository: GameRepository
11 |     ) {}
12 | 
13 |     async execute(): Promise<void> {
14 |         const START_GAME_ANIMATION_DELAY = 400;
15 |         const cardImageAsset = this.cardRepository.store.cardImageAsset;
16 | 
17 |         this.cardRepository.resetShowedCards();
18 |         this.cardRepository.resetPairCardAttempList();
19 | 
20 |         setTimeout(() => {
21 |             const randomCards = getRandomGameCards(cardImageAsset);
22 |             this.cardRepository.setCurrentCards(randomCards);
23 |             this.gameRepository.setGameStatus(GameStatus.inProgress);
24 |         }, START_GAME_ANIMATION_DELAY)
25 |     }
26 | }
27 | 


--------------------------------------------------------------------------------
/src/Repositories/CardRepository.ts:
--------------------------------------------------------------------------------
 1 | import { useCardStore } from '@/Data/card.store';
 2 | import type { PairCardAttempList, ShowedCards } from '@/Domain/Card';
 3 | 
 4 | export class CardRepository {
 5 |     private _store: ReturnType<typeof useCardStore>;
 6 | 
 7 |     constructor() {
 8 |         this._store = useCardStore();
 9 |     }
10 | 
11 |     get store() {
12 |         return this._store;
13 |     }
14 | 
15 |     setCurrentCards(cards: string[]) {
16 |         this.store.setCurrentCards(cards);
17 |     }
18 | 
19 |     setCardImageAsset(cards: string[]) {
20 |         this.store.setCardImageAsset(cards);
21 |     }
22 | 
23 |     setShowedCards(cards: ShowedCards) {
24 |         this.store.setShowedCards(cards);
25 |     }
26 | 
27 |     addShowedCards(cards: ShowedCards) {
28 |         this.store.addShowedCards(cards);
29 |     }
30 | 
31 |     openAllShowedCards() {
32 |         this.store.openAllShowedCards();
33 |     }
34 | 
35 |     resetShowedCards() {
36 |         this.store.resetShowedCards();
37 |     }
38 | 
39 |     setPairCardAttempList(attemps: PairCardAttempList) {
40 |         this.store.setPairCardAttempList(attemps);
41 |     }
42 | 
43 |     resetPairCardAttempList() {
44 |         this.store.resetPairCardAttempList();
45 |     }
46 | }
47 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "vue3-demo",
 3 |     "version": "0.0.0",
 4 |     "private": true,
 5 |     "scripts": {
 6 |         "dev": "vite",
 7 |         "build": "run-p type-check build-only",
 8 |         "preview": "vite preview",
 9 |         "test:unit": "vitest --environment jsdom --root src/",
10 |         "build-only": "vite build",
11 |         "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
12 |         "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
13 |     },
14 |     "dependencies": {
15 |         "pinia": "^2.0.28",
16 |         "vue": "^3.2.45"
17 |     },
18 |     "devDependencies": {
19 |         "@rushstack/eslint-patch": "^1.1.4",
20 |         "@types/jsdom": "^20.0.1",
21 |         "@types/node": "^18.11.12",
22 |         "@vitejs/plugin-vue": "^4.0.0",
23 |         "@vue/eslint-config-typescript": "^11.0.0",
24 |         "@vue/test-utils": "^2.2.6",
25 |         "@vue/tsconfig": "^0.1.3",
26 |         "eslint": "^8.22.0",
27 |         "eslint-plugin-vue": "^9.3.0",
28 |         "jsdom": "^20.0.3",
29 |         "npm-run-all": "^4.1.5",
30 |         "sass": "^1.57.1",
31 |         "typescript": "~4.7.4",
32 |         "vite": "^4.0.0",
33 |         "vitest": "^0.25.6",
34 |         "vue-router": "^4.1.6",
35 |         "vue-tsc": "^1.0.12"
36 |     }
37 | }
38 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Clean code. Domain Driven Design with Vue 3
 2 | Used: Typescript, Vue 3, Pinia
 3 | 
 4 | ### DEMO 
 5 | https://vuegit.ru
 6 | 
 7 | ### Layers
 8 | Flow of controls:
 9 | 
10 | ```
11 |                   USER
12 |                     ↓
13 |                 UI (Vue)     ←     Presentor
14 |                     ↓                  ↑
15 | (entities)      (usecases)      (State, Pinia)   
16 |  Domain     →  Application           Data
17 |                     ↓                 ↓ ↑
18 |             Adapters (Driven)  →  Repository
19 |                     ↓                          
20 |             Infrastructure  ←  API, etc.   
21 | ```
22 | 
23 | Dependencies:
24 | ```
25 |                   USER
26 |                     ↓
27 |                 UI (Vue)     ←    Presentor
28 |                     ↓                 ↑
29 | (entities)      (usecases)      (State, Pinia)  
30 |  Domain     ←  Application           Data
31 |                     ↑                 ↓
32 |             Adapters (Driven)  ←  Repository
33 |                     ↑               
34 |             Infrastructure  ←  API, etc.   
35 | ```
36 | 
37 | ## Project Setup
38 | 
39 | ```sh
40 | npm install
41 | ```
42 | 
43 | Dev mode:
44 | ```sh
45 | npm run dev
46 | ```
47 | Build:
48 | ```sh
49 | npm run build
50 | ```
51 | 
52 | # Links
53 | https://herbertograca.com/2017/11/16/explicit-architecture-01-ddd-hexagonal-onion-clean-cqrs-how-i-put-it-all-together/
54 | 


--------------------------------------------------------------------------------
/src/Data/card.store.ts:
--------------------------------------------------------------------------------
 1 | import { defineStore } from 'pinia';
 2 | import type { CardState, PairCardAttempList, ShowedCards } from '@/Domain/Card';
 3 | 
 4 | export const useCardStore = defineStore('card', {
 5 |     state: (): CardState => ({
 6 |         cardImageAsset : [],
 7 |         currentCards : [],
 8 |         showedCards: {},
 9 |         pairCardAttempList: [],
10 |     }),
11 | 
12 |     actions: {
13 |         setCurrentCards(urls: string[]) {
14 |             this.currentCards = urls;
15 |         },
16 |         setCardImageAsset(urls: string[]) {
17 |             this.cardImageAsset = urls;
18 |         },
19 |         setShowedCards(cards: ShowedCards) {
20 |             this.showedCards = cards;
21 |         },
22 |         addShowedCards(cards: ShowedCards) {
23 |             this.$patch({ showedCards : cards });
24 |         },
25 |         openAllShowedCards() {
26 |             const result: ShowedCards = {};
27 | 
28 |             this.currentCards.forEach((_, index) => {
29 |                 result[index] = true;
30 |             });
31 | 
32 |             this.showedCards = result;
33 |         },
34 |         resetShowedCards() {
35 |             this.showedCards = {};
36 |         },
37 |         setPairCardAttempList(attemps: PairCardAttempList) {
38 |             this.pairCardAttempList = attemps;
39 |         },
40 |         resetPairCardAttempList() {
41 |             this.pairCardAttempList = [];
42 |         },
43 |     }
44 | });
45 | 


--------------------------------------------------------------------------------
/src/Presentation/usecaseMap/index.ts:
--------------------------------------------------------------------------------
 1 | import { CardRepository } from '@/Repositories/CardRepository';
 2 | import { AppStartedUsecase } from '@/Application/AppStartedUsecase';
 3 | import { StartGameUsecase } from '@/Application/StartGameUsecase';
 4 | import { OpenCardUsecase } from '@/Application/OpenCardUsecase';
 5 | import { GameRepository } from '@/Repositories/GameRepository';
 6 | import { StopGameUsecase } from '@/Application/StopGameUsecase';
 7 | 
 8 | const usecaseMapping = {
 9 |     AppStartedUsecase: (): Promise<void> => {
10 |         const usecase = new AppStartedUsecase(
11 |             new CardRepository(),
12 |         );
13 | 
14 |         return usecase.execute();
15 |     },
16 | 
17 |     StartGameUsecase: (): Promise<void> => {
18 |         const usecase = new StartGameUsecase(
19 |             new CardRepository(),
20 |             new GameRepository(),
21 |         );
22 | 
23 |         return usecase.execute();
24 |     },
25 | 
26 |     StopGameUsecase: (): Promise<void> => {
27 |         const usecase = new StopGameUsecase(
28 |             new CardRepository(),
29 |             new GameRepository(),
30 |         );
31 | 
32 |         return usecase.execute();
33 |     },
34 | 
35 |     OpenCardUsecase: (index: number, showWonNotification: () => void): Promise<void> => {
36 |         const usecase = new OpenCardUsecase(
37 |             index,
38 |             new CardRepository(),
39 |             new GameRepository(),
40 |             showWonNotification,
41 |         );
42 | 
43 |         return usecase.execute();
44 |     }
45 | }
46 | 
47 | export const mapUsecase = <T extends keyof typeof usecaseMapping>(usecase: T) => {
48 |     return usecaseMapping[usecase];
49 | };
50 | 


--------------------------------------------------------------------------------
/src/Presentation/view/scss/main.scss:
--------------------------------------------------------------------------------
 1 | @mixin theme-color($name, $hue) {
 2 |     --hue-#{"" + $name}: #{$hue};
 3 |     --color-#{"" + $name}: #{'hsl(var(--hue-#{$name}), 71%, 46%)'};
 4 | 
 5 |     &.#{"" + $name} {
 6 |         --primary-hue: var(--hue-#{$name});
 7 |     }
 8 | }
 9 | 
10 | html {
11 |     &:root {
12 |         --text-color: #444;
13 |         --border-color: #999;
14 |         --main-bg-color: #b1ddf8;
15 |         --color-shaddow-first: #ff98fc;
16 |         --color-shaddow-second: #5af7ff;
17 |         --primary-hue: 58deg;
18 |         --primary-color: hsl(var(--primary-hue), 72%, 44%);
19 |         --secondary-color: hsl(var(--primary-hue), 70%, 60%);
20 |         --button-text-color: #fff;
21 |         --button-bg-color: var(--primary-color);
22 |         --button-text-color-hover: #ddd;
23 |         --button-text-color-active: #ccc;
24 | 
25 |         @include theme-color(cyan, 180deg);
26 |         @include theme-color(green, 115deg);
27 |         @include theme-color(blue, 200deg);
28 |         @include theme-color(purple, 280deg);
29 |         @include theme-color(red, 5deg);
30 |         @include theme-color(yellow, 58deg);
31 |     }
32 | }
33 | 
34 | body {
35 |     font-family: MS Sans Serif, Geneva, sans-serif;
36 |     padding: 0;
37 |     margin: 0;
38 |     background: url(../assets/bg-8-bit-nature.jpg) no-repeat center;
39 |     background-color: var(--main-bg-color);
40 |     background-size: cover;
41 | }
42 | 
43 | .btn {
44 |     color: var(--button-text-color);
45 |     background: var(--primary-color);
46 |     padding: 6px 12px;
47 |     font-size: 16px;
48 |     cursor: pointer;
49 |     border: 1px solid var(--border-color);
50 |     display: inline-block;
51 |     min-width: 96px;
52 | 
53 |     &:hover {
54 |         color: var(--button-text-color-hover);
55 |     }
56 | 
57 |     &:active {
58 |         color: var(--button-text-color-active);
59 |     }
60 | }
61 | 


--------------------------------------------------------------------------------
/src/Presentation/view/assets/base.css:
--------------------------------------------------------------------------------
 1 | /* color palette from <https://github.com/vuejs/theme> */
 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 |   position: relative;
59 |   font-weight: normal;
60 | }
61 | 
62 | body {
63 |   min-height: 100vh;
64 |   color: var(--color-text);
65 |   background: var(--color-background);
66 |   transition: color 0.5s, background-color 0.5s;
67 |   line-height: 1.6;
68 |   font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
69 |     Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
70 |   font-size: 15px;
71 |   text-rendering: optimizeLegibility;
72 |   -webkit-font-smoothing: antialiased;
73 |   -moz-osx-font-smoothing: grayscale;
74 | }
75 | 


--------------------------------------------------------------------------------
/src/Domain/Card.ts:
--------------------------------------------------------------------------------
 1 | export const cardImageAsset = [
 2 |     'card/01.jpg',
 3 |     'card/02.jpg',
 4 |     'card/03.jpg',
 5 |     'card/04.jpg',
 6 |     'card/05.jpg',
 7 |     'card/06.jpg',
 8 |     'card/07.jpg',
 9 |     'card/08.jpg',
10 | ];
11 | 
12 | export interface PairCardAttemp {
13 |     index: number
14 |     id: string
15 | }
16 | 
17 | export type PairCardAttempList = [PairCardAttemp?, PairCardAttemp?];
18 | 
19 | export interface ShowedCards {
20 |     [key: number]: boolean
21 | }
22 | 
23 | export type CurrentCard = string;
24 | export type CardImage = string;
25 | export type CardImageAsset = CardImage[];
26 | 
27 | export interface CardState {
28 |     cardImageAsset: CardImageAsset
29 |     currentCards: CurrentCard[]
30 |     showedCards: ShowedCards
31 |     pairCardAttempList: PairCardAttempList
32 | }
33 | 
34 | export function checkPairCards(pairCardAttemp: PairCardAttempList): boolean {
35 |     return pairCardAttemp[0]?.id === pairCardAttemp[1]?.id;
36 | }
37 | 
38 | export function removeAttempsCards(
39 |     showedCardList: ShowedCards,
40 |     pairCards: PairCardAttempList
41 | ): ShowedCards {
42 |     const result = { ...showedCardList };
43 | 
44 |     pairCards.forEach(card => {
45 |         if (card && typeof card.index === 'number') {
46 |             delete result[card.index];
47 |         }
48 |     });
49 | 
50 |     return result;
51 | }
52 | 
53 | export function checkIsShowedCard (showedCards: ShowedCards, index: number): boolean {
54 |     return !!showedCards[index];
55 | }
56 | 
57 | export function addCardAttemps(
58 |     pairCardAttempList: PairCardAttempList,
59 |     currentCards: CurrentCard[],
60 |     index: number
61 | ): PairCardAttempList {
62 |     const result : PairCardAttempList = [];
63 |     pairCardAttempList.forEach(val => result.push(Object.assign({}, val)));
64 | 
65 |     if (result.length >= 2) {
66 |         return result;
67 |     }
68 | 
69 |     result.push({
70 |         index,
71 |         id: currentCards[index]
72 |     });
73 | 
74 |     return result;
75 | }
76 | 
77 | export function checkIsFinish(showedCardList: ShowedCards, currentCards: CurrentCard[]): boolean {
78 |     return Object.keys(showedCardList).length === currentCards.length;
79 | }
80 | 
81 | export function getRandomGameCards(cardImageAsset: CardImageAsset) {
82 |     return [...cardImageAsset, ...cardImageAsset].sort(() => (Math.random() > 0.5) ? 1 : -1);
83 | }
84 | 


--------------------------------------------------------------------------------
/src/Presentation/view/components/AppModal.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | const emit = defineEmits(['closed'])
  3 | 
  4 | const props = defineProps({
  5 |     isShow: Boolean,
  6 |     title: String,
  7 |     text: String,
  8 | })
  9 | function close() {
 10 |     emit('closed');
 11 | }
 12 | </script>
 13 | 
 14 | <template>
 15 |     <Teleport to="body">
 16 |         <transition name="fade">
 17 |             <div v-if="props.isShow" class="modal">
 18 |                 <div class="modal__overlay"></div>
 19 | 
 20 |                 <div class="modal__popup">
 21 |                     <button type="button" class="modal__close" @click="close"><span>&times;</span></button>
 22 | 
 23 |                     <div v-if="props.title" class="modal__title">{{ props.title }}</div>
 24 |                     <div v-if="props.text" class="modal__text">{{ props.text }}</div>
 25 | 
 26 |                     <button type="button" class="modal__btn btn" @click="close">OK</button>
 27 |                 </div>
 28 |             </div>
 29 |         </transition>
 30 |     </Teleport>
 31 | </template>
 32 | 
 33 | <style lang="scss">
 34 | .modal {
 35 |     position: fixed;
 36 |     display: flex;
 37 |     top: 0;
 38 |     right: 0;
 39 |     bottom: 0;
 40 |     left: 0;
 41 | 
 42 |     &__overlay {
 43 |         position: fixed;
 44 |         top: 0;
 45 |         right: 0;
 46 |         bottom: 0;
 47 |         left: 0;
 48 |         background: rgba(0, 0, 0, 0.2);
 49 |     }
 50 | 
 51 |     &__popup {
 52 |         position: relative;
 53 |         display: flex;
 54 |         flex-direction: column;
 55 |         margin: auto;
 56 |         width: 320px;
 57 |         height: auto;
 58 |         border: 1px solid #999;
 59 |         background-color: #fff;
 60 |         padding: 24px 32px;
 61 |         z-index: 1;
 62 |     }
 63 | 
 64 |     &__close {
 65 |         position: absolute;
 66 |         background: none;
 67 |         border: none;
 68 |         cursor: pointer;
 69 |         font-size: 28px;
 70 |         opacity: 0.5;
 71 |         right: 10px;
 72 |         top: 10px;
 73 | 
 74 |         &:hover {
 75 |             opacity: 1;
 76 |         }
 77 |     }
 78 | 
 79 |     &__btn {
 80 |         margin-top: 20px;
 81 |         align-self: center;
 82 |     }
 83 | 
 84 |     &__title {
 85 |         font-size: 21px;
 86 |         text-align: center;
 87 |         margin-bottom: 8px;
 88 |     }
 89 | }
 90 | 
 91 | .fade-enter-active,
 92 | .fade-leave-active {
 93 |     transition: opacity 0.5s ease;
 94 | }
 95 | 
 96 | .fade-enter-from,
 97 | .fade-leave-to {
 98 |     opacity: 0;
 99 | }
100 | </style>
101 | 


--------------------------------------------------------------------------------
/src/Application/OpenCardUsecase.ts:
--------------------------------------------------------------------------------
 1 | import type { Usecase } from '@/Application/types';
 2 | import { addCardAttemps, checkPairCards, checkIsFinish, removeAttempsCards, checkIsShowedCard } from '@/Domain/Card';
 3 | import { GameStatus } from '@/Domain/Game';
 4 | import type { CardRepository } from '@/Repositories/CardRepository';
 5 | import type { GameRepository } from '@/Repositories/GameRepository';
 6 | 
 7 | export class OpenCardUsecase implements Usecase {
 8 |     constructor(
 9 |         private index: number,
10 |         private cardRepository: CardRepository,
11 |         private gameRepository: GameRepository,
12 |         private showWonNotification: () => void,
13 |     ) {}
14 | 
15 |     async execute(): Promise<void> {
16 |         const DELAY_TO_CLOSE = 1000;
17 |         const resetPairAttemps = () => this.cardRepository.setPairCardAttempList([]);
18 |         const { showedCards } = this.cardRepository.store;
19 | 
20 |         if (checkIsShowedCard(showedCards, this.index)) {
21 |             return;
22 |         }
23 | 
24 |         let { pairCardAttempList } = this.cardRepository.store;
25 | 
26 |         if (pairCardAttempList.length >= 2) {
27 |             return;
28 |         }
29 | 
30 |         const { currentCards } = this.cardRepository.store;
31 | 
32 |         const cardAttemps = addCardAttemps(
33 |             pairCardAttempList,
34 |             currentCards,
35 |             this.index
36 |         );
37 | 
38 |         this.cardRepository.setPairCardAttempList(cardAttemps);
39 |         pairCardAttempList = this.cardRepository.store.pairCardAttempList;
40 | 
41 |         this.cardRepository.addShowedCards({ [this.index] : true });
42 | 
43 |         if (pairCardAttempList.length === 2) {
44 |             let newShowedCards = this.cardRepository.store.showedCards;
45 | 
46 |             if (!checkPairCards(pairCardAttempList)) {
47 |                 newShowedCards = removeAttempsCards(
48 |                     showedCards,
49 |                     pairCardAttempList
50 |                 );
51 |             }
52 |             else {
53 |                 const { currentCards } = this.cardRepository.store;
54 | 
55 |                 const isFinishedGame = checkIsFinish(
56 |                     showedCards,
57 |                     currentCards
58 |                 );
59 | 
60 |                 if (isFinishedGame) {
61 |                     this.cardRepository.setShowedCards(newShowedCards);
62 |                     this.showWonNotification();
63 |                     this.gameRepository.setGameStatus(GameStatus.stopped);
64 |                 }
65 |             }
66 | 
67 |             setTimeout(() => {
68 |                 const { gameStatus } = this.gameRepository.store;
69 | 
70 |                 if (gameStatus === GameStatus.stopped) {
71 |                     return;
72 |                 }
73 | 
74 |                 this.cardRepository.setShowedCards(newShowedCards);
75 | 
76 |                 resetPairAttemps();
77 |             }, DELAY_TO_CLOSE);
78 |         }
79 |     }
80 | }
81 | 


--------------------------------------------------------------------------------
/src/Presentation/view/components/GameCard.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | import { ref, watch } from 'vue';
  3 | 
  4 | const emit = defineEmits(['openCard'])
  5 | 
  6 | const props = defineProps({
  7 |     image: String,
  8 |     isFlipped: Boolean,
  9 |     isShowed: Boolean
 10 | })
 11 | 
 12 | const isShowedDelayed = ref<boolean>(false);
 13 | 
 14 | // Fix an animation bug of closing cards
 15 | watch(() => props.isShowed, (val, oldVal) => {
 16 |     if (val && !oldVal) {
 17 |         isShowedDelayed.value = true;
 18 |     }
 19 |     else {
 20 |         setTimeout(() => {
 21 |             if (props.isShowed === val && !val && oldVal) {
 22 |                 isShowedDelayed.value = false;
 23 |             }
 24 |         }, 300);
 25 |     }
 26 | });
 27 | </script>
 28 | 
 29 | <template>
 30 |     <div class="card-parent">
 31 |         <div
 32 |             class="card-wrapper"
 33 |             :class="{ 'card-wrapper--flipped' : props.isFlipped }"
 34 |             @click="emit('openCard')"
 35 |             tabindex="0"
 36 |         >
 37 |             <div class="card card__back"></div>
 38 | 
 39 |             <img
 40 |                 v-if="isShowedDelayed"
 41 |                 :src="props.image"
 42 |                 alt=""
 43 |                 class="card card__front"
 44 |             />
 45 |         </div>
 46 |     </div>
 47 | </template>
 48 | 
 49 | <style lang="scss">
 50 | .card-parent {
 51 |     perspective: 500px;
 52 | }
 53 | 
 54 | .card-wrapper {
 55 |     position: relative;
 56 |     display: flex;
 57 |     margin: 6px;
 58 |     cursor: pointer;
 59 |     height: 85px;
 60 |     width: 150px;
 61 |     transition: transform 0.5s;
 62 |     transform-style: preserve-3d;
 63 |     flex: 1;
 64 |     box-sizing: border-box;
 65 | 
 66 |     &--flipped {
 67 |         transform: rotateY(180deg);
 68 |         cursor: default;
 69 |         pointer-events: none;
 70 |     }
 71 | 
 72 |     &:hover {
 73 |         > .card__back {
 74 |             box-shadow: 4px 2px 0px var(--color-shaddow-first), -4px -2px 0 var(--color-shaddow-second);
 75 |         }
 76 |     }
 77 | 
 78 |     &:focus-visible {
 79 |         > .card__back {
 80 |             box-shadow: 0 0px 0px 3px #765ec8;
 81 |         }
 82 |     }
 83 | }
 84 | 
 85 | .card {
 86 |     border-radius: 10px;
 87 |     height: 85px;
 88 |     width: 150px;
 89 |     box-shadow: 0 0px 0px 2px rgba(255, 255, 255, 0.8);
 90 |     backface-visibility: hidden;
 91 |     position: absolute;
 92 |     top: 0;
 93 |     left: 0;
 94 |     right: 0;
 95 |     bottom: 0;
 96 | 
 97 |     &__front {
 98 |         background: #fff;
 99 |         transform: rotateY(180deg);
100 |     }
101 | 
102 |     &__back {
103 |         background-color: var(--secondary-color);
104 |         transition: background-color 0.3s ease-in;
105 |         background-image:
106 |         repeating-linear-gradient(
107 |             45deg,
108 |             rgba(0,0,0,0.8),
109 |             rgba(0,0,0,0.8) 10px,
110 |             transparent 0px,
111 |             transparent 20px
112 |         ),
113 |         repeating-linear-gradient(
114 |             -45deg,
115 |             rgba(0,0,0,0.5),
116 |             rgba(0,0,0,0.5) 10px,
117 |             transparent 0px,
118 |             transparent 20px
119 |         );
120 |     }
121 | }
122 | </style>
123 | 


--------------------------------------------------------------------------------
/src/Presentation/view/pages/PageHome.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { checkIsShowedCard as _checkIsShowedCard } from '@/Domain/Card';
  3 | import { CardPresenter } from '@/Presentation/presenter/CardPresenter';
  4 | import { ShowedCardsPresenter } from '@/Presentation/presenter/ShowedCardsPresenter';
  5 | import { mapUsecase } from '@/Presentation/usecaseMap';
  6 | import AppHeader from '@/Presentation/view/components/AppHeader.vue';
  7 | import AppModal from '@/Presentation/view/components/AppModal.vue';
  8 | import GameCard from '@/Presentation/view/components/GameCard.vue';
  9 | import { getImageUrl } from '@/Presentation/view/utils/get-image-url';
 10 | import { computed, ref } from 'vue';
 11 | 
 12 | const cardPresenter = CardPresenter();
 13 | const showedCards = ShowedCardsPresenter();
 14 | const currentCards = cardPresenter.currentCards;
 15 | const cardImages = computed(() => currentCards.value.map(img => getImageUrl(img)));
 16 | 
 17 | const openCardUsecase = mapUsecase('OpenCardUsecase');
 18 | const startGameUsecase = mapUsecase('StartGameUsecase');
 19 | 
 20 | const checkIsShowedCard = (index: number): boolean => {
 21 |     return _checkIsShowedCard(showedCards.value, index);
 22 | }
 23 | 
 24 | const isShowModal = ref(false);
 25 | 
 26 | function showWonNotification() {
 27 |     isShowModal.value = true;
 28 | }
 29 | 
 30 | function openCardHandler(index: number) {
 31 |     openCardUsecase(index, showWonNotification);
 32 | }
 33 | 
 34 | function closeModalHandler() {
 35 |     isShowModal.value = false;
 36 |     startGameUsecase();
 37 | }
 38 | </script>
 39 | 
 40 | <template>
 41 |     <div class="page-home">
 42 |         <AppHeader></AppHeader>
 43 | 
 44 |         <transition name="fade" mode="out-in">
 45 |             <div class="game-content" v-show="cardImages.length">
 46 |                 <GameCard
 47 |                     v-for="(image, index) of cardImages"
 48 |                     @open-card="openCardHandler(index)"
 49 |                     :isFlipped="checkIsShowedCard(index)"
 50 |                     :isShowed="checkIsShowedCard(index)"
 51 |                     :image="image"
 52 |                     :key="index + image"
 53 |                 ></GameCard>
 54 |             </div>
 55 |         </transition>
 56 | 
 57 |         <AppModal title="You won!" :isShow="isShowModal" @closed="closeModalHandler"></AppModal>
 58 | 
 59 |         <div class="footer">
 60 |             <a href="https://github.com/attikos/ddd-vue-match-game" class="footer__link" target="_blank">
 61 |                 <img src="../assets/github-mark.png" alt="Github" class="footer__github">
 62 |                 <span class="footer__link-text">GitHub @attikos</span>
 63 |             </a>
 64 |         </div>
 65 |     </div>
 66 | </template>
 67 | 
 68 | <style lang="scss">
 69 | .page-home {
 70 |     display: flex;
 71 |     flex-direction: column;
 72 |     min-height: 100vh;
 73 | }
 74 | 
 75 | .game-content {
 76 |     display: flex;
 77 |     max-width: 650px;
 78 |     min-height: 388px;
 79 |     justify-content: center;
 80 |     flex-wrap: wrap;
 81 |     margin: 24px auto;
 82 | 
 83 |     @media screen and (max-width: 576px) {
 84 |         max-width: 100%;
 85 |     }
 86 | }
 87 | 
 88 | .footer {
 89 |     flex-grow: 1;
 90 |     display: flex;
 91 |     align-items: flex-end;
 92 |     width: 100%;
 93 |     justify-content: center;
 94 |     margin-top: 32px;
 95 |     margin-bottom: 20px;
 96 | 
 97 |     &__link {
 98 |         display: flex;
 99 |     }
100 | 
101 |     &__github {
102 |         height: 18px;
103 |         width: 18px;
104 |         margin-right: 6px;
105 |         display: inline-block;
106 |     }
107 | }
108 | </style>
109 | 


--------------------------------------------------------------------------------
/src/Presentation/view/components/AppHeader.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | import { GameStatus } from '@/Domain/Game';
  3 | import { GamePresenter } from '@/Presentation/presenter/GamePresenter';
  4 | import { mapUsecase } from '@/Presentation/usecaseMap';
  5 | import { getSavedTheme, setTheme, type Theme } from '@/Presentation/view/utils/theme';
  6 | import { onMounted } from 'vue';
  7 | 
  8 | const DEFAULT_THEME = 'yellow';
  9 | 
 10 | const gameStatus = GamePresenter();
 11 | 
 12 | const startGameUsecase = mapUsecase('StartGameUsecase');
 13 | const stopGameUsecase = mapUsecase('StopGameUsecase');
 14 | 
 15 | const startHandler = () => {
 16 |     startGameUsecase();
 17 | }
 18 | 
 19 | const stopHandler = () => {
 20 |     stopGameUsecase();
 21 | }
 22 | 
 23 | function setThemeHandler(theme: Theme) {
 24 |     setTheme(theme);
 25 | }
 26 | 
 27 | const themeList: Theme[] = ['cyan', 'green', 'blue', 'purple', 'red', 'yellow'];
 28 | 
 29 | onMounted(() => {
 30 |     startGameUsecase();
 31 |     const theme = getSavedTheme() || DEFAULT_THEME;
 32 |     setTheme(theme);
 33 | });
 34 | </script>
 35 | 
 36 | <template>
 37 |     <header class="header">
 38 |         <div class="header__container">
 39 |             <a href="#/" class="header__logo">Match Match Game 🎲</a>
 40 | 
 41 |             <div class="header__nav">
 42 |                 <a
 43 |                     v-if="gameStatus === GameStatus.stopped"
 44 |                     @click.prevent="startHandler"
 45 |                     class="header__link header__link_type_start"
 46 |                 >Start</a>
 47 | 
 48 |                 <a
 49 |                     v-if="gameStatus === GameStatus.inProgress"
 50 |                     @click.prevent="stopHandler"
 51 |                     class="header__link header__link_type_start"
 52 |                 >Stop</a>
 53 | 
 54 |                 <a
 55 |                     v-for="theme in themeList"
 56 |                     @click.prevent="setThemeHandler(theme)"
 57 |                     class="header__link header__theme"
 58 |                     :class="`header__theme--${theme}`"
 59 |                     :key="theme"
 60 |                 ></a>
 61 |             </div>
 62 |         </div>
 63 |     </header>
 64 | </template>
 65 | 
 66 | <style lang="scss">
 67 | .header {
 68 |     display: flex;
 69 |     justify-content: center;
 70 |     align-items: center;
 71 |     border-bottom: 1px solid var(--border-color);
 72 |     background: rgba(255,255,255, 0.2);
 73 |     min-height: 80px;
 74 | 
 75 |     @media screen and (max-width: 768px) {
 76 |         padding-bottom: 13px;
 77 |     }
 78 | 
 79 |     &__container {
 80 |         display: flex;
 81 |         justify-content: center;
 82 |         align-items: center;
 83 |         max-width: 900px;
 84 |         margin-left: auto;
 85 |         margin-right: auto;
 86 | 
 87 |         @media screen and (max-width: 768px) {
 88 |             flex-direction: column;
 89 |         }
 90 |     }
 91 | 
 92 |     &__logo {
 93 |         font-weight: bold;
 94 |         font-size: 22px;
 95 |         line-height: 34px;
 96 |         margin: 8px 0 8px;
 97 |         margin-right: 50px;
 98 |         text-shadow: 1px 4px 4px rgba(0,0,0, 0.2);
 99 |         text-decoration: none;
100 |         color: #444;
101 | 
102 |         @media screen and (max-width: 768px) {
103 |             margin-right: 0;
104 |             font-size: 20px;
105 |             line-height: 32px;
106 |         }
107 |     }
108 | 
109 |     &__nav {
110 |         display: flex;
111 |         align-items: center;
112 |         justify-content: flex-start;
113 |     }
114 | 
115 |     &__link {
116 |         position: relative;
117 |         text-decoration: none;
118 |         color: var(--text-color);
119 |         font-size: 22px;
120 |         height: 22px;
121 |         line-height: 100%;
122 |         padding: 2px 12px;
123 |         transition: all 0.2s ease-in;
124 |         cursor: pointer;
125 | 
126 |         &:not(:last-child)::after {
127 |             content: "";
128 |             border-right: 1px solid var(--primary-color);
129 |             opacity: 0.5;
130 |             position: absolute;
131 |             top: 0;
132 |             bottom: 0;
133 |             right: 0;
134 |         }
135 | 
136 |         &:hover {
137 |             text-shadow: 3px 2px 0px var(--color-shaddow-first), -2px -1px 0 var(--color-shaddow-second);
138 |         }
139 | 
140 |         &:active {
141 |             color: #000;
142 |             text-shadow: 1px 1px 0px var(--color-shaddow-first), -1px -0px 0 var(--color-shaddow-second);
143 |         }
144 | 
145 |         &_type {
146 |             &_start {
147 |                 min-width: 54px;
148 |             }
149 |         }
150 | 
151 |         @media screen and (max-width: 768px) {
152 |             font-size: 21px;
153 |             height: 21px;
154 |         }
155 |     }
156 | 
157 |     &__theme {
158 |         display: flex;
159 |         align-items: center;
160 | 
161 |         &::before {
162 |             content: "";
163 |             display: flex;
164 |             width: 16px;
165 |             height: 16px;
166 |             box-sizing: content-box;
167 |         }
168 |     }
169 | 
170 |     @mixin theme-link($theme) {
171 |         &__theme {
172 |             &--#{$theme} {
173 |                 &::before {
174 |                     background-color: var(--color-#{$theme});
175 |                     color: var(--color-#{$theme});
176 |                 }
177 | 
178 |                 html.#{$theme} & {
179 |                     &::before {
180 |                         box-shadow: 0 0 0 2px currentColor;
181 |                     }
182 |                 }
183 |             }
184 |         }
185 |     }
186 | 
187 |     @include theme-link('cyan');
188 |     @include theme-link('green');
189 |     @include theme-link('blue');
190 |     @include theme-link('purple');
191 |     @include theme-link('red');
192 |     @include theme-link('yellow');
193 | }
194 | </style>
195 | 


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