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 712ee6cf97bdcfef966cd5bf937d0e76826c0e4d..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 = () => {
@@ -49,12 +49,30 @@ const Items = () => {
                </div>
                <div className="item">
                        <ToggleIcon controller={ToggleIcon.medallionController} icons={['bombos']} />
+                       {state['mm-medallion'] === 'bombos' ?
+                               <span className="med-display bottom-left">MM</span>
+                       : null}
+                       {state['tr-medallion'] === 'bombos' ?
+                               <span className="med-display bottom-right">TR</span>
+                       : null}
                </div>
                <div className="item">
                        <ToggleIcon controller={ToggleIcon.medallionController} icons={['ether']} />
+                       {state['mm-medallion'] === 'ether' ?
+                               <span className="med-display bottom-left">MM</span>
+                       : null}
+                       {state['tr-medallion'] === 'ether' ?
+                               <span className="med-display bottom-right">TR</span>
+                       : null}
                </div>
                <div className="item">
                        <ToggleIcon controller={ToggleIcon.medallionController} icons={['quake']} />
+                       {state['mm-medallion'] === 'quake' ?
+                               <span className="med-display bottom-left">MM</span>
+                       : null}
+                       {state['tr-medallion'] === 'quake' ?
+                               <span className="med-display bottom-right">TR</span>
+                       : null}
                </div>
                <div className="item">
                        <ToggleIcon controller={ToggleIcon.simpleController} icons={['lamp']} />
@@ -81,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']} />