jedster1111 / bananagram-mk2 Goto Github PK

• Describe the project
  • Describe husky git hooks

Functions should be usable in both the frontend and backend. Aim for functions to be pure if possible.

• Place a piece.
• Determine if there is a valid peel.
• Dump a piece (trade a tile for 3 tiles from pile)

https://help.github.com/en/github/building-a-strong-community/creating-a-pull-request-template-for-your-repository

This will make git diffs less noisy.
https://eslint.org/docs/rules/comma-dangle#always-multiline

Not sure why this is happening, but the grid shouldn't be taking away the header's space.

AC:

• Letters should show in the grid as tiles and they should look like

AC:

• A function that can generate a set of tiles
• A function that can shuffle the tiles
• These functions should be accessible in both frontend and backend projects (Consider using yarn workspaces)

Deploy the frontend using Jenkins, DigitalOcean and DockerHub
AC:

• Should be deployed when there's a new commit in master and all the tests pass.
• If the tests fail, the latest version shouldn't be deployed
• Should use a Dockerfile to create a new image
  • New image should be pushed to DockerHub
  • Deployment should pull the latest image from DockerHub
  • Image should be an NGINX server serving static files.
  • Created in #10

AC:

• Discord channel that has some sort of Github/Jenkins bot.
• Posts status of builds (Started a new build, build and build failed)
• Posts when issues/PRs are open or closed, or when new commits are made to a PR,

There should be buttons outside the 4 edges of the grid that let you move the offset (can be thought of as moving the camera). This will let you see pieces that have gone outside of the rendered grid.

AC:

• Buttons outside the grid, in line with the centre of each edge.
• Clicking the button will move the camera one square in that direction.

There should be a button that allows you to reset the grid offset back to (0,0). This is to make it easier to reorientate yourself if you get lost.
AC:

• Button (inside grid controls area) that on click, should reset the offset to (0,0)

Should be in .vscode/extensions.json.
Extension to use is jpoissonnier.vscode-styled-components

AC:

• I can dump a piece and receive three new pieces
• If there aren't enough pieces left (less than 3) the dump should fail/the button shouldn't be clickable
• The new pieces should be placed in the top left corner

AC:

• If I mouse down on a piece and drag to an empty square and then mouse up, the piece should move to that position.
  Drag behaviour:
  • No selected pieces
    • mousedown and drag should select the piece clicked and move it.
  • Drag already selected piece
    • mousedown and drag should move the selected piece/s
  • Drag a non-selected piece, while there's another piece selected
    • mousedown and drag should select the clicked piece and move all the selected pieces
• If your drag replaces an existing piece, for now it should just console.log what pieces were replaced

See facebook/create-react-app#7005

AC:

• When checking out a branch or pulling latest changes, yarn should be run to ensure that the necessary packages are installed.

AC:

• Two buttons, one zooms in and one zooms out (i.e. changes the dimensions)
• The zoom should be focused around the top left hand corner - (0,0)
• The grid width should be responsive (based on window dimensions), but shouldn't change as the zoom changes
• The grid shouldn't be able to zoom in more than a 3x3 grid

AC:

• When I create a game it should prompt me for a username
• After making a game, should show me the url of my game
• I can join a game by visiting the games' url
• When I join a game it should also prompt me for a username
• I should see a list of users in the game

Jenkins (other CI/CD tools can be considered) should run tests and feedback into Github.
AC:

• When PR's are made to merge into master, merging should be blocked till Jenkins has run the unit tests and linting and they have both passed. The tests should be run against a temporary branch where the PR's changes have been merged with master.
• When there's a new commit in master, the tests should also be run.

I would like order, new lines and no duplicates to be checked by the linter.

AC:

• A button that sets the current offset and zoom values as the defaults.
• Pressing the reset button from #7 should reset the offset and dimension values to the default, otherwise set the offset and zoom to (0,0) and (10,10)

Use Husky to install latest packages when I pull new code.

Bump the version of set-value to 2.0.1 or later.

Use https://www.npmjs.com/package/eslint-plugin-jest

There should be a Grid Info section, that displays the current offset and dimensions of the grid.
AC:

• Underneath the grid, show the offset and dimensions
• In the format
  • Camera: 0 - 0 & Grid Size: 10x10

docker image ls
docker system prune
etc...

Maybe consider adding a seperate docker README file?

AC:

• All players should be shown a board with their tiles on.
• Tiles should fill the space from the top left square, across to the top right corner, down to the next row and continued till all the player's tiles are placed
• Tiles are placed in no particular order
• Tiles should be distributed randomly and according to the how to play bananagram instructions

Current look:

AC:

• Squares inside the grid should not be rectangular but should always be forced to be square shaped

Yarn Workspaces

AC:

• Basic functionality should be tested using an E2E runner.
• For this ticket only needs to run locally
• Other options can be considered but I quite liked TestCafe (Selenium, Puppeteer, CucumberJs)

yarn plug n' play

AC:

• If there are less tiles in the pile than players in the game, I can banana (once all my tiles are connected)
• If my banana is valid I win the game
  • Should be shown a game over screen
• If my banana is not valid I lose and my tiles go back into the pile
  • All users should be alerted to the failed banana
  • There should be a visual indication that a player is out of the game.

Can use jest coverageReporters.
Also see docs on referencing locally created actions.

"jest": {
    "resetMocks": true,
    "collectCoverageFrom": [
      "src/**/*.{ts,tsx}"
    ],
    "coverageReporters": [
      "json-summary",
      "text"
    ]
  }

AC:

• New commits on master only (not on PR branches) should run the E2E tests
• If succesful, should deploy the lastest commit

AC:

• Checks all my tiles are connected and words are real
• If check fails, should display some sort of error notification
• If check passes, should give a new tile to every player in the game
  • Tile should be placed in the top left corner of the screen and a notification should be shown

AC:

• Click on a piece and it should be selected.
  • If a piece is already selected the existing piece should be unselected.
• If CMD is held when clicking, piece should be added to the existing selection.
  • If I click on an already selected piece it should be deselected (when CMD is held)
• If I'm not holding CMD and I click on an empty square, should deselect all pieces.
• Selected pieces should have a black border.

Eslint and prettier will also have to be updated.

AC:

• Should use NGINX to serve the static artefacts generated using the build command from Create-React-App.
• Should only contain the static files, not all of the development files as well.
• Should expose the port 80.
• Documentation on building and running the image should be added to the README file.