bananagram-mk2's People
bananagram-mk2's Issues
Add a README to the root folder
- Describe the project
- Describe husky git hooks
Bananagram game logic should be in a common place.
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)
Create a pull request template that reminds you to add a "Resolves" comment if applicable
Eslint should enforce trailing commas.
This will make git diffs less noisy.
https://eslint.org/docs/rules/comma-dangle#always-multiline
Header is cut off when screen is squished vertically
Letters should be rendered in the grid as a banangram tile
Commits should be checked to see if they start with the string `GH-${someIssueNumber}`
There should be a re-usable way to generate a set of tiles, and a way to shuffle the tiles
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)
I should be able to see a deployed version of the latest code in the master branch
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
I would like to see alerts about the project in Discord
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,
I should be able to change the grid offset
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 to reset the grid offset to its original position
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)
VSCode should recommend you to install the styled-components extension
Should be in .vscode/extensions.json
.
Extension to use is jpoissonnier.vscode-styled-components
I should be able to dump
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
I can drag and drop a piece/pieces to a new position in the grid
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
- No selected pieces
- If your drag replaces an existing piece, for now it should just
console.log
what pieces were replaced
Update README to use `yarn commands instead of npm`
Fix `no-expected-multiline` error when starting frontend
Packages should be installed when branch is checked out or a merge is made
AC:
- When checking out a branch or pulling latest changes,
yarn
should be run to ensure that the necessary packages are installed.
I should be able to zoom out the grid
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
I should be able to create a game and other people can join
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
Unit Tests and Linting should be run automatically for new commits in master and for pr branches
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.
Add linting rules to the project to regulate imports
I would like order, new lines and no duplicates to be checked by the linter.
I should be able to save the current offset and zoom as the default view, which I can then reset back to
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)
When I pull changes, it should automatically run `yarn` to install latest packages
Use Husky to install latest packages when I pull new code.
I should be able to debug jest tests
Get Rid of Jenkins and use GH actions instead
Fix `set-value` security alert.
Bump the version of set-value
to 2.0.1 or later.
Eslint should error/warn for focused/disabled tests
I should be able to see the grid's dimensions and offset
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
Add more docker commands to README
docker image ls
docker system prune
etc...
Maybe consider adding a seperate docker README file?
The host can start a game and every player should be given tiles
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
Grid squares should be a fixed aspect ratio
Project should use yarn workspaces
There should be E2E tests in the project
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)
Give yarn plug n' play a try
I should be able to banana (win the game)
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.
Create a GitHub action that will warn you if code coverage falls below a certain percentage.
Can use jest coverageReporters.
Also see docs on referencing locally created actions.
"jest": {
"resetMocks": true,
"collectCoverageFrom": [
"src/**/*.{ts,tsx}"
],
"coverageReporters": [
"json-summary",
"text"
]
}
E2E tests should run as part of the build pipeline
AC:
- New commits on master only (not on PR branches) should run the E2E tests
- If succesful, should deploy the lastest commit
While playing a game I should be able to peel
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
Add the ability to select squares in the grid
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.
Bump TypeScript version to >3.7.2 so optional chaining is available.
Eslint and prettier will also have to be updated.
Front-end should be containerised using Docker
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.
Create a vector package and add as a dependency
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.