Meme (#1089)

* meme

* fix stripe default_payment_method removed bug

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>
+ );
+}

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} />