Merge pull request #207 from CSSLab/add-resignation-confirmation

Add resignation confirmation modal

Author: kevinjosethomas

src/components/Common/ResignationConfirmModal.tsx

@@ -0,0 +1,46 @@
+interface ResignationConfirmModalProps {
+  isOpen: boolean
+  onClose: () => void
+  onConfirm: () => void
+}
+
+export const ResignationConfirmModal: React.FC<
+  ResignationConfirmModalProps
+> = ({ isOpen, onClose, onConfirm }) => {
+  if (!isOpen) return null
+
+  const handleConfirm = () => {
+    onConfirm()
+    onClose()
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+      <div className="w-full max-w-sm rounded-lg bg-background-1 p-6 shadow-lg">
+        <h3 className="mb-4 text-lg font-semibold text-primary">
+          Confirm Resignation
+        </h3>
+
+        <p className="mb-6 text-sm text-secondary">
+          Are you sure you want to resign this game? This action cannot be
+          undone.
+        </p>
+
+        <div className="flex gap-3">
+          <button
+            onClick={onClose}
+            className="flex-1 rounded border border-white border-opacity-20 px-4 py-2 text-sm text-secondary transition hover:bg-background-2"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleConfirm}
+            className="flex-1 rounded bg-red-600 px-4 py-2 text-sm text-white transition hover:bg-red-700"
+          >
+            Resign
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/Common/index.ts

@@ -17,3 +17,4 @@ export * from './ModalContainer'
 export * from './ContinueAgainstMaia'
 export * from './AnimatedNumber'
 export * from './DownloadModelModal'
+export * from './ResignationConfirmModal'

src/components/Play/HandBrainPlayControls.tsx

@@ -1,8 +1,10 @@
 /* eslint-disable @next/next/no-img-element */
 /* eslint-disable jsx-a11y/alt-text */
+import { useState } from 'react'
 import { PieceSymbol } from 'chess.ts'
 
 import { BaseGame, Color } from 'src/types'
+import { ResignationConfirmModal } from 'src/components'
 
 const pieceTypes: PieceSymbol[] = ['k', 'q', 'r', 'b', 'n', 'p']
 
@@ -52,6 +54,17 @@ export const HandBrainPlayControls: React.FC<Props> = ({
   simulateMaiaTime,
   setSimulateMaiaTime,
 }: Props) => {
+  const [showResignConfirm, setShowResignConfirm] = useState(false)
+
+  const handleResignClick = () => {
+    setShowResignConfirm(true)
+  }
+
+  const handleConfirmResign = () => {
+    if (resign) {
+      resign()
+    }
+  }
   const status = playerActive
     ? isBrain
       ? selectedPiece
@@ -218,7 +231,7 @@ export const HandBrainPlayControls: React.FC<Props> = ({
                 {/* Resign Button - Smaller and Less Prominent */}
                 <div className="flex justify-center">
                   <button
-                    onClick={resign}
+                    onClick={handleResignClick}
                     disabled={!resign || !playerActive}
                     className={`rounded px-3 py-1 text-xs font-medium transition-colors duration-200 ${
                       resign && playerActive
@@ -234,6 +247,12 @@ export const HandBrainPlayControls: React.FC<Props> = ({
           </>
         )}
       </div>
+
+      <ResignationConfirmModal
+        isOpen={showResignConfirm}
+        onClose={() => setShowResignConfirm(false)}
+        onConfirm={handleConfirmResign}
+      />
     </div>
   )
 }

src/components/Play/PlayControls.tsx

@@ -1,4 +1,7 @@
+import { useState } from 'react'
+
 import { BaseGame } from 'src/types'
+import { ResignationConfirmModal } from 'src/components'
 
 interface Props {
   game: BaseGame
@@ -21,6 +24,17 @@ export const PlayControls: React.FC<Props> = ({
   simulateMaiaTime,
   setSimulateMaiaTime,
 }: Props) => {
+  const [showResignConfirm, setShowResignConfirm] = useState(false)
+
+  const handleResignClick = () => {
+    setShowResignConfirm(true)
+  }
+
+  const handleConfirmResign = () => {
+    if (resign) {
+      resign()
+    }
+  }
   return (
     <div className="flex h-full w-full flex-col border-white/40 bg-background-1">
       {gameOver ? (
@@ -112,7 +126,7 @@ export const PlayControls: React.FC<Props> = ({
               {/* Resign Button - Smaller and Less Prominent */}
               <div className="flex justify-center">
                 <button
-                  onClick={resign}
+                  onClick={handleResignClick}
                   disabled={!resign || !playerActive}
                   className={`rounded px-3 py-1 text-xs font-medium transition-colors duration-200 ${
                     resign && playerActive
@@ -127,6 +141,12 @@ export const PlayControls: React.FC<Props> = ({
           </div>
         </>
       )}
+
+      <ResignationConfirmModal
+        isOpen={showResignConfirm}
+        onClose={() => setShowResignConfirm(false)}
+        onConfirm={handleConfirmResign}
+      />
     </div>
   )
 }