tracker items as svg

diff --git a/resources/js/components/common/ZeldaIcon.js b/resources/js/components/common/ZeldaIcon.js
index 3504dcf17b719bb1b483f63fca3170f26b1dca44..457e6e91ba177c933dcb92cfe3bf39486f376a22 100644 (file)
--- a/resources/js/components/common/ZeldaIcon.js
+++ b/resources/js/components/common/ZeldaIcon.js
@@ -141,6 +141,14 @@ const getIconURL = name => {
        }
 };
 
+const isHalfWidth = name => [
+       'blue-boomerang',
+       'fire-rod',
+       'ice-rod',
+       'hookshot',
+       'red-boomerang',
+].includes(name);
+
 const ZeldaIcon = ({ name, svg, title }) => {
        const { t } = useTranslation();
 
@@ -153,14 +161,18 @@ const ZeldaIcon = ({ name, svg, title }) => {
        if (svg) {
                const clipX = getItemMapX(strippedName);
                const clipY = getItemMapY(strippedName);
+               const cropX = isHalfWidth(strippedName) ? 0.25 : 0.02;
+               const cropY = 0.02;
+               const cropW = 1 - (2 * cropX);
+               const cropH = 1 - (2 * cropY);
                return <image
                        href={isOnItemMap(strippedName) ? ITEM_MAP_URL : src}
                        width={ITEM_MAP_WIDTH}
                        height={ITEM_MAP_HEIGHT}
                        x="0"
                        y="0"
-                       transform={`translate(-${clipX} -${clipY})`}
-                       clipPath={`xywh(${clipX + 0.02} ${clipY + 0.02} 0.96 0.96)`}
+                       transform={`translate(-${clipX + 0.5} -${clipY + 0.5})`}
+                       clipPath={`xywh(${clipX + cropX} ${clipY + cropY} ${cropW} ${cropH})`}
                >
                        {realTitle ?
                                <title>{realTitle}</title>

diff --git a/resources/js/components/tracker/Items.js b/resources/js/components/tracker/Items.js
index fb47824034ac17cf1be23badc53307222c4fa72c..9ec71e00223f6dbc5d670c357009144b1f32b78f 100644 (file)
--- a/resources/js/components/tracker/Items.js
+++ b/resources/js/components/tracker/Items.js
@@ -4,135 +4,189 @@ import ToggleIcon from './ToggleIcon';
 import { BOTTLE_CONTENTS } from '../../helpers/tracker';
 import { useTracker } from '../../hooks/tracker';
 
+const transform = (x, y, s) => `translate(${x} ${y}) scale(${s || 0.85})`;
+
 const Items = () => {
        const { state } = useTracker();
 
-       return <div className="items">
-               <div className="item">
-                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['bow', 'silvers']} />
-               </div>
-               <div className="item">
-                       <ToggleIcon
-                               className="left"
-                               controller={ToggleIcon.simpleController}
-                               icons={['blue-boomerang']}
-                       />
-                       <ToggleIcon
-                               className="right"
-                               controller={ToggleIcon.simpleController}
-                               icons={['red-boomerang']}
-                       />
-               </div>
-               <div className="item">
-                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['hookshot']} />
-               </div>
-               <div className="item">
-                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['bomb']} />
-               </div>
-               <div className="item">
-                       <ToggleIcon
-                               className="bottom-left"
-                               controller={ToggleIcon.simpleController}
-                               icons={['mushroom']}
-                       />
-                       <ToggleIcon
-                               className="top-right"
-                               controller={ToggleIcon.simpleController}
-                               icons={['powder']}
-                       />
-               </div>
-               <div className="item">
-                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['fire-rod']} />
-               </div>
-               <div className="item">
-                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['ice-rod']} />
-               </div>
-               <div className="item">
-                       <ToggleIcon controller={ToggleIcon.medallionController} icons={['bombos']} />
+       return <svg
+               xmlns="http://www.w3.org/2000/svg"
+               className="items"
+               width="5"
+               height="8"
+               viewBox="0 0 5 8"
+               onContextMenu={(e) => {
+                       e.preventDefault();
+                       e.stopPropagation();
+               }}
+       >
+               <g transform={transform(0.5, 0.5)}>
+                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['bow', 'silvers']} svg />
+               </g>
+               <g transform={transform(1.35, 0.5)}>
+                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['blue-boomerang']} svg />
+               </g>
+               <g transform={transform(1.85, 0.5)}>
+                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['red-boomerang']} svg />
+               </g>
+               <g transform={transform(2.5, 0.5)}>
+                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['hookshot']} svg />
+               </g>
+               <g transform={transform(3.5, 0.5)}>
+                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['bomb']} svg />
+               </g>
+               <g transform={transform(4.5, 0.5)}>
+                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['powder']} svg />
+               </g>
+               <g transform={transform(0.5, 1.5)}>
+                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['fire-rod']} svg />
+               </g>
+               <g transform={transform(1.5, 1.5)}>
+                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['ice-rod']} svg />
+               </g>
+               <g transform={transform(2.5, 1.5)}>
+                       <ToggleIcon controller={ToggleIcon.medallionController} icons={['bombos']} svg />
                        {state['mm-medallion'] === 'bombos' ?
-                               <span className="med-display bottom-left">MM</span>
+                               <text className="med-display bottom-left">MM</text>
                        : null}
                        {state['tr-medallion'] === 'bombos' ?
-                               <span className="med-display bottom-right">TR</span>
+                               <text className="med-display bottom-right">TR</text>
                        : null}
