Merge pull request #9 from szres/add-glyph-predict

add glyph predict function

src/routes/Glyph.svelte

@@ -68,7 +68,7 @@
 		let response = await fetch('glyphs.json');
 		glyphJson = await response.json();
 		for (const key in glyphJson) {
-			glyphJson[key].segments = segmentsFromPoints(glyphJson[key].glyph);
+			glyphJson[key].segments = segmentsFromPoints(glyphJson[key].points);
 		}
 	};
 	const guessGlyphFromSegments = (segments) => {
@@ -83,7 +83,7 @@
 				}
 			});
 			score /= glyphJson[key].segments.length;
-			guessed.push({ name: glyphJson[key].name, score, points: glyphJson[key].glyph });
+			guessed.push({ name: glyphJson[key].name, score, points: glyphJson[key].points });
 		}
 		guessed.sort((a, b) => b.score - a.score);
 		if (guessed.length > 0 && guessed[0].score > 0) {

src/routes/GlyphInput.svelte

@@ -0,0 +1,25 @@
+<script>
+	import Glyph from './Glyph.svelte';
+	import GlyphDraw from './GlyphDraw.svelte';
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+
+	export let currentPossibleGuess = [];
+</script>
+
+{#if currentPossibleGuess.length > 12}
+	<GlyphDraw on:newResult />
+{:else if currentPossibleGuess.length > 1}
+	<div class="flex flex-wrap justify-center mb-4">
+		{#each currentPossibleGuess as glyph}
+			<Glyph
+				glyph={glyph.points}
+				clickHandler={() => {
+					dispatch('newResult', {
+						result: glyph
+					});
+				}}
+			/>
+		{/each}
+	</div>
+{/if}

src/routes/overclock.svelte

@@ -1,39 +1,122 @@
 <script>
+	import { onMount } from 'svelte';
 	import Glyph from './Glyph.svelte';
-	import GlyphDraw from './GlyphDraw.svelte';
-	import GlyphSelector from './GlyphSelector.svelte';
+	import GlyphInput from './GlyphInput.svelte';
 
+	let ocSequence = [];
+	let glyphs = {};
+	let guessSequence = [];
+	const ocSequenceLoad = async () => {
+		let response = await fetch('overclock.json');
+		ocSequence = await response.json();
+	};
+	const glyphsLoad = async () => {
+		let response = await fetch('glyphs.json');
+		glyphs = await response.json();
+	};
+	onMount(() => {
+		glyphsLoad();
+		ocSequenceLoad();
+	});
 	let predictionDepth = 0;
 	let predictions = [];
+	let currentGuessIdx = 0;
+	let currentPossibleGuess;
+	const currentPossibleGuess_Update = () => {
+		currentPossibleGuess = [];
+		for (let index = 0; index < guessSequence.length; index++) {
+			const guess = guessSequence[index];
+			let g = glyphFromName(guess[currentGuessIdx]);
+			if (!currentPossibleGuess.includes(g)) {
+				currentPossibleGuess.push(g);
+			}
+		}
+	};
 
 	$: newPrediction(predictionDepth);
 	const newPrediction = (depth) => {
+		guessSequence = [...ocSequence].filter((c) => {
+			if (c.length !== depth) {
+				return false;
+			}
+			return true;
+		});
 		predictions = [];
+		currentGuessIdx = 0;
+		currentPossibleGuess_Update();
 		for (let index = 0; index < depth; index++) {
 			predictions = [...predictions, { name: '', points: '' }];
 		}
 	};
 	const writePrediction = (c) => {
-		for (let index = 0; index < predictionDepth; index++) {
-			if (predictions[index].name === '') {
-				predictions[index] = c;
-				predictions = predictions;
+		predictions[currentGuessIdx] = c;
+		predictions = predictions;
+		currentGuessIdx++;
+	};
+
+	const glyphFromName = (name) => {
+		for (let index = 0; index < glyphs.length; index++) {
+			if (glyphs[index].name.includes(name)) {
+				return glyphs[index];
+			}
+		}
+		return null;
+	};
+	const onNewGuess = (glyph) => {
+		if (currentGuessIdx >= predictions.length) {
+			return;
+		}
+		let tempSequence = guessSequence.filter((c) => {
+			if (glyph.name.includes(c[currentGuessIdx])) {
+				return true;
+			}
+			return false;
+		});
+		if (tempSequence.length > 0) {
+			writePrediction(glyph);
+			if (currentGuessIdx >= predictions.length) {
+				currentPossibleGuess = [];
 				return;
 			}
+			guessSequence = tempSequence;
+			currentPossibleGuess_Update();
+			if (currentPossibleGuess.length == 1) {
+				onNewGuess(currentPossibleGuess[0]);
+			}
 		}
-		newPrediction(predictionDepth);
-		writePrediction(c);
 	};
 	const onNewResult = (e) => {
 		let result = e.detail.result;
-		writePrediction(result);
+		onNewGuess(result);
 	};
+	const glyphDepth = [
+		{
+			points: 'bdratb',
+			handler: () => {
+				predictionDepth = 3;
+			}
+		},
+		{
+			points: 'bdjhb',
+			handler: () => {
+				predictionDepth = 4;
+			}
+		},
+		{
+			points: 'mbhjdm',
+			handler: () => {
+				predictionDepth = 5;
+			}
+		}
+	];
 </script>
 
 <div class="flex flex-col h-max m-4">
 	<div class="flex justify-center mb-4">
 		{#if predictionDepth == 0}
-			<GlyphSelector bind:predictionDepth />
+			{#each glyphDepth as s}
+				<Glyph glyph={s.points} clickHandler={s.handler} backgroundColor="#44b9" />
+			{/each}
 		{:else}
 			<Glyph
 				glyph="atarajaha"
@@ -48,7 +131,5 @@
 			{/each}
 		{/if}
 	</div>
-	{#if predictionDepth > 0}
-		<GlyphDraw on:newResult={onNewResult} />
-	{/if}
+	<GlyphInput {currentPossibleGuess} on:newResult={onNewResult} />
 </div>