more fixes

RobiFerentz · Jan 23, 2024 · 4fbca01 · 4fbca01
1 parent 9025877
commit 4fbca01
Show file tree

Hide file tree

Showing 10 changed files with 53 additions and 40 deletions.
diff --git a/index.html b/index.html
@@ -3,14 +3,13 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+    <meta name="theme-color" content="#ffad06" />
     <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
     <title>Solidoku - A Sudoku game in Solid.js</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-
     <script src="/src/index.tsx" type="module"></script>
   </body>
 </html>
diff --git a/src/App.module.css b/src/App.module.css
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,4 @@
 import { createSignal, type Component, Show, onMount } from 'solid-js'
-import styles from './App.module.css'
 import { GameContainer } from './GameContainer'
 import { GameMenu } from './GameMenu'
 import { gameController } from './stores/GameStore'
@@ -13,7 +12,7 @@ const App: Component = () => {
   const [showGame, setShowGame] = createSignal(false)
 
   return (
-    <div class={styles.App}>
+    <>
       <Header />
       <Show when={!showGame()}>
         <GameMenu
@@ -25,7 +24,7 @@ const App: Component = () => {
       <Show when={showGame()}>
         <GameContainer />
       </Show>
-    </div>
+    </>
   )
 }
 

diff --git a/src/GameMenu.tsx b/src/GameMenu.tsx
@@ -1,5 +1,5 @@
 import { For, Show } from 'solid-js'
-import { Difficulty } from './game/generate'
+import { Difficulties, Difficulty } from './game/types'
 import styles from './GameMenu.module.css'
 import { gameController } from './stores/GameStore'
 
@@ -9,7 +9,7 @@ type GameMenuProps = {
   onResumeGame: () => void
 }
 export const GameMenu = (props: GameMenuProps) => {
-  const levels = ['Easy', 'Medium', 'Hard'] as const
+  const levels = Object.keys(Difficulties) as Difficulty[]
   const handleNewGame = (difficulty: Difficulty) => {
     gameController.createGame(difficulty)
     props.onNewGame()

diff --git a/src/Header.module.css b/src/Header.module.css
@@ -6,15 +6,14 @@
   background-color: var(--flame-orange);
   color: #fff;
   padding: 15px; 
-  box-shadow: 0 0 3px 5px rgba(0, 0, 0, 0.2);
+  box-shadow: -5px 0 3px 5px rgba(0, 0, 0, 0.2);
   background: linear-gradient(to right, var(--fromColor), var(--toColor));
 }
 
 .appName {
   display: inline-block;
   text-align: center;
-  font-size: 2rem;
-  font-family: Impact, sans-serif;
+  font-size: 2rem;  
   text-shadow: 2px 2px 4px #111;
   margin:0;
   letter-spacing: 0.6rem;

diff --git a/src/NumberSquare.module.css b/src/NumberSquare.module.css
@@ -1,10 +1,11 @@
 .square {
+  --sqw: min(calc((99vw - 1rem) / 9), 50px);
   border: 1px solid #999;  
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 50px;
-  width: 50px;
+  height: var(--sqw);
+  width: var(--sqw);
   font-size: 1.2rem;
 }
 

diff --git a/src/game/generate.ts b/src/game/generate.ts
@@ -1,31 +1,11 @@
+import { Difficulties, Difficulty, Game } from "./types"
 const br = [1, 2, 3, 4, 5, 6, 7, 8, 9]
-export type Difficulty = 'Easy' | 'Medium' | 'Hard'
+
 function getNumberToRemove(difficulty: Difficulty): number {
-  let min = 34,
-    max = 41
-  switch (difficulty) {
-    case 'Hard':
-      min = 58
-      max = 64
-      break
-    case 'Medium':
-      min = 42
-      max = 57
-      break
-    case 'Easy':
-    default:
-      break
-  }
+  const { min, max } = Difficulties[difficulty]
   return Math.floor(Math.random() * (max - min)) + min  
 }
 
-export type Game = {
-  solution: number[][]
-  puzzle: number[][]
-  current: number[][]
-  mistakes: number
-  difficulty: Difficulty
-}
 function shuffle(input: number[]) {
   // Shuffle the array using Fisher-Yates algorithm
   const row = [...input]

diff --git a/src/game/types.ts b/src/game/types.ts
@@ -0,0 +1,32 @@
+
+export const Difficulties =  {
+  Easy: {
+    min: 36,
+    max: 40
+  },
+  Medium: {
+    min: 40,
+    max: 47
+  },
+  Hard: {
+    min: 48,
+    max:54
+  },
+  Expert: {
+    min: 55,
+    max: 59
+  },
+  Insane: {
+    min: 60,
+    max: 64
+  }
+} as const;
+export type Difficulty = keyof typeof Difficulties
+
+export type Game = {
+  solution: number[][]
+  puzzle: number[][]
+  current: number[][]
+  mistakes: number
+  difficulty: Difficulty
+}
diff --git a/src/index.css b/src/index.css
@@ -2,19 +2,21 @@
   box-sizing: border-box;
 }
 body {
+  width: 100vw;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: Impact, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   --flame-red: #ff105f;
   --flame-orange: #ffad06;
 }
 
+#root {
+  width: 100vw;
+}
+
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
 
 @property --fromColor {

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "forceConsistentCasingInFileNames": true,
     "strict": true,
     "target": "ESNext",
     "module": "ESNext",