-               </div>
-               <div className="item">
-                       <ToggleIcon controller={ToggleIcon.medallionController} icons={['ether']} />
+               </g>
+               <g transform={transform(3.5, 1.5)}>
+                       <ToggleIcon controller={ToggleIcon.medallionController} icons={['ether']} svg />
                        {state['mm-medallion'] === 'ether' ?
-                               <span className="med-display bottom-left">MM</span>
+                               <text className="med-display bottom-left">MM</text>
                        : null}
                        {state['tr-medallion'] === 'ether' ?
-                               <span className="med-display bottom-right">TR</span>
+                               <text className="med-display bottom-right">TR</text>
                        : null}
-               </div>
-               <div className="item">
-                       <ToggleIcon controller={ToggleIcon.medallionController} icons={['quake']} />
+               </g>
+               <g transform={transform(4.5, 1.5)}>
+                       <ToggleIcon controller={ToggleIcon.medallionController} icons={['quake']} svg />
                        {state['mm-medallion'] === 'quake' ?
-                               <span className="med-display bottom-left">MM</span>
+                               <text className="med-display bottom-left">MM</text>
                        : null}
                        {state['tr-medallion'] === 'quake' ?
-                               <span className="med-display bottom-right">TR</span>
+                               <text className="med-display bottom-right">TR</text>
                        : null}
-               </div>
-               <div className="item">
-                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['lamp']} />
-               </div>
-               <div className="item">
-                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['hammer']} />
-               </div>
-               <div className="item">
-                       <ToggleIcon
-                               className="bottom-left"
-                               controller={ToggleIcon.simpleController}
-                               icons={['shovel']}
-                       />
+               </g>
+               <g transform={transform(0.5, 2.5)}>
+                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['lamp']} svg />
+               </g>
+               <g transform={transform(1.5, 2.5)}>
+                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['hammer']} svg />
+               </g>
+               <g transform={transform(2.5, 2.5)}>
+                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['flute']} svg />
+               </g>
+               <g transform={transform(2.75, 2.75, 0.5)}>
+                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['duck']} svg />
+               </g>
+               <g transform={transform(3.5, 2.5)}>
+                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['bugnet']} svg />
+               </g>
+               <g transform={transform(4.5, 2.5)}>
+                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['book']} svg />
+               </g>
+               <g transform={transform(0.5, 3.5)}>
+                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['shovel']} svg />
+               </g>
+               <g transform={transform(1.5, 3.5)}>
+                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['somaria']} svg />
+               </g>
+               <g transform={transform(2.5, 3.5)}>
+                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['byrna']} svg />
+               </g>
+               <g transform={transform(3.5, 3.5)}>
+                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['cape']} svg />
+               </g>
+               <g transform={transform(4.5, 3.5)}>
+                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['mirror']} svg />
+               </g>
+               <g transform={transform(0.5, 5)}>
                        <ToggleIcon
-                               className="top-right"
-                               controller={ToggleIcon.simpleController}
-                               icons={['flute', 'duck']}
-                       />
-               </div>
-               <div className="item">
-                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['bugnet']} />
-               </div>
-               <div className="item">
-                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['book']} />
-               </div>
-               <div className="item">
-                       <ToggleIcon
-                               className="top-left"
                                controller={ToggleIcon.bottleController('bottle-1')}
                                icons={BOTTLE_CONTENTS}
