6 files changed, 92 insertions, 8 deletions

diff --git a/fig-frontend-client/src/Config.js b/fig-frontend-client/src/Config.js
index 11a9792..0990a53 100644
--- a/fig-frontend-client/src/Config.js
+++ b/fig-frontend-client/src/Config.js
@@ -1 +1,2 @@
+export const mode = globalThis.mode;
 export const apiServer = globalThis.apiServer;
diff --git a/fig-frontend-client/src/Config.purs b/fig-frontend-client/src/Config.purs
index b464803..3711d69 100644
--- a/fig-frontend-client/src/Config.purs
+++ b/fig-frontend-client/src/Config.purs
@@ -1,3 +1,4 @@
 module Config where
 
+foreign import mode :: Int
 foreign import apiServer :: String
diff --git a/fig-frontend-client/src/Main.purs b/fig-frontend-client/src/Main.purs
index cb06b86..8b132a7 100644
--- a/fig-frontend-client/src/Main.purs
+++ b/fig-frontend-client/src/Main.purs
@@ -4,7 +4,9 @@ import Prelude
 
 import Audio as Audio
 import Config as Config
+import Data.Array (head)
 import Data.Array as Array
+import Data.Foldable (fold)
 import Data.Maybe (Maybe(..))
 import Data.Traversable (for, for_)
 import Effect (Effect)
@@ -14,17 +16,26 @@ import Effect.Console (log)
 import Effect.Exception (throw)
 import Fetch (fetch)
 import Model (startModel)
+import UI as UI
 import Web.DOM as DOM
+import Web.DOM.DOMTokenList as DOM.DTL
 import Web.DOM.Document as DOM.Doc
 import Web.DOM.Element as DOM.El
 import Web.DOM.Node as DOM.Node
+import Web.DOM.NodeList as DOM.NL
 import Web.DOM.NonElementParentNode as DOM.NEP
+import Web.DOM.Text as DOM.Text
+import Web.DOM.ParentNode as DOM.P
 import Web.Event.Event as Ev
 import Web.Event.EventTarget as Ev.Tar
 import Web.HTML as HTML
 import Web.HTML.HTMLDocument as HTML.Doc
 import Web.HTML.Window as HTML.Win
 
+maybeToArray :: forall a. Maybe a -> Array a
+maybeToArray (Just x) = [x]
+maybeToArray Nothing = []
+
 byId :: forall m. MonadEffect m => String -> m DOM.Element
 byId i = do
   w <- liftEffect HTML.window
@@ -33,11 +44,47 @@ byId i = do
     Nothing -> liftEffect $ throw $ "could not find element with id: " <> i
     Just e -> pure e
 
+queryAll :: forall m. MonadEffect m => String -> m (Array DOM.Element)
+queryAll q = do
+  w <- liftEffect HTML.window
+  d <- liftEffect $ HTML.Doc.toDocument <$> HTML.Win.document w
+  nl <- liftEffect (DOM.P.querySelectorAll (DOM.P.QuerySelector q) (DOM.Doc.toParentNode d))
+  ns <- liftEffect $ DOM.NL.toArray nl
+  pure $ fold $ (maybeToArray <<< DOM.El.fromNode) <$> ns
+
+query :: forall m . MonadEffect m => String -> m DOM.Element
+query q = do
+  queryAll q >>= head >>> case _ of
+    Nothing -> liftEffect $ throw $ "could not find element matching query: " <> q
+    Just x -> pure x
+
 listen :: forall m. MonadEffect m => DOM.Element -> String -> (Ev.Event -> Effect Unit) -> m Unit
 listen e ev f = do
   l <- liftEffect $ Ev.Tar.eventListener f
   liftEffect $ Ev.Tar.addEventListener (Ev.EventType ev) l false $ DOM.El.toEventTarget e
 
+create :: forall m. MonadEffect m => String -> Array String -> Array DOM.Element -> m DOM.Element
+create tag classes children = do
+  w <- liftEffect HTML.window
+  d <- liftEffect $ HTML.Doc.toDocument <$> HTML.Win.document w
+  el <- liftEffect $ DOM.Doc.createElement tag d
+  cl <- liftEffect $ DOM.El.classList el
+  for_ classes \c ->
+    liftEffect $ DOM.DTL.add cl c
+  for_ children \c ->
+    appendElement el c
+  pure el
+
+appendElement :: forall m. MonadEffect m => DOM.Element -> DOM.Element -> m Unit
+appendElement parent child = liftEffect $ DOM.Node.appendChild (DOM.El.toNode child) (DOM.El.toNode parent)
+
+appendText :: forall m. MonadEffect m => DOM.Element -> String -> m Unit
+appendText parent s = do
+  w <- liftEffect HTML.window
+  d <- liftEffect $ HTML.Doc.toDocument <$> HTML.Win.document w
+  n <- liftEffect $ DOM.Doc.createTextNode s d
+  liftEffect $ DOM.Node.appendChild (DOM.Text.toNode n) (DOM.El.toNode parent)
+
 setText :: forall m. MonadEffect m => DOM.Element -> String -> m Unit
 setText e s = liftEffect $ DOM.Node.setTextContent s $ DOM.El.toNode e
 
