From b3060266e4d4e6da4141f5e7690162d017aaacf7 Mon Sep 17 00:00:00 2001
From: Ryan Khetlyr <randallard@yahoo.com>
Date: Mon, 9 Dec 2024 05:01:24 -0800
Subject: [PATCH] fix win-loss updating

---
 src/components/game.rs | 73 +++++++++++++++++++++++++++-----------
 src/main.rs            | 79 ++++++++++++++++++++++--------------------
 2 files changed, 93 insertions(+), 59 deletions(-)

diff --git a/src/components/game.rs b/src/components/game.rs
index 164f402..8daee40 100644
--- a/src/components/game.rs
+++ b/src/components/game.rs
@@ -70,6 +70,7 @@ pub fn Game(
     #[prop(into)] opponent: Opponent,
     #[prop(into)] speed: GameSpeed,  
     #[prop(into)] on_exit: Callback<()>,
+    #[prop(into)] on_stats_update: Callback<()>,
 ) -> impl IntoView {
     let game_state = RwSignal::new({
         let mut state = GameState::new(player_name, opponent);
@@ -302,27 +303,56 @@ pub fn Game(
                             {move || {
                                 let current_state = game_state.get();
                                 if current_state.current_round < 8 {
-                                    view! {
-                                        <button
-                                            class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded"
-                                            on:click=move |_| {
-                                                let mut current_state = game_state.get();
-                                                current_state.current_round += 1;
-                                                current_state.phase = GamePhase::SelectingBoards;
-                                                current_state.player1_board = None;
-                                                current_state.player2_board = None;
-                                                current_state.game_board = None;
-                                                set_timer.set(match current_state.speed {
-                                                    GameSpeed::Lightning => 1,
-                                                    GameSpeed::Quick => 5,
-                                                    GameSpeed::Relaxed => 10,
-                                                    GameSpeed::Chill => 999999,
-                                                });
-                                                game_state.set(current_state);
-                                            }
-                                        >
-                                            "Next Round"
-                                        </button>
+                                    view! {            
+                                        <div class="mt-4">
+                                            <h3 class="text-xl font-bold mb-2 text-center">
+                                                "Choose your next board"
+                                            </h3>
+                                            <div class="grid grid-cols-4 gap-4 max-w-xl mx-auto">
+                                                <For
+                                                    each=move || boards.get()
+                                                    key=|board| board.thumbnail.clone()
+                                                    children=move |board: SavedBoard| {
+                                                        view! {
+                                                            <button
+                                                                class="w-24 h-24 rounded border border-slate-700 hover:border-blue-500 transition-colors"
+                                                                on:click=move |_| {
+                                                                    let mut current_state = game_state.get();
+                                                                    current_state.current_round += 1;
+                                                                    current_state.player1_board = Some(board.clone());
+                                                                    
+                                                                    // Select random board for CPU opponent
+                                                                    if let Some(ref opponent) = current_state.player2 {
+                                                                        if matches!(opponent.opponent_type, OpponentType::Computer) {
+                                                                            let available_boards = boards.get();
+                                                                            if let Some(cpu_board) = select_random_board(available_boards) {
+                                                                                current_state.player2_board = Some(cpu_board);
+                                                                            }
+                                                                        }
+                                                                    }
+                                                                    
+                                                                    current_state.phase = GamePhase::ShowingResults;
+                                                                    current_state.game_board = None;
+                                                                    set_timer.set(match current_state.speed {
+                                                                        GameSpeed::Lightning => 1,
+                                                                        GameSpeed::Quick => 5,
+                                                                        GameSpeed::Relaxed => 10,
+                                                                        GameSpeed::Chill => 999999,
+                                                                    });
+                                                                    game_state.set(current_state);
+                                                                }
+                                                            >
+                                                                <img 
+                                                                    src=board.thumbnail.clone()
+                                                                    alt="Board option" 
+                                                                    class="w-full h-full rounded"
+                                                                />
+                                                            </button>
+                                                        }
+                                                    }
+                                                />
+                                            </div>
+                                        </div>
                                     }.into_any()
                                 } else {
                                     let current_state_clone = current_state.clone(); // Clone here for the second button
@@ -361,6 +391,7 @@ pub fn Game(
                                                     if let Some(opponent) = current_state_clone.player2.clone() {
                                                         let won = current_state_clone.player1_score > current_state_clone.player2_score;
                                                         let _ = update_opponent_stats(&opponent.id, won);
+                                                        on_stats_update.run(());
                                                     }
                                                     on_exit.run(());
                                                 }
diff --git a/src/main.rs b/src/main.rs
index 1acb02a..666727c 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -195,41 +195,38 @@ fn App() -> impl IntoView {
             {move || (!show_form.get()).then(|| view! {
                 <div class="grid grid-cols-2 gap-8 w-full max-w-4xl px-4">
                 <div>
-                    <h2 class="text-2xl font-bold mb-4">"Opponents"</h2>
-                    <div class="flex flex-col gap-2">
-                        <For
-                            each=move || opponents.get()
-                            key=|opponent| opponent.id.clone()
-                            children=move |opponent: Opponent| {
-                                let opponent_for_stats = opponent.clone();  // Clone at the start
-                                view! {
-                                    <div class="flex items-center justify-between p-2 bg-slate-800 rounded">
-                                    <div class="flex items-center gap-2 text-gray-300">
-                                        <span class="w-4 h-4 rounded-full bg-blue-600 flex items-center justify-center text-xs">
-                                            {if matches!(opponent.opponent_type, OpponentType::Computer) { "C" } else { "H" }}
-                                        </span>
-                                        {opponent.name.clone()}
-                                        {move || {
-                                            if let Some(user_data) = load_user_data() {
-                                                if let Some(stats) = user_data.opponent_stats.get(&opponent_for_stats.id) {
-                                                    view! {
-                                                        <span class="text-sm text-gray-500 ml-2">
-                                                            "(" {stats.wins} "-" {stats.losses} ")"
-                                                        </span>
-                                                    }.into_any()
-                                                } else {
-                                                    view! {
-                                                        <span class="text-sm text-gray-500 ml-2">"(0-0)"</span>
-                                                    }.into_any()
-                                                }
-                                            } else {
-                                                view! {
-                                                    <span class="text-sm text-gray-500 ml-2">"(0-0)"</span>
-                                                }.into_any()
-                                            }
-                                        }}
-                                    </div>
-                                    <div class="flex gap-2">
+                <h2 class="text-2xl font-bold mb-4">"Opponents"</h2>
+                <div class="flex flex-col gap-2">
+                    <For
+                        each=move || opponents.get()
+                        key=|opponent| opponent.id.clone()
+                        children=move |opponent: Opponent| {
+                            let opponent_id = opponent.id.clone();
+                            let opponent_stats = create_memo(move |_| {
+                                opponents_trigger.get();  // Force recalculation when trigger changes
+                                if let Some(user_data) = load_user_data() {
+                                    if let Some(stats) = user_data.opponent_stats.get(&opponent_id) {
+                                        (stats.wins, stats.losses)
+                                    } else {
+                                        (0, 0)
+                                    }
+                                } else {
+                                    (0, 0)
+                                }
+                            });
+                            
+                            view! {
+                                <div class="flex items-center justify-between p-2 bg-slate-800 rounded">
+                                <div class="flex items-center gap-2 text-gray-300">
+                                    <span class="w-4 h-4 rounded-full bg-blue-600 flex items-center justify-center text-xs">
+                                        {if matches!(opponent.opponent_type, OpponentType::Computer) { "C" } else { "H" }}
+                                    </span>
+                                    {opponent.name.clone()}
+                                    <span class="text-sm text-gray-500 ml-2">
+                                        "(" {move || opponent_stats.get().0} "-" {move || opponent_stats.get().1} ")"
+                                    </span>
+                                </div>
+                                        <div class="flex gap-2">
                                         {
                                             let delete_opponent = opponent.clone();
                                             view! {
@@ -377,12 +374,18 @@ fn App() -> impl IntoView {
                 </div>
             })}
         </div>
-        {move || show_game.get().map(|(opponent, speed)| view! {  // Change this line to destructure both values
+        {move || show_game.get().map(|(opponent, speed)| view! {  
             <Game
                 player_name=name.get()
                 opponent=opponent
-                speed=speed  // Add this line
-                on_exit=move || set_show_game.set(None)
+                speed=speed  
+                on_exit=move || {
+                    opponents_trigger.update(|v| *v = !*v);  
+                    set_show_game.set(None)
+                }
+                on_stats_update=move || {
+                    opponents_trigger.update(|v| *v = !*v);
+                }
             />
         })}
         {move || show_profile.get().then(|| view! {