photon-10k-dom-elements.md

10k dom elements with Photon

• Plus free multiplayer of course
• 25 LOC of which 48% are requires, CSS and whitespace. Count it!

20220823.10k.dom.elements.pixel.game.multiplayer.mp4

user.cljc

(ns user.demo-8-10k-elements
  (:require [hyperfiddle.photon :as p]
            [hyperfiddle.photon-dom :as dom]
            [hyperfiddle.photon-ui :as ui]
            [missionary.core :as m])
  #?(:cljs (:require-macros user.demo-8-10k-elements)))

(def !moves #?(:clj (atom []) :cljs nil))
(def !board-size #?(:clj (atom 10000) :cljs nil))

(defn hot [el]
  (m/observe (fn mount [!] (dom/set-property! el "style" {:background-color "red"})
               (! nil) ; initial value
               (fn unmount [] (dom/set-property! el "style" {:background-color nil})))))

(p/defn App []
  (dom/h1 "10k dom elements (multiplayer)")
  (dom/element "style" ".board div { width: 1em; height: 1em; display: inline-block; border: 1px #eee solid; }")
  (dom/element "style" ".board { font-family: monospace; font-size: 7px; margin: 0; padding: 0; line-height: 0; }")
  (dom/div {:class "board"}
    (p/for [i (range 0 (p/server (p/watch !board-size)))]
      (ui/element dom/div {::ui/mouseover-event (p/fn [e] (p/server (swap! !moves conj i)))}))

    (p/for [i (p/server (p/watch !moves))]
      (new (hot (.item (.. dom/node -children) i)))))) ; differential side effects, indexed by HTMLCollection