Drag and drop animations

components/FoodGroups/API/getData.tsx

@@ -0,0 +1,89 @@
+import { Client } from '@notionhq/client'
+import { FoodGroupCharacterImage } from '../Draggable/types'
+
+import { notion_food_dict } from '../Draggable/characterimages'
+
+import { QueryDatabaseResponse } from '@notionhq/client/build/src/api-endpoints'
+
+if (process.env.NOTION_API_KEY === undefined) {
+  console.error('[ FATAL ]: NO NOTION_API_KEY IN ENVIRONMENT VARIABLES')
+  process.exit(1)
+}
+if (process.env.NOTION_CHARACTERS_DB_ID === undefined) {
+  console.error(
+    '[ FATAL ]: NO NOTION_CHARACTERS_DB_ID IN ENVIRONMENT VARIABLES'
+  )
+  process.exit(1)
+}
+
+const notion = new Client({
+  auth: process.env.NOTION_API_KEY
+})
+
+const getCharacterData = async () => {
+  let data = await notion.databases.query({
+    database_id: process.env.NOTION_CHARACTERS_DB_ID ?? 'ERROR'
+  })
+
+  return { data }
+}
+
+const getFormatData = (data: QueryDatabaseResponse) => {
+  const formattedData: FoodGroupCharacterImage[] = []
+
+  // iterate through each record in the character database
+  data.results.forEach(characterRecord => {
+    const page = characterRecord as Extract<
+      typeof characterRecord,
+      { properties: {} }
+    >
+
+    const properties = page.properties
+
+    if (
+      properties.image.type === 'files' &&
+      properties.image.files[0] !== undefined &&
+      properties.image.files[0].type === 'file' &&
+      properties.foodGroup.type === 'rich_text' &&
+      properties.name.type === 'title'
+    ) {
+      if (properties.foodGroup.rich_text[0] === undefined) {
+        // Melody Melon does not have a food type assigned.
+        console.error(
+          `[ ERROR ]: No food type for ${properties.name.title[0].plain_text}`
+        )
+        return
+      }
+      const characterFoodGroup: string =
+        properties.foodGroup.rich_text[0].plain_text
+      const defaultProperties = {
+        name: properties.name.title[0].plain_text,
+        img_src: properties.image.files[0].file.url
+      }
+
+      if (characterFoodGroup === 'Water') return // Ignore cool glass
+
+      const type = notion_food_dict.get(characterFoodGroup)
+
+      if (type === undefined) {
+        console.error(
+          `[ ERROR ]: Invalid food type for ${defaultProperties.name}. Got type ${type}`
+        )
+        return
+      }
+
+      formattedData.push({
+        div_id: `${type}-character`,
+        img_id: `${type}-character-img`,
+        type: type,
+        bounding_box_id: 0,
+        ...defaultProperties
+      })
+    } else {
+      console.error('[ ERROR ]: Bad type!')
+    }
+  })
+  return formattedData
+}
+
+export { getCharacterData, getFormatData }

components/FoodGroups/Draggable/boundingbox.tsx

@@ -0,0 +1,22 @@
+interface BoundingBox {
+  x1: number
+  y1: number
+  x2: number
+  y2: number
+}
+
+interface Vector2 {
+  x: number
+  y: number
+}
+
+export const ORIGIN_VECTOR2 = { x: 0, y: 0 }
+
+const inBoundingBox = (box: BoundingBox, point: Vector2) =>
+  point.x < box.x2 && point.x > box.x1 && point.y < box.y2 && point.y > box.y1
+
+export const cloneVector2 = (v:Vector2) => {
+  return {x:v.x, y:v.y}
+}
+export type { BoundingBox, Vector2 }
+export { inBoundingBox }

components/FoodGroups/Draggable/characterimages.tsx

@@ -0,0 +1,19 @@
+import { GROUPS } from '../groups'
+
+let notion_food_dict = new Map<string, GROUPS>([
+  // OLD - REMOVE ONCE DATABASE IS MIGRATED (Note that the dash is different from -)
+  ['Vegetables – protective foods', GROUPS.VEGETABLES],
+  ['Breads and Cereals – Energy Foods', GROUPS.GRAINS],
+  ['Dairy foods – body building', GROUPS.DAIRY],
+  ['Meat/Protein – body building', GROUPS.MEAT],
+  ['Fruit – Protective foods', GROUPS.FRUIT],
+
+  // TEMP - REMOVE THIS MAP ONCE MIGRATED TO NAMES
+  [GROUPS.VEGETABLES, GROUPS.VEGETABLES],
+  [GROUPS.GRAINS, GROUPS.GRAINS],
+  [GROUPS.DAIRY, GROUPS.DAIRY],
+  [GROUPS.MEAT, GROUPS.MEAT],
+  [GROUPS.FRUIT, GROUPS.FRUIT]
+])
+
+export { notion_food_dict }

