https://github.com/mathematicode/math-puzzle
A Math Game in Progress...
https://github.com/mathematicode/math-puzzle
dnd-kit dndkit math motion puzzle puzzle-game react react-js styled-component styled-components styledcomponents typescript
Last synced: about 2 months ago
JSON representation
A Math Game in Progress...
- Host: GitHub
- URL: https://github.com/mathematicode/math-puzzle
- Owner: mathematiCode
- Created: 2025-01-06T20:33:57.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-02-24T20:29:19.000Z (2 months ago)
- Last Synced: 2025-02-24T21:30:47.025Z (2 months ago)
- Topics: dnd-kit, dndkit, math, motion, puzzle, puzzle-game, react, react-js, styled-component, styled-components, styledcomponents, typescript
- Language: TypeScript
- Homepage: https://frectangles.netlify.app/
- Size: 296 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frectangles Game in React + Typescript + Dnd-kit
This is a game that I've been planning since October and started building in January. See my [game design document.](https://docs.google.com/document/d/19n_Eb5vXucGJNiwmZuczLBsk5-oJEB7wVopWP7I0jtE/edit?usp=sharing)
Check out the deployed (although very much not done) site [here.](frectangles.netlify.app)
There will be many levels with the earlier/easier with whole numbers and smaller boards and the later ones possibly including fractions, mixed numbers, and decimals.
Target Age Range is 5th - 7th grade but it will also have some levels that are accessible to 3rd & 4th grade and would be a great activity to build number sense for older grades as well. I was very inspired by Stick and Split when planning this game. This would be a great game to play after mastering Stick and Split because the concepts build on Stick and Split but my game requires some more complex mathematical thinking.
Here are some other items on my to do list for this project:
Priority Fixes and Features
- When a piece is dragged across the board, make the transition time 0 so it doesn't appear to re-animate from it's original location after it's already been dragged away.
- Make the rotation appear to be about the origin, not re-rendering it at the top left of the original rectangle.
- Make the shift after a rotation that causes a piece to be un-aligned with the grid more graceful/animated.
- Make the original piece disappear as soon as it's being dragged in the air.
- Handle case where a rotation causes a piece to go partly off the board.
- Handle UX for a piece that is too tall or too long to fit on the board
- Detect and prevent/handle collisions between pieces.
Features to Add Later
- Add animation for collisions
- Add animations to reset function
- Deselect puzzle pieces on clickAway with a custom hook
- Add distributive property functionality
- Add a win screen/ message
- Add game instructions & rules
- Add something to hint to the user that they can click the pieces to see the possible actions.
- Add limits to the UI to show how many actions the user can use
- Add limits to the level json and import them through context
Much Later or Possibly not at all
- Set up system to allow for fractional side lengths
- Add sound effects for collisions and piece placements
Bugs to Fix
- Sometimes there is an empty border and it appears the actual piece is displaced but it's border is still there. Upon inspection of the CSS the motion.div from rectangle was mysteriously getting a transform3d style from somewhere(?) so I used !important to set transform3d to 0px in all directions as a temporary fix.
- Layout issues on mobile caused by pieces being on top or underneath the board.