Mock up shape selection buttons

SharkBaitDLS · Jul 21, 2024 · 896d366 · 896d366
1 parent 518d41c
commit 896d366
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 21 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -45,7 +45,7 @@ jobs:
           name: dist
           path: website/dist
 
-  deploy:
+  deploy-website:
     runs-on: ubuntu-latest
     env:
       AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}

diff --git a/Cargo.lock b/Cargo.lock
diff --git a/server/src/main.rs b/server/src/main.rs
@@ -1,21 +1,3 @@
-use solver::solve;
-use verity_solver_models::{CompositeShape, InsideStatues, OutsideStatues, Shape};
-
-mod solver;
-
 fn main() -> Result<(), String> {
-    let outside_state = OutsideStatues {
-        left: CompositeShape::new(Shape::Square, Shape::Triangle),
-        middle: CompositeShape::new(Shape::Triangle, Shape::Circle),
-        right: CompositeShape::new(Shape::Square, Shape::Circle),
-    };
-
-    let inside_state = InsideStatues {
-        left: Shape::Square,
-        middle: Shape::Circle,
-        right: Shape::Triangle,
-    };
-
-    solve(inside_state, outside_state)?;
     Ok(())
 }
diff --git a/website/Cargo.toml b/website/Cargo.toml
@@ -4,5 +4,6 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
+verity-solver-models = { path = "../models" }
 yew = { version = "0.21", features = ["csr"] }
 yew-router = "0.18"
diff --git a/website/index.html b/website/index.html
@@ -3,6 +3,11 @@
 
 <head>
     <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css" />
+    <link data-trunk rel="sass" href="index.scss" />
+
     <title>Verity Solver</title>
 </head>
 

diff --git a/website/index.scss b/website/index.scss
@@ -0,0 +1,59 @@
+:root {
+    color-scheme: light dark;
+}
+
+.main {
+    height: 100vh;
+}
+
+.hex-container {
+    position: relative;
+    width: 200px;
+    aspect-ratio: 1;
+}
+
+.hex-segment-inactive {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: rgb(123, 123, 123);
+    opacity: 75%;
+}
+
+.hex-segment-active {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: rgb(232, 232, 232);
+    opacity: 75%;
+}
+
+.hex-segment-clicked {
+    position: absolute;
+    top: 15px;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: rgb(0, 200, 255);
+    opacity: 75%;
+}
+
+.hex-border {
+    filter: drop-shadow(-1px 6px 3px light-dark(rgba(50, 50, 0, 0.5), rgba(186, 186, 186, 0.5)));
+}
+
+.hex-segment-top {
+    clip-path: polygon(12% 25%, 50% 2%, 88% 25%, 50% 48%);
+}
+
+.hex-segment-left {
+    clip-path: polygon(48% 51%, 10% 28%, 10% 68.15%, 48% 91%);
+}
+
+.hex-segment-right {
+    clip-path: polygon(52% 51%, 90% 28%, 90% 68.15%, 52% 91%);
+}
diff --git a/website/src/main.rs b/website/src/main.rs
@@ -1,10 +1,34 @@
 use yew::{function_component, html, Html, Renderer};
 
+#[allow(dead_code)]
+mod solver;
+
 #[function_component]
 fn App() -> Html {
     html! {
-        <div>
-            <p>{ "Hello, verity solver!" }</p>
+        <div class="main is-flex is-flex-direction-column">
+            <main>
+                <p>{ "Hello, verity solver! Have some mocked-up buttons!" }</p>
+                <div class="hex-container">
+                    <div class="hex-border">
+                        <button class="hex-segment-active hex-segment-top"/>
+                    </div>
+                    <div class="hex-border">
+                        <button class="hex-segment-inactive hex-segment-left"/>
+                    </div>
+                    <div>
+                        <button class="hex-segment-clicked hex-segment-right"/>
+                    </div>
+                </div>
+            </main>
+            <footer class="footer mt-auto">
+                <div class="content has-text-centered">
+                    { "Powered by " }
+                    <a href="https://yew.rs">{ "Yew" }</a>
+                    { " using " }
+                    <a href="https://bulma.io">{ "Bulma" }</a>
+                </div>
+            </footer>
         </div>
     }
 }

diff --git a/server/src/solver.rs → website/src/solver.rs b/server/src/solver.rs → website/src/solver.rs