6 files changed, 109 insertions, 9 deletions
diff --git a/picarones-elm/default.nix b/picarones-elm/default.nix
index 2fc650b..45106b4 100644
--- a/picarones-elm/default.nix
+++ b/picarones-elm/default.nix
@@ -47,11 +47,12 @@ in mkDerivation {
   patchPhase = ''
     substituteInPlace index.html --replace "{{ baseurl }}" ${lib.escapeShellArg baseurl}
     substituteInPlace slide.html --replace "{{ serverurl }}" ${lib.escapeShellArg serverurl}
+    substituteInPlace display.html --replace "{{ serverurl }}" ${lib.escapeShellArg serverurl}
   '';
 
   srcs = ./elm-srcs.nix;
   src = ./.;
-  targets = ["Main" "Cover"];
+  targets = ["Display" "Switcher" "Cover"];
   srcdir = "./src";
   outputJavaScript = true;
 }
diff --git a/picarones-elm/display.html b/picarones-elm/display.html
new file mode 100644
index 0000000..88bebf1
--- /dev/null
+++ b/picarones-elm/display.html
@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Main</title>
+  <script src="Display.js"></script>
+  <link rel="stylesheet" type="text/css" href="document.css" />
+</head>
+
+<body>
+  <div id="elm"></div>
+  <script>
+    let args = location.hash.split("#").slice(1);
+
+    var app = Elm.Display.init({
+        node: document.getElementById('elm'),
+        flags: [args[0], parseInt(args[1])]
+    });
+
+    let ws = new WebSocket("{{ serverurl }}")
+    
+    ws.onopen = () => ws.send (JSON.stringify ({room:args[0]}));
+
+    ws.onmessage = function(msg) {
+        console.log(msg.data)
+        app.ports.recvPort.send(msg.data)
+    }
+
+    app.ports.sendPort.subscribe(function(msg) {
+        ws.send(msg)
+    })
+  </script>
+</body>
+</html>
diff --git a/picarones-elm/slide.html b/picarones-elm/slide.html
index a72fb3c..4c63f97 100644
--- a/picarones-elm/slide.html
+++ b/picarones-elm/slide.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Main</title>
-  <script src="Main.js"></script>
+  <script src="Switcher.js"></script>
   <link rel="stylesheet" type="text/css" href="document.css" />
 </head>
 
@@ -12,7 +12,7 @@
   <script>
     let args = location.hash.split("#").slice(1);
 
-    var app = Elm.Main.init({
+    var app = Elm.Switcher.init({
         node: document.getElementById('elm'),
         flags: [args[0], parseInt(args[1])]
     });
diff --git a/picarones-elm/src/Display.elm b/picarones-elm/src/Display.elm
new file mode 100644
index 0000000..20fcfe7
--- /dev/null
+++ b/picarones-elm/src/Display.elm
@@ -0,0 +1,32 @@
+module Display exposing (..)
+
+import Browser
+import Html exposing (Html, button, div, text, br, input, img)
+import Html.Attributes exposing (style, class, value, placeholder, src)
+import Html.Events exposing (onInput, onClick)
+import Html.Lazy exposing (lazy)
+import List exposing (foldr)
+
+import Main exposing (..)
+
+main = Browser.document
+    { init = init
+    , update = update
+    , view = view
+    , subscriptions = subscriptions
+    }
+
+
+{- VIEW COMPONENTS -}
+
+ -- our body consists of a slide container and a couple controls
+body : Model -> Html Msg
+body model = div [class "display"] (slideView model.slide model.max model.prefix)
+
+
+view : Model -> Browser.Document Msg
+view model = { title = "Picarones"
+             , body = [body model]
+             }
+
+
diff --git a/picarones-elm/src/Main.elm b/picarones-elm/src/Main.elm
index 6e69fe4..f4a4dc2 100644
--- a/picarones-elm/src/Main.elm
+++ b/picarones-elm/src/Main.elm
@@ -12,12 +12,6 @@ import Protocol exposing (decodeState, encodeState)
 import Json.Decode as D
 
 
-main = Browser.document
-    { init = init
-    , update = update
-    , view = view
-    , subscriptions = subscriptions
-    }
 
  -- subscribe to messages from the websocket
 subscriptions : Model -> Sub Msg
diff --git a/picarones-elm/src/Switcher.elm b/picarones-elm/src/Switcher.elm
new file mode 100644
index 0000000..e1a7709
--- /dev/null
+++ b/picarones-elm/src/Switcher.elm
@@ -0,0 +1,39 @@
+module Switcher exposing (..)
+
+import Browser
+import Html exposing (Html, button, div, text, br, input, img)
+import Html.Attributes exposing (style, class, value, placeholder, src)
+import Html.Events exposing (onInput, onClick)
+import Html.Lazy exposing (lazy)
+import List exposing (foldr)
+
+import Main exposing (..)
+
+main = Browser.document
+    { init = init
+    , update = update
+    , view = view
+    , subscriptions = subscriptions
+    }
+
+
+{- VIEW COMPONENTS -}
+
+ -- our body consists of a slide container and a couple controls
+body : Model -> Html Msg
+body model = div []
+        [ div [class "slides"] (slideView model.slide model.max model.prefix)
+        , div [class "controls"] 
+            [ button [ onClick PrevSlide ] [ text "←" ]
+            , text (String.fromInt (model.slide+1))
+            , button [ onClick NextSlide ] [ text "→" ]
+            ]
+        ]
+
+
+view : Model -> Browser.Document Msg
+view model = { title = "Picarones"
+             , body = [body model]
+             }
+
+