add setting to control dificulty

skedwards88 · Apr 1, 2024 · fe425ad · fe425ad
1 parent dba0c86
commit fe425ad
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 37 deletions.
diff --git a/src/components/Settings.js b/src/components/Settings.js
@@ -3,31 +3,40 @@ import React from "react";
 export default function Settings({setDisplay, dispatchGameState, gameState}) {
   function handleNewGame(event) {
     event.preventDefault();
-    const newNumLetters = event.target.elements.numLetters.value;
-    const newIndicateValidity = event.target.elements.indicateValidity.checked;
+    const newDifficultyLevel = parseInt(
+      event.target.elements.difficultyLevel.value,
+    );
 
     dispatchGameState({
       action: "newGame",
-      numLetters: newNumLetters,
-      indicateValidity: newIndicateValidity,
+      difficultyLevel: newDifficultyLevel,
     });
     setDisplay("game");
   }
 
   return (
     <form className="App settings" onSubmit={(e) => handleNewGame(e)}>
       <div id="settings">
-        <div className="setting">{"TODO insert setting"}</div>
-
         <div className="setting">
-          {
-            "TODO You found a game that is still in development! Check back soon for the full game play"
-          }
+          <div className="setting-description">
+            <label htmlFor="difficultyLevel">Difficulty</label>
+          </div>
+          <div id="settingSliderContainer">
+            <div className="settingSliderValue">–</div>
+            <input
+              id="difficultyLevel"
+              className="difficultyLevel"
+              type="range"
+              min="1"
+              max="7"
+              defaultValue={gameState.difficultyLevel || "3"}
+            />
+            <div className="settingSliderValue">+</div>
+          </div>
         </div>
       </div>
       <div id="setting-buttons">
-        {/* todo un-disable the new game button */}
-        <button type="submit" aria-label="new game" disabled>
+        <button type="submit" aria-label="new game">
           New game
         </button>
         <button

diff --git a/src/logic/gameInit.js b/src/logic/gameInit.js
@@ -3,7 +3,32 @@ import getRandomSeed from "../common/getRandomSeed";
 import getDailySeed from "../common/getDailySeed";
 import {getGame} from "./getGame";
 
-export function gameInit({useSaved = true, isDaily = false, seed}) {
+function getShapeSizeForDifficulty(difficultyLevel) {
+  // Difficulty can be 1-7
+  const difficulties = [
+    [3, 3],
+    [3, 4],
+    [4, 4],
+    [4, 5],
+    [5, 5],
+    [5, 6],
+    [6, 6],
+  ];
+
+  return difficulties[difficultyLevel];
+}
+
+function getDifficultyLevelForDay() {
+  // todo
+  return 3;
+}
+
+export function gameInit({
+  difficultyLevel,
+  useSaved = true,
+  isDaily = false,
+  seed,
+}) {
   if (isDaily) {
     // todo remove
     return {};
@@ -35,8 +60,11 @@ export function gameInit({useSaved = true, isDaily = false, seed}) {
   sendAnalytics("new_game");
 
   const gridSize = 4;
-  const minWordLength = 4; // todo don't hardcode
-  const maxWordLength = 4; // todo don't hardcode
+
+  difficultyLevel = isDaily ? getDifficultyLevelForDay() : difficultyLevel || 3;
+
+  const [minWordLength, maxWordLength] =
+    getShapeSizeForDifficulty(difficultyLevel);
 
   const [letters, shapes, officialSolutions] = getGame({
     gridSize,
@@ -62,5 +90,6 @@ export function gameInit({useSaved = true, isDaily = false, seed}) {
     foundSolutions,
     playedIndexes: [],
     result: "",
+    difficultyLevel,
   };
 }
diff --git a/src/styles/Settings.css b/src/styles/Settings.css
@@ -1,22 +1,3 @@
-/* Checkbox styling */
-input[type="checkbox" i] {
-  all: unset;
-  text-decoration: none;
-  text-align: center;
-  appearance: none;
-  width: calc(var(--default-box-size) * 0.8);
-  height: calc(var(--default-box-size) * 0.8);
-  border-radius: 2px;
-  background-color: var(--light-color);
-  border: 3px solid var(--light-color);
-}
-
-input[type="checkbox" i]:checked {
-  background-image: url("../images/icons/checkmark-black.svg");
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: contain;
-}
 
 /* Slider setting styling */
 input[type="range"] {
@@ -123,6 +104,7 @@ input[type="range"]:focus::-ms-fill-upper {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  align-items: center;
   text-align: left;
   margin: 0.5cm;
 }
@@ -131,10 +113,6 @@ input[type="range"]:focus::-ms-fill-upper {
   padding: 0 5px 0 0;
 }
 
-.setting-info {
-  font-size: calc(var(--default-font-size) / 2);
-}
-
 #setting-buttons {
   display: flex;
   flex-direction: row;
@@ -145,3 +123,18 @@ input[type="range"]:focus::-ms-fill-upper {
 #setting-buttons > button {
   margin: 10px;
 }
+
+.settingSliderValue{
+  font-size: calc(var(--default-font-size) / 1.5);
+  color: var(--light-color);
+  padding: 0 1vh;
+  justify-content: center;
+  align-items: center;
+}
+
+#settingSliderContainer{
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: baseline;
+}