Validate settings (#59)

src/components/AppStateProvider/AppStateProvider.tsx

@@ -1,13 +1,6 @@
 import { createContext, ReactNode, useState } from "react";
 import { DEFAULT_DISPLAY_COLORS } from "../../constants";
-
-export interface AppPreferences {
-  pentominoSize: number;
-  displayColors: string[];
-  numVisibleColors: number;
-  copyImage: boolean;
-  showCdot: boolean;
-}
+import { AppPreferences } from "./appConstants";
 
 const DEFAULT_APP_PREFERENCES: AppPreferences = {
   pentominoSize: 12,

src/components/AppStateProvider/appConstants.ts

@@ -0,0 +1,17 @@
+import { DEFAULT_DISPLAY_COLORS } from "../../constants";
+
+export interface AppPreferences {
+  pentominoSize: number;
+  displayColors: string[];
+  numVisibleColors: number;
+  copyImage: boolean;
+  showCdot: boolean;
+}
+
+export const DEFAULT_APP_PREFERENCES: AppPreferences = {
+  pentominoSize: 12,
+  displayColors: DEFAULT_DISPLAY_COLORS,
+  numVisibleColors: 3,
+  copyImage: false,
+  showCdot: false,
+};

src/components/GameStateProvider/GameStateProvider.tsx

@@ -15,7 +15,7 @@ import {
   ALL_PENTOMINO_NAMES,
   Action,
   Colors,
-  DEFAULT_CONFIG,
+  DEFAULT_GAME_CONFIG,
   Orientation,
   PENTOMINO_NAMES,
   PaintedCell,
@@ -37,6 +37,7 @@ import {
   RotationDirection,
   orientationReducer,
 } from "./currentPentominoReducer";
+import { DEFAULT_GAME_PREFERENCES } from "./gameConstants";
 
 interface GameState {
   grid: PlacedPentomino[][];
@@ -90,12 +91,14 @@ const DEFAULT_GAME_STATE: GameState = {
 
 export const GameStateContext = createContext(DEFAULT_GAME_STATE);
 export default function GameStateProvider({ children }: { children: ReactNode }) {
-  const [grid, setGrid] = useState<PlacedPentomino[][]>(DEFAULT_CONFIG.grid);
-  const [pentominoColors, setPentominoColors] = useState<Colors>(DEFAULT_CONFIG.colors);
-  const [surface, setSurface] = useState<Surface>(DEFAULT_CONFIG.surface);
+  const [grid, setGrid] = useState<PlacedPentomino[][]>(DEFAULT_GAME_CONFIG.grid);
+  const [pentominoColors, setPentominoColors] = useState<Colors>(DEFAULT_GAME_CONFIG.colors);
+  const [surface, setSurface] = useState<Surface>(DEFAULT_GAME_CONFIG.surface);
 
   const [defaultRandomColors, setDefaultRandomColors] = useState<boolean>(() => {
-    return (window.localStorage.getItem("randc") || "false") === "true";
+    return (
+      (window.localStorage.getItem("randc") || DEFAULT_GAME_PREFERENCES.showKeyboardIndicators.toString()) === "true"
+    );
   });
 
   const [showInvalidUrlError, setShowInvalidUrlError] = useState<boolean>(false);
@@ -128,7 +131,9 @@ export default function GameStateProvider({ children }: { children: ReactNode })
   const [actionHistory, setActionHistory] = useState<Action[]>([]);
   const navigate = useNavigate();
 
-  const [showKeyboardIndicators, setShowKeyboardIndicators] = useState<boolean>(false);
+  const [showKeyboardIndicators, setShowKeyboardIndicators] = useState<boolean>(
+    DEFAULT_GAME_PREFERENCES.showKeyboardIndicators
+  );
   const [boardHovered, setBoardHovered] = useState<boolean>(false);
 
   const updateUrl = useRef(

src/components/GameStateProvider/gameConstants.ts

@@ -0,0 +1,9 @@
+export interface GamePreferences {
+  showKeyboardIndicators: boolean;
+  defaultRandomColors: boolean;
+}
+
+export const DEFAULT_GAME_PREFERENCES = {
+  showKeyboardIndicators: false,
+  defaultRandomColors: false,
+};

src/components/Modal/Modal.tsx

@@ -1,19 +1,23 @@
 import * as Dialog from "@radix-ui/react-dialog";
-import { ReactNode } from "react";
+import { Dispatch, ReactNode, SetStateAction } from "react";
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import clsx from "clsx";
 
 export const Modal = ({
   children,
   trigger,
   onOpenAutoFocus,
+  open,
+  onOpenChange,
 }: {
   children: ReactNode;
   trigger: ReactNode;
   onOpenAutoFocus?: () => void;
+  open?: boolean | undefined;
+  onOpenChange?: Dispatch<SetStateAction<boolean>> | undefined;
 }) => {
   return (
-    <Dialog.Root>
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
       <Dialog.Trigger asChild>
         <button>{trigger}</button>
       </Dialog.Trigger>