{
- e.preventDefault();
- onRightClick();
- }}
- onMouseDown={(e) => {
- if (e.button === 1) {
- onMiddleClick();
- }
- }}
- >
-
- );
-};
-
-export default Cross;
diff --git a/src/components/Grid/components/Edge.js b/src/components/Grid/components/Edge.js
deleted file mode 100644
index 1c34679..0000000
--- a/src/components/Grid/components/Edge.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import Cross from "./Cross";
-import Line from "./Line";
-
-const Edge = ({notAllowed, ...props}) => {
- return notAllowed ? {
- e.preventDefault();
- onRightClick();
- }}
- onMouseDown={(e) => {
- if (e.button === 1) {
- onMiddleClick();
- }
- }}
- />
- );
-};
-
-export default Line;
diff --git a/src/components/Grid/components/LineRow.js b/src/components/Grid/components/LineRow.js
deleted file mode 100644
index 77ecbd5..0000000
--- a/src/components/Grid/components/LineRow.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import {EDGE_STATE} from "../../../constants";
-import {findNeighbor, isNodeActive} from "../../../utils";
-import Edge from "./Edge";
-import Node from "./Node";
-import Row from "./Row";
-
-const LineRow = ({
- matX,
- mat = [],
- n = 1,
- onLineClick,
- onLineRightClick,
- onLineMiddleClick,
-}) => {
- return (
-
- {mat.length &&
- Array(n - 1)
- .fill(0)
- .map((_, i) => {
- const edgeIdx = findNeighbor([matX, i], [matX, i + 1], mat);
- const showEdge = edgeIdx !== -1;
- return [
- onLineClick(matX, i, "horizontal")}
- onRightClick={() => onLineRightClick(matX, i, "horizontal")}
- onMiddleClick={() => onLineMiddleClick(matX, i, "horizontal")}
- hovered={
- showEdge &&
- mat[matX][i].neigh[edgeIdx].state === EDGE_STATE.HOVERED
- ? 1
- : 0
- }
- key={`edge_${matX + i}`}
- />,
- ];
- })
- .concat([
-
- );
-};
-
-export default LineRow;
diff --git a/src/components/Grid/components/N.js b/src/components/Grid/components/N.js
deleted file mode 100644
index 1cef61f..0000000
--- a/src/components/Grid/components/N.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import {multiStyles} from "../../../utils";
-import styles from "../styles.module.scss";
-
-const N = ({className, value, setNum, editorMode, ...props}) => {
- const v = value >= 0 && !isNaN(value) ? value : ""
-
- return (
- {editorMode && )
-}
-
-export default N
diff --git a/src/components/Grid/components/Node.js b/src/components/Grid/components/Node.js
deleted file mode 100644
index 9f05c3e..0000000
--- a/src/components/Grid/components/Node.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import {multiStyles} from "../../../utils";
-import styles from "../styles.module.scss";
-
-const Node = ({className, active, ...props}) => {
- return (
-
- );
-};
-
-export default Node;
diff --git a/src/components/Grid/components/NumberRow.js b/src/components/Grid/components/NumberRow.js
deleted file mode 100644
index caeab61..0000000
--- a/src/components/Grid/components/NumberRow.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import {EDGE_STATE} from "../../../constants";
-import {findNeighbor} from "../../../utils";
-import Edge from "./Edge";
-import N from "./N";
-import Row from "./Row";
-
-const NumberRow = ({
- matX,
- mat = [],
- n = 1,
- onLineClick,
- onLineRightClick,
- onLineMiddleClick,
- onNumberChange,
- editorMode,
-}) => {
- const endEdgeIdx =
- mat.length && findNeighbor([matX, n - 1], [matX + 1, n - 1], mat);
- const showEndEdge = endEdgeIdx !== -1;
- return (
-
- {mat.length &&
- Array(n - 1)
- .fill(0)
- .map((_, i) => {
- const edgeIdx = findNeighbor([matX, i], [matX + 1, i], mat);
- const showEdge = edgeIdx !== -1;
- return [
- onLineClick(matX, i, "vertical")}
- onRightClick={() => onLineRightClick(matX, i, "vertical")}
- onMiddleClick={() => onLineMiddleClick(matX, i, "vertical")}
- hovered={
- showEdge &&
- mat[matX][i].neigh[edgeIdx].state === EDGE_STATE.HOVERED
- ? 1
- : 0
- }
- key={`edge_${matX + i}`}
- />,
- onNumberChange(matX, i, n)}
- editorMode={editorMode}
- key={`number_${matX + i}`}
- />,
- ];
- })
- .concat([
- onLineClick(matX, n - 1, "vertical")}
- onRightClick={() => onLineRightClick(matX, n - 1, "vertical")}
- onMiddleClick={() => onLineMiddleClick(matX, n - 1, "vertical")}
- hovered={
- showEndEdge &&
- mat[matX][n - 1].neigh[endEdgeIdx].state === EDGE_STATE.HOVERED
- ? 1
- : 0
- }
- key={`edge_${matX + n - 1}`}
- />,
- ])}
-
- );
-};
-
-export default NumberRow;
diff --git a/src/components/Grid/components/Row.js b/src/components/Grid/components/Row.js
deleted file mode 100644
index 505a238..0000000
--- a/src/components/Grid/components/Row.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import styles from "../styles.module.scss";
-
-const Row = ({children}) =>
{children}
;
-
-export default Row;
diff --git a/src/components/Grid/index.js b/src/components/Grid/index.js
deleted file mode 100644
index 17b7584..0000000
--- a/src/components/Grid/index.js
+++ /dev/null
@@ -1,175 +0,0 @@
-import {EDGE_STATE} from "../../constants";
-import {findNeighbor, getNeighbors, multiStyles} from "../../utils";
-import LineRow from "./components/LineRow";
-import NumberRow from "./components/NumberRow";
-import styles from "./styles.module.scss";
-
-/*
- Grid traversal
- (0, 0) -- (0, 1) -- (0, 2) -->
- | | |
- | | |
- (1, 0) -- (1, 1) -- (1, 2) -->
- | | |
- | | |
- (2, 0) -- (2, 1) -- (2, 2) -->
- | | |
- | | |
- V V V
-*/
-
-export const DEFAULT_NODE = {neigh: [], n: -1};
-/*
- structure for neigh elements:
- {state:
, loc: [x, y]}
-*/
-
-const Grid = ({matrix, setMatrix, readOnly, editorMode, state, className}) => {
- const nHorLine = matrix?.length || 0;
- const nVerLine = matrix?.[0]?.length || 0;
-
- if (nHorLine === 0 || nVerLine === 0) {
- return null;
- }
-
- const updateMatrix = (dataArray) => {
- let temp = matrix.slice();
- dataArray.forEach(({node: [x, y], data}) => {
- temp[x][y] = {...temp[x][y], ...data};
- });
- setMatrix(temp);
- };
-
- const onLineClick = (x, y, direction, click) => {
- if (readOnly) {
- return;
- }
-
- const isMiddleClick = click === "middle";
- const node = [x, y];
- const otherNode = direction === "horizontal" ? [x, y + 1] : [x + 1, y];
- let nodeUpdateData = {};
- let otherNodeUpdateData = {};
- const neighborIndex = findNeighbor(node, otherNode, matrix);
- const otherNeighborIndex = findNeighbor(otherNode, node, matrix);
-
- // if there was already an edge (ACTIVE | NOT_ALLOWED)
- if (neighborIndex !== -1) {
- // if the edge was NOT_ALLOWED
- const isNewEdgeStateEmpty =
- matrix[x][y].neigh[neighborIndex].state === EDGE_STATE.NOT_ALLOWED;
- let newNeighbors = getNeighbors(node, matrix).slice();
- newNeighbors.splice(neighborIndex, 1);
- nodeUpdateData = {
- neigh: [
- ...newNeighbors,
- ...(isNewEdgeStateEmpty || isMiddleClick
- ? []
- : [{state: EDGE_STATE.NOT_ALLOWED, loc: otherNode}]),
- ],
- };
- let newOtherNeighbors = getNeighbors(otherNode, matrix).slice();
- newOtherNeighbors.splice(otherNeighborIndex, 1);
- otherNodeUpdateData = {
- neigh: [
- ...newOtherNeighbors,
- ...(isNewEdgeStateEmpty || isMiddleClick
- ? []
- : [{state: EDGE_STATE.NOT_ALLOWED, loc: node}]),
- ],
- };
- } else if (!isMiddleClick) {
- nodeUpdateData = {
- neigh: [
- ...matrix[x][y].neigh,
- {
- state:
- click === "left" ? EDGE_STATE.ACTIVE : EDGE_STATE.NOT_ALLOWED,
- loc: otherNode,
- },
- ],
- };
- otherNodeUpdateData = {
- neigh: [
- ...matrix[otherNode[0]][otherNode[1]].neigh,
- {
- state:
- click === "left" ? EDGE_STATE.ACTIVE : EDGE_STATE.NOT_ALLOWED,
- loc: node,
- },
- ],
- };
- }
- updateMatrix([
- {node, data: nodeUpdateData},
- {node: otherNode, data: otherNodeUpdateData},
- ]);
- };
-
- const onLineLeftClick = (x, y, direction) =>
- onLineClick(x, y, direction, "left");
- const onLineRightClick = (x, y, direction) =>
- onLineClick(x, y, direction, "right");
- const onLineMiddleClick = (x, y, direction) =>
- onLineClick(x, y, direction, "middle");
-
- const onNumberChange = (x, y, num) => {
- if (!editorMode || readOnly) {
- return;
- }
- updateMatrix([{node: [x, y], data: {n: num}}]);
- };
-
- return (
- e.preventDefault()}
- >
- {Array(nHorLine - 1)
- .fill(0)
- .map((_, i) => {
- return [
-
- );
-};
-
-export default Grid;
diff --git a/src/components/Grid/styles.module.scss b/src/components/Grid/styles.module.scss
deleted file mode 100644
index ab31362..0000000
--- a/src/components/Grid/styles.module.scss
+++ /dev/null
@@ -1,298 +0,0 @@
-$gridColor: #607d8b;
-$gridActiveColor: #90a4ae;
-$gridHoverColor: #eceff1;
-$invalidColor: #ff8a80;
-$validColor: #00e676;
-
-$transitionDuration: 0.2s;
-
-$gridScale: 1;
-
-$nodeSize: $gridScale * 6px;
-@media (max-width: 500px) {
- $gridScale: 0.5;
-}
-$nodeActiveSize: $gridScale * 7px;
-
-$edgeLength: $gridScale * 50px;
-$edgeBreadth: $gridScale * 2px;
-
-$fontSize: $gridScale * 24px;
-
-$animationSeperation: 0.075s;
-$animationScale: 1.5;
-$animationDuration: 0.25s;
-$animationTimingFunction: linear;
-$animationFillMode: forwards;
-
-// canvas
-.row, .canvas {
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-.canvas {
- align-items: flex-start;
- flex-direction: column;
- overflow-x: auto;
- box-sizing: border-box;
- max-width: 100%;
- padding: 50px;
- border-radius: 10px;
- background-color: #282c34;
-
- &.readOnly, &.passed {
- * {
- pointer-events: none;
- cursor: default;
- }
- }
-}
-
-// grid elements
-.node {
- display: flex;
- height: $nodeSize;
- width: $nodeSize;
- background-color: $gridColor;
- border-radius: 50%;
- z-index: 1;
- transition: background-color $transitionDuration;
-
- &.active {
- background-color: $gridActiveColor;
- width: $nodeActiveSize;
- height: $nodeActiveSize;
- margin: - ($nodeActiveSize - $nodeSize) / 2;
- }
-}
-
-.line {
- display: flex;
- $lineColor: $gridColor;
- background-repeat: repeat;
- opacity: 0;
- position: relative;
- cursor: pointer;
- $interactionOffset: ($nodeSize - $edgeBreadth) * 4;
-
- &:after, &:before {
- content: "";
- background-color: transparent;
- position: absolute;
- }
-
- &.horizontal {
- background-size: 4*$edgeBreadth 100%;
- background-image: linear-gradient(90deg, $lineColor 50%, transparent 50%);
- height: $edgeBreadth;
- width: $edgeLength;
-
- &:after, &:before {
- height: $interactionOffset;
- width: 100%;
- left: 0;
- }
-
- &:after {
- top: 100%;
- }
-
- &:before {
- bottom: 100%;
- }
- }
-
- &.vertical {
- background-size: 100% 4*$edgeBreadth;
- background-image: linear-gradient(180deg, $lineColor 50%, transparent 50%);
- height: $edgeLength;
- width: $edgeBreadth;
- margin: 0 ($nodeSize - $edgeBreadth) / 2;
-
- &:after, &:before {
- width: $interactionOffset;
- height: 100%;
- top: 0;
- }
-
- &:after {
- right: 100%;
- }
-
- &:before {
- left: 100%;
- }
- }
-
- &:hover, &.hovered {
- transition: opacity $transitionDuration;
- opacity: 1;
- }
-
- &.active {
- opacity: 1;
- background: $gridActiveColor;
- transition: background-color $transitionDuration;
-
- &:hover {
- background: $gridHoverColor;
-
- &.horizontal {
- height: 1.5 * $edgeBreadth;
- }
-
- &.vertical {
- width: 1.5 * $edgeBreadth;
- margin: 0 (($nodeSize - 1.5 * $edgeBreadth) / 2);
- }
- }
- }
-
- &.cross {
- opacity: 1;
- background: none;
- display: flex;
- align-items: center;
- justify-content: center;
-
- & > span {
- position: absolute;
- width: 6 * $edgeBreadth;
- height: 3 * $edgeBreadth / 4;
- background-color: $invalidColor;
- border-radius: 2 * $edgeBreadth;
- transition: all $transitionDuration;
-
- &:first-child {
- transform: rotate(45deg);
- }
-
- &:last-child {
- transform: rotate(-45deg);
- }
- }
-
- &:hover {
- & > span {
- width: 7 * $edgeBreadth;
- height: $edgeBreadth;
- background-color: $gridHoverColor;
- }
- }
- }
-}
-
-.number {
- font-size: $fontSize;
- display: flex;
- align-items: center;
- justify-content: center;
- height: $edgeLength;
- width: $edgeLength;
- user-select: none;
-
- .invalid {
- color: $invalidColor;
- }
-
- input {
- text-align: center;
- height: inherit;
- width: inherit;
- background: inherit;
- outline: none;
- box-shadow: none;
- border: inherit;
- color: inherit;
- font-size: inherit;
- display: inherit;
- align-items: inherit;
- justify-content: inherit;
- cursor: inherit;
- }
-}
-
-.canvas.failed {
- .node.active {
- background-color: $invalidColor;
- }
-
- .line {
- &:not(.cross){
- &:not(:hover) {
- background-color: $invalidColor;
- }
- }
- }
-}
-
-.canvas.passed {
-
- .node.active {
- animation: node $animationDuration $animationTimingFunction $animationFillMode;
- }
-
- .line:not(.cross) {
- &.horizontal {
- animation: lineX $animationDuration $animationTimingFunction $animationFillMode;
- }
-
- &.vertical {
- animation: lineY $animationDuration $animationTimingFunction $animationFillMode;
- }
- }
-
- .node.active, .line:not(.cross) {
- @for $i from 1 through 50 {
- &:nth-child(#{$i}) {
- animation-delay: ($i - 1) * $animationSeperation;
- }
- }
- }
-
-}
-
-@keyframes node {
- 0% {
- background-color: $validColor;
- transform: scale(1);
- }
- 50% {
- transform: scale($animationScale);
- }
- 100% {
- background-color: $validColor;
- transform: scale(1);
- }
-}
-
-@keyframes lineX {
- 0% {
- background-color: $validColor;
- transform: scaleY(1);
- }
- 50% {
- transform: scaleY(1.5 * $animationScale);
- }
- 100% {
- background-color: $validColor;
- transform: scaleY(1);
- }
-}
-
-
-@keyframes lineY {
- 0% {
- background-color: $validColor;
- transform: scaleX(1);
- }
- 50% {
- transform: scaleX(1.5 * $animationScale);
- }
- 100% {
- background-color: $validColor;
- transform: scaleX(1);
- }
-}
diff --git a/src/components/Icons.js b/src/components/Icons.js
deleted file mode 100644
index db28bdc..0000000
--- a/src/components/Icons.js
+++ /dev/null
@@ -1,87 +0,0 @@
-export const Undo = ({className, onClick}) => {
- return (
-
-
- );
-};
-
-export const Redo = ({className, onClick}) => {
- return (
-
-
- );
-};
-
-export const Refresh = ({className, onClick}) => {
- return (
-
-
- );
-};
-
-export const Reset = ({className, onClick}) => {
- return (
-
-
- );
-};
-
-export const Plus = ({className, onClick}) => {
- return (
-
-
- );
-};
diff --git a/src/components/Info/index.js b/src/components/Info/index.js
deleted file mode 100644
index 9e622ca..0000000
--- a/src/components/Info/index.js
+++ /dev/null
@@ -1,146 +0,0 @@
-import * as React from "react";
-import {EXAMPLE_GRID_PROPS, NOT_ALLOWED_1_GRID_PROPS, NOT_ALLOWED_2_GRID_PROPS,} from "../../constants";
-import {getMatrix} from "../../utils";
-import Grid from "../Grid";
-
-import styles from "./styles.module.scss";
-
-const Info = () => {
- const [open, setOpen] = React.useState(false);
-
- return (
- <>
- setOpen(true)}>
-
i
-
Info
-
-
setOpen(false)} />
-
-
- Rules
-
- Connect adjacent dots with vertical or horizontal lines, creating
- a single loop.
-
-
-
- Crossovers or branches are not allowed (as shown by dotted lines
- below).
-
-
-
- Numbers in the puzzle indicate the number of lines that should
- surround it.
-
-
- You can't draw lines around zeroes.
-
-
- Each puzzle has just one uniques solution.
-
-
-
- How to begin
-
- Begin with the zero next to 3. If no such case is present, then
- use one of the rules in the{" "}
-
- wikipedia link
- {" "}
- to start off.
-
- Since no lines can be drawn around zero, mark crosses around it as
- shown.
-
-
- Now there's a cross in one space around 3. So we know the three
- lines of 3 can only be drawn in the remaining three spaces.
-
-
- Next, these lines can only be extended in one direction each.
-
- Continue using the same logic.
-
-
- Hints
-
- Keep eliminating possibilities by marking crosses in spaces
- between dots where a line isn't possible, i.e., if you have
- already completed required lines or where a line creation may
- create a branch or a deadend. Visit the{" "}
-
- wikipedia link
- {" "}
- for more hints.
-
-
-
- Controls
-
-
-
-
- Left Mouse Button
-
- Toggle line
-
-
-
- Right Mouse Button
-
- Mark line as crossed/not allowed
-
-
-
- Middle Mouse Button
-
- Reset line state
-
-
-
-
-