Merge pull request #8 from sky-ash/fix-3d-path-buttons

Fix 3D path buttons and sprite

src/components/Navigation.jsx

@@ -1,64 +1,57 @@
-import React, { useState, useEffect } from 'react';
-import { Box, Fab, Button, IconButton, AppBar, Toolbar } from '@mui/material';
-import { useLocation, Link } from 'react-router-dom';
+import React from 'react';
+import { Box, Fab, IconButton, AppBar, Toolbar } from '@mui/material';
+import { Link } from 'react-router-dom';
 import SettingsIcon from '@mui/icons-material/Settings';
 import HomeIcon from '@mui/icons-material/Home';
 import AppsIcon from '@mui/icons-material/Apps';
 
 export default function Navigation() {
-  const [spritePosition, setSpritePosition] = useState({ x: 0, y: 0 });
-
-  const moveSprite = (x, y) => {
-    setSpritePosition({ x, y });
-  };
-
   return (
     <AppBar position="fixed"
-            bgcolor="background.paper"
-            p={2}
             sx={{ top: 'auto', 
                   bottom: 0, 
+                  backgroundColor: 'background.paper', 
+                  boxShadow: 'none' // P388d
                }}>
 
       <Link to="/path">
         <Fab color="primary"
              sx={{ position: 'absolute', zIndex: 1,
                    margin: '0 auto', top: -20,
-                   left: 0, right: 0, }}>
+                   left: 0, right: 0, 
+                   backgroundColor: 'primary.main', // Pbfd8
+                   boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)', // P1e56
+                   borderRadius: '8px' // P1e56
+                 }}>
           <AppsIcon />
         </Fab>
       </Link>
 
       <Toolbar>
 
-        <Link to="/" sx={{alignItems: 'flex-start'}}>
-          <IconButton color="primary">
+        <Link to="/">
+          <IconButton color="primary"
+                      sx={{ backgroundColor: 'primary.main', // Pbfd8
+                            boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)', // P1e56
+                            borderRadius: '8px' // P1e56
+                          }}>
             <HomeIcon />
           </IconButton>
         </Link>
 
         <Box sx={{flexGrow: 1}} />
 
-        <Link to="/settings" sx={{alignItems: 'flex-end'}}>
-          <IconButton color="primary">
+        <Link to="/settings">
+          <IconButton color="primary"
+                      sx={{ backgroundColor: 'primary.main', // Pbfd8
+                            boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)', // P1e56
+                            borderRadius: '8px' // P1e56
+                          }}>
             <SettingsIcon />
           </IconButton>
         </Link>
 
       </Toolbar>
-
-      <Box
-        sx={{
-          position: 'absolute',
-          top: `${spritePosition.y}%`,
-          left: `${spritePosition.x}%`,
-          width: '30px',
-          height: '30px',
-          backgroundColor: 'red',
-          borderRadius: '50%',
-          transition: 'top 0.5s, left 0.5s',
-        }}
-      />
     </AppBar>
   );
 }

src/pages/Path.jsx

@@ -3,13 +3,13 @@ import { Container, Typography, Box, Popover, Button } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
 
 import Navigation from '../components/Navigation';
+import Sprite from '../components/Sprite';
 import parsedLectureContent from '../data/parsedLectureContent.json';
 
 export default function Path() {
   const [unlockedLectures, setUnlockedLectures] = useState(1);
   const [anchorEl, setAnchorEl] = useState(null);
   const [selectedLecture, setSelectedLecture] = useState(null);
-  const [spritePosition, setSpritePosition] = useState({ x: 0, y: 0 });
 
   useEffect(() => {
     const storedUnlockedLectures = JSON.parse(localStorage.getItem('unlockedLectures'));
@@ -39,10 +39,6 @@ export default function Path() {
 
   const open = Boolean(anchorEl);
 
-  const moveSprite = (x, y) => {
-    setSpritePosition({ x, y });
-  };
-
   return (
     <Container className="container" sx={{ textAlign: 'center', justifyContent: 'space-evenly' }}>
       <Typography variant="h4" gutterBottom>
@@ -67,7 +63,6 @@ export default function Path() {
             onClick={(event) => {
               if (index + 1 <= unlockedLectures) {
                 handlePopoverOpen(event, lecture);
-                moveSprite((index + 1) * 20, (index + 1) * 20);
               }
             }}
           >
@@ -77,18 +72,7 @@ export default function Path() {
           </Box>
         ))}
 
-        <Box
-          sx={{
-            position: 'absolute',
-            top: `${spritePosition.y}%`,
-            left: `${spritePosition.x}%`,
-            width: '30px',
-            height: '30px',
-            backgroundColor: 'red',
-            borderRadius: '50%',
-            transition: 'top 0.5s, left 0.5s',
-          }}
-        />
+        <Sprite />
       </Box>
 
       <Popover