azalea/colorful-link
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[+] Restart project, rewrite in svelte

Browse Source
This commit is contained in:
Azalea Gui
2024-12-16 05:17:44 -05:00
parent 29dea779b5
commit ef1bf0b688
53 changed files with 198 additions and 2889 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+20 -22
View File
@@ -1,26 +1,24 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
*/.idea
.idea
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
.vscode/extensions.json
Vendored
+3
View File
@@ -0,0 +1,3 @@
{
"recommendations": ["svelte.svelte-vscode"]
}
.vscode/settings.json
Vendored
-18
View File
@@ -1,18 +0,0 @@
{
"files.autoSave": "onFocusChange",
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"editor.formatOnPaste": true,
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
],
"eslint.format.enable": true,
"[javascript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
},
"[javascriptreact]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
},
}
README.md
+47 -4
View File
@@ -1,4 +1,47 @@
This is a react app for slither link game with a few predefined puzzles.
This is focussed mainly on the UI hence code to check for solution is a simple match check and not based on an algorithm.
This app is hosted via [github pages](https://pages.github.com/). Visit the app [here](https://ameygohil.github.io/slither-link/).
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
# Svelte + TS + Vite
This template should help get you started developing with Svelte and TypeScript in Vite.
## Recommended IDE Setup
[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
## Need an official Svelte framework?
Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
## Technical considerations
**Why use this over SvelteKit?**
- It brings its own routing solution which might not be preferable for some users.
- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
**Why include `.vscode/extensions.json`?**
Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
**Why enable `allowJs` in the TS template?**
While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
**Why is HMR not preserving my local component state?**
HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
```ts
// store.ts
// An extremely simple external store
import { writable } from 'svelte/store'
export default writable(0)
```
bun.lockb
BIN
View File
Binary file not shown.
index.html
+6 -28
View File
@@ -1,35 +1,13 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="google-site-verification" content="9unbZeNIQkJcoSQWdYg9mzdy_ZKScZ5huln8QibxMr8" />
<meta
name="description"
content="A web site to play SlitherLink game"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>SlitherLink</title>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Svelte + TS</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="app"></div>
<script type="module" src="/src/main.tsx"></script>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
package.json
+9 -7
View File
@@ -1,19 +1,21 @@
{
"name": "slither-link",
"name": "slither-link-v2",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"preview": "vite preview"
},
"dependencies": {
"preact": "^10.25.0"
"build": "vite build",
"preview": "vite preview",
"check": "svelte-check --tsconfig ./tsconfig.json && tsc -p tsconfig.node.json"
},
"devDependencies": {
"@preact/preset-vite": "^2.9.1",
"@sveltejs/vite-plugin-svelte": "^5.0.0",
"@tsconfig/svelte": "^5.0.4",
"sass-embedded": "^1.83.0",
"svelte": "^5.2.7",
"svelte-check": "^4.1.0",
"tslib": "^2.8.1",
"typescript": "~5.6.2",
"vite": "^6.0.1"
}
public/favicon.ico
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

public/logo.svg
-1
View File
@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.6 KiB

public/logo192.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 10 KiB

public/logo512.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 28 KiB

public/manifest.json
-25
View File
@@ -1,25 +0,0 @@
{
"short_name": "SlitherLink",
"name": "SlitherLink React App",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
public/robots.txt
-3
View File
@@ -1,3 +0,0 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
public/vite.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

src/App.css
-5
View File
@@ -1,5 +0,0 @@
body, html, #app {
height: 100%;
width: 100%;
box-sizing: border-box;
}
src/App.tsx
-8
View File
@@ -1,8 +0,0 @@
import Game from "./components/Game";
import "./App.css";
const App = () => {
return <Game />;
};
export default App;
src/app.scss
+69
View File
@@ -0,0 +1,69 @@
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
#app {
margin: 0 auto;
padding: 2rem;
text-align: center;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
src/assets/svelte.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

src/components/AddPuzzleScreen/index.js
-119
View File
@@ -1,119 +0,0 @@
import * as React from "react";
import {getMatrix, getNumbers, multiStyles} from "../../utils";
import Controls from "../Controls";
import Grid from "../Grid";
import N from "../Grid/components/N";
import styles from "./styles.module.scss";
const AddPuzzleScreen = ({open, onClose}) => {
const [dim, setDim] = React.useState([3, 3]);
const [gridMat, setGridMat] = React.useState([]);
const [gridNumbers, setGridNumbers] = React.useState([]);
React.useEffect(() => {
if (!isNaN(dim[0]) && dim[0] > 0 && !isNaN(dim[1]) && dim[1] > 0) {
setGridMat(getMatrix(dim, [], gridNumbers));
}
}, [dim[0], dim[1]]);
React.useEffect(() => {
setGridNumbers(getNumbers(gridMat));
}, [JSON.stringify(gridMat)]);
const [gridReset, setGridReset] = React.useState(false);
React.useEffect(() => {
if (gridReset) {
if (!isNaN(dim[0]) && dim[0] > 0 && !isNaN(dim[1]) && dim[1] > 0) {
setGridNumbers([]);
setGridMat(getMatrix(dim));
}
setGridReset(false);
}
}, [gridReset]);
const [submitState, setSubmitState] = React.useState("none");
const [submitText, setSubmitText] = React.useState("Submit");
const onSubmit = () => {
setSubmitState("passed");
setSubmitText("Thanks for submitting! 😀");
};
React.useEffect(() => {
let timeout;
if (submitState === "passed") {
timeout = setTimeout(() => {
setSubmitState("none");
setSubmitText("Submit");
}, 5000);
}
return () => !isNaN(timeout) && clearTimeout(timeout);
}, [submitState]);
const shouldShowGrid =
!isNaN(dim[0]) && dim[0] > 0 && !isNaN(dim[1]) && dim[1] > 0;
return (
<>
{open && (
<div className={styles.screen}>
<span className={styles.cross} onClick={onClose} />
<section className={styles.dimension}>
<div className={styles.title}>Set dimensions</div>
<div className={styles.content}>
<div className={styles.dimInputWrapper}>
<N
value={dim[0]}
setNum={(n) => {
setGridReset(true);
setDim([n, dim[1]]);
}}
editorMode
className={styles.input}
/>
X
<N
value={dim[1]}
setNum={(n) => {
setGridReset(true);
setDim([dim[0], n]);
}}
editorMode
className={styles.input}
/>
</div>
</div>
</section>
<section className={styles.matrix}>
<div className={styles.title}>Set matrix</div>
<div className={styles.content}>
<div className={styles.matrixGrid}>
{shouldShowGrid ? (
<Grid matrix={gridMat} setMatrix={setGridMat} editorMode />
) : (
"Please set valid dimensions above"
)}
</div>
</div>
<div className={styles.content}>
{shouldShowGrid && (
<a
href={`mailto:amey23399@gmail.com?subject=Slither Link Example&body=${JSON.stringify(
gridNumbers
)}`}
className={multiStyles(styles, ["submitButton", submitState])}
onClick={onSubmit}
>
{submitText}
</a>
)}
</div>
</section>
<Controls onReset={() => setGridReset(true)} editorMode />
</div>
)}
</>
);
};
export default AddPuzzleScreen;
src/components/AddPuzzleScreen/styles.module.scss
-159
View File
@@ -1,159 +0,0 @@
* {
box-sizing: border-box;
}
.screen {
position: fixed;
height: 100vh;
width: 100vw;
background-color: #212121;
z-index: 3;
font-family: monospace;
display: flex;
padding: 50px 40px;
align-items: flex-start;
justify-content: flex-start;
overflow-y: auto;
flex-direction: column;
gap: 50px;
.cross {
$size: 20px;
height: $size;
width: $size;
position: fixed;
top: 40px;
right: 40px;
background-color: inherit;
padding: 3 * $size / 4;
z-index: 3;
cursor: pointer;
&:after, &:before {
content: "";
height: $size / 8;
width: $size;
background-color: #b0bec5;
position: absolute;
top: 50%;
left: 50%;
border-radius: $size / 8;
}
&:after {
transform: translate(-50%, -50%) rotate(45deg);
}
&:before {
transform: translate(-50%, -50%) rotate(-45deg);
}
}
section {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 20px;
font-size: 17px;
color: #e0e0e0;
width: 100%;
& > span {
padding-left: 20px;
}
a {
color: #00b0ff;
text-decoration: none;
}
}
.title {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin-bottom: 10px;
font-size: 26px;
text-transform: uppercase;
font-weight: 600;
color: #f5f5f5;
}
.content {
line-height: inherit;
font-size: inherit;
padding-left: 20px;
color: inherit;
position: relative;
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
.matrixGrid {
display: flex;
align-self: center;
justify-self: center;
gap: 20px;
align-items: center;
justify-content: center;
width: 100%;
}
.submitButton {
display: flex;
align-items: center;
justify-content: center;
background-color: #263238;
height: auto;
width: auto;
padding: 10px 15px;
font-size: 20px;
border: 2px solid #455a64;
margin-top: 20px;
color: #fafafa;
align-self: center;
justify-self: center;
border-radius: 10px;
cursor: pointer;
transition: all 0.2s;
&:hover {
border-color: #78909c;
transform: scale(1.01);
color: white;
}
&.failed {
color: #ff5722;
border-color: #ff5722;
}
&.passed {
color: #00e676;
border-color: #00e676;
}
}
}
.dimInputWrapper {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
.input {
background-color: #282c34;
border-radius: 6px;
display: inline;
input {
border-radius: 6px;
font-family: monospace;
}
}
}
}
src/components/CheckSolution/index.js
-44
View File
@@ -1,44 +0,0 @@
import * as React from "react";
import {getActiveEdges, multiStyles} from "../../utils";
import styles from "./styles.module.scss";
const CheckSolution = ({matrix, solution, setCheck}) => {
const [text, setText] = React.useState("Check Solution");
const [state, setState] = React.useState("none");
React.useEffect(() => {
let timeout;
if (state !== "none") {
timeout = setTimeout(() => {
setState("none");
setCheck("none");
setText("Check Solution");
}, 4000);
}
return () => !isNaN(timeout) && clearTimeout(timeout);
}, [state]);
return (
<div
className={multiStyles(styles, ["button", state])}
onClick={() => {
let check =
JSON.stringify(getActiveEdges(matrix)) === JSON.stringify(solution);
if (check) {
setText("That is correct! 😀");
setState("passed");
setCheck("passed");
} else {
setText("Wrong Solution 😔");
setState("failed");
setCheck("failed");
}
}}
>
{text}
</div>
);
};
export default CheckSolution;
src/components/CheckSolution/styles.module.scss
-38
View File
@@ -1,38 +0,0 @@
* {
box-sizing: border-box;
}
.button {
display: flex;
align-items: center;
justify-content: center;
background-color: #263238;
height: 50px;
width: auto;
padding: 10px 15px;
font-size: 20px;
border: 2px solid #455a64;
margin-top: 20px;
color: #fafafa;
border-radius: 10px;
cursor: pointer;
transition: all 0.2s;
&:hover {
border-color: #78909c;
transform: scale(1.01);
color: white;
}
&.failed {
color: #ff5722;
border-color: #ff5722;
}
&.passed {
color: #00e676;
border-color: #00e676;
}
}
src/components/Controls/index.js
-50
View File
@@ -1,50 +0,0 @@
import * as React from "react";
import AddPuzzleScreen from "../AddPuzzleScreen";
import {Plus, Redo, Refresh, Reset, Undo} from "../Icons";
import styles from "./styles.module.scss";
const Controls = ({onRefresh, onReset, onUndo, onRedo, editorMode}) => {
const [showAddScreen, setShowAddScreen] = React.useState(false);
return (
<>
<div className={styles.controls}>
{!editorMode && (
<div className={styles.refresh} onClick={onRefresh}>
<Refresh />
<span>Refresh</span>
</div>
)}
<div className={styles.reset} onClick={onReset}>
<Reset />
<span>Reset</span>
</div>
{!editorMode && (
<div className={styles.undo} onClick={onUndo}>
<Undo />
<span>Undo</span>
</div>
)}
{!editorMode && (
<div className={styles.redo} onClick={onRedo}>
<Redo />
<span>Redo</span>
</div>
)}
{!editorMode && (
<div className={styles.add} onClick={() => setShowAddScreen(true)}>
<Plus />
<span>Add</span>
</div>
)}
</div>
<AddPuzzleScreen
open={showAddScreen}
onClose={() => setShowAddScreen(false)}
/>
</>
);
};
export default Controls;
src/components/Controls/styles.module.scss
-47
View File
@@ -1,47 +0,0 @@
* {
box-sizing: border-box;
}
.controls {
position: fixed;
bottom: 10px;
left: 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
& > div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 12px;
color: #90a4ae;
gap: 2px;
cursor: pointer;
& > svg {
background-color: #263238;
height: 40px;
width: 40px;
padding: 9px;
border: 2px solid #455a64;
font-family: Georgia, 'Times New Roman', Times, serif;
color: #fafafa;
border-radius: 50%;
transition: all 0.2s;
font-style: italic;
}
&:hover {
transform: scale(1.1);
& > svg {
border-color: #78909c;
font-size: 22px;
color: white;
}
}
}
}
src/components/Game/index.js
-91
View File
@@ -1,91 +0,0 @@
import * as React from "react";
import {examples} from "../../examples";
import {copy, getEdges, getMatrix} from "../../utils";
import CheckSolution from "../CheckSolution";
import Controls from "../Controls";
import Grid from "../Grid";
import Info from "../Info";
import styles from "./styles.module.scss";
const Game = () => {
const [matrix, setMatrix] = React.useState([]);
const [{dim = [], numbers, solution}] = React.useState(
examples[Math.floor(Math.random() * examples.length)]
);
const [history, setHistory] = React.useState([]);
const [historyIndex, setHistoryIndex] = React.useState(-1);
const [check, setCheck] = React.useState("none");
const updateMatrix = (matrix) => {
setHistory([...history.slice(0, historyIndex + 1), copy(matrix)]);
setHistoryIndex(historyIndex + 1);
setMatrix(matrix);
};
// initializing matrix with example
React.useEffect(() => {
if (dim.length) {
let temp = getMatrix(dim, [], numbers);
updateMatrix(temp);
}
}, [dim.length]);
const onUndo = () => {
// check if undo is possible
if (historyIndex < 1) {
return;
}
// performing undo
setMatrix(copy(history[historyIndex - 1]));
setHistoryIndex(historyIndex - 1);
};
const onRedo = () => {
// check if redo is possible
if (historyIndex + 1 === history.length) {
return;
}
// performing undo
setMatrix(copy(history[historyIndex + 1]));
setHistoryIndex(historyIndex + 1);
};
const onReset = () => {
if (dim.length) {
// if matrix already empty
if (getEdges(matrix).length === 0) {
return;
}
updateMatrix(getMatrix(dim, [], numbers));
}
};
const onRefresh = () => {
window.location.reload();
};
return (
<main>
<h1 className={styles.heading}>
<span>Slither</span>
<span>Link</span>
</h1>
<Grid matrix={matrix} setMatrix={updateMatrix} state={check} />
<Info />
<CheckSolution matrix={matrix} solution={solution} setCheck={setCheck} />
<Controls
onReset={onReset}
onRefresh={onRefresh}
onUndo={onUndo}
onRedo={onRedo}
/>
</main>
);
};
export default Game;
src/components/Game/styles.module.scss
-32
View File
@@ -1,32 +0,0 @@
main {
font-size: 24px;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #23262f;
height: 100%;
width: 100%;
color: #fafafa;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
flex-direction: column;
box-sizing: border-box;
padding: 0 22px;
}
.heading {
font-size: 25px;
text-align: center;
span {
color: #7986cb;
&:nth-of-type(even) {
color: #8c9eff;
}
&:nth-of-type(odd) {
color: #64b5f6;
}
}
}
src/components/Grid/components/Cross.js
-36
View File
@@ -1,36 +0,0 @@
import {multiStyles} from "../../../utils";
import styles from "../styles.module.scss";
const Cross = ({
orientation = "h",
className,
onRightClick,
onMiddleClick,
...props
}) => {
return (
<div
className={multiStyles(styles, [
"line",
"cross",
orientation === "v" ? "vertical" : "horizontal",
className,
])}
{...props}
onContextMenu={(e) => {
e.preventDefault();
onRightClick();
}}
onMouseDown={(e) => {
if (e.button === 1) {
onMiddleClick();
}
}}
>
<span />
<span />
</div>
);
};
export default Cross;
src/components/Grid/components/Edge.js
-8
View File
@@ -1,8 +0,0 @@
import Cross from "./Cross";
import Line from "./Line";
const Edge = ({notAllowed, ...props}) => {
return notAllowed ? <Cross {...props} /> : <Line {...props} />;
};
export default Edge;
src/components/Grid/components/Line.js
-35
View File
@@ -1,35 +0,0 @@
import {multiStyles} from "../../../utils";
import styles from "../styles.module.scss";
const Line = ({
orientation = "h",
hovered,
active,
className,
onRightClick,
onMiddleClick,
...props
}) => {
return (
<div
className={multiStyles(styles, [
"line",
orientation === "v" ? "vertical" : "horizontal",
hovered ? "hovered" : active && "active",
className,
])}
{...props}
onContextMenu={(e) => {
e.preventDefault();
onRightClick();
}}
onMouseDown={(e) => {
if (e.button === 1) {
onMiddleClick();
}
}}
/>
);
};
export default Line;
src/components/Grid/components/LineRow.js
-57
View File
@@ -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 (
<Row>
{mat.length &&
Array(n - 1)
.fill(0)
.map((_, i) => {
const edgeIdx = findNeighbor([matX, i], [matX, i + 1], mat);
const showEdge = edgeIdx !== -1;
return [
<Node
key={`node_${matX + i}`}
active={isNodeActive(mat[matX][i])}
/>,
<Edge
notAllowed={
showEdge &&
mat[matX][i].neigh[edgeIdx].state === EDGE_STATE.NOT_ALLOWED
}
active={showEdge ? 1 : 0}
onClick={() => 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([
<Node
key={`node_${matX + n - 1}`}
active={isNodeActive(mat[matX][n - 1]) ? 1 : 0}
/>,
])}
</Row>
);
};
export default LineRow;
src/components/Grid/components/N.js
-16
View File
@@ -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 (<span className={multiStyles(styles, ["number", className])} {...props}>
{editorMode && <input
disabled
onChange={(e) => setNum(parseInt(e.target.value))}
value={v}
/> || v}
</span>)
}
export default N
src/components/Grid/components/Node.js
-13
View File
@@ -1,13 +0,0 @@
import {multiStyles} from "../../../utils";
import styles from "../styles.module.scss";
const Node = ({className, active, ...props}) => {
return (
<div
className={multiStyles(styles, ["node", className, active && "active"])}
{...props}
/>
);
};
export default Node;
src/components/Grid/components/NumberRow.js
-80
View File
@@ -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 (
<Row>
{mat.length &&
Array(n - 1)
.fill(0)
.map((_, i) => {
const edgeIdx = findNeighbor([matX, i], [matX + 1, i], mat);
const showEdge = edgeIdx !== -1;
return [
<Edge
notAllowed={
showEdge &&
mat[matX][i].neigh[edgeIdx].state === EDGE_STATE.NOT_ALLOWED
}
orientation='v'
active={showEdge ? 1 : 0}
onClick={() => 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}`}
/>,
<N
value={mat[matX][i].n}
setNum={(n) => onNumberChange(matX, i, n)}
editorMode={editorMode}
key={`number_${matX + i}`}
/>,
];
})
.concat([
<Edge
notAllowed={
showEndEdge &&
mat[matX][n - 1].neigh[endEdgeIdx].state ===
EDGE_STATE.NOT_ALLOWED
}
orientation='v'
active={showEndEdge ? 1 : 0}
onClick={() => 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}`}
/>,
])}
</Row>
);
};
export default NumberRow;
src/components/Grid/components/Row.js
-5
View File
@@ -1,5 +0,0 @@
import styles from "../styles.module.scss";
const Row = ({children}) => <div className={styles.row}>{children}</div>;
export default Row;
src/components/Grid/index.js
-175
View File
@@ -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: <EDGE_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 (
<div
className={multiStyles(styles, [
"canvas",
className,
state,
readOnly && "readOnly",
])}
// disabling right click on grid
onContextMenu={(e) => e.preventDefault()}
>
{Array(nHorLine - 1)
.fill(0)
.map((_, i) => {
return [
<LineRow
matX={i}
mat={matrix}
n={nVerLine}
onLineClick={onLineLeftClick}
onLineRightClick={onLineRightClick}
onLineMiddleClick={onLineMiddleClick}
key={`line_row_${i}`}
/>,
<NumberRow
matX={i}
mat={matrix}
n={nVerLine}
onLineClick={onLineLeftClick}
onLineRightClick={onLineRightClick}
onLineMiddleClick={onLineMiddleClick}
onNumberChange={onNumberChange}
editorMode={editorMode}
key={`number_row_${i}`}
/>,
];
})
.concat([
<LineRow
matX={nHorLine - 1}
mat={matrix}
n={nVerLine}
onLineClick={onLineLeftClick}
onLineRightClick={onLineRightClick}
onLineMiddleClick={onLineMiddleClick}
key={`line_row_${nHorLine - 1}`}
/>,
])}
</div>
);
};
export default Grid;
src/components/Grid/styles.module.scss
-298
View File
@@ -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);
}
}
src/components/Icons.js
-87
View File
@@ -1,87 +0,0 @@
export const Undo = ({className, onClick}) => {
return (
<svg
xmlns='http://www.w3.org/2000/svg'
width='24'
height='24'
viewBox='0 0 24 24'
fill='currentColor'
onClick={onClick}
className={className}
>
<path d='M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z' />
</svg>
);
};
export const Redo = ({className, onClick}) => {
return (
<svg
xmlns='http://www.w3.org/2000/svg'
width='24'
height='24'
viewBox='0 0 24 24'
fill='currentColor'
onClick={onClick}
className={className}
>
<path d='M0 0h24v24H0V0z' fill='none' />
<path d='M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z' />
</svg>
);
};
export const Refresh = ({className, onClick}) => {
return (
<svg
xmlns='http://www.w3.org/2000/svg'
width='24'
height='24'
viewBox='0 0 24 24'
fill='currentColor'
onClick={onClick}
className={className}
>
<path d='M0 0h24v24H0V0z' fill='none' />
<path d='M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z' />
</svg>
);
};
export const Reset = ({className, onClick}) => {
return (
<svg
xmlns='http://www.w3.org/2000/svg'
width='24'
height='24'
viewBox='0 0 24 24'
fill='currentColor'
onClick={onClick}
className={className}
>
<path d='M0 0h24v24H0V0z' fill='none' />
<path d='M13 3c-4.97 0-9 4.03-9 9H1l4 3.99L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.25 2.52.77-1.28-3.52-2.09V8z' />
</svg>
);
};
export const Plus = ({className, onClick}) => {
return (
<svg
xmlns='http://www.w3.org/2000/svg'
width='24'
height='24'
viewBox='0 0 24 24'
stroke='currentColor'
strokeWidth='2'
strokeLinecap='round'
strokeLinejoin='round'
fill='none'
onClick={onClick}
className={className}
>
<line x1='12' y1='5' x2='12' y2='19' />
<line x1='5' y1='12' x2='19' y2='12' />
</svg>
);
};
src/components/Info/index.js
-146
View File
@@ -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 (
<>
<div className={styles.container} onClick={() => setOpen(true)}>
<div className={styles.button}>i</div>
<span>Info</span>
</div>
{open && (
<div className={styles.info}>
<span className={styles.cross} onClick={() => setOpen(false)} />
<section className={styles.rules}>
<div className={styles.title}>Rules</div>
<div className={styles.item}>
Connect adjacent dots with vertical or horizontal lines, creating
a single loop.
<div className={styles.eg}>
<Grid
matrix={getMatrix(
EXAMPLE_GRID_PROPS.dim,
EXAMPLE_GRID_PROPS.edges,
EXAMPLE_GRID_PROPS.numbers
)}
readOnly
/>
</div>
</div>
<div className={styles.item}>
Crossovers or branches are not allowed (as shown by dotted lines
below).
<div className={styles.eg}>
<Grid
matrix={getMatrix(
NOT_ALLOWED_1_GRID_PROPS.dim,
NOT_ALLOWED_1_GRID_PROPS.edges,
NOT_ALLOWED_1_GRID_PROPS.numbers
)}
readOnly
/>
<Grid
matrix={getMatrix(
NOT_ALLOWED_2_GRID_PROPS.dim,
NOT_ALLOWED_2_GRID_PROPS.edges,
NOT_ALLOWED_2_GRID_PROPS.numbers
)}
readOnly
/>
</div>
</div>
<div className={styles.item}>
Numbers in the puzzle indicate the number of lines that should
surround it.
</div>
<div className={styles.item}>
You can't draw lines around zeroes.
</div>
<div className={styles.item}>
Each puzzle has just one uniques solution.
</div>
</section>
<section className={styles.howToBegin}>
<div className={styles.title}>How to begin</div>
<div className={styles.item}>
Begin with the zero next to 3. If no such case is present, then
use one of the rules in the{" "}
<a
style={{display: "contents"}}
rel='noreferrer'
href='https://en.wikipedia.org/wiki/Slitherlink'
target='_blank'
>
wikipedia link
</a>{" "}
to start off.
</div>
<div className={styles.item}>
Since no lines can be drawn around zero, mark crosses around it as
shown.
</div>
<div className={styles.item}>
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.
</div>
<div className={styles.item}>
Next, these lines can only be extended in one direction each.
</div>
<div className={styles.item}>Continue using the same logic.</div>
</section>
<section className={styles.hint}>
<div className={styles.title}>Hints</div>
<span>
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{" "}
<a
rel='noreferrer'
href='https://en.wikipedia.org/wiki/Slitherlink'
target='_blank'
>
wikipedia link
</a>{" "}
for more hints.
</span>
</section>
<section className={styles.controls}>
<div className={styles.title}>Controls</div>
<table>
<tbody>
<tr>
<td>
<b>Left Mouse Button</b>
</td>
<td>Toggle line</td>
</tr>
<tr>
<td>
<b>Right Mouse Button</b>
</td>
<td>Mark line as crossed/not allowed</td>
</tr>
<tr>
<td>
<b>Middle Mouse Button</b>
</td>
<td>Reset line state</td>
</tr>
</tbody>
</table>
</section>
</div>
)}
</>
);
};
export default Info;
src/components/Info/styles.module.scss
-186
View File
@@ -1,186 +0,0 @@
* {
box-sizing: border-box;
}
.container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: fixed;
bottom: 10px;
right: 10px;
gap: 2px;
cursor: pointer;
.button {
display: flex;
align-items: center;
justify-content: center;
background-color: #263238;
height: 40px;
width: 40px;
padding: 10px;
font-size: 20px;
border: 2px solid #455a64;
font-family: Georgia, 'Times New Roman', Times, serif;
border-radius: 50%;
transition: all 0.2s;
font-style: italic;
}
span {
font-size: 12px;
color: #90a4ae;
}
&:hover {
transform: scale(1.1);
.button {
border-color: #78909c;
font-size: 22px;
color: white;
}
}
}
.info {
position: fixed;
height: 100vh;
width: 100vw;
background-color: #212121;
z-index: 2;
font-family: monospace;
display: flex;
padding: 50px 40px;
align-items: flex-start;
justify-content: flex-start;
overflow-y: auto;
flex-direction: column;
gap: 50px;
.cross {
$size: 20px;
height: $size;
width: $size;
position: fixed;
top: 40px;
right: 40px;
background-color: inherit;
padding: 3 * $size / 4;
z-index: 3;
cursor: pointer;
&:after, &:before {
content: "";
height: $size / 8;
width: $size;
background-color: #b0bec5;
position: absolute;
top: 50%;
left: 50%;
border-radius: $size / 8;
}
&:after {
transform: translate(-50%, -50%) rotate(45deg);
}
&:before {
transform: translate(-50%, -50%) rotate(-45deg);
}
}
section {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 20px;
font-size: 17px;
color: #e0e0e0;
width: 100%;
& > span {
padding-left: 20px;
}
a {
color: #00b0ff;
text-decoration: none;
}
}
.title {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-bottom: 10px;
font-size: 26px;
text-transform: uppercase;
font-weight: 600;
color: #f5f5f5;
}
.item {
line-height: inherit;
font-size: inherit;
padding-left: 20px;
color: inherit;
position: relative;
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
&:before {
content: "";
position: absolute;
width: 7px;
height: 7px;
top: 7px;
left: 0;
box-sizing: border-box;
border-radius: 50%;
background-color: #424242;
border: 1.5px solid #9e9e9e;
}
.eg {
display: flex;
flex-wrap: wrap;
align-self: center;
justify-self: center;
gap: 20px;
align-items: center;
justify-content: center;
width: 100%;
}
}
table {
width: 100%;
padding-left: 20px;
tr {
width: 100%;
td {
width: 50%;
padding-bottom: 10px;
&:last-child {
padding-left: 10px;
}
}
&:last-child {
td {
padding-bottom: 0;
}
}
}
}
}
src/constants.js
-159
View File
@@ -1,159 +0,0 @@
export const EDGE_STATE = {
ACTIVE: "ACTIVE",
NOT_ALLOWED: "NOT_ALLOWED",
HOVERED: "HOOVERED",
};
export const EXAMPLE_GRID_PROPS = {
dim: [7, 7],
edges: [
{a: [0, 0], b: [0, 1]},
{a: [0, 0], b: [1, 0]},
{a: [0, 1], b: [0, 2], notAllowed: true},
{a: [0, 1], b: [1, 1]},
{a: [0, 2], b: [0, 3], notAllowed: true},
{a: [0, 2], b: [1, 2], notAllowed: true},
{a: [0, 3], b: [0, 4]},
{a: [0, 3], b: [1, 3]},
{a: [0, 4], b: [0, 5]},
{a: [0, 4], b: [1, 4], notAllowed: true},
{a: [0, 5], b: [0, 6]},
{a: [0, 5], b: [1, 5], notAllowed: true},
{a: [0, 6], b: [0, 7]},
{a: [0, 6], b: [1, 6], notAllowed: true},
{a: [0, 7], b: [1, 7]},
{a: [1, 0], b: [1, 1], notAllowed: true},
{a: [1, 0], b: [2, 0]},
{a: [1, 1], b: [1, 2]},
{a: [1, 2], b: [1, 3], notAllowed: true},
{a: [1, 2], b: [2, 2]},
{a: [1, 3], b: [1, 4]},
{a: [1, 3], b: [2, 3], notAllowed: true},
{a: [1, 4], b: [1, 5]},
{a: [1, 4], b: [2, 4], notAllowed: true},
{a: [1, 5], b: [1, 6]},
{a: [1, 5], b: [2, 5], notAllowed: true},
{a: [1, 6], b: [1, 7], notAllowed: true},
{a: [1, 6], b: [2, 6]},
{a: [1, 7], b: [2, 7]},
{a: [2, 0], b: [2, 1]},
{a: [2, 1], b: [3, 1]},
{a: [2, 2], b: [2, 3]},
{a: [2, 2], b: [3, 2], notAllowed: true},
{a: [2, 3], b: [2, 4], notAllowed: true},
{a: [2, 3], b: [3, 3]},
{a: [2, 4], b: [2, 5], notAllowed: true},
{a: [2, 4], b: [3, 4], notAllowed: true},
{a: [2, 5], b: [2, 6]},
{a: [2, 5], b: [3, 5]},
{a: [2, 6], b: [2, 7], notAllowed: true},
{a: [2, 6], b: [3, 6], notAllowed: true},
{a: [2, 7], b: [3, 7]},
{a: [3, 0], b: [3, 1], notAllowed: true},
{a: [3, 1], b: [3, 2]},
{a: [3, 1], b: [4, 1], notAllowed: true},
{a: [3, 2], b: [4, 2]},
{a: [3, 3], b: [3, 4]},
{a: [3, 4], b: [3, 5], notAllowed: true},
{a: [3, 4], b: [4, 4]},
{a: [3, 5], b: [3, 6], notAllowed: true},
{a: [3, 5], b: [4, 5]},
{a: [3, 6], b: [3, 7]},
{a: [3, 6], b: [4, 6]},
{a: [4, 0], b: [4, 1], notAllowed: true},
{a: [4, 1], b: [4, 2], notAllowed: true},
{a: [4, 1], b: [5, 1], notAllowed: true},
{a: [4, 2], b: [4, 3]},
{a: [4, 2], b: [5, 2], notAllowed: true},
{a: [4, 3], b: [4, 4], notAllowed: true},
{a: [4, 3], b: [5, 3]},
{a: [4, 4], b: [4, 5]},
{a: [4, 4], b: [5, 4], notAllowed: true},
{a: [4, 5], b: [4, 6], notAllowed: true},
{a: [4, 5], b: [5, 5], notAllowed: true},
{a: [4, 6], b: [4, 7]},
{a: [4, 6], b: [5, 6], notAllowed: true},
{a: [4, 7], b: [5, 7]},
{a: [5, 0], b: [5, 1], notAllowed: true},
{a: [5, 1], b: [5, 2]},
{a: [5, 1], b: [6, 1]},
{a: [5, 2], b: [5, 3]},
{a: [5, 2], b: [6, 2], notAllowed: true},
{a: [5, 3], b: [5, 4], notAllowed: true},
{a: [5, 3], b: [6, 3], notAllowed: true},
{a: [5, 4], b: [5, 5]},
{a: [5, 4], b: [6, 4]},
{a: [5, 5], b: [5, 6], notAllowed: true},
{a: [5, 5], b: [6, 5]},
{a: [5, 6], b: [5, 7]},
{a: [5, 6], b: [6, 6]},
{a: [6, 0], b: [6, 1]},
{a: [6, 0], b: [7, 0]},
{a: [6, 1], b: [7, 1], notAllowed: true},
{a: [6, 2], b: [6, 3]},
{a: [6, 2], b: [7, 2]},
{a: [6, 3], b: [6, 4], notAllowed: true},
{a: [6, 3], b: [7, 3]},
{a: [6, 4], b: [6, 5], notAllowed: true},
{a: [6, 4], b: [7, 4]},
{a: [6, 5], b: [6, 6], notAllowed: true},
{a: [6, 5], b: [7, 5]},
{a: [6, 6], b: [6, 7]},
{a: [6, 6], b: [7, 6], notAllowed: true},
{a: [6, 7], b: [7, 7]},
{a: [7, 0], b: [7, 1]},
{a: [7, 1], b: [7, 2]},
{a: [7, 3], b: [7, 4]},
{a: [7, 5], b: [7, 6]},
{a: [7, 6], b: [7, 7]},
],
numbers: [
{r: 1, c: 4, n: 3},
{r: 1, c: 5, n: 2},
{r: 1, c: 6, n: 2},
{r: 2, c: 1, n: 2},
{r: 2, c: 2, n: 2},
{r: 2, c: 3, n: 2},
{r: 2, c: 6, n: 3},
{r: 3, c: 1, n: 2},
{r: 3, c: 2, n: 2},
{r: 3, c: 5, n: 1},
{r: 3, c: 6, n: 2},
{r: 4, c: 3, n: 2},
{r: 4, c: 5, n: 3},
{r: 4, c: 7, n: 3},
{r: 5, c: 1, n: 0},
{r: 5, c: 6, n: 0},
{r: 5, c: 7, n: 3},
{r: 6, c: 1, n: 2},
{r: 6, c: 7, n: 3},
{r: 7, c: 2, n: 2},
{r: 7, c: 3, n: 3},
{r: 7, c: 5, n: 2},
],
};
export const NOT_ALLOWED_1_GRID_PROPS = {
dim: [2, 2],
edges: [
{a: [0, 1], b: [1, 1], hovered: true},
{a: [1, 0], b: [1, 1], hovered: true},
{a: [1, 1], b: [1, 2]},
{a: [1, 1], b: [2, 1]},
],
numbers: [{r: 2, c: 2, n: 2}],
};
export const NOT_ALLOWED_2_GRID_PROPS = {
dim: [2, 3],
edges: [
{a: [0, 1], b: [1, 1]},
{a: [0, 2], b: [1, 2]},
{a: [1, 0], b: [1, 1], hovered: true},
{a: [1, 1], b: [1, 2]},
{a: [1, 1], b: [2, 1], hovered: true},
{a: [1, 2], b: [1, 3], hovered: true},
{a: [1, 2], b: [2, 2], hovered: true},
],
numbers: [{r: 1, c: 2, n: 3}],
};
src/examples.js
-608
View File
@@ -1,608 +0,0 @@
export const examples = [
{
dim: [7, 7],
numbers: [
{r: 1, c: 2, n: 2},
{r: 1, c: 7, n: 3},
{r: 2, c: 2, n: 3},
{r: 2, c: 4, n: 2},
{r: 2, c: 5, n: 2},
{r: 2, c: 7, n: 1},
{r: 3, c: 2, n: 3},
{r: 3, c: 3, n: 2},
{r: 3, c: 4, n: 2},
{r: 3, c: 6, n: 2},
{r: 3, c: 7, n: 2},
{r: 4, c: 3, n: 2},
{r: 4, c: 4, n: 0},
{r: 4, c: 5, n: 3},
{r: 4, c: 6, n: 2},
{r: 5, c: 3, n: 2},
{r: 5, c: 5, n: 3},
{r: 5, c: 6, n: 2},
{r: 6, c: 2, n: 2},
{r: 6, c: 3, n: 1},
{r: 6, c: 5, n: 1},
{r: 7, c: 5, n: 3},
{r: 7, c: 7, n: 3},
],
solution: [
{a: [0, 0], b: [0, 1]},
{a: [0, 0], b: [1, 0]},
{a: [0, 1], b: [1, 1]},
{a: [0, 3], b: [0, 4]},
{a: [0, 3], b: [1, 3]},
{a: [0, 4], b: [1, 4]},
{a: [0, 6], b: [0, 7]},
{a: [0, 6], b: [1, 6]},
{a: [0, 7], b: [1, 7]},
{a: [1, 0], b: [2, 0]},
{a: [1, 1], b: [1, 2]},
{a: [1, 2], b: [2, 2]},
{a: [1, 3], b: [2, 3]},
{a: [1, 4], b: [2, 4]},
{a: [1, 5], b: [1, 6]},
{a: [1, 5], b: [2, 5]},
{a: [1, 7], b: [2, 7]},
{a: [2, 0], b: [3, 0]},
{a: [2, 1], b: [2, 2]},
{a: [2, 1], b: [3, 1]},
{a: [2, 3], b: [3, 3]},
{a: [2, 4], b: [3, 4]},
{a: [2, 5], b: [2, 6]},
{a: [2, 6], b: [3, 6]},
{a: [2, 7], b: [3, 7]},
{a: [3, 0], b: [4, 0]},
{a: [3, 1], b: [3, 2]},
{a: [3, 2], b: [3, 3]},
{a: [3, 4], b: [3, 5]},
{a: [3, 5], b: [4, 5]},
{a: [3, 6], b: [4, 6]},
{a: [3, 7], b: [4, 7]},
{a: [4, 0], b: [5, 0]},
{a: [4, 1], b: [4, 2]},
{a: [4, 1], b: [5, 1]},
{a: [4, 2], b: [4, 3]},
{a: [4, 3], b: [5, 3]},
{a: [4, 4], b: [4, 5]},
{a: [4, 4], b: [5, 4]},
{a: [4, 6], b: [5, 6]},
{a: [4, 7], b: [5, 7]},
{a: [5, 0], b: [6, 0]},
{a: [5, 1], b: [6, 1]},
{a: [5, 3], b: [6, 3]},
{a: [5, 4], b: [5, 5]},
{a: [5, 5], b: [5, 6]},
{a: [5, 7], b: [6, 7]},
{a: [6, 0], b: [7, 0]},
{a: [6, 1], b: [6, 2]},
{a: [6, 2], b: [7, 2]},
{a: [6, 3], b: [6, 4]},
{a: [6, 4], b: [7, 4]},
{a: [6, 5], b: [6, 6]},
{a: [6, 5], b: [7, 5]},
{a: [6, 6], b: [7, 6]},
{a: [6, 7], b: [7, 7]},
{a: [7, 0], b: [7, 1]},
{a: [7, 1], b: [7, 2]},
{a: [7, 4], b: [7, 5]},
{a: [7, 6], b: [7, 7]},
],
},
{
dim: [7, 7],
numbers: [
{r: 1, c: 4, n: 1},
{r: 1, c: 7, n: 3},
{r: 2, c: 1, n: 2},
{r: 2, c: 2, n: 2},
{r: 2, c: 3, n: 3},
{r: 2, c: 4, n: 3},
{r: 2, c: 5, n: 2},
{r: 3, c: 1, n: 2},
{r: 3, c: 2, n: 2},
{r: 3, c: 5, n: 2},
{r: 3, c: 6, n: 2},
{r: 3, c: 7, n: 3},
{r: 4, c: 1, n: 3},
{r: 4, c: 2, n: 0},
{r: 4, c: 3, n: 2},
{r: 4, c: 7, n: 3},
{r: 5, c: 1, n: 3},
{r: 5, c: 5, n: 3},
{r: 5, c: 6, n: 2},
{r: 6, c: 2, n: 1},
{r: 6, c: 4, n: 2},
{r: 6, c: 6, n: 3},
{r: 7, c: 2, n: 2},
{r: 7, c: 6, n: 2},
],
solution: [
{a: [0, 0], b: [0, 1]},
{a: [0, 0], b: [1, 0]},
{a: [0, 1], b: [0, 2]},
{a: [0, 2], b: [0, 3]},
{a: [0, 3], b: [0, 4]},
{a: [0, 4], b: [0, 5]},
{a: [0, 5], b: [0, 6]},
{a: [0, 6], b: [0, 7]},
{a: [0, 7], b: [1, 7]},
{a: [1, 0], b: [1, 1]},
{a: [1, 1], b: [2, 1]},
{a: [1, 2], b: [1, 3]},
{a: [1, 2], b: [2, 2]},
{a: [1, 3], b: [2, 3]},
{a: [1, 4], b: [1, 5]},
{a: [1, 4], b: [2, 4]},
{a: [1, 5], b: [1, 6]},
{a: [1, 6], b: [1, 7]},
{a: [2, 1], b: [3, 1]},
{a: [2, 2], b: [3, 2]},
{a: [2, 3], b: [2, 4]},
{a: [2, 5], b: [2, 6]},
{a: [2, 5], b: [3, 5]},
{a: [2, 6], b: [2, 7]},
{a: [2, 7], b: [3, 7]},
{a: [3, 0], b: [3, 1]},
{a: [3, 0], b: [4, 0]},
{a: [3, 2], b: [3, 3]},
{a: [3, 3], b: [3, 4]},
{a: [3, 4], b: [3, 5]},
{a: [3, 6], b: [3, 7]},
{a: [3, 6], b: [4, 6]},
{a: [4, 0], b: [4, 1]},
{a: [4, 1], b: [5, 1]},
{a: [4, 2], b: [4, 3]},
{a: [4, 2], b: [5, 2]},
{a: [4, 3], b: [5, 3]},
{a: [4, 4], b: [4, 5]},
{a: [4, 4], b: [5, 4]},
{a: [4, 5], b: [5, 5]},
{a: [4, 6], b: [4, 7]},
{a: [4, 7], b: [5, 7]},
{a: [5, 0], b: [5, 1]},
{a: [5, 0], b: [6, 0]},
{a: [5, 2], b: [6, 2]},
{a: [5, 3], b: [5, 4]},
{a: [5, 5], b: [5, 6]},
{a: [5, 6], b: [6, 6]},
{a: [5, 7], b: [6, 7]},
{a: [6, 0], b: [7, 0]},
{a: [6, 2], b: [7, 2]},
{a: [6, 3], b: [6, 4]},
{a: [6, 3], b: [7, 3]},
{a: [6, 4], b: [6, 5]},
{a: [6, 5], b: [6, 6]},
{a: [6, 7], b: [7, 7]},
{a: [7, 0], b: [7, 1]},
{a: [7, 1], b: [7, 2]},
{a: [7, 3], b: [7, 4]},
{a: [7, 4], b: [7, 5]},
{a: [7, 5], b: [7, 6]},
{a: [7, 6], b: [7, 7]},
],
},
{
dim: [7, 7],
numbers: [
{r: 1, c: 2, n: 2},
{r: 1, c: 4, n: 3},
{r: 1, c: 5, n: 2},
{r: 1, c: 6, n: 3},
{r: 2, c: 2, n: 1},
{r: 2, c: 3, n: 3},
{r: 2, c: 4, n: 2},
{r: 2, c: 6, n: 2},
{r: 3, c: 2, n: 2},
{r: 3, c: 4, n: 0},
{r: 3, c: 5, n: 3},
{r: 4, c: 1, n: 1},
{r: 4, c: 2, n: 2},
{r: 4, c: 3, n: 3},
{r: 4, c: 5, n: 3},
{r: 5, c: 1, n: 2},
{r: 5, c: 2, n: 2},
{r: 5, c: 3, n: 1},
{r: 5, c: 4, n: 1},
{r: 5, c: 5, n: 1},
{r: 5, c: 6, n: 2},
{r: 6, c: 1, n: 2},
{r: 6, c: 3, n: 2},
{r: 7, c: 4, n: 2},
{r: 7, c: 5, n: 3},
{r: 7, c: 7, n: 3},
],
solution: [
{a: [0, 0], b: [0, 1]},
{a: [0, 0], b: [1, 0]},
{a: [0, 1], b: [0, 2]},
{a: [0, 2], b: [1, 2]},
{a: [0, 3], b: [0, 4]},
{a: [0, 3], b: [1, 3]},
{a: [0, 4], b: [1, 4]},
{a: [0, 5], b: [0, 6]},
{a: [0, 5], b: [1, 5]},
{a: [0, 6], b: [0, 7]},
{a: [0, 7], b: [1, 7]},
{a: [1, 0], b: [2, 0]},
{a: [1, 2], b: [2, 2]},
{a: [1, 3], b: [2, 3]},
{a: [1, 4], b: [2, 4]},
{a: [1, 5], b: [1, 6]},
{a: [1, 6], b: [2, 6]},
{a: [1, 7], b: [2, 7]},
{a: [2, 0], b: [2, 1]},
{a: [2, 1], b: [3, 1]},
{a: [2, 2], b: [2, 3]},
{a: [2, 4], b: [2, 5]},
{a: [2, 5], b: [3, 5]},
{a: [2, 6], b: [3, 6]},
{a: [2, 7], b: [3, 7]},
{a: [3, 1], b: [3, 2]},
{a: [3, 2], b: [3, 3]},
{a: [3, 3], b: [4, 3]},
{a: [3, 4], b: [3, 5]},
{a: [3, 4], b: [4, 4]},
{a: [3, 6], b: [4, 6]},
{a: [3, 7], b: [4, 7]},
{a: [4, 0], b: [4, 1]},
{a: [4, 0], b: [5, 0]},
{a: [4, 1], b: [4, 2]},
{a: [4, 2], b: [4, 3]},
{a: [4, 4], b: [4, 5]},
{a: [4, 5], b: [4, 6]},
{a: [4, 7], b: [5, 7]},
{a: [5, 0], b: [6, 0]},
{a: [5, 1], b: [5, 2]},
{a: [5, 1], b: [6, 1]},
{a: [5, 2], b: [6, 2]},
{a: [5, 3], b: [5, 4]},
{a: [5, 3], b: [6, 3]},
{a: [5, 4], b: [6, 4]},
{a: [5, 5], b: [5, 6]},
{a: [5, 5], b: [6, 5]},
{a: [5, 6], b: [6, 6]},
{a: [5, 7], b: [6, 7]},
{a: [6, 0], b: [7, 0]},
{a: [6, 1], b: [7, 1]},
{a: [6, 2], b: [7, 2]},
{a: [6, 3], b: [7, 3]},
{a: [6, 4], b: [7, 4]},
{a: [6, 5], b: [7, 5]},
{a: [6, 6], b: [7, 6]},
{a: [6, 7], b: [7, 7]},
{a: [7, 0], b: [7, 1]},
{a: [7, 2], b: [7, 3]},
{a: [7, 4], b: [7, 5]},
{a: [7, 6], b: [7, 7]},
],
},
{
dim: [7, 7],
numbers: [
{r: 1, c: 2, n: 2},
{r: 1, c: 3, n: 2},
{r: 1, c: 4, n: 2},
{r: 1, c: 5, n: 2},
{r: 1, c: 6, n: 2},
{r: 1, c: 7, n: 2},
{r: 2, c: 1, n: 2},
{r: 2, c: 7, n: 2},
{r: 3, c: 1, n: 2},
{r: 3, c: 3, n: 2},
{r: 3, c: 4, n: 2},
{r: 3, c: 5, n: 2},
{r: 3, c: 7, n: 2},
{r: 4, c: 1, n: 3},
{r: 4, c: 5, n: 2},
{r: 4, c: 7, n: 2},
{r: 5, c: 2, n: 1},
{r: 5, c: 4, n: 3},
{r: 5, c: 5, n: 0},
{r: 5, c: 6, n: 2},
{r: 5, c: 7, n: 1},
{r: 6, c: 1, n: 2},
{r: 6, c: 2, n: 3},
{r: 6, c: 4, n: 3},
{r: 6, c: 5, n: 2},
{r: 7, c: 5, n: 2},
{r: 7, c: 6, n: 2},
],
solution: [
{a: [0, 0], b: [0, 1]},
{a: [0, 0], b: [1, 0]},
{a: [0, 1], b: [0, 2]},
{a: [0, 2], b: [0, 3]},
{a: [0, 3], b: [0, 4]},
{a: [0, 4], b: [0, 5]},
{a: [0, 5], b: [0, 6]},
{a: [0, 6], b: [0, 7]},
{a: [0, 7], b: [1, 7]},
{a: [1, 0], b: [1, 1]},
{a: [1, 1], b: [1, 2]},
{a: [1, 2], b: [1, 3]},
{a: [1, 3], b: [1, 4]},
{a: [1, 4], b: [1, 5]},
{a: [1, 5], b: [1, 6]},
{a: [1, 6], b: [2, 6]},
{a: [1, 7], b: [2, 7]},
{a: [2, 0], b: [2, 1]},
{a: [2, 0], b: [3, 0]},
{a: [2, 1], b: [2, 2]},
{a: [2, 2], b: [2, 3]},
{a: [2, 3], b: [2, 4]},
{a: [2, 4], b: [2, 5]},
{a: [2, 5], b: [3, 5]},
{a: [2, 6], b: [3, 6]},
{a: [2, 7], b: [3, 7]},
{a: [3, 0], b: [4, 0]},
{a: [3, 1], b: [3, 2]},
{a: [3, 1], b: [4, 1]},
{a: [3, 2], b: [3, 3]},
{a: [3, 3], b: [3, 4]},
{a: [3, 4], b: [4, 4]},
{a: [3, 5], b: [4, 5]},
{a: [3, 6], b: [4, 6]},
{a: [3, 7], b: [4, 7]},
{a: [4, 0], b: [4, 1]},
{a: [4, 3], b: [4, 4]},
{a: [4, 3], b: [5, 3]},
{a: [4, 5], b: [4, 6]},
{a: [4, 7], b: [5, 7]},
{a: [5, 1], b: [5, 2]},
{a: [5, 1], b: [6, 1]},
{a: [5, 2], b: [6, 2]},
{a: [5, 3], b: [5, 4]},
{a: [5, 4], b: [6, 4]},
{a: [5, 5], b: [5, 6]},
{a: [5, 5], b: [6, 5]},
{a: [5, 6], b: [6, 6]},
{a: [5, 7], b: [6, 7]},
{a: [6, 0], b: [6, 1]},
{a: [6, 0], b: [7, 0]},
{a: [6, 2], b: [6, 3]},
{a: [6, 3], b: [6, 4]},
{a: [6, 5], b: [7, 5]},
{a: [6, 6], b: [7, 6]},
{a: [6, 7], b: [7, 7]},
{a: [7, 0], b: [7, 1]},
{a: [7, 1], b: [7, 2]},
{a: [7, 2], b: [7, 3]},
{a: [7, 3], b: [7, 4]},
{a: [7, 4], b: [7, 5]},
{a: [7, 6], b: [7, 7]},
],
},
{
dim: [5, 5],
numbers: [
{r: 1, c: 2, n: 3},
{r: 1, c: 3, n: 1},
{r: 1, c: 4, n: 2},
{r: 2, c: 2, n: 3},
{r: 2, c: 5, n: 2},
{r: 3, c: 2, n: 2},
{r: 3, c: 5, n: 3},
{r: 4, c: 1, n: 2},
{r: 4, c: 3, n: 1},
{r: 4, c: 5, n: 2},
{r: 5, c: 1, n: 0},
{r: 5, c: 4, n: 3},
],
solution: [
{a: [0, 0], b: [0, 1]},
{a: [0, 0], b: [1, 0]},
{a: [0, 1], b: [0, 2]},
{a: [0, 2], b: [1, 2]},
{a: [0, 4], b: [0, 5]},
{a: [0, 4], b: [1, 4]},
{a: [0, 5], b: [1, 5]},
{a: [1, 0], b: [2, 0]},
{a: [1, 1], b: [1, 2]},
{a: [1, 1], b: [2, 1]},
{a: [1, 3], b: [1, 4]},
{a: [1, 3], b: [2, 3]},
{a: [1, 5], b: [2, 5]},
{a: [2, 0], b: [3, 0]},
{a: [2, 1], b: [2, 2]},
{a: [2, 2], b: [3, 2]},
{a: [2, 3], b: [3, 3]},
{a: [2, 4], b: [2, 5]},
{a: [2, 4], b: [3, 4]},
{a: [3, 0], b: [3, 1]},
{a: [3, 1], b: [4, 1]},
{a: [3, 2], b: [3, 3]},
{a: [3, 4], b: [3, 5]},
{a: [3, 5], b: [4, 5]},
{a: [4, 1], b: [4, 2]},
{a: [4, 2], b: [5, 2]},
{a: [4, 3], b: [4, 4]},
{a: [4, 3], b: [5, 3]},
{a: [4, 4], b: [5, 4]},
{a: [4, 5], b: [5, 5]},
{a: [5, 2], b: [5, 3]},
{a: [5, 4], b: [5, 5]},
],
},
{
dim: [7, 7],
numbers: [
{r: 1, c: 3, n: 2},
{r: 2, c: 1, n: 2},
{r: 2, c: 2, n: 3},
{r: 2, c: 4, n: 2},
{r: 2, c: 6, n: 2},
{r: 3, c: 3, n: 1},
{r: 3, c: 5, n: 3},
{r: 4, c: 3, n: 2},
{r: 4, c: 4, n: 3},
{r: 4, c: 6, n: 3},
{r: 4, c: 7, n: 2},
{r: 5, c: 1, n: 3},
{r: 5, c: 3, n: 0},
{r: 5, c: 4, n: 2},
{r: 6, c: 1, n: 2},
{r: 6, c: 2, n: 3},
{r: 6, c: 6, n: 2},
{r: 7, c: 3, n: 1},
{r: 7, c: 5, n: 3},
{r: 7, c: 7, n: 3},
],
solution: [
{a: [0, 0], b: [0, 1]},
{a: [0, 0], b: [1, 0]},
{a: [0, 1], b: [1, 1]},
{a: [0, 2], b: [0, 3]},
{a: [0, 2], b: [1, 2]},
{a: [0, 3], b: [0, 4]},
{a: [0, 4], b: [1, 4]},
{a: [0, 5], b: [0, 6]},
{a: [0, 5], b: [1, 5]},
{a: [0, 6], b: [0, 7]},
{a: [0, 7], b: [1, 7]},
{a: [1, 0], b: [2, 0]},
{a: [1, 1], b: [2, 1]},
{a: [1, 2], b: [2, 2]},
{a: [1, 3], b: [1, 4]},
{a: [1, 3], b: [2, 3]},
{a: [1, 5], b: [1, 6]},
{a: [1, 6], b: [2, 6]},
{a: [1, 7], b: [2, 7]},
{a: [2, 0], b: [3, 0]},
{a: [2, 1], b: [2, 2]},
{a: [2, 3], b: [3, 3]},
{a: [2, 4], b: [2, 5]},
{a: [2, 4], b: [3, 4]},
{a: [2, 5], b: [3, 5]},
{a: [2, 6], b: [3, 6]},
{a: [2, 7], b: [3, 7]},
{a: [3, 0], b: [3, 1]},
{a: [3, 1], b: [3, 2]},
{a: [3, 2], b: [4, 2]},
{a: [3, 3], b: [4, 3]},
{a: [3, 4], b: [4, 4]},
{a: [3, 5], b: [4, 5]},
{a: [3, 6], b: [4, 6]},
{a: [3, 7], b: [4, 7]},
{a: [4, 0], b: [4, 1]},
{a: [4, 0], b: [5, 0]},
{a: [4, 1], b: [4, 2]},
{a: [4, 3], b: [4, 4]},
{a: [4, 5], b: [4, 6]},
{a: [4, 7], b: [5, 7]},
{a: [5, 0], b: [5, 1]},
{a: [5, 1], b: [5, 2]},
{a: [5, 2], b: [6, 2]},
{a: [5, 3], b: [5, 4]},
{a: [5, 3], b: [6, 3]},
{a: [5, 4], b: [5, 5]},
{a: [5, 5], b: [5, 6]},
{a: [5, 6], b: [6, 6]},
{a: [5, 7], b: [6, 7]},
{a: [6, 0], b: [6, 1]},
{a: [6, 0], b: [7, 0]},
{a: [6, 1], b: [6, 2]},
{a: [6, 3], b: [6, 4]},
{a: [6, 4], b: [6, 5]},
{a: [6, 5], b: [7, 5]},
{a: [6, 6], b: [7, 6]},
{a: [6, 7], b: [7, 7]},
{a: [7, 0], b: [7, 1]},
{a: [7, 1], b: [7, 2]},
{a: [7, 2], b: [7, 3]},
{a: [7, 3], b: [7, 4]},
{a: [7, 4], b: [7, 5]},
{a: [7, 6], b: [7, 7]},
],
},
{
dim: [7, 7],
numbers: [
{r: 1, c: 3, n: 1},
{r: 1, c: 6, n: 3},
{r: 1, c: 7, n: 2},
{r: 2, c: 1, n: 2},
{r: 2, c: 4, n: 2},
{r: 2, c: 7, n: 2},
{r: 3, c: 2, n: 2},
{r: 3, c: 3, n: 1},
{r: 3, c: 4, n: 2},
{r: 3, c: 5, n: 0},
{r: 3, c: 6, n: 3},
{r: 4, c: 1, n: 2},
{r: 4, c: 4, n: 2},
{r: 4, c: 5, n: 3},
{r: 5, c: 1, n: 3},
{r: 5, c: 4, n: 2},
{r: 5, c: 6, n: 2},
{r: 6, c: 1, n: 2},
{r: 6, c: 2, n: 2},
{r: 6, c: 3, n: 2},
{r: 6, c: 7, n: 1},
{r: 7, c: 2, n: 2},
{r: 7, c: 5, n: 1},
],
solution: [
{a: [0, 0], b: [0, 1]},
{a: [0, 0], b: [1, 0]},
{a: [0, 1], b: [0, 2]},
{a: [0, 2], b: [0, 3]},
{a: [0, 3], b: [0, 4]},
{a: [0, 4], b: [1, 4]},
{a: [0, 5], b: [0, 6]},
{a: [0, 5], b: [1, 5]},
{a: [0, 6], b: [1, 6]},
{a: [1, 0], b: [1, 1]},
{a: [1, 1], b: [1, 2]},
{a: [1, 2], b: [2, 2]},
{a: [1, 3], b: [1, 4]},
{a: [1, 3], b: [2, 3]},
{a: [1, 5], b: [2, 5]},
{a: [1, 6], b: [1, 7]},
{a: [1, 7], b: [2, 7]},
{a: [2, 0], b: [2, 1]},
{a: [2, 0], b: [3, 0]},
{a: [2, 1], b: [2, 2]},
{a: [2, 3], b: [3, 3]},
{a: [2, 5], b: [2, 6]},
{a: [2, 6], b: [3, 6]},
{a: [2, 7], b: [3, 7]},
{a: [3, 0], b: [3, 1]},
{a: [3, 1], b: [3, 2]},
{a: [3, 2], b: [4, 2]},
{a: [3, 3], b: [3, 4]},
{a: [3, 4], b: [4, 4]},
{a: [3, 5], b: [3, 6]},
{a: [3, 5], b: [4, 5]},
{a: [3, 7], b: [4, 7]},
{a: [4, 0], b: [4, 1]},
{a: [4, 0], b: [5, 0]},
{a: [4, 1], b: [5, 1]},
{a: [4, 2], b: [4, 3]},
{a: [4, 3], b: [5, 3]},
{a: [4, 4], b: [4, 5]},
{a: [4, 6], b: [4, 7]},
{a: [4, 6], b: [5, 6]},
{a: [5, 0], b: [6, 0]},
{a: [5, 1], b: [5, 2]},
{a: [5, 2], b: [6, 2]},
{a: [5, 3], b: [5, 4]},
{a: [5, 4], b: [6, 4]},
{a: [5, 5], b: [5, 6]},
{a: [5, 5], b: [6, 5]},
{a: [6, 0], b: [6, 1]},
{a: [6, 1], b: [7, 1]},
{a: [6, 2], b: [6, 3]},
{a: [6, 3], b: [6, 4]},
{a: [6, 5], b: [6, 6]},
{a: [6, 6], b: [6, 7]},
{a: [6, 7], b: [7, 7]},
{a: [7, 1], b: [7, 2]},
{a: [7, 2], b: [7, 3]},
{a: [7, 3], b: [7, 4]},
{a: [7, 4], b: [7, 5]},
{a: [7, 5], b: [7, 6]},
{a: [7, 6], b: [7, 7]},
],
},
];
src/index.scss
-13
View File
@@ -1,13 +0,0 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
src/main.ts
+10
View File
@@ -0,0 +1,10 @@
import { mount } from 'svelte'
import './app.scss'
import './global.sass'
import App from './App.svelte'
const app = mount(App, {
target: document.getElementById('app')!,
})
export default app
src/main.tsx
-5
View File
@@ -1,5 +0,0 @@
import { render } from 'preact'
import './index.scss'
import App from './App.tsx'
render(<App />, document.getElementById('app')!)
src/reportWebVitals.js
-13
View File
@@ -1,13 +0,0 @@
const reportWebVitals = (onPerfEntry) => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import("web-vitals").then(({getCLS, getFID, getFCP, getLCP, getTTFB}) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;
src/setupTests.js
-5
View File
@@ -1,5 +0,0 @@
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import "@testing-library/jest-dom";
src/utils.js
-191
View File
@@ -1,191 +0,0 @@
import {DEFAULT_NODE} from "./components/Grid";
import {EDGE_STATE} from "./constants";
// get deep copy of JSON
export const copy = (json) => JSON.parse(JSON.stringify(json));
// to get multiple styles in space-seperated format
export const multiStyles = (styles, classNames) =>
classNames
.reduce(
(classNames, className) => [
...classNames,
...(!className ? [] : [styles?.[className] || className]),
],
[]
)
.join(" ");
// to check if number is valid number
export const isValid = (n, lim) => n >= 0 && n <= lim;
// to check all elements are valid numbers
export const areValid = (n, lim) => n.every((n) => isValid(n, lim));
export const getMatrix = ([dim1, dim2], edges = [], numbers = []) => {
const nRows = dim1;
const nCols = dim2;
let temp = new Array(dim1 + 1)
.fill(0)
.map(() => new Array(dim2 + 1).fill(DEFAULT_NODE));
if (numbers.length > 0) {
numbers.forEach(({r, c, n}) => {
if (r <= nRows && c <= nCols) {
temp[r - 1][c - 1] = {...temp[r - 1][c - 1], n};
}
});
}
if (edges.length > 0) {
edges.forEach(({a: [sx, sy], b: [ex, ey], notAllowed, hovered}) => {
const edgeState = notAllowed
? EDGE_STATE.NOT_ALLOWED
: hovered
? EDGE_STATE.HOVERED
: EDGE_STATE.ACTIVE;
let startX, startY, endX, endY, hor, ver;
hor = sx === ex;
ver = sy === ey;
// excluding cases where both points are same
// or where edge is not hor | ver
// Assumption: all edges are between two adjacent nodes
if ((hor && ver) || (!hor && !ver)) {
return;
}
// horizonal line
if (hor) {
startX = endX = sx;
if (sy > ey) {
startY = ey;
endY = sy;
}
if (sy < ey) {
startY = sy;
endY = ey;
}
}
// vertical line
if (ver) {
startY = endY = sy;
if (sx > ex) {
startX = ex;
endX = sx;
}
if (sx < ex) {
startX = sx;
endX = ex;
}
}
// check if all nodes are valid nodes
if (areValid([startX, endX], nRows) && areValid([startY, endY], nCols)) {
temp[startX][startY] = {
...temp[startX][startY],
neigh: [
...temp[startX][startY].neigh,
{state: edgeState, loc: [endX, endY]},
],
};
temp[endX][endY] = {
...temp[endX][endY],
neigh: [
...temp[endX][endY].neigh,
{state: edgeState, loc: [startX, startY]},
],
};
}
});
}
return temp;
};
// to check if a node has an active edge
export const isNodeActive = (n) =>
Array.isArray(n?.neigh) &&
n.neigh.some((neighbor) => neighbor.state === EDGE_STATE.ACTIVE);
// to get neighbors from matrix
export const getNeighbors = ([ax, ay], mat) => {
return mat[ax][ay]?.neigh || [];
};
// to check if two nodes are neighbor in a matrix
export const findNeighbor = ([ax, ay], [bx, by], mat) => {
const index = mat?.[ax]?.[ay]?.neigh.findIndex(
({loc}) => loc[0] === bx && loc[1] === by
);
return isNaN(index) ? -1 : index;
};
// get an array of all numbers present in the matrix
export const getNumbers = (mat) => {
let numbers = [];
let nRow = mat?.length;
let nCol = mat?.[0]?.length;
if (!nRow || !nCol) {
return;
}
mat.forEach((row, r) => {
if (r >= nRow - 1) return;
row.forEach((node, c) => {
if (c >= nCol - 1) return;
numbers = [
...numbers,
...(node.n > -1 ? [{r: r + 1, c: c + 1, n: node.n}] : []),
];
});
});
return numbers;
};
// get an array of all edges present in the matrix
export const getEdges = (mat) => {
let edges = [];
mat.forEach((row, sX) => {
row.forEach((node, sY) => {
let horEdges = [];
let verEdges = [];
node.neigh.forEach((edge) => {
const [eX, eY] = edge.loc;
if (eX > sX && eY === sY) {
verEdges = [
...verEdges,
{
a: [sX, sY],
b: [eX, eY],
...(edge?.state === EDGE_STATE.NOT_ALLOWED
? {notAllowed: true}
: {}),
...(edge?.state === EDGE_STATE.HOVERED ? {hovered: true} : {}),
},
];
} else if (eY > sY && eX === sX) {
horEdges = [
...horEdges,
{
a: [sX, sY],
b: [eX, eY],
...(edge?.state === EDGE_STATE.NOT_ALLOWED
? {notAllowed: true}
: {}),
...(edge?.state === EDGE_STATE.HOVERED ? {hovered: true} : {}),
},
];
}
});
edges = [...edges, ...horEdges, ...verEdges];
});
});
return edges;
};
// get an array of all active edges present in the matrix
export const getActiveEdges = (mat) => {
return getEdges(mat).filter((edge) => !edge?.notAllowed && !edge?.hovered);
};
src/vite-env.d.ts
Vendored
+1
View File
@@ -1 +1,2 @@
/// <reference types="svelte" />
/// <reference types="vite/client" />
svelte.config.js
+7
View File
@@ -0,0 +1,7 @@
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
export default {
// Consult https://svelte.dev/docs#compile-time-svelte-preprocess
// for more information about preprocessors
preprocess: vitePreprocess(),
}
tsconfig.app.json
-31
View File
@@ -1,31 +0,0 @@
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,
"paths": {
"react": ["./node_modules/preact/compat/"],
"react-dom": ["./node_modules/preact/compat/"]
},
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
"jsxImportSource": "preact",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["src"]
}
tsconfig.json
+19 -5
View File
@@ -1,7 +1,21 @@
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
]
"extends": "@tsconfig/svelte/tsconfig.json",
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"module": "ESNext",
"resolveJsonModule": true,
/**
* Typecheck JS in `.svelte` and `.js` files by default.
* Disable checkJs if you'd like to use dynamic types in JS.
* Note that setting allowJs false does not prevent the use
* of JS in `.svelte` files.
*/
"allowJs": true,
"checkJs": true,
"isolatedModules": true,
"moduleDetection": "force"
},
"include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
"references": [{ "path": "./tsconfig.node.json" }]
}
tsconfig.node.json
+3 -14
View File
@@ -1,23 +1,12 @@
{
"compilerOptions": {
"composite": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"target": "ES2022",
"lib": ["ES2023"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"module": "ESNext",
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noEmit": true,
"noUncheckedSideEffectImports": true
},
"include": ["vite.config.ts"]
vite.config.ts
+2 -2
View File
@@ -1,7 +1,7 @@
import { defineConfig } from 'vite'
import preact from '@preact/preset-vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
// https://vite.dev/config/
export default defineConfig({
plugins: [preact()],
plugins: [svelte()],
})