Skip to content

Commit

Permalink
Merge pull request #22 from sky-ash/viewport-grid-container
Browse files Browse the repository at this point in the history 
Viewport grid container
  • Loading branch information
@sky-ash
sky-ash authored Nov 4, 2024
2 parents cedba0b + e7cc693 commit 1e79964
Show file tree
Hide file tree
Showing 8 changed files with 133 additions and 104 deletions.
34 changes: 15 additions & 19 deletions src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { ThemeProvider, CssBaseline, Container, Box } from '@mui/material';
import { ThemeProvider, CssBaseline, Box, Container } from '@mui/material';

import Start from './pages/Start';
import Path from './pages/Path';
Expand All @@ -29,26 +29,22 @@ export default function App() {
return (
<ThemeProvider theme={darkMode ? darkTheme : lightTheme}>
<CssBaseline />
<Container className="container"
maxWidth="sm"
height="100vh"
sx={{ textAlign: 'center',
alignItems: 'center',
}}>
<Router basename="/heatpath">
<Container className="container"
maxWidth="sm"
sx={{ textAlign: 'center',
justifyContent: 'flex-start'
}}>
<Box sx={{ position: 'relative',
height: '100%',
width: '100%' }}>
<Routes>
<Route path="/" element={<Start />} />
<Route path="/path" element={<Path />} />
<Route path="/lecture/:id" element={<Lecture />} />
<Route path="/settings" element={<Settings darkMode={darkMode} setDarkMode={setDarkMode} />} />
<Route path="/sources" element={<Sources />} />
</Routes>
</Box>

</Container>
<Routes>
<Route path="/" element={<Start />} />
<Route path="/path" element={<Path />} />
<Route path="/lecture/:id" element={<Lecture />} />
<Route path="/settings" element={<Settings darkMode={darkMode} setDarkMode={setDarkMode} />} />
<Route path="/sources" element={<Sources />} />
</Routes>
</Router>
</Container>
</ThemeProvider>
);
}
35 changes: 18 additions & 17 deletions src/components/Card.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,13 +79,9 @@ export default function Card({ card, nextCard, prevCard, onCardCompletion, curre
const allLectureWords = [...new Set(parsedLectureContent.lectures.flatMap(lecture => lecture.cards.flatMap(card => card.words.map(word => word.toLowerCase()))))].sort();

return (
<Box className="card" p={2} boxShadow={3} borderRadius={2} bgcolor="background.paper">
{/* Card title */}
<Typography variant="h6" gutterBottom>
{card.title}
</Typography>
<Box className="card" px={4} py={2} my={2}
boxShadow={3} borderRadius={2} bgcolor="background.paper">

{/* Card sentence with input fields */}
<Typography variant="body1" align="center" component="div" style={{ marginBottom: '1rem', lineHeight: 2.5 }}>
{card.sentence.map((part, index) => {
const isInputField = part === '___';
Expand Down Expand Up @@ -124,27 +120,32 @@ export default function Card({ card, nextCard, prevCard, onCardCompletion, curre
);
})}
</Typography>

<Fab color="primary"
onClick={handleReturnToPath}
sx={{ position: 'fixed', zIndex: 'tooltip',
top: 32, right: 32, }}>
<TurnLeft />
</Fab>

<AppBar position="fixed"
bgcolor="background.paper"
p={2}
sx={{ top: 'auto',
bottom: 0
}}>
}}>

<Fab color="primary"
onClick={handleReturnToPath}
sx={{ position: 'fixed', zIndex: 'tooltip',
top: 32, right: 32, }}>
<TurnLeft />
</Fab>

<Toolbar>
<IconButton color="primary" onClick={prevCard}
<IconButton sx={{ml: 2}}
color="primary" onClick={prevCard}
disabled={currentCardIndex === 0 && !unlockedCards.includes(totalCards - 1)}>
<ArrowBackIosIcon />
</IconButton>

<Box sx={{flexGrow: 1}} />
<IconButton color="primary" onClick={nextCard} disabled={!allCorrect}>

<IconButton sx={{mr: 2}}
color="primary" onClick={nextCard}
disabled={!allCorrect}>
<ArrowForwardIosIcon />
</IconButton>
</Toolbar>
Expand Down
75 changes: 41 additions & 34 deletions src/components/Quiz.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,22 +79,36 @@ export default function Quiz({ quiz, lectureId, handleReviewCards }) {
<Box>
{!showResult ? (
<>
<Box display="flex" alignItems="center" textAlign="left" >
<Box p="16px" top="16px" position="relative"> {/* left={0} position="fixed"> */}
<Box mb={2}
sx={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
textAlign: 'left',
alignItems: 'center',
}}>
<Box ml={2}> {/* left={0} position="fixed"> */}
<img src={`${import.meta.env.BASE_URL}imgs/handup.png`} alt="Heat Path Mascot" style={{ maxWidth: '100px', height: 'auto' }} />
</Box>

{/* Display the current question */}
<Typography variant="h6" gutterBottom mt={8} mb={4}>
<Typography variant="h6" mx={2}>
{quiz[currentQuestion].question}
</Typography>
</Box>
{/* Display the options for the current question */}
<Box textAlign="left">

<Box mx={4}
sx={{ height: '100%',
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
textAlign: 'left',
alignItems: 'center',
}}>
<FormControl component="fieldset">
<RadioGroup value={selectedAnswers[currentQuestion] || ''} onChange={handleAnswerSelect}>
{quiz[currentQuestion].options.map((option, i) => (
<FormControlLabel
<FormControlLabel
key={i}
value={option}
control={<Radio />}
Expand Down Expand Up @@ -122,16 +136,24 @@ export default function Quiz({ quiz, lectureId, handleReviewCards }) {
</Fab>
</>
) : (
<Box>
{/* Display the score */}
<Typography variant="h6" gutterBottom mt={2}>
Your Score: {score}%
</Typography>

<>

<Box mx={6}
sx={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
textAlign: 'left',
alignItems: 'center',
}}>
<img src={`${import.meta.env.BASE_URL}imgs/${score >= 80 ? 'success' : 'failure'}.png`} alt="Heat Path Mascot" style={{ maxWidth: '75px', height: 'auto' }} />
<Typography variant="h7" color={score >= 80 ? "primary" : "error"} mx={2}>
{score >= 80 ? 'Congratulations! You passed the quiz.' : "Unfortunately, you didn't pass. Please try again."}
</Typography>
</Box>

{/* Display the questions and selected answers with correctness icons */}
<Box mt={4} mb={2} className="card" p={2} boxShadow={3} borderRadius={2} bgcolor="background.paper">
<Box my={2} mx={1} className="card" p={2} boxShadow={3} borderRadius={2} bgcolor="background.paper">
{quiz.map((q, index) => (
<Box key={index} display="flex" alignItems="center" textAlign="left" sx={{marginBottom: '1rem', marginTop: '1rem' }}>
{selectedAnswers[index] === q.correctAnswer ? (
Expand All @@ -146,26 +168,11 @@ export default function Quiz({ quiz, lectureId, handleReviewCards }) {
))}
</Box>

{/* Display pass/fail message based on the score */}
{score >= 80 ? (
<Box display="flex" alignItems="center" textAlign="left" width="80%" margin="auto">
<Box p="16px" position="relative">
<img src={`${import.meta.env.BASE_URL}imgs/success.png`} alt="Heat Path Mascot" style={{ maxWidth: '75px', height: 'auto' }} />
</Box>
<Typography variant="h7" color="primary" gutterBottom>
Congratulations! You passed the quiz.
</Typography>
</Box>
) : (
<Box display="flex" alignItems="center" textAlign="left" width="80%" margin="auto">
<Box p="16px" position="relative">
<img src={`${import.meta.env.BASE_URL}imgs/failure.png`} alt="Heat Path Mascot" style={{ maxWidth: '75px', height: 'auto' }} />
</Box>
<Typography variant="h7" color="error" gutterBottom>
Unfortunately, you didn't pass. Please try again.
</Typography>
</Box>
)}
<Typography variant="h6">
Your Score: {score}%
</Typography>



{/* Button to return to the path or review cards based on the score */}
{score >= 80 ? (
Expand Down Expand Up @@ -203,7 +210,7 @@ export default function Quiz({ quiz, lectureId, handleReviewCards }) {
</Typography>
</Fab>
)}
</Box>
</>
)}
</Box>
);
Expand Down
4 changes: 2 additions & 2 deletions src/pages/Lecture.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,14 +113,14 @@ export default function Lecture() {

return (
<>
<Typography variant="h3" gutterBottom mt={8} mb={8}>
<Typography variant="h3" my={8}>
{lecture.title.split(':')[0]}
</Typography>

{!showQuiz ? (
<Box>
{/* Progress bar */}
<LinearProgress variant="determinate" value={progress} sx={{ marginBottom: '16px' }} />
<LinearProgress variant="determinate" value={progress} />
{/* Card component */}
<Card
card={lecture.cards[currentCardIndex]}
Expand Down
20 changes: 15 additions & 5 deletions src/pages/Path.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,15 +51,20 @@ export default function Path() {

return (
<>
<Typography variant="h3" gutterBottom mt={8} mb={8}>
<Typography variant="h3" my={8}>
Learning Path
</Typography>

<Box display="flex" justifyContent="center" position="relative" height="100vh">
<Box mb={12}
sx={{ height: '100%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
}}>
<Box display="flex" justifyContent="center" position="relative" height="100%">
{parsedLectureContent.lectures.map((lecture, index) => {
const centerAllVertically = [96, 32, -32, -96][index] || 0;
const leftShift = [-48, 32, -16, 64][index] + centerAllVertically;
const downShift = [0, 15, 30, 45][index] || 0;

return (
<Button
Expand All @@ -70,7 +75,7 @@ export default function Path() {
sx={{
width: '64px',
height: '64px',
top: `${downShift}%`,
top: `${(index) * 25}%`,
left: `${leftShift}px`,
transform: 'perspective(800px) rotateY(15deg) rotateX(40deg) rotateZ(-15deg)',
}}
Expand All @@ -87,21 +92,25 @@ export default function Path() {
);
})}
</Box>
</Box>

<SwipeableDrawer
open={open}
anchor="bottom"
onClose={handleDrawerClose}
>
<Box textAlign="center"
height="37vh"
height="66vh"
p={4}>

<Typography variant="h6" gutterBottom>
{selectedLecture?.title.split(':')[0]}:
</Typography>
<Typography variant="h5" gutterBottom>
{selectedLecture?.title.split(':')[1]}
</Typography>


<Button
variant="contained"
color="primary"
Expand All @@ -117,6 +126,7 @@ export default function Path() {
</Button>
</Box>
</SwipeableDrawer>

<Navigation />
</>
);
Expand Down
22 changes: 17 additions & 5 deletions src/pages/Settings.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,21 +19,33 @@ export default function Settings({ darkMode, setDarkMode }) {

return (
<>
<Typography variant="h3" gutterBottom mt={8} mb={8}>
<Typography variant="h3" my={8}>
Settings
</Typography>

<Box display="flex" alignItems="center" mb={2}>
<Typography variant="body1" component="p" style={{ marginRight: '1rem' }}>
<Box mb={12} px={4}
sx={{ height: '100%',
width: '100%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-start',
alignItems: 'left',
}}>
<Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center',
justifyContent: 'space-between'
}}>
<Typography variant="body1">
Dark Mode
</Typography>
<Switch checked={darkMode} onChange={() => setDarkMode(!darkMode)} color="primary" />
</Box>

{/* Button to delete cached data */}
<Box sx={{ flexGrow: 1 }} />

<Button variant="contained" color="secondary" onClick={handleDeleteCachedData}>
Delete Cached Data
</Button>
</Box>

<Navigation />
<Fab color="primary"
onClick={() => navigate('/sources')}
Expand Down
15 changes: 13 additions & 2 deletions src/pages/Sources.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import React from 'react';
import Navigation from '../components/Navigation';

// Material-UI components
import { Typography, List, ListItem, ListItemText, Fab, Link } from '@mui/material';
import { Typography, List, ListItem, ListItemText, Fab, Link, Box } from '@mui/material';
import SettingsIcon from '@mui/icons-material/Settings';
import { useNavigate } from 'react-router-dom';

Expand All @@ -22,10 +22,18 @@ export default function Sources() {
return (
<>
{/* Page title */}
<Typography variant="h3" gutterBottom mt={8} mb={8}>
<Typography variant="h3" my={8}>
Sources
</Typography>

<Box mb={12} px={2}
sx={{ height: '100%',
width: '100%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-start',
alignItems: 'left',
}}>
{/* List of sources */}
<List>
{sources.map((source, index) => (
Expand All @@ -34,6 +42,9 @@ export default function Sources() {
</ListItem>
))}
</List>
</Box>

{/* Navigation component */}
<Navigation />
<Fab color="primary"
onClick={() => navigate('/settings')}
Expand Down
Loading

0 comments on commit 1e79964

Please sign in to comment.