diff --git a/.idea/workspace.xml b/.idea/workspace.xml index 244265c..253ed73 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -26,41 +26,15 @@ - - - - - - + - - - - - - - - - - - - - - - - - - - - + + - - - @@ -171,7 +146,8 @@ - + + @@ -179,27 +155,10 @@ @@ -275,11 +234,11 @@ - - + + - + diff --git a/package.json b/package.json index d59a535..0eb70c8 100644 --- a/package.json +++ b/package.json @@ -51,6 +51,7 @@ "./public/**", "./src/desktop${/*}" ], + "icon": "./public/resources/soma_icon.png", "directories": { "output": "desktop-dist" } diff --git a/public/resources/soma_icon.png b/public/resources/soma_icon.png new file mode 100644 index 0000000..bb87799 Binary files /dev/null and b/public/resources/soma_icon.png differ diff --git a/src/store.ts b/src/store.ts index 4028363..5d3b675 100644 --- a/src/store.ts +++ b/src/store.ts @@ -3,9 +3,10 @@ import { get } from 'svelte/store'; import SomaSolution from "./SomaSolution"; import VoxelSpaceBigInt from "./VoxelSpaceBigInt"; import type {DimensionDef} from "./VoxelSpaceBoolean"; +import PolycubeScene from "./ui/threedee/PolycubeScene"; -const MAX_DIMS = 20; -const MIN_DIMS = 1; +export const MAX_DIMS = 20; +export const MIN_DIMS = 1; export const solving = writable(false); export const debug = writable(false); @@ -29,11 +30,19 @@ export const isMinPolycubes = derived( polycubes, ($polycubes: VoxelSpaceBigInt[]) => $polycubes.length <= 1 ); +export const cubeScene = new PolycubeScene(); + function dimStore(init: number) { const dimStore = writable(init); return { subscribe: dimStore.subscribe, + inc() { + dimStore.set(get(dimStore) + 1); + }, + dec() { + dimStore.set(get(dimStore) - 1); + }, set(dim: number) { if (dim > MAX_DIMS || dim < MIN_DIMS) { return; diff --git a/src/ui/App.svelte b/src/ui/App.svelte index 4887671..c0c1d69 100644 --- a/src/ui/App.svelte +++ b/src/ui/App.svelte @@ -38,20 +38,12 @@ color: white; background: #333333; } - @media(max-width: 1600px) { - .solutionBodyContainer { - width: 100%; - } - .sidebarContainer { - width: 20%; - } - } @media(max-width: 1200px) { .solutionBodyContainer { - width: 100%; + width: calc(100% - 18em); } - .sidebarContainer { - width: 15em; + .sidebarContainer { + width: 18em; } } diff --git a/src/ui/IncDecNum.svelte b/src/ui/IncDecNum.svelte new file mode 100644 index 0000000..159749f --- /dev/null +++ b/src/ui/IncDecNum.svelte @@ -0,0 +1,48 @@ + + +
+ {#if title} +

{title}

+ {/if} +
+ +

{val}

+ +
+
+ + \ No newline at end of file diff --git a/src/ui/Interactor.svelte b/src/ui/Interactor.svelte index 2f50bce..5ee7dab 100644 --- a/src/ui/Interactor.svelte +++ b/src/ui/Interactor.svelte @@ -3,26 +3,84 @@ import CubeInput from "./CubeInput.svelte"; import SolutionViewer from "./SolutionViewer.svelte"; $: numCubes = $polycubes.length; + let showInput = true; + let smallViewport = true; + + function onMediaChange() { + smallViewport = queryListWidth.matches || queryListHeight.matches; + } + + const queryListWidth = window.matchMedia("(max-width: 1200px)"); + const queryListHeight = window.matchMedia("(max-height: 920px)"); + queryListWidth.addEventListener("change", onMediaChange); + queryListHeight.addEventListener("change", onMediaChange); + onMediaChange();
-
- {#each {length: numCubes} as _, cubeNo} -
-
- -
+ {#if smallViewport} +
+
Input
+
3D
+
+ {#if showInput} +
+ {#each {length: numCubes} as _, cubeNo} +
+
+ +
+
+ {/each}
- {/each} -
-
- -
+ {:else} +
+ +
+ {/if} + {:else} +
+ {#each {length: numCubes} as _, cubeNo} +
+
+ +
+
+ {/each} +
+
+ +
+ {/if}
\ No newline at end of file diff --git a/src/ui/Sidebar.svelte b/src/ui/Sidebar.svelte index 45f9eb6..c68f6eb 100644 --- a/src/ui/Sidebar.svelte +++ b/src/ui/Sidebar.svelte @@ -4,10 +4,17 @@ isMinPolycubes, polycubes, solutions, - colorFromIndex, - activeSolution, showingSolution, totalVolume, somaDimX, somaDimY, somaDimZ, debug + solving, + totalVolume, + somaDimX, + somaDimY, + somaDimZ, + MAX_DIMS, + MIN_DIMS, + solve } from "../store"; import SolutionList from "./SolutionList.svelte"; + import IncDecNum from "./IncDecNum.svelte"; $: numCubes = $polycubes.length; $: cubes = $polycubes; @@ -40,21 +47,30 @@

Dimensions:

- X - somaDimX.set(e.target.valueAsNumber)}/> - Y - somaDimY.set(e.target.valueAsNumber)}/> - Z - somaDimZ.set(e.target.valueAsNumber)}/> + + + {#if $totalVolume > 32}

The total number of units exceeds 32. Attempting to solve puzzles with more than 32 units results in significantly slower computation time.

{/if} @@ -64,9 +80,13 @@

Cubes:

- -

{numCubes}

- +
@@ -75,8 +95,8 @@ class="solve" on:click={solve} title="{genTooltip(enoughSubcubes, noEmpties, size)}" - disabled="{solving || !readyToSolve}"> - {solving ? "Solving..." : "Solve!"} + disabled="{$solving || !readyToSolve}"> + {$solving ? "Solving..." : "Solve!"}
@@ -95,7 +115,7 @@ .choice { display: block; text-align: center; - margin-top: 1em; + margin-top: 0.5em; } input { display: inline-block; @@ -108,14 +128,6 @@ color: white; background-color: #ff3e00; } - button:hover:not(:disabled) { - cursor: pointer; - background-color: #c1c1c1; - } - button:disabled { - color: #a7a7a7; - background-color: #616161; - } button.solve { width: auto; color: white; @@ -124,6 +136,7 @@ border-radius: 0.5em; border-style: none; margin: 0; + cursor: pointer; } button.solve:disabled { width: auto; @@ -151,8 +164,8 @@ padding-bottom: 0; } .widgets > * { - padding-top: 1em; - padding-bottom: 1em; + padding-top: 0.5em; + padding-bottom: 0.5em; } h1 { margin: 0; diff --git a/src/ui/SolutionViewer.svelte b/src/ui/SolutionViewer.svelte index 1560ed5..6a1c1db 100644 --- a/src/ui/SolutionViewer.svelte +++ b/src/ui/SolutionViewer.svelte @@ -1,38 +1,35 @@