From: Daniel Karbach Date: Wed, 3 Apr 2024 09:21:14 +0000 (+0200) Subject: tracker items as svg X-Git-Url: https://git.localhorst.tv/?a=commitdiff_plain;h=1a3d040147c19d24b8d02ec8e594eb06b8efc1ff;p=alttp.git tracker items as svg --- diff --git a/resources/js/components/common/ZeldaIcon.js b/resources/js/components/common/ZeldaIcon.js index 3504dcf..457e6e9 100644 --- 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 {realTitle ? {realTitle} diff --git a/resources/js/components/tracker/Items.js b/resources/js/components/tracker/Items.js index fb47824..9ec71e0 100644 --- 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
-
- -
-
- - -
-
- -
-
- -
-
- - -
-
- -
-
- -
-
- + return { + e.preventDefault(); + e.stopPropagation(); + }} + > + + + + + + + + + + + + + + + + + + + + + + + + + + {state['mm-medallion'] === 'bombos' ? - MM + MM : null} {state['tr-medallion'] === 'bombos' ? - TR + TR : null} -
-
- + + + {state['mm-medallion'] === 'ether' ? - MM + MM : null} {state['tr-medallion'] === 'ether' ? - TR + TR : null} -
-
- + + + {state['mm-medallion'] === 'quake' ? - MM + MM : null} {state['tr-medallion'] === 'quake' ? - TR + TR : null} -
-
- -
-
- -
-
- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -
-
- -
-
- -
-
- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -
-
- -
-
- -
-
- -
-
- -
-
; + + ; }; export default Items; diff --git a/resources/js/components/tracker/ToggleIcon.js b/resources/js/components/tracker/ToggleIcon.js index c1a193c..6de9f63 100644 --- 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 { + activeController.handlePrimary(state, setManualState, icons); + e.preventDefault(); + e.stopPropagation(); + }} + onContextMenu={(e) => { + activeController.handleSecondary(state, setManualState, icons); + e.preventDefault(); + e.stopPropagation(); + }} + > + + ; + } return { @@ -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 ea09a22..31fb964 100644 --- 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
-
-
-
+ + + - -
- -
-
- -
-
+ + + + + + +
; }; diff --git a/resources/sass/tracker.scss b/resources/sass/tracker.scss index 27bd55e..01704b7 100644 --- 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 {