Merge branch 'master' of https://github.com/C2DH/zoomland

src/components/Balloon.jsx

@@ -1,5 +1,5 @@
 import React, { Suspense, useEffect, useRef } from 'react'
-import { Text, useGLTF } from '@react-three/drei'
+import { GradientTexture, Text, useGLTF } from '@react-three/drei'
 import { RigidBody } from '@react-three/rapier'
 import { useSpring, easings } from '@react-spring/web'
 import Sensor from './Sensor'
@@ -24,7 +24,7 @@ const Balloon = ({ yMax = 20, yMin = 0, waitingTime = 5000, ...props }) => {
  const textRef = useRef()
  const textTimerRef = useRef()
  // balloon status, threejs reference and timer to go up and down
- const baloonStatusRef = useRef(GroundNoPlayer)
+ const baloonStatusRef = useRef(FlyingDown)
  const balloonRef = useRef()
  const baloonTimerRef = useRef()
  // rigidbody reference
@@ -56,16 +56,23 @@ const Balloon = ({ yMax = 20, yMin = 0, waitingTime = 5000, ...props }) => {
  if (baloonStatusRef.current == FlyingUp) {
  // baloonStatusRef.current =
  // intersectionStatusRef.current && collisionStatusRef.current ? UpWithPlayer : UpNoPlayer
- textRef.current.text = 'Max altitude reached.'
+ writeText('Max altitude reached.')
  console.log('[Balloon] should go down now...')
  landing()
  } else if (baloonStatusRef.current == FlyingDown) {
+ writeText('Up...')
  // baloonStatusRef.current = intersectionStatusRef.current ? GroundWithPlayer : GroundNoPlayer
  takeOff()
  }
  },
  }))
 
