Skip to content

Commit

Permalink
Linting, code validation, format consistency and nitpicking
Browse files Browse the repository at this point in the history
  • Loading branch information
@cw118
cw118 committed Jan 18, 2023
1 parent bd989e5 commit 4e742e2
Show file tree
Hide file tree
Showing 42 changed files with 1,126 additions and 993 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
# Totally Spies: Marianopolis AVIA 2023

**Website of the 2022–23 Marianopolis Robotics Team** for the [CRC Robotics Competition (**AVIA 2023**)](https://robo-crc.ca). The theme is (inspired by) the show ***Totally Spies!***, created in 2001. The site was built with [`Next.js`](https://nextjs.org/) and CSS modules, as well as a little [Tailwind CSS](https://tailwindcss.com/) et [Flowbite React](https://flowbite-react.com/).
**Website of the 2022–23 Marianopolis Robotics Team** for the [CRC Robotics Competition (**AVIA 2023**)](https://robo-crc.ca). The theme is (inspired by) the show ***Totally Spies!***, created in 2001. The site was built with [`Next.js`](https://nextjs.org/) and CSS modules, as well as a little [Tailwind CSS](https://tailwindcss.com/) and [Flowbite React](https://flowbite-react.com/).

**Le site web de l'équipe de robotique Marianopolis** pour la [compétition CRC (**AVIA 2023**)](https://robo-crc.ca/fr). Le thème est (inspiré par) l'émission de télé ***Totally Spies!***, créée en 2001. Le site a été construit en utilisant [`Next.js`](https://nextjs.org) et des modules CSS, ainsi qu'un peu de [Tailwind CSS](https://tailwindcss.com/) et [Flowbite React](https://flowbite-react.com).
5 changes: 2 additions & 3 deletions components/Footer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const Foooter = () => {
const router = useRouter();
const currentRoute = router.pathname;

const fr= currentRoute.includes('/fr') ? true : false;
const fr = currentRoute.includes('/fr') ? true : false;
const spy = currentRoute.includes('/moohp') ? true : false;

return (
Expand All @@ -27,10 +27,9 @@ const Foooter = () => {
year={2023}
/>
</div>

</div>
</Footer>
);
}

export default Foooter;
export default Foooter;
44 changes: 22 additions & 22 deletions components/JerryPopUp.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,30 @@ import Link from 'next/link';
import { Tooltip } from 'flowbite-react';

const JerryPopUp = ({ fr }) => {
const [show, setShow] = useState(true);
const [show, setShow] = useState(true);

const handleShow = () => {
setShow(!show);
}
const handleShow = () => {
setShow(!show);
}

return (
<>
<div className={'jerryPopUp' + (show ? ' activePopUp' : '')} onClick={handleShow}/>
<div className={'popUpTooltip font-spy' + (show ? '' : ' noOpacity invisible')}>
{/* using a div for the text because <Tooltip> renders as a div, and a <div> within a <p> is invalid
return (
<>
<div className={'jerryPopUp' + (show ? ' activePopUp' : '')} onClick={handleShow} />
<div className={'popUpTooltip font-spy' + (show ? '' : ' noOpacity invisible')}>
{/* using a div for the text because <Tooltip> renders as a div, and a <div> within a <p> is invalid
HTML (i.e. <p><div></div></p>), which also causes a hydration error */}
<div>
<Tooltip content={fr ? 'Cliquez sur le texte/lien souligné!' : 'Click on the underlined text/link!'}
style='light' placement='bottom'>{fr ? 'Appel à tous les agents de MOOHP! ' : 'Calling all MOOHP agents! '}
<Link href={fr ? '/fr/moohp' : '/moohp'} className='popUpLink'>
{fr ? 'Réunissez au siège de MOOHP, une nouvelle tâche importante vous attend!' :
'Please convene at MOOHP headquarters, a new important task awaits!'}
</Link>
</Tooltip>
</div>
</div>
</>
);
<div>
<Tooltip content={fr ? 'Cliquez sur le texte/lien souligné!' : 'Click on the underlined text/link!'}
style='light' placement='bottom'>{fr ? 'Appel à tous les agents de MOOHP! ' : 'Calling all MOOHP agents! '}
<Link href={fr ? '/fr/moohp' : '/moohp'} className='popUpLink'>
{fr ? 'Réunissez au siège de MOOHP, une nouvelle tâche importante vous attend!' :
'Please convene at MOOHP headquarters, a new important task awaits!'}
</Link>
</Tooltip>
</div>
</div>
</>
);
}

export default JerryPopUp;
export default JerryPopUp;
3 changes: 3 additions & 0 deletions components/Storage.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import { useState, useEffect } from "react";

/* custom useSessionStorage hook implementation inspired by
a combination of multiple online sources and programming forum answers */

// pre-define methods with fallbacks and error catching
const storage = {
getItem(key, initialValue) {
Expand Down
141 changes: 71 additions & 70 deletions components/agents-students/Agents.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,76 +5,77 @@ import Typewrite from '../Typewrite';
import { useContext } from 'react';
import AppContext from '../AppContext';

export default function Agents({ fr }) {
// "fetch"/use saved agent name
const [agentName, setAgentName] = useContext(AppContext);
const name = (agentName ? ' ' : '') + agentName;

const students = fr ? frM : engM;

return (
<div className={styles.bg}>
<h1 className={styles.title}>
<strong><Typewrite page='agents' /></strong>
</h1>
<p className={styles.intro}>
<strong>Agent{name},</strong>
{fr ? ` une équipe de 18 agents de MOOHP ont été soigneusement sélectionnés pour vous accompagner dans cette mission. Nous vous suggérons de vous familiariser avec eux avant de nous rejoindre au siège de MOOHP.`
: ` a team of 18 MOOHP agents were carefully selected for this mission alongside you. We suggest that you familiarise yourself with them before joining us at MOOHP headquarters.`}
</p>
{students.map((member, index) =>
<FlipImg fr={fr} key={index} src={member.src} name={member.name}
club={member.club} age={member.age}
year={member.year} code={member.code}
height={member.height} specialty={member.specialty}
mbti={member.mbti} gadget={member.gadget} text={member.text}
/>
)}
</div>
)
const FlipImg = (props) => {
return (
<div className={styles.cardContainer}>
<div className={styles.flipCard}>
<div className={styles.flipCardInner}>
<div className={styles.flipCardFront}>
<img src={props.src} alt={props.name} className={styles.img} />
<div className={styles.tapMe}>{props.fr ? 'Appuyez sur moi!' : 'Tap me!'}</div>
</div>
<div className={styles.flipCardBack}>
<h1>{props.name}</h1>
<h2>
{props.fr ? `Agent ${props.year} - MOOHP` : `${props.year} Agent - MOOHP`}
</h2>
<p>
{props.fr ? `Nom de code: ${props.code}` : `Codename: ${props.code}`}
</p>
<p>
{props.fr ? `Âge: ${props.age}` : `Age: ${props.age}`}
</p>
<p>
{props.fr ? `Taille: ${props.height}` : `Height: ${props.height}`}
</p>
<p>
{props.fr ? `Spécialisation: ${props.specialty}` : `Specialty: ${props.specialty}`}
</p>
<p>
{props.fr ? `Département: ${props.club}` : `Department: ${props.club}`}
</p>
<p>MB type: {props.mbti}</p>
<p>Gadget: {props.gadget}</p>
</div>
</div>
</div>
<div className={styles.card}>
<Card className={styles.text}>
<p className={styles.name}>Agent {props.code}</p>
<p>&ldquo;{props.text}&rdquo;</p>
</Card>
</div>
</div>
);
}

function FlipImg(props) {
const Agents = ({ fr }) => {
// "fetch"/use saved agent name
const [agentName, setAgentName] = useContext(AppContext);
const name = (agentName ? ' ' : '') + agentName;

const students = fr ? frM : engM;

return (
<div className={styles.bg}>
<div className={styles.title}>
<Typewrite page='agents' className={styles.title} />
</div>
<p className={styles.intro}>
<strong>Agent{name},</strong>
{fr ? ` une équipe de 18 agents de MOOHP ont été soigneusement sélectionnés pour vous accompagner dans cette mission. Nous vous suggérons de vous familiariser avec eux avant de nous rejoindre au siège de MOOHP.`
: ` a team of 18 MOOHP agents were carefully selected for this mission alongside you. We suggest that you familiarise yourself with them before joining us at MOOHP headquarters.`}
</p>
{students.map((member, index) =>
<FlipImg fr={fr} key={index} src={member.src} name={member.name}
club={member.club} age={member.age}
year={member.year} code={member.code}
height={member.height} specialty={member.specialty}
mbti={member.mbti} gadget={member.gadget} text={member.text}
/>
)}
</div>
);
}

return (
<div className={styles.cardContainer}>
<div className={styles.flipCard}>
<div className={styles.flipCardInner}>
<div className={styles.flipCardFront}>
<img src={props.src} alt={props.name} className={styles.img}/>
<div className={styles.tapMe}>{props.fr ? 'Appuyez sur moi!' : 'Tap me!'}</div>
</div>
<div className={styles.flipCardBack}>
<h1>{props.name}</h1>
<h2>
{props.fr ? `Agent ${props.year} - MOOHP` : `${props.year} Agent - MOOHP`}
</h2>
<p>
{props.fr ? `Nom de code: ${props.code}` : `Codename: ${props.code}`}
</p>
<p>
{props.fr ? `Âge: ${props.age}` : `Age: ${props.age}`}
</p>
<p>
{props.fr ? `Taille: ${props.height}` : `Height: ${props.height}`}
</p>
<p>
{props.fr ? `Spécialisation: ${props.specialty}` : `Specialty: ${props.specialty}`}
</p>
<p>
{props.fr ? `Département: ${props.club}` : `Department: ${props.club}`}
</p>
<p>MB type: {props.mbti}</p>
<p>Gadget: {props.gadget}</p>
</div>
</div>
</div>
<div className={styles.card}>
<Card className={styles.text}>
<p className={styles.name}>Agent {props.code}</p>
<p>&ldquo;{props.text}&rdquo;</p>
</Card>
</div>
</div>
)
}
export default Agents;
89 changes: 45 additions & 44 deletions components/agents-students/Cards.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,55 +2,56 @@ import { Card } from "flowbite-react";
import styles from "../../styles/Card.module.css";
import { engS, frS } from "./variablesMembers.js";

export default function Cards({ fr }) {
const students = fr ? frS : engS;
const Carte = (props) => {
return (
<Card className={styles.card} imgSrc={props.src} horizontal={true}>
<div className={`${styles.text} font-kiwi`}>
<p>
<strong>{props.fr ? 'Nom: ' : 'Name: '}</strong> {`${props.name}`}
</p>
<p>
<strong>{props.fr ? 'Âge: ' : 'Age: '}</strong> {`${props.age}`}
</p>
<p>
<strong>{props.year}</strong>
</p>
<p>
<strong>{props.fr ? 'Comité(s): ' : 'Club(s): '}</strong> {`${props.club}`}
</p>
<p className={styles.quote}>
<i>&ldquo;{props.fun}&rdquo;</i>
</p>
</div>
</Card>
);
}

const Cards = ({ fr }) => {
const students = fr ? frS : engS;

return (
<div>
<h1 className={styles.title}>
{fr? "Étudiants et personnel" : "Student Body and Staff"}
<img className={styles.sticker} src="/backgrounds/sticker.svg" alt={fr ? "Étoile" : "Star"} />
</h1>
<p className={`${styles.clubsDesc} font-kiwi`}>
{fr ? `Tous les étudiants à M.A.R.I. participent à au moins un comité:
return (
<div>
<h1 className={styles.title}>
{fr ? "Étudiants et personnel" : "Student Body and Staff"}
<img className={styles.sticker} src="/backgrounds/sticker.svg" alt={fr ? "Étoile" : "Star"} />
</h1>
<p className={`${styles.clubsDesc} font-kiwi`}>
{fr ? `Tous les étudiants à M.A.R.I. participent à au moins un comité:
le comité Arduino où on construit des robots, le comité de développement web,
le comité de bricolage qui permet de développer des compétences en construction et en design d'intérieur,
le comité de programmation résout des problèmes de programmation, et le comité de film
réalise des vidéos.`
: `M.A.R.I. students all take part in various clubs such as the Arduino club,
réalise des vidéos.`
: `M.A.R.I. students all take part in various clubs such as the Arduino club,
in which they build robots, the programming club, the web development club,
the DIY club that develops construction and interior design skills, and the film club.`}</p>
<div className={styles.div}>
{students.map((member, index) =>
<Carte fr={fr} key={index} src={member.src} name={member.name}
club={member.club} fun={member.fun} age={member.age} year={member.year}/>
)}
</div>
</div>
);
}

function Carte(props) {
return (
<Card className={styles.card} imgSrc={props.src} horizontal={true}>
<div className={`${styles.text} font-kiwi`}>
<p>
<strong>{props.fr ? 'Nom: ' : 'Name: '}</strong> {`${props.name}`}
</p>
<p>
<strong>{props.fr ? 'Âge: ' : 'Age: '}</strong> {`${props.age}`}
</p>
<p>
<strong>{props.year}</strong>
</p>
<p>
<strong>{props.fr ? 'Comité(s): ' : 'Club(s): '}</strong> {`${props.club}`}
</p>
<p className={styles.quote}>
<i>&ldquo;{props.fun}&rdquo;</i>
</p>
</div>
</Card>
);
<div className={styles.div}>
{students.map((member, index) =>
<Carte fr={fr} key={index} src={member.src} name={member.name}
club={member.club} fun={member.fun} age={member.age} year={member.year} />
)}
</div>
</div>
);
}

export default Cards;
6 changes: 3 additions & 3 deletions components/agents-students/variablesMembers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,16 +22,16 @@ export const engS = [

export const frS = [
{name: "Adam Abbas", age: 17, year: "Première année", club:"Arduino et bricolage", fun: "Quand je dors, je ne vois pas.", src:"/members/Adam_S.JPG"},
{name: "Andrea Abou-Haidar", age: 17, year: "Deuxième année", club:"Arduino (exécutif) et bricolage", fun: "Ça devrait fonctionner... Essayons-le!", src:"/members/Andrea_S.JPG"},
{name: "Andrea Abou-Haidar", age: 17, year: "Deuxième année", club:"Arduino (dirigeante) et bricolage", fun: "Ça devrait fonctionner... Essayons-le!", src:"/members/Andrea_S.JPG"},
{name: "Adelina Badea", age: 17, year: "Première année", club:"Arduino", fun: "ADAM!!!", src:"/members/Adelina_S.JPG"},
{name: "Yau Hong Chau", age: 18, year: "Deuxième année", club:"Film et bricolage", fun: "J'ai tellement froid!", src:"/members/Yau_S.JPG"},
{name: "Sofia Del Raso", age: 19, year: "Deuxième année", club:"Arduino et film", fun: "J'ai une spécialité avec les vis.", src:"/members/Sofia_S.JPG"},
{name: "Audrey Dumais", age: 17, year: "Première année", club:"Film, bricolage et développement web", fun: "Je lis un livre français ennuyant.", src:"/members/Audrey_S.JPG"},
{name: "Zoe Hadziaras", age: 18, year: "Première année", club:"Bricolage et film", fun: `Que veut dire "concoise"`, src:"/members/Zoe_S.JPG"},
{name: "Zoe Hadziaras", age: 18, year: "Première année", club:"Bricolage et film", fun: `Que veut dire "concoise"?`, src:"/members/Zoe_S.JPG"},
{name: "Isabella Hensley", age: 18, year: "Deuxième année", club:"Arduino et bricolage", fun: "Donne-moi un marteau, je le réparerai.", src:"/members/Isabella_S.JPG"},
{name: "Victoria Hoang", age: 17, year: "Deuxième année", club:"Développement web, bricolage et film", fun: "Les pigeons ne peuvent pas voler.", src:"/members/Victoria_S.JPG"},
{name: "Vincent Ly", age: 18, year: "Deuxième année", club:"Arduino et programmation", fun: "Je sombre dans la folie.", src:"/members/Vincent_S.JPG"},
{name: "Nehna Patel", age: 18, year: "Deuxième année", club:"Bricolage (exécutif)", fun: "Je ne peux pas éternuer", src:"/members/Nehna_S.jpg"},
{name: "Nehna Patel", age: 18, year: "Deuxième année", club:"Bricolage (dirigeante)", fun: "Je ne peux pas éternuer", src:"/members/Nehna_S.jpg"},
{name: "Ruwa Qatmash", age: 18, year: "Première année", club:"Arduino et bricolage", fun: "WD-40, c'est la vie!", src:"/members/Ruwa_S.JPG"},
{name: "Celia Shi", age: 18, year: "Deuxième année", club:"Développement web, film, bricolage et programmation", fun: "Je ne chanterai plus jamais *et puis elle recommence de chanter*", src:"/members/Celia_S.JPG"},
{name: "Sangeeta Vidyarthi", age: 18, year: "Deuxième année", club:"Arduino et film", fun: "Je ne veux plus faire les génériques de la vidéo.", src:"/members/Sangeeta_S.JPG"},
Expand Down
Loading

0 comments on commit 4e742e2

Please sign in to comment.