unlock inventory items in relaxed mode #194

client/public/locales/de/translation.json

@@ -1,7 +1,7 @@
 {
   "Tactics": "Taktiken",
   "Lean Game Server": "Lean-Spielserver",
-  "<p>Game rules determine if it is allowed to skip levels and if the games runs checks to only allow unlocked tactics and theorems in proofs.</p><1>Note: \"Unlocked\" tactics (or theorems) are determined by two things: The set of minimal tactics needed to solve a level, plus any tactics you unlocked in another level. That means if you unlock <1>simp</1> in a level, you can use it henceforth in any level.</1><p>The options are:</p>": "<p>Die Spielregeln bestimmen ob es erlaubt ist, Levels zu überspringen und ob das Spiel überprüft welche Taktiken und Theoreme freigeschaltet sind und nur diese im Beweis akzeptiert.</p><1>Bemerkung: \"Freigeschaltete\" Taktiken (und Theoreme) werden durch zwei Faktoren bestimmt: The Menge der Taktiken die minimal notwending sind um den Level zu lösen und dazu die Menge aller Taktiken, die in einem anderen Level freigeschaltet wurden. Das bedeutet wenn <1>simp</1> in einem Level freigeschaltet wird, kann diese Taktik danach in jeglichen Levels verwendet werden.",
+  "<p>Game rules determine if it is allowed to skip levels and if the games runs checks to only allow unlocked tactics and theorems in proofs.</p><1>Note: \"Unlocked\" tactics (or theorems) are determined by two things: The set of minimal tactics needed to solve a level, plus any tactics you unlocked in another level. That means if you unlock <1>simp</1> in a level, you can use it henceforth in any level.</1><p>The options are:</p>": "<p>Die Spielregeln bestimmen ob es erlaubt ist, Levels zu überspringen und ob das Spiel überprüft welche Taktiken und Theoreme freigeschaltet sind und nur diese im Beweis akzeptiert.</p><1>Bemerkung: \"Freigeschaltete\" Taktiken (und Theoreme) werden durch zwei Faktoren bestimmt: The Menge der Taktiken die minimal notwendig sind um den Level zu lösen und dazu die Menge aller Taktiken, die in einem anderen Level freigeschaltet wurden. Das bedeutet wenn <1>simp</1> in einem Level freigeschaltet wird, kann diese Taktik danach in jeglichen Levels verwendet werden.",
   "Game Rules": "Spielregeln",
   "levels": "Levels",
   "tactics": "Taktiken",

client/src/components/inventory.tsx

@@ -4,8 +4,8 @@ import '../css/inventory.css'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faLock, faBan, faCheck, faXmark } from '@fortawesome/free-solid-svg-icons'
 import { faClipboard } from '@fortawesome/free-regular-svg-icons'
-import { useLoadDocQuery, InventoryTile, LevelInfo, InventoryOverview, useLoadInventoryOverviewQuery, useLoadLevelQuery } from '../state/api';
-import { selectDifficulty, selectInventory } from '../state/progress';
+import { useLoadDocQuery, InventoryTile, useLoadInventoryOverviewQuery, useLoadLevelQuery } from '../state/api';
+import { changedInventory, selectDifficulty, selectInventory } from '../state/progress';
 import { store } from '../state/store';
 import { useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
@@ -13,6 +13,7 @@ import { t } from 'i18next';
 import { NavButton } from './navigation';
 import { LoadingIcon, Markdown } from './utils';
 import { GameIdContext } from '../state/context';
+import { useAppDispatch } from '../hooks';
 
 
 /** Context which manages the inventory */
@@ -21,8 +22,8 @@ const InventoryContext = createContext<{
   setTheoremTab: React.Dispatch<React.SetStateAction<string>>,
   categoryTab: "tactic"|"theorem"|"definition",
   setCategoryTab: React.Dispatch<React.SetStateAction<"tactic"|"theorem"|"definition">>,
-  docTile: any,
-  setDocTile: React.Dispatch<React.SetStateAction<any>>
+  docTile: InventoryTile,
+  setDocTile: React.Dispatch<React.SetStateAction<InventoryTile>>
 }>({
   theoremTab: null,
   setTheoremTab: () => {},
@@ -191,21 +192,37 @@ export function Inventory () {
 
 /** The `documentation` */
 export function Documentation() {
-  const { gameId } = React.useContext(GameIdContext)
+  const dispatch = useAppDispatch()
+  const { gameId } = useContext(GameIdContext)
+  const difficulty = useSelector(selectDifficulty(gameId))
+
   // const docEntry = useLoadDocQuery({game: gameId, type: type, name: name})
   let { docTile, setDocTile } = useContext(InventoryContext)
 
   const docEntry = useLoadDocQuery({game: gameId, name: docTile.name})
-
+  let inv: string[] = selectInventory(gameId)(store.getState())
 
   // Set `inventoryDoc` to `null` to close the doc
   function closeInventoryDoc() { setDocTile(null) }
 
   return <div className="documentation">
-    <NavButton icon={faXmark}
+    <NavButton
+      icon={faXmark}
       onClick={closeInventoryDoc}
       inverted={true} />
-    <h1 className="doc">{docTile.data?.displayName}</h1>
+    { difficulty == 1 && docTile.locked &&
+      <NavButton
+        icon={faLock}
+        title={t("Unlock this item!")}
+        onClick={() => {
+          console.log(`Adding '${docTile.name}' to the inventory.`)
+          dispatch(changedInventory({ game: gameId, inventory: [...inv, docTile.name] }))
+          closeInventoryDoc() // note: closing seems better than keeping it open without the lock disappearing
+        }}
+        className="lock"
+        inverted={true} />
+    }
+    <h1 className="doc">{docTile.displayName}</h1>
     <p><code>{docEntry.data?.statement}</code></p>
     <Markdown>{t(docEntry.data?.content, {ns: gameId})}</Markdown>
   </div>

client/src/css/inventory.css

@@ -54,7 +54,7 @@
   background-color: rgb(242, 190, 255);
 }
 
-.inventory .item:not(.locked), .inventory .item.enabled {
+.inventory .item, .inventory .item.enabled {
   cursor: pointer;
 }
 
@@ -134,3 +134,13 @@
 	align-items: end;
 	text-align: end;
 }
+
+.documentation .nav-button {
+  float: right;
+  font-size: 1.5rem;
+}
+
+.documentation .nav-button.lock {
+  float: left;
+  font-size: .7rem;
+}

client/src/css/popup.css

@@ -19,7 +19,7 @@
   color: var(--vscode-breadcrumb-focusForeground);
 }
 
-.documentation .nav-button, .modal .nav-button {
+.modal .nav-button {
   float: right;
   font-size: 1.5rem;
 }