Git Product home page Git Product logo

igravitystudios / matchimals.fun Goto Github PK

View Code? Open in Web Editor NEW
163.0 7.0 31.0 193.78 MB

šŸ¦ šŸƒ šŸ“± An animal matching puzzle card gameā€“Ā built with turn-based game engine boardgame.io and React-Native + React-Native-Web

Home Page: https://www.matchimals.com

License: MIT License

HTML 1.26% JavaScript 97.23% Ruby 1.04% Objective-C 0.12% Objective-C++ 0.35%
react reactjs boardgame boardgame-io turn-based puzzle puzzle-game card-game card-games javascript

matchimals.fun's People

Contributors

chrisheninger avatar danieldiaz14 avatar dependabot[bot] avatar mshannahnv avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

matchimals.fun's Issues

Deck design update

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.

Who won?

Need to add a screen to the confetti at the end that says "Player 1 Wins" or whatever. šŸ¤·ā€ā™‚

Web version

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.

Colors šŸŽØ

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. šŸ¤”

Music / Sound Effects šŸŽ¶

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

Background music

  • Option 1

Sound effects

  • Cards matched
  • Cards mismatched
  • Pass button

The application crashes when I try to open the application

Project Information

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

20190529_032408

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)

Game has a chance to be unwinnable

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)

Points

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

Native App ā€“Ā iOS, Android, and Web

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).

matchimals-app

Optimize background image

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

Cannot read property 'top' of undefined

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?
Screenshot 2023-02-14 at 13 19 45
Simulator Screen Shot - iPhone 14 - 2023-02-14 at 13 19 04

First card for each player should be connectable

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)

Reset Game

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.

Pinch-zoom / UI scaling šŸ”

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:

// Zoom
// if (gestureState.numberActiveTouches === 2) {
// // WIP: Requires significant updates to the way we're handling card drop
// let dx = Math.abs(
// e.nativeEvent.touches[0].pageX - e.nativeEvent.touches[1].pageX
// );
// let dy = Math.abs(
// e.nativeEvent.touches[0].pageY - e.nativeEvent.touches[1].pageY
// );
// let distance = Math.sqrt(dx * dx + dy * dy);
// let scale = (distance / this.distance) * this._previousScale;
// // minScale to maxScale
// if (scale > 0.5 && scale < 2) {
// // this.setState({ scale, lastMovePinch: true });
// this._tableStyles.style.transform = [{ scale }];
// }
// }

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.

Nameplate: Choose your animal šŸ“› šŸÆ

  • 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

Split deck between two players

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.

Sidebar responsive styling

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.

Cards can be stacked šŸ›

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.

Victory logic

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).

Tests

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.

Scroll window to center card

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    šŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. šŸ“ŠšŸ“ˆšŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ā¤ļø Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.