@@ -47,8 +94,8 @@ updateSubtitle = do
   { text: catchphrase } <- fetch (Config.apiServer <> "/catchphrase") {}
   catchphrase >>= setText subtitle
 
-main :: Effect Unit
-main = launchAff_ do
+mainHomepage :: Effect Unit
+mainHomepage = launchAff_ do
   liftEffect $ log "hi"
   startModel
   marq <- byId "lcolonq-marquee"
@@ -66,3 +113,23 @@ main = launchAff_ do
       Audio.playVoice true i
     listen letter "mouseover" \_ev -> do
       Audio.playVoice false i
+
+mainExtension :: Effect Unit
+mainExtension = launchAff_ do
+  liftEffect $ log "hello from extension"
+  UI.setInterval 1000.0 do
+    e <- query ".chat-scrollable-area__message-container"
+    new <- create "div" [".chat-line__message"] []
+    appendText new "test"
+    appendElement e new
+
+mainObs :: Effect Unit
+mainObs = launchAff_ do
+  startModel
+
+main :: Effect Unit
+main = case Config.mode of
+  0 -> mainHomepage
+  1 -> mainExtension
+  2 -> mainObs
+  _ -> throw "unknown mode"
diff --git a/fig-frontend-client/src/Model.js b/fig-frontend-client/src/Model.js
index 299c645..797bae4 100644
--- a/fig-frontend-client/src/Model.js
+++ b/fig-frontend-client/src/Model.js
@@ -1,11 +1,7 @@
 let canvas = document.getElementById("lcolonq-canvas");
-let socket = new WebSocket("wss://colonq.computer/bullfrog/api/channel/listen/model");
+let socket = null;
 let currentFrame = null;
 
-socket.addEventListener("open", (ev) => {
-  console.log("connected");
-});
-
 async function decompress(blob) {
   let ds = new DecompressionStream("gzip");
   let stream = blob.stream();
@@ -68,7 +64,7 @@ function readPacket(dv) {
 }
 
 function renderCellCanvas(ctx, x, y, c) {
-  if (c) {
+  if (c && c.type === "fg") {
     let msg = c.g1 ? String.fromCodePoint(c.g0, c.g1) : String.fromCodePoint(c.g0);
     if (msg.trim().length) {
       ctx.fillStyle = "black";
@@ -99,6 +95,10 @@ function renderCanvas() {
 }
 
 export const _startModel = () => {
+  socket = new WebSocket("wss://colonq.computer/bullfrog/api/channel/listen/model");
+  socket.addEventListener("open", (ev) => {
+    console.log("connected");
+  });
   socket.addEventListener("message", async (ev) => {
     let arr = await decompress(ev.data);
     let view = new DataView(arr);
diff --git a/fig-frontend-client/src/UI.js b/fig-frontend-client/src/UI.js
new file mode 100644
index 0000000..0b00e5d
--- /dev/null
+++ b/fig-frontend-client/src/UI.js
@@ -0,0 +1,2 @@
+export const _cheatLog = (a) => () => console.log(a);
+export const _setInterval = (delay) => (f) => () => setInterval(f, delay);
diff --git a/fig-frontend-client/src/UI.purs b/fig-frontend-client/src/UI.purs
new file mode 100644
index 0000000..49d797a
--- /dev/null
+++ b/fig-frontend-client/src/UI.purs
@@ -0,0 +1,13 @@
+module UI where
+
+import Prelude
+import Effect (Effect)
+import Effect.Class (class MonadEffect, liftEffect)
+
+foreign import _cheatLog :: forall a. a -> Effect Unit
+cheatLog :: forall m a. MonadEffect m => a -> m Unit
+cheatLog x = liftEffect $ _cheatLog x
+
+foreign import _setInterval :: Number -> Effect Unit -> Effect Unit
+setInterval :: forall m. MonadEffect m => Number -> Effect Unit -> m Unit
+setInterval d f = liftEffect $ _setInterval d f