idna001 / couple-memory

Couple Memory

Hacktoberfest 2023

Improve a Memory in react js

Open Tasks:

• Fix Distorted images @D3nn7
• Mobile Viewport fix
• Display always new Pictures, when restarting the game @KingPaulus
• Saving the Highscore in Local Storage @bijanRegmi
• Add winning Alert Message with a celebrating sound @needl3
• Add a sound by finding a match @needl3
• Confetti Effect on Celebration 🎉 #45 @SandeepKrSuman
• Count the time and show it next to the highscore, and in the Higscore Alert from @needl3
• Build a Begin animation or sound #44 @abhisheksharm-3
• Button, that makes a Screenshot of the Highscore to share it with friends @insane-22
  • Functionality Buttons on default Overlay
  • Add API for Safari Share window
  • Fix listener preloading, at the moment it needs two clicks for opening
• Add light and dark Mode theme @Surajit0573
• Animation on Pictures if they match #22 @mohiwalla
• Add runtime in Local Storage and show with High score @barkha-gupta
• See the Issues Task, or open Pull Requests (they may need help or fixxes)
• Another Feature or Bug that's not here listed, but necessary

How to contribute

• Fork the Repo (optional)
• Clone the Repository
• Create a new Branch
• Make your changes
  • Add your Name to the Credits
  • Run the App
  • Test your changes
• Push your changes to a PR on this Repo
• Wait for a Review and merge
• Celebrate your first PR
• Repeat ;)

How to run the App

• npm install
  • Will install all dependencies
• npm start
  • Runs the app in the development mode.
• Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

How to test your Change

• First on localhost while developing
• Then on the Vercel Link of your PR
  • Vercel will deploy your changes automatically to a new Link
  • You can find the Link in the PR
• Test mobile and Desktop Viewport

Have fun while celebrating Hacktober

Lets Hack!

Feel free to make PR and complete the readme with your changes

Credits

Sound Effect from Pixabay Mixkit

couple-memory's Issues

Add light and Darkmode

Overview

Light and Dark mode with use of System Preference
Default: dark

Info Material:
https://dev.to/ayc0/light-dark-mode-system-mode-user-preferences-1fcd

Tasks

• Look up the Info
• Add the logic
• Test that everything still works as before
• Please also look up the Mobile Viewport

Animation on Pictures if they match

Picture dimensions CSS fix

Add CI GIthub Workflow

Adding CI GIthub Workflow will be useful to make every new PR into main branch can be run build and test script successfully
Can I work on this?

Security Issues - Hide pictures in DEV Tools

Maybe someone has an idea, how to hide the pictures in DEV Tools:

Stop the Time after finished Game

There is a time elapsed counter for the game, but it don't stop if you're finished or achieved the personal high score

Build a Begin animation or sound

Add web-share API for Highscore sharing

Next step, calling the web share API would be awesome.
Here is an example: https://codepen.io/ayoisaiah/pen/YbNazJ
https://css-tricks.com/how-to-use-the-web-share-api/

For personal sharing options.

Originally posted by @idna001 in #24 (comment)

FIX wrong displaying Winning Message on Mobile Viewport

MOBILE ON SAFARI	DESKTOP WORKING FINE

|

Make separate Files to organize the code

Overview

Everyone has added few lines to extend the features, would be good if small parts are moved to individual controller files.

Tasks

• Create new files with the existing features
• Test that everything still works as before

Confetti Effect on Celebration 🎉

A confetti popup will add to the celebration on completion.

Display always new Pictures, when restarting the game

Pool von 20 Bildern, Memory nimmt sich 8 davon
Random bilder wahl

Fix: one of the images is not present in public/img

Problem

• One of the images in the cardImages array is not present in the img folder in public.
• its causing one of the cards being empty

BUG: Elapsed Timer Keeps on going even after game finishes

• This Bug affects the final screenshot user takes and thus providing inaccurate timestamps
• I can try to fix the issue by either fixing current logic or rewriting the logic to correct it

Add runtime in Local Storage and show with High score

Add time next to high score

So it will be possible to achieve a new high score with the same amount of turns, but with a faster time.

Add Game History

Explanation

• Save high score, elapsed time and timestamp in local history.
• Add a history button under the game, but display it only if there is a history
• While pushing the button under the button comes the Game History
• Add a little claim, that this is only temporary stored.

Of course, you can split this issue, and make several PRs.

Fix the View Counter

Explanation

There was a API for Counting the Views of this Site.
The used API https://api.countapi.xyz/ is now deprecated. And doesn't work anymore.

Tasks

• Find a new way or new API to count the views.
• Remove the old API
• Add the new way

Button, that makes a Screenshot of the Highscore to share it with friends

Only if new Highscore is achieved.