[+] Restart project, rewrite in svelte
This commit is contained in:
+20
-22
@@ -1,26 +1,24 @@
|
|||||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
# Logs
|
||||||
|
logs
|
||||||
# dependencies
|
*.log
|
||||||
/node_modules
|
|
||||||
/.pnp
|
|
||||||
.pnp.js
|
|
||||||
|
|
||||||
# testing
|
|
||||||
/coverage
|
|
||||||
|
|
||||||
# production
|
|
||||||
/build
|
|
||||||
|
|
||||||
# misc
|
|
||||||
.DS_Store
|
|
||||||
.env.local
|
|
||||||
.env.development.local
|
|
||||||
.env.test.local
|
|
||||||
.env.production.local
|
|
||||||
|
|
||||||
npm-debug.log*
|
npm-debug.log*
|
||||||
yarn-debug.log*
|
yarn-debug.log*
|
||||||
yarn-error.log*
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
*/.idea
|
node_modules
|
||||||
.idea
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|||||||
Vendored
+3
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"recommendations": ["svelte.svelte-vscode"]
|
||||||
|
}
|
||||||
Vendored
-18
@@ -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",
|
|
||||||
},
|
|
||||||
}
|
|
||||||
@@ -1,4 +1,47 @@
|
|||||||
This is a react app for slither link game with a few predefined puzzles.
|
# Svelte + TS + Vite
|
||||||
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 template should help get you started developing with Svelte and TypeScript in Vite.
|
||||||
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
|
||||||
|
## 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)
|
||||||
|
```
|
||||||
|
|||||||
+6
-28
@@ -1,35 +1,13 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<meta name="theme-color" content="#000000" />
|
<title>Vite + Svelte + TS</title>
|
||||||
<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>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script type="module" src="/src/main.tsx"></script>
|
<script type="module" src="/src/main.ts"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
+9
-7
@@ -1,19 +1,21 @@
|
|||||||
{
|
{
|
||||||
"name": "slither-link",
|
"name": "slither-link-v2",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "tsc -b && vite build",
|
"build": "vite build",
|
||||||
"preview": "vite preview"
|
"preview": "vite preview",
|
||||||
},
|
"check": "svelte-check --tsconfig ./tsconfig.json && tsc -p tsconfig.node.json"
|
||||||
"dependencies": {
|
|
||||||
"preact": "^10.25.0"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@preact/preset-vite": "^2.9.1",
|
"@sveltejs/vite-plugin-svelte": "^5.0.0",
|
||||||
|
"@tsconfig/svelte": "^5.0.4",
|
||||||
"sass-embedded": "^1.83.0",
|
"sass-embedded": "^1.83.0",
|
||||||
|
"svelte": "^5.2.7",
|
||||||
|
"svelte-check": "^4.1.0",
|
||||||
|
"tslib": "^2.8.1",
|
||||||
"typescript": "~5.6.2",
|
"typescript": "~5.6.2",
|
||||||
"vite": "^6.0.1"
|
"vite": "^6.0.1"
|
||||||
}
|
}
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
@@ -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>
|
|
||||||
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
@@ -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"
|
|
||||||
}
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
# https://www.robotstxt.org/robotstxt.html
|
|
||||||
User-agent: *
|
|
||||||
Disallow:
|
|
||||||
@@ -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>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -1,5 +0,0 @@
|
|||||||
body, html, #app {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
import Game from "./components/Game";
|
|
||||||
import "./App.css";
|
|
||||||
|
|
||||||
const App = () => {
|
|
||||||
return <Game />;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default App;
|
|
||||||
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
After Width: | Height: | Size: 1.9 KiB |
@@ -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;
|
|
||||||
@@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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;
|
|
||||||
@@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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;
|
|
||||||
@@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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;
|
|
||||||
@@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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;
|
|
||||||
@@ -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;
|
|
||||||
@@ -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;
|
|
||||||
@@ -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;
|
|
||||||
@@ -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
|
|
||||||
@@ -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;
|
|
||||||
@@ -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;
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
import styles from "../styles.module.scss";
|
|
||||||
|
|
||||||
const Row = ({children}) => <div className={styles.row}>{children}</div>;
|
|
||||||
|
|
||||||
export default Row;
|
|
||||||
@@ -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;
|
|
||||||
@@ -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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -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;
|
|
||||||
@@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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}],
|
|
||||||
};
|
|
||||||
-608
@@ -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]},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
@@ -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;
|
|
||||||
}
|
|
||||||
+10
@@ -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
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
import { render } from 'preact'
|
|
||||||
import './index.scss'
|
|
||||||
import App from './App.tsx'
|
|
||||||
|
|
||||||
render(<App />, document.getElementById('app')!)
|
|
||||||
@@ -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;
|
|
||||||
@@ -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";
|
|
||||||
-191
@@ -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);
|
|
||||||
};
|
|
||||||
Vendored
+1
@@ -1 +1,2 @@
|
|||||||
|
/// <reference types="svelte" />
|
||||||
/// <reference types="vite/client" />
|
/// <reference types="vite/client" />
|
||||||
|
|||||||
@@ -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(),
|
||||||
|
}
|
||||||
@@ -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"]
|
|
||||||
}
|
|
||||||
+19
-5
@@ -1,7 +1,21 @@
|
|||||||
{
|
{
|
||||||
"files": [],
|
"extends": "@tsconfig/svelte/tsconfig.json",
|
||||||
"references": [
|
"compilerOptions": {
|
||||||
{ "path": "./tsconfig.app.json" },
|
"target": "ESNext",
|
||||||
{ "path": "./tsconfig.node.json" }
|
"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" }]
|
||||||
}
|
}
|
||||||
|
|||||||
+3
-14
@@ -1,23 +1,12 @@
|
|||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||||
"target": "ES2022",
|
|
||||||
"lib": ["ES2023"],
|
|
||||||
"module": "ESNext",
|
|
||||||
"skipLibCheck": true,
|
"skipLibCheck": true,
|
||||||
|
"module": "ESNext",
|
||||||
/* Bundler mode */
|
|
||||||
"moduleResolution": "bundler",
|
"moduleResolution": "bundler",
|
||||||
"allowImportingTsExtensions": true,
|
|
||||||
"isolatedModules": true,
|
|
||||||
"moduleDetection": "force",
|
|
||||||
"noEmit": true,
|
|
||||||
|
|
||||||
/* Linting */
|
|
||||||
"strict": true,
|
"strict": true,
|
||||||
"noUnusedLocals": true,
|
"noEmit": true,
|
||||||
"noUnusedParameters": true,
|
|
||||||
"noFallthroughCasesInSwitch": true,
|
|
||||||
"noUncheckedSideEffectImports": true
|
"noUncheckedSideEffectImports": true
|
||||||
},
|
},
|
||||||
"include": ["vite.config.ts"]
|
"include": ["vite.config.ts"]
|
||||||
|
|||||||
+2
-2
@@ -1,7 +1,7 @@
|
|||||||
import { defineConfig } from 'vite'
|
import { defineConfig } from 'vite'
|
||||||
import preact from '@preact/preset-vite'
|
import { svelte } from '@sveltejs/vite-plugin-svelte'
|
||||||
|
|
||||||
// https://vite.dev/config/
|
// https://vite.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [preact()],
|
plugins: [svelte()],
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user