Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mightymeld/mightymeld-memory

Last synced: 2 months ago
JSON representation

Host: GitHub
URL: https://github.com/mightymeld/mightymeld-memory
Owner: mightymeld
Created: 2024-02-15T00:59:45.000Z (11 months ago)
Default Branch: main
Last Pushed: 2024-07-11T21:58:00.000Z (6 months ago)
Last Synced: 2024-08-03T22:23:17.050Z (6 months ago)
Language: JavaScript
Size: 2.51 MB
Stars: 10
Watchers: 2
Forks: 37
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

jimsghstars - mightymeld/mightymeld-memory - (JavaScript)

README

# Memory Game - Tailwind CSS

## Development

Welcome to the hackathon! Here’s how to get started.

### Editing with MightyMeld

1. Clone this repository to your local machine.

2. Change into the directory of the cloned repository: `cd mightymeld-memory`.

3. Install the dependencies: `npm install`.

4. Make sure you have an account at [mightymeld.app](https://mightymeld.app).

5. If you do not prefer using VS Code, set up your favorite text editor (see below).

6. Start MightyMeld: `npx mightymeld`.

### Setting up your favorite text editor

You can choose “Open in Editor” in various places in MightyMeld to open files in your text editor. This project is set up to open VS Code. If you want to use a different editor, you can change the `editor` field in `mightymeld.json` to a different editor. See the [editor documentation](https://docs.mightymeld.com/docs/setup/reference/configuration#editor) for more information.

## Design

This animation shows how the game should look in it’s final form. The game mechanics are already implemented but the UI needs styling and structure.

Once loaded in MightyMeld, you should set your frame(s) to 400px wide (mobile size). You only need to work on that size for the speed run challenge.

![Animation of completed game](docs/solution.gif)

Here are full size renders of the app screens.

_All colors used in the design are standard Tailwind CSS colors._