storybook-day/components/BlocksScene/TetrisBlock.tsx at main · storybookjs/storybook-day · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
import { forwardRef, useMemo } from 'react';
import * as THREE from 'three';
import { Extrude } from '@react-three/drei';
import { materials } from './store';

export const SIDE = 0.75;
export const EXTRUDE_SETTINGS = {
  steps: 2,
  depth: SIDE * 0.75,
  bevelEnabled: false
};

const TYPES = {
  I: () => {
    const _shape = new THREE.Shape();

    _shape.moveTo(0, 0);
    _shape.lineTo(3 * SIDE, 0);
    _shape.lineTo(3 * SIDE, SIDE);
    _shape.lineTo(0, SIDE);

    return _shape;
  },
  L: () => {
    const _shape = new THREE.Shape();

    _shape.moveTo(0, 0);
    _shape.lineTo(SIDE * 2, 0);
    _shape.lineTo(SIDE * 2, SIDE);
    _shape.lineTo(SIDE, SIDE);
    _shape.lineTo(SIDE, SIDE * 3);
    _shape.lineTo(0, SIDE * 3);

    return _shape;
  },
  O: () => {
    const _shape = new THREE.Shape();

    _shape.moveTo(0, 0);
    _shape.lineTo(SIDE, 0);
    _shape.lineTo(SIDE, SIDE);
    _shape.lineTo(0, SIDE);

    return _shape;
  },
  T: () => {
    const _shape = new THREE.Shape();

    _shape.moveTo(0, 0);
    _shape.lineTo(SIDE, 0);
    _shape.lineTo(SIDE, SIDE * 3);
    _shape.lineTo(0, SIDE * 3);
    _shape.lineTo(0, SIDE * 2);
    _shape.lineTo(-SIDE, SIDE * 2);
    _shape.lineTo(-SIDE, SIDE);
    _shape.lineTo(0, SIDE);

    return _shape;
  },
  Z: () => {
    const _shape = new THREE.Shape();

    _shape.moveTo(0, 0);
    _shape.lineTo(SIDE, 0);
    _shape.lineTo(SIDE, SIDE * 2);
    _shape.lineTo(0, SIDE * 2);
    _shape.lineTo(0, SIDE * 3);
    _shape.lineTo(-SIDE, SIDE * 3);
    _shape.lineTo(-SIDE, SIDE);
    _shape.lineTo(0, SIDE);

    return _shape;
  }
} as const;

export type TetrisBlockType = keyof typeof TYPES;

interface TetrisBlockProps {
  type: TetrisBlockType;
  color: string;
}

export const TetrisBlock = forwardRef<THREE.Mesh, TetrisBlockProps>(
  ({ type, color, ...props }, ref) => {
    const shape = useMemo(() => TYPES[type](), [type]);
    return (
      <Extrude args={[shape, EXTRUDE_SETTINGS]} ref={ref} {...props} material={materials[color]} />
    );
  }
);

export const tetrisBlockTypes = Object.keys(TYPES) as TetrisBlockType[];