Merge pull request #8 from szres/add-glyph-input

feat: add glyph input

src/routes/Glyph.svelte

@@ -7,10 +7,12 @@
 	export let width = 64;
 	export let height = 64;
 	export let background = '#0000';
+	export let backgroundColor = '#0000';
 	export let outlineColor = '#47df';
 	export let glyph = '';
 	export let drawable = false;
 	export let guess = { points: '', name: '-', score: 0 };
+	export let clickHandler = () => {};
 
 	let cx;
 	let cy;
@@ -141,6 +143,8 @@
 			canvas.addEventListener('mouseleave', drawEnd);
 			canvas.addEventListener('mousemove', drawMove);
 			canvas.addEventListener('touchmove', drawMoveOnTouch);
+		} else {
+			canvas.addEventListener('click', clickHandler);
 		}
 		ctx_render = canvas.getContext('2d');
 		layer_bg.width = width;
@@ -150,22 +154,26 @@
 		layer_effect.width = width;
 		layer_effect.height = height;
 
-		ctx_bg.lineWidth = 2;
-		ctx_bg.strokeStyle = outlineColor;
-		let hexagon = [
+		let hexagonPoint = [
 			{ dx: 0, dy: -R },
 			{ dx: +Math.cos(Math.PI / 6) * R, dy: -Math.sin(Math.PI / 6) * R },
 			{ dx: +Math.cos(Math.PI / 6) * R, dy: Math.sin(Math.PI / 6) * R },
 			{ dx: 0, dy: +R },
 			{ dx: -Math.cos(Math.PI / 6) * R, dy: Math.sin(Math.PI / 6) * R },
 			{ dx: -Math.cos(Math.PI / 6) * R, dy: -Math.sin(Math.PI / 6) * R }
 		];
-		ctx_bg.beginPath();
-		hexagon.forEach((point) => {
-			ctx_bg.lineTo(cx + point.dx, cy + point.dy);
+		let hexagon = new Path2D();
+		hexagon.moveTo(cx + 0, cy - R);
+		hexagonPoint.forEach((point) => {
+			hexagon.lineTo(cx + point.dx, cy + point.dy);
 		});
-		ctx_bg.closePath();
-		ctx_bg.stroke();
+		hexagon.closePath();
+
+		ctx_bg.lineWidth = 2;
+		ctx_bg.strokeStyle = outlineColor;
+		ctx_bg.fillStyle = backgroundColor;
+		ctx_bg.fill(hexagon);
+		ctx_bg.stroke(hexagon);
 
 		ctx_bg.strokeStyle = '#ccc7';
 		ctx_bg.lineWidth = 1;
@@ -340,3 +348,10 @@
 </script>
 
 <canvas class="self-center" {width} {height} style:background bind:this={canvas} />
+{#if drawable}
+	<div>
+		<span>
+			{pointDrawed}
+		</span>
+	</div>
+{/if}

src/routes/GlyphDraw.svelte

@@ -22,6 +22,12 @@
 		<span class="text-center">{guess.name}</span>
 	</div>
 </div>
-<div class="flex justify-center">
-	<Glyph {...drawSize} drawable="true" on:newGuess={(e) => (guess = e.detail.guess)} on:newResult />
+<div class="flex flex-col text-center justify-center">
+	<Glyph
+		{...drawSize}
+		drawable="true"
+		on:newGuess={(e) => (guess = e.detail.guess)}
+		on:newResult
+		backgroundColor="#0003"
+	/>
 </div>

src/routes/GlyphSelector.svelte

@@ -0,0 +1,29 @@
+<script>
+	import Glyph from './Glyph.svelte';
+	export let selection = [
+		{
+			points: 'bdratb',
+			handler: () => {
+				predictionDepth = 3;
+			}
+		},
+		{
+			points: 'bdjhb',
+			handler: () => {
+				predictionDepth = 4;
+			}
+		},
+		{
+			points: 'mbhjdm',
+			handler: () => {
+				predictionDepth = 5;
+			}
+		}
+	];
+
+	export let predictionDepth = 0;
+</script>
+
+{#each selection as s}
+	<Glyph glyph={s.points} clickHandler={s.handler} backgroundColor="#44b9" />
+{/each}

src/routes/overclock.svelte

@@ -1,17 +1,15 @@
 <script>
 	import Glyph from './Glyph.svelte';
 	import GlyphDraw from './GlyphDraw.svelte';
-	let predictionDepth = 5;
-	let predictions = [
-		{ name: '', points: '' },
-		{ name: '', points: '' },
-		{ name: '', points: '' },
-		{ name: '', points: '' },
-		{ name: '', points: '' }
-	];
-	const newPrediction = () => {
+	import GlyphSelector from './GlyphSelector.svelte';
+
+	let predictionDepth = 0;
+	let predictions = [];
+
+	$: newPrediction(predictionDepth);
+	const newPrediction = (depth) => {
 		predictions = [];
-		for (let index = 0; index < predictionDepth; index++) {
+		for (let index = 0; index < depth; index++) {
 			predictions = [...predictions, { name: '', points: '' }];
 		}
 	};
@@ -23,7 +21,7 @@
 				return;
 			}
 		}
-		newPrediction();
+		newPrediction(predictionDepth);
 		writePrediction(c);
 	};
 	const onNewResult = (e) => {
@@ -34,9 +32,23 @@
 
 <div class="flex flex-col h-max m-4">
 	<div class="flex justify-center mb-4">
-		{#each predictions as prediction}
-			<Glyph glyph={prediction.points} />
-		{/each}
+		{#if predictionDepth == 0}
+			<GlyphSelector bind:predictionDepth />
+		{:else}
+			<Glyph
+				glyph="atarajaha"
+				clickHandler={() => {
+					predictionDepth = 0;
+				}}
+				outlineColor="#b449"
+				backgroundColor="#b449"
+			/>
+			{#each predictions as prediction}
+				<Glyph glyph={prediction.points} />
+			{/each}
+		{/if}
 	</div>
-	<GlyphDraw on:newResult={onNewResult} />
+	{#if predictionDepth > 0}
+		<GlyphDraw on:newResult={onNewResult} />
+	{/if}
 </div>