Add a rotate and a shuffle button

Author: HadrienMP

src/elm/Lib/Icons.elm

@@ -6,6 +6,14 @@ import Ionicon
 import Ionicon.Android
 import Svg exposing (Svg)
 
+rotate : Svg msg
+rotate =
+    display Ionicon.refresh
+
+shuffle : Svg msg
+shuffle =
+    display Ionicon.shuffle
+
 plus : Svg msg
 plus =
     display Ionicon.plus

src/elm/Main.elm

@@ -3,7 +3,7 @@ port module Main exposing (..)
 import Browser
 import Browser.Navigation as Nav
 import Html exposing (..)
-import Html.Attributes exposing (class, id, type_, value)
+import Html.Attributes exposing (class, disabled, hidden, id, type_, value)
 import Html.Events exposing (onClick, onInput, onSubmit)
 import Js.Commands
 import Js.Events
@@ -14,6 +14,7 @@ import Lib.Icons as Icons
 import Lib.ListExtras exposing (assign, rotate, uncons)
 import Mobbers exposing (Mobber, Mobbers)
 import Random
+import Random.List
 import SharedEvents
 import Sound.Library
 import Svg exposing (Svg, svg)
@@ -100,6 +101,7 @@ type Msg
     | UnknownEvent
     | MobberNameChanged String
     | AddMobber
+    | ShuffleMobbers
 
 
 update : Msg -> Model -> ( Model, Cmd Msg )
@@ -176,6 +178,9 @@ update msg model =
                 |> sendEvent
             )
 
+        ShuffleMobbers ->
+            ( model, Random.generate (ShareEvent << SharedEvents.ShuffledMobbers) <| Random.List.shuffle model.mobbers )
+
 
 hasTurnEnded : Model -> Bool
 hasTurnEnded model =
@@ -186,6 +191,7 @@ hasTurnEnded model =
         _ ->
             False
 
+
 end : ClockState -> ClockState
 end clockState =
     case clockState of
@@ -237,6 +243,12 @@ applyTo state event =
         ( SharedEvents.DeletedMobber mobber, _ ) ->
             ( { state | mobbers = List.filter (\m -> m /= mobber) state.mobbers }, Cmd.none )
 
+        ( SharedEvents.RotatedMobbers, _ ) ->
+            ( { state | mobbers = rotate state.mobbers }, Cmd.none )
+
+        ( SharedEvents.ShuffledMobbers mobbers, _ ) ->
+            ( { state | mobbers = mobbers }, Cmd.none )
+
         _ ->
             ( state, Cmd.none )
 
@@ -301,6 +313,24 @@ view model =
                     [ input [ type_ "text", onInput MobberNameChanged, value model.mobberName ] []
                     , button [ type_ "submit" ] [ Icons.plus ]
                     ]
+                , div [ class "button-row" ]
+                    [ button
+                        [ class "labelled-icon-button"
+                        , disabled (List.length model.mobbers < 2)
+                        , onClick <| ShareEvent <| SharedEvents.RotatedMobbers
+                        ]
+                        [ Icons.rotate
+                        , text "Rotate"
+                        ]
+                    , button
+                        [ class "labelled-icon-button"
+                        , disabled (List.length model.mobbers < 3)
+                        , onClick ShuffleMobbers
+                        ]
+                        [ Icons.shuffle
+                        , text "Shuffle"
+                        ]
+                    ]
                 , ul []
                     (model.mobbers
                         |> assign [ "Driver", "Navigator" ]

src/elm/SharedEvents.elm

@@ -2,7 +2,7 @@ module SharedEvents exposing (..)
 
 import Json.Decode
 import Json.Encode
-import Mobbers exposing (Mobber)
+import Mobbers exposing (Mobber, Mobbers)
 import Sound.Library
 import Time
 
@@ -12,6 +12,8 @@ type Event
     | Stopped
     | AddedMobber Mobber
     | DeletedMobber Mobber
+    | RotatedMobbers
+    | ShuffledMobbers Mobbers
 
 
 
@@ -44,6 +46,12 @@ decoderFromName eventName =
         "DeletedMobber" ->
             Json.Decode.map DeletedMobber (Json.Decode.field "mobber" Mobbers.jsonDecoder)
 
+        "ShuffledMobbers" ->
+            Json.Decode.map ShuffledMobbers (Json.Decode.field "mobbers" (Json.Decode.list Mobbers.jsonDecoder))
+
+        "RotatedMobbers" ->
+            Json.Decode.succeed RotatedMobbers
+
         _ ->
             Json.Decode.fail <| "I don't know this event " ++ eventName
 
@@ -87,3 +95,13 @@ toJson event =
                 [ ( "name", Json.Encode.string "DeletedMobber" )
                 , ( "mobber", Mobbers.toJson mobber )
                 ]
+
+            ShuffledMobbers mobbers ->
+                [ ( "name", Json.Encode.string "ShuffledMobbers" )
+                , ( "mobbers", Json.Encode.list Mobbers.toJson mobbers )
+                ]
+
+            RotatedMobbers ->
+                [ ( "name", Json.Encode.string "RotatedMobbers" ) ]
+
+

src/sass/_header.scss

@@ -139,9 +139,9 @@ nav {
   button {
     flex: 1 1;
     display: inline-block;
-    font-size: 1.2em;
+    font-size: 1.4em;
     text-align: center;
-    padding: 4px 0;
+    padding: $padding-space 0;
     text-shadow: 1px 1px 1px #666;
     border-right: 1px solid $border-color;
     color: white;

src/sass/main.scss

@@ -62,14 +62,48 @@ button {
   border: none;
   background: $dark-button-color;
   color: white;
-  padding: 0 20px;
   outline: none;
   cursor: pointer;
   font-size: .9em;
+  @include icon(1.3em, white);
+  display: inline-flex;
+  align-items: center;
+  padding: $padding-space;
 
   &:hover {
     background: $light-button-color;
   }
+
+  &[disabled] {
+    opacity: .6;
+    cursor: auto;
+    &:hover {
+      background: $dark-button-color;
+    }
+  }
+}
+
+.labelled-icon-button {
+  .icon {
+    padding-right: .4em;
+    margin-right: .4em;
+    border-right: 1px solid white;
+  }
+}
+
+.button-row {
+  display: flex;
+  margin: $margin-space 0;
+
+  button {
+    flex: auto;
+    justify-content: center;
+    margin-left: .2em;
+
+    &:first-child {
+      margin-left: 0;
+    }
+  }
 }
 
 .form-field {