Adding some ui features like pin hiding.

msuddaby · Apr 17, 2021 · 6629729 · 6629729
1 parent b3ca3a8
commit 6629729
Show file tree

Hide file tree

Showing 4 changed files with 170 additions and 15 deletions.
diff --git a/WebMap/web-src/index.js b/WebMap/web-src/index.js
@@ -2,6 +2,7 @@ import constants from "./constants";
 import websocket from "./websocket";
 import map from "./map";
 import players from "./players";
+import ui from "./ui";
 
 const mapImage = document.createElement('img');
 const fogImage = document.createElement('img');
@@ -96,6 +97,33 @@ const setup = async () => {
 	window.addEventListener('resize', () => {
 		map.update();
 	});
+
+	ui.menuBtn.addEventListener('click', () => {
+		ui.menu.classList.toggle('menuOpen');
+	});
+
+	const closeMenu = (e) => {
+		const inMenu = e.target.closest('.menu');
+		const inMenuBtn = e.target.closest('.menu-btn');
+		if (!inMenu && !inMenuBtn) {
+			ui.menu.classList.remove('menuOpen');
+		}
+	};
+	window.addEventListener('mousedown', closeMenu);
+	window.addEventListener('touchstart', closeMenu);
+
+	const hideCheckboxes = ui.menu.querySelectorAll('.hideCheckbox');
+	hideCheckboxes.forEach(el => {
+		el.addEventListener('change', () => {
+			map.setIconHidden(el.dataset.hide, el.checked || ui.hideAll.checked);
+			if (el.dataset.hide === 'all') {
+				hideCheckboxes.forEach(el2 => {
+					map.setIconHidden(el2.dataset.hide, el.checked || el2.checked);
+				});
+			}
+			map.updateIcons();
+		});
+	});
 };
 
 setup();
diff --git a/WebMap/web-src/map.js b/WebMap/web-src/map.js
@@ -33,11 +33,12 @@ fogCanvasCtx.fillStyle = '#ffffff';
 let currentZoom = 100;
 
 const mapIcons = [];
+const hiddenIcons = {};
 
 const createIconEl = (iconObj) => {
 	const iconEl = document.createElement('div');
 	iconEl.id = iconObj.id;
-	iconEl.className = `mapIcon ${iconObj.type}`;
+	iconEl.className = `mapText mapIcon ${iconObj.type}`;
 	if (iconObj.zIndex) {
 		iconEl.style.zIndex = iconObj.zIndex;
 	}
@@ -56,6 +57,8 @@ const updateIcons = () => {
 			iconElement = createIconEl(iconObj);
 			document.body.appendChild(iconElement);
 		}
+		const isIconHidden = hiddenIcons[iconObj.type];
+		iconElement.style.display = isIconHidden ? 'none' : 'block';
 		const adjustX = (iconElement.offsetWidth / 2);
 		const adjustY = (iconElement.offsetHeight / 2);
 		const imgX = iconObj.x / pixelSize + coordOffset;
@@ -66,6 +69,13 @@ const updateIcons = () => {
 	});
 };
 
