This repository has been archived by the owner on Oct 7, 2021. It is now read-only.
/
Joystick.elm
118 lines (94 loc) · 2.25 KB
/
Joystick.elm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
module Joystick
exposing
( Model
, update
, model
, view
)
import Html exposing (Html, div, button)
import Html.App as Html
-- import Html.Events exposing (onClick)
import Debug exposing (log)
import Svg exposing (..)
import Svg.Attributes exposing (..)
import Svg.Events exposing (onClick)
import Color exposing (..)
-- MODEL
type alias Model =
{ position : Msg
}
-- UPDATE
model : Model
model =
{ position = None }
-- UPDATE
type Msg
= None
| Left
| Right
| Up
| Down
update : Msg -> Model -> Model
update msg model =
let
dummy =
log "Clicks" msg
in
{ model
| position = msg
}
-- VIEW
view : Model -> Html Msg
view model =
div []
[ svg
[ version "1.1"
, x "0"
, y "0"
, viewBox "0 0 100 100"
]
[ polygon
[ fill "white"
, points "0 0, 30 30, 30 70, 0 100"
, stroke "indianred"
, strokeWidth (toString edgeRatio)
, onClick Left
]
[]
, polygon
[ fill "white"
, points "0 0, 30 30, 70 30, 100 0"
, stroke "indianred"
, strokeWidth (toString edgeRatio)
, onClick Up
]
[]
, polygon
[ fill "white"
, points "100 0, 70 30, 70 70, 100 100"
, stroke "indianred"
, strokeWidth (toString edgeRatio)
, onClick Right
]
[]
, polygon
[ fill "white"
, points "0 100, 30 70, 70 70, 100 100"
, stroke "indianred"
, strokeWidth (toString edgeRatio)
, onClick Down
]
[]
, polygon
[ fill "red"
, points "30 30, 70 30, 70 70, 30 70"
, stroke "indianred"
, strokeWidth (toString edgeRatio)
-- , onClick Left
]
[]
]
]
edgeRatio : Float
edgeRatio =
4.0