holladayian / hermesshuffle

HermesShuffle

This project was a submission for an Engineering Challenge from Altvia.

The goal was to design and implement a card shuffler using "the language of your choice".

Installation/Set-up steps

Clone down the repository and run npm install in your terminal.

To run locally, run npm start.

To run tests, run npm test.

Links

Deployed Site

Project Board

Languages/Frameworks/Libraries/Tools

JavaScript
CSS
React
JSX
Jest
React Testing Library
React Router

In Action

Screen.Recording.2021-05-24.at.7.01.01.AM.mov

Description & Design

I wrote this application in two days in order to send off as a technical challenge. Upon starting, I had the prompt, but I needed to create the idea... What's the Greek deity of gambling? *googles* It's Hermes, and that's perfect, because now I can call this application the Hermes Shuffle, a play on the Cupid Shuffle, a dance craze from the mid 2000s that swept weddings, bars, and even middle school dances. From there I looked up a picture of wings to be in the header (I found those on pngtree.com). Next I designed a color palette from colors.co. Finally I was ready to start! My initial idea was to make several different ways to shuffle a deck (but due to time constraints I thought it more important to meet the mvp). I also wanted to make all of the functions scalable. Instead of randomizing 52 cards, they work with a variable (card) and it's length. An initial thought of mine was to make several decks, possibly one with jokers, or Go Fish. It should be noted that the test for the shuffle function has a 1 in 52! chance of failure, due to the nature of randomness. (If this test fails, go buy a lottery ticket, and run it again).

What's next?

I had started working on an overhand shuffle function, and I would like to implement a clean version (one that pulls 10 cards off of the top) and a realistic version, that pulls a random handfull off the top to simulate human error. I also had the idea to create a riffle shuffle, with both a clean (1 over 1) and realistic version. I think if I got these two done, the next step would be letting a user import/add their own cards or deck, but who knows? There's many ideas out there in the world of programming.

hermesshuffle's Issues

Header

As a user, when I visit the site, I should see a header that denotes the site name, and has a general pleasant appeal.

Home

As a user, I should be able to view the home page on load. I should also be able to travel to the home page using the Menu.

Wireframe

Wireframe out a general design for the application. Include possible functionality and routes.

Riffle Shuffle

As a user I should be able to preform a riffle shuffle with the deck.

Organize

As a user, I should be able to reorganize the cards, after they have been shuffled.

Wash Shuffle

As a user, I should be able to shuffle a deck with a wash functionality.

Overhand Shuffle

As a user, I should be able to shuffle using an overhand style.

Menu

As a user, I should have access to a menu to navigate throughout the site.

Test Header

The Header component should be tested and all of the elements should render.

Shuffler Page

As a user, I should be able to travel to the Shuffler page using the menu. This page should have different options for different shuffling styles, and should reveal the cards, once shuffled.

Populate Cards

Create a file that has a list of cards that can be manipulated throughout the application.

Refactor CardShuffler Test

Refactor the card shuffler test so it compares the two different arrays against each other.