basic auto tracking

[alttp.git] / resources / js / components / tracker / Items.js

diff --git a/resources/js/components/tracker/Items.js b/resources/js/components/tracker/Items.js
new file mode 100644 (file)
index 0000000..712ee6c
--- /dev/null
+++ b/resources/js/components/tracker/Items.js
@@ -0,0 +1,102 @@
+import React from 'react';
+
+import CountDisplay from './CountDisplay';
+import ToggleIcon from './ToggleIcon';
+import { useTracker } from '../../hooks/tracker';
+
+const Items = () => {
+       const { state } = useTracker();
+
+       return <div className="items">
+               <div className="item">
+                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['bow', 'silvers']} />
+               </div>
+               <div className="item">
+                       <ToggleIcon
+                               className="left"
+                               controller={ToggleIcon.simpleController}
+                               icons={['blue-boomerang']}
+                       />
+                       <ToggleIcon
+                               className="right"
+                               controller={ToggleIcon.simpleController}
+                               icons={['red-boomerang']}
+                       />
+               </div>
+               <div className="item">
+                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['hookshot']} />
+               </div>
+               <div className="item">
+                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['bomb']} />
+               </div>
+               <div className="item">
+                       <ToggleIcon
+                               className="bottom-left"
+                               controller={ToggleIcon.simpleController}
+                               icons={['mushroom']}
+                       />
+                       <ToggleIcon
+                               className="top-right"
+                               controller={ToggleIcon.simpleController}
+                               icons={['powder']}
+                       />
+               </div>
+               <div className="item">
+                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['fire-rod']} />
+               </div>
+               <div className="item">
+                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['ice-rod']} />
+               </div>
+               <div className="item">
+                       <ToggleIcon controller={ToggleIcon.medallionController} icons={['bombos']} />
+               </div>
+               <div className="item">
+                       <ToggleIcon controller={ToggleIcon.medallionController} icons={['ether']} />
+               </div>
+               <div className="item">
+                       <ToggleIcon controller={ToggleIcon.medallionController} icons={['quake']} />
+               </div>
+               <div className="item">
+                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['lamp']} />
+               </div>
+               <div className="item">
+                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['hammer']} />
+               </div>
+               <div className="item">
+                       <ToggleIcon
+                               className="bottom-left"
+                               controller={ToggleIcon.simpleController}
+                               icons={['shovel']}
+                       />
+                       <ToggleIcon
+                               className="top-right"
+                               controller={ToggleIcon.simpleController}
+                               icons={['flute', 'duck']}
+                       />
+               </div>
+               <div className="item">
+                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['bugnet']} />
+               </div>
+               <div className="item">
+                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['book']} />
+               </div>
+               <div className="item">
+                       <ToggleIcon controller={ToggleIcon.countController(4)} icons={['bottle']} />
+                       <CountDisplay className="bottom-right" count={state.bottle || 0} />
+               </div>
+               <div className="item">
+                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['somaria']} />
+               </div>
+               <div className="item">
+                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['byrna']} />
+               </div>
+               <div className="item">
+                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['cape']} />
+               </div>
+               <div className="item">
+                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['mirror']} />
+               </div>
+       </div>;
+};
+
+export default Items;