3 files changed, 71 insertions, 6 deletions
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]
+             }
+
+