diff --git a/.gitignore b/.gitignore
index b385beb..76ce412 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,3 +12,7 @@ result-*
# Ignore automatically generated direnv output
.direnv
+
+# ---> Project
+# Ignore compiled elm files
+compiled
diff --git a/elm.json b/elm.json
index ce2a08d..5398be3 100644
--- a/elm.json
+++ b/elm.json
@@ -8,7 +8,8 @@
"direct": {
"elm/browser": "1.0.2",
"elm/core": "1.0.5",
- "elm/html": "1.0.0"
+ "elm/html": "1.0.0",
+ "mdgriffith/elm-ui": "1.1.8"
},
"indirect": {
"elm/json": "1.1.3",
diff --git a/flake.nix b/flake.nix
index 94ff734..9a17dba 100644
--- a/flake.nix
+++ b/flake.nix
@@ -30,6 +30,7 @@
elmPackages.elm
elmPackages.elm-test
elmPackages.elm-format
+ entr
];
};
diff --git a/src/Main.elm b/src/Main.elm
index c62a123..003f9f9 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -1,5 +1,82 @@
module Main exposing (main)
-import Html exposing (text)
+import Browser
+import Browser.Events as Events
+import Element exposing (..)
+import Element.Background as Background
+import Element.Font as Font
+import Html exposing (Html)
-main = text "Hello, world!"
+
+main : Program Flags Model Msg
+main =
+ Browser.document { init = init, update = update, subscriptions = subscribe, view = view }
+
+
+type alias Model =
+ { w : Int, h : Int }
+
+
+type alias Flags =
+ ( Int, Int )
+
+
+init : Flags -> ( Model, Cmd Msg )
+init flags =
+ case flags of
+ ( width, height ) ->
+ ( { w = width, h = height }, Cmd.none )
+
+
+type Msg
+ = Resize Int Int
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg model =
+ case msg of
+ Resize width height ->
+ ( { model | w = width, h = height }, Cmd.none )
+
+
+subscribe : Model -> Sub Msg
+subscribe _ =
+ Events.onResize Resize
+
+
+htmlify : List (Element Msg) -> List (Html Msg)
+htmlify =
+ List.map (Element.layout [])
+
+
+vw : Model -> Float -> Float
+vw model percent =
+ Basics.toFloat model.w * percent / 100
+
+
+vh : Model -> Float -> Float
+vh model percent =
+ Basics.toFloat model.h * percent / 100
+
+
+view : Model -> Browser.Document Msg
+view model =
+ { title = "MacGregor House"
+ , body =
+ htmlify
+ [ el
+ [ width fill
+ , height fill
+ , Background.color (rgb255 0 0 0)
+ ]
+ (el
+ [ alignLeft
+ , alignTop
+ , moveRight (vw model 10)
+ , moveDown (vh model 50)
+ , Font.color (rgb255 255 255 255)
+ ]
+ (text "MacGregor House")
+ )
+ ]
+ }
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..d87918b
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,17 @@
+
+
+
+
+ MacGregor House
+
+
+
+
+
+
+
diff --git a/watch.sh b/watch.sh
new file mode 100755
index 0000000..012d98b
--- /dev/null
+++ b/watch.sh
@@ -0,0 +1 @@
+find src/ | entr -r elm make src/Main.elm --output compiled/Main.js