From d59772ad73061fca5f2e9e74bfd8bf33a6342ccc Mon Sep 17 00:00:00 2001
From: Spencer Spenst <spencerspenst@gmail.com>
Date: Sun, 31 Mar 2024 22:25:35 -0700
Subject: [PATCH] Meme (#1089)

* meme

* fix stripe default_payment_method removed bug
---
 components/header/headerPlayer.tsx | 61 ++++++++++++++++++++++++++++++
 components/header/index.tsx        |  9 +++--
 2 files changed, 67 insertions(+), 3 deletions(-)
 create mode 100644 components/header/headerPlayer.tsx

diff --git a/components/header/headerPlayer.tsx b/components/header/headerPlayer.tsx
new file mode 100644
index 000000000..151b2465d
--- /dev/null
+++ b/components/header/headerPlayer.tsx
@@ -0,0 +1,61 @@
+import { directionToVector, getDirectionFromCode } from '@root/constants/direction';
+import Position from '@root/models/position';
+import React, { useEffect, useState } from 'react';
+
+interface HeaderPlayerProps {
+  children: React.ReactNode;
+  size: number;
+}
+
+export default function HeaderPlayer({ children, size }: HeaderPlayerProps) {
+  const [pos, setPos] = useState(new Position(0, 0));
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (
+      window.location.pathname.includes('/level') ||
+      window.location.pathname.includes('/match') ||
+      window.location.pathname.includes('/tutorial') ||
+      window.location.pathname.includes('/test')
+    ) {
+      return;
+    }
+
+    const direction = getDirectionFromCode(event.code);
+
+    if (direction) {
+      setPos(prevPos => prevPos.add(directionToVector(direction)));
+
+      return;
+    }
+
+    if (event.code === 'KeyR') {
+      setPos(new Position(0, 0));
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+
+  return (
+    <div style={{
+      width: size,
+      height: size,
+    }}>
+      <div
+        className='absolute'
+        style={{
+          background: 'rgb(0, 0, 0, 0)',
+          transform: `translate(${pos.x * size}px, ${pos.y * size}px)`,
+          transition: 'transform 0.1s',
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/components/header/index.tsx b/components/header/index.tsx
index 1f143188f..a79febecd 100644
--- a/components/header/index.tsx
+++ b/components/header/index.tsx
@@ -13,6 +13,7 @@ import StyledTooltip from '../page/styledTooltip';
 import Directory from './directory';
 import Dropdown from './dropdown';
 import HeaderControls from './headerControls';
+import HeaderPlayer from './headerPlayer';
 
 interface HeaderProps {
   folders?: LinkInfo[];
@@ -86,9 +87,11 @@ export default function Header({
             </button>
         }
         <div>
-          <Link className='font-bold text-3xl' href='/'>
-            <Image alt='logo' src={game.logo} width='24' height='24' className='h-6 w-6' style={{ minWidth: 24, minHeight: 24 }} />
-          </Link>
+          <HeaderPlayer size={24}>
+            <Link className='font-bold text-3xl' href='/'>
+              <Image alt='logo' src={game.logo} width='24' height='24' className='h-6 w-6' style={{ minWidth: 24, minHeight: 24 }} />
+            </Link>
+          </HeaderPlayer>
         </div>
         <div className='-ml-2'>
           <Directory folders={folders} subtitle={subtitle} title={title} />