adds routing and some models

build.sh

@@ -0,0 +1,9 @@
+
+if [[ $1 == "--debug" ]]
+then
+   optimize=""
+else
+   optimize="--optimize"
+fi
+
+elm make src/Main.elm $optimize --output=main.js

src/Main.elm

@@ -2,12 +2,14 @@ module Main exposing (..)
 
 import Browser
 import Browser.Navigation as Nav
+import Platform.Cmd exposing (Cmd)
 import Url
 import Html exposing (..)
 import Html.Attributes exposing (..)
 import Html.Events exposing (..)
 import Http
-import Json.Decode exposing (Decoder, field, string, int)
+import Json.Decode exposing (Decoder, field, list, string, int)
+import Url.Parser as P exposing (Parser, (</>), oneOf, s)
 -- Main
 
 main : Program () Model Msg
@@ -25,26 +27,52 @@ main =
 
 type alias Model =
     { key : Nav.Key
-    , url : Url.Url
+    , route : Route
     , player: Player
+    , loot: Maybe Loot
+    , groupLoot : Maybe Loot
     , error: String
     }
 
 init : () -> Url.Url -> Nav.Key -> ( Model, Cmd Msg )
 init flags url key =
-    ( Model key url blankPlayer "", (fetchPlayer 0))
+    let
+        route = case P.parse routeParser url of
+                    Just r -> r
+                    Nothing -> GroupLoot
+    in
+        ( Model key route blankPlayer Nothing Nothing "", initPlayer 0)
 
 
 -- PLAYER
 --
 type alias Player =
-    { name: String
+    { id: Int
+    , name: String
     , debt: Int
     , wealth: Wealth
     }
 
 blankPlayer =
-    Player "Loading" 100 (Wealth 0 0 0 0)
+    Player 0 "Loading" 100 (Wealth 0 0 0 0)
+
+initPlayer id =
+    Cmd.batch [fetchPlayer id, fetchLoot id]
+
+fetchPlayer : Int -> Cmd Msg
+fetchPlayer id =
+    Http.get
+        { url = "http://localhost:8088/api/players/" ++ (String.fromInt id) ++ "/"
+        , expect = Http.expectJson GotPlayer (valueDecoder playerDecoder )
+        }
+
+playerDecoder : Decoder Player
+playerDecoder =
+    Json.Decode.map4 Player
+    (field "id" int)
+    (field "name" string)
+    (field "debt" int)
+    wealthDecoder
 
 type alias Wealth =
     { cp: Int
@@ -53,31 +81,51 @@ type alias Wealth =
     , pp: Int
     }
 
-fetchPlayer : Int -> Cmd Msg
+wealthDecoder : Decoder Wealth
-fetchPlayer id =
+wealthDecoder =
-    Http.get
+    Json.Decode.map4 Wealth
-        { url = "http://localhost:8088/api/players/" ++ (String.fromInt id) ++ "/"
+        (field "cp" int)
-        , expect = Http.expectJson GotPlayer playerDecoder
+        (field "sp" int)
-        }
+        (field "gp" int)
+        (field "pp" int)
 
-playerDecoder : Decoder Player
+type alias Item =
-playerDecoder =
+    { id: Int
-    Json.Decode.map3 Player
+    , name: String
-    (field "value" (field "name" string))
+    , base_price: Int
-    (field "value" (field "debt" int))
+    }
-    (Json.Decode.map4 Wealth
+
-        (field "value" (field "cp" int))
+itemDecoder =
-        (field "value" (field "sp" int))
+    Json.Decode.map3 Item
-        (field "value" (field "gp" int))
+        (field "id" int)
-        (field "value" (field "pp" int)))
+        (field "name" string)
+        (field "base_price" int)
+
+type alias Loot =
+    List Item
+
+lootDecoder : Decoder Loot
+lootDecoder =
+    Json.Decode.list itemDecoder
+
+fetchLoot id =
+    Http.get
+        { url = "http://localhost:8088/api/players/" ++ (String.fromInt id) ++ "/loot"
+        , expect = Http.expectJson GotLoot (valueDecoder lootDecoder)}
+-- API Response
+--
+valueDecoder : Decoder a -> Decoder a
+valueDecoder thenDecoder =
+    field "value" thenDecoder
 
 -- UPDATE
 
 type Msg
     = LinkClicked Browser.UrlRequest
     | UrlChanged Url.Url
-    | DebugSwitchPlayer Int
+    | PlayerChanged Int
     | GotPlayer (Result Http.Error Player)
+    | GotLoot (Result Http.Error Loot)
 
 update : Msg -> Model -> ( Model, Cmd Msg )
 update msg model =
@@ -92,12 +140,22 @@ update msg model =
                     ( { model | error = "Invalid request '" ++ href ++ "'" }, Cmd.none )
 
         UrlChanged url ->
-            ( { model | url = url }
+            let
-            , Cmd.none
+                route = P.parse routeParser url
-            )
+            in
+                case route of
+                    Just page ->
+                        ( { model | route = page }
+                        , case page of
+                            GroupLoot -> Cmd.none
+                            a -> Cmd.none
+                        )
 
-        DebugSwitchPlayer id ->
+                    Nothing ->
-            ( model, fetchPlayer id)
+                        ( { model | error = "Invalid route" }, Cmd.none )
+
+        PlayerChanged newId ->
+            ( { model | player = blankPlayer }, initPlayer newId )
 
         GotPlayer result ->
             case result of
@@ -105,7 +163,15 @@ update msg model =
                     ( { model | player = player }
                     , Cmd.none
                     )
-                Err error -> ( { model | error = (printError error) }, Cmd.none )
+                Err error -> ( { model | error = "Fetching player... " ++ (printError error) }, Cmd.none )
+
+        GotLoot result ->
+            case result of
+                Ok loot ->
+                    ( { model | loot = Just loot}
+                    , Cmd.none
+                    )
+                Err error -> ( { model | error = "Fetching loot... " ++ (printError error) }, Cmd.none )
 
 -- ERRORS
 
@@ -131,29 +197,53 @@ view model =
     , body =
         [ viewHeaderBar model
         , viewPlayerWealth model.player
-        , section []
+        , section [class "container"]
-            [ text "Loot-a-lot" ]
+            (case model.route of
-        , p [] [ text "Start using it !" ]
+                 PlayerChest ->
-        , viewDebugSection model
+                     [ p [] [text "Mon Coffre"]
+                     , viewLoot (case model.loot of
+                                     Just i -> i
+                                     Nothing -> [])
+                     ]
+
+                 GroupLoot ->
+                     [ p [] [text "Coffre de groupe"] ]
+
+                 Merchant ->
+                     [ p [] [text "Acheter des objets"] ]
+
+                 NewLoot ->
+                     [ p [] [text "Nouveau trésor :) "] ]
+            )
+        , section [class "container"] [viewDebugSection model]
         ]
     }
 
