From 49e8e9fa367c6e6576545c27b276dd62e452e9dd Mon Sep 17 00:00:00 2001
From: NoeBerdoz <berdoznoe@gmail.com>
Date: Sun, 13 Apr 2025 04:31:40 +0200
Subject: [PATCH] Add gameover modal and handle different status correctly

---
 frontend/src/index.html | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/frontend/src/index.html b/frontend/src/index.html
index 3471f52..c4f0b5a 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -175,7 +175,7 @@
                                 x-text="gameData?.session_id || 'N/A'"></code></p>
                         <p class="mb-1"><strong>Score:</strong> <code x-text="gameData?.score || '0'"></code></p>
                         <p class="mb-1"><strong>Status:</strong> <span class="badge bg-info"
-                                                                       x-text="gameData?.status || 'N/A'"></span></p>
+                                                                       x-text="gameData?.status || 'active'"></span></p>
                     </div>
                 </div>
                 <div class="card shadow-sm mb-3">
@@ -227,6 +227,25 @@
                                 All dossiers processed!
                             </div>
                         </template>
+                        <!-- Game Over Modal -->
+                        <template x-if="gameData?.status === 'gameover'">
+                            <div class="modal fade show d-block" tabindex="-1"
+                                 style="background-color: rgba(0,0,0,0.7);" role="dialog" aria-modal="true">
+                                <div class="modal-dialog modal-dialog-centered">
+                                    <div class="modal-content text-center">
+                                        <div class="modal-header bg-danger text-white">
+                                            <h5 class="modal-title w-100">Game Over</h5>
+                                        </div>
+                                        <div class="modal-body">
+                                            <p class="fs-5">Wrong decision made</p>
+                                            <p class="fs-5">Score: <span x-text="gameData?.score"></span></p>
+                                            <button class="btn btn-primary" @click="startNewGame()">Try Again
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </template>
                     </div>
                 </div>
             </div>