/
Main.elm
179 lines (137 loc) · 4.1 KB
/
Main.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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
module P3.Main exposing (main)
import Animator
import Animator.Inline as Inline
import Browser
import Html exposing (Html, div, text)
import Html.Attributes exposing (style)
import Html.Events as Events
import List.Extra as List
import Random
import Time exposing (Posix)
-- モデル
type alias Model =
Animator.Timeline (List Int)
type Msg
= Shuffle (List Int)
| Tick Posix
| Click Int
default : List Int
default =
List.range 0 8
init : () -> ( Model, Cmd Msg )
init _ =
( Animator.init default
, Random.uniform 1 [ -1, -3, 3 ]
|> Random.list 24
|> Random.generate Shuffle
)
-- Model更新用関数(ほぼテンプレート)
animator : Animator.Animator Model
animator =
Animator.animator
|> Animator.watching identity always
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
Shuffle nexts ->
let
stage =
model
|> Animator.current
|> shuffle 0 nexts
|> Debug.log "model"
in
( Animator.go Animator.immediately stage model
, Cmd.none
)
Tick posix ->
( Animator.update posix animator model, Cmd.none )
Click n ->
let
clicked =
List.elemIndex n (Animator.current model)
|> Maybe.withDefault -1
blank =
List.elemIndex 0 (Animator.current model)
|> Maybe.withDefault -1
distance =
abs (clicked - blank)
next =
if distance == 1 || distance == 3 then
List.swapAt clicked blank (Animator.current model)
else
Animator.current model
in
( Animator.go Animator.slowly next model
, Cmd.none
)
shuffle : Int -> List Int -> List Int -> List Int
shuffle zero dirs nums =
case dirs of
[] ->
nums
x :: xs ->
let
next =
zero + x
in
if 0 <= next && next <= 8 then
List.swapAt zero next nums
|> shuffle next xs
else
shuffle zero xs nums
main : Program () Model Msg
main =
Browser.element
{ init = init
, update = update
, subscriptions = subscriptions
, view = view
}
-- subscriptionで一定時間ごとにTickを呼び出すようにする
subscriptions : Model -> Sub Msg
subscriptions model =
Animator.toSubscription Tick model animator
view : Model -> Html Msg
view model =
div
[ style "width" "300px"
, style "margin" "auto"
, style "padding" "100px 0"
]
[ div
[ style "height" "64px"
, style "text-align" "center"
, style "font-size" "32px"
]
[ if Animator.current model == default then
text "SOLVED!"
else
text ""
]
, div [] (List.map (cell model) (Animator.current model))
]
cell : Animator.Timeline (List Int) -> Int -> Html Msg
cell timeline value =
case value of
0 ->
div [] []
_ ->
div
[ style "position" "absolute"
, Events.onClick (Click value)
, Inline.xy timeline <|
\xs ->
let
i =
List.elemIndex value xs
|> Maybe.withDefault 0
in
{ x = Animator.at (toFloat (100 * remainderBy 3 i))
, y = Animator.at (toFloat (100 * (i // 3)))
}
, style "background-color" "orange"
, style "width" "99px"
, style "height" "99px"
]
[ text (String.fromInt value) ]