minimal viable product
Francesco Baldino
2 years ago
commit
846c7c7acc
@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"recommendations": ["Vue.volar"]
|
||||||
|
}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
# Vue 3 + Vite
|
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||||
|
|
||||||
|
## Recommended IDE Setup
|
||||||
|
|
||||||
|
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Vite + Vue</title>
|
||||||
|
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"name": "qwordle",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"sass": "^1.55.0",
|
||||||
|
"vue": "^3.2.37"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^3.1.0",
|
||||||
|
"vite": "^3.1.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,576 @@
|
|||||||
|
lockfileVersion: 5.4
|
||||||
|
|
||||||
|
specifiers:
|
||||||
|
'@vitejs/plugin-vue': ^3.1.0
|
||||||
|
sass: ^1.55.0
|
||||||
|
vite: ^3.1.0
|
||||||
|
vue: ^3.2.37
|
||||||
|
|
||||||
|
dependencies:
|
||||||
|
sass: 1.55.0
|
||||||
|
vue: 3.2.40
|
||||||
|
|
||||||
|
devDependencies:
|
||||||
|
'@vitejs/plugin-vue': 3.1.0_vite@3.1.4+vue@3.2.40
|
||||||
|
vite: 3.1.4_sass@1.55.0
|
||||||
|
|
||||||
|
packages:
|
||||||
|
|
||||||
|
/@babel/helper-string-parser/7.18.10:
|
||||||
|
resolution: {integrity: sha512-XtIfWmeNY3i4t7t4D2t02q50HvqHybPqW2ki1kosnvWCwuCMeo81Jf0gwr85jy/neUdg5XDdeFE/80DXiO+njw==}
|
||||||
|
engines: {node: '>=6.9.0'}
|
||||||
|
|
||||||
|
/@babel/helper-validator-identifier/7.19.1:
|
||||||
|
resolution: {integrity: sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==}
|
||||||
|
engines: {node: '>=6.9.0'}
|
||||||
|
|
||||||
|
/@babel/parser/7.19.3:
|
||||||
|
resolution: {integrity: sha512-pJ9xOlNWHiy9+FuFP09DEAFbAn4JskgRsVcc169w2xRBC3FRGuQEwjeIMMND9L2zc0iEhO/tGv4Zq+km+hxNpQ==}
|
||||||
|
engines: {node: '>=6.0.0'}
|
||||||
|
hasBin: true
|
||||||
|
dependencies:
|
||||||
|
'@babel/types': 7.19.3
|
||||||
|
|
||||||
|
/@babel/types/7.19.3:
|
||||||
|
resolution: {integrity: sha512-hGCaQzIY22DJlDh9CH7NOxgKkFjBk0Cw9xDO1Xmh2151ti7wiGfQ3LauXzL4HP1fmFlTX6XjpRETTpUcv7wQLw==}
|
||||||
|
engines: {node: '>=6.9.0'}
|
||||||
|
dependencies:
|
||||||
|
'@babel/helper-string-parser': 7.18.10
|
||||||
|
'@babel/helper-validator-identifier': 7.19.1
|
||||||
|
to-fast-properties: 2.0.0
|
||||||
|
|
||||||
|
/@esbuild/android-arm/0.15.9:
|
||||||
|
resolution: {integrity: sha512-VZPy/ETF3fBG5PiinIkA0W/tlsvlEgJccyN2DzWZEl0DlVKRbu91PvY2D6Lxgluj4w9QtYHjOWjAT44C+oQ+EQ==}
|
||||||
|
engines: {node: '>=12'}
|
||||||
|
cpu: [arm]
|
||||||
|
os: [android]
|
||||||
|
requiresBuild: true
|
||||||
|
dev: true
|
||||||
|
optional: true
|
||||||
|
|
||||||
|
/@esbuild/linux-loong64/0.15.9:
|
||||||
|
resolution: {integrity: sha512-O+NfmkfRrb3uSsTa4jE3WApidSe3N5++fyOVGP1SmMZi4A3BZELkhUUvj5hwmMuNdlpzAZ8iAPz2vmcR7DCFQA==}
|
||||||
|
engines: {node: '>=12'}
|
||||||
|
cpu: [loong64]
|
||||||
|
os: [linux]
|
||||||
|
requiresBuild: true
|
||||||
|
dev: true
|
||||||
|
optional: true
|
||||||
|
|
||||||
|
/@vitejs/plugin-vue/3.1.0_vite@3.1.4+vue@3.2.40:
|
||||||
|
resolution: {integrity: sha512-fmxtHPjSOEIRg6vHYDaem+97iwCUg/uSIaTzp98lhELt2ISOQuDo2hbkBdXod0g15IhfPMQmAxh4heUks2zvDA==}
|
||||||
|
engines: {node: ^14.18.0 || >=16.0.0}
|
||||||
|
peerDependencies:
|
||||||
|
vite: ^3.0.0
|
||||||
|
vue: ^3.2.25
|
||||||
|
dependencies:
|
||||||
|
vite: 3.1.4_sass@1.55.0
|
||||||
|
vue: 3.2.40
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/@vue/compiler-core/3.2.40:
|
||||||
|
resolution: {integrity: sha512-2Dc3Stk0J/VyQ4OUr2yEC53kU28614lZS+bnrCbFSAIftBJ40g/2yQzf4mPBiFuqguMB7hyHaujdgZAQ67kZYA==}
|
||||||
|
dependencies:
|
||||||
|
'@babel/parser': 7.19.3
|
||||||
|
'@vue/shared': 3.2.40
|
||||||
|
estree-walker: 2.0.2
|
||||||
|
source-map: 0.6.1
|
||||||
|
|
||||||
|
/@vue/compiler-dom/3.2.40:
|
||||||
|
resolution: {integrity: sha512-OZCNyYVC2LQJy4H7h0o28rtk+4v+HMQygRTpmibGoG9wZyomQiS5otU7qo3Wlq5UfHDw2RFwxb9BJgKjVpjrQw==}
|
||||||
|
dependencies:
|
||||||
|
'@vue/compiler-core': 3.2.40
|
||||||
|
'@vue/shared': 3.2.40
|
||||||
|
|
||||||
|
/@vue/compiler-sfc/3.2.40:
|
||||||
|
resolution: {integrity: sha512-tzqwniIN1fu1PDHC3CpqY/dPCfN/RN1thpBC+g69kJcrl7mbGiHKNwbA6kJ3XKKy8R6JLKqcpVugqN4HkeBFFg==}
|
||||||
|
dependencies:
|
||||||
|
'@babel/parser': 7.19.3
|
||||||
|
'@vue/compiler-core': 3.2.40
|
||||||
|
'@vue/compiler-dom': 3.2.40
|
||||||
|
'@vue/compiler-ssr': 3.2.40
|
||||||
|
'@vue/reactivity-transform': 3.2.40
|
||||||
|
'@vue/shared': 3.2.40
|
||||||
|
estree-walker: 2.0.2
|
||||||
|
magic-string: 0.25.9
|
||||||
|
postcss: 8.4.16
|
||||||
|
source-map: 0.6.1
|
||||||
|
|
||||||
|
/@vue/compiler-ssr/3.2.40:
|
||||||
|
resolution: {integrity: sha512-80cQcgasKjrPPuKcxwuCx7feq+wC6oFl5YaKSee9pV3DNq+6fmCVwEEC3vvkf/E2aI76rIJSOYHsWSEIxK74oQ==}
|
||||||
|
dependencies:
|
||||||
|
'@vue/compiler-dom': 3.2.40
|
||||||
|
'@vue/shared': 3.2.40
|
||||||
|
|
||||||
|
/@vue/reactivity-transform/3.2.40:
|
||||||
|
resolution: {integrity: sha512-HQUCVwEaacq6fGEsg2NUuGKIhUveMCjOk8jGHqLXPI2w6zFoPrlQhwWEaINTv5kkZDXKEnCijAp+4gNEHG03yw==}
|
||||||
|
dependencies:
|
||||||
|
'@babel/parser': 7.19.3
|
||||||
|
'@vue/compiler-core': 3.2.40
|
||||||
|
'@vue/shared': 3.2.40
|
||||||
|
estree-walker: 2.0.2
|
||||||
|
magic-string: 0.25.9
|
||||||
|
|
||||||
|
/@vue/reactivity/3.2.40:
|
||||||
|
resolution: {integrity: sha512-N9qgGLlZmtUBMHF9xDT4EkD9RdXde1Xbveb+niWMXuHVWQP5BzgRmE3SFyUBBcyayG4y1lhoz+lphGRRxxK4RA==}
|
||||||
|
dependencies:
|
||||||
|
'@vue/shared': 3.2.40
|
||||||
|
|
||||||
|
/@vue/runtime-core/3.2.40:
|
||||||
|
resolution: {integrity: sha512-U1+rWf0H8xK8aBUZhnrN97yoZfHbjgw/bGUzfgKPJl69/mXDuSg8CbdBYBn6VVQdR947vWneQBFzdhasyzMUKg==}
|
||||||
|
dependencies:
|
||||||
|
'@vue/reactivity': 3.2.40
|
||||||
|
'@vue/shared': 3.2.40
|
||||||
|
|
||||||
|
/@vue/runtime-dom/3.2.40:
|
||||||
|
resolution: {integrity: sha512-AO2HMQ+0s2+MCec8hXAhxMgWhFhOPJ/CyRXnmTJ6XIOnJFLrH5Iq3TNwvVcODGR295jy77I6dWPj+wvFoSYaww==}
|
||||||
|
dependencies:
|
||||||
|
'@vue/runtime-core': 3.2.40
|
||||||
|
'@vue/shared': 3.2.40
|
||||||
|
csstype: 2.6.21
|
||||||
|
|
||||||
|
/@vue/server-renderer/3.2.40_vue@3.2.40:
|
||||||
|
resolution: {integrity: sha512-gtUcpRwrXOJPJ4qyBpU3EyxQa4EkV8I4f8VrDePcGCPe4O/hd0BPS7v9OgjIQob6Ap8VDz9G+mGTKazE45/95w==}
|
||||||
|
peerDependencies:
|
||||||
|
vue: 3.2.40
|
||||||
|
dependencies:
|
||||||
|
'@vue/compiler-ssr': 3.2.40
|
||||||
|
'@vue/shared': 3.2.40
|
||||||
|
vue: 3.2.40
|
||||||
|
|
||||||
|
/@vue/shared/3.2.40:
|
||||||
|
resolution: {integrity: sha512-0PLQ6RUtZM0vO3teRfzGi4ltLUO5aO+kLgwh4Um3THSR03rpQWLTuRCkuO5A41ITzwdWeKdPHtSARuPkoo5pCQ==}
|
||||||
|
|
||||||
|
/anymatch/3.1.2:
|
||||||
|
resolution: {integrity: sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==}
|
||||||
|
engines: {node: '>= 8'}
|
||||||
|
dependencies:
|
||||||
|
normalize-path: 3.0.0
|
||||||
|
picomatch: 2.3.1
|
||||||
|
|
||||||
|
/binary-extensions/2.2.0:
|
||||||
|
resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
|
||||||
|
engines: {node: '>=8'}
|
||||||
|
|
||||||
|
/braces/3.0.2:
|
||||||
|
resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
|
||||||
|
engines: {node: '>=8'}
|
||||||
|
dependencies:
|
||||||
|
fill-range: 7.0.1
|
||||||
|
|
||||||
|
/chokidar/3.5.3:
|
||||||
|
resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
|
||||||
|
engines: {node: '>= 8.10.0'}
|
||||||
|
dependencies:
|
||||||
|
anymatch: 3.1.2
|
||||||
|
braces: 3.0.2
|
||||||
|
glob-parent: 5.1.2
|
||||||
|
is-binary-path: 2.1.0
|
||||||
|
is-glob: 4.0.3
|
||||||
|
normalize-path: 3.0.0
|
||||||
|
readdirp: 3.6.0
|
||||||
|
optionalDependencies:
|
||||||
|
fsevents: 2.3.2
|
||||||
|
|
||||||
|
/csstype/2.6.21:
|
||||||
|
resolution: {integrity: sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==}
|
||||||
|
|
||||||
|
/esbuild-android-64/0.15.9:
|
||||||
|
resolution: {integrity: sha512-HQCX7FJn9T4kxZQkhPjNZC7tBWZqJvhlLHPU2SFzrQB/7nDXjmTIFpFTjt7Bd1uFpeXmuwf5h5fZm+x/hLnhbw==}
|
||||||
|
engines: {node: '>=12'}
|
||||||
|
cpu: [x64]
|
||||||
|
os: [android]
|
||||||
|
requiresBuild: true
|
||||||
|
dev: true
|
||||||
|
optional: true
|
||||||
|
|
||||||
|
/esbuild-android-arm64/0.15.9:
|
||||||
|
resolution: {integrity: sha512-E6zbLfqbFVCNEKircSHnPiSTsm3fCRxeIMPfrkS33tFjIAoXtwegQfVZqMGR0FlsvVxp2NEDOUz+WW48COCjSg==}
|
||||||
|
engines: {node: '>=12'}
|
||||||
|
cpu: [arm64]
|
||||||
|
os: [android]
|
||||||
|
requiresBuild: true
|
||||||
|
dev: true
|
||||||
|
optional: true
|
||||||
|
|
||||||
|
/esbuild-darwin-64/0.15.9:
|
||||||
|
resolution: {integrity: sha512-gI7dClcDN/HHVacZhTmGjl0/TWZcGuKJ0I7/xDGJwRQQn7aafZGtvagOFNmuOq+OBFPhlPv1T6JElOXb0unkSQ==}
|
||||||
|
engines: {node: '>=12'}
|
||||||
|
cpu: [x64]
|
||||||
|
os: [darwin]
|
||||||
|
requiresBuild: true
|
||||||
|
dev: true
|
||||||
|
optional: true
|
||||||
|
|
||||||
|
/esbuild-darwin-arm64/0.15.9:
|
||||||
|
resolution: {integrity: sha512-VZIMlcRN29yg/sv7DsDwN+OeufCcoTNaTl3Vnav7dL/nvsApD7uvhVRbgyMzv0zU/PP0xRhhIpTyc7lxEzHGSw==}
|
||||||
|
engines: {node: '>=12'}
|
||||||
|
cpu: [arm64]
|
||||||
|
os: [darwin]
|
||||||
|
requiresBuild: true
|
||||||
|
dev: true
|
||||||
|
optional: true
|
||||||
|
|
||||||
|
/esbuild-freebsd-64/0.15.9:
|
||||||
|
resolution: {integrity: sha512-uM4z5bTvuAXqPxrI204txhlsPIolQPWRMLenvGuCPZTnnGlCMF2QLs0Plcm26gcskhxewYo9LkkmYSS5Czrb5A==}
|
||||||
|
engines: {node: '>=12'}
|
||||||
|
cpu: [x64]
|
||||||
|
os: [freebsd]
|
||||||
|
requiresBuild: true
|
||||||
|
dev: true
|
||||||
|
optional: true
|
||||||
|
|
||||||
|
/esbuild-freebsd-arm64/0.15.9:
|
||||||
|
resolution: {integrity: sha512-HHDjT3O5gWzicGdgJ5yokZVN9K9KG05SnERwl9nBYZaCjcCgj/sX8Ps1jvoFSfNCO04JSsHSOWo4qvxFuj8FoA==}
|
||||||
|
engines: {node: '>=12'}
|
||||||
|
cpu: [arm64]
|
||||||
|
os: [freebsd]
|
||||||
|
requiresBuild: true
|
||||||
|
dev: true
|
||||||
|
optional: true
|
||||||
|
|
||||||
|
/esbuild-linux-32/0.15.9:
|
||||||
|
resolution: {integrity: sha512-AQIdE8FugGt1DkcekKi5ycI46QZpGJ/wqcMr7w6YUmOmp2ohQ8eO4sKUsOxNOvYL7hGEVwkndSyszR6HpVHLFg==}
|
||||||
|
engines: {node: '>=12'}
|
||||||
|
cpu: [ia32]
|
||||||
|
os: [linux]
|
||||||
|
requiresBuild: true
|
||||||
|
dev: true
|
||||||
|
optional: true
|
||||||
|
|
||||||
|
/esbuild-linux-64/0.15.9:
|
||||||
|
resolution: {integrity: sha512-4RXjae7g6Qs7StZyiYyXTZXBlfODhb1aBVAjd+ANuPmMhWthQilWo7rFHwJwL7DQu1Fjej2sODAVwLbcIVsAYQ==}
|
||||||
|
engines: {node: '>=12'}
|
||||||
|
cpu: [x64]
|
||||||
|
os: [linux]
|
||||||
|
requiresBuild: true
|
||||||
|
dev: true
|
||||||
|
optional: true
|
||||||
|
|
||||||
|
/esbuild-linux-arm/0.15.9:
|
||||||
|
resolution: {integrity: sha512-3Zf2GVGUOI7XwChH3qrnTOSqfV1V4CAc/7zLVm4lO6JT6wbJrTgEYCCiNSzziSju+J9Jhf9YGWk/26quWPC6yQ==}
|
||||||
|
engines: {node: '>=12'}
|
||||||
|
cpu: [arm]
|
||||||
|
os: [linux]
|
||||||
|
requiresBuild: true
|
||||||
|
dev: true
|
||||||
|
optional: true
|
||||||
|
|
||||||
|
/esbuild-linux-arm64/0.15.9:
|
||||||
|
resolution: {integrity: sha512-a+bTtxJmYmk9d+s2W4/R1SYKDDAldOKmWjWP0BnrWtDbvUBNOm++du0ysPju4mZVoEFgS1yLNW+VXnG/4FNwdQ==}
|
||||||
|
engines: {node: '>=12'}
|
||||||
|
cpu: [arm64]
|
||||||
|
os: [linux]
|
||||||
|
requiresBuild: true
|
||||||
|
dev: true
|
||||||
|
optional: true
|
||||||
|
|
||||||
|
/esbuild-linux-mips64le/0.15.9:
|
||||||
|
resolution: {integrity: sha512-Zn9HSylDp89y+TRREMDoGrc3Z4Hs5u56ozZLQCiZAUx2+HdbbXbWdjmw3FdTJ/i7t5Cew6/Q+6kfO3KCcFGlyw==}
|
||||||
|
engines: {node: '>=12'}
|
||||||
|
cpu: [mips64el]
|
||||||
|
os: [linux]
|
||||||
|
requiresBuild: true
|
||||||
|
dev: true
|
||||||
|
optional: true
|
||||||
|
|
||||||
|
/esbuild-linux-ppc64le/0.15.9:
|
||||||
|
resolution: {integrity: sha512-OEiOxNAMH9ENFYqRsWUj3CWyN3V8P3ZXyfNAtX5rlCEC/ERXrCEFCJji/1F6POzsXAzxvUJrTSTCy7G6BhA6Fw==}
|
||||||
|
engines: {node: '>=12'}
|
||||||
|
cpu: [ppc64]
|
||||||
|
os: [linux]
|
||||||
|
requiresBuild: true
|
||||||
|
dev: true
|
||||||
|
optional: true
|
||||||
|
|
||||||
|
/esbuild-linux-riscv64/0.15.9:
|
||||||
|
resolution: {integrity: sha512-ukm4KsC3QRausEFjzTsOZ/qqazw0YvJsKmfoZZm9QW27OHjk2XKSQGGvx8gIEswft/Sadp03/VZvAaqv5AIwNA==}
|
||||||
|
engines: {node: '>=12'}
|
||||||
|
cpu: [riscv64]
|
||||||
|
os: [linux]
|
||||||
|
requiresBuild: true
|
||||||
|
dev: true
|
||||||
|
optional: true
|
||||||
|
|
||||||
|
/esbuild-linux-s390x/0.15.9:
|
||||||
|
resolution: {integrity: sha512-uDOQEH55wQ6ahcIKzQr3VyjGc6Po/xblLGLoUk3fVL1qjlZAibtQr6XRfy5wPJLu/M2o0vQKLq4lyJ2r1tWKcw==}
|
||||||
|
engines: {node: '>=12'}
|
||||||
|
cpu: [s390x]
|
||||||
|
os: [linux]
|
||||||
|
requiresBuild: true
|
||||||
|
dev: true
|
||||||
|
optional: true
|
||||||
|
|
||||||
|
/esbuild-netbsd-64/0.15.9:
|
||||||
|
resolution: {integrity: sha512-yWgxaYTQz+TqX80wXRq6xAtb7GSBAp6gqLKfOdANg9qEmAI1Bxn04IrQr0Mzm4AhxvGKoHzjHjMgXbCCSSDxcw==}
|
||||||
|
engines: {node: '>=12'}
|
||||||
|
cpu: [x64]
|
||||||
|
os: [netbsd]
|
||||||
|
requiresBuild: true
|
||||||
|
dev: true
|
||||||
|
optional: true
|
||||||
|
|
||||||
|
/esbuild-openbsd-64/0.15.9:
|
||||||
|
resolution: {integrity: sha512-JmS18acQl4iSAjrEha1MfEmUMN4FcnnrtTaJ7Qg0tDCOcgpPPQRLGsZqhes0vmx8VA6IqRyScqXvaL7+Q0Uf3A==}
|
||||||
|
engines: {node: '>=12'}
|
||||||
|
cpu: [x64]
|
||||||
|
os: [openbsd]
|
||||||
|
requiresBuild: true
|
||||||
|
dev: true
|
||||||
|
optional: true
|
||||||
|
|
||||||
|
/esbuild-sunos-64/0.15.9:
|
||||||
|
resolution: {integrity: sha512-UKynGSWpzkPmXW3D2UMOD9BZPIuRaSqphxSCwScfEE05Be3KAmvjsBhht1fLzKpiFVJb0BYMd4jEbWMyJ/z1hQ==}
|
||||||
|
engines: {node: '>=12'}
|
||||||
|
cpu: [x64]
|
||||||
|
os: [sunos]
|
||||||
|
requiresBuild: true
|
||||||
|
dev: true
|
||||||
|
optional: true
|
||||||
|
|
||||||
|
/esbuild-windows-32/0.15.9:
|
||||||
|
resolution: {integrity: sha512-aqXvu4/W9XyTVqO/hw3rNxKE1TcZiEYHPsXM9LwYmKSX9/hjvfIJzXwQBlPcJ/QOxedfoMVH0YnhhQ9Ffb0RGA==}
|
||||||
|
engines: {node: '>=12'}
|
||||||
|
cpu: [ia32]
|
||||||
|
os: [win32]
|
||||||
|
requiresBuild: true
|
||||||
|
dev: true
|
||||||
|
optional: true
|
||||||
|
|
||||||
|
/esbuild-windows-64/0.15.9:
|
||||||
|
resolution: {integrity: sha512-zm7h91WUmlS4idMtjvCrEeNhlH7+TNOmqw5dJPJZrgFaxoFyqYG6CKDpdFCQXdyKpD5yvzaQBOMVTCBVKGZDEg==}
|
||||||
|
engines: {node: '>=12'}
|
||||||
|
cpu: [x64]
|
||||||
|
os: [win32]
|
||||||
|
requiresBuild: true
|
||||||
|
dev: true
|
||||||
|
optional: true
|
||||||
|
|
||||||
|
/esbuild-windows-arm64/0.15.9:
|
||||||
|
resolution: {integrity: sha512-yQEVIv27oauAtvtuhJVfSNMztJJX47ismRS6Sv2QMVV9RM+6xjbMWuuwM2nxr5A2/gj/mu2z9YlQxiwoFRCfZA==}
|
||||||
|
engines: {node: '>=12'}
|
||||||
|
cpu: [arm64]
|
||||||
|
os: [win32]
|
||||||
|
requiresBuild: true
|
||||||
|
dev: true
|
||||||
|
optional: true
|
||||||
|
|
||||||
|
/esbuild/0.15.9:
|
||||||
|
resolution: {integrity: sha512-OnYr1rkMVxtmMHIAKZLMcEUlJmqcbxBz9QoBU8G9v455na0fuzlT/GLu6l+SRghrk0Mm2fSSciMmzV43Q8e0Gg==}
|
||||||
|
engines: {node: '>=12'}
|
||||||
|
hasBin: true
|
||||||
|
requiresBuild: true
|
||||||
|
optionalDependencies:
|
||||||
|
'@esbuild/android-arm': 0.15.9
|
||||||
|
'@esbuild/linux-loong64': 0.15.9
|
||||||
|
esbuild-android-64: 0.15.9
|
||||||
|
esbuild-android-arm64: 0.15.9
|
||||||
|
esbuild-darwin-64: 0.15.9
|
||||||
|
esbuild-darwin-arm64: 0.15.9
|
||||||
|
esbuild-freebsd-64: 0.15.9
|
||||||
|
esbuild-freebsd-arm64: 0.15.9
|
||||||
|
esbuild-linux-32: 0.15.9
|
||||||
|
esbuild-linux-64: 0.15.9
|
||||||
|
esbuild-linux-arm: 0.15.9
|
||||||
|
esbuild-linux-arm64: 0.15.9
|
||||||
|
esbuild-linux-mips64le: 0.15.9
|
||||||
|
esbuild-linux-ppc64le: 0.15.9
|
||||||
|
esbuild-linux-riscv64: 0.15.9
|
||||||
|
esbuild-linux-s390x: 0.15.9
|
||||||
|
esbuild-netbsd-64: 0.15.9
|
||||||
|
esbuild-openbsd-64: 0.15.9
|
||||||
|
esbuild-sunos-64: 0.15.9
|
||||||
|
esbuild-windows-32: 0.15.9
|
||||||
|
esbuild-windows-64: 0.15.9
|
||||||
|
esbuild-windows-arm64: 0.15.9
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/estree-walker/2.0.2:
|
||||||
|
resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
|
||||||
|
|
||||||
|
/fill-range/7.0.1:
|
||||||
|
resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
|
||||||
|
engines: {node: '>=8'}
|
||||||
|
dependencies:
|
||||||
|
to-regex-range: 5.0.1
|
||||||
|
|
||||||
|
/fsevents/2.3.2:
|
||||||
|
resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
|
||||||
|
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
|
||||||
|
os: [darwin]
|
||||||
|
requiresBuild: true
|
||||||
|
optional: true
|
||||||
|
|
||||||
|
/function-bind/1.1.1:
|
||||||
|
resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/glob-parent/5.1.2:
|
||||||
|
resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
|
||||||
|
engines: {node: '>= 6'}
|
||||||
|
dependencies:
|
||||||
|
is-glob: 4.0.3
|
||||||
|
|
||||||
|
/has/1.0.3:
|
||||||
|
resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
|
||||||
|
engines: {node: '>= 0.4.0'}
|
||||||
|
dependencies:
|
||||||
|
function-bind: 1.1.1
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/immutable/4.1.0:
|
||||||
|
resolution: {integrity: sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==}
|
||||||
|
|
||||||
|
/is-binary-path/2.1.0:
|
||||||
|
resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
|
||||||
|
engines: {node: '>=8'}
|
||||||
|
dependencies:
|
||||||
|
binary-extensions: 2.2.0
|
||||||
|
|
||||||
|
/is-core-module/2.10.0:
|
||||||
|
resolution: {integrity: sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==}
|
||||||
|
dependencies:
|
||||||
|
has: 1.0.3
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/is-extglob/2.1.1:
|
||||||
|
resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
|
||||||
|
engines: {node: '>=0.10.0'}
|
||||||
|
|
||||||
|
/is-glob/4.0.3:
|
||||||
|
resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
|
||||||
|
engines: {node: '>=0.10.0'}
|
||||||
|
dependencies:
|
||||||
|
is-extglob: 2.1.1
|
||||||
|
|
||||||
|
/is-number/7.0.0:
|
||||||
|
resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
|
||||||
|
engines: {node: '>=0.12.0'}
|
||||||
|
|
||||||
|
/magic-string/0.25.9:
|
||||||
|
resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
|
||||||
|
dependencies:
|
||||||
|
sourcemap-codec: 1.4.8
|
||||||
|
|
||||||
|
/nanoid/3.3.4:
|
||||||
|
resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==}
|
||||||
|
engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
|
||||||
|
hasBin: true
|
||||||
|
|
||||||
|
/normalize-path/3.0.0:
|
||||||
|
resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
|
||||||
|
engines: {node: '>=0.10.0'}
|
||||||
|
|
||||||
|
/path-parse/1.0.7:
|
||||||
|
resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/picocolors/1.0.0:
|
||||||
|
resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
|
||||||
|
|
||||||
|
/picomatch/2.3.1:
|
||||||
|
resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
|
||||||
|
engines: {node: '>=8.6'}
|
||||||
|
|
||||||
|
/postcss/8.4.16:
|
||||||
|
resolution: {integrity: sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==}
|
||||||
|
engines: {node: ^10 || ^12 || >=14}
|
||||||
|
dependencies:
|
||||||
|
nanoid: 3.3.4
|
||||||
|
picocolors: 1.0.0
|
||||||
|
source-map-js: 1.0.2
|
||||||
|
|
||||||
|
/readdirp/3.6.0:
|
||||||
|
resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
|
||||||
|
engines: {node: '>=8.10.0'}
|
||||||
|
dependencies:
|
||||||
|
picomatch: 2.3.1
|
||||||
|
|
||||||
|
/resolve/1.22.1:
|
||||||
|
resolution: {integrity: sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==}
|
||||||
|
hasBin: true
|
||||||
|
dependencies:
|
||||||
|
is-core-module: 2.10.0
|
||||||
|
path-parse: 1.0.7
|
||||||
|
supports-preserve-symlinks-flag: 1.0.0
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/rollup/2.78.1:
|
||||||
|
resolution: {integrity: sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==}
|
||||||
|
engines: {node: '>=10.0.0'}
|
||||||
|
hasBin: true
|
||||||
|
optionalDependencies:
|
||||||
|
fsevents: 2.3.2
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/sass/1.55.0:
|
||||||
|
resolution: {integrity: sha512-Pk+PMy7OGLs9WaxZGJMn7S96dvlyVBwwtToX895WmCpAOr5YiJYEUJfiJidMuKb613z2xNWcXCHEuOvjZbqC6A==}
|
||||||
|
engines: {node: '>=12.0.0'}
|
||||||
|
hasBin: true
|
||||||
|
dependencies:
|
||||||
|
chokidar: 3.5.3
|
||||||
|
immutable: 4.1.0
|
||||||
|
source-map-js: 1.0.2
|
||||||
|
|
||||||
|
/source-map-js/1.0.2:
|
||||||
|
resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
|
||||||
|
engines: {node: '>=0.10.0'}
|
||||||
|
|
||||||
|
/source-map/0.6.1:
|
||||||
|
resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
|
||||||
|
engines: {node: '>=0.10.0'}
|
||||||
|
|
||||||
|
/sourcemap-codec/1.4.8:
|
||||||
|
resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
|
||||||
|
|
||||||
|
/supports-preserve-symlinks-flag/1.0.0:
|
||||||
|
resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
|
||||||
|
engines: {node: '>= 0.4'}
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/to-fast-properties/2.0.0:
|
||||||
|
resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
|
||||||
|
engines: {node: '>=4'}
|
||||||
|
|
||||||
|
/to-regex-range/5.0.1:
|
||||||
|
resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
|
||||||
|
engines: {node: '>=8.0'}
|
||||||
|
dependencies:
|
||||||
|
is-number: 7.0.0
|
||||||
|
|
||||||
|
/vite/3.1.4_sass@1.55.0:
|
||||||
|
resolution: {integrity: sha512-JoQI08aBjY9lycL7jcEq4p9o1xUjq5aRvdH4KWaXtkSx7e7RpAh9D3IjzDWRD4Fg44LS3oDAIOG/Kq1L+82psA==}
|
||||||
|
engines: {node: ^14.18.0 || >=16.0.0}
|
||||||
|
hasBin: true
|
||||||
|
peerDependencies:
|
||||||
|
less: '*'
|
||||||
|
sass: '*'
|
||||||
|
stylus: '*'
|
||||||
|
terser: ^5.4.0
|
||||||
|
peerDependenciesMeta:
|
||||||
|
less:
|
||||||
|
optional: true
|
||||||
|
sass:
|
||||||
|
optional: true
|
||||||
|
stylus:
|
||||||
|
optional: true
|
||||||
|
terser:
|
||||||
|
optional: true
|
||||||
|
dependencies:
|
||||||
|
esbuild: 0.15.9
|
||||||
|
postcss: 8.4.16
|
||||||
|
resolve: 1.22.1
|
||||||
|
rollup: 2.78.1
|
||||||
|
sass: 1.55.0
|
||||||
|
optionalDependencies:
|
||||||
|
fsevents: 2.3.2
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/vue/3.2.40:
|
||||||
|
resolution: {integrity: sha512-1mGHulzUbl2Nk3pfvI5aXYYyJUs1nm4kyvuz38u4xlQkLUn1i2R7nDbI4TufECmY8v1qNBHYy62bCaM+3cHP2A==}
|
||||||
|
dependencies:
|
||||||
|
'@vue/compiler-dom': 3.2.40
|
||||||
|
'@vue/compiler-sfc': 3.2.40
|
||||||
|
'@vue/runtime-dom': 3.2.40
|
||||||
|
'@vue/server-renderer': 3.2.40_vue@3.2.40
|
||||||
|
'@vue/shared': 3.2.40
|
||||||
@ -0,0 +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>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,336 @@
|
|||||||
|
<script>
|
||||||
|
import GuessGrid from './components/GuessGrid.vue'
|
||||||
|
import Keyboard from './components/Keyboard.vue';
|
||||||
|
import Overlay from './components/Overlay.vue';
|
||||||
|
import PopUp from './components/PopUp.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
gridState: null,
|
||||||
|
keyboardMask: null,
|
||||||
|
|
||||||
|
currentAttempt: 0,
|
||||||
|
currentIndex: 0,
|
||||||
|
|
||||||
|
secretWords: null,
|
||||||
|
|
||||||
|
gameOver: false,
|
||||||
|
won: false,
|
||||||
|
overlayVisible: false,
|
||||||
|
|
||||||
|
popups: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.setupGame();
|
||||||
|
window.addEventListener('keyup', (e) => {
|
||||||
|
if (e.key === 'Backspace') {
|
||||||
|
this.keyPress('Delete');
|
||||||
|
} else if (e.key === 'Delete' || e.key === 'Enter') {
|
||||||
|
this.keyPress(e.key);
|
||||||
|
} else if (e.key.match(/^[a-zA-Z]$/)) {
|
||||||
|
this.keyPress(e.key.toUpperCase())
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
GuessGrid,
|
||||||
|
Keyboard,
|
||||||
|
Overlay,
|
||||||
|
PopUp,
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setupGame() {
|
||||||
|
this.gridState = Array.from({length: 6}, () => {
|
||||||
|
return Array.from({length: 5}, () => {
|
||||||
|
return {
|
||||||
|
letter: '',
|
||||||
|
state: 'unset'
|
||||||
|
};
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
this.keyboardMask = {
|
||||||
|
'Q': 'unused',
|
||||||
|
'W': 'unused',
|
||||||
|
'E': 'unused',
|
||||||
|
'R': 'unused',
|
||||||
|
'T': 'unused',
|
||||||
|
'Y': 'unused',
|
||||||
|
'U': 'unused',
|
||||||
|
'I': 'unused',
|
||||||
|
'O': 'unused',
|
||||||
|
'P': 'unused',
|
||||||
|
'A': 'unused',
|
||||||
|
'S': 'unused',
|
||||||
|
'D': 'unused',
|
||||||
|
'F': 'unused',
|
||||||
|
'G': 'unused',
|
||||||
|
'H': 'unused',
|
||||||
|
'J': 'unused',
|
||||||
|
'K': 'unused',
|
||||||
|
'L': 'unused',
|
||||||
|
'Z': 'unused',
|
||||||
|
'X': 'unused',
|
||||||
|
'C': 'unused',
|
||||||
|
'V': 'unused',
|
||||||
|
'B': 'unused',
|
||||||
|
'N': 'unused',
|
||||||
|
'M': 'unused',
|
||||||
|
'Enter': 'unused',
|
||||||
|
'Delete': 'unused',
|
||||||
|
};
|
||||||
|
|
||||||
|
this.currentAttempt = 0;
|
||||||
|
this.currentIndex = 0;
|
||||||
|
|
||||||
|
this.secretWords = [ 'SNARK', 'ITCHY' ];
|
||||||
|
|
||||||
|
this.gameOver = false;
|
||||||
|
this.won = false;
|
||||||
|
this.overlayVisible = false;
|
||||||
|
},
|
||||||
|
randomId() {
|
||||||
|
let result = '';
|
||||||
|
let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||||
|
let charactersLength = characters.length;
|
||||||
|
for ( let i = 0; i < 16; i++ ) {
|
||||||
|
result += characters.charAt(Math.floor(Math.random() *
|
||||||
|
charactersLength));
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
addPopUp(message) {
|
||||||
|
let id = this.randomId();
|
||||||
|
this.popups[id] = message;
|
||||||
|
setTimeout(() => delete this.popups[id], 10*1000);
|
||||||
|
},
|
||||||
|
checkWin(matches, oneWordMatch) {
|
||||||
|
if (!oneWordMatch) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
for(let i = 0; i < 5; i++) {
|
||||||
|
if (matches[i][0] === -1 || !matches[i][1]) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
resolveGame(won) {
|
||||||
|
this.won = won;
|
||||||
|
this.gameOver = true;
|
||||||
|
this.overlayVisible = true;
|
||||||
|
},
|
||||||
|
keyPress(event) {
|
||||||
|
if (event === "Delete") {
|
||||||
|
if(this.currentIndex > 0) {
|
||||||
|
this.currentIndex -= 1;
|
||||||
|
this.gridState[this.currentAttempt][this.currentIndex].letter = '';
|
||||||
|
this.gridState[this.currentAttempt][this.currentIndex].state = 'unset';
|
||||||
|
}
|
||||||
|
} else if (event == "Enter") {
|
||||||
|
if(this.currentIndex === 5) {
|
||||||
|
let matches = [ [-1,false], [-1,false], [-1,false], [-1,false], [-1,false] ];
|
||||||
|
for(let i = 0; i < 5; i++)
|
||||||
|
{
|
||||||
|
let letter = this.gridState[this.currentAttempt][i].letter;
|
||||||
|
for(let j = 0; j < 2; j++)
|
||||||
|
{
|
||||||
|
if (this.secretWords[j].includes(letter)) {
|
||||||
|
let matchType = this.secretWords[j][i] === letter;
|
||||||
|
matches[i] = [j, matchType];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let oneWordMatch = true;
|
||||||
|
for(let i = 0; i < 5; i++) {
|
||||||
|
for(let j = 0; j < 5; j++) {
|
||||||
|
if (matches[i][0] == 0 && matches[j][0] == 1) {
|
||||||
|
oneWordMatch = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for(let i = 0; i < 5; i++) {
|
||||||
|
if (matches[i][0] !== -1 && matches[i][1]) {
|
||||||
|
this.gridState[this.currentAttempt][i].state = `correct-${oneWordMatch ? 'full' : 'half'}`;
|
||||||
|
this.keyboardMask[this.gridState[this.currentAttempt][i].letter] = 'correct';
|
||||||
|
} else if (matches[i][0] !== -1 && !matches[i][1]) {
|
||||||
|
this.gridState[this.currentAttempt][i].state = `misplaced-${oneWordMatch ? 'full' : 'half'}`;
|
||||||
|
this.keyboardMask[this.gridState[this.currentAttempt][i].letter] = 'misplaced';
|
||||||
|
} else {
|
||||||
|
this.gridState[this.currentAttempt][i].state = 'wrong';
|
||||||
|
this.keyboardMask[this.gridState[this.currentAttempt][i].letter] = 'wrong';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.currentAttempt += 1;
|
||||||
|
this.currentIndex = 0;
|
||||||
|
|
||||||
|
if (this.checkWin(matches, oneWordMatch)) {
|
||||||
|
this.resolveGame(true);
|
||||||
|
} else if (this.currentAttempt === 6) {
|
||||||
|
this.resolveGame(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (this.currentIndex < 5) {
|
||||||
|
this.gridState[this.currentAttempt][this.currentIndex].letter = event;
|
||||||
|
this.gridState[this.currentAttempt][this.currentIndex].state = 'set';
|
||||||
|
this.currentIndex += 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="page">
|
||||||
|
<div class="interface">
|
||||||
|
<div class="header">
|
||||||
|
<div>Qwordle</div>
|
||||||
|
<div class="end">
|
||||||
|
<div class="material-icons-outlined">info</div>
|
||||||
|
<div v-if="gameOver" class="material-icons-outlined" @click="overlayVisible = true">military_tech</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<GuessGrid :state="gridState" />
|
||||||
|
<Keyboard :mask="keyboardMask" @add="keyPress($event)" />
|
||||||
|
</div>
|
||||||
|
<Overlay v-if="overlayVisible"
|
||||||
|
:secret-words="secretWords"
|
||||||
|
:state="gridState"
|
||||||
|
:won="won"
|
||||||
|
:last-attempt="currentAttempt"
|
||||||
|
@close="overlayVisible = false"
|
||||||
|
@reset="setupGame()"
|
||||||
|
@share="addPopUp('copied to clipboard!')"
|
||||||
|
/>
|
||||||
|
<div v-for="popup in popups" class="popup">
|
||||||
|
{{popup}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
:root {
|
||||||
|
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
font-synthesis: none;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
|
||||||
|
--text-color: #ffffff;
|
||||||
|
--background-color: #0f172a;
|
||||||
|
|
||||||
|
--button-color: #475569;
|
||||||
|
--button-highlight: #596679;
|
||||||
|
|
||||||
|
--popup-color: #323c4b;
|
||||||
|
|
||||||
|
--keyboard-unused: #475569;
|
||||||
|
--keyboard-wrong: #1e293b;
|
||||||
|
--keyboard-correct: #22c55e;
|
||||||
|
--keyboard-misplaced: #eab308;
|
||||||
|
|
||||||
|
--unset-cell-border: #475569;
|
||||||
|
--set-cell-border: #ffffff;
|
||||||
|
--correct-cell-dark: #22c55e;
|
||||||
|
--correct-cell-light: #4ade80;
|
||||||
|
--misplaced-cell-dark: #eab308;
|
||||||
|
--misplaced-cell-light: #facc15;
|
||||||
|
--wrong-cell: #334155;
|
||||||
|
|
||||||
|
--animation-duration: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
html, body, #app, .page {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--text-color);
|
||||||
|
background-color: var(--background-color);
|
||||||
|
text-shadow: 1px 1px #000000;
|
||||||
|
}
|
||||||
|
.page {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.interface {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 2rem;
|
||||||
|
|
||||||
|
padding: 6rem;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
width: 18rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
.end {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.material-icons, .material-icons-outlined, .button {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@keyframes appear {
|
||||||
|
0% {
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
transform: translate(-50%, -3rem);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
80% {
|
||||||
|
transform: translate(-50%, -3rem);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
animation: ease-in-out appear 5s;
|
||||||
|
|
||||||
|
background-color: var(--popup-color);
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 1rem 3rem;
|
||||||
|
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +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>
|
||||||
|
After Width: | Height: | Size: 496 B |
@ -0,0 +1,150 @@
|
|||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: ["state"]
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="guess-grid">
|
||||||
|
<template v-for="i in 6">
|
||||||
|
<div v-for="j in 5"
|
||||||
|
class="cell"
|
||||||
|
:class="state[i-1][j-1].state"
|
||||||
|
:style="`--index: ${j-1}`"
|
||||||
|
>
|
||||||
|
<div class="letter">
|
||||||
|
{{state[i-1][j-1].letter}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
@keyframes grow {
|
||||||
|
0% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes flip {
|
||||||
|
0% {
|
||||||
|
transform: rotateX(0deg)
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: rotateX(90deg)
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotateX(0deg)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes color-change {
|
||||||
|
from {
|
||||||
|
border-color: var(--set-cell-border);
|
||||||
|
background-color: var(--background-color);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
border-color: var(--cell-border-color);
|
||||||
|
background-color: var(--cell-backgroud-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.guess-grid {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.2rem 0.2rem;
|
||||||
|
grid-template-columns: repeat(5, 1fr);
|
||||||
|
grid-auto-flow: row;
|
||||||
|
|
||||||
|
.cell {
|
||||||
|
width: 3.5rem;
|
||||||
|
height: 3.5rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: .25rem;
|
||||||
|
border-width: 2px;
|
||||||
|
border-style: solid;
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 2.2rem;
|
||||||
|
|
||||||
|
.letter {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transform: translateY(0.1em);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.unset {
|
||||||
|
border-color: var(--unset-cell-border);
|
||||||
|
background-color: var(--background-color);
|
||||||
|
}
|
||||||
|
&.set {
|
||||||
|
animation: linear grow 0.25s;
|
||||||
|
border-color: var(--set-cell-border);
|
||||||
|
background-color: var(--background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.unset):not(.set) {
|
||||||
|
animation: linear flip var(--animation-duration) calc(var(--index) * var(--animation-duration)), step-end color-change calc(var(--index) * var(--animation-duration) + var(--animation-duration) / 2);
|
||||||
|
&::before {
|
||||||
|
animation: linear flip var(--animation-duration) calc(var(--index) * var(--animation-duration)), step-end color-change calc(var(--index) * var(--animation-duration) + var(--animation-duration) / 2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.wrong {
|
||||||
|
--cell-border-color: var(--wrong-cell);
|
||||||
|
--cell-backgroud-color: var(--wrong-cell);
|
||||||
|
border-color: var(--wrong-cell);
|
||||||
|
background-color: var(--wrong-cell);
|
||||||
|
}
|
||||||
|
&.misplaced-full {
|
||||||
|
border-color: var(--misplaced-cell-dark);
|
||||||
|
background-color: var(--misplaced-cell-dark);
|
||||||
|
}
|
||||||
|
&.misplaced-half {
|
||||||
|
border-color: var(--misplaced-cell-dark);
|
||||||
|
background-color: var(--wrong-cell);
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
background-color: var(--misplaced-cell-light);
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
left: 50%;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.correct-full {
|
||||||
|
border-color: var(--correct-cell-dark);
|
||||||
|
background-color: var(--correct-cell-dark);
|
||||||
|
}
|
||||||
|
&.correct-half {
|
||||||
|
border-color: var(--correct-cell-dark);
|
||||||
|
background-color: var(--wrong-cell);
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
background-color: var(--correct-cell-light);
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
left: 50%;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,144 @@
|
|||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
keyboard: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
row: [
|
||||||
|
{ letter: 'Q', start: 1, span: 2 },
|
||||||
|
{ letter: 'W', start: 3, span: 2 },
|
||||||
|
{ letter: 'E', start: 5, span: 2 },
|
||||||
|
{ letter: 'R', start: 7, span: 2 },
|
||||||
|
{ letter: 'T', start: 9, span: 2 },
|
||||||
|
{ letter: 'Y', start: 11, span: 2 },
|
||||||
|
{ letter: 'U', start: 13, span: 2 },
|
||||||
|
{ letter: 'I', start: 15, span: 2 },
|
||||||
|
{ letter: 'O', start: 17, span: 2 },
|
||||||
|
{ letter: 'P', start: 19, span: 2 },
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
row: [
|
||||||
|
{ letter: 'A', start: 2, span: 2 },
|
||||||
|
{ letter: 'S', start: 4, span: 2 },
|
||||||
|
{ letter: 'D', start: 6, span: 2 },
|
||||||
|
{ letter: 'F', start: 8, span: 2 },
|
||||||
|
{ letter: 'G', start: 10, span: 2 },
|
||||||
|
{ letter: 'H', start: 12, span: 2 },
|
||||||
|
{ letter: 'J', start: 14, span: 2 },
|
||||||
|
{ letter: 'K', start: 16, span: 2 },
|
||||||
|
{ letter: 'L', start: 18, span: 2 },
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
row: [
|
||||||
|
{
|
||||||
|
letter: 'Enter',
|
||||||
|
start: 1,
|
||||||
|
span: 3
|
||||||
|
},
|
||||||
|
{ letter: 'Z', start: 4, span: 2 },
|
||||||
|
{ letter: 'X', start: 6, span: 2 },
|
||||||
|
{ letter: 'C', start: 8, span: 2 },
|
||||||
|
{ letter: 'V', start: 10, span: 2 },
|
||||||
|
{ letter: 'B', start: 12, span: 2 },
|
||||||
|
{ letter: 'N', start: 14, span: 2 },
|
||||||
|
{ letter: 'M', start: 16, span: 2 },
|
||||||
|
{
|
||||||
|
letter: 'Delete',
|
||||||
|
start: 18,
|
||||||
|
span: 3
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: ["mask"],
|
||||||
|
methods: {
|
||||||
|
keyUp(event) {
|
||||||
|
console.log(event);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="keyboard-grid" @keyup="keyUp($event)">
|
||||||
|
<template v-for="row in keyboard">
|
||||||
|
<div v-for="button in row.row"
|
||||||
|
class="cell"
|
||||||
|
:class="mask[button.letter]"
|
||||||
|
:style="{
|
||||||
|
'--start': button.start,
|
||||||
|
'--span': button.span,
|
||||||
|
}"
|
||||||
|
@click="$emit('add', button.letter)"
|
||||||
|
>
|
||||||
|
<div class="letter">
|
||||||
|
{{button.letter}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
@keyframes hide-color {
|
||||||
|
from {
|
||||||
|
background-color: var(--keyboard-unused);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
background-color: var(--keyboard-unused);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.keyboard-grid {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.25rem 0.25rem;
|
||||||
|
grid-template-columns: repeat(20, 1fr);
|
||||||
|
grid-auto-flow: row;
|
||||||
|
|
||||||
|
width: 30rem;
|
||||||
|
|
||||||
|
.cell {
|
||||||
|
width: 100%;
|
||||||
|
height: 3.75rem;
|
||||||
|
// background: var(--color);
|
||||||
|
grid-column: var(--start) / span var(--span);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: .25rem;
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
.letter {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transform: translateY(0.1em);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.unused {
|
||||||
|
background-color: var(--keyboard-unused);
|
||||||
|
}
|
||||||
|
&:not(.unused) {
|
||||||
|
animation: hide-color calc(5 * var(--animation-duration));
|
||||||
|
|
||||||
|
}
|
||||||
|
&.correct {
|
||||||
|
background-color: var(--keyboard-correct);
|
||||||
|
}
|
||||||
|
&.wrong {
|
||||||
|
background-color: var(--keyboard-wrong);
|
||||||
|
}
|
||||||
|
&.misplaced {
|
||||||
|
background-color: var(--keyboard-misplaced);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,122 @@
|
|||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: ["secretWords", "state", "won", "lastAttempt"],
|
||||||
|
methods: {
|
||||||
|
stateToSymbol(state) {
|
||||||
|
if(state === 'correct-full') {
|
||||||
|
return '🟩';
|
||||||
|
} else if(state === 'correct-half') {
|
||||||
|
return '🟢';
|
||||||
|
} else if (state === 'misplaced-full') {
|
||||||
|
return '🟨';
|
||||||
|
} else if (state === 'misplaced-half') {
|
||||||
|
return '🟡';
|
||||||
|
} else {
|
||||||
|
return '⬜';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
share() {
|
||||||
|
let output = "PHC/Qwordle";
|
||||||
|
output += " " + (this.won ? this.lastAttempt : "X") + "/6\n";
|
||||||
|
for(let i = 0; i < this.lastAttempt; i++) {
|
||||||
|
for(let j = 0; j < 5; j++) {
|
||||||
|
output += this.stateToSymbol(this.state[i][j].state);
|
||||||
|
}
|
||||||
|
output += '\n';
|
||||||
|
}
|
||||||
|
navigator.clipboard.writeText(output).then(() => {
|
||||||
|
this.$emit('share', null);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="panel">
|
||||||
|
<div class="overlay">
|
||||||
|
<h1>{{won ? 'Successo!' : 'Oh no...'}}</h1>
|
||||||
|
Le parole da indovinare erano {{secretWords[0]}} e {{secretWords[1]}}
|
||||||
|
<div class="footer">
|
||||||
|
<div class="button" @click="$emit('reset', $event)">
|
||||||
|
Riprova
|
||||||
|
<div class="material-icons">
|
||||||
|
refresh
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="button" @click="share()">
|
||||||
|
Condividi
|
||||||
|
<div class="material-icons">
|
||||||
|
share
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="close">
|
||||||
|
<div class="material-icons" @click="$emit('close', $event)">
|
||||||
|
close
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.panel {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #ffffff55;
|
||||||
|
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
position: relative;
|
||||||
|
width: 30rem;
|
||||||
|
background-color: var(--background-color);
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 3rem 1.5rem;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 3rem;
|
||||||
|
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.15rem;
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.close {
|
||||||
|
position: absolute;
|
||||||
|
right: 1.5rem;
|
||||||
|
top: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
// width: 4rem;
|
||||||
|
padding: 0.75rem 1.25rem;
|
||||||
|
background-color: var(--button-color);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--button-highlight);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,46 @@
|
|||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: ["message"],
|
||||||
|
methods: {
|
||||||
|
stateToSymbol(state) {
|
||||||
|
if(state === 'correct-full') {
|
||||||
|
return '🟩';
|
||||||
|
} else if(state === 'correct-half') {
|
||||||
|
return '🟢';
|
||||||
|
} else if (state === 'misplaced-full') {
|
||||||
|
return '🟨';
|
||||||
|
} else if (state === 'misplaced-half') {
|
||||||
|
return '🟡';
|
||||||
|
} else {
|
||||||
|
return '⬜';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
share() {
|
||||||
|
let output = "PHC/Qwordle";
|
||||||
|
output += " " + (this.won ? this.lastAttempt : "X") + "/6\n";
|
||||||
|
for(let i = 0; i < this.lastAttempt; i++) {
|
||||||
|
for(let j = 0; j < 5; j++) {
|
||||||
|
output += this.stateToSymbol(this.state[i][j].state);
|
||||||
|
}
|
||||||
|
output += '\n';
|
||||||
|
}
|
||||||
|
navigator.clipboard.writeText(output).then(() => {
|
||||||
|
this.$emit('copied', null);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="popup">
|
||||||
|
{{message}}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
</style>
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
import './style.css'
|
||||||
|
import App from './App.vue'
|
||||||
|
|
||||||
|
createApp(App).mount('#app')
|
||||||
@ -0,0 +1,37 @@
|
|||||||
|
:root {
|
||||||
|
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
font-synthesis: none;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
|
||||||
|
--text-color: #ffffff;
|
||||||
|
--background-color: #0f172a;
|
||||||
|
|
||||||
|
--used-letter: #1e293b;
|
||||||
|
|
||||||
|
--unset-cell-border: #475569;
|
||||||
|
--set-cell-border: #ffffff;
|
||||||
|
--correct-cell-dark: #22c55e;
|
||||||
|
--correct-cell-light: #4ade80;
|
||||||
|
--misplaced-cell-dark: #eab308;
|
||||||
|
--misplaced-cell-light: #facc15;
|
||||||
|
--wrong-cell: #334155;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
html, body, #app, .page {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--text-color);
|
||||||
|
background-color: var(--background-color);
|
||||||
|
}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()]
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue