Merge pull request #2 from NickKoepr/lang-selector

Added animations and fixed a bug with the language selector.

Author: NickKoepr

src/app/App.tsx

@@ -11,9 +11,9 @@ import {
   setLanguage,
   type Language,
 } from "../model/Game";
-import StatusMessage from "./components/message/StatusMessage";
 import DefaultButton from "./components/common/button/DefaultButton";
 import DefaultSelector from "./components/common/selector/DefaultSelector";
+import StatusMessage from "./components/common/message/StatusMessage";
 
 function App() {
   const [gameState, setGameState] = useState(() => initGame());

src/app/components/common/button/DefaultButton.css

@@ -7,7 +7,3 @@
     border: 2px solid var(--outline-button-color);
     border-radius: 10px;
 }
-
-.submit:hover {
-    background-color: var(--input-color);
-}

…app/components/message/StatusMessage.css …ponents/common/message/StatusMessage.csssrc/app/components/message/StatusMessage.css renamed to src/app/components/common/message/StatusMessage.css src/app/components/message/StatusMessage.css renamed to src/app/components/common/message/StatusMessage.css

@@ -1,9 +1,10 @@
 .default-selector {
     margin: 20px;
-    background: var(--selector-color);
+    background-color: var(--selector-color);
     padding: 10px 20px 10px 20px;
     border: 2px solid var(--outline-selector-color);
-
+    font-family: var(--font);
+    font-weight: 650;
     /* Disable 'gradient' effect on Safari */
     -webkit-appearance: none;
 }

…app/components/message/StatusMessage.tsx …ponents/common/message/StatusMessage.tsxsrc/app/components/message/StatusMessage.tsx renamed to src/app/components/common/message/StatusMessage.tsx src/app/components/message/StatusMessage.tsx renamed to src/app/components/common/message/StatusMessage.tsx

@@ -8,6 +8,7 @@
     background-color: var(--tile-color);
     border-radius: 15%;
     border: 2px solid var(--outline-tile-color);
+    transition-duration: 0.2s;
 }
 
 .correct {

src/app/components/common/selector/DefaultSelector.css

@@ -4,7 +4,7 @@ import { words as wordsNL } from "../../words/words-nl.json";
 
 export type Language = "nl" | "en";
 
-export let language: Language = "nl";
+export let language: Language = "en";
 
 export function setLanguage(lang: Language) {
   language = lang;
@@ -81,7 +81,7 @@ export function isFinished(game: Game): boolean {
 
 export function initGame(): Game {
   const word = getRandomWord(language).toLowerCase();
-  console.log(word);
+
   return {
     language: language,
     finalWord: word,