From d256e01621a8b1072365ae0893002dccb7661898 Mon Sep 17 00:00:00 2001
From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Wed, 12 Jul 2023 14:56:36 +0200
Subject: [PATCH] crystal switches in door tracker

---
 resources/js/components/common/ZeldaIcon.js   |  4 ++
 resources/js/components/pages/DoorsTracker.js | 48 +++++++++++++++++++
 resources/sass/doors.scss                     |  3 ++
 3 files changed, 55 insertions(+)

diff --git a/resources/js/components/common/ZeldaIcon.js b/resources/js/components/common/ZeldaIcon.js
index c5da0b5..067dfbc 100644
--- a/resources/js/components/common/ZeldaIcon.js
+++ b/resources/js/components/common/ZeldaIcon.js
@@ -74,6 +74,10 @@ const getIconURL = name => {
 		case 'dungeon-tr':
 		case 'dungeon-tt':
 			return `/dungeon/${name.substr(8)}.png`;
+		case 'crystal-switch':
+		case 'crystal-switch-blue':
+		case 'crystal-switch-red':
+			return `/icon/${name}.png`;
 		default:
 			return '';
 	}
diff --git a/resources/js/components/pages/DoorsTracker.js b/resources/js/components/pages/DoorsTracker.js
index ae96530..abd3c05 100644
--- a/resources/js/components/pages/DoorsTracker.js
+++ b/resources/js/components/pages/DoorsTracker.js
@@ -51,6 +51,19 @@ const ITEM_CLASSES = {
 	'flippers': 'item',
 };
 
+const nextCSwitch = cur => {
+	switch (cur) {
+		case 'blue':
+			return 'red';
+		case 'red':
+			return '';
+		default:
+			return 'blue';
+	}
+};
+
+const prevCSwitch = cur => nextCSwitch(nextCSwitch(cur));
+
 const DoorsTracker = () => {
 	const [state, setState] = React.useState(DUNGEONS.reduce((state, dungeon) => ({
 		...state,
@@ -59,6 +72,7 @@ const DoorsTracker = () => {
 			[item]: false,
 		}), {
 			boss: true,
+			cswitch: '',
 			keys: 1,
 		}),
 	}), {}));
@@ -75,6 +89,30 @@ const DoorsTracker = () => {
 		e.stopPropagation();
 	});
 
+	const handleCSwitchClick = React.useCallback(dungeon => e => {
+		setState(state => ({
+			...state,
+			[dungeon]: {
+				...state[dungeon],
+				cswitch: nextCSwitch(state[dungeon].cswitch),
+			},
+		}));
+		e.preventDefault();
+		e.stopPropagation();
+	});
+
+	const handleCSwitchRightClick = React.useCallback(dungeon => e => {
+		setState(state => ({
+			...state,
+			[dungeon]: {
+				...state[dungeon],
+				cswitch: prevCSwitch(state[dungeon].cswitch),
+			},
+		}));
+		e.preventDefault();
+		e.stopPropagation();
+	});
+
 	const handleKeysClick = React.useCallback(dungeon => e => {
 		setState(state => ({
 			...state,
@@ -120,6 +158,16 @@ const DoorsTracker = () => {
 					>
 						{state[dungeon].keys}
 					</div>
+					<div
+						className={`cell ${state[dungeon].cswitch ? 'on' : 'off'} cswitch`}
+						onClick={handleCSwitchClick(dungeon)}
+						onContextMenu={handleCSwitchRightClick(dungeon)}
+					>
+						<ZeldaIcon name={state[dungeon].cswitch
+							? `crystal-switch-${state[dungeon].cswitch}`
+							: 'crystal-switch'
+						} />
+					</div>
 					{ITEMS.map(item =>
 						<div
 							className={
diff --git a/resources/sass/doors.scss b/resources/sass/doors.scss
index 61eee2e..3cd3a8c 100644
--- a/resources/sass/doors.scss
+++ b/resources/sass/doors.scss
@@ -11,6 +11,9 @@
 		&.off {
 			opacity: .3;
 		}
+		&.cswitch {
+			background: #505050;
+		}
 		&.dungeon {
 			background: #b3700b;
 		}
-- 
2.39.2