Version 2.3.0 (#436)

* Removal of unnecessary text prop and its translation from game info panel

* Each game screen has now its own solution text in translations

* Opravit zvukovou stopu na mobilu (iOs) #157 (#435)

* Stop the exposition when the NotAllowedError is caught in view-screen component

* Added information snackbar about audio warning to start screen

* Renamed landspace snackbar recommendation variable

* Refactoring and improvements (#437)

* Renamed file of BasicTooltip component && created separate file for its props

* Replaced manual BasicTooltip component with tooltip props on button and icon component

* Used custom icon component for permissions icon in LoginAppHeader component

* Used prepared tooltip props on icon and button components instead of manual tooltip component

* Disable tooltips on mobile

* Use tutorial hook now accepts option argument

* Game screens are now using closeOnEsc tutorial prop

* fix: Styling of permission icons in LoginAppHeader component

* Refactoring of glass magnifier hook for better readability

* Hry - problémy #387 (#438)

* Reordered imports in game-sizing screen component

* Renamed game related variables in game-sizing screen component

* Reorganization of game-sizing screen component

* Extracted sizing functionality of comparison img to separate custom hook

* Added support for resizing reference img of game sizing screen

* Minor cleanup of game-sizing screen component

* Reorder imports in game-move screen

* Reorganization of game-move screen component for better readability

* Extracted moving functionality of the game-move screen to separate custom hook

* Added ObjectImagePreview to move game screen administration

* Improving interfaces of use-element-move and use-element-resize hooks

* Added docs for use-element-move and use-element-resize hooks

* Added calculation for initial position of object in game-move screen

* Added calculation for object size in game-move screen

* fix: Restart game-move screen now assigns initial object position

* Added screen preview title text for game move screen administration

* Moved use element move and resize hooks to hooks folder

* Infopoints refactoring (#439)

* Modularized the screen to infopoint map parsers

* Introduced InfopointStatusMap type

* Renamed variable 'infopointOpenStatusMap' to 'infopointStatusMap' since infopoint can carry also other type of information than just open status

* Extracted infopoint auto mobile closing functionality to its separate hook

* Extracted infopoint closing to its separate hook

* Moved infopoint components to newly created 'components' folder

* Divided one big component ScreenAnchorComponent to more smaller components

* Moved TooltipInfopoint and its components to separate folder so they are grouped together

* fix: infopoint model typing, marked fields which can be undefined as optional

* Reordered imports in TooltipInfopoint component

* Merged BasicTooltipInfopoint with TooltipInfopoint component

* fix: replaced useElementSize with useResizeObserver in all occurenses

* Game screens result time (#440)

* Reordered imports in game-find screen

* Renamed game related variables in game-find screen

* Changed pin state to Position model and reordered stuff inside game-find component

* Introduced separate variables for game-find preloaded img sources

* Refactor of useCountdown hook - renamed its variables

* Implemented auto navigation after result time elapsed for game-find screen

* Extracted auto navigation on game result time elapsed to custom separate hook

* Added auto navigation after result time elapsed also for other game screens (except quiz one)

* Introduced result time constant

* fix: showTip functionality is now working for game-find screen

* Game find multiple pins (#441)

* Added numberOfPins and pinsTexs fields and props to game-find screen administration

* Implemented multi pin locations for game-find screen

* Introduced useCornerInfoBox hook and its usage in game-find screen

* fix: Checkbox takes checked prop instead of value

* Added text translations for pin text fields

* Icon component refactor (#442)

* Color inherit style is now applied as inline CSS instead of class

* Minor reorganization of imports in icon component

* Differentiated container and icon classname and style props in custom icon component

* Game draw show drawing and initial settings (#443)

* Reorganization of imports of game-draw screen

* Minor reorganization of game-draw screen for better readability

* showDrawing property on game-draw screen now works properly

* Moved game draw constants to screen constants file

* feat: Added option to administration of draw screen to edit initial color and thickness

* Extracted drawing functionality of game-draw screen to separate useGameDraw hook

* fix: Displaying of tooltips of audio dialog sliders

* fix: selection is turned off for game erase screen when the cursor passed over the top or bottom of the screen

* Game draw and game erase are now centered on mobile

* Version bump to 2.3.0

web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "indihu-web",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.11.1",

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

@@ -234,7 +234,9 @@
       "imageResultLabel": "Výsledek",
       "imageResultTooltip": "Z knihovny dokumentů vyberte obrázek, kde je znázorněno správné místo, které měli návštěvníci najít.",
       "showUsersTip": "Zobrazit tipy návštěvníků",
-      "showUsersTipTooltip": "Pokud chcete, aby návštěvníci viděli správné řešení i svůj tip, zaškrtněte toto pole."
+      "showUsersTipTooltip": "Pokud chcete, aby návštěvníci viděli správné řešení i svůj tip, zaškrtněte toto pole.",
+      "numberOfPinsLabel": "Počet bodů k nalezení",
+      "numberOfPinsTooltip": "Zadejte počet bodů, které chcete, aby návštěvník našel. Každý bod bude moci mít následně přidělen svůj vlastní jedinečný text."
     },
     "gameDrawScreen": {
       "taskTooltip": "Co nejpřesněji popište návštěvníkům jejich úkol (např. Dokreslete do grafu, jak se vyvíjela těžba uhlí po roce 1950).",
@@ -243,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í). ",
@@ -278,7 +284,8 @@
       "imageResultTooltip": "Z knihovny dokumentů vyberte výsledný kompletní obrázek.",
       "object": "Objekt",
       "objectSelectLabel": "Vybrat",
-      "objectTooltip": "Z knihovny dokumentů vyberte obrázek s částmi, ze kterých budou návštěvníci vybírat."
+      "objectTooltip": "Z knihovny dokumentů vyberte obrázek s částmi, ze kterých budou návštěvníci vybírat.",
+      "screenPreviewText": "Náhled obrazovky"
     },
     "gameQuizScreen": {
       "nameLabel": "Název",

web/public/locales/cs/view-exhibition.json

@@ -27,5 +27,6 @@
   "untitled-chapter": "Nepojmenovaná kapitola",
   "untitled-screen": "Nepojmenovaná obrazovka",
   "rate-expo": "Hodnotit výstavu",
-  "landscapeModeRecommendation": " Doporučujeme prohlížení výstavy v režimu na šířku."
+  "landscapeModeRecommendationSnackbarText": " Doporučujeme prohlížení výstavy v režimu na šířku.",
+  "audioWarningSnackbarText": "Z důvodu omezení iOS může být expozice přerušena, protože přehrávání zvuku vyžaduje interakci uživatele. Pokud se tak stane, klepněte na tlačítko přehrávání."
 }

web/public/locales/cs/view-screen.json

@@ -82,33 +82,32 @@
   },
 
   "game": {
-    "solution": "Správné řešení",
     "controls": {
       "finished": "Hotovo",
       "play-again": "Zahrát znovu"
     }
   },
 
   "game-find": {
-    "task": "Najdi na obrázku"
+    "solution": "Správne riešenie"
   },
   "game-draw": {
-    "task": "Dokresli obrázek",
+    "solution": "Výborně! Splnil jsi zadání a toto je výsledek",
     "switchToPencilAction": "Přepnout na tužku",
     "switchToEraserAction": "Přepnout na gumu",
     "thicknessChooserAction": "Výběr tloušťky",
     "colorChooserAction": "Výběr barvy"
   },
   "game-erase": {
-    "task": "Vymaž obrázek"
+    "solution": "Výborně! Splnil jsi zadání a toto je výsledek"
   },
   "game-sizing": {
-    "task": "Uhodni správnou velikost"
+    "solution": "Správne riešenie"
   },
   "game-move": {
-    "task": "Posuň na správné místo"
+    "solution": "Správne riešenie"
   },
   "game-quiz": {
-    "task": "Vyber správné možnosti"
+    "solution": "Správne riešenie"
   }
 }

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

@@ -234,7 +234,9 @@
       "imageResultLabel": "Result",
       "imageResultTooltip": "Select an image from the document library that shows the correct location that the user should have found.",
       "showUsersTip": "View user's guess",
-      "showUsersTipTooltip": "Check this box if you want the user to see both the correct solution and their guess."
+      "showUsersTipTooltip": "Check this box if you want the user to see both the correct solution and their guess.",
+      "numberOfPinsLabel": "Number of points to find",
+      "numberOfPinsTooltip": "Enter the number of points you want the visitor to find. Each point will then be able to have its own unique text assigned."
     },
     "gameDrawScreen": {
       "taskTooltip": "Describe the user's task as precisely as possible (e.g. complete the graph of how coal mining developed after 1950).",
@@ -243,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).",
@@ -278,7 +284,8 @@
       "imageResultTooltip": "Select the complete image from the document library.",
       "object": "Object",
       "objectSelectLabel": "Select",
-      "objectTooltip": "From the document library, select an image with parts for the user to select from."
+      "objectTooltip": "From the document library, select an image with parts for the user to select from.",
+      "screenPreviewText": "Screen preview"
     },
     "gameQuizScreen": {
       "nameLabel": "Title",

web/public/locales/en/view-exhibition.json

@@ -27,5 +27,6 @@
   "untitled-chapter": "Untitled chapter",
   "untitled-screen": "Untitled screen",
   "rate-expo": "Rate the exhibition",
-  "landscapeModeRecommendation": "We recommend viewing the exhibition in landscape mode."
+  "landscapeModeRecommendationSnackbarText": "We recommend viewing the exhibition in landscape mode.",
+  "audioWarningSnackbarText": "Due to iOS restrictions, the exposition may be interrupted because audio playback requires user interaction. If that happens, please tap the play button to continue."
 }

web/public/locales/en/view-screen.json

@@ -82,33 +82,32 @@
   },
 
   "game": {
-    "solution": "The correct solution",
     "controls": {
       "finished": "Finished",
       "play-again": "Play again"
     }
   },
 
   "game-find": {
-    "task": "Find in the image"
+    "solution": "The correct solution"
   },
   "game-draw": {
-    "task": "Draw in the image",
+    "solution": "Great! You completed the assignment and this is the result",
     "switchToPencilAction": "Switch to pencil",
     "switchToEraserAction": "Switch to eraser",
     "thicknessChooserAction": "Choice of thickness",
     "colorChooserAction": "Choice of color"
   },
   "game-erase": {
-    "task": "Erase the image"
+    "solution": "Great! You completed the assignment and this is the result"
   },
   "game-sizing": {
-    "task": "Guess the right size"
+    "solution": "The correct solution"
   },
   "game-move": {
-    "task": "Move to the correct position"
+    "solution": "The correct solution"
   },
   "game-quiz": {
-    "task": "Select the correct option(s)"
+    "solution": "The correct solution"
   }
 }

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

