proto-sudoku-wc 0.0.689 → 0.0.691
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{index-4683daff.js → index-af8bf740.js} +15 -4
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/proto-sudoku-wc.cjs.js +2 -2
- package/dist/cjs/proto-sudoku.cjs.entry.js +352 -352
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/proto-sudoku/alert.js +2 -2
- package/dist/collection/components/proto-sudoku/alerts.js +3 -3
- package/dist/collection/components/proto-sudoku/alien.js +5 -5
- package/dist/collection/components/proto-sudoku/button.js +10 -10
- package/dist/collection/components/proto-sudoku/cell.js +20 -20
- package/dist/collection/components/proto-sudoku/eswat2-io.js +1 -1
- package/dist/collection/components/proto-sudoku/fingerprint.js +5 -5
- package/dist/collection/components/proto-sudoku/header.js +1 -1
- package/dist/collection/components/proto-sudoku/keys.js +10 -10
- package/dist/collection/components/proto-sudoku/proto-sudoku.js +62 -62
- package/dist/collection/components/proto-sudoku/spinner.js +5 -5
- package/dist/collection/components/proto-sudoku/sudoku-board.js +6 -6
- package/dist/collection/components/proto-sudoku/tool-bar.js +8 -8
- package/dist/collection/components/proto-sudoku/tw-label.js +1 -1
- package/dist/collection/utils/bag.js +23 -23
- package/dist/collection/utils/store.js +209 -209
- package/dist/collection/utils/tw.js +1 -1
- package/dist/esm/{index-3ccc3f4a.js → index-e105e4de.js} +15 -4
- package/dist/esm/loader.js +2 -2
- package/dist/esm/proto-sudoku-wc.js +3 -3
- package/dist/esm/proto-sudoku.entry.js +352 -352
- package/dist/proto-sudoku-wc/{p-4ab7e5a2.js → p-5c418b3c.js} +1 -1
- package/dist/proto-sudoku-wc/{p-4a14cce4.entry.js → p-c8bb72eb.entry.js} +1 -1
- package/dist/proto-sudoku-wc/proto-sudoku-wc.esm.js +1 -1
- package/dist/types/components/proto-sudoku/alert.d.ts +3 -3
- package/dist/types/components/proto-sudoku/button.d.ts +3 -3
- package/dist/types/components/proto-sudoku/cell.d.ts +4 -4
- package/dist/types/components/proto-sudoku/proto-sudoku.d.ts +4 -4
- package/dist/types/stencil-public-runtime.d.ts +8 -0
- package/dist/types/utils/bag.d.ts +10 -10
- package/dist/types/utils/store.d.ts +5 -5
- package/dist/types/utils/types.d.ts +33 -33
- package/package.json +5 -5
|
@@ -2,8 +2,8 @@ import { h } from "@stencil/core";
|
|
|
2
2
|
import { Alien } from "./alien";
|
|
3
3
|
import { Spinner } from "./spinner";
|
|
4
4
|
const Alert = props => {
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
const { message, salute, spinner = false } = props;
|
|
6
|
+
return (h("div", { class: "mt-5 flex h-24px flex-row items-center" }, spinner ? h(Spinner, { class: "mr-2" }) : h(Alien, { class: "mr-2" }), salute ? h("label", { class: "mr-1 font-bold" }, salute, ":") : '', h("label", { class: "italic" }, message)));
|
|
7
7
|
};
|
|
8
8
|
export { Alert };
|
|
9
9
|
export default Alert;
|
|
@@ -2,9 +2,9 @@ import { h } from "@stencil/core";
|
|
|
2
2
|
import { Alert } from "./alert";
|
|
3
3
|
import { state } from "../../utils";
|
|
4
4
|
const Alerts = _props => {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
const { solved, loading, error } = state;
|
|
6
|
+
const play = !loading && !error && !solved;
|
|
7
|
+
return (h("div", { class: "flex flex-col" }, play ? h(Alert, { message: "Welcome, are you ready to play?..." }) : '', loading ? h(Alert, { message: "Loading...", spinner: true }) : '', error ? h(Alert, { message: error, salute: "ERROR" }) : '', solved ? h(Alert, { message: "You solved the puzzle!!" }) : ''));
|
|
8
8
|
};
|
|
9
9
|
export { Alerts };
|
|
10
10
|
export default Alert;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
const Alien = props => {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
3
|
+
const hex = props.hex || 'currentColor';
|
|
4
|
+
const klass = props.class;
|
|
5
|
+
const label = props.label || 'alien';
|
|
6
|
+
const size = props.size || 24;
|
|
7
|
+
return (h("svg", { class: klass, width: size, height: size, viewBox: "0 0 24 24", role: "img", "aria-label": "title" }, h("title", null, label), h("g", { fill: hex }, h("path", { d: "M10.31 10.93C11.33 12.57 11.18 14.5 9.96 15.28C8.74 16.04 6.92 15.33\n 5.89 13.69C4.87 12.05 5.03 10.1 6.25 9.34C7.47 8.58 9.29 9.29 10.31\n 10.93M12 17.75C14 17.75 14.5 17 14.5 17C14.5 17 14 19 12 19C10 19 9.5\n 17.03 9.5 17C9.5 17 10 17.75 12 17.75M17.75 9.34C18.97 10.1 19.13 12.05\n 18.11 13.69C17.08 15.33 15.26 16.04 14.04 15.28C12.82 14.5 12.67 12.57\n 13.69 10.93C14.71 9.29 16.53 8.58 17.75 9.34M12 20C14.5 20 20 14.86 20\n 11C20 7.14 16.41 4 12 4C7.59 4 4 7.14 4 11C4 14.86 9.5 20 12 20M12 2C17.5\n 2 22 6.04 22 11C22 15.08 16.32 22 12 22C7.68 22 2 15.08 2 11C2 6.04 6.5 2\n 12 2Z" })), h("path", { d: "M0 0h24v24H0z", fill: "none" })));
|
|
8
8
|
};
|
|
9
9
|
export { Alien };
|
|
10
10
|
export default Alien;
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { tw, CHECK, NEW_PUZZLE, DELETE } from "../../utils";
|
|
3
3
|
const Button = props => {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
4
|
+
const { label, callback, matched = false } = props;
|
|
5
|
+
return (h("button", { class: tw('rounded-md border border-solid border-clrs-slate4 font-bold', label === CHECK
|
|
6
|
+
? 'mr-2 bg-clrs-yellow px-3 py-2 text-clrs-navy'
|
|
7
|
+
: label === NEW_PUZZLE
|
|
8
|
+
? 'mr-2 bg-clrs-navy px-3 py-2 text-white'
|
|
9
|
+
: label === DELETE
|
|
10
|
+
? 'mr-1 bg-clrs-red px-2 py-1 text-white'
|
|
11
|
+
: matched
|
|
12
|
+
? 'mr-1 bg-clrs-slate4 px-2 py-1 text-white'
|
|
13
|
+
: 'mr-1 bg-gray-50 px-2 py-1 text-clrs-navy'), onClick: callback }, label));
|
|
14
14
|
};
|
|
15
15
|
export { Button };
|
|
16
16
|
export default Button;
|
|
@@ -2,34 +2,34 @@ import { h } from "@stencil/core";
|
|
|
2
2
|
import { actions, tw } from "../../utils";
|
|
3
3
|
// NOTE: building indx mapping for the border highlighting...
|
|
4
4
|
const borderRight = [
|
|
5
|
-
|
|
5
|
+
2, 5, 11, 14, 20, 23, 29, 32, 38, 41, 47, 50, 56, 59, 65, 68, 74, 77,
|
|
6
6
|
];
|
|
7
7
|
const borderLeft = borderRight.map(key => key + 1);
|
|
8
8
|
const borderBottom = [
|
|
9
|
-
|
|
9
|
+
18, 19, 20, 21, 22, 23, 24, 25, 26, 45, 46, 47, 48, 49, 50, 51, 52, 53,
|
|
10
10
|
];
|
|
11
11
|
const borderTop = borderBottom.map(key => key + 9);
|
|
12
12
|
// Functional components return JSX...
|
|
13
13
|
const Cell = props => {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
14
|
+
const { cell, focus, selected, solved } = props;
|
|
15
|
+
const { key, isClue, indx } = cell;
|
|
16
|
+
const clue = key != '.' ? key : '';
|
|
17
|
+
const genHandler = (cell, solved) => {
|
|
18
|
+
return () => {
|
|
19
|
+
if (!solved) {
|
|
20
|
+
actions.select(cell);
|
|
21
|
+
}
|
|
22
|
+
};
|
|
22
23
|
};
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
: 'border-clrs-gray'), onClick: genHandler(cell, solved) }, clue));
|
|
24
|
+
return (h("label", { class: tw(`cell-${indx}`, borderRight.includes(indx) ? 'border-xbr-clrs-navy' : '', borderLeft.includes(indx) ? 'border-xbl-clrs-navy' : '', borderBottom.includes(indx) ? 'border-xbb-clrs-navy' : '', borderTop.includes(indx) ? 'border-xbt-clrs-navy' : '', 'h-8 w-8 border border-solid text-center leading-8', selected
|
|
25
|
+
? 'border-clrs-red bg-clrs-red-a50 text-clrs-red'
|
|
26
|
+
: focus
|
|
27
|
+
? 'border-clrs-gray bg-clrs-green-a50 font-bold'
|
|
28
|
+
: isClue
|
|
29
|
+
? 'border-clrs-gray bg-clrs-silver'
|
|
30
|
+
: clue !== ''
|
|
31
|
+
? 'border-clrs-gray text-clrs-red'
|
|
32
|
+
: 'border-clrs-gray'), onClick: genHandler(cell, solved) }, clue));
|
|
33
33
|
};
|
|
34
34
|
export { Cell };
|
|
35
35
|
export default Cell;
|
|
@@ -3,7 +3,7 @@ import { Fingerprint } from "./fingerprint";
|
|
|
3
3
|
const url = 'https://eswat2.dev';
|
|
4
4
|
const who = 'eswat2';
|
|
5
5
|
const Eswat2Io = _props => {
|
|
6
|
-
|
|
6
|
+
return (h("a", { class: "absolute right-0 top-0 text-clrs-gray hover:text-clrs-navy", href: url, "aria-label": who, target: "blank", title: who }, h(Fingerprint, { label: who })));
|
|
7
7
|
};
|
|
8
8
|
export { Eswat2Io };
|
|
9
9
|
export default Eswat2Io;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
const Fingerprint = props => {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
3
|
+
const hex = props.hex || 'currentColor';
|
|
4
|
+
const klass = props.class;
|
|
5
|
+
const label = props.label || 'fingerprint';
|
|
6
|
+
const size = props.size || 24;
|
|
7
|
+
return (h("svg", { class: klass, width: size, height: size, viewBox: "0 0 24 24", role: "img", "aria-label": "title" }, h("title", null, label), h("g", { fill: hex }, h("path", { d: "M17.81,4.47C17.73,4.47 17.65,4.45 17.58,4.41C15.66,3.42 14,3\n 12,3C10.03,3 8.15,3.47 6.44,4.41C6.2,4.54 5.9,4.45 5.76,4.21C5.63,3.97\n 5.72,3.66 5.96,3.53C7.82,2.5 9.86,2 12,2C14.14,2 16,2.47\n 18.04,3.5C18.29,3.65 18.38,3.95 18.25,4.19C18.16,4.37 18,4.47\n 17.81,4.47M3.5,9.72C3.4,9.72 3.3,9.69 3.21,9.63C3,9.47 2.93,9.16\n 3.09,8.93C4.08,7.53 5.34,6.43 6.84,5.66C10,4.04 14,4.03\n 17.15,5.65C18.65,6.42 19.91,7.5 20.9,8.9C21.06,9.12 21,9.44\n 20.78,9.6C20.55,9.76 20.24,9.71 20.08,9.5C19.18,8.22 18.04,7.23\n 16.69,6.54C13.82,5.07 10.15,5.07 7.29,6.55C5.93,7.25 4.79,8.25\n 3.89,9.5C3.81,9.65 3.66,9.72 3.5,9.72M9.75,21.79C9.62,21.79 9.5,21.74\n 9.4,21.64C8.53,20.77 8.06,20.21 7.39,19C6.7,17.77 6.34,16.27\n 6.34,14.66C6.34,11.69 8.88,9.27 12,9.27C15.12,9.27 17.66,11.69\n 17.66,14.66A0.5,0.5 0 0,1 17.16,15.16A0.5,0.5 0 0,1\n 16.66,14.66C16.66,12.24 14.57,10.27 12,10.27C9.43,10.27 7.34,12.24\n 7.34,14.66C7.34,16.1 7.66,17.43 8.27,18.5C8.91,19.66 9.35,20.15\n 10.12,20.93C10.31,21.13 10.31,21.44 10.12,21.64C10,21.74 9.88,21.79\n 9.75,21.79M16.92,19.94C15.73,19.94 14.68,19.64 13.82,19.05C12.33,18.04\n 11.44,16.4 11.44,14.66A0.5,0.5 0 0,1 11.94,14.16A0.5,0.5 0 0,1\n 12.44,14.66C12.44,16.07 13.16,17.4 14.38,18.22C15.09,18.7 15.92,18.93\n 16.92,18.93C17.16,18.93 17.56,18.9 17.96,18.83C18.23,18.78 18.5,18.96\n 18.54,19.24C18.59,19.5 18.41,19.77 18.13,19.82C17.56,19.93 17.06,19.94\n 16.92,19.94M14.91,22C14.87,22 14.82,22 14.78,22C13.19,21.54 12.15,20.95\n 11.06,19.88C9.66,18.5 8.89,16.64 8.89,14.66C8.89,13.04 10.27,11.72\n 11.97,11.72C13.67,11.72 15.05,13.04 15.05,14.66C15.05,15.73 16,16.6\n 17.13,16.6C18.28,16.6 19.21,15.73 19.21,14.66C19.21,10.89 15.96,7.83\n 11.96,7.83C9.12,7.83 6.5,9.41 5.35,11.86C4.96,12.67 4.76,13.62\n 4.76,14.66C4.76,15.44 4.83,16.67 5.43,18.27C5.53,18.53 5.4,18.82\n 5.14,18.91C4.88,19 4.59,18.87 4.5,18.62C4,17.31 3.77,16\n 3.77,14.66C3.77,13.46 4,12.37 4.45,11.42C5.78,8.63 8.73,6.82\n 11.96,6.82C16.5,6.82 20.21,10.33 20.21,14.65C20.21,16.27 18.83,17.59\n 17.13,17.59C15.43,17.59 14.05,16.27 14.05,14.65C14.05,13.58 13.12,12.71\n 11.97,12.71C10.82,12.71 9.89,13.58 9.89,14.65C9.89,16.36 10.55,17.96\n 11.76,19.16C12.71,20.1 13.62,20.62 15.03,21C15.3,21.08 15.45,21.36\n 15.38,21.62C15.33,21.85 15.12,22 14.91,22Z" })), h("path", { d: "M0 0h24v24H0z", fill: "none" })));
|
|
8
8
|
};
|
|
9
9
|
export { Fingerprint };
|
|
10
10
|
export default Fingerprint;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { tw } from "../../utils";
|
|
3
3
|
const Header = (_props, children) => {
|
|
4
|
-
|
|
4
|
+
return (h("h1", { class: tw('text-center uppercase text-clrs-red', 'mb-11 ml-0 mr-0 mt-11', 'text-6xl font-thin') }, children));
|
|
5
5
|
};
|
|
6
6
|
export { Header };
|
|
7
7
|
export default Header;
|
|
@@ -2,17 +2,17 @@ import { h } from "@stencil/core";
|
|
|
2
2
|
import { Button } from "./button";
|
|
3
3
|
import { actions, state, DELETE } from "../../utils";
|
|
4
4
|
const Keys = _props => {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
const { keys, list, pick, solved } = state;
|
|
6
|
+
const genHandler = (key) => {
|
|
7
|
+
return () => {
|
|
8
|
+
actions.input(key);
|
|
9
|
+
};
|
|
9
10
|
};
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
})));
|
|
11
|
+
const values = solved ? [] : keys;
|
|
12
|
+
const cell = pick != undefined ? list[pick] : undefined;
|
|
13
|
+
return (h("div", { class: "mt-2 flex flex-row justify-end" }, !solved && cell && !cell.isClue && cell.key != '.' ? (h(Button, { label: DELETE, callback: genHandler('.') })) : (''), values.map((key) => {
|
|
14
|
+
return (h(Button, { label: key, callback: genHandler(key), matched: cell.key === key }));
|
|
15
|
+
})));
|
|
16
16
|
};
|
|
17
17
|
export { Keys };
|
|
18
18
|
export default Keys;
|
|
@@ -7,66 +7,66 @@ import { SudokuBoard } from "./sudoku-board";
|
|
|
7
7
|
import { ToolBar } from "./tool-bar";
|
|
8
8
|
import { actions } from "../../utils";
|
|
9
9
|
export class ProtoSudoku {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
10
|
+
constructor() {
|
|
11
|
+
this.tag = 'proto-sudoku';
|
|
12
|
+
this.platform = 'vercel';
|
|
13
|
+
}
|
|
14
|
+
componentDidLoad() {
|
|
15
|
+
actions.initApp(this.platform);
|
|
16
|
+
}
|
|
17
|
+
render() {
|
|
18
|
+
return (h("div", { id: "app", class: "ds1-main relative max-w-min p-0.5" }, h(Eswat2Io, null), h(Header, null, "Sudoku"), h(SudokuBoard, null), h(Keys, null), h("hr", { class: "ml-0 mr-0" }), h(ToolBar, null), h(Alerts, null)));
|
|
19
|
+
}
|
|
20
|
+
static get is() { return "proto-sudoku"; }
|
|
21
|
+
static get encapsulation() { return "shadow"; }
|
|
22
|
+
static get originalStyleUrls() {
|
|
23
|
+
return {
|
|
24
|
+
"$": ["proto-sudoku.css"]
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
static get styleUrls() {
|
|
28
|
+
return {
|
|
29
|
+
"$": ["proto-sudoku.css"]
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
static get properties() {
|
|
33
|
+
return {
|
|
34
|
+
"tag": {
|
|
35
|
+
"type": "string",
|
|
36
|
+
"mutable": false,
|
|
37
|
+
"complexType": {
|
|
38
|
+
"original": "string",
|
|
39
|
+
"resolved": "string",
|
|
40
|
+
"references": {}
|
|
41
|
+
},
|
|
42
|
+
"required": false,
|
|
43
|
+
"optional": false,
|
|
44
|
+
"docs": {
|
|
45
|
+
"tags": [],
|
|
46
|
+
"text": ""
|
|
47
|
+
},
|
|
48
|
+
"attribute": "tag",
|
|
49
|
+
"reflect": false,
|
|
50
|
+
"defaultValue": "'proto-sudoku'"
|
|
51
|
+
},
|
|
52
|
+
"platform": {
|
|
53
|
+
"type": "string",
|
|
54
|
+
"mutable": false,
|
|
55
|
+
"complexType": {
|
|
56
|
+
"original": "string",
|
|
57
|
+
"resolved": "string",
|
|
58
|
+
"references": {}
|
|
59
|
+
},
|
|
60
|
+
"required": false,
|
|
61
|
+
"optional": false,
|
|
62
|
+
"docs": {
|
|
63
|
+
"tags": [],
|
|
64
|
+
"text": ""
|
|
65
|
+
},
|
|
66
|
+
"attribute": "platform",
|
|
67
|
+
"reflect": false,
|
|
68
|
+
"defaultValue": "'vercel'"
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
}
|
|
72
72
|
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { tw } from "../../utils";
|
|
3
3
|
const Spinner = props => {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
4
|
+
const hex = props.hex || 'currentColor';
|
|
5
|
+
const klass = props.class || '';
|
|
6
|
+
const label = props.label || 'loading...';
|
|
7
|
+
const size = props.size || 24;
|
|
8
|
+
return (h("svg", { class: tw(klass, 'animate-spin'), width: size, height: size, fill: "none", viewBox: "0 0 24 24", role: "img", "aria-label": "title" }, h("title", null, label), h("g", null, h("circle", { class: "opacity-25", cx: "12", cy: "12", r: "10", stroke: hex, "stroke-width": "4" }), h("path", { class: "opacity-75", fill: hex, d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })), h("path", { d: "M0 0h24v24H0z", fill: "none" })));
|
|
9
9
|
};
|
|
10
10
|
export { Spinner };
|
|
11
11
|
export default Spinner;
|
|
@@ -2,12 +2,12 @@ import { h } from "@stencil/core";
|
|
|
2
2
|
import { Cell } from "./cell";
|
|
3
3
|
import { state, tw } from "../../utils";
|
|
4
4
|
const SudokuBoard = _props => {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
5
|
+
const { list, pick, locs, solved } = state;
|
|
6
|
+
return (h("div", { class: tw('flex flex-row flex-wrap', 'border border-solid border-clrs-navy', 'h-76p5 w-76p5 text-lg') }, list.map((cell, index) => {
|
|
7
|
+
const selected = solved ? false : index === pick;
|
|
8
|
+
const focus = solved ? false : locs.includes(index);
|
|
9
|
+
return (h(Cell, { cell: cell, focus: focus, selected: selected, solved: solved }));
|
|
10
|
+
})));
|
|
11
11
|
};
|
|
12
12
|
export { SudokuBoard };
|
|
13
13
|
export default SudokuBoard;
|
|
@@ -3,18 +3,18 @@ import { Button } from "./button";
|
|
|
3
3
|
import { TwLabel } from "./tw-label";
|
|
4
4
|
import { actions, state, CHECK, NEW_PUZZLE } from "../../utils";
|
|
5
5
|
const handleRefresh = (actions) => {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
return () => {
|
|
7
|
+
actions.refresh();
|
|
8
|
+
};
|
|
9
9
|
};
|
|
10
10
|
const handleCheck = (actions) => {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
11
|
+
return () => {
|
|
12
|
+
actions.check();
|
|
13
|
+
};
|
|
14
14
|
};
|
|
15
15
|
const ToolBar = _props => {
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
const { list, solved } = state;
|
|
17
|
+
return (h("div", { class: "flex flex-row" }, h(Button, { label: NEW_PUZZLE, callback: handleRefresh(actions) }), list.length === 81 && !solved ? (h(Button, { label: CHECK, callback: handleCheck(actions) })) : (''), h(TwLabel, null)));
|
|
18
18
|
};
|
|
19
19
|
export { ToolBar };
|
|
20
20
|
export default ToolBar;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { TW_VERSION } from "../../utils";
|
|
3
3
|
const TwLabel = _props => {
|
|
4
|
-
|
|
4
|
+
return (h("label", { class: "ml-auto align-top text-xs italic text-clrs-slate4" }, "Tailwind ", TW_VERSION));
|
|
5
5
|
};
|
|
6
6
|
export { TwLabel };
|
|
7
7
|
export default TwLabel;
|
|
@@ -3,38 +3,38 @@ const DATA = `${KEY}::data`;
|
|
|
3
3
|
const INPUTS = `${KEY}::inputs`;
|
|
4
4
|
const PICK = `${KEY}::pick`;
|
|
5
5
|
const getForKey = (key) => {
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
const json = localStorage.getItem(key);
|
|
7
|
+
return json ? JSON.parse(json) : undefined;
|
|
8
8
|
};
|
|
9
9
|
const storeForKey = (key, value) => {
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
const json = JSON.stringify(value);
|
|
11
|
+
localStorage.setItem(key, json);
|
|
12
12
|
};
|
|
13
13
|
const bag = {
|
|
14
|
-
get: () => {
|
|
15
|
-
return getForKey(DATA);
|
|
16
|
-
},
|
|
17
|
-
store: value => {
|
|
18
|
-
storeForKey(DATA, value);
|
|
19
|
-
},
|
|
20
|
-
inputs: {
|
|
21
14
|
get: () => {
|
|
22
|
-
|
|
23
|
-
return [...line];
|
|
15
|
+
return getForKey(DATA);
|
|
24
16
|
},
|
|
25
|
-
store:
|
|
26
|
-
|
|
17
|
+
store: value => {
|
|
18
|
+
storeForKey(DATA, value);
|
|
27
19
|
},
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
20
|
+
inputs: {
|
|
21
|
+
get: () => {
|
|
22
|
+
const line = getForKey(INPUTS);
|
|
23
|
+
return [...line];
|
|
24
|
+
},
|
|
25
|
+
store: (value) => {
|
|
26
|
+
storeForKey(INPUTS, value.join(''));
|
|
27
|
+
},
|
|
33
28
|
},
|
|
34
|
-
|
|
35
|
-
|
|
29
|
+
pick: {
|
|
30
|
+
get: () => {
|
|
31
|
+
const pick = getForKey(PICK);
|
|
32
|
+
return pick !== null ? pick : undefined;
|
|
33
|
+
},
|
|
34
|
+
store: (value) => {
|
|
35
|
+
storeForKey(PICK, value >= 0 && value < 81 ? value : null);
|
|
36
|
+
},
|
|
36
37
|
},
|
|
37
|
-
},
|
|
38
38
|
};
|
|
39
39
|
export { bag };
|
|
40
40
|
export default bag;
|