+                               svg
                        />
+               </g>
+               <g transform={transform(1.5, 5)}>
                        <ToggleIcon
-                               className="top-right"
                                controller={ToggleIcon.bottleController('bottle-2')}
                                icons={BOTTLE_CONTENTS}
+                               svg
                        />
+               </g>
+               <g transform={transform(2.5, 5)}>
                        <ToggleIcon
-                               className="bottom-left"
                                controller={ToggleIcon.bottleController('bottle-3')}
                                icons={BOTTLE_CONTENTS}
+                               svg
                        />
+               </g>
+               <g transform={transform(3.5, 5)}>
                        <ToggleIcon
-                               className="bottom-right"
                                controller={ToggleIcon.bottleController('bottle-4')}
                                icons={BOTTLE_CONTENTS}
+                               svg
+                       />
+               </g>
+               <g transform={transform(4.5, 5)}>
+                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['mushroom']} svg />
+               </g>
+               <g transform={transform(0.5, 6.5)}>
+                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['boots']} svg />
+               </g>
+               <g transform={transform(1.5, 6.5)}>
+                       <ToggleIcon
+                               controller={ToggleIcon.progressiveController('lift', 0, 2)}
+                               icons={['glove', 'mitts']}
+                               svg
+                       />
+               </g>
+               <g transform={transform(2.5, 6.5)}>
+                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['flippers']} svg />
+               </g>
+               <g transform={transform(3.5, 6.5)}>
+                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['moonpearl']} svg />
+               </g>
+               <g transform={transform(4.5, 6.5)}>
+                       <ToggleIcon
+                               controller={ToggleIcon.simpleController}
+                               icons={['half-magic', 'quarter-magic']}
+                               svg
+                       />
+               </g>
+               <g transform={transform(0.5, 7.5)}>
+                       <ToggleIcon
+                               controller={ToggleIcon.progressiveController('sword', 0, 4)}
+                               icons={['sword-1', 'sword-2', 'sword-3', 'sword-4']}
+                               svg
+                       />
+               </g>
+               <g transform={transform(1.5, 7.5)}>
+                       <ToggleIcon
+                               controller={ToggleIcon.progressiveController('shield', 0, 3)}
+                               icons={['fighter-shield', 'fire-shield', 'mirror-shield']}
+                               svg
+                       />
+               </g>
+               <g transform={transform(2.5, 7.5)}>
+                       <ToggleIcon
+                               controller={ToggleIcon.progressiveController('mail', 1, 3)}
+                               icons={['green-mail', 'blue-mail', 'red-mail']}
+                               svg
+                       />
+               </g>
+               <g transform={transform(3.5, 7.5)}>
+                       <ToggleIcon
+                               controller={ToggleIcon.modulusController('heart-piece')}
+                               icons={['heart-0', 'heart-1', 'heart-2', 'heart-3']}
+                               svg
                        />
-               </div>
-               <div className="item">
-                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['somaria']} />
-               </div>
-               <div className="item">
-                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['byrna']} />
-               </div>
-               <div className="item">
-                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['cape']} />
-               </div>
-               <div className="item">
-                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['mirror']} />
-               </div>
-       </div>;
+               </g>
+       </svg>;
 };
 
 export default Items;

diff --git a/resources/js/components/tracker/ToggleIcon.js b/resources/js/components/tracker/ToggleIcon.js
index c1a193c209f9540457cc7d223a6c9f54f7734430..6de9f63632652dea775d0eca42259e5f15d0425d 100644 (file)
--- a/resources/js/components/tracker/ToggleIcon.js
+++ b/resources/js/components/tracker/ToggleIcon.js
@@ -18,7 +18,7 @@ import {
 } from '../../helpers/tracker';
 import { useTracker } from '../../hooks/tracker';
 
