aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--picarones-elm/default.nix3
-rw-r--r--picarones-elm/display.html34
-rw-r--r--picarones-elm/slide.html4
-rw-r--r--picarones-elm/src/Display.elm32
-rw-r--r--picarones-elm/src/Main.elm6
-rw-r--r--picarones-elm/src/Switcher.elm39
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]
+ }
+
+