From 3f01f7f791554046b4a0565667ce365f63b1e85c Mon Sep 17 00:00:00 2001
From: Slimaeus <nguyenhongthai28042002@gmail.com>
Date: Sun, 22 Oct 2023 22:35:38 +0700
Subject: [PATCH] feat: Add flip board

---
 app/(basic)/rooms/[id]/Game.tsx | 142 ++++++++++++++++----------------
 1 file changed, 72 insertions(+), 70 deletions(-)

diff --git a/app/(basic)/rooms/[id]/Game.tsx b/app/(basic)/rooms/[id]/Game.tsx
index 84f7cee..cefc799 100644
--- a/app/(basic)/rooms/[id]/Game.tsx
+++ b/app/(basic)/rooms/[id]/Game.tsx
@@ -328,6 +328,77 @@ function Game({ roomCode, accessToken, user }: GameProps) {
         )
     }
 
+    const squares = board.squares.map((row, i) =>
+        row.map((cell, j) => {
+            if (!cell) {
+                return (
+                    <Cell
+                        key={`cell_${i}_${j}`}
+                        id={`${i}_${j}`}
+                        x={i}
+                        y={j}
+                    ></Cell>
+                )
+            }
+
+            if (!isUserTurn) {
+                return (
+                    <Cell
+                        key={`cell_${i}_${j}`}
+                        id={`${i}_${j}`}
+                        x={i}
+                        y={j}
+                    >
+                        <Piece
+                            id={cell.id}
+                            target={cell}
+                            position={cell.coord}
+                            title={'Cant move'}
+                            disabled
+                            draggable={false}
+                        />
+                    </Cell>
+                )
+            }
+
+            if (board.isRedTurn === cell.isRed) {
+                return (
+                    <Cell
+                        key={`cell_${i}_${j}`}
+                        id={`${i}_${j}`}
+                        x={i}
+                        y={j}
+                    >
+                        <DraggablePiece
+                            id={cell.id}
+                            target={cell}
+                            position={cell.coord}
+                            title={'Movable'}
+                        />
+                    </Cell>
+                )
+            }
+
+            return (
+                <Cell
+                    key={`cell_${i}_${j}`}
+                    id={`${i}_${j}`}
+                    x={i}
+                    y={j}
+                >
+                    <Piece
+                        id={cell.id}
+                        target={cell}
+                        position={cell.coord}
+                        title={'Cant move'}
+                        disabled
+                        draggable={false}
+                    />
+                </Cell>
+            )
+        })
+    );
+
     return (
         <DndContext
             onDragStart={handleDragStart}
@@ -363,76 +434,7 @@ function Game({ roomCode, accessToken, user }: GameProps) {
                         </div>
                     </div>
                     <Board>
-                        {board.squares.map((row, i) =>
-                            row.map((cell, j) => {
-                                if (!cell) {
-                                    return (
-                                        <Cell
-                                            key={`cell_${i}_${j}`}
-                                            id={`${i}_${j}`}
-                                            x={i}
-                                            y={j}
-                                        ></Cell>
-                                    )
-                                }
-
-                                if (!isUserTurn) {
-                                    return (
-                                        <Cell
-                                            key={`cell_${i}_${j}`}
-                                            id={`${i}_${j}`}
-                                            x={i}
-                                            y={j}
-                                        >
-                                            <Piece
-                                                id={cell.id}
-                                                target={cell}
-                                                position={cell.coord}
-                                                title={'Cant move'}
-                                                disabled
-                                                draggable={false}
-                                            />
-                                        </Cell>
-                                    )
-                                }
-
-                                if (board.isRedTurn === cell.isRed) {
-                                    return (
-                                        <Cell
-                                            key={`cell_${i}_${j}`}
-                                            id={`${i}_${j}`}
-                                            x={i}
-                                            y={j}
-                                        >
-                                            <DraggablePiece
-                                                id={cell.id}
-                                                target={cell}
-                                                position={cell.coord}
-                                                title={'Movable'}
-                                            />
-                                        </Cell>
-                                    )
-                                }
-
-                                return (
-                                    <Cell
-                                        key={`cell_${i}_${j}`}
-                                        id={`${i}_${j}`}
-                                        x={i}
-                                        y={j}
-                                    >
-                                        <Piece
-                                            id={cell.id}
-                                            target={cell}
-                                            position={cell.coord}
-                                            title={'Cant move'}
-                                            disabled
-                                            draggable={false}
-                                        />
-                                    </Cell>
-                                )
-                            })
-                        )}
+                        {(board.isHostRed && isHost) || (!board.isHostRed && !isHost) ? squares : squares.reverse()}
                     </Board>
                     <div
                         id="right-area"