From 1811c6021240a95f505cc2d49f592dc1bf56ac89 Mon Sep 17 00:00:00 2001
From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Fri, 28 Jul 2023 14:28:26 +0200
Subject: [PATCH] map marker icons

---
 .../2023_07_28_121522_map_marker.php          | 32 +++++++++++++++++++
 resources/js/components/common/ZeldaIcon.js   | 10 +++---
 resources/js/components/map/Pin.js            | 12 ++++++-
 resources/sass/map.scss                       |  4 +++
 4 files changed, 53 insertions(+), 5 deletions(-)
 create mode 100644 database/migrations/2023_07_28_121522_map_marker.php

diff --git a/database/migrations/2023_07_28_121522_map_marker.php b/database/migrations/2023_07_28_121522_map_marker.php
new file mode 100644
index 0000000..fdc831a
--- /dev/null
+++ b/database/migrations/2023_07_28_121522_map_marker.php
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+	/**
+	 * Run the migrations.
+	 *
+	 * @return void
+	 */
+	public function up()
+	{
+		Schema::table('technique_maps', function(Blueprint $table) {
+			$table->string('marker')->nullable()->default(null);
+		});
+	}
+
+	/**
+	 * Reverse the migrations.
+	 *
+	 * @return void
+	 */
+	public function down()
+	{
+		Schema::table('technique_maps', function(Blueprint $table) {
+			$table->dropColumn('marker');
+		});
+	}
+};
diff --git a/resources/js/components/common/ZeldaIcon.js b/resources/js/components/common/ZeldaIcon.js
index 9194cde..ef07b92 100644
--- a/resources/js/components/common/ZeldaIcon.js
+++ b/resources/js/components/common/ZeldaIcon.js
@@ -83,20 +83,21 @@ const getIconURL = name => {
 	}
 };
 
-const ZeldaIcon = ({ name }) => {
+const ZeldaIcon = ({ name, title }) => {
 	const { t } = useTranslation();
 
 	const invert = name.startsWith('not-');
 	const strippedName = invert ? name.substr(4) : name;
 	const src = getIconURL(strippedName);
-	const title = t(`icon.zelda.${name}`);
+	const alt = t(`icon.zelda.${name}`);
+	const realTitle = title !== '' ? title || alt : null;
 
 	return <span className="zelda-icon">
 		{src ?
 			<img
-				alt={title}
+				alt={alt}
 				src={src}
-				title={title}
+				title={realTitle}
 			/>
 		: null}
 		{invert ?
@@ -109,6 +110,7 @@ const ZeldaIcon = ({ name }) => {
 
 ZeldaIcon.propTypes = {
 	name: PropTypes.string,
+	title: PropTypes.string,
 };
 
 export default ZeldaIcon;
diff --git a/resources/js/components/map/Pin.js b/resources/js/components/map/Pin.js
index 442e16d..9d9b471 100644
--- a/resources/js/components/map/Pin.js
+++ b/resources/js/components/map/Pin.js
@@ -6,6 +6,7 @@ import { useOpenSeadragon } from './OpenSeadragon';
 import Overlay from './Overlay';
 import Popover from './Popover';
 import Icon from '../common/Icon';
+import ZeldaIcon from '../common/ZeldaIcon';
 import { getLink, getTranslation } from '../../helpers/Technique';
 import i18n from '../../i18n';
 
@@ -32,10 +33,18 @@ const Pin = ({ pin }) => {
 		}
 	}, [pin]);
 
+	const title = React.useMemo(() => {
+		return getTranslation(pin.technique, 'title', i18n.language);
+	}, [pin, i18n.language]);
+
 	return <Overlay onClick={onClick} x={pin.x} y={pin.y}>
 		<div className="map-pin">
 			<Link to={getLink(pin.technique)}>
-				<Icon.PIN title={getTranslation(pin.technique, 'title', i18n.language)} />
+				{pin.marker ?
+					<ZeldaIcon title={title} name={pin.marker} />
+				:
+					<Icon.PIN title={title} />
+				}
 			</Link>
 			{pin.technique.type === 'location' ?
 				<div ref={ref}>
@@ -48,6 +57,7 @@ const Pin = ({ pin }) => {
 
 Pin.propTypes = {
 	pin: PropTypes.shape({
+		marker: PropTypes.string,
 		technique: PropTypes.shape({
 			type: PropTypes.string,
 		}),
diff --git a/resources/sass/map.scss b/resources/sass/map.scss
index 78c9a2b..8b80ada 100644
--- a/resources/sass/map.scss
+++ b/resources/sass/map.scss
@@ -5,6 +5,10 @@
 		stroke-width: 1px;
 		vector-effect: non-scaling-stroke;
 	}
+	> a .zelda-icon {
+		height: 1em;
+		width: 1em;
+	}
 }
 
 .map-popover {
-- 
2.39.2