@@ -234,7 +234,9 @@
       "imageResultLabel": "Výsledok",
       "imageResultTooltip": "Z knižnice dokumentov vyberte obrázok, kde je znázornené správne miesto, ktoré mali návštevníci nájsť.",
       "showUsersTip": "Zobraziť tipy návštevníkov",
-      "showUsersTipTooltip": "Ak chcete, aby návštevníci videli správne riešenie aj svoj tip, zaškrtnite toto pole."
+      "showUsersTipTooltip": "Ak chcete, aby návštevníci videli správne riešenie aj svoj tip, zaškrtnite toto pole.",
+      "numberOfPinsLabel": "Počet bodov na nájdenie",
+      "numberOfPinsTooltip": "Zadajte počet bodov, ktoré chcete aby návštevník našiel. Každý bod bude môcť mať následne pridelený svoj vlastný jedinečný text."
     },
     "gameDrawScreen": {
       "taskTooltip": "Čo najpresnejšie popíšte návštevníkom ich úlohu (napr. dokreslite do grafu, ako sa vyvíjala ťažba uhlia po roku 1950).",
@@ -243,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). ",
@@ -278,7 +284,8 @@
       "imageResultTooltip": "Z knižnice dokumentov vyberte výsledný kompletný obrázok.",
       "object": "Objekt",
       "objectSelectLabel": "Vybrať",
