Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings
This repository was archived by the owner on Feb 9, 2021. It is now read-only.

Commit 356f84e

Browse files
committed
Changes from updated Elm API chapter
1 parent 68eb37c commit 356f84e

File tree

2 files changed

+171
-13
lines changed

2 files changed

+171
-13
lines changed

‎assets/elm/elm.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,13 @@
88
"direct": {
99
"elm/browser": "1.0.1",
1010
"elm/core": "1.0.2",
11-
"elm/html": "1.0.0"
11+
"elm/html": "1.0.0",
12+
"elm/http": "2.0.0",
13+
"elm/json": "1.1.2"
1214
},
1315
"indirect": {
14-
"elm/json": "1.1.2",
16+
"elm/bytes": "1.0.7",
17+
"elm/file": "1.0.1",
1518
"elm/time": "1.0.0",
1619
"elm/url": "1.0.0",
1720
"elm/virtual-dom": "1.0.2"

‎assets/elm/src/Main.elm‎

Lines changed: 166 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import Browser
44
import Html exposing (..)
55
import Html.Attributes exposing (..)
66
import Html.Events exposing (onClick)
7+
import Http
8+
import Json.Decode as Decode
79

810

911

@@ -25,44 +27,129 @@ main =
2527

2628
type alias Model =
2729
{ gamesList : List Game
30+
, playersList : List Player
2831
}
2932

3033

3134
type alias Game =
32-
{ title : String
33-
, description : String
35+
{ description : String
36+
, featured : Bool
37+
, id : Int
38+
, thumbnail : String
39+
, title : String
40+
}
41+
42+
43+
type alias Player =
44+
{ displayName : Maybe String
45+
, id : Int
46+
, score : Int
47+
, username : String
3448
}
3549

3650

3751
initialModel : Model
3852
initialModel =
3953
{ gamesList = []
54+
, playersList = []
4055
}
4156

4257

4358
initialCommand : Cmd Msg
4459
initialCommand =
45-
Cmd.none
60+
Cmd.batch
61+
[ fetchGamesList
62+
, fetchPlayersList
63+
]
4664

4765

48-
init : ( Model, Cmd Msg )
49-
init =
66+
init : ()-> ( Model, Cmd Msg )
67+
init _ =
5068
( initialModel, initialCommand )
5169

5270

5371

72+
-- API
73+
74+
75+
fetchGamesList : Cmd Msg
76+
fetchGamesList =
77+
Http.get
78+
{ url = "/api/games"
79+
, expect = Http.expectJson FetchGamesList decodeGamesList
80+
}
81+
82+
83+
fetchPlayersList : Cmd Msg
84+
fetchPlayersList =
85+
Http.get
86+
{ url = "/api/players"
87+
, expect = Http.expectJson FetchPlayersList decodePlayersList
88+
}
89+
90+
91+
decodeGamesList : Decode.Decoder (List Game)
92+
decodeGamesList =
93+
decodeGame
94+
|> Decode.list
95+
|> Decode.at [ "data" ]
96+
97+
98+
decodeGame : Decode.Decoder Game
99+
decodeGame =
100+
Decode.map5 Game
101+
(Decode.field "description" Decode.string)
102+
(Decode.field "featured" Decode.bool)
103+
(Decode.field "id" Decode.int)
104+
(Decode.field "thumbnail" Decode.string)
105+
(Decode.field "title" Decode.string)
106+
107+
108+
decodePlayersList : Decode.Decoder (List Player)
109+
decodePlayersList =
110+
decodePlayer
111+
|> Decode.list
112+
|> Decode.at [ "data" ]
113+
114+
115+
decodePlayer : Decode.Decoder Player
116+
decodePlayer =
117+
Decode.map4 Player
118+
(Decode.maybe (Decode.field "display_name" Decode.string))
119+
(Decode.field "id" Decode.int)
120+
(Decode.field "score" Decode.int)
121+
(Decode.field "username" Decode.string)
122+
123+
124+
54125
-- UPDATE
55126

56127

57128
type Msg
58-
= FetchGamesList
129+
= FetchGamesList (Result Http.Error (List Game))
130+
| FetchPlayersList (Result Http.Error (List Player))
59131

60132

61133
update : Msg -> Model -> ( Model, Cmd Msg )
62134
update msg model =
63135
case msg of
64-
FetchGamesList ->
65-
( { model | gamesList = [] }, Cmd.none )
136+
FetchGamesList result ->
137+
case result of
138+
Ok games ->
139+
( { model | gamesList = games }, Cmd.none )
140+
141+
Err _ ->
142+
Debug.log "Error fetching games from API."
143+
( model, Cmd.none )
144+
145+
FetchPlayersList result ->
146+
case result of
147+
Ok players ->
148+
( { model | playersList = players }, Cmd.none )
149+
150+
Err _ ->
151+
Debug.log "Error fetching players from API."
152+
( model, Cmd.none )
66153

67154

68155

@@ -80,11 +167,79 @@ subscriptions model =
80167

81168
view : Model -> Html Msg
82169
view model =
170+
div []
171+
[ gamesIndex model
172+
, playersIndex model
173+
]
174+
175+
176+
177+
-- GAMES
178+
179+
180+
gamesIndex : Model -> Html msg
181+
gamesIndex model =
83182
if List.isEmpty model.gamesList then
84183
div [] []
85184

86185
else
87-
div []
88-
[ h1 [ class "games-section" ] [ text "Games" ]
89-
, gamesIndex model
186+
div [ class "games-index" ]
187+
[ h2 [] [ text "Games" ]
188+
, gamesList model.gamesList
189+
]
190+
191+
192+
gamesList : List Game -> Html msg
193+
gamesList games =
194+
ul [ class "games-list" ] (List.map gamesListItem games)
195+
196+
197+
gamesListItem : Game -> Html msg
198+
gamesListItem game =
199+
li [ class "game-item" ]
200+
[ strong [] [ text game.title ]
201+
, p [] [ text game.description ]
202+
]
203+
204+
205+
206+
-- PLAYERS
207+
208+
209+
playersIndex : Model -> Html msg
210+
playersIndex model =
211+
if List.isEmpty model.playersList then
212+
div [] []
213+
214+
else
215+
div [ class "players-index" ]
216+
[ h2 [] [ text "Players" ]
217+
, model.playersList
218+
|> playersSortedByScore
219+
|> playersList
90220
]
221+
222+
223+
playersSortedByScore : List Player -> List Player
224+
playersSortedByScore players =
225+
players
226+
|> List.sortBy .score
227+
|> List.reverse
228+
229+
230+
playersList : List Player -> Html msg
231+
playersList players =
232+
ul [ class "players-list" ] (List.map playersListItem players)
233+
234+
235+
playersListItem : Player -> Html msg
236+
playersListItem player =
237+
li [ class "player-item" ]
238+
[ case player.displayName of
239+
Just displayName ->
240+
strong [] [ text displayName ]
241+
242+
Nothing ->
243+
strong [] [ text player.username ]
244+
, p [] [ text (String.fromInt player.score) ]
245+
]

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /