X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Fpages%2FDoorsTracker.js;h=abd3c054d5da2db1d42acd1ee1fa136a9b728fc3;hb=7c6716036321ba09846785720e81459aad55a323;hp=ae96530740170d53ecca35f6d0d6b522d223299b;hpb=3a432819085afd3db5db9aa04b31c3671e7e3e52;p=alttp.git

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={