From 74bb6595281c13e7f8d174e2bbacc80a41e6e4ab Mon Sep 17 00:00:00 2001
From: Bob Farrell <git@bob.frl>
Date: Mon, 28 Apr 2025 20:03:02 +0100
Subject: [PATCH] WIP

---
 demo/public/party.css                      |  6 +-
 demo/src/app/views/websockets/index.zmpl   | 75 ++++++++++------------
 src/jetzig/middleware/channels/channels.js | 31 +++++----
 3 files changed, 56 insertions(+), 56 deletions(-)

diff --git a/demo/public/party.css b/demo/public/party.css
index 70433af..ba9ddfd 100644
--- a/demo/public/party.css
+++ b/demo/public/party.css
@@ -40,10 +40,14 @@ body {
     color: white;
     border: none;
     border-radius: 5px;
+    display: inline;
 }
 #reset-button:hover {
     background-color: #45a049;
 }
+#reset-wrapper {
+    text-align: center;
+}
 #party-container {
     position: absolute;
     top: 0;
@@ -116,7 +120,7 @@ body {
 }
 #victor {
   margin: 3rem;
-  font-size: 5rem;
+  font-size: 3.5rem;
   text-align: center;
   vertical-align: center;
 }
diff --git a/demo/src/app/views/websockets/index.zmpl b/demo/src/app/views/websockets/index.zmpl
index 4cccd35..1e81b84 100644
--- a/demo/src/app/views/websockets/index.zmpl
+++ b/demo/src/app/views/websockets/index.zmpl
@@ -1,3 +1,7 @@
+<link rel="stylesheet" href="/party.css" />
+
+<div id="party-container"></div>
+
 <div id="results-wrapper">
     <span class="trophy">&#127942;</span>
     <div id="results">
@@ -11,14 +15,13 @@
     <span class="trophy">&#127942;</span>
 </div>
 
-<div id="party-container"></div>
 
 <div class="board" id="board">
     @for (0..9) |index| {
         <div
             class="cell"
             jetzig-connect="$.cells.{{index}}"
-            jetzig-transform="cell"
+            jetzig-transform="{ player: '&#9992;&#65039;', cpu: '&#129422;', tie: '&#129309;' }[value] || ''"
             jetzig-click="move"
             id="tic-tac-toe-cell-{{index}}"
             data-cell="{{index}}"
@@ -27,47 +30,35 @@
     }
 </div>
 
-<button jetzig-click="reset" id="reset-button">Reset Game</button>
+<div id="reset-wrapper">
+    <button jetzig-click="reset" id="reset-button">Reset Game</button>
+</div>
 
-<div id="victor"></div>
-
-<script src="/party.js"></script>
-<link rel="stylesheet" href="/party.css" />
+<div jetzig-style="{ visibility: $.victor === null ? 'hidden' : 'visible' }" id="victor">
+    <span>&#127942;</span>
+    <span
+        jetzig-connect="$.victor"
+        jetzig-transform="{ player: '&#9992;&#65039;', cpu: '&#129422;', tie: '&#129309;' }[value] || ''"
+    ></span>
+    <span>&#127942;</span>
+</div>
 
 <script>
-    jetzig.channel.onStateChanged(state => {
-        if (!state.victor) {
-            const element = document.querySelector("#victor");
-            element.style.visibility = 'hidden';
-        }
-    });
-
-    jetzig.channel.onMessage(message => {
-        if (message.err) {
-            console.log(message.err);
-        }
-    });
-
-    jetzig.channel.receive("victor", (data) => {
-        const element = document.querySelector("#victor");
-        const emoji = {
-            player: "&#9992;&#65039;",
-            cpu: "&#129422;",
-            tie: "&#129309;"
-        }[data.params.type] || "";
-        element.innerHTML = `&#127942; ${emoji} &#127942;`;
-        element.style.visibility = 'visible';
-        triggerPartyAnimation();
-    });
-
-    jetzig.channel.receive("game_over", (data) => {
-        const element = document.querySelector("#board");
-        element.classList.remove('flash-animation');
-        void element.offsetWidth;
-        element.classList.add('flash-animation');
-    });
-
-    jetzig.channel.transform("cell", (value) => (
-        { player: "&#9992;&#65039;", cpu: "&#129422;" }[value] || ""
-    ));
+    @// jetzig.channel.onStateChanged(state => {
+    @// });
+    @//
+    @// jetzig.channel.onMessage(data => {
+    @// });
+    @//
+    @// jetzig.channel.receive("victor", data => {
+    @//     triggerPartyAnimation();
+    @// });
+    @//
+    @// jetzig.channel.receive("game_over", data => {
+    @//     const element = document.querySelector("#board");
+    @//     element.classList.remove('flash-animation');
+    @//     void element.offsetWidth;
+    @//     element.classList.add('flash-animation');
+    @// });
+    @//
 </script>
diff --git a/src/jetzig/middleware/channels/channels.js b/src/jetzig/middleware/channels/channels.js
index af90710..7492f60 100644
--- a/src/jetzig/middleware/channels/channels.js
+++ b/src/jetzig/middleware/channels/channels.js
@@ -4,10 +4,9 @@ jetzig = window.jetzig;
 (() => {
   const transform = (value, state, element) => {
       const id = element.getAttribute('jetzig-id');
-      const key = id && jetzig.channel.transformerMap[id];
-      const transformers = key && jetzig.channel.transformers[key];
-      if (transformers) {
-          return transformers.reduce((acc, val) => val(acc), value);
+      const transformer = id && jetzig.channel.transformers[id];
+      if (transformer) {
+          return transformer(value, state, element);
       } else {
           return value === undefined || value == null ? '' : `${value}`
       }
@@ -21,7 +20,6 @@ jetzig = window.jetzig;
       messageCallbacks: [],
       invokeCallbacks: {},
       elementMap: {},
-      transformerMap: {},
       transformers: {},
       onStateChanged: function(callback) { this.stateChangedCallbacks.push(callback); },
       onMessage: function(callback) { this.messageCallbacks.push(callback); },
@@ -139,7 +137,21 @@ jetzig = window.jetzig;
               const id = `jetzig-${crypto.randomUUID()}`;
               element.setAttribute('jetzig-id', id);
               this.elementMap[ref].push(element);
-              this.transformerMap[id] = element.getAttribute('jetzig-transform');
+              const transformer = element.getAttribute('jetzig-transform');
+              if (transformer) {
+                this.transformers[id] = new Function("value", "$", "element", `return ${transformer};`);
+              }
+          });
+
+          const styled_elements = document.querySelectorAll('[jetzig-style]');
+          this.onStateChanged(state => {
+            styled_elements.forEach(element => {
+                const func = new Function("$", `return ${element.getAttribute('jetzig-style')};`)
+                const styles = func(state);
+                Object.entries(styles).forEach(([key, value]) => {
+                  element.style.setProperty(key, value);
+                });
+            });
           });
 
           // this.websocket.addEventListener("open", (event) => {
@@ -147,13 +159,6 @@ jetzig = window.jetzig;
           //     this.publish("websockets", {});
           // });
       },
-      transform: function(ref, callback) {
-          if (Object.hasOwn(this.transformers, ref)) {
-              this.transformers[ref].push(callback);
-          } else {
-              this.transformers[ref] = [callback];
-          }
-      },
       receive: function(ref, callback) {
           if (Object.hasOwn(this.invokeCallbacks, ref)) {
               this.invokeCallbacks[ref].push(callback);