shanedbutler / whats-for-dinner-poker

A web-based game inspired by video poker to assist with weekly meal plan creation.

What's for Dinner Poker

What's for Dinner Poker is a web-based game that is played to create a five-meal meal plan. Users select a pre-made deck based on seasonal meal themes or their own user created deck. The two-round interactive game-play results in a final “hand” of five meal cards. Users have the ability to create, edit, and delete both decks and cards.

What's for Dinner Poker seeks to help meal planning by reducing decision fatigue while remaining interactive, and customizable through user-created decks.

Take it for a spin

This project was bootstrapped with Create React App.

This project uses Sass to compile custom Bulma styles. You will need sass-cli to compile css before starting the project. This project uses json-server in development.

In the project directory, you can run:

npm install

npx sass --no-source-map src/sass/mystyles.scss:src/css/mystyles.css

npx json-server -p 8088 api/database.json

npm start

This runs the app in the development mode. Open http://localhost:3000 to view it in your browser.

whats-for-dinner-poker's Issues

Fix positionId bug

Position sometimes get shifted when drawing new cards to held hand.

Add bulma to package.json and @import to sass

1 on 1 with project mentor

Fix all held bug

After a new draw is made when all cards are held during round play, the deckCards state is emptied. This results in error, as no cards are available to be drawn from.

Convert to Typescript

JS -> TSX

Move from Font Awesome icons to Material Design

Suits can be provided in unicode instead of as icons:

♠️♥️♦️♣️

Even out cards array

To bring each deck to an even number cards of from each suit:

Deck 2 needs:

• +1 with suitId 2
• +1 with suitId 3

Deck 1 needs:

• +1 with suitId 1
• +1 with suitId 4

This will also bring each deck to 52 cards.

Originally posted by @shanedbutler in #21 (comment)

Refactor flow to pass props from parent to children

Refactor Play flow to pass props from parent to children instead of messy router handling of variables.

Originally posted by @shanedbutler in #27 (comment)

Polish styles

Explore font choices, color keying, and keep layout constant.