decode touch events

main
Brian Hicks 2022-02-18 08:49:41 -06:00
parent 0f1aee4046
commit c8af9aa7a2
2 changed files with 53 additions and 2 deletions

View File

@ -9,13 +9,16 @@
"elm/browser": "1.0.2",
"elm/core": "1.0.5",
"elm/html": "1.0.0",
"elm/json": "1.1.3",
"elm/random": "1.0.0",
"elm/time": "1.0.0",
"elm/url": "1.0.0",
"mpizenberg/elm-pointer-events": "4.0.2",
"rtfeldman/elm-css": "17.0.5"
},
"indirect": {
"elm/json": "1.1.3",
"elm/bytes": "1.0.8",
"elm/file": "1.0.5",
"elm/virtual-dom": "1.0.2",
"robinheghan/murmur3": "1.0.0",
"rtfeldman/elm-hex": "1.0.0"

View File

@ -6,9 +6,11 @@ import Css
import Css.Global as Global
import Css.Media as Media
import Html as RootHtml
import Html.Events.Extra.Touch as Touch
import Html.Styled as Html exposing (Html)
import Html.Styled.Attributes as HAttrs exposing (css)
import Html.Styled.Events as Events
import Json.Decode as Decode
import Maze exposing (Maze)
import Random
import Route exposing (Route)
@ -29,6 +31,7 @@ type alias Model =
, nextSeed : Int
, newMazeShape : Route.MazeShape
, newMazeDifficulty : Int
, drawing : List ( Float, Float )
}
@ -39,6 +42,7 @@ type Msg
| SetNewMazeShape Route.MazeShape
| SetNewMazeDifficulty Int
| NextMaze
| Draw (List ( Float, Float ))
| BackToGenerator
@ -49,6 +53,7 @@ init () url key =
, nextSeed = 0
, newMazeShape = Route.Hexes
, newMazeDifficulty = 10
, drawing = []
}
, Time.now
|> Task.map Time.posixToMillis
@ -94,7 +99,10 @@ update msg model =
{ width, height, shape } =
baseParams model
in
( { model | nextSeed = model.nextSeed + 1 }
( { model
| nextSeed = model.nextSeed + 1
, drawing = []
}
, Route.Maze
{ shape = shape
, seed = model.nextSeed
@ -105,6 +113,11 @@ update msg model =
|> Navigation.pushUrl model.key
)
Draw newPoints ->
( { model | drawing = newPoints ++ model.drawing }
, Cmd.none
)
BackToGenerator ->
( model
, Navigation.pushUrl model.key (Route.toAbsolutePath Route.New)
@ -137,6 +150,7 @@ view model =
Route.Maze info ->
[ viewMazeControls
, viewCanvas model
, baseMaze info
|> Maze.generate (Random.initialSeed info.seed)
|> viewMaze
@ -237,6 +251,40 @@ controlsBar =
]
viewCanvas : Model -> Html Msg
viewCanvas model =
model.drawing
|> List.map
(\( x, y ) ->
Svg.circle
[ Attrs.cx (String.fromFloat x)
, Attrs.cy (String.fromFloat y)
, Attrs.r "15"
, Attrs.css
[ Css.fill (Css.hex "76FF03")
, darkMode [ Css.fill (Css.hex "CCFF90") ]
]
]
[]
)
|> Svg.svg
[ Attrs.css
[ Css.position Css.absolute
, Css.zIndex (Css.int 1)
, Css.top (Css.px 0)
, Css.left (Css.px 0)
, Css.width (Css.vw 100)
, Css.height (Css.vh 100)
]
, Events.on "touchmove"
(Touch.eventDecoder
|> Decode.map .touches
|> Decode.map (List.map .clientPos)
|> Decode.map Draw
)
]
baseParams : Model -> { width : Int, height : Int, shape : Route.MazeShape }
baseParams model =
{ shape = model.newMazeShape