+viewItemTableRow item =
+    tr  [class "table"]
+        [ td [] [p [] [text item.name]]
+        ]
+
+viewLoot : Loot -> Html Msg
+viewLoot items =
+    table []
+        (List.map viewItemTableRow items)
 -- DEBUG SECTION
 
 viewDebugSection model =
     div [class "panel is-danger"]
         [ p [class "panel-heading"] [text "Debug"]
         , debugSwitchPlayers
-        , p [class "panel-block"] [text ("URL :" ++ Url.toString model.url)]
         , p [class "panel-block has-text-danger"] [text model.error]
+        , p [class "panel-block"] [text ("Route : " ++ Debug.toString model.route)]
         ]
 
 debugSwitchPlayers : Html Msg
 debugSwitchPlayers =
     div [ class "panel-tabs" ]
-        [ a [ onClick (DebugSwitchPlayer 0) ] [text "Groupe"]
+        [ a [ onClick (PlayerChanged 0) ] [text "Groupe"]
-        , a [ onClick (DebugSwitchPlayer 1) ] [text "Lomion"]
+        , a [ onClick (PlayerChanged 1) ] [text "Lomion"]
-        , a [ onClick (DebugSwitchPlayer 2) ] [text "Fefi"]
+        , a [ onClick (PlayerChanged 2) ] [text "Fefi"]
         ]
 -- HEADER SECTION
 
@@ -172,8 +262,8 @@ viewHeaderBar model =
               ]
         , div [ class "navbar-menu is-active" ]
               [ div [class "navbar-end"]
-                    [ a [class "navbar-item", href "#marchand"] [text "Marchand"]
+                    [ a [class "navbar-item", href "/marchand"] [text "Marchand"]
-                    , a [class "navbar-item", href "#coffre"] [text "Mon coffre"]
+                    , a [class "navbar-item", href "/coffre"] [text "Mon coffre"]
                     ]
               ]
 
@@ -187,9 +277,8 @@ viewPlayerWealth player =
     section [ class "level" ]
         ([div [class "level-left box"]
             ([div [ class "level-item" ]
-                 [ p [class "is-size-3"] [text "Argent"]
+                  [ span [ class "icon is-large" ]
-                 , span [ class "icon is-large" ] [ i [ class "fas fa-2x fa-piggy-bank" ] [] ]
+                         [ i [ class "fas fa-2x fa-piggy-bank" ] [] ]]
-                 ]
             ] ++ (showWealth player.wealth))
         ] ++ (if player.debt > 0 then
                 [ div [class "level-right"]
@@ -217,3 +306,23 @@ showWealthField name value =
         [ p [ class "is-size-4"] [text (String.fromInt value)]
         , p [class "heading"] [text name]
         ]
+
+
+-- ROUTES
+--
+
+type Route
+    = PlayerChest
+    | Merchant
+    | GroupLoot
+    | NewLoot
+
+routeParser : Parser (Route -> a) a
+routeParser =
+    oneOf
+        [ P.map GroupLoot P.top
+        , P.map PlayerChest (P.s "coffre")
+        , P.map Merchant (P.s "marchand")
+        , P.map NewLoot (P.s "nouveau-tresor")
+        ]
+