Add draw func

klydra · Feb 15, 2023 · db58e72 · db58e72
1 parent ab4ced2
commit db58e72
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 5 deletions.
diff --git a/server/main.go b/server/main.go
@@ -624,6 +624,10 @@ func main() {
 				return apis.NewApiError(500, "Couldn't get game card stack.", err)
 			}
 
+			if game.GetString("live") != user.GetString("name") {
+				return apis.NewBadRequestError("It's not your turn.", nil)
+			}
+
 			if stack[len(stack)-1][0] == 'p' {
 				// Drawing 2 * n cards
 				if rules.Stack2 {

diff --git a/src/pages/Game.tsx b/src/pages/Game.tsx
@@ -8,6 +8,7 @@ import {
   API_NOTIFICATION_GAME_TIMEOUT,
   API_NOTIFICATION_NOTICE_TIMEOUT,
   ensureRegistered,
+  gameDraw,
   gamePlay,
   joinGame,
   sessionOngoing,
@@ -26,6 +27,10 @@ interface GameProps {
 interface GameState {
   game: GameType | undefined;
   player: PlayerType | undefined;
+  animation: {
+    appear: boolean;
+    disappear: boolean;
+  };
 }
 
 export default class Game extends Component<GameProps, GameState> {
@@ -37,6 +42,10 @@ export default class Game extends Component<GameProps, GameState> {
     this.state = {
       game: undefined,
       player: undefined,
+      animation: {
+        appear: false,
+        disappear: false,
+      },
     };
 
     this.pocketbase = new PocketBase(API_HOST);
@@ -118,6 +127,36 @@ export default class Game extends Component<GameProps, GameState> {
     await this.pocketbase.collection("games").unsubscribe(this.props.game);
   }
 
+  componentDidUpdate(
+    _: Readonly<GameProps>,
+    prevState: Readonly<GameState>,
+    __?: any
+  ) {
+    if (
+      prevState.game &&
+      this.state.game &&
+      prevState.game!.stack.length < this.state.game!.stack.length
+    )
+      this.setState({
+        animation: {
+          appear: !this.state.animation.appear,
+          disappear: this.state.animation.disappear,
+        },
+      });
+
+    if (
+      prevState.game &&
+      this.state.game &&
+      prevState.game!.stack.length > this.state.game!.stack.length
+    )
+      this.setState({
+        animation: {
+          appear: this.state.animation.appear,
+          disappear: !this.state.animation.disappear,
+        },
+      });
+  }
+
   render() {
     return (
       <>
@@ -244,18 +283,28 @@ export default class Game extends Component<GameProps, GameState> {
         {/* Draw stack */}
         <div className="fixed flex inset-y-1/2 left-[37.5%] right-[50%] inset-y-[42%] flex justify-center items-center">
           <div
-            className="h-full duration-700 ease-out aria-disabled:scale-[166%] aria-disabled:opacity-0 absolute"
-            aria-disabled={false}
+            className="cursor-pointer h-full absolute z-10"
+            onClick={async () => {
+              const play = await gameDraw();
+              if (play["code"] !== 200) {
+                showNotification({
+                  autoClose: API_NOTIFICATION_GAME_TIMEOUT,
+                  message: play["message"] ?? "An unknown error occurred.",
+                  color: "red",
+                  icon: <PlayArrow />,
+                });
+              }
+            }}
           >
-            <CardBack />
+            <DisappearCard key={this.state.animation.disappear.toString()} />
           </div>
           <CardBack />
         </div>
 
-        {/* Play stack  */}
+        {/* Play stack */}
         <div className="fixed flex inset-y-1/2 right-[37.5%] left-[50%] inset-y-[42%] flex justify-center items-center">
           <AppearCard
-            key={this.state.game!.stack[this.state.game!.stack.length - 1]}
+            key={this.state.animation.appear.toString()}
             card={codeToType(
               this.state.game!.stack[this.state.game!.stack.length - 1]
             )}
@@ -276,6 +325,20 @@ export default class Game extends Component<GameProps, GameState> {
   }
 }
 
+function DisappearCard() {
+  const [disappear, setDisappear] = useState(false);
+  setTimeout(() => setDisappear(true), 100);
+
+  return (
+    <div
+      className="h-full duration-700 ease-out aria-disabled:scale-[125%] aria-disabled:opacity-0"
+      aria-disabled={disappear}
+    >
+      <CardBack />
+    </div>
+  );
+}
+
 function AppearCard(props: { card: CardType }) {
   const [appear, setAppear] = useState(true);
   setTimeout(() => setAppear(false), 100);