Merge pull request #7 from sky-ash/random-path-experiment

Random path experiment
sky-ash · Nov 1, 2024 · 588d2e1 · 588d2e1
2 parents 9fa64cc + a2e1482
commit 588d2e1
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 38 deletions.
diff --git a/src/components/Navigation.jsx b/src/components/Navigation.jsx
@@ -1,32 +1,17 @@
-// src/components/Navigation.jsx
-
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Box, Fab, Button, IconButton, AppBar, Toolbar } from '@mui/material';
 import { useLocation, 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 location = useLocation();
-  if (location.pathname === '/') {
-    return null; // Do not render the footer on the home page
-  }
-  */
+  const [spritePosition, setSpritePosition] = useState({ x: 0, y: 0 });
+
+  const moveSprite = (x, y) => {
+    setSpritePosition({ x, y });
+  };
 
-  /*
-  const StyledFab = styled(Fab)({
-    position: 'absolute',
-    zIndex: 1,
-    top: -30,
-    left: 0,
-    right: 0,
-    margin: '0 auto',
-  });
-  */
-
   return (
     <AppBar position="fixed"
             bgcolor="background.paper"
@@ -62,6 +47,18 @@ export default function Navigation() {
 
       </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>
   );
-}
+}
diff --git a/src/pages/Path.jsx b/src/pages/Path.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Container, Typography, IconButton, Popover, Button } from '@mui/material';
+import { Container, Typography, Box, Popover, Button } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
 
 import Navigation from '../components/Navigation';
@@ -9,6 +9,7 @@ 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'));
@@ -38,23 +39,57 @@ 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>
         Learning Path
       </Typography>
 
-      {parsedLectureContent.lectures.map((lecture, index) => (
-        <div key={index} className="lecture-button">
-          <IconButton
-            color="primary"
-            disabled={index + 1 > unlockedLectures}
-            onClick={(event) => handlePopoverOpen(event, lecture)}
+      <Box sx={{ position: 'relative', height: '400px', width: '100%', border: '1px solid #ccc' }}>
+        {parsedLectureContent.lectures.map((lecture, index) => (
+          <Box
+            key={index}
+            sx={{
+              position: 'absolute',
+              top: `${(index + 1) * 20}%`,
+              left: `${(index + 1) * 20}%`,
+              width: '50px',
+              height: '50px',
+              backgroundColor: index + 1 <= unlockedLectures ? 'blue' : 'grey',
+              transform: 'rotateY(45deg) rotateX(45deg)',
+              boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
+              cursor: index + 1 <= unlockedLectures ? 'pointer' : 'default',
+            }}
+            onClick={(event) => {
+              if (index + 1 <= unlockedLectures) {
+                handlePopoverOpen(event, lecture);
+                moveSprite((index + 1) * 20, (index + 1) * 20);
+              }
+            }}
           >
-            {index + 1}
-          </IconButton>
-        </div>
-      ))}
+            <Typography variant="h6" sx={{ color: 'white', lineHeight: '50px' }}>
+              {index + 1}
+            </Typography>
+          </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',
+          }}
+        />
+      </Box>
 
       <Popover
         open={open}
@@ -87,4 +122,4 @@ export default function Path() {
       <Navigation />
     </Container>
   );
-}
+}
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -28,9 +28,29 @@ body {
   }
 }
 
-/*
-.bottom-right-button {
+/* Styles for 3D elements */
+.lecture-box {
+  transform: rotateY(45deg) rotateX(45deg);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+/* Styles for sprite animation */
+@keyframes moveSprite {
+  0% {
+    top: 0;
+    left: 0;
+  }
+  100% {
+    top: 100%;
+    left: 100%;
+  }
+}
+
+.sprite {
   position: absolute;
-  top: 10vh; 
+  width: 30px;
+  height: 30px;
+  background-color: red;
+  border-radius: 50%;
+  animation: moveSprite 0.5s linear;
 }
-  */