tracker descriptions

[alttp.git] / resources / js / components / tracker / Map.js

diff --git a/resources/js/components/tracker/Map.js b/resources/js/components/tracker/Map.js
index d8e76364fb864a0f09def8cd0e1423a24ad30f83..311263116a4c197f7af63378ecac1d793b2f6f1a 100644 (file)
--- a/resources/js/components/tracker/Map.js
+++ b/resources/js/components/tracker/Map.js
@@ -314,7 +314,7 @@ const LW_LOCATIONS = [
                        'saha',
                ],
                x: 0.815,
-               y: 0.42,
+               y: 0.465,
        },
        {
                id: 'saha-hut',
@@ -324,7 +324,7 @@ const LW_LOCATIONS = [
                        'saha-right',
                ],
                x: 0.815,
-               y: 0.465,
+               y: 0.42,
        },
        {
                id: 'sick-kid',
@@ -601,7 +601,7 @@ const DW_LOCATIONS = [
        },
 ];
 
-const Location = ({ l, size }) => {
+const Location = ({ number, l, size }) => {
        const { t } = useTranslation();
 
        const classNames = ['location', `status-${l.status}`];
@@ -609,12 +609,17 @@ const Location = ({ l, size }) => {
                classNames.push(`size-${size}`);
        }
 
-       return <rect className={classNames.join(' ')} x={l.x} y={l.y}>
+       return <g className={classNames.join(' ')} transform={`translate(${l.x} ${l.y})`}>
                <title>{t(`tracker.location.${l.id}`)}</title>
-       </rect>;
+               <rect className="box" x="0" y="0" />
+               {number && l.cleared < l.total ?
+                       <text className="text" x="0" y="0">{Math.max(0, l.total - l.cleared)}</text>
+               : null}
+       </g>;
 };
 
 Location.propTypes = {
+       number: PropTypes.bool,
        l: PropTypes.shape({
                id: PropTypes.string,
                x: PropTypes.number,
@@ -716,7 +721,7 @@ const Map = () => {
                                                <Location key={l.id} l={l} />
                                        )}
                                        {lwDungeons.map(l =>
-                                               <Location key={l.id} l={l} size="lg" />
+                                               <Location key={l.id} number l={l} size="lg" />
                                        )}
                                </g>
                        </g>
@@ -756,7 +761,7 @@ const Map = () => {
                                                <Location key={l.id} l={l} />
                                        )}
                                        {dwDungeons.map(l =>
-                                               <Location key={l.id} l={l} size="lg" />
+                                               <Location key={l.id} number l={l} size="lg" />
                                        )}
                                </g>
                        </g>