X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;ds=sidebyside;f=resources%2Fjs%2Fcomponents%2Ftracker%2FItems.js;h=fb47824034ac17cf1be23badc53307222c4fa72c;hb=6a65eac02f94f00fdd2d56ad8feddf5d9476aa1e;hp=712ee6cf97bdcfef966cd5bf937d0e76826c0e4d;hpb=b5a50d74cf042fa7fc874d8184dc37ae20bb74dd;p=alttp.git

diff --git a/resources/js/components/tracker/Items.js b/resources/js/components/tracker/Items.js
index 712ee6c..fb47824 100644
--- 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']} />