feat: 2048

Author: Chreem

.firebaserc

@@ -1,9 +1,13 @@
 .vscode
 .idea
-.firebase
 .DS_Store
 
+.firebase
+.firebaserc
+firebase.json
+
 node_modules
 package-lock.json
 public
 dist
+

.gitignore

@@ -0,0 +1,87 @@
+import * as React from 'react'
+import {ComponentType, useEffect, useState} from "react";
+import {TouchEvent, useCallback} from "react";
+
+
+interface DirectControlPropsType {
+  directKey?: string[],
+  fireKey?: string[],
+
+
+  onTouchStart?(e?: TouchEvent): void;
+  onTouchMove?(e?: TouchEvent): void;
+  onTouchEnd?(e?: TouchEvent): void;
+}
+
+
+const NORMAL = 'normal';
+export default function <P = any>(Component: ComponentType<{ direct: string, fire: boolean }>) {
+  let start = {x: 0, y: 0};
+  return ({directKey, fireKey, ...props}: P & DirectControlPropsType) => {
+    directKey = directKey || ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+    fireKey = fireKey || [' '];
+    const [pad, setPadState] = useState(NORMAL);
+    const [fire, setFireState] = useState(false);
+
+    /**
+     * 键盘按键
+     */
+    useEffect(() => {
+      const keys = [];
+      const move = (direction: string) => {
+        setPadState(direction);
+        if (keys.indexOf(direction) < 0) keys.push(direction);
+      };
+
+      const handleKeyDown = (e: KeyboardEvent) => {
+        if (directKey.indexOf(e.key) >= 0) return move(e.key);
+        if (fireKey.indexOf(e.key) >= 0) return setFireState(true);
+      };
+
+      const handleKeyUp = (e: KeyboardEvent) => {
+        if (directKey.indexOf(e.key) >= 0) {
+          const i = keys.indexOf(e.key);
+          if (i >= 0) keys.splice(i, 1);
+          if (keys.length <= 0) setPadState(NORMAL);
+          else setPadState(keys[keys.length - 1]);
+          return;
+        }
+        if (fireKey.indexOf(e.key) >= 0) return setFireState(false);
+      };
+
+
+      window.addEventListener('keydown', handleKeyDown);
+      window.addEventListener('keyup', handleKeyUp);
+      return () => {
+        window.removeEventListener('keydown', handleKeyDown);
+        window.removeEventListener('keyup', handleKeyUp);
+      };
+    }, []);
+
+    /**
+     * 手势移动
+     */
+    const handleTouchStart = useCallback(({touches}: TouchEvent) => {
+      const {clientX: x, clientY: y} = touches[0];
+      start = {x, y};
+    }, []);
+    const handleTouchMove = useCallback(({touches}: TouchEvent) => {
+      const {x, y} = start;
+      const {clientX, clientY} = touches[0];
+      const moveX = clientX - x;
+      const moveY = clientY - y;
+      if (Math.abs(moveX) <= 30 && Math.abs(moveY) <= 30) return setPadState('normal');
+      if (Math.abs(moveX) > Math.abs(moveY)) setPadState(moveX > 0 ? 'ArrowRight' : 'ArrowLeft');
+      else setPadState(moveY > 0 ? 'ArrowDown' : 'ArrowUp');
+    }, []);
+    const handleTouchEnd = useCallback(() => setPadState('normal'), []);
+
+
+    return <Component {...props}
+                      direct={pad}
+                      fire={fire}
+                      onTouchStart={handleTouchStart}
+                      onTouchMove={handleTouchMove}
+                      onTouchEnd={handleTouchEnd}/>;
+  }
+};

