s449376/crosski
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

components/Board: implement basic word selection

Browse Source
This commit is contained in:
Artur Tamborski 2020-11-27 19:42:18 +01:00
parent 9001deaf3a
commit bab2e24d7f
2 changed files with 24 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Board/Board.scss
View File

@ -51,6 +51,7 @@ $LetterHoverColor: #d9d9ff;
&:focus { &:focus {
border-color: #8b8be5; border-color: #8b8be5;
outline: none;
} }
} }

42
src/components/Board/Board.tsx
View File

@ -7,7 +7,10 @@ interface IBoardProps {
numCols: number; numCols: number;
} }
type Position = [x: number, y: number]; interface Position {
x: number;
y: number;
}
interface IBoardState { interface IBoardState {
board: string[][]; board: string[][];
@ -17,21 +20,23 @@ interface IBoardState {
export default class Board extends React.Component<IBoardProps, IBoardState> { export default class Board extends React.Component<IBoardProps, IBoardState> {
private line: React.RefObject<SVGLineElement>; private line: React.RefObject<SVGLineElement>;
private line_x1: string; private line1: Position;
private line_y1: string; private line2: Position;
private letterSize: number;
constructor(props: IBoardProps) { constructor(props: IBoardProps) {
super(props); super(props);
this.state = { this.state = {
board: Array(props.numCols).fill(Array(props.numRows).fill('·')), board: Array(props.numCols).fill(Array(props.numRows).fill('A')),
isSelectingWord: false, isSelectingWord: false,
startPos: [0, 0], startPos: {x: 0, y: 0},
} }
this.line = React.createRef(); this.line = React.createRef();
this.line_x1 = "0px"; this.line1 = {x: 0, y: 0};
this.line_y1 = "0px"; this.line2 = {x: 0, y: 0};
this.letterSize = 60;
} }
handleMouseDown(startPos: Position) { handleMouseDown(startPos: Position) {
@ -39,9 +44,8 @@ export default class Board extends React.Component<IBoardProps, IBoardState> {
} }
handleMouseUp(startPos: Position) { handleMouseUp(startPos: Position) {
let [x, y] = startPos; this.line1 = startPos;
this.line_x1 = `${y * 100}px`; this.line2 = this.state.startPos;
this.line_y1 = `${x * 100}px`;
this.setState({...this.state, startPos, isSelectingWord: false}); this.setState({...this.state, startPos, isSelectingWord: false});
} }
@ -53,14 +57,14 @@ export default class Board extends React.Component<IBoardProps, IBoardState> {
render(): JSX.Element { render(): JSX.Element {
let letters = let letters =
this.state.board.map((ox, x) => this.state.board.map((oy, y) =>
ox.map((s, y) => oy.map((s, x) =>
<button <button
key={`${x}${y}`} key={`${x}${y}`}
className="Letter" className="Letter"
onMouseUp={() => this.handleMouseUp([x, y])} onMouseUp={() => this.handleMouseUp({x, y})}
onMouseDown={() => this.handleMouseDown([x, y])} onMouseDown={() => this.handleMouseDown({x, y})}
onMouseOver={() => this.handleMouseOver([x, y])} onMouseOver={() => this.handleMouseOver({x, y})}
> >
{s} {s}
</button> </button>
@ -78,10 +82,10 @@ export default class Board extends React.Component<IBoardProps, IBoardState> {
<line <line
className="Line" className="Line"
ref={this.line} ref={this.line}
x1={this.line_x1} x1={`${this.line1.x * this.letterSize + this.letterSize / 2}`}
y1={this.line_y1} y1={`${this.line1.y * this.letterSize + this.letterSize / 2}`}
x2="0" x2={`${this.line2.x * this.letterSize + this.letterSize / 2}`}
y2="0" y2={`${this.line2.y * this.letterSize + this.letterSize / 2}`}
/> />
</svg> </svg>
</div> </div>