80 lines
2.6 KiB
JavaScript
80 lines
2.6 KiB
JavaScript
import './Board.css';
|
|
import React from 'react';
|
|
|
|
import { WhiteStone, BlackStone } from '../Stone'
|
|
|
|
export default function Board() {
|
|
|
|
return <div className='board'>
|
|
<div className='row'>
|
|
<BlackTile/> <WhiteTile id={0} stone={WhiteStone()} />
|
|
<BlackTile/> <WhiteTile id={1} stone={WhiteStone()} />
|
|
<BlackTile/> <WhiteTile id={2} stone={WhiteStone()} />
|
|
<BlackTile/> <WhiteTile id={4} stone={WhiteStone()} />
|
|
</div>
|
|
<div className='row'>
|
|
<WhiteTile id={5} stone={WhiteStone()} /> <BlackTile/>
|
|
<WhiteTile id={6} stone={WhiteStone()} /> <BlackTile/>
|
|
<WhiteTile id={7} stone={WhiteStone()} /> <BlackTile/>
|
|
<WhiteTile id={8} stone={WhiteStone()} /> <BlackTile/>
|
|
</div>
|
|
<div className='row'>
|
|
<BlackTile/> <WhiteTile id={ 9} stone={WhiteStone()} />
|
|
<BlackTile/> <WhiteTile id={10} stone={WhiteStone()} />
|
|
<BlackTile/> <WhiteTile id={11} stone={WhiteStone()} />
|
|
<BlackTile/> <WhiteTile id={12} stone={WhiteStone()} />
|
|
</div>
|
|
<div className='row'>
|
|
<WhiteTile id={13} stone={null} /> <BlackTile/>
|
|
<WhiteTile id={14} stone={null} /> <BlackTile/>
|
|
<WhiteTile id={15} stone={null} /> <BlackTile/>
|
|
<WhiteTile id={16} stone={null} /> <BlackTile/>
|
|
</div>
|
|
|
|
<div className='row'>
|
|
<BlackTile/> <WhiteTile id={17} stone={null} />
|
|
<BlackTile/> <WhiteTile id={18} stone={null} />
|
|
<BlackTile/> <WhiteTile id={19} stone={null} />
|
|
<BlackTile/> <WhiteTile id={20} stone={null} />
|
|
</div>
|
|
<div className='row'>
|
|
<WhiteTile id={21} stone={BlackStone()} /> <BlackTile/>
|
|
<WhiteTile id={22} stone={BlackStone()} /> <BlackTile/>
|
|
<WhiteTile id={23} stone={BlackStone()} /> <BlackTile/>
|
|
<WhiteTile id={24} stone={BlackStone()} /> <BlackTile/>
|
|
</div>
|
|
<div className='row'>
|
|
<BlackTile/> <WhiteTile id={25} stone={BlackStone()} />
|
|
<BlackTile/> <WhiteTile id={26} stone={BlackStone()} />
|
|
<BlackTile/> <WhiteTile id={27} stone={BlackStone()} />
|
|
<BlackTile/> <WhiteTile id={28} stone={BlackStone()} />
|
|
</div>
|
|
<div className='row'>
|
|
<WhiteTile id={29} stone={BlackStone()} /> <BlackTile/>
|
|
<WhiteTile id={30} stone={BlackStone()} /> <BlackTile/>
|
|
<WhiteTile id={31} stone={BlackStone()} /> <BlackTile/>
|
|
<WhiteTile id={32} stone={BlackStone()} /> <BlackTile/>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
function WhiteTile({ id, stone }) {
|
|
|
|
return (
|
|
<div
|
|
className='tile white'
|
|
onClick={() => handleClick(id)}
|
|
>
|
|
{stone}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function BlackTile() {
|
|
return <div className='tile black'/>
|
|
}
|
|
|
|
function handleClick(i) {
|
|
console.log("click", i)
|
|
}
|