Game draw show drawing and initial settings

web/public/locales/cs/expo-editor.json

@@ -245,7 +245,11 @@
       "imageResultLabel": "Výsledek",
       "imageResultTooltip": "Z knihovny dokumentů vyberte kompletní obrázek.",
       "showUsersDrawing": "Zobrazit kresbu návštěvníků",
-      "showUsersDrawingTooltip": "Pokud chcete, aby návštěvníci viděli správné řešení i svoje tipy, zaškrtněte toto pole."
+      "showUsersDrawingTooltip": "Pokud chcete, aby návštěvníci viděli správné řešení i svoje tipy, zaškrtněte toto pole.",
+      "initialDrawingSettingsTitle": "Počáteční nastavení pro kreslení",
+      "initialDrawingColorLabel": "Počáteční barva",
+      "initialDrawingThicknessLabel": "Počáteční tloušťka",
+      "resetInitialDrawingSettingsBtnLabel": "Reset"
     },
     "gameWipeScreen": {
       "taskTooltip": "Co nejpřesněji popište návštěvníkům jejich úkol (např. Podívejte se, jak vypadala budova před její rekonstrukcí). ",

web/public/locales/en/expo-editor.json

@@ -245,7 +245,11 @@
       "imageResultLabel": "Result",
       "imageResultTooltip": "Select a complete image from the document library.",
       "showUsersDrawing": "View user's drawing",
-      "showUsersDrawingTooltip": "Check this box if you want the user to see both the correct solution and their guess."
+      "showUsersDrawingTooltip": "Check this box if you want the user to see both the correct solution and their guess.",
+      "initialDrawingSettingsTitle": "Initial settings for drawing",
+      "initialDrawingColorLabel": "Initial color",
+      "initialDrawingThicknessLabel": "Initial thickness",
+      "resetInitialDrawingSettingsBtnLabel": "Reset"
     },
     "gameWipeScreen": {
       "taskTooltip": "Describe the user's task as precisely as possible (e.g. see how the building looked before its renovation).",

web/public/locales/sk/expo-editor.json

@@ -245,7 +245,11 @@
       "imageResultLabel": "Výsledok",
       "imageResultTooltip": "Z knižnice dokumentov vyberte kompletný obrázok.",
       "showUsersDrawing": "Zobraziť kresbu návštevníkov",
-      "showUsersDrawingTooltip": "Ak chcete, aby návštevníci videli správne riešenie aj svoje tipy, zaškrtnite toto pole."
+      "showUsersDrawingTooltip": "Ak chcete, aby návštevníci videli správne riešenie aj svoje tipy, zaškrtnite toto pole.",
+      "initialDrawingSettingsTitle": "Počiatočné nastavenia pre kreslenie",
+      "initialDrawingColorLabel": "Počiatočná farba",
+      "initialDrawingThicknessLabel": "Počiatočná hrúbka",
+      "resetInitialDrawingSettingsBtnLabel": "Reset"
     },
     "gameWipeScreen": {
       "taskTooltip": "Čo najpresnejšie popíšte návštevníkom ich úlohu (napr. Pozrite sa, ako vyzerala budova pred jej rekonštrukciou). ",

web/src/constants/screen.ts

@@ -9,3 +9,7 @@ export const ZOOM_SCREEN_DEFAULT_SEQ_DELAY_TIME = 2; // in seconds
 export const GAME_SCREEN_DEFAULT_RESULT_TIME = 4; // in seconds
 
 export const GAME_FIND_DEFAULT_NUMBER_OF_PINS = 1;
+
+export const GAME_DRAW_DEFAULT_COLOR = "#000000";
+export const GAME_DRAW_DEFAULT_THICKNESS = 5;
+export const GAME_DRAW_DEFAULT_IS_ERASING = false;

web/src/containers/expo-administration/expo-editor/screen-game-draw/Images.tsx

@@ -1,7 +1,9 @@
+import { useCallback } from "react";
 import { useDispatch } from "react-redux";
 import { useTranslation } from "react-i18next";
 
 // Components
+import Button from "react-md/lib/Buttons/Button";
 import Checkbox from "react-md/lib/SelectionControls/Checkbox";
 import ImageBox from "components/editors/ImageBox";
 import HelpIcon from "components/help-icon";
@@ -13,6 +15,10 @@ import { AppDispatch } from "store/store";
 // Actions and utils
 import { getFileById } from "actions/file-actions-typed";
 import { updateScreenData } from "actions/expoActions";
+import {
+  GAME_DRAW_DEFAULT_COLOR,
+  GAME_DRAW_DEFAULT_THICKNESS,
+} from "constants/screen";
 
 // - -
 
@@ -37,6 +43,15 @@ const Images = ({ activeScreen }: ImagesProps) => {
     dispatch(updateScreenData({ image2: img.id }));
   };
 
+  const resetInitialDrawingSettings = useCallback(() => {
+    dispatch(
+      updateScreenData({
+        initialColor: GAME_DRAW_DEFAULT_COLOR,
+        initialThickness: GAME_DRAW_DEFAULT_THICKNESS,
+      })
+    );
+  }, [dispatch]);
+
   return (
     <div className="container container-tabMenu">
       <div className="screen">
@@ -80,12 +95,13 @@ const Images = ({ activeScreen }: ImagesProps) => {
             />
           </div>
         </div>
+
         <div className="flex-row-nowrap flex-centered full-width">
           <Checkbox
             id="game-draw-checkbox-show-user"
             name="simple-checkboxes"
             label={t("showUsersDrawing")}
-            value={activeScreen.showDrawing}
+            checked={activeScreen.showDrawing ?? false}
             onChange={(value: boolean) =>
               dispatch(updateScreenData({ showDrawing: value }))
             }
@@ -95,6 +111,64 @@ const Images = ({ activeScreen }: ImagesProps) => {
             id="editor-game-draw-show-drawing"
           />
         </div>
+
+        {/* Initial settings (color and thickness) */}
+        <div className="mt-6 mb-1">
+          <div className="text-lg">{t("initialDrawingSettingsTitle")}</div>
+
+          <div className="flex flex-col gap-1 w-fit">
+            <div className="flex items-center gap-3">
+              <div>{t("initialDrawingColorLabel")}</div>
+              <input
+                type="color"
+                className="hover:cursor-pointer"
+                defaultValue={
+                  activeScreen.initialColor ?? GAME_DRAW_DEFAULT_COLOR
+                }
+                onChange={(e) => {
+                  const newInitialColor = e.target.value;
+                  dispatch(updateScreenData({ initialColor: newInitialColor }));
+                }}
+              />
+              <div>
+                ({activeScreen.initialColor ?? GAME_DRAW_DEFAULT_COLOR})
+              </div>
+            </div>
+
+            <div className="flex items-center gap-3">
+              <div>{t("initialDrawingThicknessLabel")}</div>
+              <input
+                type="range"
+                draggable={false}
+                min={1}
+                max={50}
+                defaultValue={
+                  activeScreen.initialThickness ?? GAME_DRAW_DEFAULT_THICKNESS
+                }
+                onChange={(e) => {
+                  const newInitialThickness = parseInt(e.target.value);
+                  dispatch(
+                    updateScreenData({
+                      initialThickness: newInitialThickness,
+                    })
+                  );
+                }}
+              />
+              <div>
+                ({activeScreen.initialThickness ?? GAME_DRAW_DEFAULT_THICKNESS})
+              </div>
+            </div>
+
+            <div className="mt-2">
+              <Button
+                raised
+                label={t("resetInitialDrawingSettingsBtnLabel")}
+                className="btn"
+                onClick={resetInitialDrawingSettings}
+              />
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   );

web/src/containers/views/games/game-draw/configureContext.ts

@@ -1,22 +1,24 @@
 import {
-  DEFAULT_COLOR,
-  DEFAULT_THICKNESS,
-  DEFAULT_IS_ERASING,
-} from "./game-draw";
+  GAME_DRAW_DEFAULT_COLOR,
+  GAME_DRAW_DEFAULT_THICKNESS,
+  GAME_DRAW_DEFAULT_IS_ERASING,
+} from "constants/screen";
 
 export const configureContext = (
   ctx: CanvasRenderingContext2D | null,
   color?: string,
   thickness?: number,
   isErasing?: boolean
 ) => {
-  if (ctx === null) return;
+  if (ctx === null) {
+    return;
+  }
 
-  const erasing = isErasing ?? DEFAULT_IS_ERASING;
+  const erasing = isErasing ?? GAME_DRAW_DEFAULT_IS_ERASING;
 
-  ctx.fillStyle = color ?? DEFAULT_COLOR;
-  ctx.strokeStyle = color ?? DEFAULT_COLOR;
-  ctx.lineWidth = thickness ?? DEFAULT_THICKNESS;
+  ctx.fillStyle = color ?? GAME_DRAW_DEFAULT_COLOR;
+  ctx.strokeStyle = color ?? GAME_DRAW_DEFAULT_COLOR;
+  ctx.lineWidth = thickness ?? GAME_DRAW_DEFAULT_THICKNESS;
   ctx.globalCompositeOperation = erasing ? "destination-out" : "source-over";
   ctx.lineCap = "round";
   return ctx;