diff --git a/public/index.html b/public/index.html
index 410c5ad..81826e3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -25,12 +25,13 @@
display: inline-block;
}
- .slider-group > * {
+ .rowContainer > * {
margin-top: 1em;
+ width: 100%;
}
.labelled-slider {
- width: 100%;
+ /* width: 100%; */
display: flex;
}
.labelled-slider input[type=range] {
diff --git a/public/index.html b/public/index.html
index 410c5ad..81826e3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -25,12 +25,13 @@
display: inline-block;
}
- .slider-group > * {
+ .rowContainer > * {
margin-top: 1em;
+ width: 100%;
}
.labelled-slider {
- width: 100%;
+ /* width: 100%; */
display: flex;
}
.labelled-slider input[type=range] {
diff --git a/src/Main.elm b/src/Main.elm
index 73451f4..1259176 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -4,8 +4,8 @@
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
-import Svg exposing (..)
-import Svg.Attributes exposing (..)
+import Svg as S
+import Svg.Attributes as SA
type alias Point =
@@ -83,13 +83,13 @@
|> kochIteration (iterations - 1) model
-lineToSvg : Line -> Svg.Svg msg
+lineToSvg : Line -> S.Svg msg
lineToSvg line =
- Svg.line
- [ x1 (String.fromFloat line.start.x)
- , y1 (String.fromFloat line.start.y)
- , x2 (String.fromFloat line.end.x)
- , y2 (String.fromFloat line.end.y)
+ S.line
+ [ SA.x1 (String.fromFloat line.start.x)
+ , SA.y1 (String.fromFloat line.start.y)
+ , SA.x2 (String.fromFloat line.end.x)
+ , SA.y2 (String.fromFloat line.end.y)
]
[]
@@ -115,6 +115,7 @@
, min : Float
, max : Float
, step : Float
+ , instance : SliderInstance
}
@@ -123,58 +124,89 @@
toFloat (round (number * toFloat (10 ^ precision))) / toFloat (10 ^ precision)
-labelledSlider params msg modelValue =
- div [ Html.Attributes.class "labelled-slider" ]
- [ label [ for params.id ] [ Html.text params.label ]
+labelledSlider params modelValue =
+ div [ class "labelled-slider" ]
+ [ label [ for params.id ] [ text params.label ]
, input
- [ Html.Attributes.id params.id
- , Html.Attributes.type_ "range"
- , Html.Attributes.min <| String.fromFloat params.min
- , Html.Attributes.max <| String.fromFloat params.max
- , Html.Attributes.step <| String.fromFloat params.step
- , Html.Attributes.value <| String.fromFloat modelValue
- , onInput msg
+ [ id params.id
+ , type_ "range"
+ , Html.Attributes.min <| String.fromFloat <| params.min
+ , Html.Attributes.max <| String.fromFloat <| params.max
+ , step <| String.fromFloat <| params.step
+ , value <| String.fromFloat <| modelValue
+ , onInput (Change params.instance)
]
[]
- , span [] [modelValue |> roundToPrecision 2 |> String.fromFloat |> Html.text]
+ , span [] [ modelValue |> roundToPrecision 2 |> String.fromFloat |> text ]
]
view : Model -> Html Msg
view model =
- div [ Html.Attributes.class "tile" ]
- [ h2 [] [ Html.text "Koch" ]
+ div [ class "tile" ]
+ [ h2 [] [ text "Koch" ]
, div []
- [ svg
- [ Svg.Attributes.width "400px"
- , Svg.Attributes.height "400px"
- , Svg.Attributes.style "fill: none; stroke: purple; stroke-width: 1;"
+ [ S.svg
+ [ SA.width "400px"
+ , SA.height "400px"
+ , SA.style "fill: none; stroke: purple; stroke-width: 1;"
]
([ startLine ] |> kochIteration model.iterations model |> List.map lineToSvg)
]
- , div [ Html.Attributes.class "slider-group" ]
- [ labelledSlider { id = "tipHeight", label = "Tip: ", min = -3, max = 3, step = 0.01 } ChangeTipHeight model.tipHeight
- , labelledSlider { id = "gapWidth", label = "Gap: ", min = -3, max = 3, step = 0.01 } ChangeGapWidth model.gapWidth
- , labelledSlider { id = "iterations", label = "Iterations: ", min = 0, max = 6, step = 1 } ChangeIterations model.iterations
+ , div [ class "rowContainer" ]
+ [ labelledSlider
+ { id = "tipHeight"
+ , label = "Tip: "
+ , min = -3
+ , max = 3
+ , step = 0.01
+ , instance = TipHeight
+ }
+ model.tipHeight
+ , labelledSlider
+ { id = "gapWidth"
+ , label = "Gap: "
+ , min = -3
+ , max = 3
+ , step = 0.01
+ , instance = GapWidth
+ }
+ model.gapWidth
+ , labelledSlider
+ { id = "iterations"
+ , label = "Iterations: "
+ , min = 0
+ , max = 6
+ , step = 1
+ , instance = Iterations
+ }
+ model.iterations
]
]
init : Model
init =
- { gapWidth = 1 / 3, tipHeight = 1, iterations = 5 }
+ { gapWidth = 1 / 3
+ , tipHeight = 1
+ , iterations = 5
+ }
+
+
+type SliderInstance
+ = GapWidth
+ | TipHeight
+ | Iterations
type Msg
- = ChangeGapWidth String
- | ChangeTipHeight String
- | ChangeIterations String
+ = Change SliderInstance String
update : Msg -> Model -> Model
update msg model =
case msg of
- ChangeGapWidth newWidth ->
+ Change GapWidth newWidth ->
case String.toFloat newWidth of
Just w ->
{ model | gapWidth = w }
@@ -182,7 +214,7 @@
Nothing ->
model
- ChangeTipHeight newHeight ->
+ Change TipHeight newHeight ->
case String.toFloat newHeight of
Just h ->
{ model | tipHeight = h }
@@ -190,7 +222,7 @@
Nothing ->
model
- ChangeIterations newIterations ->
+ Change Iterations newIterations ->
case String.toFloat newIterations of
Just i ->
{ model | iterations = i }