From fccc2a4edc1bdc4f74c0cc852a900c210b843617 Mon Sep 17 00:00:00 2001 From: mudabbir-ahmad Date: Tue, 18 Mar 2025 21:08:21 +0000 Subject: [PATCH] Added all map clue buttons and corrected positioning and render method --- app/(main)/admin/page.js | 49 +++++++++++++++---------------- app/(main)/clue/[clueId]/page.js | 21 +++++++++++++ app/(main)/map/page.js | 12 ++++++++ clue_hunt.db | Bin 155648 -> 155648 bytes 4 files changed, 57 insertions(+), 25 deletions(-) diff --git a/app/(main)/admin/page.js b/app/(main)/admin/page.js index 632ef9e..3fdf192 100644 --- a/app/(main)/admin/page.js +++ b/app/(main)/admin/page.js @@ -38,7 +38,6 @@ export default function AdminDashboard() { if (existingTimer.endTime) { setTimerEndTime(new Date(existingTimer.endTime).getTime()); } - setTimerDisplay(formatElapsedTime(existingTimer.startTime)); } // Then, fetch fresh data from the server to ensure we're in sync @@ -71,16 +70,12 @@ export default function AdminDashboard() { } else { setTimerEndTime(null); } - - // Immediately display the current elapsed time - setTimerDisplay(formatElapsedTime(data.startTime)); } else { // Only clear local timer if server explicitly says timer is not active // This prevents clearing a valid timer if the server response is ambiguous if (data.active === false && data.timerActive === false) { clearHuntTimer(); setTimerActive(false); - setTimerDisplay("--:--:--"); } } @@ -116,41 +111,45 @@ export default function AdminDashboard() { } }, [session, status, router]); - // Timer update effect - use the centralized timer service + // Create a separate effect for updating the timer display useEffect(() => { - // Clear any existing interval first to prevent multiple intervals - if (timerIntervalRef.current) { - clearInterval(timerIntervalRef.current); - timerIntervalRef.current = null; - } + let timerId; - if (timerActive) { - // Start a new interval for timer updates - timerIntervalRef.current = setInterval(() => { + // Initialize timer + async function initializeTimer() { + // Set up timer updates + const updateTimer = () => { const timerData = getHuntTimer(); - if (timerData && timerData.startTime) { - // Format the elapsed time using the centralized service - const formattedTime = formatElapsedTime(timerData.startTime); - setTimerDisplay(formattedTime); - + setTimerDisplay(formatElapsedTime(timerData.startTime)); + // If there's an end time, check if we've reached it if (timerEndTime && Date.now() >= timerEndTime) { stopTimer(); } } else { - // If timer data is suddenly gone, try to reload from server - fetchTimerStatusFromServer(); + setTimerDisplay("--:--:--"); } - }, 1000); + }; + + // Initial update + updateTimer(); + + // Update every second + timerId = setInterval(updateTimer, 1000); + } + + // Only initialize timer if the timer is active + if (timerActive) { + initializeTimer(); } else { setTimerDisplay("--:--:--"); } + // Clean up interval on unmount return () => { - if (timerIntervalRef.current) { - clearInterval(timerIntervalRef.current); - timerIntervalRef.current = null; + if (timerId) { + clearInterval(timerId); } }; }, [timerActive, timerEndTime]); diff --git a/app/(main)/clue/[clueId]/page.js b/app/(main)/clue/[clueId]/page.js index 9709f04..61f6726 100644 --- a/app/(main)/clue/[clueId]/page.js +++ b/app/(main)/clue/[clueId]/page.js @@ -1045,6 +1045,27 @@ export default function CluePage({ params }) { text-overflow: ellipsis; padding-left: 5px; } + + .clue-timer { + display: flex; + align-items: center; + justify-content: center; + margin: 10px 0; + padding: 5px 10px; + background-color: rgba(104, 84, 60, 0.1); + border-radius: 5px; + } + + .timer-label { + font-weight: bold; + margin-right: 8px; + color: #68543c; + } + + .timer-value { + font-family: monospace; + font-size: 1.1em; + } `} ); diff --git a/app/(main)/map/page.js b/app/(main)/map/page.js index 7835e76..8f54bd7 100644 --- a/app/(main)/map/page.js +++ b/app/(main)/map/page.js @@ -390,6 +390,18 @@ export default function MapPage() { {renderClueButton(5, { left: "298px", top: "774px" })} {renderClueButton(6, { left: "240px", top: "880px" })} {renderClueButton(7, { left: "355px", top: "960px" })} + {renderClueButton(8, { left: "266px", top: "1037px" })} + {renderClueButton(9, { left: "280px", top: "1175px" })} + {renderClueButton(10, { left: "336px", top: "1303px" })} + {renderClueButton(11, { left: "250px", top: "1390px" })} + {renderClueButton(12, { left: "165px", top: "1485px" })} + {renderClueButton(13, { left: "305px", top: "1530px" })} + {renderClueButton(14, { left: "340px", top: "1650px" })} + {renderClueButton(15, { left: "225px", top: "1725px" })} + {renderClueButton(16, { left: "220px", top: "1820px" })} + {renderClueButton(17, { left: "275px", top: "1885px" })} + {renderClueButton(18, { left: "362px", top: "1917px" })} + {renderClueButton(19, { left: "300px", top: "2040px" })} {/* Additional clue buttons can be added here when needed */} diff --git a/clue_hunt.db b/clue_hunt.db index 670ba507e1ccd3ce63f1300261e613c7e6414841..1848e177d4eed267220f73bed30627f7ae7d0df9 100644 GIT binary patch delta 809 zcmb8tJ5Rz;7{>7y6E3kAD&PeiIvh43eNTIOOQbQnxd<^aF)?w|#SdU&QZ^Ti7`}po zjD&%e*~P)hZ^6RCqHnb)B4@JC(B;=O=ihdxh3>S_ugQz2-9vdXx;%{JXz(1><0KIwL->1i;|sGL6EH7fdJjIazf^lZLWO4q4Gt=$QD-~crkd$Jdpv} zm@q~u)Ua`GE+;1?_+l{JEf+Y3eUsjy!grQ z`5`csl(;VT7ITAZuBU=AY%Qh+>weynC-YWDH`bcjmqD(7f&bZ2_8NLoR?6>7OGQtA a{w}bZK85p@W3v!@^jiOZW>P%M%<^Aa!lJtX delta 211 zcmZoTz}awsbAmMEjfpbOj5jtWINLMYPF`ZK%E-0(l)cpl0T#Zm4EzW9Yxs@%zVhwm z+q>CNp^C5GmW`c3(pXy9I60>@Rly`BNueaQxI`f>zeoWhq6nn|gG`MKj1)N88Tk46 zg^kV3%mRZ42FALErV56ZR)z*vhQ