From c3182eaf9c9a8a1f7e0a2ffe8268a4e07746b847 Mon Sep 17 00:00:00 2001
From: Vijak Khajornritdacha <vijak13019@hotmail.com>
Date: Wed, 20 Dec 2023 14:30:08 +0700
Subject: [PATCH] fix: bind group_cnt and day

---
 src/components/GroupInformation.svelte |  6 +++--
 src/routes/+page.svelte                | 36 ++++++++++++++------------
 2 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/components/GroupInformation.svelte b/src/components/GroupInformation.svelte
index b2191d5..438a98d 100644
--- a/src/components/GroupInformation.svelte
+++ b/src/components/GroupInformation.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { data } from '../store';
 
-	export let group_cnt = 0;
-	export let day = 1;
+	export let group_cnt: number;
+	export let day: number;
 	const PRIMES = [2, 3, 5, 7, 11, 13, 17, 19, 23, 29];
+
+	$: console.log(`group_cnt in children= ${group_cnt}`);
 </script>
 
 <div class="flex flex-col pt-10 justify-center">
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index df6960b..fee7510 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,25 +1,27 @@
 <script lang="ts">
-	import DownloadButton from "../components/DownloadButton.svelte";
-	import DropMember from "../components/DropMember.svelte";
-	import Footer from "../components/Footer.svelte";
-	import ForbiddenPair from "../components/ForbiddenPair.svelte";
-	import GroupInformation from "../components/GroupInformation.svelte";
-    // import Modal from 'svelte-parts/Modal.svelte';
+	import DownloadButton from '../components/DownloadButton.svelte';
+	import DropMember from '../components/DropMember.svelte';
+	import Footer from '../components/Footer.svelte';
+	import ForbiddenPair from '../components/ForbiddenPair.svelte';
+	import GroupInformation from '../components/GroupInformation.svelte';
+	// import Modal from 'svelte-parts/Modal.svelte';
 
-    let group_cnt = 0;
-    let day = 1;
+	let group_cnt = 0;
+	let day = 1;
+
+	$: console.log(`group_cnt = ${group_cnt}`);
 </script>
 
 <h1 class="font-bold text-7xl text-center py-10 text-indigo-950">Group Randomizer</h1>
 <div class="flex flex-row">
-    <div class="basis-1/2 m-5 flex flex-col items-center">
-        <DropMember />
-        <GroupInformation group_cnt={group_cnt} day={day}/>
-    </div>
-    <div class="basis-1/2 m-5 flex flex-col items-center">
-        <DownloadButton />
-        <ForbiddenPair />
-    </div>
+	<div class="basis-1/2 m-5 flex flex-col items-center">
+		<DropMember />
+		<GroupInformation bind:group_cnt bind:day />
+	</div>
+	<div class="basis-1/2 m-5 flex flex-col items-center">
+		<DownloadButton />
+		<ForbiddenPair />
+	</div>
 </div>
 
 <!-- TODO: let me learn about $: first, and I will go back to create modal -->
@@ -31,4 +33,4 @@
 
 <Footer />
 
-<!-- <button type="button" on:click={() => count += 1} class="bg-blue-500 text-white rounded px-4 py-2">Augment</button> -->
\ No newline at end of file
+<!-- <button type="button" on:click={() => count += 1} class="bg-blue-500 text-white rounded px-4 py-2">Augment</button> -->