-const ToggleIcon = ({ controller, className, icons }) => {
+const ToggleIcon = ({ controller, className, icons, svg }) => {
        const { setManualState, state } = useTracker();
        const activeController = controller || ToggleIcon.nullController;
        const active = activeController.getActive(state, icons);
@@ -32,6 +32,23 @@ const ToggleIcon = ({ controller, className, icons }) => {
        if (className) {
                classNames.push(className);
        }
+       if (svg) {
+               return <g
+                       className={classNames.join(' ')}
+                       onClick={(e) => {
+                               activeController.handlePrimary(state, setManualState, icons);
+                               e.preventDefault();
+                               e.stopPropagation();
+                       }}
+                       onContextMenu={(e) => {
+                               activeController.handleSecondary(state, setManualState, icons);
+                               e.preventDefault();
+                               e.stopPropagation();
+                       }}
+               >
+                       <ZeldaIcon name={active || defaultIcon || icons[0]} svg />
+               </g>;
+       }
        return <span
                className={classNames.join(' ')}
                onClick={(e) => {
@@ -269,6 +286,7 @@ ToggleIcon.propTypes = {
                handleSecondary: PropTypes.func,
        }),
        icons: PropTypes.arrayOf(PropTypes.string),
+       svg: PropTypes.bool,
 };
 
 export default ToggleIcon;

diff --git a/resources/js/components/tracker/index.js b/resources/js/components/tracker/index.js
index ea09a22dad6b17fcabc91235981352157048ccc7..31fb96423cc3a68680f02659acfba4764105e5b2 100644 (file)
--- a/resources/js/components/tracker/index.js
+++ b/resources/js/components/tracker/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
+import { Col, Container, Row } from 'react-bootstrap';
 
 import Dungeons from './Dungeons';
-import Equipment from './Equipment';
 import Items from './Items';
 import Map from './Map';
 import Toolbar from './Toolbar';
@@ -9,18 +9,17 @@ import Toolbar from './Toolbar';
 const Tracker = () => {
        return <div className="tracker">
                <Toolbar />
-               <div className="d-flex">
-                       <div>
-                               <div className="inventory">
+               <Container fluid>
+                       <Row>
+                               <Col sm={3}>
                                        <Items />
-                                       <Equipment />
-                               </div>
-                               <Dungeons />
-                       </div>
-                       <div className="flex-fill">
-                               <Map />
-                       </div>
-               </div>
+                                       <Dungeons />
+                               </Col>
+                               <Col sm={9}>
+                                       <Map />
+                               </Col>
+                       </Row>
+               </Container>
        </div>;
 };
 

diff --git a/resources/sass/tracker.scss b/resources/sass/tracker.scss
index 27bd55e9da9f16e6302a623a266a594c3438fd6a..01704b75f3f69e33ac4c696604798a349bc1a99c 100644 (file)
--- a/resources/sass/tracker.scss
+++ b/resources/sass/tracker.scss
@@ -60,76 +60,24 @@
                gap: 1ex;
                padding: 1ex;
        }
-       .inventory {
-               font-size: 110%;
-       }
        .items {
-               display: grid;
-               grid-template-columns: 3em 3em 3em 3em 3em;
-               gap: 1ex;
-               padding: 1ex;
-       }
-       .item {
-               position: relative;
-               width: 3em;
-               height: 3em;
-
-               .bottom-left,
-               .bottom-right,
-               .top-left,
-               .top-right {
-                       position: absolute;
-                       width: 50%;
-                       height: 50%;
-                       .zelda-icon {
-                               transform: scale(1.4);
-                       }
-               }
-               .bottom-left {
-                       bottom: 0;
-                       left: 0;
-               }
-               .bottom-right {
-                       bottom: 0;
-                       right: 0;
-               }
-               .top-left {
-                       top: 0;
-                       left: 0;
-               }
-               .top-right {
-                       top: 0;
-                       right: 0;
-               }
-
-               .left,
-               .right {
-                       position: absolute;
-                       width: 50%;
-                       height: 100%;
-                       overflow: hidden;
-                       .zelda-icon {
-                               width: 200%;
-                               margin-left: -50%;
-                       }
-               }
-               .left {
-                       left: 0;
-               }
-               .right {
-                       right: 0;
-               }
-               .count-display,
+               width: 100%;
+               height: auto;
                .med-display {
+                       font-size: 0.3px;
+                       font-weight: bold;
+                       fill: white;
+                       stroke: black;
+                       stroke-width: 0.15px;
+                       stroke-linejoin: round;
+                       paint-order: stroke fill;
                        pointer-events: none;
-                       &.is-zero {
-                               display: none;
+                       &.bottom-left {
+                               transform: translate(-0.5px, 0.4px);
+                       }
+                       &.bottom-right {
+                               transform: translate(0.1px, 0.4px);
                        }
-               }
-               .med-display {
-                       height: 30%;
-                       font-size: 80%;
-                       line-height: 1;
                }
        }
        .tracker-map {