Inventory

src/components/Menu/Menu.js

@@ -1,6 +1,8 @@
 import React from 'react'
 import styles from './Menu.module.css'
 import useSharedState from '../../hooks/useSharedState'
+import Inventory from '../Modals/Inventory'
+import Options from '../Modals/Options'
 
 export default function ({containerRef}) {
   const [currentMenu, setCurrentMenu] = useSharedState('currentMenu')
@@ -27,10 +29,15 @@ export default function ({containerRef}) {
               <button className={styles.modalClose} onClick={() => setCurrentMenu(null)}>x</button>
             </div>
             <div className={styles.modalContent}>
-              <h3>You have:</h3>
-              <ul>
-                <li>Nothing</li>
-              </ul>
+              {(() => {
+                if(currentMenu === 'inventory')
+                  return <Inventory/>
+
+                // if(currentMenu === 'options')
+                //   return <Options/>
+
+                return <p>Not implemented yet, sorry</p>
+              })()}
             </div>
           </div>
         </>

src/components/Modals/Inventory.js

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import styles from './Inventory.module.css'
+import useGameState from '../../hooks/useGameState'
+
+export default function () {
+  const state = useGameState()
+
+  const allItems = Array.from(state.items.values())
+  const inventory = allItems.filter(({location}) => location === 'inventory')
+
+  return (
+    <>
+      <h3>You have:</h3>
+      <ul className={styles.list}>
+        {inventory.map(item => (<li>{item.name}</li>))}
+        {inventory.length === 0 && (<li>Nothing</li>)}
+      </ul>
+    </>
+  )
+}

src/components/Modals/Inventory.module.css

@@ -0,0 +1,9 @@
+.list {
+  list-style: none;
+}
+
+.list li::before {
+  content: '-';
+  margin-left: -20px;
+  margin-right: 10px;
+}

src/components/Modals/Options.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+export default function () {
+  return (
+    <>
+      <ul>
+        <li>Nothing</li>
+      </ul>
+    </>
+  )
+}

src/index.css

@@ -187,7 +187,7 @@ html.noeffects {
 }
 
 /* Text fuzzing */
-.fuzzing, .fuzzing button {
+.fuzzing, .fuzzing button, .fuzzing input {
   animation: textShadow 1.6s infinite;
 }