feat: refactor and smooth out movement (#27)

src/App.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 import { io, Socket } from 'socket.io-client';
 import { DefaultEventsMap } from '@socket.io/component-emitter';
 import PunchLine from './PunchLine';
+import getMoveDirection from './getMoveDirection';
 import './App.css';
 
 let socket: Socket<DefaultEventsMap, DefaultEventsMap>;
@@ -136,67 +137,11 @@ function App() {
   };
 
   const move = () => {
-    let dx = 0;
-    let dy = 0;
-    const speed = 2;
-    const diagspd = 1.4;
-
-    const borderCollision = checkBorderCollision();
-    const l = direction.length;
-
-    if (l === 1) {
-      if (direction === 'n' && !borderCollision.has('n')) {
-        dy -= speed;
-      } else if (direction === 's' && !borderCollision.has('s')) {
-        dy += speed;
-      } else if (direction === 'w' && !borderCollision.has('w')) {
-        dx -= speed;
-      } else if (direction === 'e' && !borderCollision.has('e')) {
-        dx += speed;
-      }
-    } else if (l === 2) {
-      if (direction === 'ne' || direction === 'en') {
-        if (borderCollision.has('n') && !borderCollision.has('e')) {
-          dx += speed;
-        } else if (borderCollision.has('e') && !borderCollision.has('n')) {
-          dy -= speed;
-        } else if (!borderCollision.has('n') && !borderCollision.has('e')) {
-          dy -= diagspd;
-          dx += diagspd;
-        }
-      } else if (direction === 'nw' || direction === 'wn') {
-        if (borderCollision.has('n') && !borderCollision.has('w')) {
-          dx -= speed;
-        } else if (borderCollision.has('w') && !borderCollision.has('n')) {
-          dy -= speed;
-        } else if (!borderCollision.has('n') && !borderCollision.has('w')) {
-          dy -= diagspd;
-          dx -= diagspd;
-        }
-      } else if (direction === 'se' || direction === 'es') {
-        if (borderCollision.has('s') && !borderCollision.has('e')) {
-          dx += speed;
-        } else if (borderCollision.has('e') && !borderCollision.has('s')) {
-          dy += speed;
-        } else if (!borderCollision.has('s') && !borderCollision.has('e')) {
-          dy += diagspd;
-          dx += diagspd;
-        }
-      } else if (direction === 'sw' || direction === 'ws') {
-        if (borderCollision.has('s') && !borderCollision.has('w')) {
-          dx -= speed;
-        } else if (borderCollision.has('w') && !borderCollision.has('s')) {
-          dy += speed;
-        } else if (!borderCollision.has('s') && !borderCollision.has('w')) {
-          dy += diagspd;
-          dx -= diagspd;
-        }
-      }
-    } else if (l === 0 || l > 2) {
+    const [dx, dy] = getMoveDirection(direction, checkBorderCollision());
+    if (direction.length === 0) {
       setMoving(false);
       return;
     }
-
     updatePlayerPosition(dx, dy);
   };
 

src/PunchLine.tsx

@@ -8,10 +8,6 @@ interface Props {
 }
 
 function PunchLine({ punchDirection, posX, posY, color }: Props) {
-  useEffect(() => {
-    console.log({ punchDirection });
-  }, [punchDirection]);
-
   const punchDirectionMap = {
     n: { top: posY - 10, left: posX },
     e: { top: posY + 11, left: posX + 21, transform: 'rotate(90deg)' },

src/getMoveDirection.ts

@@ -0,0 +1,99 @@
+const getMoveDirection = (direction: string, border: Set<string>) => {
+  let dx = 0,
+    dy = 0;
+  const speed = 2;
+  const diagspd = 1.4;
+
+  const n = () => !border.has('n') && (dy -= speed);
+  const s = () => !border.has('s') && (dy += speed);
+  const e = () => !border.has('e') && (dx += speed);
+  const w = () => !border.has('w') && (dx -= speed);
+  const ne = () => {
+    if (border.has('n') && !border.has('e')) {
+      dx += speed;
+    } else if (border.has('e') && !border.has('n')) {
+      dy -= speed;
+    } else if (!border.has('n') && !border.has('e')) {
+      dy -= diagspd;
+      dx += diagspd;
+    }
+  };
+  const nw = () => {
+    if (border.has('n') && !border.has('w')) {
+      dx -= speed;
+    } else if (border.has('w') && !border.has('n')) {
+      dy -= speed;
+    } else if (!border.has('n') && !border.has('w')) {
+      dy -= diagspd;
+      dx -= diagspd;
+    }
+  };
+  const se = () => {
+    if (border.has('s') && !border.has('e')) {
+      dx += speed;
+    } else if (border.has('e') && !border.has('s')) {
+      dy += speed;
+    } else if (!border.has('s') && !border.has('e')) {
+      dy += diagspd;
+      dx += diagspd;
+    }
+  };
+  const sw = () => {
+    if (border.has('s') && !border.has('w')) {
+      dx -= speed;
+    } else if (border.has('w') && !border.has('s')) {
+      dy += speed;
+    } else if (!border.has('s') && !border.has('w')) {
+      dy += diagspd;
+      dx -= diagspd;
+    }
+  };
+
+  // prefer hardcoded directions to get constant lookup
+  const moveMap = {
+    n: n,
+    s: s,
+    e: e,
+    w: w,
+    ne: ne,
+    en: ne,
+    se: se,
+    es: se,
+    sw: sw,
+    ws: sw,
+    nw: nw,
+    wn: nw,
+    nse: e,
+    nsw: w,
+    nes: e,
+    new: n,
+    nws: w,
+    nwe: n,
+    ens: e,
+    enw: n,
+    esn: e,
+    esw: s,
+    ewn: n,
+    ews: s,
+    sne: e,
+    snw: w,
+    sen: e,
+    sew: s,
+    swn: w,
+    swe: s,
+    wne: n,
+    wns: w,
+    wse: s,
+    wsn: w,
+    wen: n,
+    wes: s,
+  };
+
+  if (moveMap.hasOwnProperty(direction)) {
+    moveMap[direction as keyof typeof moveMap]();
+  }
+
+  return [dx, dy];
+};
+
+export default getMoveDirection;