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 }