Running live at: https://in-memoriam.vercel.app
A simple customizable card-based pair-matching memory game.
You are presented with a grid of 12 cards. Click a card to reveal a number from 1 to 6. Then reveal another card. If both have matching numbers, they stay revealed and you get a match. If they don't match, they are covered up again. Every time a pair is revealed regardless of if they match, your Tries go up by one.
You cannot hide a card yourself once you reveal it. The game is over when all of the six card pairs are revealed. Get your Tries as close to your Matches as possible in the least amount of time!
The card order and card back image are randomized every time the game is reset. To reset the game before you've won, click the Reset button on the top toolbar.
Some weekend fun in Coronatimes :)
Clone the repo to your local filesystem, then cd into the root directory. Next, run the following commands:
# install dependencies
$ npm install
# Build & serve locally with hot module reload
$ npm run devThe app is now live on http://localhost:3000.
The game has a default of six card pairs whose value range from 1 to 6, which result in a grid 12 cards. In constants.js, the variable CARD_VALUES controls this. Changing that array to any (non-duplicate) set of values will allow you to change how many card pairs there are to play with and what their (string or number) face-up value is.
For example, setting the array to [ 'hello', 'lol', 'gg' ] will result in a grid of 6 cards and a match would occur if two cards with 'hello' would be revealed.
The app is built on NextJS which provides an easily-deployable framework using React & Redux for immutable state management. Redux keeps the order of cards secret until the player reveals them. We don't trust the client, only the store. This prevents game state tampering like arbitrarily increasing the score, scraping the DOM for card values or changing the timer.
Using React Bootstrap as a frontend framework provides attractive foundational UI layout & components. It implements ReactCardFlip for the card reveal animations. A TypeScript GeoPattern library is used to randomly generate unique card backs for every game via a nanoid seed.
The app is hosted live on Vercel to facilitate turnkey deployment and CI. Finally, ESLint alongside several linting plugins to keep the code nice and tidy.
The UI is mobile-ready, so loading this on a small screen will look & work great!
It seems like the future of React.
This is free and unencumbered software released into the public domain.
For more details, please see LICENSE.