great stuff

2021-06-08 17:29:29 +02:00
parent e7b8ae6120
commit c8f37d0d98
65 changed files with 3309 additions and 3331 deletions
--- a/src/ui/Interactor.svelte
+++ b/src/ui/Interactor.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+    import {polycubes} from "../store";
+    import CubeInput from "./CubeInput.svelte";
+    import SolutionViewer from "./SolutionViewer.svelte";
+    $: numCubes = $polycubes.length;
+</script>
+
+<div class="viewport">
+    <div class="input-container">
+        {#each {length: numCubes} as _, cubeNo}
+            <div class="cube-input">
+                <div class="padder">
+                    <CubeInput
+                        cubeNo={cubeNo}
+                    />
+                </div>
+            </div>
+        {/each}
+    </div>
+    <div class="threedee">
+        <SolutionViewer/>
+    </div>
+</div>
+
+<style>
+    .threedee {
+        flex: 1 1 auto;
+        display: flex;
+        flex-direction: column;
+        align-content: center;
+        justify-content: center;
+        text-align: center;
+    }
+    .padder {
+        padding: 1em;
+    }
+    .cube-input {
+        margin: auto;
+    }
+    .input-container {
+        flex: 0 1 fit-content;
+        overflow-x: scroll;
+        display: flex;
+        flex-flow: row;
+    }
+    .viewport {
+        display: flex;
+        height: 100%;
+        align-content: center;
+        justify-content: center;
+        flex-direction: column;
+    }
+</style>