Responsive capability (#44)

* flags successfully added

* GOOD ENOUGH

public/main.js

@@ -3,7 +3,7 @@
 var flags = null
 
 // Start our Elm application
-var app = Elm.Main.init({ flags: flags })
+var app = Elm.Main.init({ flags: { width: window.innerWidth, height: window.innerHeight } })
 
 // Ports go here
 // https://guide.elm-lang.org/interop/ports.html

src/Game.elm

@@ -116,8 +116,15 @@ update msg (Model model) =
         ( ComputerSelectedCell name, InPlay Computer (ChoosingCellToPlay piece) ) ->
             Model model
                 |> noCmds
-                |> map (playerMakesPlay name piece)
-                |> andThen (checkForWin Computer)
+                |> map (playerTryPlay name piece)
+                |> (\( maybeModel, c ) ->
+                        case maybeModel of
+                            Just m ->
+                                andThen (checkForWin Computer) ( m, c )
+
+                            Nothing ->
+                                Model model |> noCmds
+                   )
 
         ( ComputerSelectedPiece piece, InPlay Computer ChoosingPiece ) ->
             Model model
@@ -127,8 +134,15 @@ update msg (Model model) =
         ( HumanSelectedCell name, InPlay Human (ChoosingCellToPlay piece) ) ->
             Model model
                 |> noCmds
-                |> map (playerMakesPlay name piece)
-                |> andThen (checkForWin Human)
+                |> map (playerTryPlay name piece)
+                |> (\( maybeModel, c ) ->
+                        case maybeModel of
+                            Just m ->
+                                andThen (checkForWin Human) ( m, c )
+
+                            Nothing ->
+                                Model model |> noCmds
+                   )
 
         ( RestartWanted, _ ) ->
             init |> noCmds
@@ -161,7 +175,7 @@ computerChooses msgConstructor boardfunc (Model model) =
             items
                 |> Listn.sample
                 |> msgGenerator msgConstructor
-                |> delay 2
+                |> delay 3
     in
     boardfunc model.board
         |> Listn.fromList
@@ -170,13 +184,17 @@ computerChooses msgConstructor boardfunc (Model model) =
         |> (\cmds -> ( Model model, cmds ))
 
 
-playerMakesPlay : Cellname -> Gamepiece -> Model -> Model
-playerMakesPlay name piece (Model model) =
+playerTryPlay : Cellname -> Gamepiece -> Model -> Maybe Model
+playerTryPlay name piece (Model model) =
     let
         newBoard =
             Board.update name piece model.board
     in
-    Model { model | board = newBoard }
+    if newBoard == model.board then
+        Nothing
+
+    else
+        Just (Model { model | board = newBoard })
 
 
 checkForWin : ActivePlayer -> Model -> ( Model, Cmd Msg )

src/Helpers.elm

@@ -11,12 +11,12 @@ noCmds model =
     ( model, Cmd.none )
 
 
-map : (a -> a) -> ( a, Cmd msg ) -> ( a, Cmd msg )
+map : (a -> b) -> ( a, Cmd msg ) -> ( b, Cmd msg )
 map f ma =
     andThen (noCmds << f) ma
 
 
-andThen : (a -> ( a, Cmd msg )) -> ( a, Cmd msg ) -> ( a, Cmd msg )
+andThen : (a -> ( b, Cmd msg )) -> ( a, Cmd msg ) -> ( b, Cmd msg )
 andThen f ( model, cmds ) =
     let
         ( newa, moreCmds ) =

src/Pages/About.elm

@@ -0,0 +1,131 @@
+module Pages.About exposing (Model, Msg, Params, page)
+
+import Element
+    exposing
+        ( Attribute
+        , DeviceClass(..)
+        , centerX
+        , column
+        , el
+        , fill
+        , height
+        , padding
+        , paragraph
+        , px
+        , spacing
+        , text
+        , width
+        )
+import Element.Font as Font
+import Element.Region as Region
+import Helpers exposing (noCmds)
+import Shared exposing (Dimensions)
+import Spa.Document exposing (Document)
+import Spa.Page as Page exposing (Page)
+import Spa.Url exposing (Url)
+import Styles
+
+
+page : Page Params Model Msg
+page =
+    Page.application
+        { init = init
+        , update = update
+        , subscriptions = subscriptions
+        , view = view
+        , save = save
+        , load = load
+        }
+
+
+
+-- INIT
+
+
+type alias Params =
+    ()
+
+
+type alias Model =
+    Shared.Dimensions
+
+
+init : Shared.Model -> Url Params -> ( Model, Cmd Msg )
+init shared _ =
+    ( shared.dimensions, Cmd.none )
+
+
+
+-- UPDATE
+
+
+type Msg
+    = NoOp
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg model =
+    case msg of
+        NoOp ->
+            model |> noCmds
+
+
+save : Model -> Shared.Model -> Shared.Model
+save _ shared =
+    shared
+
+
+load : Shared.Model -> Model -> ( Model, Cmd Msg )
+load shared _ =
+    ( shared.dimensions, Cmd.none )
+
+
+subscriptions : Model -> Sub Msg
+subscriptions _ =
+    Sub.none
+
+
+
+-- VIEW
+
+
+view : Model -> Document Msg
+view model =
+    { title = "About"
+    , body =
+        [ column (style model)
+            [ el [ Region.heading 1, centerX, Font.bold ] (text "What is this project?")
+            , paragraph [ width fill, height fill, spacing 5, Font.color Styles.blue ]
+                [ text "This is example project of the game Quarto, built using the Elm programming language." ]
+            , el [ Region.heading 1, centerX, Font.bold ] (text "What is Quarto")
+            , paragraph [ width fill, height fill, spacing 5, Font.color Styles.blue ]
+                [ text "Quarto is a board game for two players invented by Swiss mathematician Blaise Müller. It is published and copyrighted by Gigamic. "
+                , text "The game is played on a 4×4 board. "
+                , text "There are 16 unique pieces to play with, each of which is either; "
+                , text "tall or short; "
+                , text "red or blue (or a different pair of colors, e.g. light- or dark-stained wood); "
+                , text "square or circular; "
+                , text "and hollow-top or solid-top. "
+                ]
+            , el [ Region.heading 1, centerX, Font.bold ] (text "How to Play")
+            , paragraph [ width fill, spacing 5, height fill, Font.color Styles.blue ]
+                [ text "Players take turns choosing a piece which the other player must then place on the board."
+                , text "A player wins by placing a piece on the board which forms a horizontal, vertical, or diagonal row of four pieces, all of which have a common attribute (all short, all circular, etc.)."
+                ]
+            ]
+        ]
+    }
+
+
+style : Dimensions -> List (Attribute msg)
+style dimensions =
+    let
+        device =
+            Element.classifyDevice dimensions
+    in
+    case device.class of
+        Phone ->
+            [ Font.center, Font.justify, width fill, height fill, padding 15, spacing 15 ]
+
+        _ ->
+            [ Font.center, Font.justify, width (px 580), height fill, centerX, padding 20, spacing 20 ]