From 64964dc016e9361c5a154454039062403ede52b5 Mon Sep 17 00:00:00 2001
From: VanR20 <anrao3@wisc.edu>
Date: Wed, 21 Feb 2024 17:15:45 +0530
Subject: [PATCH] Integrated with backend database

---
 .github/workflows/deploy.yml |   2 +-
 src/routes/+layout.svelte    |   1 -
 src/routes/+layout.ts        |   2 +-
 src/routes/+page.svelte      | 360 +++++++++++++++++++++++++----------
 src/routes/EndPage.svelte    |  15 +-
 src/routes/KeyPad.svelte     |  38 +++-
 src/routes/StartPage.svelte  |  33 ++--
 src/routes/logic.ts          |  95 +++++++++
 8 files changed, 408 insertions(+), 138 deletions(-)
 create mode 100644 src/routes/logic.ts

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 1cf5810..1994142 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -53,4 +53,4 @@ jobs:
     steps:
       - name: Deploy
         id: deployment
-        uses: actions/deploy-pages@v4
\ No newline at end of file
+        uses: actions/deploy-pages@v4
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index f183ec7..98c82d3 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -3,7 +3,6 @@
 </script>
 
 <div class="app">
-
 	<main>
 		<slot />
 	</main>
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
index d2c0be2..ceccaaf 100644
--- a/src/routes/+layout.ts
+++ b/src/routes/+layout.ts
@@ -1,2 +1,2 @@
 export const prerender = true;
-export const ssr = false;
\ No newline at end of file
+export const ssr = false;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e96646e..60a4212 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,117 +1,237 @@
 <script lang="ts">
-	import StartPage from "./StartPage.svelte";
+	import StartPage from './StartPage.svelte';
 	import KeyPad from './KeyPad.svelte';
-	import EndPage from "./EndPage.svelte";
+	import EndPage from './EndPage.svelte';
+	import type { CreateInstanceResponse, UpdateInstanceResponse, GetPointsResponse } from './logic';
+
+	// Game Initial Values
 	let show_start_screen = true;
 	let show_keypad_screen = false;
 	let show_end_screen = false;
-
-	// variables for executing B&W Roth Algo
-	let rounds= 0;
+	let show_pin = false;
+	let rounds = 0;
 	let userEnteredPIN = '';
