Enable user interaction, but there's no validity check yet.
This commit is contained in:
parent
de6b2e8946
commit
4a4ff7522f
1 changed files with 18 additions and 3 deletions
21
src/Cell.js
21
src/Cell.js
|
@ -1,14 +1,29 @@
|
||||||
import React from 'react';
|
import React, {useState} from 'react';
|
||||||
|
|
||||||
export default function Cell({spec, rowIndex, cellIndex, showSolution}) {
|
export default function Cell({spec, rowIndex, cellIndex, showSolution}) {
|
||||||
|
const [mark, setMark] = useState(false);
|
||||||
let classes = "cell r" + rowIndex + " c" + cellIndex;
|
let classes = "cell r" + rowIndex + " c" + cellIndex;
|
||||||
if (spec.top) classes += " top";
|
if (spec.top) classes += " top";
|
||||||
if (spec.right) classes += " right";
|
if (spec.right) classes += " right";
|
||||||
if (spec.bottom) classes += " bottom";
|
if (spec.bottom) classes += " bottom";
|
||||||
if (spec.left) classes += " left";
|
if (spec.left) classes += " left";
|
||||||
if (spec.solution && showSolution) classes += " solution";
|
if (spec.solution && showSolution) classes += " solution";
|
||||||
if (spec.user) classes += " user";
|
if (mark) classes += " user";
|
||||||
return (
|
return (
|
||||||
<div className={classes}/>
|
<div className={classes}
|
||||||
|
onMouseEnter={(e) => {
|
||||||
|
const leftPressed = e.buttons & 0x1;
|
||||||
|
if (leftPressed) {
|
||||||
|
setMark(!mark);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onMouseLeave={(e) => {
|
||||||
|
const leftPressed = e.buttons & 0x1;
|
||||||
|
if (leftPressed) {
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onClick={(e) => {
|
||||||
|
setMark(!mark);
|
||||||
|
}}/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue