https://github.com/pjtunstall/react-tarot

Personal project to introduce myself to React: a carousel of AI-generated tarot cards. Be warned: contains some intense, symbolic images ranging the gamut of the human and cosmic condition.
https://github.com/pjtunstall/react-tarot

Last synced: 12 days ago
JSON representation

Personal project to introduce myself to React: a carousel of AI-generated tarot cards. Be warned: contains some intense, symbolic images ranging the gamut of the human and cosmic condition.

• Host: GitHub
• URL: https://github.com/pjtunstall/react-tarot
• Owner: pjtunstall
• Created: 2024-09-14T13:26:27.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-11-27T15:03:17.000Z (2 months ago)
• Last Synced: 2024-11-27T16:20:30.340Z (2 months ago)
• Language: JavaScript
• Homepage: https://react-tarot.netlify.app/
• Size: 33.5 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Tarot

"If a fool would persist in his foolishness, he would become wise." -- William Blake.

- [Intention](#intention)

- [View online](#view-online)

- [Run locally](#run-locally)

- [Usage](#usage)

- [Credits](#credits)

- [Further](#further)

## Intention

To learn some React.

## View online

[React Tarot](https://react-tarot.netlify.app/)

## Run locally

Alternatively, to run locally:

- Instal Node.js and npm:

  - Visit the [Node.js](https://Nodeeijs.org/) website and download the installer for your operating system.

  - Run the installer, which includes `npm` (Node Package Manager), followed by the installation prompts.

- Open a terminal or command prompt:

  - On Windows, you can search for "Command Prompt" or "Power Shell" and the Start Menu.

  - On MacOS and Linux, open the "Terminal" application.

- Clone the repo and navigate to the project directory:

  - Use the `cd` command to navigate to the folder you want to download the project to.

  - Clone the repo: `git clone https://github.com/pjtunstall/react-tarot`

  - Navigate into the project: `cd react-tarot`

- Install dependencies:

  - `npm install`

- Run on a local development server:

  - `npm start`

## Usage

Click on a card to flip it, or flip the middle card with space. Arrow keys—or click once elsewhere—to turn the carousel. Click twice elsewhere to flip all. Other controls buttons at the bottom-right corner of the screen.

## Credits

Sound effects from [Pixabay](https://pixabay.com/). AI art by Dall-E.

## Further

### Synchronizing flip

Further developments could include synchronizing the flip animation better. At the moment, the cards are just rotated to 90 degrees with a CSS animation. When that finishes, they jump back to their default flat alignment. The image is changed after a timeout. Ideally, the end of this animation would trigger the image to change, which would start a second animation: from 90 degrees back to zero. (This rather than 180 degrees because we don't want the final stage of the animation to be the mirror image of the unanimated image that it will then jump to.) All this has to play nicely with React's automatic renders, not only when flipping an individual card, but also when flipping all of them at once, as happens on double click or shuffle.

### Responsivity

As yet the CSS contains just a nod towards responsive design. This could be more systematic. The site could be tested on different browsers, screens, window sizes, and devices, in particular mobile devices. Swipe handling would need to be added to make the site accessible to touchscreen devices.