basic auto tracking

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

diff --git a/resources/js/components/tracker/Equipment.js b/resources/js/components/tracker/Equipment.js
new file mode 100644 (file)
index 0000000..bfb9b20
--- /dev/null
+++ b/resources/js/components/tracker/Equipment.js
@@ -0,0 +1,59 @@
+import React from 'react';
+
+import CountDisplay from './CountDisplay';
+import ToggleIcon from './ToggleIcon';
+import { useTracker } from '../../hooks/tracker';
+
+const Equipment = () => {
+       const { state } = useTracker();
+
+       return <div className="equipment">
+               <div className="item">
+                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['boots']} />
+               </div>
+               <div className="item">
+                       <ToggleIcon
+                               controller={ToggleIcon.progressiveController('lift', 0, 2)}
+                               icons={['glove', 'mitts']}
+                       />
+               </div>
+               <div className="item">
+                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['flippers']} />
+               </div>
+               <div className="item">
+                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['moonpearl']} />
+               </div>
+               <div className="item">
+                       <ToggleIcon
+                               controller={ToggleIcon.simpleController}
+                               icons={['half-magic', 'quarter-magic']}
+                       />
+               </div>
+               <div className="item">
+                       <ToggleIcon
+                               controller={ToggleIcon.progressiveController('sword', 0, 4)}
+                               icons={['sword-1', 'sword-2', 'sword-3', 'sword-4']}
+                       />
+               </div>
+               <div className="item">
+                       <ToggleIcon
+                               controller={ToggleIcon.progressiveController('shield', 0, 3)}
+                               icons={['fighter-shield', 'fire-shield', 'mirror-shield']}
+                       />
+               </div>
+               <div className="item">
+                       <ToggleIcon
+                               controller={ToggleIcon.progressiveController('mail', 1, 3)}
+                               icons={['green-mail', 'blue-mail', 'red-mail']}
+                       />
+               </div>
+               <div className="item">
+                       <ToggleIcon
+                               controller={ToggleIcon.modulusController('heart-piece')}
+                               icons={['heart-0', 'heart-1', 'heart-2', 'heart-3']}
+                       />
+               </div>
+       </div>;
+};
+
+export default Equipment;