-	let candidates:Array<number> = [0,1,2,3,4,5,6,7,8,9];
-	let non_candidates:Array<number> = [];
-	let displayDigits = [0,0,0,0,0,0,0,0,0,0];
-
-	function indicesOf(arr:Array<number>,val:number):Array<number> {
-    	let indexArr:Array<number> = [];
-    	arr.forEach((element, index) => {
-        	if (element === val) {
-	            indexArr.push(index);
-        	}
-    	});
-    	return indexArr;
-	}
-	function shuffle(array:Array<number>) {
-  		let currentIndex = array.length,  randomIndex;
-  		// While there remain elements to shuffle.
-  		while (currentIndex > 0) {
-    		// Pick a remaining element.
-    		randomIndex = Math.floor(Math.random() * currentIndex);
-    		currentIndex--;
-    		// And swap it with the current element.
-    		[array[currentIndex], array[randomIndex]] = [
-      		array[randomIndex], array[currentIndex]];
-  		}
-  		return array;
-	}	
-	function cutInHalf(array:Array<number>): Array<Array<number>> {
-		let midpoint = Math.ceil(array.length/2);
-		let L = array.slice(0,midpoint)
-		let R = array.slice(midpoint,array.length);
-		return([L,R])
-	}
-	function intersect(a:Array<number>,b:Array<number>){
-		return a.filter(value=>b.includes(value))
-	}
-	function setDiff(a:Array<number>,b:Array<number>){
-		return a.filter(function(x) { return b.indexOf(x) < 0; });
-	}
-	function gameHeader(rounds:number){
-		let a = ''
-		switch(Math.floor(rounds/4)+1){
-			case 1: {a ="1st"; break;}
-			case 2: {a ="2nd";break;}
-			case 3: {a ="3rd";break;}
-			case 4: {a ="4th";break;}
+	let candidates: Array<number> = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+	let non_candidates: Array<number> = [];
+	let displayDigits = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+
+	function indicesOf(arr: Array<number>, val: number): Array<number> {
+		let indexArr: Array<number> = [];
+		arr.forEach((element, index) => {
+			if (element === val) {
+				indexArr.push(index);
+			}
+		});
+		return indexArr;
+	}
+	function shuffle(array: Array<number>) {
+		let currentIndex = array.length,
+			randomIndex;
+		// While there remain elements to shuffle.
+		while (currentIndex > 0) {
+			// Pick a remaining element.
+			randomIndex = Math.floor(Math.random() * currentIndex);
+			currentIndex--;
+			// And swap it with the current element.
+			[array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
+		}
+		return array;
+	}
+	function cutInHalf(array: Array<number>): Array<Array<number>> {
+		let midpoint = Math.ceil(array.length / 2);
+		let L = array.slice(0, midpoint);
+		let R = array.slice(midpoint, array.length);
+		return [L, R];
+	}
+	function intersect(a: Array<number>, b: Array<number>) {
+		return a.filter((value) => b.includes(value));
+	}
+	function setDiff(a: Array<number>, b: Array<number>) {
+		return a.filter(function (x) {
+			return b.indexOf(x) < 0;
+		});
+	}
+	function gameHeader(rounds: number) {
+		let a = '';
+		switch (Math.floor(rounds / 4) + 1) {
+			case 1: {
+				a = '1st';
+				break;
+			}
+			case 2: {
+				a = '2nd';
+				break;
+			}
+			case 3: {
+				a = '3rd';
+				break;
+			}
+			case 4: {
+				a = '4th';
+				break;
+			}
 		}
-		return a
+		return a;
 	}
 
-	function convertToDisplayDigits(L:Array<number>){
+	function convertToDisplayDigits(L: Array<number>) {
 		// Takes in 2 arrays L,R. Colors L black and 'not' L white
-		let coloring_key = []
-		for(let i=0;i<10;i++){
+		let coloring_key = [];
+		for (let i = 0; i < 10; i++) {
 			L.indexOf(i) !== -1 ? coloring_key.push(0) : coloring_key.push(1);
 		}
-		return coloring_key
+		return coloring_key;
 	}
-	function setNextRoundKeyPadColoring(){
+	function setNextRoundKeyPadColoring() {
 		let LR = cutInHalf(shuffle(candidates));
-			let L = LR[0];
-			let R = LR[1];
+		let L = LR[0];
+		let R = LR[1];
 		let OP = cutInHalf(shuffle(non_candidates));
-			let O = OP[0];
-			let P = OP[1];
+		let O = OP[0];
+		let P = OP[1];
 		let L_display = L.concat(P);
 		let R_display = R.concat(O);
 
-		displayDigits = convertToDisplayDigits(L_display)
+		displayDigits = convertToDisplayDigits(L_display);
 	}
-	function play_a_round(event:CustomEvent){
+	function play_a_round(event: CustomEvent) {
 		let BW = event.detail.value;
-		if(rounds % 4 === 0){
-			candidates = [0,1,2,3,4,5,6,7,8,9]
+		if (rounds % 4 === 0) {
+			candidates = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 		}
-		candidates = intersect(candidates,indicesOf(displayDigits,BW));
-		non_candidates = setDiff([0,1,2,3,4,5,6,7,8,9],candidates);
+		candidates = intersect(candidates, indicesOf(displayDigits, BW));
+		non_candidates = setDiff([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], candidates);
 		// Add the PIN digit when sufficient rounds have passed
-		if(rounds % 4 === 3){ 
-			let digitUndefined = candidates[0] === undefined
-			let digit = digitUndefined ? '#' : String(candidates[0])
+		if (rounds % 4 === 3) {
+			let digitUndefined = candidates[0] === undefined;
+			let digit = digitUndefined ? '#' : String(candidates[0]);
 			userEnteredPIN = userEnteredPIN.concat(digit);
 		}
 		// Log the completed round
-		console.log("\nPIN Digit #"+Math.floor((rounds/4)+1))
-		console.log("Round "+(rounds+1)+". Candidates so far are: " + candidates)
-		console.log("PIN entered so far is: " + userEnteredPIN)		
-		console.log()
+		console.log('\nPIN Digit #' + Math.floor(rounds / 4 + 1));
+		console.log('Round ' + (rounds + 1) + '. Candidates so far are: ' + candidates);
+		console.log('PIN entered so far is: ' + userEnteredPIN);
+		console.log();
 		rounds += 1;
 		// handle end of game
-		if(userEnteredPIN.length < 4){
-			setNextRoundKeyPadColoring()
+		if (userEnteredPIN.length < 4) {
+			setNextRoundKeyPadColoring();
 		} else {
-			endGame()
+			endGame();
 		}
 	}
-	function startGame(){
+	function startGame() {
 		setNextRoundKeyPadColoring();
 		show_start_screen = false;
 		show_keypad_screen = true;
 	}
-	function endGame(){
+	function endGame() {
+		finish_transition();
+	}
+
+	let uid: string = '';
+	let uid_valid: boolean = false;
+	$: uid_valid = check_uid_valid(uid);
+	let iid: number = -1;
+	let actual_pin: string = '';
+
+	function reset() {
+		show_start_screen = true;
 		show_keypad_screen = false;
-		show_end_screen = true;
+		show_end_screen = false;
+		show_pin = false;
+		rounds = 0;
+		userEnteredPIN = '';
+		candidates = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+		non_candidates = [];
+		displayDigits = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+
+		show_start_screen = true;
+		show_pin = false;
+		uid_valid = false;
+		iid = -1;
+		actual_pin = '';
+		const temp = uid;
+		uid = '';
+		uid = temp;
+	}
+
+	async function get_points(): Promise<GetPointsResponse> {
+		const url = `https://142.93.219.243.nip.io/points/${uid.toLowerCase()}`;
+		const request = new Request(url, { method: 'GET' });
+		const data = await fetch(request);
+		return <GetPointsResponse>(<unknown>data.json());
+	}
+
+	function normalize() {
+		uid = uid;
+	}
+
+	function set_actual_pin(val: string) {
+		actual_pin = val;
+	}
+
+	function isAlphaNumeric(str: string): boolean {
+		let code, i, len;
+		for (i = 0, len = str.length; i < len; i++) {
+			code = str.charCodeAt(i);
+			if (!(code > 47 && code < 58) && !(code > 64 && code < 91) && !(code > 96 && code < 123)) {
+				return false;
+			}
+		}
+		return true;
+	}
+
+	function check_uid_valid(uid_cand: string): boolean {
+		return uid_cand.length === 6 && isAlphaNumeric(uid_cand);
+	}
+
+	function progress_transition() {
+		if (!uid_valid) return;
+		const url = 'https://142.93.219.243.nip.io/create_instance';
+		const data = {
+			game_id: 'R',
+			user_id: uid.toLowerCase()
+		};
+		const request = new Request(url, {
+			method: 'POST',
+			body: JSON.stringify(data),
+			headers: new Headers({
+				'Content-Type': 'application/json; charset=UTF-8'
+			})
+		});
+		fetch(request).then((create_instance_value_temp) => {
+			create_instance_value_temp.json().then((temp) => {
+				const create_instance_value = <CreateInstanceResponse>(<unknown>temp);
+				iid = create_instance_value.iid;
+				startGame();
+			});
+		});
+	}
+
+	function finish_transition() {
+		const url = 'https://142.93.219.243.nip.io/update_instance';
+		const data = {
+			iid_value: iid,
+			result_pin: userEnteredPIN
+		};
+		const request = new Request(url, {
+			method: 'POST',
+			body: JSON.stringify(data),
+			headers: new Headers({
+				'Content-Type': 'application/json; charset=UTF-8'
+			})
+		});
+		fetch(request).then((instance_response_value_temp) => {
+			instance_response_value_temp.json().then((temp) => {
+				const instance_response_value = <UpdateInstanceResponse>(<unknown>temp);
+				if (iid !== instance_response_value.iid) {
+					alert('Reached invalid state, please report bug!');
+				}
+				show_end_screen = true;
+				show_keypad_screen = false;
+			});
+		});
 	}
 </script>
 
@@ -122,18 +242,70 @@
 
 <section>
 	{#if show_start_screen}
-		<StartPage on:click={startGame}/>
+		<input
+			type="text"
+			placeholder="User ID"
+			bind:value={uid}
+			on:change={normalize}
+			maxlength="6"
+			name="userid"
+			id="userid"
+		/>
+		{#if uid_valid}
+			{#await get_points()}
+				<p>Validating User ID...</p>
+			{:then get_points_value}
+				{#if get_points_value.uid !== null}
+					{(set_actual_pin(get_points_value.actual_pin), '')}
+					<p style="color: green">Points: {get_points_value.points}</p>
+				{:else}
+					<p style="color: red">Invalid User ID!</p>
+				{/if}
+			{:catch error}
+				{(console.log(error), '')}
+				<p style="color: purple">Network Error: Unable to check validity of User ID!</p>
+			{/await}
+		{/if}
+		<br />
+		<button on:click={progress_transition}>Start Game</button>
 	{/if}
 	{#if show_keypad_screen}
-		<h1>Tap the color of your <strong><u>{gameHeader(rounds)} digit</u></strong> for <strong>{4-(rounds % 4)}</strong> more rounds.</h1>
-		<KeyPad key_colors={displayDigits} training_board={true} on:BW_input={play_a_round}/>
+		<h1>
+			Tap the color of your <strong><u>{gameHeader(rounds)} digit</u></strong> for
+			<strong>{4 - (rounds % 4)}</strong> more rounds.
+		</h1>
+		<KeyPad key_colors={displayDigits} training_board={true} on:BW_input={play_a_round} />
 	{/if}
 	{#if show_end_screen}
-		<EndPage PIN = {userEnteredPIN} />
+		{#if show_pin}
+			<div>Entered PIN: {userEnteredPIN}</div>
+		{/if}
+		<br />
+		{#if actual_pin === userEnteredPIN}
+			<p style="color: green">Congratulations on entering the correct PIN!</p>
+		{:else}
+			<p style="color: red">Incorrect PIN entered, no points earned!</p>
+		{/if}
+		<br />
+		{#await get_points()}
+			<p>Fetching points...</p>
+		{:then get_points_value}
+			{#if get_points_value.uid !== null}
+				<p style="color: green">Points: {get_points_value.points}</p>
+			{:else}
+				<p style="color: red">Invalid User ID!</p>
+			{/if}
+		{:catch error}
+			{(console.log(error), '')}
+			<p style="color: purple">Network Error: Unable to fetch points!</p>
+		{/await}
+		<br />
+		<button on:click={() => (show_pin = !show_pin)}>Toggle Visibility of Entered PIN</button>
+		<br />
+		<button on:click={reset}>Play Again</button>
+		<br />
+		<button><a href="https://142.93.219.243.nip.io/">Checkout Other Games</a></button>
 	{/if}
-
-
-	
 </section>
 
 <style>
@@ -148,20 +320,4 @@
 	h1 {
 		width: 100%;
 	}
-
-	.welcome {
-		display: block;
-		position: relative;
-		width: 100%;
-		height: 0;
-		padding: 0 0 calc(100% * 495 / 2048) 0;
-	}
-
-	.welcome img {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		top: 0;
-		display: block;
-	}
 </style>
diff --git a/src/routes/EndPage.svelte b/src/routes/EndPage.svelte
index 7325190..3b2ee9e 100644
--- a/src/routes/EndPage.svelte
+++ b/src/routes/EndPage.svelte
@@ -1,11 +1,16 @@
-<script lang='ts'>
-    let PIN_visible = false;
-    export let PIN = '';
+<script lang="ts">
+	export let PIN_visible = false;
+	export let PIN = '';
 </script>
 
 <h1>Black and White PIN Entry</h1>
 
 {#if PIN_visible}
-<p>{PIN}</p>
+	<p>{PIN}</p>
 {/if}
-<button id="TogglePIN" on:click={()=>{PIN_visible = !PIN_visible}}>Toggle PIN Visibility</button>
+<button
+	id="TogglePIN"
+	on:click={() => {
+		PIN_visible = !PIN_visible;
+	}}>Toggle PIN Visibility</button
+>
diff --git a/src/routes/KeyPad.svelte b/src/routes/KeyPad.svelte
index 44793e7..9a19997 100644
--- a/src/routes/KeyPad.svelte
+++ b/src/routes/KeyPad.svelte
@@ -1,17 +1,16 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
 	const dispatch = createEventDispatcher();
-	
-	const color = ["#888888","#fdfdfd"]
-	export let key_colors:Array<number> = [0,0,0,0,0,0,0,0,0,0];
+
+	const color = ['#888888', '#fdfdfd'];
+	export let key_colors: Array<number> = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
 	export let training_board = true;
 
-	function forwardBW(v:number) {
+	function forwardBW(v: number) {
 		dispatch('BW_input', {
 			value: v
 		});
 	}
-
 </script>
 
 <div class="keypad">
@@ -25,15 +24,35 @@
 	<button class="key digit" id="key8" style="background-color:{color[key_colors[8]]}">8</button>
 	<button class="key digit" id="key9" style="background-color:{color[key_colors[9]]}">9</button>
 	{#if training_board}
-	<button class="key color_key" id="key_black" on:click={() => forwardBW(0)} style="background-color:{color[0]}">My Digit is Black</button>
+		<button
+			class="key color_key"
+			id="key_black"
+			on:click={() => forwardBW(0)}
+			style="background-color:{color[0]}">My Digit is Black</button
+		>
 	{:else}
-	<button class="key color_key" id="key_black" on:click={() => forwardBW(0)} style="background-color:{color[0]}">+</button>
+		<button
+			class="key color_key"
+			id="key_black"
+			on:click={() => forwardBW(0)}
+			style="background-color:{color[0]}">+</button
+		>
 	{/if}
 	<button class="key digit" id="key0" style="background-color:{color[key_colors[0]]}">0</button>
 	{#if training_board}
-	<button class="key color_key" id="key_white" on:click={() => forwardBW(1)} style="background-color:{color[1]}">My Digit is White</button>
+		<button
+			class="key color_key"
+			id="key_white"
+			on:click={() => forwardBW(1)}
+			style="background-color:{color[1]}">My Digit is White</button
+		>
 	{:else}
-	<button class="key color_key" id="key_white" on:click={() => forwardBW(1)} style="background-color:{color[1]}">+</button>
+		<button
+			class="key color_key"
+			id="key_white"
+			on:click={() => forwardBW(1)}
+			style="background-color:{color[1]}">+</button
+		>
 	{/if}
 </div>
 
@@ -69,5 +88,4 @@
 		border-color: black;
 		border-width: 0.2em;
 	}
-
 </style>
diff --git a/src/routes/StartPage.svelte b/src/routes/StartPage.svelte
index 46ca1c0..6e0e88c 100644
--- a/src/routes/StartPage.svelte
+++ b/src/routes/StartPage.svelte
@@ -1,28 +1,25 @@
 <script>
-    // import {createEventDispatcher } from 'svelte'
+	// import {createEventDispatcher } from 'svelte'
 
-    // const dispatch = createEventDispatcher();
+	// const dispatch = createEventDispatcher();
 
-    // function startGame(){
-    //     dispatch('start',{
-    //         text:"Started Game"
-    //     })
-    // }
+	// function startGame(){
+	//     dispatch('start',{
+	//         text:"Started Game"
+	//     })
+	// }
 </script>
 
-<h1>
-    Black and White PIN Entry
-</h1>
+<h1>Black and White PIN Entry</h1>
 
 <buton id="start" on:click>Start Game!</buton>
 
 <style>
-    #start{
-        background-color: aquamarine;
-        min-width: 80vw;
-        min-height: 5vh;
-        text-align: center;
-        font-size: 1.5em;
-    }
-
+	#start {
+		background-color: aquamarine;
+		min-width: 80vw;
+		min-height: 5vh;
+		text-align: center;
+		font-size: 1.5em;
+	}
 </style>
diff --git a/src/routes/logic.ts b/src/routes/logic.ts
new file mode 100644
index 0000000..536a306
--- /dev/null
+++ b/src/routes/logic.ts
@@ -0,0 +1,95 @@
+// export enum GameState {
+// 	START,
+// 	PROGRESS,
+// 	FINISH
+// }
+
+// export class Item {
+// 	digit: number;
+// 	color: string;
+
+// 	constructor(digit: number, color: string) {
+// 		this.digit = digit;
+// 		this.color = color;
+// 	}
+// }
+
+// export enum Mode {
+// 	DISPLAY,
+// 	POSITION_ENTRY,
+// 	COLOR_ENTRY
+// }
+
+export type GetPointsResponse = {
+	uid: number | null;
+	points: number | null;
+	actual_pin: string;
+};
+
+export type CreateInstanceResponse = {
+	iid: number;
+};
+
+export type UpdateInstanceResponse = {
+	iid: number;
+};
+
+// function rand_digit(): number {
+// 	for (;;) {
+// 		const array = new Uint8Array(1);
+// 		self.crypto.getRandomValues(array);
+// 		if (array[0] < 250) {
+// 			return array[0] % 10;
+// 		}
+// 	}
+// }
+
+// function rand_digit_min_i(i: number): number {
+// 	for (;;) {
+// 		const j = rand_digit();
+// 		if (j >= i) {
+// 			return j;
+// 		}
+// 	}
+// }
+
+// function rand_perm(): Uint8Array {
+// 	const array = new Uint8Array(10);
+// 	for (let i = 0; i < 10; ++i) {
+// 		array[i] = i;
+// 	}
+// 	for (let i = 0; i < 9; ++i) {
+// 		const j = rand_digit_min_i(i);
+// 		const temp = array[i];
+// 		array[i] = array[j];
+// 		array[j] = temp;
+// 	}
+// 	return array;
+// }
+
+// const COLORS: Array<string> = ['red', 'blue', 'green', '#8B8000', 'black'];
+// export const NCOLORS = COLORS.length;
+
+// export function get_ith_color(i: number): string {
+// 	if (i < COLORS.length) {
+// 		return COLORS[i];
+// 	}
+// 	return 'white';
+// }
+
+// export function make_random_puzzles(): Array<Array<Item>> {
+// 	const ret = new Array<Array<Item>>();
+
+// 	const perms: Record<string, Uint8Array> = {};
+// 	for (const color of COLORS) {
+// 		perms[color] = rand_perm();
+// 	}
+
+// 	for (let i = 0; i < 10; ++i) {
+// 		ret.push(new Array<Item>());
+// 		for (const color of COLORS) {
+// 			ret[i].push(new Item(perms[color][i], color));
+// 		}
+// 	}
+// 	return ret;
+// }