add dynamic matrix thingy

mskasal · Mar 12, 2024 · 3515f1c · 3515f1c
1 parent b64f4c9
commit 3515f1c
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 45 deletions.
diff --git a/src/main.rs b/src/main.rs
@@ -2,12 +2,13 @@ use std::net::SocketAddr;
 
 use askama::Template;
 use axum::{
-    extract::{ws::WebSocket, ConnectInfo, Path, State, WebSocketUpgrade},
+    extract::{ws::WebSocket, ConnectInfo, Path, Query, State, WebSocketUpgrade},
     response::IntoResponse,
-    routing::get,
+    routing::{get, post},
     Router,
 };
 use axum_extra::{headers, TypedHeader};
+use serde::Deserialize;
 use tower_http::{
     compression::{CompressionLayer, DefaultPredicate},
     services::{ServeDir, ServeFile},
@@ -17,7 +18,6 @@ use tracing_subscriber::{layer::SubscriberExt, util::SubscriberInitExt};
 
 #[derive(Clone)]
 struct AppState {
-    matrix: Vec<Vec<u8>>,
     size: u32,
 }
 
@@ -41,7 +41,6 @@ pub struct LedMatrixTemplate {}
 #[template(path = "dyn_matrix.html")]
 pub struct DynMatrixTemplate {
     size: u32,
-    matrix: Vec<Vec<u8>>,
 }
 
 #[derive(Template)]
@@ -52,10 +51,9 @@ pub struct DynItemTemplate {
 }
 
 #[derive(Template)]
-#[template(path = "dyn_item_idle.html")]
-pub struct DynItemIdleTemplate {
-    i: u32,
-    j: u32,
+#[template(path = "grid.html")]
+pub struct GridTemplate {
+    size: u32,
 }
 
 #[derive(Template)]
@@ -79,18 +77,24 @@ async fn led_matrix_handler() -> LedMatrixTemplate {
 }
 
 async fn dyn_matrix_handler(State(state): State<AppState>) -> DynMatrixTemplate {
-    DynMatrixTemplate {
-        size: state.size,
-        matrix: state.matrix,
-    }
+    DynMatrixTemplate { size: state.size }
 }
 
-async fn matrix_state_handler(Path((i, j)): Path<(u32, u32)>) -> impl IntoResponse {
+async fn matrix_state_handler(Path((i, j)): Path<(u32, u32)>) -> DynItemTemplate {
     DynItemTemplate { i, j }
 }
 
-async fn matrix_state_idle_handler(Path((i, j)): Path<(u32, u32)>) -> impl IntoResponse {
-    DynItemTemplate { i, j }
+#[derive(Deserialize)]
+struct SizeQuery {
+    size: u32,
+}
+
+async fn matrix_size_handler(
+    State(mut state): State<AppState>,
+    new_size: Query<SizeQuery>,
+) -> GridTemplate {
+    state.size = new_size.size;
+    GridTemplate { size: state.size }
 }
 
 async fn experiments_handler() -> ExperimentsTemplate {
@@ -128,10 +132,7 @@ async fn ws_handler(
 
 #[tokio::main(flavor = "multi_thread")]
 async fn main() {
-    let state = AppState {
-        matrix: vec![vec![0; 40]; 40],
-        size: 40,
-    };
+    let state = AppState { size: 40 };
     let comression_layer: CompressionLayer = CompressionLayer::new()
         .br(true)
         .gzip(true)
@@ -152,7 +153,7 @@ async fn main() {
         .route("/ocr", get(ocr_handler))
         .route("/led_matrix", get(led_matrix_handler))
         .route("/dyn_matrix", get(dyn_matrix_handler))
-        .route("/matrix/idle/:i/:j", get(matrix_state_idle_handler))
+        .route("/matrix/size", get(matrix_size_handler))
         .route("/matrix/:i/:j", get(matrix_state_handler))
         .route("/experiments", get(experiments_handler))
         .route("/ws", get(ws_handler))

diff --git a/templates/dyn_item.html b/templates/dyn_item.html
@@ -1,7 +1,8 @@
 <span
   id="{{i}}-{{j}}"
-  hx-get="/matrix/idle/{{i}}/{{j}}"
-  hx-trigger="mouseleave once"
+  hx-get="/matrix/{{i}}/{{j}}"
+  hx-trigger="mouseenter once"
   data-position="{{i}}-{{j}}"
   hx-swap="outerHTML"
+  style="animation: flipAnimation 2s cubic-bezier(0.4, 0, 0.2, 1)"
 ></span>
diff --git a/templates/dyn_item_idle.html b/templates/dyn_item_idle.html
diff --git a/templates/dyn_matrix.html b/templates/dyn_matrix.html
@@ -21,24 +21,10 @@
         aspect-ratio: 1;
         cursor: pointer;
       }
-      .htmx-request {
-        opacity: .5;
-        transition: opacity 1300ms linear;
-      }
     </style>
   </head>
   <body>
-    <div id="matrix" class="matrix">
-      {% for i in 0..size %} {% for j in 0..size %} {% include
-      "dyn_item_idle.html" %} {% endfor %} {% endfor %}
-    </div>
-    <div
-      class="panel"
-      id="control-panel"
-      style="position: absolute; bottom: 30px"
-    >
-      <input type="number" name="size" value="{{size}}" />
-    </div>
+    {% include "matrix.html" %}
     <script defer src="/assets/htmx.min.js"></script>
   </body>
 </html>
diff --git a/templates/grid.html b/templates/grid.html
@@ -0,0 +1,2 @@
+    {% for i in 0..size %} {% for j in 0..size %} {% include "dyn_item.html" %}
+    {% endfor %} {% endfor %}
diff --git a/templates/head.html b/templates/head.html
@@ -10,7 +10,6 @@
 
   body {
     font-family: var(--system-font);
-    max-width: 800px;
     margin: 0 auto;
     background-color: var(--background-color);
     display: flex;
@@ -61,6 +60,29 @@
     font-weight: bold;
     transition: background-size 250ms ease;
   }
+  @keyframes blinkAnimation {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  @keyframes flipAnimation {
+    0% {
+      transform: rotateY(180deg);
+      transform: rotateX(180deg);
+    }
+    50% {
+      transform: rotateY(90deg);
+    }
+    100% {
+      transform: rotateY(0deg);
+    }
+  }
 </style>
 <link
   rel="preload"

diff --git a/templates/matrix.html b/templates/matrix.html
@@ -0,0 +1,12 @@
+<div id="matrix" class="matrix">{% include "grid.html" %}</div>
+<div class="panel" id="control-panel" style="position: absolute; bottom: 30px">
+  <input
+    type="number"
+    name="size"
+    value="{{size}}"
+    hx-get="/matrix/size"
+    hx-target="#matrix"
+    ht-trigger="onchange"
+    ht-swap="innerHTML"
+  />
+</div>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		{% for i in 0..size %} {% for j in 0..size %} {% include "dyn_item.html" %}
		{% endfor %} {% endfor %}