better cosmetics and favicon

LooLzzz · Aug 30, 2024 · 6b555e8 · 6b555e8
1 parent 25a6ac8
commit 6b555e8
Show file tree

Hide file tree

Showing 18 changed files with 74 additions and 64 deletions.
diff --git a/README.md b/README.md
@@ -1,50 +1,20 @@
-# React + TypeScript + Vite
+# Better Wordle
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+## Description
 
-Currently, two official plugins are available:
+This is an implementation of the popular word-guessing game Wordle with my own twist.
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## Objective
 
-## Expanding the ESLint configuration
+Wordle is a popular word-guessing game where players try to guess a hidden word by making guesses and receiving feedback on their guesses.  
+The game provides clues in the form of colored squares, indicating whether a guessed letter is correct and in the correct position (usually marked with a green square) or correct but in the wrong position (usually marked with a yellow square).  
+The objective is to guess the word within a limited number of  attempts.
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+## Features
 
-- Configure the top-level `parserOptions` property like this:
+All the normal Wordle features and rules are present, with the following additional features:
 
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
-```
-
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
-```
+- Clicking on a box will highlight it and pressing a key will fill the highlighted box with the corresponding letter.
+- Pressing the Backspace key will clear the highlighted box.
+- Pressing left or right arrow keys will move the highlight left or right.
+- Pressing the Escape key will clear the selection.
diff --git a/index.html b/index.html
@@ -2,12 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="manifest" href="/site.webmanifest">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <title>Better Wordle</title>
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
-</html>
+</html>
diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -0,0 +1,19 @@
+{
+   "name": "",
+   "short_name": "",
+   "icons": [
+      {
+         "src": "/android-chrome-192x192.png",
+         "sizes": "192x192",
+         "type": "image/png"
+      },
+      {
+         "src": "/android-chrome-512x512.png",
+         "sizes": "512x512",
+         "type": "image/png"
+      }
+   ],
+   "theme_color": "#FFFFFF",
+   "background_color": "#FFFFFF",
+   "display": "standalone"
+}
diff --git a/src/assets/backspace.svg b/src/assets/backspace.svg
diff --git a/src/assets/enter.svg b/src/assets/enter.svg
diff --git a/src/assets/index.ts b/src/assets/index.ts
@@ -1,7 +1,7 @@
 // @ts-ignore
 export { default as BackspaceIcon } from './backspace.svg?react'
 // @ts-ignore
-export { default as LoginIcon } from './login.svg?react'
+export { default as EnterIcon } from './enter.svg?react'
 
 import answerList from './answerlist.json'
 import wordList from './wordlist.json'

diff --git a/src/assets/login.svg b/src/assets/login.svg
diff --git a/src/assets/wordle-icon.svg b/src/assets/wordle-icon.svg
diff --git a/src/components/FloatingKeyboard/index.module.scss b/src/components/FloatingKeyboard/index.module.scss
@@ -14,8 +14,10 @@
     padding: 0rem 0.5rem !important;
   }
 
-  &:hover {
-    background-color: var(--mantine-color-default-hover);
+  @media screen and (min-width: 768px) {
+    &:hover {
+      background-color: var(--mantine-color-default-hover);
+    }
   }
 
   &:active,

diff --git a/src/components/FloatingKeyboard/index.tsx b/src/components/FloatingKeyboard/index.tsx
@@ -1,7 +1,7 @@
 import { Group, Kbd, Stack } from '@mantine/core'
 import { useEffect, useMemo, useRef } from 'react'
 
-import { BackspaceIcon, LoginIcon as EnterIcon } from '@/assets'
+import { BackspaceIcon, EnterIcon } from '@/assets'
 import { useWordleStore } from '@/hooks'
 
 import classes from './index.module.scss'
@@ -121,7 +121,7 @@ const FloatingKeyboard = () => {
                     key === 'Backspace'
                       ? <BackspaceIcon style={{ transform: 'translateY(0.25rem)' }} />
                       : key === 'Enter'
-                        ? <EnterIcon style={{ transform: 'translateY(0.25rem)' }} />
+                        ? <EnterIcon style={{ transform: 'translateY(0.3rem)' }} />
                         : key
                   }
                 </Kbd>

diff --git a/src/components/WordsGuesser/Guess/index.module.scss b/src/components/WordsGuesser/Guess/index.module.scss
@@ -1,12 +1,8 @@
-$reveal-anim-duration-sec: 0.35;
-$reveal-anim-duration: #{$reveal-anim-duration-sec}s;
+$reveal-anim-duration-ms: 350;
+$reveal-anim-duration: #{$reveal-anim-duration-ms}ms;
 $reveal-anim-timing-function: ease;
 
 @keyframes reveal-anim {
-    // 0% {
-    //     transform: scaleY(1);
-    // }
-
     0% {
         transform: scaleY(0);
     }
@@ -16,11 +12,10 @@ $reveal-anim-timing-function: ease;
     }
 }
 
-
-@for $i from 1 through 10 {
+@for $i from 1 through 6 {
     .lettersContainer .reveal:nth-child(#{$i}n) {
-        animation-delay: #{($i - 1) * $reveal-anim-duration-sec}s;
-        transition-delay: #{($i - 1) * $reveal-anim-duration-sec}s;
+        animation-delay: #{($i - 1) * $reveal-anim-duration-ms}ms;
+        transition-delay: #{($i - 1) * $reveal-anim-duration-ms}ms;
     }
 }
 
@@ -29,6 +24,7 @@ $reveal-anim-timing-function: ease;
     height: 5rem;
     border: 1px solid var(--mantine-color-default-border);
     text-transform: uppercase;
+    transition: background-color 150ms;
 
     @media screen and (max-width: 768px) {
         width: 3.5rem;
@@ -50,7 +46,6 @@ $reveal-anim-timing-function: ease;
 
 .reveal {
     animation: reveal-anim $reveal-anim-duration;
-    transition: background-color $reveal-anim-duration;
     animation-iteration-count: 1;
     animation-timing-function: $reveal-anim-timing-function;
 }

diff --git a/src/main.tsx b/src/main.tsx
@@ -26,7 +26,7 @@ createRoot(document.getElementById('root')!).render(
     >
       <Notifications
         position='top-center'
-        autoClose={2000}
+        autoClose={3000}
         limit={2}
       />
       <App />