X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Ftracker%2FItems.js;fp=resources%2Fjs%2Fcomponents%2Ftracker%2FItems.js;h=fb47824034ac17cf1be23badc53307222c4fa72c;hb=6a65eac02f94f00fdd2d56ad8feddf5d9476aa1e;hp=2e83565fbc07eb7e79573723b204d1ee9743794c;hpb=4210a67ba2d2f705b001dd9395c3c30688b4dee9;p=alttp.git

diff --git a/resources/js/components/tracker/Items.js b/resources/js/components/tracker/Items.js
index 2e83565..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 = () => {
@@ -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']} />