Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Create Drag and Drop game #30

Open
3 of 12 tasks
thaingu opened this issue Dec 1, 2020 · 1 comment
Open
3 of 12 tasks

Create Drag and Drop game #30

thaingu opened this issue Dec 1, 2020 · 1 comment
Assignees
@noobling @peter-tanner @RupesAUS @bryce-oc
Labels
epic This issue is a large body of work that is broken down into a number of smaller tasks frontend Task must have a front end issue
Milestone
Stretch-Goal

Comments

@thaingu
Copy link
Contributor

thaingu commented Dec 1, 2020 •
edited by peter-tanner
Loading

Requirements:

  • Based off the pre-requisite Five Food Groups page in the handbook.
  • Drag foods into the correct category in the five food groups.
  • Display some score.
  • Animation and sounds to be considered.

Idea :
image

Mocks

image

Diagram Food Chart no body text 72 For App

todo 2022-01-29

  • implement vibrate animation
  • test achievement logic (when not logged in)
  • help button -> dialog or animation (pre recorded?)
  • might create something to ask people to log in to save achievement
  • responsive ui (works on mobile phones)
  • rupert working on randomizing the location of the draggables
  • need to style the game
@thaingu thaingu added task New feature or request frontend Task must have a front end issue labels Dec 1, 2020
@thaingu thaingu closed this as completed Dec 1, 2020
@thaingu thaingu reopened this Dec 1, 2020
@thaingu thaingu added the epic This issue is a large body of work that is broken down into a number of smaller tasks label Dec 1, 2020
@JeremiahPinto JeremiahPinto added this to the Summer-Dec-2020 milestone Dec 1, 2020
@Drewbi
Copy link
Contributor

Drewbi commented Dec 2, 2020

This will be added only if we are finished everything else

@Drewbi Drewbi added the notinscope This is out of scope label Dec 2, 2020
@Drewbi Drewbi removed this from the Summer-Dec-2020 milestone Dec 4, 2020
@Drewbi Drewbi removed the task New feature or request label Dec 4, 2020
@Drewbi Drewbi added this to the Stretch-Goal milestone Dec 4, 2020
@noobling noobling self-assigned this Jan 30, 2021
@junhyap junhyap self-assigned this Jun 29, 2021
@CodeWithTheDoctor CodeWithTheDoctor removed the notinscope This is out of scope label Nov 26, 2021
@peter-tanner peter-tanner self-assigned this Nov 27, 2021
@RupesAUS RupesAUS self-assigned this Dec 6, 2021
CodeWithTheDoctor added a commit that referenced this issue Apr 17, 2022
@peter-tanner @RupesAUS
@bryce-oc @CodeWithTheDoctor @x4wiz @NicholasChoong @chenga3
[WIP] Implement drag and drop food game #30 (#222)
9a67c9c 
* Migrate food wheel from old branch

* Wheel now focuses correct slice

* Wheel now scales correctly if the window height decreases

* Fix #199, add resize hook and css to make vertical resize work

* Basic attempt at drag and drop object. Proper window resize still required.

* Removed window height hook, made pie chart use relative position for proper height, made basic draggable scalable

* test changes

* character image mapping 5 images working

* Start refactoring to angles, mutex test

* Use disk to determine slice instead of `<area>` polygon

* Remove old react-draggable files, add events to `Draggable`, basic game rounds logic

* added foundation for character spawner

* generate character set function works, not functional with game logic atm

* Added 'highlighting' zoom of food character under mouse.

* Use `Draggable` position for wheel detection, add round modal, refactor
FoodGroups (wheel)

* - Updated tailwind
- Added hover scale transitions to draggable characters.

* Added float() and defloat() functions to make hovered Draggables 'float' above others.

* Removed redundant z-0 in second <div> and adjusted width and height values for better-sized Draggables.

* Removed defloat() call from stopDrag() as characters should only defloat when they are no longer being hovered on.

* Pushed small experimental changes for John

* characters received from the DB

* Notion character db integration with draggables now functional

* Added 'wiggle' and 'vibrate' animation styles, made Draggables wiggle when dragged, refactored hover zoom to work with wiggle.

* Refactored wiggle transform and Draggable scale to be more stable for further animations, and changed image size to fit.

* Fixed positioning bug with NextJS12 : Wrapper span from nextjs image component devolved childrens styling and had to be forced back into relative positioning

* Tailwind css

* Unbreak package-lock

* Cleanup styles, converted css to tailwindcss

* Fixed image loading problem (hacky solution with hidden html element)

* Clean up/refactor

* food groups use enum, fix mouse override on unhover and rehover

* Basic achievements for foodgame

* Fixed errors and redundancies created by merge.

* Added functionality to make characters' names appear when hovered on (currently wrong name appears frequently).

* Styled name popup on Draggables to be clearer.

* Modified Transition parameters to improve name appearance/disappearance transition.

* Modified Transition parameters slightly to improve smoothness.

* Achievement logic works logged out/signing in, refactor notion
achievement count preserved when going from logged out-> signed in
basic message to log in when logged out
use proper types in notion api for food images
limit trophies to max of 18 (to not look visually broken)

* Styled Foodwheel with appropriate draggable spawner locations and added game text. Still some issues with responsive ui

* Replaced hoverStyle useState with z-20 hover:z-30 Tailwind classes; changed wiggle animation to not involve scale and moved it to new <div> to not conflict with hover scaling.

* WIP - added CSS animation-delay to attempt to cancel starting jolt of wiggle animation.

* Crap

* Start of dirty refactor

* Refactored code, Added Randomized Features, General Cleanup, Fixed UseState repeater

* Images now scale responsively

* fix reset on 2nd round

* fix issue with img caching, wrong positions for second draggables set

* Responsive edits

Co-authored-by: Peter <[email protected]>

* Shared Coding Changes

* Responsive start positions, fix center wheel bug

* responsive end positions on wheel

* Basic clean up of old unused code

* fixed import

* moved to notionAPI

* added guard clauses for reading in env var

* fixed formatting

* changed files from tsx to ts

* Removed Redudant import React from React

* fixed useState in loop lint error

* comment out achievement code & update useFirebase import

* fixed lint error - useState being called in function that is not react component/custom hook

* fixed lint error - onMouseOver/onMouseOut must be paired with onFocus/onBlur for non-mouse users

* Update code to use new firebase context

* move files to make code clearer

* Removed updatedFunction hack

* It builds now (finally)

Co-authored-by: RupesAUS <[email protected]>
Co-authored-by: Bryce O'Connor <[email protected]>
Co-authored-by: CodeWithTheDoctor <[email protected]>
Co-authored-by: John Pimenov <[email protected]>
Co-authored-by: RupesAUS <[email protected]>
Co-authored-by: Peter <[email protected]>
Co-authored-by: Nicholas Choong <[email protected]>
Co-authored-by: Alan Cheng <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@noobling noobling

@peter-tanner peter-tanner

@RupesAUS RupesAUS

@bryce-oc bryce-oc

Labels
epic This issue is a large body of work that is broken down into a number of smaller tasks frontend Task must have a front end issue
Projects
None yet
Milestone
Stretch-Goal
Development

No branches or pull requests
9 participants
@junhyap @CodeWithTheDoctor @noobling @JeremiahPinto @thaingu @Drewbi @peter-tanner @RupesAUS @bryce-oc