Reactでテトリスをつくる⑫＿Storybook構築

Storybookでテトリスのカタログ作成

せっかくStorybookを導入したので、テトリミノをカッコよくしようと思い、CSSを色々いじってます。
今回はCSSINJSを使います。
CSSINJSを使うと、CSSをJSで動的に動かせるので、下図のように立体的なミノを製造しやすいです。

Dot.tsx

const colorsArys: Array<any> = [
    [525,525,525],
    [250,100,100],
 ...

export const Dot: React.FC<DotProps> = ({
    colorNum = 0,
    x = 0,
    y = 0,
}) => {
    const c = colorsArys[colorNum]
    const addCSS: React.CSSProperties = {
        borderTopColor   : 'rgb(' + (c[0] - 60) + ',' + (c[1] - 60) + ',' + (c[2] - 60) + ')',
        borderRightColor : 'rgb(' + (c[0] - 40) + ',' + (c[1] - 40) + ',' + (c[2] - 40) + ')',
        borderBottomColor: 'rgb(' + (c[0] - 0)  + ',' + (c[1] - 0)  + ',' + (c[2] - 0)  + ')',
        borderLeftColor  : 'rgb(' + (c[0] - 20) + ',' + (c[1] - 20) + ',' + (c[2] - 20) + ')',
        top : y,
        left: x
    }
    return <div style={{ ...defaultCSS, ...addCSS}}></div>
}

テトリスの市販のゲーム見るとこういうかっこいい形になっているのです。
モダンに、CSSとJSで表現しました。

ATOM