minimal viable product

2 years ago · 846c7c7acc
commit 846c7c7acc
16 changed files with 1493 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -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?
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}
--- a/README.md
+++ b/README.md
@ -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)
--- a/index.html
+++ b/index.html
@ -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>
--- a/package.json
+++ b/package.json
@ -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"
+  }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -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
--- a/public/vite.svg
+++ b/public/vite.svg
@ -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>
--- a/src/App.vue
+++ b/src/App.vue
@ -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>
--- a/src/assets/vue.svg
+++ b/src/assets/vue.svg
@ -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>
--- a/src/components/GuessGrid.vue
+++ b/src/components/GuessGrid.vue
@ -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>
--- a/src/components/Keyboard.vue
+++ b/src/components/Keyboard.vue
@ -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>
--- a/src/components/Overlay.vue
+++ b/src/components/Overlay.vue
@ -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>
--- a/src/components/PopUp.vue
+++ b/src/components/PopUp.vue
@ -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>
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+
+createApp(App).mount('#app')
--- a/src/style.css
+++ b/src/style.css
@ -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);
+}
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()]
+})
				`@ -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>
				`@ -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>`