feat: wrap game in a shadow dom

assets/js/app.js

@@ -26,9 +26,34 @@ import {Socket} from "phoenix"
 import {LiveSocket} from "phoenix_live_view"
 import topbar from "../vendor/topbar"
 import {s3Uploader} from "./uploader"
+import {LitElement} from "lit"
+import {unsafeHTML} from 'lit/directives/unsafe-html.js'
+
+let Hooks = {}
+
+Hooks.GameboxGame = {
+  mounted() {
+    debugger
+  }
+}
+
+class GameboxGame extends LitElement {
+  static properties = {
+    view: {
+      type: String
+    }
+  }
+
+  render() {
+    return unsafeHTML(this.view)
+  }
+}
+
+customElements.define('gamebox-game', GameboxGame)
+
 
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
-let liveSocket = new LiveSocket("/live", Socket, {uploaders: {S3: s3Uploader}, params: {_csrf_token: csrfToken}})
+let liveSocket = new LiveSocket("/live", Socket, {hooks: Hooks, uploaders: {S3: s3Uploader}, params: {_csrf_token: csrfToken}})
 
 // Show progress bar on live navigation and form submits
 topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
@@ -55,7 +80,7 @@ window.addEventListener("gamebox:clipcopy", (event) => {
 liveSocket.connect()
 
 // expose liveSocket on window for web console debug logs and latency simulation:
-// >> liveSocket.enableDebug()
+liveSocket.enableDebug()
 // >> liveSocket.enableLatencySim(1000)  // enabled for duration of browser session
 // >> liveSocket.disableLatencySim()
 window.liveSocket = liveSocket

games/trivia/src/game.ts

@@ -25,6 +25,15 @@ export interface LiveEvent {
 
 const questions = getQuestions()
 
+const style = `
+<style>
+ body {background-color: coral;}
+ button {
+  background-color: red;
+  }
+</style>
+`
+
 export class Game {
   players: Array<string>;
   version: number;
@@ -67,7 +76,7 @@ export class Game {
       return `<li><button phx-click="answer-prompt" phx-value-idx=${idx}>${opt}</button></li>`
     }).join("\n")
 
-    return [question, `<ul>${answers}</ul>`].join("\n")
+    return [style, question, `<ul>${answers}</ul>`].join("\n")
   }
 
   renderScoreboard(_assigns: Assigns): string {

lib/game_box_web/live/arena_live.ex

@@ -243,7 +243,7 @@ defmodule GameBoxWeb.ArenaLive do
         />
       <% end %>
       <div id="board">
-        <%= Phoenix.HTML.raw(board) %>
+        <gamebox-game id="gamebox-game" view={board} phx-hook="GameboxGame" />
       </div>
     <% end %>
     """