+window.addEventListener('mousemove', e => {
+	const canvasOffsetScale = canvas.offsetWidth / width;
+	const x = pixelSize * (-coordOffset + (e.clientX - canvas.offsetLeft) / canvasOffsetScale);
+	const y = pixelSize * (height - coordOffset + (canvas.offsetTop - e.clientY) / canvasOffsetScale);
+	ui.coords.textContent = `${x.toFixed(2)} , ${y.toFixed(2)}`;
+});
+
 const addIcon = (iconObj, update = true) => {
 	if (!iconObj.id) {
 		iconObj.id = `id_${Date.now()}_${Math.random()}`;
@@ -77,10 +87,13 @@ const addIcon = (iconObj, update = true) => {
 };
 
 const removeIcon = (iconObj) => {
-	mapIcons.splice(mapIcons.indexOf(iconObj), 1);
-	const iconElement = document.getElementById(iconObj.id);
-	if (iconElement) {
-		iconElement.remove();
+	const idx = mapIcons.indexOf(iconObj);
+	if (idx > -1) {
+		mapIcons.splice(mapIcons.indexOf(iconObj), 1);
+		const iconElement = document.getElementById(iconObj.id);
+		if (iconElement) {
+			iconElement.remove();
+		}
 	}
 };
 
@@ -91,6 +104,10 @@ const removeIconById = (iconId) => {
 	}
 };
 
+const setIconHidden = (type, isHidden) => {
+	hiddenIcons[type] = isHidden;
+};
+
 const redrawMap = () => {
 	ctx.clearRect(0, 0, width, height);
 	ctx.globalCompositeOperation = 'source-over';
@@ -199,6 +216,7 @@ export default {
 	addIcon,
 	removeIcon,
 	removeIconById,
+	setIconHidden,
 	explore,
 	update: redrawMap,
 	updateIcons,

diff --git a/WebMap/web/index.html b/WebMap/web/index.html
@@ -8,9 +8,42 @@
 	</head>
 	<body>
 		<canvas data-id="canvas"></canvas>
-		<div class="playerIcon" id="playerTemplate" data-id="player" style="display: none;">
-			<img data-id="playerIcon" src="playerIcon.png" alt="player" />
-			<div class="playerName"></div>
+		<div data-id="coords" class="mapText coords"></div>
+		<div data-id="menuBtn" class="menu-btn" role="button">
+			<div class="bar"></div>
+			<div class="bar"></div>
+			<div class="bar"></div>
+		</div>
+		<div data-id="menu" class="menu">
+			<label class="inputRow">
+				<input type="checkbox" class="hideCheckbox" data-id="hideAll" data-hide="all">
+				Hide all pins
+			</label>
+			<label class="inputRow">
+				<input type="checkbox" class="hideCheckbox" data-hide="dot">
+				Hide all
+				<div class="mapIcon dot menuMapIcon"></div>
+			</label>
+			<label class="inputRow">
+				<input type="checkbox" class="hideCheckbox" data-hide="house">
+				Hide all
+				<div class="mapIcon house menuMapIcon"></div>
+			</label>
+			<label class="inputRow">
+				<input type="checkbox" class="hideCheckbox" data-hide="fire">
+				Hide all
+				<div class="mapIcon fire menuMapIcon"></div>
+			</label>
+			<label class="inputRow">
+				<input type="checkbox" class="hideCheckbox" data-hide="cave">
+				Hide all
+				<div class="mapIcon cave menuMapIcon"></div>
+			</label>
+			<label class="inputRow">
+				<input type="checkbox" class="hideCheckbox" data-hide="mine">
+				Hide all
+				<div class="mapIcon mine menuMapIcon"></div>
+			</label>
 		</div>
 		<script src="main.js"></script>
 	</body>

diff --git a/WebMap/web/style.css b/WebMap/web/style.css
@@ -24,6 +24,83 @@ canvas {
 	to { transform: scale(1); }
 }
 
+.menu-btn {
+	position: fixed;
+	top: 8px;
+	left: 8px;
+	padding: 8px;
+	cursor: pointer;
+	-webkit-tap-highlight-color: transparent;
+	z-index: 20;
+}
+
+.menu-btn:hover .bar {
+	background: #ccc;
+}
+
+.menu-btn .bar {
+	background: #fff;
+	width: 30px;
+	height: 3px;
+	margin-bottom: 4px;
+	border-radius: 10px 0;
+	box-shadow: 0px 0px 3px 1.5px #000;
+	transition: background 0.1s ease-in-out;
+}
+
+.menu-btn .bar:last-child {
+	margin-bottom: 0;
+}
+
+.menu {
+	background: rgba(0, 0, 0, 0.7);
+	color: #fff;
+	padding: 10px 16px 10px 12px;
+	position: fixed;
+	top: 46px;
+	/* left: 14px; */
+	left: -180px;
+	font-size: 14px;
+	transition: left 0.3s ease-in-out;
+	z-index: 20;
+}
+
+.menu.menuOpen {
+	left: 0px;
+}
+
+.menu label {
+	cursor: pointer;
+	user-select: none;
+}
+
+.menu .inputRow {
+	display: flex;
+	align-items: center;
+	height: 26px;
+}
+
+.inputRow input {
+	margin-right: 8px;
+}
+
+.mapText {
+	color: #fff;
+	font-size: 12px;
+	white-space: nowrap;
+	text-shadow: 0 0 6px #000, 0 0 6px #000, 0 0 3px #000;
+	user-select: none;
+	pointer-events: none;
+}
+
+.coords {
+	position: fixed;
+	right: 8px;
+	bottom: 6px;
+	z-index: 10;
+	font-size: 10px;
+}
+
 .mapIcon {
 	position: fixed;
 	width: 32px;
@@ -35,14 +112,8 @@ canvas {
 .mapIcon div {
 	position: absolute;
 	left: 50%;
-	bottom: -14px;
+	bottom: -11px;
 	transform: translate(-50%, 0);
-	color: #fff;
-	font-size: 12px;
-	white-space: nowrap;
-	text-shadow: 0 0 6px #000, 0 0 6px #000, 0 0 3px #000;
-	user-select: none;
-	pointer-events: none;
 }
 
 .mapIcon.player {
@@ -81,3 +152,8 @@ canvas {
 	background-position: -96px -32px;
 	animation: pulse 1.2s ease-in-out infinite;
 }
+
+.menuMapIcon {
+	position: static;
+	transform: scale(0.7);
+}