add shake effect

im6 · Sep 28, 2023 · 568ef05 · 568ef05
1 parent bdb31b7
commit 568ef05
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 8 deletions.
diff --git a/docs/bundle.js b/docs/bundle.js
diff --git a/package.json b/package.json
@@ -15,9 +15,11 @@
   },
   "homepage": "https://github.com/im6/wordle#readme",
   "dependencies": {
+    "@types/animejs": "^3.1.8",
     "@types/jest": "^29.0.3",
     "@typescript-eslint/eslint-plugin": "^5.38.0",
     "@typescript-eslint/parser": "^5.38.0",
+    "animejs": "^3.2.1",
     "css-loader": "^6.7.1",
     "dom-confetti": "^0.2.2",
     "eslint": "^8.23.1",

diff --git a/src/helper.spec.ts b/src/helper.spec.ts
@@ -1,4 +1,9 @@
-import { isValidWord, wordClosure, allowEngChar } from './helper';
+import {
+  isValidWord,
+  wordClosure,
+  allowEngChar,
+  getShakeFrame,
+} from './helper';
 
 describe('helpers', () => {
   test('isValidWord', () => {
@@ -12,4 +17,7 @@ describe('helpers', () => {
   test('allowEngChar', () => {
     expect(allowEngChar('123')).toBe(false);
   });
+  test('getShakeFrame', () => {
+    expect(getShakeFrame(8)).toHaveLength(7);
+  });
 });
diff --git a/src/helper.ts b/src/helper.ts
@@ -27,3 +27,21 @@ export const wordClosure = () => {
       }),
   };
 };
+
+export const getShakeFrame = (full: number) => {
+  let amplitude = full;
+  const frames = [];
+  while (amplitude > 1) {
+    frames.push({
+      value: amplitude,
+    });
+    frames.push({
+      value: -amplitude,
+    });
+    amplitude /= 2;
+  }
+  frames.push({
+    value: 0,
+  });
+  return frames;
+};
diff --git a/src/index.ts b/src/index.ts
@@ -1,18 +1,29 @@
 import './style.less';
+import anime from 'animejs/lib/anime.es.js';
 import { Game, GameStatus } from './typing/interface';
 import { startGame$ } from './observables';
 import { render } from './view';
 import { confetti } from 'dom-confetti';
 import { confettiDuration } from './constant';
+import { getShakeFrame } from './helper';
 
 const appDom = document.getElementById('app');
 const redTextDom = document.getElementById('redText');
 const greenTextDom = document.getElementById('greenText');
 
 const subscription = startGame$().subscribe((a: Game) => {
   render(appDom, a);
-  redTextDom.innerText =
-    a.gameStatus === GameStatus.Error ? 'This is not a valid word' : '';
+  if (a.gameStatus === GameStatus.Error) {
+    redTextDom.innerText = a.bottomMessage;
+    anime({
+      targets: `#app > ul:nth-child(${a.currentIndex + 1})`,
+      easing: 'linear',
+      duration: 800,
+      translateX: getShakeFrame(30),
+    });
+  } else {
+    redTextDom.innerText = '';
+  }
   if (a.gameStatus === GameStatus.Success) {
     subscription.unsubscribe();
     greenTextDom.innerText = a.bottomMessage;

diff --git a/src/reducer.ts b/src/reducer.ts
@@ -39,11 +39,15 @@ const createReducer =
           return {
             ...g,
             gameStatus: GameStatus.Error,
+            bottomMessage: 'Not in word list',
           };
         }
       } else {
-        // todo: some shake effect
-        return g;
+        return {
+          ...g,
+          gameStatus: GameStatus.Error,
+          bottomMessage: 'Not eonugh letters',
+        };
       }
     } else if (newKey === 'backspace') {
       if (currentWord.length > 0) {
@@ -55,7 +59,10 @@ const createReducer =
           gameStatus: GameStatus.Pending,
         };
       } else {
-        return g;
+        return {
+          ...g,
+          gameStatus: GameStatus.Pending,
+        };
       }
     } else {
       if (currentWord.length < wordLen) {
@@ -64,6 +71,7 @@ const createReducer =
         return {
           ...g,
           data: newData,
+          gameStatus: GameStatus.Pending,
         };
       } else {
         return g;

diff --git a/src/style.less b/src/style.less
@@ -40,9 +40,10 @@
     font-size: 2.1em;
     border: 1px solid #d5d5d5;
     border-radius: 5px;
-    text-align: center;
     display: inline-block;
     vertical-align: middle;
+    text-align: center;
+    text-transform: uppercase;
   }
 }
 

diff --git a/yarn.lock b/yarn.lock
@@ -648,6 +648,11 @@
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
   integrity sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==
 
+"@types/animejs@^3.1.8":
+  version "3.1.8"
+  resolved "https://registry.yarnpkg.com/@types/animejs/-/animejs-3.1.8.tgz#524203d7b3cf2ca7329aa917a11a0fdc5f2e28bb"
+  integrity sha512-jBMAq/l14WKPrKGoSbeVBqT94BOwikQ6V3F63K/rduUE/HE/zQ6qFEhUoISyUm+Yg7qdRYbrToJ04mKHRtybtw==
+
 "@types/babel__core@^7.1.14":
   version "7.1.19"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.19.tgz#7b497495b7d1b4812bdb9d02804d0576f43ee460"
@@ -1212,6 +1217,11 @@ ajv@^8.0.0, ajv@^8.8.0:
     require-from-string "^2.0.2"
     uri-js "^4.2.2"
 
+animejs@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/animejs/-/animejs-3.2.1.tgz#de9fe2e792f44a777a7fdf6ae160e26604b0cdda"
+  integrity sha512-sWno3ugFryK5nhiDm/2BKeFCpZv7vzerWUcUPyAZLDhMek3+S/p418ldZJbJXo5ZUOpfm2kP2XRO4NJcULMy9A==
+
 ansi-escapes@^4.2.1:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz#6b2291d1db7d98b6521d5f1efa42d0f3a9feb65e"