Add end-game display

Author: Juzley

elm-package.json

@@ -14,6 +14,7 @@
         "elm-lang/mouse": "1.0.1 <= v < 2.0.0",
         "elm-lang/window": "1.0.1 <= v < 2.0.0",
         "evancz/elm-graphics": "1.0.1 <= v < 2.0.0",
+        "rundis/elm-bootstrap": "3.0.0 <= v < 4.0.0",
         "seanhess/elm-style": "2.0.0 <= v < 3.0.0"
     },
     "elm-version": "0.18.0 <= v < 0.19.0"

src/Board.elm

@@ -111,7 +111,7 @@ clickInfo mousePos board =
         tilePos =
             ( mousePos.x // size, mousePos.y // size )
 
-        info = 
+        info =
             case (mousePos.x // (size // 2)) % 2 of
                 0 ->
                     ( tilePos, RotateCW )
@@ -120,9 +120,14 @@ clickInfo mousePos board =
                     ( tilePos, RotateCCW )
 
         inBounds =
-            mousePos.x > 0 && mousePos.y > 0 &&
-            mousePos.x < board.renderSize &&
-            mousePos.y < board.renderSize
+            mousePos.x
+                > 0
+                && mousePos.y
+                > 0
+                && mousePos.x
+                < board.renderSize
+                && mousePos.y
+                < board.renderSize
     in
         if inBounds then
             Just info
@@ -135,7 +140,7 @@ clickInfo mousePos board =
 lockTile : Mouse.Position -> Board -> Board
 lockTile mousePos board =
     let
-        click = 
+        click =
             clickInfo mousePos board
 
         lockFn =
@@ -149,7 +154,7 @@ lockTile mousePos board =
             )
     in
         case click of
-            Just (pos, _) ->
+            Just ( pos, _ ) ->
                 { board | tiles = Dict.update pos lockFn board.tiles }
 
             Nothing ->
@@ -203,7 +208,8 @@ rotateTile mousePos board =
             clickInfo mousePos board
 
         ( tile, pos, dir ) =
-            maybeCall click ( Nothing, (0, 0), RotateCW )
+            maybeCall click
+                ( Nothing, ( 0, 0 ), RotateCW )
                 (\( p, d ) -> ( getTile board p, p, d ))
 
         move =
@@ -1108,10 +1114,10 @@ barrierRenderFunctions board pos =
 
         upFn =
             if Tuple.second pos == 0 then
-                Collage.move ( 0, edgeTranslate)
+                Collage.move ( 0, edgeTranslate )
                     (Collage.rotate (degrees 90) line)
             else
-                Collage.move ( 0, size / 2)
+                Collage.move ( 0, size / 2 )
                     (Collage.rotate (degrees 90) line)
 
         rightFn =
@@ -1123,18 +1129,18 @@ barrierRenderFunctions board pos =
         downFn =
             if Tuple.second pos == board.size - 1 then
                 Collage.move ( 0, -edgeTranslate )
-                    (Collage.rotate (degrees 90) line)     
+                    (Collage.rotate (degrees 90) line)
             else
                 Collage.move ( 0, -size / 2 )
-                    (Collage.rotate (degrees 90) line)     
+                    (Collage.rotate (degrees 90) line)
 
         leftFn =
             if Tuple.first pos == 0 then
                 Collage.move ( -edgeTranslate, 0 ) line
             else
                 Collage.move ( -size / 2, 0 ) line
     in
-        [ upFn, rightFn, downFn, leftFn ] 
+        [ upFn, rightFn, downFn, leftFn ]
 
 
 renderBarriers : Board -> ( TilePos, Tile ) -> Collage.Form

src/Net.elm

@@ -14,6 +14,9 @@ import Time
 import Keyboard
 import Char
 import Window
+import Bootstrap.Modal as Modal
+import Bootstrap.Button as Button
+import Bootstrap.CDN
 
 
 main =
@@ -46,6 +49,7 @@ type alias Model =
     , gameTime : Int
     , newBoardSize : Int
     , newBoardWrapping : Bool
+    , endGameModalState : Modal.State
     }
 
 
@@ -57,6 +61,7 @@ init =
       , gameTime = 0
       , newBoardSize = defaultBoardSize
       , newBoardWrapping = False
+      , endGameModalState = Modal.hiddenState
       }
     , Task.perform WindowSizeMsg Window.size
     )
@@ -76,6 +81,7 @@ type Msg
     | TickMsg Time.Time
     | BoardSizeMsg String
     | ToggleWrappingMsg
+    | EndGameModalMsg Modal.State
 
 
 toggleLock : Model -> ( Model, Cmd Msg )
@@ -103,7 +109,18 @@ playingUpdate msg model =
                     else
                         Playing
             in
-                ( { model | board = newBoard, mode = mode }, Cmd.none )
+                case newBoard.state of
+                    Board.Complete ->
+                        ( { model
+                            | board = newBoard
+                            , mode = GameOver
+                            , endGameModalState = Modal.visibleState
+                          }
+                        , Cmd.none
+                        )
+
+                    _ ->
+                        ( { model | board = newBoard }, Cmd.none )
 
         KeyboardMsg keyCode ->
             case Char.fromCode keyCode of
@@ -127,7 +144,9 @@ update : Msg -> Model -> ( Model, Cmd Msg )
 update msg model =
     case msg of
         NewGameMsg ->
-            ( model, Task.perform NewBoardMsg Time.now )
+            ( { model | endGameModalState = Modal.hiddenState }
+            , Task.perform NewBoardMsg Time.now
+            )
 
         WindowSizeMsg size ->
             let
@@ -172,6 +191,9 @@ update msg model =
             , Cmd.none
             )
 
+        EndGameModalMsg state ->
+            ( { model | endGameModalState = state }, Cmd.none )
+
         _ ->
             case model.mode of
                 Init ->
@@ -288,6 +310,27 @@ checkbox msg name =
         ]
 
 
+
+-- TODO: Make this look better, calculate score
+
+
+endGameModal : Model -> Html Msg
+endGameModal model =
+    Modal.config EndGameModalMsg
+        |> Modal.h4 [] [ Html.text "You Win!" ]
+        |> Modal.body []
+            [ Html.p [] [ Html.text <| "Moves: " ++ movesString model ]
+            , Html.p [] [ Html.text <| "Time: " ++ gameTimeString model ]
+            , Html.p [] [ Html.text "Score: 0" ]
+            ]
+        |> Modal.footer []
+            [ Button.button
+                [ Button.attrs [ Html.Events.onClick NewGameMsg ] ]
+                [ Html.text "Restart" ]
+            ]
+        |> Modal.view model.endGameModalState
+
+
 view : Model -> Html Msg
 view model =
     let
@@ -300,7 +343,8 @@ view model =
                 |> Element.toHtml
     in
         Html.div [ Html.Attributes.style container ]
-            [ Html.div [ Html.Attributes.style menuColumn ]
+            [ Bootstrap.CDN.stylesheet
+            , Html.div [ Html.Attributes.style menuColumn ]
                 [ Html.button [ Html.Events.onClick ToggleLockMsg ] [ Html.text "Toggle Lock" ]
                 , Html.p [] [ Html.text (movesString model) ]
                 , Html.p [] [ Html.text (gameTimeString model) ]
@@ -309,4 +353,5 @@ view model =
                 , checkbox ToggleWrappingMsg "Wrapping"
                 ]
             , Html.div [ Html.Attributes.style gameColumn ] [ render ]
+            , endGameModal model
             ]