WIP add /map-demo.html page

oskarrough · Sep 30, 2023 · 1d1fdee · 1d1fdee
1 parent 0a791bd
commit 1d1fdee
Show file tree

Hide file tree

Showing 3 changed files with 165 additions and 0 deletions.
diff --git a/map-demo.html b/map-demo.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<title>Manual for Slay the Web</title>
+		<meta name="description" content="A video card game for the web" />
+		<meta
+			name="viewport"
+			content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover"
+		/>
+		<meta name="mobile-web-app-capable" content="yes" />
+		<meta name="theme-color" content="#116f54" />
+		<meta name="msapplication-TileColor" content="#116f54" />
+		<link rel="icon" type="image/png" href="/images/favicons/favicon-512.png" sizes="512x512" />
+		<link rel="shortcut icon" href="/images/favicons/favicon.ico" />
+		<link rel="apple-touch-icon" href="/images/favicon-512.png" />
+		<link rel="stylesheet" href="/src/ui/styles/index.css" />
+		<style>
+			html {
+				background-image: none;
+			}
+			slay-map {
+				border: 5px solid red;
+				width: 500px;
+				min-height: 0;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="Container">
+			<div id="root"></div>
+		</div>
+
+		<script async src="/src/ui/pages/map-demo.js" type="module"></script>
+
+	</body>
+</html>
diff --git a/src/ui/pages/map-demo.js b/src/ui/pages/map-demo.js
@@ -0,0 +1,127 @@
+import {html, render, useState, useEffect, useRef} from '../lib.js'
+import {SlayMap} from '../components/map.js'
+import Dungeon from '../../game/dungeon.js'
+
+const useSyncStyle = (ref, styleKey, inputId, initialValue) => {
+	useEffect(() => {
+		const handleInputChange = (event) => {
+			const value = styleKey.startsWith('--') ? event.target.value : `${event.target.value}px`
+			console.log(styleKey, event.target.value, value)
+			ref.current.base.style.setProperty(styleKey, value)
+		}
+
+		const input = document.getElementById(inputId)
+		input.value = initialValue
+		input.addEventListener('input', handleInputChange)
+
+		return () => {
+			input.removeEventListener('input', handleInputChange)
+		}
+	}, [ref, styleKey, inputId])
+}
+
+const Demo = () => {
+	const ref = useRef(null)
+
+	const [dungeonConfig, setDungeonConfig] = useState({
+		width: 10,
+		height: 6,
+		minRooms: 2,
+		maxRooms: 5,
+		roomTypes: 'MMMCE',
+		customPaths: '123',
+	})
+
+	const [dungeon, setDungeon] = useState(Dungeon(dungeonConfig))
+
+	useSyncStyle(ref, '--highlight', 'highlightColor', 'gold')
+	useSyncStyle(ref, '--pathColor', 'pathColor', 'black')
+	useSyncStyle(ref, 'width', 'width', '500')
+	useSyncStyle(ref, 'min-height', 'minHeight', 'none')
+
+	const x = 0
+	const y = 0
+	const onSelect = (move) => {
+		console.log(move)
+	}
+
+	console.log('demo', {dungeon, x, y})
+
+	return html`
+		<div class="Box">
+			<form>
+				<fieldset>
+					<legend>Dungeon settings</legend>
+					<label
+						>Width
+						<input
+							type="number"
+							id="dungeonWidth"
+							value=${dungeonConfig.width}
+							onInput=${(event) => {
+								setDungeonConfig({...dungeonConfig, width: event.target.value})
+								setDungeon(Dungeon(dungeonConfig))
+							}}
+						/>
+					</label>
+					<label
+						>Height
+						<input
+							type="number"
+							id="dungeonHeight"
+							value=${dungeonConfig.height}
+							onInput=${(event) => {
+								setDungeonConfig({...dungeonConfig, height: event.target.value})
+								setDungeon(Dungeon(dungeonConfig))
+							}}
+						/>
+					</label>
+					<label
+						>Min Rooms
+						<input
+							type="number"
+							id="dungeonMinRooms"
+							value=${dungeonConfig.minRooms}
+							onInput=${(event) => {
+								setDungeonConfig({...dungeonConfig, minRooms: event.target.value})
+								setDungeon(Dungeon(dungeonConfig))
+							}}
+					/></label>
+					<label
+						>Max Rooms
+						<input
+							type="number"
+							id="dungeonMaxRooms"
+							value=${dungeonConfig.maxRooms}
+							onInput=${(event) => {
+								setDungeonConfig({...dungeonConfig, maxRooms: event.target.value})
+								setDungeon(Dungeon(dungeonConfig))
+							}}
+					/></label>
+					<br />
+					<label>Room Types <input type="text" id="dungeonRoomTypes" /> </label>
+					<label>Custom Paths <input type="text" id="dungeonCustomPaths" /> </label>
+				</fieldset>
+				<fieldset>
+					<legend>Styles</legend>
+					<label>Highlight color <input type="color" id="highlightColor" /></label>
+					<label>Path color <input type="color" id="pathColor" /></label>
+					<label>Width <input type="number" id="width" step="20" value="500" /></label>
+					<label>Height <input type="number" id="minHeight" step="100" value="0" /></label>
+				</fieldset>
+			</form>
+		</div>
+
+		<${SlayMap}
+			ref=${ref}
+			dungeon=${dungeon}
+			x=${x}
+			y=${y}
+			onSelect=${onSelect}
+			disableScatter=${false}
+			debug=${false}
+		><//>
+	`
+}
+
+render(html`<${Demo} />`, document.querySelector('#root'))
diff --git a/vite.config.js b/vite.config.js
@@ -17,6 +17,7 @@ export default defineConfig(() => {
 					stats: resolve('stats.html'),
 					text: resolve('text.html'),
 					manual: resolve('manual.html'),
+					mapDemo: resolve('map-demo.html'),
 				},
 			},
 		},