separate bottle 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
index 2e83565fbc07eb7e79573723b204d1ee9743794c..fb47824034ac17cf1be23badc53307222c4fa72c 100644 (file)
--- a/resources/js/components/tracker/Items.js
+++ b/resources/js/components/tracker/Items.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
-import CountDisplay from './CountDisplay';
 import ToggleIcon from './ToggleIcon';
+import { BOTTLE_CONTENTS } from '../../helpers/tracker';
 import { useTracker } from '../../hooks/tracker';
 
 const Items = () => {
@@ -99,8 +99,26 @@ const Items = () => {
                        <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} />
+                       <ToggleIcon
+                               className="top-left"
+                               controller={ToggleIcon.bottleController('bottle-1')}
+                               icons={BOTTLE_CONTENTS}
+                       />
+                       <ToggleIcon
+                               className="top-right"
+                               controller={ToggleIcon.bottleController('bottle-2')}
+                               icons={BOTTLE_CONTENTS}
+                       />
+                       <ToggleIcon
+                               className="bottom-left"
+                               controller={ToggleIcon.bottleController('bottle-3')}
+                               icons={BOTTLE_CONTENTS}
+                       />
+                       <ToggleIcon
+                               className="bottom-right"
+                               controller={ToggleIcon.bottleController('bottle-4')}
+                               icons={BOTTLE_CONTENTS}
+                       />
                </div>
                <div className="item">
                        <ToggleIcon controller={ToggleIcon.simpleController} icons={['somaria']} />