+ const writeText = (text) => {
+ if (textRef.current) {
+ textRef.current.text = text
+ }
+ }
+
  const debounceCollisionEnter = () => {
  clearTimeout(collisionTimerRef.current)
  collisionTimerRef.current = setTimeout(() => {
@@ -150,11 +157,12 @@ const Balloon = ({ yMax = 20, yMin = 0, waitingTime = 5000, ...props }) => {
  console.debug('[Balloon] landing...')
  // start the balloon
  clearTimeout(baloonTimerRef.current)
- textRef.current.text = 'beware, baloon is landing...'
+ textRef.current.text = 'Preparing baloon for landing..'
  baloonStatusRef.current = BeforeFlyingDown
  baloonTimerRef.current = setTimeout(() => {
  console.debug('[Balloon] land!!')
  baloonStatusRef.current = FlyingDown
+ textRef.current.text = '..stand back!'
  api.start({
  n: yMin,
  })
@@ -239,6 +247,7 @@ const Balloon = ({ yMax = 20, yMin = 0, waitingTime = 5000, ...props }) => {
  <meshStandardMaterial color={'red'} depthWrite={false} opacity={0} transparent={true} />
  </mesh>
  </RigidBody>
+
  <Suspense fallback={null}>
  <group {...props} dispose={null}>
  <Text
@@ -253,6 +262,21 @@ const Balloon = ({ yMax = 20, yMin = 0, waitingTime = 5000, ...props }) => {
  </Text>
  </group>
  </Suspense>
+ {/* platform */}
+ {/* <mesh
+ position={[props.position[0], props.position[1] - 0.03, props.position[2]]}
+ receiveShadow
+ castShadow
+ >
+ <cylinderGeometry receiveShadow args={[1.5, 0.5, 0.1, 32]} />
+ <meshBasicMaterial receiveShadow>
+ <GradientTexture
+ stops={[0, 1]} // As many stops as you want
+ colors={['aquamarine', 'hotpink']} // Colors need to match the number of stops
+ size={1024} // Size is optional, default = 1024
+ />
+ </meshBasicMaterial>
+ </mesh> */}
  <group {...props} dispose={null} ref={balloonRef}>
  <mesh
  castShadow

src/components/Boat.jsx

@@ -1,10 +1,11 @@
-import React, { useEffect, useRef } from 'react'
+import React, { Suspense, useEffect, useRef } from 'react'
 import { useGLTF } from '@react-three/drei'
 import { useFrame } from '@react-three/fiber'
 import { Gameplay, OpenSea, Start, usePlayerStore } from '../store'
 import { Vector3 } from 'three'
 import { updateCamera } from '../utils/camera'
 import { easings, useSpring } from '@react-spring/web'
+import Hero from './Hero'
 
 const Boat = ({
  positions = [
@@ -14,6 +15,7 @@ const Boat = ({
  ...props
 }) => {
  const boatRef = useRef()
+ const setScene = usePlayerStore((state) => state.setScene)
  const sceneRef = useRef(usePlayerStore.getState().scene)
  const { nodes, materials } = useGLTF('../assets/models/Boat.glb')
  const seed = Math.random() + 0.8
@@ -66,6 +68,9 @@ const Boat = ({
  api.start({
  x: positions[1][0],
  y: positions[1][1],
+ onRest: () => {
+ setScene(Gameplay)
+ },
  })
  } else if (state.scene === Start) {
  // do a transition to the harbour
@@ -108,6 +113,9 @@ const Boat = ({
  material={materials.Wood}
  />
  </group>
+ {/* <Suspense fallback={null}>
+ <Hero position={[0, -0.15, 0]} scale={0.25} />
+ </Suspense> */}
  </group>
  )
 }

src/components/DialogueCard.jsx

@@ -10,6 +10,7 @@ const DialogueCard = ({
  disablePrevious = false,
  disableNext = false,
  avatar = '/assets/avatars/Florentina.jpg',
+ onCompleteLabel = 'Done',
  onClose,
 }) => {
  return (
@@ -45,7 +46,7 @@ const DialogueCard = ({
  Prev
  </button>
  <button className="btn btn-link btn-lg" onClick={onClickNext}>
- {disableNext ? 'Ciao' : 'Continue'}
+ {disableNext ? onCompleteLabel : 'Continue'}
  </button>
  </div>
  </div>

src/components/Header.jsx

@@ -4,13 +4,9 @@ import LogoZoomland from './Svg/LogoZoomland'
 import Counter from './Counter'
 import MenuIcon from './Svg/MenuIcon'
 import RoundButton from './RoundButton'
-import { MenuOpen, useWorldStore, useMenuStore } from '../store'
-import LogoZoomlandSmall from './Svg/LogoZoomlandSmall'
+import { MenuOpen, useMenuStore } from '../store'
 
 const Header = ({ isMobile = true }) => {
- const saveInitialPropsToPlayerStore = useWorldStore(
- (state) => state.saveInitialPropsToPlayerStore,
- )
  const menuStatus = useMenuStore((state) => state.menuStatus)
  const setMenuStatus = useMenuStore((state) => state.setMenuStatus)
 
@@ -38,9 +34,6 @@ const Header = ({ isMobile = true }) => {
  <LogoZoomland />
  </div>
  )}
- <button className="btn btn-primary" onClick={saveInitialPropsToPlayerStore}>
- save
- </button>
 
  <Counter />
  <div style={{ position: 'absolute', right: 0 }}>

src/components/Hero.jsx

@@ -41,7 +41,9 @@ const Hero = (props) => {
  // console.debug('[Hero] animation changed:', animation)
  if (previousAnimation) {
  const previousAction = mappedActions[previousAnimation]
- previousAction.fadeOut(0.5)
+ if (previousAction) {
+ previousAction.fadeOut(0.5)
+ }
  }
  if (action) {
  action.reset().setEffectiveTimeScale(1).setEffectiveWeight(1).fadeIn(0.5).play()

src/components/Player.jsx

@@ -1,5 +1,5 @@
 import Hero from './Hero'
-import { useEffect, useRef } from 'react'
+import { Suspense, useEffect, useRef } from 'react'
 import { useFrame } from '@react-three/fiber'
 import { RigidBody, CapsuleCollider } from '@react-three/rapier'
 import { useKeyboardControls } from '@react-three/drei'
@@ -10,6 +10,7 @@ import {
  AnimationRun,
  AnimationWalk,
  DefaultPlayerAngle,
+ Gameplay,
  useAnimationStore,
  usePlayerStore,
  useWorldStore,
@@ -53,6 +54,8 @@ const Player = ({ isMobile = false, scale = 0.6 }) => {
  state.setPlayerAngle,
  ])
 
+ const scene = usePlayerStore((state) => state.scene)
+
  useEffect(() => {
  console.debug(
  '[Player] @useEffect',
@@ -68,6 +71,12 @@ const Player = ({ isMobile = false, scale = 0.6 }) => {
  }
  }, [])
 
+ useEffect(() => {
+ if (scene === 'gameplay') {
+ console.debug('[Player] @useEffect - reset player position')
+ }
+ }, [scene])
+
  // Connect to the store on mount, disconnect on unmount, catch state-changes in a reference
  useEffect(() => {
  if (isMobile) {
@@ -118,7 +127,23 @@ const Player = ({ isMobile = false, scale = 0.6 }) => {
  }
 
  useFrame((state, delta) => {
+ if (!rigidbody.current) return
  const shouldStayStill = isCollectingQuest || isCollectingChapter
+ // check velocity
+ const linvel = rigidbody.current.linvel()
+
+ if (linvel.y < -100 || linvel.y > 100) {
+ // reset position
+ rigidbody.current.resetForces(true)
+ rigidbody.current.setGravityScale(linvel.y > 0 ? 0.5 : -1)
+ console.log(
+ 'linvel still oooo FALLLING again and again',
+ linvel,
+ rigidbody.current.isKinematic(),
+ )
+ rigidbody.current.setTranslation(new Vector3(100, 0, 0), true)
+ return
+ }
  if (isMobile) {
  movePlayerWithJoystick(state, delta, shouldStayStill)
  return
@@ -186,7 +211,6 @@ const Player = ({ isMobile = false, scale = 0.6 }) => {
  }, 1000)
  }
  // setPlayerPosition(characterWorldPosition)
-
  // smooth rotation angle
  // character.current.rotation.y += angle.current * 0.1
  character.current.rotation.y += (angle.current - character.current.rotation.y) * 0.75
@@ -208,6 +232,7 @@ const Player = ({ isMobile = false, scale = 0.6 }) => {
  name="player"
  colliders={false}
  mass={2.2}
+ enabledTranslations={[true, true, true]}
  enabledRotations={[false, false, false]}
  position={initialPlayerPosition}
  onCollisionEnter={() => {
@@ -217,7 +242,9 @@ const Player = ({ isMobile = false, scale = 0.6 }) => {
  >
  <CapsuleCollider args={[0.8, 0.4]} position={[0, 1.01, 0]} />
  <group ref={character}>
- <Hero position={[0, -0.25, 0]} />
+ <Suspense>
+ <Hero position={[0, -0.25, 0]} />
+ </Suspense>
  </group>
  </RigidBody>
  </>

src/components/Quest.jsx

@@ -11,7 +11,7 @@ const to = (i) => ({
 })
 const from = (i) => ({ x: 0, y: i * -200, opacity: 0 })
 
-const Quest = ({ quest, withChapter = false, onComplete }) => {
+const Quest = ({ quest, withChapter = false, onComplete, onCompleteLabel = 'Done' }) => {
  const [sentenceIndex, setSentenceIndex] = useState(-1)
  const [sentences, setSentences] = useState([])
 
@@ -39,22 +39,24 @@ const Quest = ({ quest, withChapter = false, onComplete }) => {
  useEffect(() => {
  let s = []
 
- if (!Array.isArray(quest.meetings)) {
+ if (Array.isArray(quest.sentences)) {
+ s = quest.sentences
+ } else if (!Array.isArray(quest.meetings)) {
  // first time. use only initial sentences
  s = withChapter
  ? quest.dialogues.firstMeetingWithChapter
  : quest.dialogues.firstMeetingWithoutChapter
- } else if (quest.meetings.length === 1) {
- // second time. use only second sentences
- s = withChapter
- ? quest.dialogues.secondMeetingWithChapter
- : quest.dialogues.secondMeetingWithoutChapter
+ // reduce the possibility, but increases our chance to get the same sentence
+ // } else if (quest.meetings.length === 1) {
+ // // second time. use only second sentences
+ // s = withChapter
+ // ? quest.dialogues.secondMeetingWithChapter
+ // : quest.dialogues.secondMeetingWithoutChapter
  } else {
  // third time. use only third sentences
  s = withChapter ? quest.dialogues.runIntoWithChapter : quest.dialogues.runIntoWithoutChapter
  }
  console.debug('[Quest] sentences:', s, quest)
-
  setSentences(s)
  setSentenceIndex(0)
  }, [quest, withChapter])
@@ -114,6 +116,7 @@ const Quest = ({ quest, withChapter = false, onComplete }) => {
  disableNext={sentenceIndex === sentences.length - 1}
  disablePrevious={sentenceIndex < 1}
  onClose={onComplete}
+ onCompleteLabel={onCompleteLabel}
  />
  </animated.div>
  )

src/components/SideMenu.jsx

@@ -17,11 +17,15 @@ import {
  OpenSea,
  Gameplay,
  Start,
+ useWorldStore,
 } from '../store'
 
 const SideMenu = () => {
  const { pathname } = useLocation()
  const [menuStatus, set] = useMenuStore((state) => [state.menuStatus, state.setMenuStatus])
+ const saveInitialPropsToPlayerStore = useWorldStore(
+ (state) => state.saveInitialPropsToPlayerStore,
+ )
  const [setScene] = usePlayerStore((state) => [state.setScene])
 
  const [{ x }, api] = useSpring(() => ({
@@ -65,23 +69,35 @@ const SideMenu = () => {
  <div className="menu-body">
  <Nav>
  <Nav.Item>
- <button className="btn btn-link" onClick={() => setScene(Gameplay)}>
+ <button
+ className="btn btn-link"
+ onClick={() => {
+ setScene(Gameplay)
+ set(MenuClosed)
+ }}
+ >
  New Game
  </button>
  </Nav.Item>
+
  {/* add space */}
  <Nav.Item>
- <button className="btn btn-link" onClick={() => setScene(Start)}>
- Start
+ <button
+ className="btn btn-link"
+ onClick={() => {
+ setScene(Start)
+ set(MenuClosed)
+ }}
+ >
+ introduction
  </button>
  </Nav.Item>
- <Nav.Item className="mb-4">
- <button className="introduction btn btn-link" onClick={() => setScene(OpenSea)}>
- introduction
+ <Nav.Item className="mb-3">
+ <button className="btn btn-link" onClick={saveInitialPropsToPlayerStore}>
+ save
  </button>
  </Nav.Item>
-
- <Nav.Item className="mt-4">
+ <Nav.Item>
  <Link to="/map">Map</Link>
  </Nav.Item>
  <Nav.Item>

src/components/SkipIntro.css

@@ -3,6 +3,17 @@
  position: absolute;
  bottom: 20px;
  text-align: center;
+ width: 100%;
+ overflow: hidden;
+ height: 100%;
+ pointer-events: none;
+}
+
+.SkipIntro > .btn {
+ margin: auto;
+ pointer-events: auto;
+ position: absolute;
+ bottom: 10px;
  width: 50%;
  margin-left: 25%;
 }