-      "objectTooltip": "Z knižnice dokumentov vyberte obrázok s časťami, z ktorých budú návštevníci vyberať."
+      "objectTooltip": "Z knižnice dokumentov vyberte obrázok s časťami, z ktorých budú návštevníci vyberať.",
+      "screenPreviewText": "Náhľad obrazovky"
     },
     "gameQuizScreen": {
       "nameLabel": "Názov",

web/public/locales/sk/view-exhibition.json

@@ -27,5 +27,6 @@
   "untitled-chapter": "Nepomenovaná kapitola",
   "untitled-screen": "Nepomenovaná obrazovka",
   "rate-expo": "Hodnotiť výstavu",
-  "landscapeModeRecommendation": " Odporúčame prezeranie výstavy v režime na šírku."
+  "landscapeModeRecommendationSnackbarText": " Odporúčame prezeranie výstavy v režime na šírku.",
+  "audioWarningSnackbarText": "Z dôvodu obmedzenia iOS môže byť expozícia prerušená, pretože prehrávanie zvuku vyžaduje interakciu užívateľa. Ak sa tak stane, kliknite na tlačidlo prehrávania."
 }

web/public/locales/sk/view-screen.json

@@ -82,33 +82,32 @@
   },
 
   "game": {
-    "solution": "Správne riešenie",
     "controls": {
       "finished": "Hotovo",
       "play-again": "Zahrať znova"
     }
   },
 
   "game-find": {
-    "task": "Nájdi na obrázku"
+    "solution": "Správne riešenie"
   },
   "game-draw": {
-    "task": "Dokresli obrázok",
+    "solution": "Výborne! Splnil si zadanie a toto je výsledok",
     "switchToPencilAction": "Prepnúť na ceruzku",
     "switchToEraserAction": "Prepnúť na gumu",
     "thicknessChooserAction": "Výber hrúbky",
     "colorChooserAction": "Výber farby"
   },
   "game-erase": {
-    "task": "Vymaž obrázok"
+    "solution": "Výborne! Splnil si zadanie a toto je výsledok"
   },
   "game-sizing": {
-    "task": "Uhádni správnu veľkosť"
+    "solution": "Správne riešenie"
   },
   "game-move": {
-    "task": "Posuň na správne miesto"
+    "solution": "Správne riešenie"
   },
   "game-quiz": {
-    "task": "Vyber správne možnosti"
+    "solution": "Správne riešenie"
   }
 }

