src/Cell.js

@@ -1,14 +1,29 @@
-import React from 'react';
+import React, {useState} from 'react';
 
 export default function Cell({spec, rowIndex, cellIndex, showSolution}) {
+    const [mark, setMark] = useState(false);
     let classes = "cell r" + rowIndex + " c" + cellIndex;
     if (spec.top) classes += " top";
     if (spec.right) classes += " right";
     if (spec.bottom) classes += " bottom";
     if (spec.left) classes += " left";
     if (spec.solution && showSolution) classes += " solution";
-    if (spec.user) classes += " user";
+    if (mark) classes += " user";
     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);
+             }}/>
     );
 }