tracker medallion controler

diff --git a/resources/js/components/tracker/Items.js b/resources/js/components/tracker/Items.js
index 712ee6cf97bdcfef966cd5bf937d0e76826c0e4d..2e83565fbc07eb7e79573723b204d1ee9743794c 100644 (file)
--- a/resources/js/components/tracker/Items.js
+++ b/resources/js/components/tracker/Items.js
@@ -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']} />

diff --git a/resources/js/components/tracker/ToggleIcon.js b/resources/js/components/tracker/ToggleIcon.js
index 49375ef97695b09f00b9998f484e5962ad21d11d..3f6af9641c0926acb2bf31b1cd8618e74ffe5c3d 100644 (file)
--- a/resources/js/components/tracker/ToggleIcon.js
+++ b/resources/js/components/tracker/ToggleIcon.js
@@ -163,7 +163,38 @@ ToggleIcon.medallionController = {
        getActive: highestActive,
        getDefault: firstIcon,
        handlePrimary: nextIcon,
-       handleSecondary: doNothing,
+       handleSecondary: (state, setState, icons) => {
+               const mm = state['mm-medallion'];
+               const tr = state['tr-medallion'];
+               const isMM = mm === icons[0];
+               const isTR = tr === icons[0];
+               console.log({ mm, isMM, tr, isTR });
+               if (!isMM && !isTR) {
+                       // empty: set as MM if mire is unset, else set as TR if TR is unset
+                       if (!mm) {
+                               setState(s => ({ ...s, 'mm-medallion': icons[0] }));
+                       } else if (!tr) {
+                               setState(s => ({ ...s, 'tr-medallion': icons[0] }));
+                       }
+               } else if (isMM && !isTR) {
+                       // MM: if TR is free, switch to TR, otherwise remove MM
+                       if (!tr) {
+                               setState(s => ({ ...s, 'mm-medallion': null, 'tr-medallion': icons[0] }));
+                       } else {
+                               setState(s => ({ ...s, 'mm-medallion': null }));
+                       }
+               } else if (!isMM && isTR) {
+                       // TR: if MM is free, switch to both, otherwise remove TR
+                       if (!mm) {
+                               setState(s => ({ ...s, 'mm-medallion': icons[0] }));
+                       } else {
+                               setState(s => ({ ...s, 'tr-medallion': null }));
+                       }
+               } else {
+                       // both: remove both
+                       setState(s => ({ ...s, 'mm-medallion': null, 'tr-medallion': null }));
+               }
+       },
 };
 
 ToggleIcon.modulusController = ctrl => ({

diff --git a/resources/js/helpers/tracker.js b/resources/js/helpers/tracker.js
index 707e3f708e59f86d2c49cc0f1d622336bd9fa312..f2be2434a3eb69944685b5fd503c765d75089196 100644 (file)
--- a/resources/js/helpers/tracker.js
+++ b/resources/js/helpers/tracker.js
@@ -1620,6 +1620,14 @@ export const makeEmptyState = () => {
                        state[`${dungeon.id}-prize-acquired`] = false;
                }
        });
+       OVERWORLD_LOCATIONS.forEach(location => {
+               state[location.id] = false;
+       });
+       UNDERWORLD_LOCATIONS.forEach(location => {
+               state[location.id] = false;
+       });
+       state['mm-medallion'] = null;
+       state['tr-medallion'] = null;
        return state;
 };
 

diff --git a/resources/sass/tracker.scss b/resources/sass/tracker.scss
index 06f157779a3b5eb5f3a46469e2a57ae4d480651c..2e75301da33bee88a795ac67666ccd5d18fce0fe 100644 (file)
--- a/resources/sass/tracker.scss
+++ b/resources/sass/tracker.scss
@@ -1,5 +1,6 @@
 .tracker {
-       .count-display {
+       .count-display,
+       .med-display {
                background: black;
                font-weight: bold;
                text-align: center;
@@ -104,12 +105,18 @@
                .right {
                        right: 0;
                }
-               .count-display {
+               .count-display,
+               .med-display {
                        pointer-events: none;
                        &.is-zero {
                                display: none;
                        }
                }
+               .med-display {
+                       height: 30%;
+                       font-size: 80%;
+                       line-height: 1;
+               }
        }
        .toggle-icon {
                &.inactive {