web/src/components/app-header/LoginAppHeader.tsx

@@ -9,11 +9,6 @@ import { IconButton, Menu, MenuItem } from "@mui/material";
 import MenuIcon from "@mui/icons-material/Menu";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 
-import { MdEdit } from "react-icons/md";
-import { MdEditOff } from "react-icons/md";
-
-import { BasicTooltip } from "components/tooltip/tooltip";
-
 // Models
 import { ActiveExpo, Screen } from "models";
 import { AppDispatch } from "store/store";
@@ -24,6 +19,7 @@ import { signOut } from "actions/user-actions";
 import { openInNewTab } from "utils";
 import { mapScreenTypeValuesToKeys } from "enums/screen-type";
 import { useActiveExpoAccess } from "context/active-expo-access-provider/active-expo-access-provider";
+import { Icon } from "components/icon/icon";
 
 // - -
 
@@ -116,26 +112,39 @@ const LoginAppHeader = ({
             </div>
             <div className="self-center border-[1px] border-solid border-white rounded-full p-[1px]">
               {isReadWriteAccess ? (
-                <div data-tooltip-id="md-edit-on">
-                  <MdEdit style={{ fontSize: "14px", color: "#cccccc" }} />
+                <div>
+                  <Icon
+                    useMaterialUiIcon
+                    name="edit-on"
+                    iconStyle={{
+                      fontSize: "14px",
+                      color: "#cccccc",
+                    }}
+                    tooltip={{
+                      id: "md-edit-on",
+                      content: t("read-write-permission-tooltip"),
+                      variant: "dark",
+                    }}
+                  />
                 </div>
               ) : (
-                <div data-tooltip-id="md-edit-off">
-                  <MdEditOff style={{ fontSize: "14px", color: "#cccccc" }} />
+                <div>
+                  <Icon
+                    useMaterialUiIcon
+                    name="edit-off"
+                    iconStyle={{
+                      fontSize: "14px",
+                      color: "#cccccc",
+                    }}
+                    tooltip={{
+                      id: "md-edit-off",
+                      content: t("read-only-permission-tooltip"),
+                      variant: "dark",
+                    }}
+                  />
                 </div>
               )}
             </div>
-
-            <BasicTooltip
-              id="md-edit-on"
-              content={t("read-write-permission-tooltip")}
-              variant="dark"
-            />
-            <BasicTooltip
-              id="md-edit-off"
-              content={t("read-only-permission-tooltip")}
-              variant="dark"
-            />
           </div>
         )}
       </div>

web/src/components/button/button.tsx

@@ -3,15 +3,8 @@ import { CSSProperties, forwardRef } from "react";
 import { useExpoDesignData } from "hooks/view-hooks/expo-design-data-hook";
 
 import cx from "classnames";
-import { BasicTooltip } from "components/tooltip/tooltip";
-import { PlacesType } from "react-tooltip";
-
-type TooltipOption = {
-  id: string;
-  content: string;
-  variant?: "light" | "dark"; // if undefined, based on selected theme
-  place?: PlacesType;
-};
+import { BasicTooltip } from "components/tooltip/BasicTooltip";
+import { BasicTooltipProps } from "components/tooltip/tooltip-props";
 
 interface ButtonProps {
   color?: "default" | "primary" | "secondary" | "white" | "expoTheme";
@@ -27,7 +20,7 @@ interface ButtonProps {
   shadow?: boolean;
   iconBefore?: React.ReactNode;
   iconAfter?: React.ReactNode;
-  tooltip?: TooltipOption;
+  tooltip?: BasicTooltipProps;
   children?: React.ReactNode;
 }