add error feedbck animation

ttschnz · Apr 24, 2022 · 3b48929 · 3b48929
1 parent 1f7865f
commit 3b48929
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 3 deletions.
diff --git a/src/components/GameField.css b/src/components/GameField.css
@@ -40,3 +40,32 @@
 .GameTile-Editable:not([data-occupied-by="o"]):not([data-occupied-by="x"]):hover {
     background-color: #0000002b;
 }
+
+.GameTile-Error {
+    background-color: #ff9090;
+    animation-name: wiggle;
+    animation-duration: 0.2s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    transition: none;
+    transform-origin: bottom center;
+}
+
+/* css wiggle animation */
+@keyframes wiggle {
+    0% {
+        transform: rotate(0deg);
+    }
+    25% {
+        transform: rotate(5deg);
+    }
+    50% {
+        transform: rotate(0deg);
+    }
+    75% {
+        transform: rotate(-5deg);
+    }
+    100% {
+        transform: rotate(0deg);
+    }
+}
diff --git a/src/components/GameField.tsx b/src/components/GameField.tsx
@@ -33,7 +33,8 @@ class GameTile extends React.Component<{
             <div
                 className={classNames(
                     "GameTile",
-                    this.props.editable && "GameTile-Editable"
+                    this.props.editable && "GameTile-Editable",
+                    this.props.error && "GameTile-Error"
                 )}
                 // set the occupier of the tile to the dataset
                 data-occupied-by={
@@ -128,7 +129,7 @@ class GameField extends React.Component<
         console.log("making move", index);
         if (this.props.editable) {
             // wait 500ms and then check if the move was successful, if not, show a message to reload the page
-            setTimeout(() => {
+            let errorId = setTimeout(() => {
                 if (
                     this.state.gameField[index] === undefined ||
                     this.state.gameField[index] === 0
@@ -141,6 +142,7 @@ class GameField extends React.Component<
 
             // send the move to the server via the websocket
             let success = await makeMove(this.props.gameId, index);
+            clearTimeout(errorId);
             if (!success) {
                 console.log("failed to make move");
                 // set the error flag for the tile
@@ -177,7 +179,7 @@ class GameField extends React.Component<
                     errors: newErrors,
                 };
             });
-        }, 1000);
+        }, 400);
     }
     getGameTiles(): JSX.Element[] {
         // map the game field to the game tiles and return them