Issue Context

Currently, the app allows manual piece placement for both Player1 and Player2 which would mean two people could play by taking turns manipulating the same physical interface (keyboard, mouse, touchscreen). This is fine for a demo, but not a real application. We're not ready to introduce a backend yet, so we'll need to convert to a Player vs Computer model. This means that the app logic will have to take a different set of actions if it's a human player vs a computer player

Suggested Solution

• Change the model (and subequent) Msg type, update, and view functions to recognize a computer player or human player
• The computer player should pluck the first piece possible from the list of remaining pieces, and play it in the first board cell position available.

Alternatives Considered

N/A

Additional Resources

See here in the read me for how to run and install the application.

See here in contributing for the basics on forking and cloning the repository.

Issue Context

Would like to have the application working natively on mobile devices as a progressive web app.

Suggested Solution

The app has a valid site.manifest file (enabled browsers allow it to be placed as a native button on the home screen and launched from there. However without a service worker, the app cannot be used online.

Alternatives Considered

Additional Resources

• service worker for elm app examples here and here (I would start with this one).
  See here in the read me for how to run and install the application.

See here in contributing for the basics on forking and cloning the repository.

Context of Issue

As a modern web application it would be nice to have a favicon image in the browser tab. We want to be thorough and make sure we hit as many file formats as possible since the intent is to have this app work on multiple platforms.

Suggested Solution

After doing some research, it seems like the best method would be creating a favicon.ico with a collection of related images. Our suggested path would be:

• Go to this Favicon Generator. Although this site makes favicons, they don't produce quite as details results as we would like, so we're just going to use them to generate a good source png.
• The text used should be "EQ" (for Elm Quarto)
• The shape should be square or square with rounded corners
• Choose an appropriate font for a favicon. Adjust the size until the text no longer touches the edges of the background square (but is still as large enough to be clearly legible in a tab corner)
• For the background and text colours you can use any mix of the following colours (these are the colours used by the elmlang logo). Please use a colour combo with strong contrast
  • #60B5CC
  • #7FD13B
  • #F0AD00
  • #5A6378
• Download the resulting ico folder.
• Next, go to the actual site we will be using to create our favicon ico, realfavicongenerator
• Select the "android-chrome-512x512.png" image from the set that you downloaded earlier
• Use the default options except for the following
  • For the Favicon for Android Chrome section, select the apply a slight drop shadow option
  • For the MacOS Safari section, select the Turn your picture into a monochrome icon option. You may also adjust the colour to one of the colours suggested above.
  • In the Favicon Generator Options section, check both additional file option
• Click Generate your Favicons and Html code to download the favicons folder
• Follow the guide to add the appropriate files to the project folder and modify the index.html file
• Wherever it says to use project "root" folder, that should mean the repositories public folder
• If successful, when you run the dev server, your newly made favicon should appear in the browser

Alternatives (if relevant)

Contemplated a html solution but that seems to be less flexible than the ico method and will be supported by less browsers and other applications.

Note that I am not an expert in this type of thing. If there is a more sensible way to go about this while creating the same end result, please let me know.

Additional Resources

Issue Context

The current functions to calculate game wins are quite difficult to read and harder to debug and understand.

This function returns a list of lists and should be refactored to make the win state clearer

boardToWinnableCells : CellBoard -> List (List Cell)
boardToWinnableCells board =
    let
        isCellEmpty { cellstate } =
            cellstate == EmptyCell
    in
    [ [ board.a1, board.a2, board.a3, board.a4 ] -- column A
    , [ board.b1, board.b2, board.b3, board.b4 ] -- column B
    , [ board.c1, board.c2, board.c3, board.c4 ] -- column C
    , [ board.d1, board.d2, board.d3, board.d4 ] -- column D
    , [ board.a1, board.b1, board.c1, board.d1 ] -- row 1
    , [ board.a2, board.b2, board.c2, board.d2 ] -- row 2
    , [ board.a3, board.b3, board.c3, board.d3 ] -- row 3
    , [ board.a4, board.b4, board.c4, board.d4 ] -- row 4
    , [ board.a1, board.b2, board.c3, board.d4 ] -- back slash diagonal
    , [ board.a4, board.b3, board.c2, board.d1 ] -- forward slash diagonal
    ]
        |> List.filter (List.all isCellEmpty)

This function actually calculates the wins but that's not clear from the types or the logic

matchingDimensions : List Gamepiece -> Bool
matchingDimensions gamepieces =
    gamepieces
        -- convert from list of game pieces to sets of strings
        |> List.map (gamepieceToList >> Set.fromList)
        -- { "Circle", "Filled", "Colour1, ""Large"}
        -- interset the sets to make one set of common values
        |> Liste.foldl1 Set.intersect
        -- convert from Maybe set to set
        |> Maybe.withDefault Set.empty
        -- return True is set isn't empty, false if it is
        |> not
        << Set.isEmpty

This top level function puts the other two together but that gets lost in all the transformations. Again, very hard to follow logic.

isWin : CellBoard -> Bool
isWin board =
    board
        -- turn  a board to list of lists of game winning cells
        |> boardToWinnableCells
        -- strip cell names
        |> List.map (List.map (\{ cellstate } -> cellstate))
        -- convert cells to gamepieces and filter out cells that dont have gamepieces in them
        |> List.map (List.map cellstateToMaybe)
        |> List.map (List.filterMap identity)
        -- filter out those that aren't filled in
        |> List.filter (\x -> List.length x >= 4)
        -- turn to list of booleans on if cells have matches
        |> List.map matchingDimensions
        -- filter out false values
        |> List.filter identity
        -- if any values remain, return  bool
        |> not
        << List.isEmpty

Suggested Solution

Let's use types to clear up the logic slightly.

• Let's make a type called FilledRow which is a record with four fields that take a Gamepiece
• Let's have boardToWinnableCells return a list of FilledRow instead.
• Let's make a helper function tryCreateWinconfiguration that accepts four cells and returns a Maybe Filledrow
• Let's define a type that represents a win and have matchingDImensions accept a FilledRow and return a Maybe Win.
• Let's refactor isWin to tryWin and have it return a Maybe Win instead of a Bool

Alternatives Considered

N/A

Additional Resources

N/A

See here in the read me for how to run and install the application.

See here in contributing for the basics on forking and cloning the repository.

Issue Context

In the Game.elm file, we've defined a NoOp Msg that we don't seem to actually need. For the sake of reducing the complexity of the code, it should be removed.

Suggested Solution

• Remove the NoOp from the acceptable Msg cases in Game.elm
• Remove the corresponding reference to it in the update function of Game.elm

Alternatives Considered

N/A

Additional Resources

You can take a peek at the file here before you start if you like.

See here in the read me for how to run and install the application.

See here in contributing for the basics on forking and cloning the repository.

Issue Context

Currently the buttons for the gamepiece shapes are inaccessible. Their label attributes are set to the SVG images of the shapes themselves, rather than text that can be picked up by a screen reader.

Current button implementation for board.

viewCellButton : Cell -> Element Msg
viewCellButton cell =
    Input.button
        [ Border.color Styles.blue, Border.width 5 ]
        { onPress = Just (PlaceAttempt cell)
        , label = viewCell cell
        }

Current button implementation for available gamepiece

viewRemainingPiecesButton : Gamepiece -> Element Msg
viewRemainingPiecesButton gamepiece =
    let
        svgImage =
            viewGamepiece gamepiece
    in
    Input.button [] { onPress = Just (Clicked gamepiece), label = svgImage }

Suggested Solution

Refactor the way the view renders the available pieces and the game board to do the following

• Use the function suggested in the additional resources to modify the button attributes so they can have aria-label text. The text should be a string representation of the gamepiece. e.g. "Square Colour1 Filled Small", "Circle Colour2 Hollow Large"
• Alternatively, the buttons can be change to have text based labelling (the same text as suggested for the aria-labels above), but maybe hide the labels so they can be picked up by a screen reader, but not seen by the average user.
• The shapes can be rendered as image backgrounds for the buttons, rather than labels?
• A tooltip that appears when a mouse hovers over a shape and describes it would be neat

Project maintainers are currently using a combination of Web Accessiblity Evaluation Tool (WAVE) and the AXE accessibility tool. Any submitted PR would be checked with one (or both) of these tools to see if accessibility standards have been met.

Alternatives Considered

If it's not possible to add the aria-labels or use the shapes as backgrounds to the buttons themselves, the buttons may need to be placed into individual Els (divs) and then have those use the shapes as backgrounds.

Additional Resources

Elm-UI has a module with some features that help with accessiblity. This function looks like it can provide what we're looking for.

See here in the read me for how to run and install the application.

See here in contributing for the basics on forking and cloning the repository.

Issue Context

We'd link to include an < noscript > tag in the index file. This will appear if anyone attempts to access the site but has disabled javascript on their browser.

Suggested Solution

Since the site will not work at all without javascript enabled, we simply want the elements in the noscript tag to

• Have some text telling the user that the site does not work without javascript
• Put a href link to link to this repo since github works without javascript enabled.

At the end, you can test it works by disabling javascript on the page. The explanation text and link should show up.

Alternatives Considered

I have no clue how to make this site without js.

Additional Resources

N/A

See here in the read me for how to run and install the application.

See here in contributing for the basics on forking and cloning the repository.

Issue Context

Currently the game page tracks whether a game is going on with the following data types in the Quarto.elm file.

type Gamestatus
    = ActiveGame Activeplayer SelectedPiece
    | GameOver EndStatus


type EndStatus
    = GameWon Player
    | Draw

Notably, EndStatus is a parameter of one branch of the Gamestatus data type. However, this abstraction feels like it's unnecessary and causes tedious branching logic like

viewGamestatus gamestatus =
    case gamestatus of
        GameOver endstatus ->
            case endstatus of
                GameWon player ->
                    ...
                Draw ->
                    ...

Having to do this every time we need to check the game state is annoying.

Suggested Solution

The proposal is to merge the two data types into one single union type with three branches

type Gamestatus
    = ActiveGame Activeplayer SelectedPiece
    | GameWon Player
    | Draw

Then, perform the necessary refactors to the update logic and the view to match the change to the model. That should hopefully simplify some of the game logic and reduce the cases of nested case statements.

Alternatives Considered

N/A

Additional Resources

N/A

Describe the bug

After trying to install the app as a PWA, the image icon doesn't show up.

Expected behavior
There should be an image from the favicon showing up.

Smartphone (please complete the following information):

- Device: Galaxy A21s
 - OS: Android 10
 - Browser Firefox Beta 
 - Version 83.0.0 

Additional context

• Currently, we're keeping the site manifest in the favicon folder. Not sure if that's correct.
• In the site.webmanifest file we have

{
    "name": "Elm Quarto",
    "short_name": "Elm Quarto",
    "description": "Functional and accessible web app based on the popular (and highly entertaining) board game Quarto.",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#000000",
    "background_color": "#ffffff",
    "display": "standalone"
}

We only make mention of android-chrome. It may be necessary to add more to the icons list?

Any help would be appreciated on this.

UPDATE
This web.dev article seems to describe the problem. Apparently, the images in the icons may need a "purpose" field to enable that functionality.

See here in the read me for how to run and install the application.

See here in contributing for the basics on forking and cloning the repository.

Issue Context

To successfully create a Progressive Web App (A web application capable of being placed on a mobile home screen), we will need to add a manifest.json file with the right config information.

Suggested Solution

• Clone and Fork the repository if you have not already
• navigate to the folder that contains the index.html file and add a manifest.webmanifest file
• add the following information to the file in json format (check the additional resources for some examples to layout)
  • "name" : "Elm Quarto"
  • "short_name" : "Elm Quarto"
  • "background_color": "#ffffff"
  • "display": "standalone"
  • "theme_color": "#000000"
  • "theme_color": "#000000"
• IF issue #3 has been resolved, then the app should contain a favicons folder and the following image information can be included as well (make sure the file paths/names all add up)

"icons": [
    {
      "src": "public/favicon-io/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "public/favicon-io/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]

• Add the following html elements to the head of the index.html file if they don't exist already

<link rel="manifest" href="./manifest.webmanifest">
<link rel="apple-touch-icon" sizes="180x180" href="./icons/apple-touch-icon.png"> 
<link rel="icon" type="image/png" sizes="32x32" href="./favicon-io/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicon-io/favicon-16x16.png">
<link rel="shortcut icon" href="./favicon-io/favicon.ico">

• Ensure the app still works correctly in your web browser after making these changes
• If no obvious errors are seen, commit your changes locally, push to your remote repo, and then from create a pull request back to this repo.

Alternatives Considered

Additional Resources

You can check out examples of other Elm project's manifest files here, here, and here.

Issue Context

Here we can see that the user can click a button even when it's the computer's turn to play. This should... not be so.

Suggested Solution

Behind the scenes, an active game exists in one of four turn states

type Player
    = Human
    | Computer

type alias Winner =
    Player

type Turn
    = ChoosingPiece
    | ChoosingCellToPlay ChosenPiece

type GameStatus
    = InPlay ActivePlayer Turn
    | Won Winner
    | Draw

Based on these types, the valid gamestatuses can be
Inplay Human ChoosingPiece
Inplay Computer ChoosingPiece
Inplay Human ChoosingCellToPlay ChosenPiece
Inplay Computer ChoosingCellToPlay ChosenPiece
Won Winner
Draw

Note that of these 6 options, the only time a game piece should be selectable is the first one, when a person is choosing a piece.

The view logic in Top.elm will have to be modified so the buttons are disabled except when the game is that specific turn state.

Alternatives Considered

Additional Resources

See here in the read me for how to run and install the application.

See here in contributing for the basics on forking and cloning the repository.

Issue Context

While this repo will be structured more along the lines of Domain Driven Development than Test Driven Development, we still need tests. The tests folder already exists, and the repository already has the two major elm testing frameworks, but the test folder itself currently only has a README file.

Suggested Solution

• if you have not done so already, fork the repo and create a local copy on your machine
• create a separate branch from main for the next few steps
• create a file Test.elm in the tests/ folder
• add at least one passing test to this test file.
  • this test should be called "first test" (passed as the first argument to the test function)
  • this test should always pass
• if the test compiles, run the test by opening your terminal/command line
• navigate to the root folder of the repository
• run npm test
• if the test runner finds the test, runs it, and declares it passed, then you're good!
• merge your test branch with main
• submit a PR for this feature

Alternatives Considered

You're free to create additional tests you think may be valuable, but if you're new to elm, we suggest starting with a single passing test

Additional Resources

• Overview and Quick Start of Elm Test
• this is the test function in the elm test module
• this is the elm test function that always passes

Context for documentation change

While the app is small, sensible comments should be added to the modules and some functions to improve clarity of intent and reduce cognitive overload for contributors.

Proposed solution

• Add module level comments to all the user created .elm files.
• Add comments to all exposed module functions/types
• Add (sparingly) comments to anywhere with sufficiently complex logic (making note that it should be refactored)

Resources that can help

Official elm guide to documentation

See here in the read me for how to run and install the application.

See here in contributing for the basics on forking and cloning the repository.

Issue Context

The site needs a decent footer to add a link back to this repository

Suggested Solution

• Add a footer to the bottom of the page by adding a row below the page body column in the Shared.elm view function
• In the footer, add a link or newTabLink to this repository.

Alternatives Considered

You can also use wrappedRow which sort've pre-emptively makes the footer responsive.

Bonus

• Add the footer attribute for greater accessibility

Additional Resources

See here in the read me for how to run and install the application.

See here in contributing for the basics on forking and cloning the repository.

Issue Context

The restart button is ugly.

Look at it. Hideous.

Suggested Solution

• More spacing between the button and the text above.
• Center the button
• More padding between the button borders and the button text.

Alternatives Considered

Additional Resources

See here in the read me for how to run and install the application.

See here in contributing for the basics on forking and cloning the repository.

Issue Context

Game should be playable using only the keyboard

Suggested Solution

• On user's turn to choose, first available game piece should be focused on
• Arrow keys should allow movement between available pieces
• Enter/Space bar should select a piece
• On user's turn to play, first available board cell should be focused on
• Arrow keys should allow movement between available cells
• Enter/Space bar should place selected piece to the board.

Alternatives Considered

W/A/S/D functionality?

Additional Resources

I think the only way to implement this is to reintroduce the concept of a "focused" cell and some mapping between cell names.

See here in the read me for how to run and install the application.

See here in contributing for the basics on forking and cloning the repository.

Issue Context

Currently the game piece icons are flat shapes and not particularly visually appealing

Suggested Solution

Create new svg icons with a 3d aesthetic to serve as the game piece icons instead

Alternatives Considered

n/a

Additional Resources

See here in the read me for how to run and install the application.

See here in contributing for the basics on forking and cloning the repository.

Issue Context

The Page titles that appear in the tab bar are strange and don't follow the typical patterns of a normal web application.

Suggested Solution

In each of the three page files Top.elm, Quarto.elm, and NotFound.elm, locate the top level view function

view : Url Params -> Document Msg
view { params } =
    { title = "Homepage"
      ....

Change the title parameters of each to the following

• For Top.elm, change the title from "Homepage" to "Quarto - Home"
• In Quarto.elm, change the title from "Game" to "Quarto - Play"
• In NotFound.elm, change the title from "404" to "404 - Page not found"

Alternatives Considered

N/A

Additional Resources

N/A

Issue Context

Player frustrated on how to restart game

Suggested Solution

A restart button will be much better than having the players refresh the entire web page

See here in the read me for how to run and install the application.

See here in contributing for the basics on forking and cloning the repository.

Issue Context

This may be broken up into several smaller features at some point. As part of Elm Game Jam 5 We are creating a 3D implementation of the gameboard and game pieces.

Suggested Solution

To be clear, that means not merely 2d designs drawn at an angle to simulate 3D shapes, but actual 3 dimensional pieces (I think).

This will be a major feature that we hope to implement by the end of the year.

Alternatives Considered

N/A

Additional Resources

• https://medium.com/@l.mugnaini/basic-3d-rendering-in-svg-elm-playground-3d-d1e8846cd06e
• https://dev.to/lucamug/3d-graphics-in-the-browser-with-elm-4oh3#libraries

See here in the read me for how to run and install the application.

See here in contributing for the basics on forking and cloning the repository.

Issue Context

An early attempt was made to add integration tests to the app using elm-program-test and the Effects pattern but the effort was stopped due to confusion at the time (on my part) on how to nest the effect type through multiple modules.

But it's really important to have integration tests for future feature additions.

Suggested Solution

• refactor all application update functions to use a Model, Effect pattern vs a Model, Cmd Msg pattern.
• Hook up the tests in the ProgramsTest.elm file.
• Create a single integration test that simulates the happy path of a game of quarto that ends with the computer players victory.
  • The test should supply the moves and pieces chosen by the players and the program should be able to determine who the victor is correctly, and do the appropriate state transition to a Won: Winner Game status.

Alternatives Considered

N/A

Additional Resources

See here in the read me for how to run and install the application.

See here in contributing for the basics on forking and cloning the repository.

Context for documentation change

It would greatly help to have a defined colour palette for the project that conforms to accepted web accessibility standards. Specifically, we're creating a palette that works well for people with Low Vision and Colour blindness

Proposed solution

• Fork and clone the repo. Follow the instructions in the README and Contributing guide to get it working on your machine.
• In the /src/ directory of the project, create a file called Styles.elm.
• Import the elm-ui base module by saying import Element below the module definition.
• Now, we're going to define 5 colours as defined by the elm-ui library.
  These five colours are defined by Paul Tol's research into high contrast colour schemes.
• The colours are:
  • "black" (rgb 0 0 0) #000000
  • "blue" (rgb 0 68 136) #004488
  • "red" (rgb 187 85 102) #BB5566
  • "yellow" (rgb 221 170 51) #DDAA33
  • "white" (rgb 255 255 255) #FFFFFF
• use the elm-ui rgb255 function to create constants representing the five colours
  e.g

black : Color
black = 
    Element.rgb2555 0 0 0

• add the colours to the list of objects the style module exports
• add a comment block in Style.elm that reminds developers that
  • all text should be either black or white
  • black text should be used with red and yellow backgrounds
  • white text should be used with blue backgrounds

(optional)

• If possible, replace all instances of direct use of the rgb255 function in the Shared.elm file with the appropriate colour from Style.elm

Resources that can help

Web Accessibility
If you have any questions or would like to tackle the issue/pair to solve this issue, please let us know in the comments.

Collaborators

styled after article written by Andy Cochran

Context for documentation change

Currently, the text in the paragraphs on the About page are written as a series of text elements broken so as to fit in the coder's viewing screen. This is not an optimal way to do this and causes lots of grammatical errors around spacing etc.

Proposed solution

• Create a function that accepts a list of strings and returns a single text element that combines each string in the list with a space inserted between each one.

newFunction : List String -> Element msg

• Use this function to replace the sequential blocks of text with one text block that just has all the text for the paragraph to used.

The final result should look something like

paragraph [ {some styling} ] <| newfunction [ ... list of strings ]

Pairing with the maintainer is encouraged for this one if it's your first time in Elm.

See here in the read me for how to run and install the application.

See here in contributing for the basics on forking and cloning the repository.

Issue Context

Our main page elements do not have the appropriate Accessible Rich Internet Applications (ARIA) labels. This makes it harder for people with disabilities to navigate the site.

Suggested Solution

Add as many of the accessbility attributes in the Elm-ui region library as are applicable. In particular:

• Add the navigation attribute msg to the row element containing the links in the Shared.elm view function.
• Add the mainContent attribute msg to the column containing the page.body.
• Add the announce attribute message to the top level column in the viewBoard function.

Alternatives Considered

Additional Resources

See here in the read me for how to run and install the application.

See here in contributing for the basics on forking and cloning the repository.

Issue Context

The current Home/Landing Page has nothing on it. We'd like to have a better landing for users when they visit the application

Suggested Solution

Solution should use the elm-UI library to generate the resulting html/css.
The landing page should have the following features:

• The word "Quarto" in large text centered on the page
• Smaller heading text titled "What is Quarto and how do I play?"
• Include the following text taken from this wikipedia article. Quoted text should be italicized or some other feature identifying it as a quote, with a reference afterwards to the wikipedia article (see below).

Quarto is a board game for two players invented by Swiss mathematician Blaise Müller. It is published and copyrighted by Gigamic.

The game is played on a 4×4 board. There are 16 unique pieces to play with, each of which is either:

    tall or short;
    red or blue (or a different pair of colors, e.g. light- or dark-stained wood);
    square or circular; and
    hollow-top or solid-top.

Players take turns choosing a piece which the other player must then place on the board. 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.). A variant rule included in many editions gives a second way to win by placing four matching pieces in a 2×2 square.

Quarto is distinctive in that there is only one set of common pieces, rather than a set for one player and a different set for the other. It is therefore an impartial game. 

- Quarto (Board Game) Wikipedia

Alternatives Considered

Bonus

For an extra challenge, add a footer to the Shared.elm file that contains a link to this github repository.

Additional Resources

Elm-UI library

Issue Context

Travis CI is a continuous integration tool that can be used to automate the testing of our application before it is deployed. This repo is currently connected to a basic travis-CI pipeline and hosted on Netlify. However, to start using travis-CI features, we will need to add a .travis.yml file to the repository.

Suggested Solution

• clone and fork the repo
• Add a file called .travis.yml to the root repository
• add the following yaml code

language: elm

elm:
  - "latest-0.19.1"

elm-format: "0.8.2"

install: ":"

script:
  - elm-format --validate
  - elm-test

• Submit PR with changes

Note: This is the maintainers first time working with Travis CI so we're not absolutely certain this is what's necessary. After PR is submitted we have to test to see if this actually produces the desired effect.

Anyone who has experience with Travis-CI is greatly appreciated but if you don't, this might be a great opportunity to learn!

Alternatives Considered

N/A

Additional Resources

• elm section of Travis CI documentation
• Source of code we're attempting to integrate

Issue Context

Best Practices agree that we should format HTML in a way that enables crawlers to better understand your app’s content.
Currently the document does not have a meta description. Meta descriptions may be included in search results to concisely summarize page content. We should also include keywords and author meta tags.

Suggested Solution

In the head of the index.html file in the public folder

• Add a meta description using the text in the about section of the quarto main page
• Add a meta keywords section using the tags in the about section of the quarto main page
• Add an author meta tag with the author name as "Kirk Shillingford"

Alternatives Considered

Not sure if there are other keywords to be considered for SEO optimization That might also be something to research.

Additional Resources

w3 schools has a concise write up (and examples) of using meta tags

See here in the read me for how to run and install the application.

See here in contributing for the basics on forking and cloning the repository.

Context for documentation change

Noticed that the git subject line sentence could have a clearer demarcation of the part to be completed.

Proposed solution

I suggest replacing `If applied, this commit will your subject line here` with `If applied, this commit will <your subject line here>`

See here in the read me for how to run and install the application.

See here in contributing for the basics on forking and cloning the repository.

styled after article written by Andy Cochran

Context

Right now the app's homepage simply says Homepage. It would be better if it had a proper title reflecting the nature of the application.

Action

• You will have to fork and clone the repository.
• Navigate to the public/ folder in the repo
• Add the title html tag to the index.html file and call the application "Elm Quarto" or "Quarto".
• Test that this successfully changed the application title
• Merge changes and push back to your forked repo on GitHub
• Submit PR with change to this repository

Completion criteria

When viewing the application in the browser, the tab title should be the one you defined in the title tag in index.html

Issue Context

The current implementation of the function that updates the game board is the following

update : Cellname -> Gamepiece -> Board -> Board
update name gamepiece board =
    let
        -- The piece state when unplayed
        pieceUnplayed =
            { status = Unplayed, gamepiece = gamepiece }
        
        -- the piece state when played
        piecePlayed =
            { status = Played name, gamepiece = gamepiece }

        -- Check if the cell is free 
        nameIsUnused =
            List.member name (openCells board)
    in
    -- if you can find the unplayed piece in the current board, and the cell is free, replace it with the played piece
    Liste.setIf (\piece -> (piece == pieceUnplayed) && nameIsUnused) piecePlayed board

Because the update function returns a board regardless of whether is actually updates the played piece, the implementation of the calling function in Game.elm is now

playerTryPlay : Cellname -> Gamepiece -> Model -> Maybe Model
playerTryPlay name piece (Model model) =
    let
        newBoard =
            Board.update name piece model.board
    in
    if newBoard == model.board then
        Nothing

    else
        Just (Model { model | board = newBoard })

Note that we have to

• call the update function and get a board function we call newBoard
• then we check whether it's the same as the board we passed in
• if it's actually different (meaning the update worked, we return the model with the new board
• otherwise we return Nothing

This feels like an antipattern.

Suggested Solution

Modify the Board update function so it returns the Maybe value instead, based on whether it could actually perform the update or not.

update : Cellname -> Gamepiece -> Board -> Maybe Board
update name gamepiece board =
   ...

and then have playerTryPlay make decisions based on that maybe value.

playerTryPlay : Cellname -> Gamepiece -> Model -> Maybe Model
playerTryPlay name piece (Model model) =
    ....
        maybeNewBoard =
            Board.update name piece model.board
    ...
    case maybeNewBoard of
    Just ..
    Nothing ...

Alternatives Considered

N/A

Additional Resources

N/A

See here in the read me for how to run and install the application.

See here in contributing for the basics on forking and cloning the repository.

Context for documentation change

It's not super relevant at the moment, but having valid robots.txt and sitemap.xml files will be necessary for the site at some point. May as well start now.

Proposed solution

Create a robots.txt file in the public* folder of the app with the following lines of text
First, some text describing the user agents allowed
User-agent: *

*Not actually sure if robots should be in the main folder or the public folder. Not much expertise here. Any help would be appreciated.

Resources that can help

This site has some resources on the topic.

See here in the read me for how to run and install the application.

See here in contributing for the basics on forking and cloning the repository.

styled after article written by Andy Cochran

Issue Context

Rather than thrusting the site visitor into the working game, let's provide some context for them.

Suggested Solution

• Let's add a bold Welcome to the page
• Let's add a more thorough set of instructions to the page with images?

Alternatives Considered

Open to additional thoughts and ideas

Additional Resources

Reach out to maintainer for pairing and issue discussion

See here in the read me for how to run and install the application.

See here in contributing for the basics on forking and cloning the repository.

Describe the solution you'd like
Update the README to link to the supporting documents

Background

In the effort to get the app ready for more contributors, we need to complete the basic "Game Loop" of a Quarto game.

The game loop as follows:

• Player 1 selects a piece for player two to play
• Player two places a piece on the board
• Player 2 selects a piece for player 1 to play
• Process repeats until one play plays a piece creating a winning combination (win) or the pieces run out (draw)

Solution

• The UI should show visible ques as to who's turn it is
• Game should end (pieces no longer able to be selected or played when someone wins)
• Restart button should reset game page to initial state

Assignees: @tkshill
Labels: Type: Type: Enhancement,Status: Assigned,

Issue Context

It has been brought to my attention that I should call the users something other than "Human" to describe the person playing.

Suggested Solution

It should problably say something like, "You have won" or "the computer has won"

Alternatives Considered

Additional Resources

See here in the read me for how to run and install the application.

See here in contributing for the basics on forking and cloning the repository.

Issue Context

The top level view function for the game page is a little hard to parse and the shape doesn't really represent the major components in our UI.

view : Model -> Document Msg
view model =
    { title = "Quarto - Play"
    , body =
        [ column [ spacing 10, centerX ]
            [ el [ Font.center, width fill ] (text "Remaining Pieces")
            , column [ centerX ] <|
                List.map (row [ centerX ]) <|
                    Liste.greedyGroupsOf 4 <|
                        List.map viewRemainingPiecesButton model.remainingPieces
            , el [ Font.center, width fill ] (text "Game Status")
            , viewGamestatus model.gamestatus
            , el [ Font.center, width fill ] (text "GameBoard")
            , viewBoard model.board
            ]
        ]
    }

Suggested Solution

• Let's refactor the view function by moving the column for the remaining pieces into the function called viewRemainingPieces
• Let's move the section definitions within the functions of the view they describe so we just have three functions in our view list, viewRemainingPieces, viewGameStatus, and viewBoard.

Additional Resources

See here in the read me for how to run and install the application.

See here in contributing for the basics on forking and cloning the repository.