components/FoodGroups/Draggable/characterspawner.tsx

@@ -0,0 +1,242 @@
+import React, { useState, useEffect } from 'react'
+import Draggable, { DRAGGING_STATE } from '@components/FoodGroups/Draggable'
+import { State_, StateDispatch } from '../types'
+
+import {
+  FoodGroupCharacterImage,
+  FoodGroupCharacterImageDynamic
+} from './types'
+import { FOOD_GROUPS, GROUPS } from '@components/FoodGroups/groups'
+import {
+  ORIGIN_VECTOR2,
+  Vector2
+} from '@components/FoodGroups/Draggable/boundingbox'
+
+const N_DRAGGABLES = 5
+
+const updatedFunction = (f: Function) => {
+  const [rerender, setRerender] = useState(0)
+  useEffect(() => {
+    f()
+  }, [rerender])
+  return () => setRerender(rerender + 1)
+}
+
+export const CHARACTER_POSITIONS: Vector2[] = [
+  { x: 5, y: 25 },
+  { x: 25, y: 5 },
+  { x: 45, y: 25 },
+  { x: 50 / 3, y: 50 },
+  { x: 100 / 3, y: 50 }
+]
+
+export const CHARACTER_END: Record<string, Vector2[]> = {
+  // TODO: Add positions for the second set of characters if a game with 10 charcters is used.
+  [GROUPS.DAIRY]: [
+    { x: 45, y: 70 },
+    { x: 0, y: 0 }
+  ],
+  [GROUPS.FRUIT]: [
+    { x: 60, y: 55 },
+    { x: 0, y: 0 }
+  ],
+  [GROUPS.GRAINS]: [
+    { x: 20, y: 20 },
+    { x: 0, y: 0 }
+  ],
+  [GROUPS.VEGETABLES]: [
+    { x: 60, y: 20 },
+    { x: 0, y: 0 }
+  ],
+  [GROUPS.MEAT]: [
+    { x: 25, y: 60 },
+    { x: 0, y: 0 }
+  ],
+  [GROUPS.NONE]: [],
+  [GROUPS.DEFAULT]: [],
+  [GROUPS.TUCKER]: []
+}
+
+function generateCharacterSet(character_data: FoodGroupCharacterImage[]) {
+  if (character_data === undefined)
+    throw new Error('Undefined character_data data')
+
+  const characterSet: FoodGroupCharacterImageDynamic[] = []
+
+  const filterFunction = (type: string) =>
+    character_data.filter(character => character.type === type)
+
+  const characters = FOOD_GROUPS.map(group => filterFunction(group))
+
+  let positionsTmp = Array.from(Array(N_DRAGGABLES).keys()) // [0,1,2,...,N_DRAGGABLES-1]
+  let positions: number[] = []
+  for (let i = positionsTmp.length - 1; i >= 0; i--) {
+    const idx = Math.floor(Math.random() * i)
+    positions.push(positionsTmp[idx])
+    positionsTmp.splice(idx, 1)
+  }
+
+  const TYPE_COUNT: { [K in GROUPS]: number } = {
+    [GROUPS.DAIRY]: 0,
+    [GROUPS.FRUIT]: 0,
+    [GROUPS.GRAINS]: 0,
+    [GROUPS.VEGETABLES]: 0,
+    [GROUPS.MEAT]: 0,
+    // Others for type safety
+    [GROUPS.NONE]: 0,
+    [GROUPS.DEFAULT]: 0,
+    [GROUPS.TUCKER]: 0
+  }
+
+  characters.forEach((characterTypeSet, i) => {
+    const character =
+      characterTypeSet[Math.floor(Math.random() * characterTypeSet.length)]
+    const test: FoodGroupCharacterImageDynamic = {
+      start_index: positions[i],
+      end_index: TYPE_COUNT[character.type],
+      ...character
+    }
+    characterSet.push(test)
+    TYPE_COUNT[character.type]++
+  })
+
+  return characterSet
+}
+
+interface Props {
+  endDragFunc: Function
+  startDragFunc: [StateDispatch<Vector2>, StateDispatch<GROUPS>]
+  absPositionSetState: StateDispatch<Vector2>
+  draggablePositions_1: State_<Vector2>[]
+  draggablePositions_2: State_<Vector2>[]
+  draggingStates: State_<DRAGGING_STATE[]>
+  draggableZone: State_<DOMRect | undefined>
+  currentCharSet: FoodGroupCharacterImageDynamic[]
+  nextCharSet: FoodGroupCharacterImageDynamic[]
+  switchSetFlag: boolean
+  startZoneE: string
+
+  notion_character_data: FoodGroupCharacterImage[]
+}
+
+const CharacterSpawner: React.FC<Props> = (props: Props) => {
+  const [resizeCharacterPositions, setResizeCharacterPositions] =
+    useState(CHARACTER_POSITIONS)
+  const [resizeEndPositions, setResizeEndPositions] =
+    useState<Record<string, Vector2[]>>(CHARACTER_END)
+  const [resizeF, setResizeF] = useState(() => () => {})
+
+  if (typeof window !== 'undefined') {
+    // const startZoneElem = document.getElementById(props.startZoneE)
+    useEffect(() => {
+      setResizeF(() => {
+        const startZone = document
+          .getElementById(props.startZoneE)
+          ?.getBoundingClientRect()
+
+        const endZone = document
+          .getElementById('bluezone')
+          ?.getBoundingClientRect()
+
+        const draggableZone = props.draggableZone[0]
+
+        // RESIZE FOR START POSITIONS
+        if (startZone === undefined || draggableZone === undefined) return
+        const updatedStartPositions = CHARACTER_POSITIONS.map(e => {
+          return {
+            x:
+              (((e.x / 100) * startZone.width) / draggableZone.width) * 100 +
+              ((startZone.left - draggableZone.left) / draggableZone.width) *
+                100,
+            y:
+              (((e.y / 100) * startZone.height) / draggableZone.height) * 100 +
+              ((startZone.top - draggableZone.top) / draggableZone.height) * 100
+          }
+        })
+
+        setResizeCharacterPositions(updatedStartPositions)
+
+        // RESIZE FOR END POSITIONS
+        if (endZone === undefined) return
+        var updatedEndPositions: Record<string, Vector2[]> = {}
+        // BASICALLY DEEPCOPY AND SCALE OF CHARACTER_END
+        Object.keys(CHARACTER_END).forEach(
+          k =>
+            (updatedEndPositions[k] = [
+              ...CHARACTER_END[k].map(e => {
+                return {
+                  x:
+                    (((e.x / 100) * endZone.width) / draggableZone.width) *
+                      100 +
+                    ((endZone.left - draggableZone.left) /
+                      draggableZone.width) *
+                      100,
+                  y:
+                    (((e.y / 100) * endZone.height) / draggableZone.height) *
+                      100 +
+                    ((endZone.top - draggableZone.top) / draggableZone.height) *
+                      100
+                }
+              })
+            ])
+        )
+
+        setResizeEndPositions(updatedEndPositions)
+      })
+      window.addEventListener('resize', resizeF)
+
+      return () => {
+        window.removeEventListener('resize', resizeF)
+      }
+    }, [props.draggableZone[0]])
+  }
+
+  const generateSetElements = (
+    charSet: FoodGroupCharacterImageDynamic[],
+    positions: State_<Vector2>[],
+    viewable: boolean
+  ) =>
+    charSet.map((character, index) => {
+      const endDragF = updatedFunction(() =>
+        props.endDragFunc(index, character.type)
+      )
+
+      return (
+        <Draggable
+          key={index}
+          index={index}
+          startPosition={resizeCharacterPositions[character.start_index]}
+          endPosition={resizeEndPositions[character.type][character.end_index]}
+          draggingStates={props.draggingStates}
+          onEndDrag={endDragF}
+          onStartDrag={() => {
+            props.startDragFunc[0](ORIGIN_VECTOR2)
+            props.startDragFunc[1](character.type)
+          }}
+          screenPosition={positions[index][0]}
+          setScreenPosition={positions[index][1]}
+          setAbsPosition={props.absPositionSetState}
+          hidden={viewable}
+          draggableZone={props.draggableZone[0]}
+          {...character}
+        />
+      )
+    })
+
+  return (
+    <div className='grid grid-cols-1'>
+      {generateSetElements(
+        props.currentCharSet,
+        props.draggablePositions_1,
+        !props.switchSetFlag
+      )}
+      {generateSetElements(
+        props.nextCharSet,
+        props.draggablePositions_2,
+        props.switchSetFlag
+      )}
+    </div>
+  )
+}
+
+export { generateCharacterSet, CharacterSpawner }