On initial game load, the window should scroll to put the center card in the middle of the viewport.

This will be a temporary/simple fix to #9 and other viewport/zooming related issues.

Need to add a screen to the confetti at the end that says "Player 1 Wins" or whatever. 🤷‍♂

Let's initially split the deck between two players. We'll eventually update the UI to have a game set up step that prompts for number of players before kicking things off.

Game is hard to play on a phone– could benefit from some UI scaling– along with pinch-zoom to adjust the scale.

Started some work here:

I think I want to rewrite it using translate instead of top/left for positioning the viewport– this will require changing a bit of the card drop logic.

A few of the animals are missing background colors.

I'd also like to explore a different palette– the cards are vintage but the logo is pastel. Need to figure something out. 🤔

Each animal on the card has a point value– successful connections should add points to a player's total.

App should have a way to set the number of players from the initial start menu.

I am getting the error "Cannot read property 'top' of undefined" I checked the file "snapshots.js" found the value is null, can you tell me the solution to this?

Project Information

• Repository: https://github.com/igravitystudios/matchimals.fun
• Project Name: matchimals.fun
• My Github Account: https://github.com/friendsmobile

Expected behavior

When I try to open the application, then the application should be opened. So that the user can easily play the game

Actual behavior

The application crashes when I try to open the application

How to reproduce

• Download the application

• After installing the application, try opening it

• Note the BUG

• Browser/App version: Current Version 0.1.0

• Operating system: 6.0

Recording Of The Bug

Logcat

E/AndroidRuntime( 7954): FATAL EXCEPTION: create_react_context

E/AndroidRuntime( 7954): Process: com.matchimals, PID: 7954

E/AndroidRuntime( 7954): java.lang.UnsatisfiedLinkError: couldn't find DSO to load: libreactnativejni.so

E/AndroidRuntime( 7954): 	at com.facebook.soloader.SoLoader.doLoadLibraryBySoName(SoLoader.java:738)

E/AndroidRuntime( 7954): 	at com.facebook.soloader.SoLoader.loadLibraryBySoName(SoLoader.java:591)

E/AndroidRuntime( 7954): 	at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:529)

E/AndroidRuntime( 7954): 	at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:484)

E/AndroidRuntime( 7954): 	at com.facebook.react.bridge.ReactBridge.staticInit(ReactBridge.java:31)

E/AndroidRuntime( 7954): 	at com.facebook.react.bridge.NativeMap.(NativeMap.java:19)

E/AndroidRuntime( 7954): 	at com.facebook.react.jscexecutor.JSCExecutorFactory.create(JSCExecutorFactory.java:25)

E/AndroidRuntime( 7954): 	at com.facebook.react.ReactInstanceManager$5.run(ReactInstanceManager.java:944)

E/AndroidRuntime( 7954): 	at java.lang.Thread.run(Thread.java:818)

Current clickCell logic is only accounting for a single match– we need to be sure that all sides are matched before placing the card.

Per matt's recommendation– the back of the deck probably shouldn't have an animal on it– it's a bit distracting and unnecessary. Would be nice to experiment with a subtle pattern + the logo.

Additionally– in order to make the "active" vs "inactive" player stick out a bit more– try implementing a scale transform on the inactive deck along with a smooth transition.

Need a proper backdrop + cell styling for the game board.

Update onClick function for isActive to do a full check for validity before assigning cell– fixes a bug where the player's turn ends when clicking an invalid cell (slightly different from #1)

Center card should be random

Need to make the sidebar design and styling properly responsive and scaled.

If the device is landscape– the user should have a sidebar with the logo / deck / pass
If the device is portrait– the user sidebar should be rotated to be along the bottom of the viewport.

Needs to be tested on all the devices with all the viewports.

I've spent the past couple of months rebuilding the app using React Native... this issue will serve as a placeholder for merging the two codebases together (the native code is currently private).

Logic is allowing cards to be stacked if valid. 🙈

Update: While it doesn't appear to be adding points– it is leading to the turn being ended. Whether or not the card is removed from the player's deck or if the turn just ends will need to be debugged.

The wood background image is pretty big (~380kb). Could take the resolution down a bit, and serve up different images based on device.

Would be nice to have some unit tests to make sure when we push changes we don't break functionality.

Will need to think through how/what to implement– open to suggestions/recommendations/pull-requests/etc.

When all players' decks are empty– we should end the game and throw a message on the sidebar.

We'll eventually have a proper UI, scoring (#5), and a "play again?" button (#13).

• Update "Player 1, Player 2, etc." to just read from the animal name
• Update Nameplate component to trigger an animal select screen when pressed
• Update game state with new animal on save - don't clear any existing game progress

Should have a button / the ability to reset the game (we'll need it for the "Play again?" button #4), current method is just to page refresh.

Need that pretty unfurl on slack and other social platforms– set up og tags

https://developers.facebook.com/docs/sharing/webmasters

Sometimes it requires a few passes before the game gets moving.

In order to help users understand the game better (and to speed up the game), the first card for each player should be able to connect to the center card. (semi-related: #6)

Need to find some good open-source background music and sound effects.

Background music

• Option 1

Sound effects

• Cards matched
• Cards mismatched
• Pass button

Want to replace the legacy https://www.matchimals.fun/ with a react-native-web version of the app itself.

I had this working but I think it broke when I included react-native-animatable– might need to do some babel magic to get it to properly import and use react-native-web.

Since we introduced the 3-card intro rather than a single card– it is possible to get to the end of the game with 1-2 cards left and not be able to place them.

We need to update the initial game logic to draw the starter cards from the deck rather than using predetermined starters like we do currently. (constants/cards.js)