dyn matrix experiment poc

Cargo.toml

@@ -17,5 +17,4 @@ tower = "0.4.13"
 tower-http = { version = "0.5.1", features = ["fs", "compression-br", "compression-gzip", "compression-zstd", "set-header", "trace"] }
 tracing = "0.1.40"
 tracing-subscriber = { version = "0.3.18", features = ["env-filter"] }
-explode = { path = "./explode" }
 axum-extra = { version = "0.9.2", features = ["typed-header"] }

pong/src/lib.rs

@@ -265,7 +265,7 @@ impl PongGame {
             scores: (score_1, score_2),
             paddles: (paddle_one, paddle_two),
             players: (player_one, player_two),
-            speed: 2.5,
+            speed: 6.0,
             constraints,
             ball_direction_x: 1.0,
             ball_direction_y: 1.0,

src/main.rs

@@ -2,10 +2,7 @@ use std::net::SocketAddr;
 
 use askama::Template;
 use axum::{
-    extract::{
-        ws::{Message, WebSocket},
-        ConnectInfo, WebSocketUpgrade,
-    },
+    extract::{ws::WebSocket, ConnectInfo, Path, State, WebSocketUpgrade},
     response::IntoResponse,
     routing::get,
     Router,
@@ -18,6 +15,12 @@ use tower_http::{
 };
 use tracing_subscriber::{layer::SubscriberExt, util::SubscriberInitExt};
 
+#[derive(Clone)]
+struct AppState {
+    matrix: Vec<Vec<u8>>,
+    size: u32,
+}
+
 #[derive(Template)]
 #[template(path = "index.html")]
 pub struct IndexTemplate {}
@@ -34,6 +37,27 @@ pub struct OcrTemplate {}
 #[template(path = "led_matrix.html")]
 pub struct LedMatrixTemplate {}
 
+#[derive(Template)]
+#[template(path = "dyn_matrix.html")]
+pub struct DynMatrixTemplate {
+    size: u32,
+    matrix: Vec<Vec<u8>>,
+}
+
+#[derive(Template)]
+#[template(path = "dyn_item.html")]
+pub struct DynItemTemplate {
+    i: u32,
+    j: u32,
+}
+
+#[derive(Template)]
+#[template(path = "dyn_item_idle.html")]
+pub struct DynItemIdleTemplate {
+    i: u32,
+    j: u32,
+}
+
 #[derive(Template)]
 #[template(path = "experiments.html")]
 pub struct ExperimentsTemplate {}
@@ -54,14 +78,29 @@ async fn led_matrix_handler() -> LedMatrixTemplate {
     LedMatrixTemplate {}
 }
 
+async fn dyn_matrix_handler(State(state): State<AppState>) -> DynMatrixTemplate {
+    DynMatrixTemplate {
+        size: state.size,
+        matrix: state.matrix,
+    }
+}
+
+async fn matrix_state_handler(Path((i, j)): Path<(u32, u32)>) -> impl IntoResponse {
+    DynItemTemplate { i, j }
+}
+
+async fn matrix_state_idle_handler(Path((i, j)): Path<(u32, u32)>) -> impl IntoResponse {
+    DynItemTemplate { i, j }
+}
+
 async fn experiments_handler() -> ExperimentsTemplate {
     ExperimentsTemplate {}
 }
 
 async fn socket_handler(mut socket: WebSocket, who: SocketAddr) {
     while let Some(message) = socket.recv().await {
         let message = if let Ok(message) = message {
-            println!("Message received {:?}:{who}...", message);
+            println!("Message received {who}...");
             message
         } else {
             return;
@@ -87,8 +126,12 @@ async fn ws_handler(
     ws.on_upgrade(move |socket| socket_handler(socket, addr))
 }
 
-#[tokio::main]
+#[tokio::main(flavor = "multi_thread")]
 async fn main() {
+    let state = AppState {
+        matrix: vec![vec![0; 40]; 40],
+        size: 40,
+    };
     let comression_layer: CompressionLayer = CompressionLayer::new()
         .br(true)
         .gzip(true)
@@ -108,8 +151,12 @@ async fn main() {
         .route("/pong", get(pong_handler))
         .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/:i/:j", get(matrix_state_handler))
         .route("/experiments", get(experiments_handler))
         .route("/ws", get(ws_handler))
+        .with_state(state)
         .nest_service("/favicon.ico", ServeFile::new("assets/favicon.ico"))
         .nest_service("/assets", ServeDir::new("assets"))
         .layer(comression_layer)

templates/dyn_item.html

@@ -0,0 +1,7 @@
+<span
+  id="{{i}}-{{j}}"
+  hx-get="/matrix/idle/{{i}}/{{j}}"
+  hx-trigger="mouseleave once"
+  data-position="{{i}}-{{j}}"
+  hx-swap="outerHTML"
+></span>

templates/dyn_item_idle.html

@@ -0,0 +1,7 @@
+<span
+  id="{{i}}-{{j}}"
+  hx-get="/matrix/{{i}}/{{j}}"
+  hx-trigger="mouseenter once"
+  data-position="{{i}}-{{j}}"
+  hx-swap="outerHTML"
+></span>

templates/dyn_matrix.html

@@ -0,0 +1,44 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Dynamic Matrix</title>
+    {% include "head.html" %}
+    <style>
+      body {
+        background-color: black;
+      }
+      .matrix {
+        display: grid;
+        grid-template-rows;: repeat({{size}}, 1fr);
+        grid-template-columns: repeat({{size}}, 1fr);
+        gap: 1px;
+      }
+      span {
+        display: inline-block;
+        background-color: RGB(95, 179, 255);
+        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>
+    <script defer src="/assets/htmx.min.js"></script>
+  </body>
+</html>

templates/experiments.html

@@ -29,5 +29,10 @@ <h2>Led Matrix</h2>
         Try!
       </button>
     </section>
+
+    <section>
+      <h2>Dynamic Matrix</h2>
+      <a href="/dyn_matrix">Try!</button>
+    </section>
   </body>
 </html>

templates/index.html

@@ -193,7 +193,7 @@ <h2>Education</h2>
       <article>
         <small class="time-period">2003 - 2007</small>
         <div>
-          <b>Ataturk University Mathematics Teacher, Eruzurm</b>
+          <b>Ataturk University Mathematics Teacher, Erzurum</b>
         </div>
       </article>
     </section>