components/hoc/DirectControl.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react'
+import './style.less'
+import {TouchEvent, useCallback, useEffect, useState} from "react";
+import DirectControl from '~components/hoc/DirectControl'
+
+
+interface GamepadPropsType {
+  direct?: string,
+  fire?: boolean,
+  onDirectChange?(d: string): void;
+  onConfirm?(c: boolean): void;
+}
+
+
+const Gamepad = ({direct, fire, onDirectChange, onConfirm, ...other}: GamepadPropsType) => {
+  useEffect(() => onDirectChange && onDirectChange(direct), [direct]);
+  useEffect(() => onConfirm && onConfirm(fire), [fire]);
+
+  return <div className="game-pad">
+    <div className="bottom"/>
+    <div className="circle-out"/>
+    <div className="circle-in"/>
+    <div className="rocker-bottom"/>
+    <div className={`rocker ${direct}`}>
+      <div className="m"/>
+      <div className="t" {...other}/>
+    </div>
+    <div className={`button${fire ? ' active' : ''}`}/>
+  </div>
+};
+
+export default DirectControl<GamepadPropsType>(Gamepad);

components/normal/game-pad/index.tsx

@@ -0,0 +1,82 @@
+.set-side(@side, @color) {
+  position: absolute;
+  width: @side;
+  height: @side;
+  border-radius: @side;
+  background-color: @color;
+}
+
+.game-pad {
+  position: relative;
+  width: 4em;
+  height: 4em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .bottom {
+    .set-side(100%, #a8aeb4);
+    border-radius: 0.5em;
+    box-shadow: 0.05em 0.05em 0.1em #aaaaaa;
+  }
+  .circle-out { .set-side(2.8em, #516471); }
+  .circle-in { .set-side(2em, #36424b); }
+  .button {
+    .set-side(0.5em, #da3732);
+    top: 3.2em;
+    left: 0.4em;
+    box-shadow: 0 0.05em 0.05em #a81510;
+    &.active {
+      top: 3.25em;
+      box-shadow: 0 0.01em 0.01em #a81510;
+    }
+  }
+
+  @rocker-side: 0.5em;
+  .rocker-bottom { .set-side(@rocker-side, #ffffff); }
+  .rocker {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .m {
+      position: absolute;
+      width: @rocker-side;
+      height: 3*@rocker-side;
+      background-color: #ffffff;
+    }
+    .t {
+      .set-side(4*@rocker-side, #da3732);
+      box-shadow: 0.01em 0.01em 0.1em 0.01em #000000;
+    }
+  }
+
+  @move-side: @rocker-side*2.5;
+  .rocker.ArrowUp, .rocker.w {
+    .t {top: -@move-side;}
+  }
+  .rocker.ArrowDown, .rocker.s {
+    .t {bottom: -@move-side;}
+  }
+  .rocker.ArrowLeft, .rocker.a {
+    .t {left: -@move-side;}
+  }
+  .rocker.ArrowRight, .rocker.d {
+    .t {right: -@move-side;}
+  }
+
+  .rocker.ArrowUp, .rocker.w {
+    .m {top: @rocker-side;}
+  }
+  .rocker.ArrowDown, .rocker.s {
+    .m {bottom: @rocker-side;}
+  }
+  .rocker.ArrowLeft, .rocker.a {
+    .m {left: 2*@rocker-side;transform: rotate(90deg);}
+  }
+  .rocker.ArrowRight, .rocker.d {
+    .m {right: 2*@rocker-side;transform: rotate(90deg);}
+  }
+}

components/normal/game-pad/style.less

@@ -0,0 +1,25 @@
+import * as React from 'react'
+import {HTMLProps, ReactElement, useEffect, useState} from "react";
+import './style.less'
+
+
+interface OverlayPropsType extends HTMLProps<HTMLDivElement> {
+  active?: boolean;
+  defaultActive?: boolean;
+  children?: string | ReactElement | ReactElement[],
+}
+
+
+export default ({className, active, defaultActive, children, ...other}: OverlayPropsType) => {
+  const [__active, setActive] = useState(defaultActive);
+  useEffect(() => {
+    if (typeof active === 'undefined') return;
+    setActive(active);
+  }, [active]);
+
+
+  return <div className={`overlay ${__active ? 'active' : ''} ${className || ''}`}
+              {...other}>
+    {children}
+  </div>
+}

components/normal/overlay/index.tsx

@@ -0,0 +1,18 @@
+.overlay {
+  position: absolute;
+  z-index: -1;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, .6);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  font-size: 2em;
+  transition: all .3s linear;
+}
+.overlay.active {
+  z-index: 999;
+  opacity: 1;
+}