fix some bugs

kc0506 · Jan 6, 2023 · 9f6d6dc · 9f6d6dc
1 parent 01c6512
commit 9f6d6dc
Show file tree

Hide file tree

Showing 10 changed files with 49 additions and 17 deletions.
diff --git a/frontend/public/pics/orbitControls.gif b/frontend/public/pics/orbitControls.gif
diff --git a/frontend/public/pics/reset.gif b/frontend/public/pics/reset.gif
diff --git a/frontend/src/Components/HTML/TutorialModal.tsx b/frontend/src/Components/HTML/TutorialModal.tsx
@@ -41,6 +41,32 @@ const TutorialModal: React.FC = () => {
       nextButtonProps: { children: '下一步' },
       prevButtonProps: { children: '上一步' },
     },
+    {
+      title: null,
+      cover: (
+        <>
+          <Image style={{ borderRadius: '6px' }} preview={false} height={300} width={480} src='/pics/reset.gif' />
+          <h2>重置位置</h2>
+          <p>翻車或卡住時，按下 R 來回到出生點</p>
+          <p>（若重置後鏡頭出現異常，可用 Y/F 調整）</p>
+        </>
+      ),
+      nextButtonProps: { children: '下一步' },
+      prevButtonProps: { children: '上一步' },
+    },
+    {
+      title: null,
+      cover: (
+        <>
+          <Image style={{ borderRadius: '6px' }} preview={false} height={300} width={480} src='/pics/orbitControls.gif' />
+          <h2>調整視角</h2>
+          <p>按下 F 可以切換為第三視角</p>
+          <p>按下 Y 則可以開啟自由視角模式，利用滑鼠來控制視角！</p>
+        </>
+      ),
+      nextButtonProps: { children: '下一步' },
+      prevButtonProps: { children: '上一步' },
+    },
     {
       title: null,
       cover: (
@@ -90,7 +116,7 @@ const TutorialModal: React.FC = () => {
                   }}
                 >
                   <Statistic
-                    title="喇叭"
+                    title="響鈴"
                     value={"L"}
                   //prefix={<TeamOutlined />}
                   />
@@ -183,7 +209,7 @@ const TutorialModal: React.FC = () => {
         <>
           <Image style={{ borderRadius: '6px' }} preview={false} height={300} width={480} src='/pics/tutorial_bulletin.gif' />
           <h2>留言板</h2>
-          <p>在各個景點留言來跟大家交流！</p>
+          <p>在各個景點留言來跟大家交流！（滑鼠點擊開啟）</p>
         </>
       ),
       nextButtonProps: { children: '下一步' },

diff --git a/frontend/src/Components/THREE/Bike/hooks/useControls.tsx b/frontend/src/Components/THREE/Bike/hooks/useControls.tsx
@@ -26,12 +26,12 @@ interface IControls {
 export function useControls() {
 
     const keys = useRef({ forward: false, backward: false, left: false, right: false, brake: false, reset: false, navigate: false })
-    useKeyPress(['ArrowUp', 'w'], (pressed) => (keys.current.forward = pressed))
-    useKeyPress(['ArrowDown', 's'], (pressed) => (keys.current.backward = pressed))
-    useKeyPress(['ArrowLeft', 'a'], (pressed) => (keys.current.left = pressed))
-    useKeyPress(['ArrowRight', 'd'], (pressed) => (keys.current.right = pressed))
+    useKeyPress(['ArrowUp', 'w', 'W'], (pressed) => (keys.current.forward = pressed))
+    useKeyPress(['ArrowDown', 's', 'S'], (pressed) => (keys.current.backward = pressed))
+    useKeyPress(['ArrowLeft', 'a', 'A'], (pressed) => (keys.current.left = pressed))
+    useKeyPress(['ArrowRight', 'd', 'D'], (pressed) => (keys.current.right = pressed))
     useKeyPress([' '], (pressed) => (keys.current.brake = pressed))
-    useKeyPress(['r'], (pressed) => (keys.current.reset = pressed))
+    useKeyPress(['r', 'R'], (pressed) => (keys.current.reset = pressed))
     useKeyPress(['Enter'], (pressed) => (keys.current.navigate = pressed))
     return keys
 }

diff --git a/frontend/src/Components/THREE/Bike/hooks/useSound.tsx b/frontend/src/Components/THREE/Bike/hooks/useSound.tsx
@@ -59,6 +59,7 @@ export default function useSound({ speed }: IProps) {
         if (!bikeEnabled) {
             sound1.stop();
             sound2.stop();
+            return;
         }
 
         sound1.play();

diff --git a/frontend/src/Components/THREE/interaction/InteractiveBlock.tsx b/frontend/src/Components/THREE/interaction/InteractiveBlock.tsx
@@ -97,7 +97,7 @@ const InteractiveBlock = ({ position, handleEvent }: IProps) => {
     }
 
     const [isEvent, setIsEvent] = useState(false);
-    useKeyPress(['Enter', 'e'], (pressed) => (setIsEvent(pressed)))
+    useKeyPress(['Enter', 'e', 'E'], (pressed) => (setIsEvent(pressed)))
 
     useEffect(() => {
         if (isActive && isEvent) { handleEvent(); }

diff --git a/frontend/src/Components/THREE/scene/OrbitControls.tsx b/frontend/src/Components/THREE/scene/OrbitControls.tsx
@@ -10,7 +10,7 @@ import useBikeContext from "../../../Containers/hooks/useBikeContext";
 import { ThreeContext } from "../../../Containers/THREE/Canvas";
 import { useMyContext } from "../../../Utils/useMyContext";
 
-const debug = true;
+const debug = false;
 
 interface IProps {
     cameraPosition: Vector3,

diff --git a/frontend/src/Containers/THREE/SFu/index.tsx b/frontend/src/Containers/THREE/SFu/index.tsx
@@ -33,6 +33,7 @@ export default function SFu({ position }: IProps) {
                 position={[5.5, 7.5, 5.1]}
                 rotation={[0, Math.PI / 4, 0]}
                 autoRotate
+                tooltip="嘿嘿~被你發現了！"
             />
             <HintCircle
                 position={[-27, 0, 0]}

diff --git a/frontend/src/Containers/hooks/useBikeContext.tsx b/frontend/src/Containers/hooks/useBikeContext.tsx
@@ -48,8 +48,8 @@ export function BikeProvider(props: any) {
     const [bikeEnabled, setBikeEnabled] = useState(false);
     const [bikeSpeedValue, setBikeSpeedValue] = useState(50);
     const [volumeValue, setVolumeValue] = useState(50);
-    const [cameraType, setCameraType] = useState<BikeCameraType>('first');
-    const [prevCameraType, setPrevCameraType] = useState<BikeCameraType>('first');
+    const [cameraType, setCameraType] = useState<BikeCameraType>('defaultSFu');
+    const [prevCameraType, setPrevCameraType] = useState<BikeCameraType>('defaultSFu');
 
     const handleCameraTypeChange = (newType: BikeCameraType) => {
         setPrevCameraType(cameraType);

diff --git a/frontend/src/Utils/useEvent.tsx b/frontend/src/Utils/useEvent.tsx
@@ -10,23 +10,27 @@ export default function useEvent() {
         setBulletinLocation
     } = useMyContext();
 
-    const { setBikeEnabled } = useBikeContext();
+    const { setBikeEnabled, setCameraType } = useBikeContext();
     const { locationInfos, setLocation } = useLocation();
     const handleTP = ({ location }: { location: TLocation }) => {
 
         setIsChangeScene({ scene: locationInfos[location].name });
         setBikeEnabled(false);
 
         setTimeout(() => {
+            if (location === 'MainLib')
+                setCameraType('defaultMainLib');
+            else if (location === 'SFu')
+                setCameraType('defaultSFu');
             setLocation(() => location);
             setBikeEnabled(true);
-        }, 2000);
+        }, 1500);
     }
     const handleOpenBulletin = ({ location }) => {
-		setBulletinLocation(location);
-		setBikeEnabled(false);
-		setBulletinModalOpen(true);
-	}
+        setBulletinLocation(location);
+        setBikeEnabled(false);
+        setBulletinModalOpen(true);
+    }
 
     return { handleTP, handleOpenBulletin };
 }