Reactでテトリスをつくる⑧＿CSSデザイン

見た目を良くする

まず背景を付けた

<div onKeyDown={(e) => {keydown(e)}} tabIndex="0" style={{'backgroundColor': '#0e086dc7','position':'absolute','left':'100','top':'100','width':'350px','height':'600px'}}>
            <Flow disp={disp} colorNum={colorNum}/>
            <Static base={base}/>
        </div>

描画コンポーネントは、カラー番号で、色が分かれるようにした

function Dot(props){
    const color=['transparent','mediumblue','gold','deepskyblue','magenta','lawngreen','','','','gray'][props.colorNum]
    return <div style={{'width': '28px', 'height': '28px', 'backgroundColor':color,'position':'absolute', 'top':props.y,'left':props.x, 'border': '2px ridge #666'}}></div>
}

カラー番号を描画コンポーネントに渡せるようにした

const Static = React.memo(({...props})=> {
    let d = []
    for(let i = 0; i < props.base.length; i++) {
        for(let j = 0; j < props.base[i].length; j++) {
            (props.base[i][j] > 0) ? d.push(<Dot x={j*30} y={i*30} colorNum={props.base[i][j]}/>) : null
        }
    }
    return (
        <>
            {d}
        </>
    )
})

配列の番号で色を変えられるようにした。9が最大値で、9の色はグレー。

const Base=[
    [9,9,9,0,0,0,0,0,0,9,9,9],
    [9,0,0,0,0,0,0,0,0,0,0,9],
    [9,0,0,0,0,0,0,0,0,0,0,9],
    [9,0,0,0,0,0,0,0,0,0,0,9],
    [9,0,0,0,0,0,0,0,0,0,0,9],
    [9,0,0,0,0,0,0,0,0,0,0,9],
    [9,0,0,0,0,0,0,0,0,0,0,9],
    [9,0,0,0,0,0,0,0,0,0,0,9],
    [9,0,0,0,0,0,0,0,0,0,0,9],
    [9,0,0,0,0,0,0,0,0,0,0,9],
    [9,0,0,0,0,0,0,0,0,0,0,9],
    [9,0,0,0,0,0,0,0,0,0,0,9],
    [9,0,0,0,0,0,0,0,0,0,0,9],
    [9,0,0,0,0,0,0,0,0,0,0,9],
    [9,0,0,0,0,0,0,0,0,0,0,9],
    [9,0,0,0,0,0,0,0,0,0,0,9],
    [9,0,0,0,0,0,0,0,0,0,0,9],
    [9,0,0,0,0,0,0,0,0,0,0,9],
    [9,0,0,0,0,0,0,0,0,0,0,9],
    [9,9,9,9,9,9,9,9,9,9,9,9],
]

色番号を管理するuseStateを追加した

    const [colorNum, setColorNum]=useState(Math.floor(Math.random() * 5) + 1)

だんだん、テトリスらしくなってきている。