3631 lines
93 KiB
Plaintext
3631 lines
93 KiB
Plaintext
================================================
|
|
FILE: components/Back/Back.module.scss
|
|
================================================
|
|
.wrapper {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
overflow: auto;
|
|
width: 100%;
|
|
display: flex;
|
|
height: 100%;
|
|
backface-visibility: hidden;
|
|
background-color: var(--clr-background-400);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
transform: rotateX(180deg);
|
|
border: 3px solid var(--clr-accent-peachy);
|
|
transition: border-color 250ms ease;
|
|
.textWrapper {
|
|
margin: auto;
|
|
.answer {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 4rem;
|
|
text-align: center;
|
|
&__label {
|
|
font-size: 0.85rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
font-weight: 500;
|
|
color: var(--clr-text-muted);
|
|
margin-bottom: 0;
|
|
}
|
|
&__text {
|
|
font-size: 2.25rem;
|
|
font-weight: 500;
|
|
margin: 0;
|
|
padding: 0 2rem;
|
|
color: var(--clr-accent-peachy);
|
|
}
|
|
}
|
|
}
|
|
&--mobile {
|
|
.answer__text {
|
|
font-size: 1.5rem !important;
|
|
}
|
|
}
|
|
&--correct {
|
|
border-color: var(--clr-accent-green);
|
|
}
|
|
&--wrong {
|
|
border-color: var(--clr-accent-red);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/Back/Back.tsx
|
|
================================================
|
|
import ExpandingBlob from "@components/ExpandingBlob";
|
|
import Watermark from "@components/Watermark";
|
|
import classNames from "classnames";
|
|
import styles from "./Back.module.scss";
|
|
|
|
interface Props {
|
|
data: string;
|
|
isMobile: boolean | undefined;
|
|
dataClass: ClassString;
|
|
answeredRight: boolean | null;
|
|
forwardAnswer: () => void;
|
|
}
|
|
|
|
const Back = ({ data, isMobile, answeredRight, forwardAnswer }: Props) => {
|
|
const wrapperClasses = classNames(styles.wrapper, {
|
|
[`${styles["wrapper--mobile"]}`]: isMobile,
|
|
[`${styles["wrapper--correct"]}`]: answeredRight === true,
|
|
[`${styles["wrapper--wrong"]}`]: answeredRight === false,
|
|
});
|
|
return (
|
|
<div className={wrapperClasses}>
|
|
{answeredRight != null && (
|
|
<ExpandingBlob type={answeredRight === true ? "correct" : "wrong"} onAnimationComplete={forwardAnswer} />
|
|
)}
|
|
<Watermark size="lg" text="answer" />
|
|
<div className={styles.textWrapper}>
|
|
<div className={styles.answer__text}>{data}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Back;
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/Back/index.tsx
|
|
================================================
|
|
import Back from "./Back";
|
|
|
|
export default Back;
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/EndCard/EndCard.module.scss
|
|
================================================
|
|
.wrapper {
|
|
width: 100%;
|
|
max-width: 750px;
|
|
margin: 2rem;
|
|
border-radius: 4px;
|
|
z-index: 2;
|
|
padding: 0 1rem;
|
|
.buttons {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
.buttons_grid {
|
|
display: grid;
|
|
gap: 1rem;
|
|
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
|
}
|
|
h5 {
|
|
font-size: 1.25rem;
|
|
flex-basis: 100%;
|
|
color: var(--clr-accent-blue);
|
|
margin: 0;
|
|
position: relative;
|
|
isolation: isolate;
|
|
span {
|
|
z-index: 1;
|
|
padding-right: 0.5em;
|
|
background-color: var(--clr-background-300);
|
|
position: relative;
|
|
}
|
|
&::after {
|
|
content: "";
|
|
width: 100%;
|
|
z-index: -1;
|
|
height: 2px;
|
|
top: 50%;
|
|
left: 0;
|
|
position: absolute;
|
|
background-color: currentColor;
|
|
}
|
|
}
|
|
.button {
|
|
--accent: var(--clr-accent-blue);
|
|
background-color: transparent;
|
|
color: var(--accent);
|
|
cursor: pointer;
|
|
border: 2px solid var(--accent);
|
|
display: inline-flex;
|
|
padding: 0.35rem 0.75rem;
|
|
font-weight: 700;
|
|
font-size: 14px;
|
|
align-items: center;
|
|
border-radius: 4px;
|
|
justify-content: center;
|
|
transition: background-color 200ms ease, color 200ms ease;
|
|
svg {
|
|
margin-right: 0.5rem;
|
|
}
|
|
&.orange {
|
|
--accent: var(--clr-accent-peachy);
|
|
}
|
|
&.green {
|
|
--accent: var(--clr-accent-green);
|
|
}
|
|
&.purple {
|
|
--accent: var(--clr-accent-pink);
|
|
}
|
|
&:focus-visible {
|
|
outline: 2px dashed var(--accent);
|
|
outline-offset: 0.5rem;
|
|
background-color: var(--accent);
|
|
color: var(--clr-background-200);
|
|
}
|
|
&:hover {
|
|
background-color: var(--accent);
|
|
color: var(--clr-background-200);
|
|
}
|
|
}
|
|
}
|
|
&__title {
|
|
margin: 0 0 1rem 0;
|
|
font-size: 2.25rem;
|
|
font-weight: 700;
|
|
line-height: 120%;
|
|
span {
|
|
color: var(--clr-accent-green);
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (min-width: 600px) {
|
|
.wrapper {
|
|
width: calc(100% - 1rem);
|
|
&__title {
|
|
font-size: 2.75rem;
|
|
}
|
|
.buttons h5 span {
|
|
background-color: var(--clr-background-300);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/EndCard/EndCard.tsx
|
|
================================================
|
|
import classNames from "classnames";
|
|
import { MessageQuestion, ArrowRotateRight, Back } from "iconsax-react";
|
|
import { motion, AnimatePresence, LayoutGroup } from "framer-motion";
|
|
import styles from "./EndCard.module.scss";
|
|
import { FC, useState } from "react";
|
|
import EndCardReview from "@components/EndCardReview";
|
|
import getStreakEmojis from "@utils/getStreakEmojis";
|
|
import Link from "next/link";
|
|
|
|
interface Props {
|
|
onRestart: (newData: Question[] | null) => void;
|
|
mode: "spelling" | "cards";
|
|
data: CardsReviewData | SpellingReviewData;
|
|
amount: number;
|
|
dataClass: ClassString;
|
|
streak: number;
|
|
}
|
|
|
|
const isSpellingData = (input: Question[] | SpellingData[]): input is SpellingData[] => {
|
|
if ("data" in input[0]) {
|
|
return true;
|
|
}
|
|
return false;
|
|
};
|
|
|
|
const EndCard: FC<Props> = ({ amount, data, onRestart, mode, dataClass, streak }) => {
|
|
const [isReviewOpened, setIsReviewOpened] = useState(false);
|
|
const score = (((amount - data.incorrect.length) / amount) * 100).toFixed(1);
|
|
const handleRestart = (newData: Question[] | SpellingData[] | null = null) => {
|
|
setIsReviewOpened(false);
|
|
if (newData && isSpellingData(newData)) {
|
|
onRestart(newData.map((item) => item.data));
|
|
} else {
|
|
onRestart(newData);
|
|
}
|
|
};
|
|
const handleRestartIncorrect = () => {
|
|
handleRestart(data.incorrect);
|
|
};
|
|
const handleRestartAll = () => {
|
|
handleRestart();
|
|
};
|
|
return (
|
|
<LayoutGroup>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 50 }}
|
|
animate={{ opacity: 1, height: "100%", y: 0 }}
|
|
exit={{ opacity: 0 }}
|
|
key="endcard"
|
|
layout="position"
|
|
className={styles.wrapper}
|
|
>
|
|
<h1 className={styles.wrapper__title}>
|
|
Your end score was <span>{score}%</span>
|
|
</h1>
|
|
{streak >= 5 && (
|
|
<h3>
|
|
Highest streak: {streak}
|
|
{getStreakEmojis(streak)}
|
|
</h3>
|
|
)}
|
|
<section className={styles.buttons}>
|
|
<h5>
|
|
<span>What's next?</span>
|
|
</h5>
|
|
<div className={styles.buttons_grid}>
|
|
<Link href="/" className={classNames(styles.button)}>
|
|
<>
|
|
<Back color="currentColor" />
|
|
Go Back
|
|
</>
|
|
</Link>
|
|
<button className={classNames(styles.button, styles.orange)} onClick={() => setIsReviewOpened((s) => !s)}>
|
|
<MessageQuestion color="currentColor" />
|
|
Review
|
|
</button>
|
|
<button className={classNames(styles.button, styles.green)} onClick={handleRestartAll}>
|
|
<ArrowRotateRight color="currentColor" />
|
|
Restart
|
|
</button>
|
|
{data.incorrect.length > 0 && (
|
|
<button className={classNames(styles.button, styles.purple)} onClick={handleRestartIncorrect}>
|
|
<ArrowRotateRight color="currentColor" />
|
|
Incorrect
|
|
</button>
|
|
)}
|
|
</div>
|
|
</section>
|
|
<AnimatePresence>
|
|
{isReviewOpened && <EndCardReview data={data} mode={mode} dataClass={dataClass} />}
|
|
</AnimatePresence>
|
|
</motion.div>
|
|
</LayoutGroup>
|
|
);
|
|
};
|
|
|
|
export default EndCard;
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/EndCard/index.tsx
|
|
================================================
|
|
import EndCard from "./EndCard";
|
|
|
|
export default EndCard;
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/EndCardReview/EndCardReview.module.scss
|
|
================================================
|
|
.showdown {
|
|
margin-top: 1.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2rem;
|
|
.title__correct,
|
|
.title__incorrect {
|
|
font-size: 1.25rem;
|
|
}
|
|
.title__incorrect {
|
|
color: var(--clr-accent-red);
|
|
}
|
|
.title__correct {
|
|
color: var(--clr-accent-green);
|
|
}
|
|
}
|
|
.list {
|
|
display: grid;
|
|
row-gap: 1rem;
|
|
grid-template-columns: 1fr;
|
|
&.correct {
|
|
--clr-accent: var(--clr-accent-green);
|
|
}
|
|
&.incorrect {
|
|
--clr-accent: var(--clr-accent-red);
|
|
}
|
|
&__item {
|
|
padding: 1rem;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
border-radius: 4px;
|
|
background-color: var(--clr-background-400);
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: auto 40px auto;
|
|
column-gap: 0.5rem;
|
|
.typed {
|
|
color: var(--clr-text-muted);
|
|
display: block;
|
|
}
|
|
.small_question,
|
|
.typed {
|
|
margin-bottom: 0.5em;
|
|
color: var(--clr-text-muted);
|
|
display: block;
|
|
text-align: center;
|
|
}
|
|
.question,
|
|
.answer {
|
|
text-align: center;
|
|
font-size: 1.125rem;
|
|
}
|
|
.answer {
|
|
font-weight: 700;
|
|
color: var(--clr-accent);
|
|
}
|
|
.question {
|
|
font-weight: 500;
|
|
.spelling_question {
|
|
small {
|
|
font-size: 0.75em;
|
|
color: var(--clr-accent);
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
}
|
|
.spacer {
|
|
display: none;
|
|
}
|
|
svg {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
place-self: center;
|
|
margin: 0.25rem;
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
@media (min-width: 600px) {
|
|
.showdown {
|
|
.title__correct,
|
|
.title__incorrect {
|
|
font-size: 1.5rem;
|
|
}
|
|
}
|
|
.list {
|
|
grid-template-columns: 1fr;
|
|
&__item {
|
|
grid-template-columns: 1fr 20px 1fr;
|
|
grid-template-rows: auto;
|
|
column-gap: 1rem;
|
|
background-color: var(--clr-background-400);
|
|
.spacer {
|
|
display: block;
|
|
height: 100%;
|
|
width: 3px;
|
|
border-radius: 3px;
|
|
background-color: var(--clr-background-500);
|
|
place-self: center;
|
|
}
|
|
svg {
|
|
display: none;
|
|
}
|
|
.small_question {
|
|
text-align: left;
|
|
}
|
|
.typed {
|
|
text-align: right;
|
|
}
|
|
.question,
|
|
.answer {
|
|
text-align: left;
|
|
color: var(--clr-text);
|
|
}
|
|
.question {
|
|
font-weight: 500;
|
|
}
|
|
.answer {
|
|
color: var(--clr-accent);
|
|
font-weight: 700;
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/EndCardReview/EndCardReview.tsx
|
|
================================================
|
|
import classNames from "classnames";
|
|
import { motion } from "framer-motion";
|
|
import { ArrowCircleDown2 } from "iconsax-react";
|
|
import { FC } from "react";
|
|
import styles from "./EndCardReview.module.scss";
|
|
|
|
interface Props {
|
|
mode: "spelling" | "cards";
|
|
data: CardsReviewData | SpellingReviewData;
|
|
dataClass: ClassString;
|
|
}
|
|
|
|
const EndCardList: FC<{
|
|
dataClass: ClassString;
|
|
data: Question | SpellingData;
|
|
mode: "spelling" | "cards";
|
|
}> = ({ data, mode }) => {
|
|
if (mode === "cards") {
|
|
const { answer, question } = data as Question;
|
|
return (
|
|
<div className={styles.list__item}>
|
|
<div className={styles.question}>{question}</div>
|
|
<div className={styles.spacer}></div>
|
|
<ArrowCircleDown2 color="currentColor" size="32" variant="Bold" />
|
|
<div className={styles.answer}>{answer}</div>
|
|
</div>
|
|
);
|
|
}
|
|
const {
|
|
data: { answer, question },
|
|
expected,
|
|
input,
|
|
} = data as SpellingData;
|
|
return (
|
|
<div className={styles.list__item}>
|
|
<div className={styles.question}>
|
|
<small className={styles.small_question}>{question}</small>
|
|
<div className={styles.spelling_question}>
|
|
{expected !== answer ? (
|
|
<span>
|
|
{expected} <small>( {answer} )</small>
|
|
</span>
|
|
) : (
|
|
expected
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className={styles.spacer}></div>
|
|
<ArrowCircleDown2 color="currentColor" size="32" variant="Bold" />
|
|
<div>
|
|
<small className={styles.typed}>You typed</small>
|
|
<div className={styles.answer}>{input}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const EndCardReview: FC<Props> = ({ mode, data, dataClass }) => {
|
|
const { incorrect, correct } = data;
|
|
return (
|
|
<motion.section initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className={styles.showdown}>
|
|
{incorrect.length > 0 && (
|
|
<div>
|
|
<h2 className={styles.title__incorrect}>Incorrect Answers ({incorrect.length})</h2>
|
|
<div className={classNames(styles.list, styles.incorrect)}>
|
|
{incorrect.map((answerData, answerIdx) => {
|
|
return (
|
|
<EndCardList
|
|
data={answerData}
|
|
dataClass={dataClass}
|
|
mode={mode}
|
|
key={`${JSON.stringify(answerData)}_${answerIdx}`}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
{correct.length > 0 && (
|
|
<div>
|
|
<h2 className={styles.title__correct}>Correct Answers ({correct.length})</h2>
|
|
<div className={classNames(styles.list, styles.correct)}>
|
|
{correct.map((answerData, answerIdx) => {
|
|
return (
|
|
<EndCardList
|
|
data={answerData}
|
|
dataClass={dataClass}
|
|
mode={mode}
|
|
key={`${JSON.stringify(answerData)}_${answerIdx}`}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</motion.section>
|
|
);
|
|
};
|
|
|
|
export default EndCardReview;
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/EndCardReview/index.tsx
|
|
================================================
|
|
import EndCardReview from "./EndCardReview";
|
|
|
|
export default EndCardReview;
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/Entry/Entry.module.scss
|
|
================================================
|
|
.container {
|
|
display: flex;
|
|
border: none;
|
|
font-family: inherit;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
border-radius: 4px;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
|
background-color: var(--clr-background-400);
|
|
overflow: hidden;
|
|
padding: 1.5rem;
|
|
cursor: pointer;
|
|
outline-color: transparent;
|
|
position: relative;
|
|
|
|
.wrapper {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.indicator {
|
|
width: 1.5rem;
|
|
height: 5rem;
|
|
border-radius: 999px;
|
|
background-color: var(--clr-background-500);
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-top: 0.25rem;
|
|
|
|
svg {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
}
|
|
}
|
|
|
|
.label {
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
margin-bottom: 0.5em;
|
|
color: var(--clr-card-accent);
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
&__warning {
|
|
color: var(--clr-accent-yellow);
|
|
}
|
|
}
|
|
|
|
.dupWarningIcon {
|
|
position: absolute;
|
|
top: -0.5rem;
|
|
right: -0.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--clr-accent-yellow);
|
|
}
|
|
|
|
.buttons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 1rem;
|
|
gap: 1.5rem;
|
|
a {
|
|
flex-basis: 100%;
|
|
display: flex;
|
|
padding: 0.75rem 2rem;
|
|
border-radius: 6px;
|
|
font-size: 1rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
gap: 0.5em;
|
|
font-weight: 700;
|
|
background-color: var(--clr-background-500);
|
|
color: var(--clr-card-accent);
|
|
svg {
|
|
width: 1.5rem;
|
|
}
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
opacity: 0.2;
|
|
transition: opacity 250ms ease;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
|
|
}
|
|
&:hover,
|
|
&:focus {
|
|
outline: none;
|
|
&::before {
|
|
opacity: 0.5;
|
|
}
|
|
&::after {
|
|
transform: scale(1) !important;
|
|
opacity: 1 !important;
|
|
}
|
|
}
|
|
&:focus-visible {
|
|
outline: 2px dashed var(--clr-card-accent);
|
|
outline-offset: 0.5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bang {
|
|
margin: 0;
|
|
color: var(--clr-text);
|
|
letter-spacing: 4px;
|
|
text-align: left;
|
|
font-size: 0.65rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.title {
|
|
display: -webkit-box;
|
|
margin: 0;
|
|
font-size: 1.375rem;
|
|
color: var(--clr-card-accent);
|
|
font-weight: 700;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
text-align: left;
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
.tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
gap: 0.5rem;
|
|
.tag {
|
|
position: relative;
|
|
color: var(--clr-card-accent);
|
|
font-size: 0.7rem;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
padding: 0.375em 1.125em;
|
|
font-weight: 500;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 450px) {
|
|
.container {
|
|
&:focus-visible {
|
|
outline: 2px dashed var(--clr-card-accent);
|
|
outline-offset: 0.5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/Entry/Entry.tsx
|
|
================================================
|
|
import getAccentForClass from "@utils/getAccentForClass";
|
|
import getHumanReadableClass from "@utils/getHumanReadableClass";
|
|
import groupBy from "@utils/groupBy";
|
|
import { AnimatePresence, motion } from "framer-motion";
|
|
import { Category, Danger, Edit, NoteText } from "iconsax-react";
|
|
import Link from "next/link";
|
|
import { FC, PropsWithChildren, useEffect, useRef, useState } from "react";
|
|
import { useHover } from "usehooks-ts";
|
|
import styles from "./Entry.module.scss";
|
|
|
|
interface Props {
|
|
data: Card;
|
|
animationDelay: number;
|
|
}
|
|
|
|
const Tag: FC<PropsWithChildren> = ({ children }) => {
|
|
return <div className={styles.tag}>{children}</div>;
|
|
};
|
|
|
|
const Entry = ({
|
|
data: {
|
|
attributes: { title, slug, questions, class: classString },
|
|
},
|
|
animationDelay,
|
|
}: Props) => {
|
|
const [dupsData, setDupsData] = useState<Question[][]>();
|
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
const containerRef = useRef<HTMLButtonElement>(null);
|
|
const isHovered = useHover(containerRef);
|
|
|
|
useEffect(() => {
|
|
if (!questions) return;
|
|
const grouped = groupBy(questions, (q) => q.question);
|
|
const values = Object.values(grouped);
|
|
const dups = values.filter((v) => v.length > 1);
|
|
if (dups.length > 0) setDupsData(dups);
|
|
}, [questions]);
|
|
|
|
return (
|
|
<motion.button
|
|
layout
|
|
key={slug}
|
|
ref={containerRef}
|
|
initial={{ y: -25, opacity: 0 }}
|
|
animate={{ y: 0, opacity: 1, transition: { delay: animationDelay } }}
|
|
exit={{ opacity: 0 }}
|
|
className={styles.container}
|
|
style={{ "--clr-card-accent": getAccentForClass(classString) } as any}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setIsExpanded((isExpanded) => !isExpanded);
|
|
}}
|
|
onBlur={(e) => {
|
|
if (!containerRef.current?.contains(e.relatedTarget)) {
|
|
setIsExpanded(false);
|
|
}
|
|
}}
|
|
>
|
|
<motion.div layout key="content" className={styles.wrapper}>
|
|
<div>
|
|
<motion.p layout className={styles.bang}>
|
|
TOPIC
|
|
</motion.p>
|
|
<motion.h1 layout className={styles.title}>
|
|
{title}
|
|
</motion.h1>
|
|
</div>
|
|
<motion.div layout className={styles.tags}>
|
|
<Tag>{getHumanReadableClass(classString)}</Tag>
|
|
<Tag>
|
|
{questions?.length} {questions.length > 1 ? "cards" : "card"}
|
|
{dupsData && (
|
|
<motion.span layout key="dups" className={styles.dupWarningIcon}>
|
|
<Danger size="1rem" color="currentColor" variant="Bold" />
|
|
</motion.span>
|
|
)}
|
|
</Tag>
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
layout
|
|
initial={{ left: "calc(50% - 0.75rem)", bottom: 0, y: 90, position: "absolute" }}
|
|
animate={{ y: isHovered || isExpanded ? 50 : 90 }}
|
|
key="indicator"
|
|
className={styles.indicator}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
strokeWidth={3}
|
|
stroke="var(--clr-card-accent)"
|
|
>
|
|
<motion.path
|
|
initial={{ rotate: 0 }}
|
|
animate={{ rotate: isExpanded ? 180 : 0 }}
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M12 4.5v15m0 0l6.75-6.75M12 19.5l-6.75-6.75"
|
|
/>
|
|
</svg>
|
|
</motion.div>
|
|
|
|
<AnimatePresence>
|
|
{isExpanded && (
|
|
<motion.div
|
|
layout
|
|
key="additional-content"
|
|
style={{ width: "100%" }}
|
|
initial={{ opacity: 0, paddingBottom: "1.5rem" }}
|
|
animate={{ opacity: 1, transition: { delay: 0.15 } }}
|
|
exit={{ opacity: 0, transition: { delay: 0 } }}
|
|
>
|
|
<div className={styles.buttons}>
|
|
<Link
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
}}
|
|
style={{ display: "flex", flex: 1 }}
|
|
href={`${slug}/card`}
|
|
>
|
|
<Category size="32" color="currentColor" variant="Bold" />
|
|
Cards
|
|
</Link>
|
|
<Link
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
}}
|
|
style={{ display: "flex", flex: 1 }}
|
|
href={`${slug}/spelling`}
|
|
>
|
|
<Edit size="32" color="currentColor" variant="Bold" />
|
|
Spelling
|
|
</Link>
|
|
<Link
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
}}
|
|
style={{ display: "flex", flex: 1 }}
|
|
href={`${slug}/list`}
|
|
>
|
|
<NoteText size="32" color="currentColor" variant="Bold" />
|
|
List
|
|
</Link>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</motion.button>
|
|
);
|
|
};
|
|
|
|
export default Entry;
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/Entry/index.tsx
|
|
================================================
|
|
import Entry from "./Entry";
|
|
|
|
export default Entry;
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/ExpandingBlob/ExpandingBlob.module.scss
|
|
================================================
|
|
.outerBlob,
|
|
.innerBlob {
|
|
z-index: 2;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.outerBlob {
|
|
&--red {
|
|
background-color: var(--clr-accent-red-darker);
|
|
.innerBlob {
|
|
background-color: var(--clr-accent-red);
|
|
}
|
|
}
|
|
&--green {
|
|
background-color: var(--clr-accent-green-darker);
|
|
.innerBlob {
|
|
background-color: var(--clr-accent-green);
|
|
}
|
|
}
|
|
}
|
|
.innerBlob {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.iconWrapper {
|
|
width: 60px;
|
|
height: 60px;
|
|
svg {
|
|
width: 60px;
|
|
height: 60px;
|
|
display: block;
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/ExpandingBlob/ExpandingBlob.tsx
|
|
================================================
|
|
import classNames from "classnames";
|
|
import { motion } from "framer-motion";
|
|
import Image from "next/image";
|
|
import { FC } from "react";
|
|
import styles from "./ExpandingBlob.module.scss";
|
|
|
|
interface Props {
|
|
onAnimationComplete: () => void;
|
|
type: "correct" | "wrong";
|
|
}
|
|
|
|
const ExpandingBlob: FC<Props> = ({ type, onAnimationComplete }) => {
|
|
const outerBlobClasses = classNames(styles.outerBlob, {
|
|
[`${styles["outerBlob--red"]}`]: type === "wrong",
|
|
[`${styles["outerBlob--green"]}`]: type === "correct",
|
|
});
|
|
|
|
return (
|
|
<motion.div
|
|
tabIndex={0}
|
|
className={outerBlobClasses}
|
|
initial={{ clipPath: "circle(0% at center)" }}
|
|
animate={{ clipPath: "circle(100% at center)" }}
|
|
transition={{ duration: 0.75 }}
|
|
>
|
|
<motion.div
|
|
className={styles.innerBlob}
|
|
initial={{ clipPath: "circle(0% at center)" }}
|
|
animate={{ clipPath: "circle(100% at center)" }}
|
|
transition={{ delay: 0.25, duration: 0.5 }}
|
|
>
|
|
<motion.div
|
|
initial={{ scale: 0 }}
|
|
animate={{ scale: 1 }}
|
|
transition={{ delay: 0.5 }}
|
|
onAnimationComplete={onAnimationComplete}
|
|
className={styles.iconWrapper}
|
|
>
|
|
<Image src={type === "correct" ? "/TickSquare.png" : "/CloseSquare.png"} width={60} height={60} alt={type} />
|
|
</motion.div>
|
|
</motion.div>
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
export default ExpandingBlob;
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/ExpandingBlob/index.tsx
|
|
================================================
|
|
import ExpandingBlob from "./ExpandingBlob";
|
|
|
|
export default ExpandingBlob;
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/Filter/Filter.module.scss
|
|
================================================
|
|
.field {
|
|
label {
|
|
display: block;
|
|
cursor: pointer;
|
|
font-size: 1.125rem;
|
|
font-weight: 500;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
input {
|
|
width: 100%;
|
|
font-size: 1rem;
|
|
background-color: var(--clr-background-400);
|
|
border: 2px solid rgb(63, 63, 63);
|
|
border-radius: 4px;
|
|
padding: 0.75rem 1rem;
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
|
color: var(--clr-text);
|
|
font-weight: 500;
|
|
letter-spacing: 0.25px;
|
|
&:focus {
|
|
outline: none;
|
|
border-color: var(--clr-accent-blue);
|
|
}
|
|
}
|
|
}
|
|
|
|
.input__wrapper .keyboard__indicator {
|
|
display: none;
|
|
}
|
|
|
|
@media (min-width: 450px) {
|
|
.input__wrapper {
|
|
position: relative;
|
|
.keyboard__indicator {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 1rem;
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
transform: translateY(-50%);
|
|
.key {
|
|
background-color: var(--clr-background-500);
|
|
border-radius: 2px;
|
|
padding: 0.35em 0.5em;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
color: var(--clr-text-muted);
|
|
box-shadow: 0 3px 0px var(--clr-background-300);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/Filter/Filter.tsx
|
|
================================================
|
|
import { motion } from "framer-motion";
|
|
import { ChangeEventHandler, useEffect, useRef } from "react";
|
|
import styles from "./Filter.module.scss";
|
|
|
|
interface Props {
|
|
value: string;
|
|
onChangeHandler: ChangeEventHandler<HTMLInputElement>;
|
|
}
|
|
|
|
const Filter = ({ value, onChangeHandler }: Props) => {
|
|
const inputRef = useRef<null | HTMLInputElement>(null);
|
|
useEffect(() => {
|
|
const handler = (e: KeyboardEvent) => {
|
|
if (e.ctrlKey && e.key === "k") {
|
|
e.preventDefault(); // prevent browser shortcut
|
|
inputRef.current?.focus();
|
|
}
|
|
};
|
|
window.addEventListener("keydown", handler);
|
|
return () => {
|
|
window.removeEventListener("keydown", handler);
|
|
};
|
|
}, []);
|
|
return (
|
|
<motion.div
|
|
initial={{ y: -50, opacity: 0 }}
|
|
animate={{ y: 0, opacity: 1, transition: { delay: 0.1 } }}
|
|
className={styles.field}
|
|
>
|
|
<label htmlFor="search">Filter topics</label>
|
|
<div className={styles.input__wrapper}>
|
|
<input
|
|
ref={inputRef}
|
|
id="search"
|
|
type="text"
|
|
placeholder="Search for title"
|
|
value={value}
|
|
onChange={onChangeHandler}
|
|
/>
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: value.length === 0 ? 1 : 0 }}
|
|
className={styles.keyboard__indicator}
|
|
>
|
|
<div className={styles.key}>Ctrl</div>
|
|
<div className={styles.key}>K</div>
|
|
</motion.div>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
export default Filter;
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/Filter/index.tsx
|
|
================================================
|
|
import Filter from "./Filter";
|
|
|
|
export default Filter;
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/FlipCard/FlipCard.module.scss
|
|
================================================
|
|
.wrapper {
|
|
perspective: 1000px;
|
|
width: 100%;
|
|
height: 50vh;
|
|
max-height: calc(5 * 3em);
|
|
user-select: none;
|
|
position: absolute;
|
|
top: 50%;
|
|
isolation: isolate;
|
|
border-radius: 8px;
|
|
left: 50%;
|
|
will-change: transform;
|
|
&:focus-visible {
|
|
outline: 2px dashed var(--clr-accent-blue);
|
|
outline-offset: 2rem;
|
|
}
|
|
}
|
|
|
|
.questionPreview {
|
|
position: absolute;
|
|
border-radius: 5px;
|
|
color: var(--clr-accent-blue);
|
|
font-weight: 500;
|
|
font-size: 1rem;
|
|
border: 2px solid var(--clr-accent-blue);
|
|
max-width: 100%;
|
|
width: max-content;
|
|
background-color: var(--clr-background-400);
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
padding: 0.5em 1em;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, auto);
|
|
gap: 0.5rem;
|
|
svg {
|
|
height: 100%;
|
|
width: 1.75em;
|
|
height: 1.75em;
|
|
}
|
|
&:focus-visible {
|
|
outline: 2px dashed currentColor;
|
|
outline-offset: 0.75rem;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
position: relative;
|
|
text-align: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
transform-style: preserve-3d;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/FlipCard/FlipCard.tsx
|
|
================================================
|
|
import { AnimatePresence, motion } from "framer-motion";
|
|
import React, { useState } from "react";
|
|
import Back from "../Back";
|
|
import Front from "../Front";
|
|
import styles from "./FlipCard.module.scss";
|
|
import useWindowSize from "@hooks/useWindowSize";
|
|
import FlipCardButton from "@components/FlipCardButton";
|
|
import { CloseSquare, TickSquare, MessageQuestion } from "iconsax-react";
|
|
import { useEventListener } from "usehooks-ts";
|
|
|
|
const flip = {
|
|
unflipped: { rotateX: 0, transition: { type: "spring", stiffness: 100 } },
|
|
flipped: { rotateX: 180, transition: { type: "spring", stiffness: 100 } },
|
|
};
|
|
|
|
const card = {
|
|
out: { opacity: 0, x: "50%", y: "-50%", scale: 0.25 },
|
|
in: { opacity: 1, x: "-50%", scale: 1, transition: { type: "spring", damping: 12 } },
|
|
outExit: { opacity: 0, x: "-150%", scale: 0.25, transition: { type: "spring", damping: 12 } },
|
|
};
|
|
|
|
interface Props {
|
|
dataClass?: ClassString;
|
|
data: Question;
|
|
onAnswer: (rightAnswer: boolean, questionData: Question) => void;
|
|
}
|
|
|
|
const FlipCard = ({ data, dataClass, onAnswer }: Props) => {
|
|
if (dataClass == null) throw new Error("dataClass is not a string");
|
|
const [isFlipped, setIsFlipped] = useState(false);
|
|
const [answeredRight, setAnsweredRight] = useState<boolean | null>(null);
|
|
const { width } = useWindowSize();
|
|
|
|
const getCardWidth = () => {
|
|
if (!width) return { isMobile: undefined, cardWidth: undefined };
|
|
const contentSize = Math.max(data.answer.replace(" | ", "").length, data.question.length);
|
|
let calculatedWidth = Math.max(contentSize * 8 * 2.85 + 128, 350);
|
|
if (calculatedWidth > 1000) calculatedWidth /= 1.75;
|
|
const isMobile = width - 320 < calculatedWidth;
|
|
if (isMobile) calculatedWidth = width - 32;
|
|
return { isMobile: isMobile, cardWidth: calculatedWidth };
|
|
};
|
|
|
|
const { isMobile, cardWidth } = getCardWidth();
|
|
|
|
useEventListener("keydown", (e) => {
|
|
if (!(e instanceof KeyboardEvent) || !isFlipped || answeredRight != null) return;
|
|
if (e.key === "Enter" || e.key === " ") {
|
|
setAnsweredRight(true);
|
|
}
|
|
if (e.key === "Backspace") {
|
|
setAnsweredRight(false);
|
|
}
|
|
if (e.key === "Escape") {
|
|
setIsFlipped(false);
|
|
}
|
|
});
|
|
|
|
useEventListener("keydown", (e) => {
|
|
if (!(e instanceof KeyboardEvent) || isFlipped || answeredRight != null) return;
|
|
if (e.key === "Enter") setIsFlipped(true);
|
|
});
|
|
|
|
const forwardAnswer = () => {
|
|
if (answeredRight == null) return;
|
|
onAnswer(answeredRight, data);
|
|
};
|
|
|
|
return (
|
|
<motion.div
|
|
key={`card_${data.id}`}
|
|
variants={card}
|
|
initial="out"
|
|
animate="in"
|
|
exit="outExit"
|
|
onClickCapture={() => setIsFlipped(true)}
|
|
className={styles.wrapper}
|
|
style={{
|
|
maxWidth: cardWidth,
|
|
}}
|
|
>
|
|
<AnimatePresence>
|
|
{isFlipped && answeredRight == null && (
|
|
<>
|
|
<motion.div
|
|
className={styles.questionPreview}
|
|
initial={{ top: 0, left: "50%", x: "-50%", y: 0, opacity: 0 }}
|
|
animate={{ y: "calc(-100% - 20px)", opacity: 1 }}
|
|
transition={{ type: "spring", stiffness: 100 }}
|
|
exit={{ y: 0, opacity: 0 }}
|
|
onClickCapture={() => setIsFlipped(false)}
|
|
>
|
|
<MessageQuestion color="currentColor" variant="Linear" />
|
|
{data.question}
|
|
</motion.div>
|
|
<FlipCardButton
|
|
isMobile={isMobile}
|
|
onClick={() => setAnsweredRight(false)}
|
|
icon={<CloseSquare color="currentColor" variant="Bold" />}
|
|
color="red"
|
|
position="left"
|
|
/>
|
|
<FlipCardButton
|
|
icon={<TickSquare color="currentColor" variant="Bold" />}
|
|
isMobile={isMobile}
|
|
onClick={() => setAnsweredRight(true)}
|
|
color="green"
|
|
position="right"
|
|
/>
|
|
</>
|
|
)}
|
|
</AnimatePresence>
|
|
<motion.div
|
|
variants={flip}
|
|
initial="unflipped"
|
|
animate={isFlipped ? "flipped" : "unflipped"}
|
|
className={styles.content}
|
|
>
|
|
<Front isMobile={isMobile} data={data.question} />
|
|
<Back
|
|
answeredRight={answeredRight}
|
|
dataClass={dataClass}
|
|
isMobile={isMobile}
|
|
forwardAnswer={forwardAnswer}
|
|
data={data.answer}
|
|
/>
|
|
</motion.div>
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
export default FlipCard;
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/FlipCard/index.tsx
|
|
================================================
|
|
import FlipCard from "./FlipCard";
|
|
|
|
export default FlipCard;
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/FlipCardButton/FlipCardButton.module.scss
|
|
================================================
|
|
.container {
|
|
--accent: var(--clr-accent-blue);
|
|
position: absolute;
|
|
background-color: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 0 1.5rem;
|
|
border-radius: 4px;
|
|
color: var(--clr-accent);
|
|
svg {
|
|
width: 75px;
|
|
height: 75px;
|
|
}
|
|
&--mobile {
|
|
width: 50%;
|
|
svg {
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
}
|
|
&:focus-visible {
|
|
outline: 2px dashed var(--clr-accent);
|
|
outline-offset: 0.5rem;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/FlipCardButton/FlipCardButton.tsx
|
|
================================================
|
|
import classNames from "classnames";
|
|
import styles from "./FlipCardButton.module.scss";
|
|
import { motion, MotionStyle } from "framer-motion";
|
|
import { FC, MouseEventHandler, ReactNode } from "react";
|
|
|
|
interface Props {
|
|
isMobile: boolean | undefined;
|
|
onClick: MouseEventHandler<HTMLButtonElement>;
|
|
icon: ReactNode;
|
|
position: "left" | "right";
|
|
color: "green" | "red";
|
|
}
|
|
|
|
const FlipCardButton: FC<Props> = ({ isMobile, icon, onClick, position, color }) => {
|
|
const accentColor = color === "green" ? "var(--clr-accent-green)" : "var(--clr-accent-red)";
|
|
const xOffset = position === "left" ? -150 : 150;
|
|
const classes = classNames(styles.container, { [`${styles["container--mobile"]}`]: isMobile });
|
|
return (
|
|
<motion.button
|
|
initial={{ x: 0, right: position === "right" ? 0 : "unset", top: "50%", translateY: "-50%", opacity: 0 }}
|
|
animate={{ x: isMobile ? 0 : xOffset, y: isMobile ? 175 : 0, opacity: 1 }}
|
|
exit={{ x: 0, y: 0, opacity: 0 }}
|
|
style={{ "--clr-accent": accentColor } as MotionStyle}
|
|
transition={{ type: "spring" }}
|
|
whileHover={{ scale: 1.125, transition: { duration: 0.2 } }}
|
|
className={classes}
|
|
onClick={onClick}
|
|
>
|
|
{icon}
|
|
</motion.button>
|
|
);
|
|
};
|
|
|
|
export default FlipCardButton;
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/FlipCardButton/index.tsx
|
|
================================================
|
|
import FlipCardButton from "./FlipCardButton";
|
|
|
|
export default FlipCardButton;
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/Front/Front.module.scss
|
|
================================================
|
|
.wrapper {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
overflow: auto;
|
|
width: 100%;
|
|
display: flex;
|
|
height: 100%;
|
|
backface-visibility: hidden;
|
|
background-color: var(--clr-background-400);
|
|
border-radius: 8px;
|
|
border: 3px solid var(--clr-accent-blue);
|
|
overflow: hidden;
|
|
isolation: isolate;
|
|
.textWrapper {
|
|
margin: auto;
|
|
position: relative;
|
|
.text {
|
|
font-size: 2.25rem;
|
|
padding: 0 2rem;
|
|
font-weight: 500;
|
|
margin: 0;
|
|
color: var(--clr-accent-blue);
|
|
}
|
|
&--mobile {
|
|
.text {
|
|
font-size: 1.5rem;
|
|
padding: 0 1rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/Front/Front.tsx
|
|
================================================
|
|
import Watermark from "@components/Watermark";
|
|
import classNames from "classnames";
|
|
import React from "react";
|
|
import styles from "./Front.module.scss";
|
|
|
|
interface Props {
|
|
data: string;
|
|
isMobile: boolean | undefined;
|
|
}
|
|
|
|
const Front = ({ data, isMobile }: Props) => {
|
|
const textWrapperClasses = classNames(styles.textWrapper, {
|
|
[`${styles["textWrapper--mobile"]}`]: isMobile,
|
|
});
|
|
return (
|
|
<div className={styles.wrapper}>
|
|
<Watermark size="lg" text="question" />
|
|
<div className={textWrapperClasses}>
|
|
<p className={styles.text}>{data}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Front;
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/Front/index.tsx
|
|
================================================
|
|
import Front from "./Front";
|
|
|
|
export default Front;
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/ListEntries/index.tsx
|
|
================================================
|
|
import ListEntries from "./ListEntries";
|
|
|
|
export default ListEntries;
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/ListEntries/ListEntries.module.scss
|
|
================================================
|
|
.container {
|
|
display: grid;
|
|
margin-top: 1.5rem;
|
|
gap: 1.5rem;
|
|
flex: 1;
|
|
grid-template-columns: 1fr;
|
|
grid-auto-rows: min-content;
|
|
position: relative;
|
|
}
|
|
|
|
.noResults {
|
|
width: 100%;
|
|
height: fit-content;
|
|
padding: 3rem 0;
|
|
position: absolute;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--clr-accent-red);
|
|
filter: brightness(125%);
|
|
svg {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
color: currentColor;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/ListEntries/ListEntries.tsx
|
|
================================================
|
|
import { AnimatePresence, LayoutGroup, motion } from "framer-motion";
|
|
import React, { useEffect, useRef, useState } from "react";
|
|
import styles from "./ListEntries.module.scss";
|
|
import Fuse from "fuse.js";
|
|
import { CloseSquare } from "iconsax-react";
|
|
import Entry from "@components/Entry";
|
|
|
|
interface Props {
|
|
data: Card[];
|
|
filterString: string | null;
|
|
}
|
|
|
|
type FilteredData = Fuse.FuseResult<Card>[] | Card[];
|
|
|
|
const ListEntries = ({ data, filterString }: Props) => {
|
|
const [filteredData, setFilteredData] = useState<FilteredData>(data);
|
|
const fuse = useRef(
|
|
new Fuse(data, {
|
|
keys: ["attributes.title"],
|
|
})
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (!filterString) {
|
|
setFilteredData(data);
|
|
return;
|
|
}
|
|
const searchData = fuse.current.search(filterString);
|
|
setFilteredData(searchData);
|
|
}, [filterString, data]);
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<LayoutGroup>
|
|
<AnimatePresence>
|
|
{filteredData.length > 0 ? (
|
|
filteredData.map((d, idx) => {
|
|
const isFuseResult = Boolean((d as Fuse.FuseResult<Card>).item);
|
|
const data = isFuseResult ? (d as Fuse.FuseResult<Card>).item : (d as Card);
|
|
return <Entry key={data.attributes.slug} data={data} animationDelay={0.05 * (idx + 1) + 0.2} />;
|
|
})
|
|
) : (
|
|
<motion.h1
|
|
key="nothing-found"
|
|
className={styles.noResults}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0, transition: { delay: 0.25 } }}
|
|
exit={{ opacity: 0 }}
|
|
>
|
|
<CloseSquare size="32" color="currentColor" variant="Bold" />
|
|
No Entries
|
|
</motion.h1>
|
|
)}
|
|
</AnimatePresence>
|
|
</LayoutGroup>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ListEntries;
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/ProgressBar/index.tsx
|
|
================================================
|
|
import ProgressBar from "./ProgressBar";
|
|
|
|
export default ProgressBar;
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/ProgressBar/ProgressBar.module.scss
|
|
================================================
|
|
.progress {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: fixed;
|
|
top: 1rem;
|
|
left: 1rem;
|
|
width: calc(100% - 2rem);
|
|
.bar {
|
|
width: 100%;
|
|
max-width: 450px;
|
|
height: 25px;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
position: relative;
|
|
overflow: hidden;
|
|
border: 1px solid var(--clr-background-400);
|
|
box-shadow: 0 0 7px rgba(0, 0, 0, 0.15);
|
|
&__fill {
|
|
background-image: linear-gradient(to right, var(--clr-accent-red), var(--clr-accent-peachy));
|
|
}
|
|
.percentage {
|
|
margin: 0;
|
|
user-select: none;
|
|
width: 7ch;
|
|
text-align: center;
|
|
font-size: 0.5rem;
|
|
font-weight: 700;
|
|
letter-spacing: 1px;
|
|
position: absolute;
|
|
padding: 0.125rem 0.25rem;
|
|
border-radius: 2px;
|
|
top: 50%;
|
|
left: 50%;
|
|
mix-blend-mode: difference;
|
|
transform: translate(-50%, -50%);
|
|
color: var(--clr-text-muted);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/ProgressBar/ProgressBar.tsx
|
|
================================================
|
|
import styles from "./ProgressBar.module.scss";
|
|
import { animate, motion } from "framer-motion";
|
|
import { useEffect, useRef } from "react";
|
|
import Streak from "@components/Streak";
|
|
|
|
interface Props {
|
|
maxAmount: number;
|
|
currentAmount: number;
|
|
streak: number;
|
|
}
|
|
|
|
const ProgressBar: React.FC<Props> = ({ currentAmount, maxAmount, streak }) => {
|
|
const percentageRef = useRef<HTMLParagraphElement>(null);
|
|
useEffect(() => {
|
|
const node = percentageRef.current;
|
|
if (!node) return;
|
|
const percentageBefore = (Math.max(currentAmount - 1, 0) / maxAmount) * 100;
|
|
const percentageCurrent = (currentAmount / maxAmount) * 100;
|
|
|
|
const controls = animate(percentageBefore, percentageCurrent, {
|
|
onUpdate: (value) => {
|
|
node.textContent = `${value.toFixed(2)}%`;
|
|
},
|
|
});
|
|
return () => controls.stop();
|
|
});
|
|
|
|
return (
|
|
<div className={styles.progress}>
|
|
<div className={styles.bar}>
|
|
<motion.div
|
|
className={styles.bar__fill}
|
|
animate={{ width: `${(currentAmount / maxAmount) * 100}%` }}
|
|
transition={{ ease: "easeInOut" }}
|
|
>
|
|
<p className={styles.percentage}>
|
|
<span ref={percentageRef}>0.00%</span>
|
|
</p>
|
|
</motion.div>
|
|
</div>
|
|
<Streak streak={streak} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProgressBar;
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/SpellingByWord/index.tsx
|
|
================================================
|
|
import SpellingByWord from "./SpellingByWord";
|
|
|
|
export default SpellingByWord;
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/SpellingByWord/SpellingByWord.module.scss
|
|
================================================
|
|
.submit {
|
|
position: absolute;
|
|
isolation: isolate;
|
|
bottom: -3.5rem;
|
|
z-index: -1;
|
|
left: 50%;
|
|
--accent: var(--clr-accent-blue);
|
|
background-color: transparent;
|
|
color: var(--accent);
|
|
cursor: pointer;
|
|
border: none;
|
|
display: inline-flex;
|
|
padding: 0.4em 1.25em;
|
|
font-size: 0.9rem;
|
|
font-weight: 700;
|
|
align-items: center;
|
|
border-radius: 4px;
|
|
justify-content: center;
|
|
transition: color 200ms ease;
|
|
|
|
&::after {
|
|
content: "";
|
|
border-radius: inherit;
|
|
position: absolute;
|
|
inset: 0;
|
|
transform: scale(0.5);
|
|
opacity: 0;
|
|
transition: transform 300ms, opacity 300ms;
|
|
transition-timing-function: cubic-bezier(0.83, 0, 0.17, 1);
|
|
background-color: var(--accent);
|
|
z-index: -1;
|
|
}
|
|
|
|
svg {
|
|
margin-left: 0.5em;
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: 2px dashed var(--accent);
|
|
outline-offset: 0.5rem;
|
|
}
|
|
&:hover,
|
|
&:focus-visible {
|
|
color: white;
|
|
&::after {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.wrapper {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: calc(100% - 2rem);
|
|
}
|
|
|
|
.container {
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
color: var(--clr-accent-blue);
|
|
font-weight: 700;
|
|
font-size: 1.25rem;
|
|
border: 2px solid var(--clr-accent-blue);
|
|
min-height: 175px;
|
|
position: relative;
|
|
isolation: isolate;
|
|
background-color: var(--clr-background-400);
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1em;
|
|
transition: border-color 350ms ease;
|
|
&--incorrect {
|
|
border-color: var(--clr-accent-red);
|
|
}
|
|
&--correct {
|
|
border-color: var(--clr-accent-green);
|
|
}
|
|
&:focus-visible {
|
|
outline: 2px dashed var(--clr-accent-blue);
|
|
outline-offset: 2rem;
|
|
}
|
|
&:focus-visible {
|
|
outline: 2px dashed var(--clr-accent-blue);
|
|
outline-offset: 2rem;
|
|
}
|
|
.answerPreview {
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--clr-text);
|
|
gap: 0.35rem;
|
|
margin-top: 1.25rem;
|
|
svg {
|
|
color: var(--clr-accent-blue);
|
|
}
|
|
}
|
|
.question {
|
|
margin: 0;
|
|
margin-bottom: 1.5rem;
|
|
font-size: inherit;
|
|
}
|
|
span {
|
|
font-size: 1rem;
|
|
color: white;
|
|
}
|
|
form {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
font-size: 1.125rem;
|
|
align-items: center;
|
|
position: relative;
|
|
justify-content: center;
|
|
gap: 0.75rem;
|
|
font-family: "Source Code Pro", monospace;
|
|
> *:not(input) {
|
|
display: flex;
|
|
font-size: inherit;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.input {
|
|
font-size: inherit;
|
|
background-color: var(--clr-background-300);
|
|
border: none;
|
|
box-shadow: 0 3px 0 var(--clr-background-400), 0 3px 8px rgba(0, 0, 0, 0.25);
|
|
color: var(--clr-text);
|
|
font-weight: 600;
|
|
padding: 0.35em 0.5em;
|
|
text-align: center;
|
|
isolation: isolate;
|
|
letter-spacing: 1px;
|
|
border-radius: 4px;
|
|
transition: transform 200ms ease-out, box-shadow 200ms ease;
|
|
&:not(.input--correct):not(.input--incorrect):focus-visible {
|
|
box-shadow: 0 3px 0 var(--clr-accent-blue), 0 3px 8px rgba(0, 0, 0, 0.25);
|
|
transform: translateY(-3px);
|
|
}
|
|
&:focus-visible {
|
|
outline: none;
|
|
}
|
|
&--correct {
|
|
box-shadow: 0 3px 0 var(--clr-accent-green), 0 3px 8px rgba(0, 0, 0, 0.25);
|
|
}
|
|
&--incorrect {
|
|
box-shadow: 0 3px 0 var(--clr-accent-red), 0 3px 8px rgba(0, 0, 0, 0.25);
|
|
}
|
|
}
|
|
}
|
|
.break {
|
|
flex-basis: 100%;
|
|
height: 0;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 450px) {
|
|
.wrapper {
|
|
max-width: 600px;
|
|
.container {
|
|
font-size: 2.25rem;
|
|
padding: 1.5em;
|
|
}
|
|
}
|
|
.answerPreview {
|
|
font-size: 1.25rem !important;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/SpellingByWord/SpellingByWord.tsx
|
|
================================================
|
|
import { FC, useState, useEffect, FormEventHandler, useRef, FocusEventHandler } from "react";
|
|
import { AnimatePresence, motion } from "framer-motion";
|
|
import shoetest from "shoetest";
|
|
import styles from "./SpellingByWord.module.scss";
|
|
import Watermark from "@components/Watermark";
|
|
import ExpandingBlob from "@components/ExpandingBlob";
|
|
import classNames from "classnames";
|
|
import MaskedInput from "react-text-mask";
|
|
import { ArrowRight, Information } from "iconsax-react";
|
|
|
|
interface Props {
|
|
data: Question;
|
|
onAnswer: (answeredRight: boolean, input: string, expected: string, data: Question) => void;
|
|
}
|
|
|
|
interface InputProps {
|
|
value: string;
|
|
expectedValue: string;
|
|
isCorrect: boolean | null;
|
|
}
|
|
|
|
type InputData = Record<string, InputProps>;
|
|
|
|
const FIXES_TABLE = [{ from: /\s\/\s/g, to: "/" }];
|
|
|
|
const applyFixesTable = (word: string): string => {
|
|
for (const fix of FIXES_TABLE) {
|
|
word = word.replaceAll(fix.from, fix.to);
|
|
}
|
|
return word;
|
|
};
|
|
|
|
const card = {
|
|
out: { opacity: 0, x: "50%", y: "-50%", scale: 0.25 },
|
|
in: { opacity: 1, x: "-50%", scale: 1, transition: { type: "spring", damping: 12 } },
|
|
outExit: { opacity: 0, x: "-150%", scale: 0.25, transition: { type: "spring", damping: 12 } },
|
|
};
|
|
|
|
const WordInput: FC<{
|
|
isCorrect: boolean | null;
|
|
mask: (RegExp | string)[];
|
|
onChangeCallback: (value: string, id: string) => void;
|
|
onFocusCallback: FocusEventHandler<HTMLInputElement>;
|
|
id: string;
|
|
autoFocus?: boolean;
|
|
maskPlaceholder?: string;
|
|
}> = ({ id, mask, isCorrect, onChangeCallback, onFocusCallback, autoFocus = false, maskPlaceholder = "_" }) => {
|
|
const classes = classNames(styles.input, {
|
|
[styles["input--incorrect"]]: isCorrect === false,
|
|
[styles["input--correct"]]: isCorrect === true,
|
|
});
|
|
const inputIsEmpty = useRef(true);
|
|
const passedInitialValue = useRef(false);
|
|
const inputRef = useRef<HTMLInputElement>();
|
|
|
|
useEffect(() => {
|
|
if (inputRef.current == null || passedInitialValue.current === true) return;
|
|
onChangeCallback(inputRef.current.value, inputRef.current.dataset.id!);
|
|
passedInitialValue.current = true;
|
|
}, [autoFocus, onChangeCallback]);
|
|
|
|
return (
|
|
<MaskedInput
|
|
mask={mask}
|
|
showMask={true}
|
|
className={classes}
|
|
guide={true}
|
|
autoFocus={autoFocus}
|
|
placeholderChar={maskPlaceholder}
|
|
style={{
|
|
width: `calc(${mask.length}ch + 1.8em + ${mask.filter((e) => !(e instanceof RegExp)).length} * 0.5ch)`,
|
|
}}
|
|
render={(textMaskRef, props) => (
|
|
<input
|
|
{...props}
|
|
ref={(node) => {
|
|
if (node == null) return;
|
|
textMaskRef(node); // Keep this so the component can still function
|
|
inputRef.current = node; // Copy the ref for yourself
|
|
}}
|
|
/>
|
|
)}
|
|
onKeyDown={(e) => {
|
|
if (!(e.target instanceof HTMLInputElement)) return;
|
|
const targetInput = e.target;
|
|
const key = e.key;
|
|
const cleanValue = getCleanedValue(e.target.value);
|
|
if (key === "Backspace" && inputIsEmpty.current) {
|
|
const prevInput = targetInput.previousElementSibling;
|
|
if (prevInput instanceof HTMLInputElement) prevInput.focus();
|
|
}
|
|
inputIsEmpty.current = cleanValue.length === 0;
|
|
}}
|
|
onFocus={(e) => {
|
|
if (inputIsEmpty.current) e.target.setSelectionRange(0, 0);
|
|
onFocusCallback(e);
|
|
}}
|
|
onChange={(e) => {
|
|
if (isCorrect != null) return;
|
|
const input = e.target;
|
|
const value = input.value;
|
|
const cleanValue = getCleanedValue(value);
|
|
inputIsEmpty.current = cleanValue.length === 0;
|
|
onChangeCallback(value, id);
|
|
}}
|
|
data-id={id}
|
|
/>
|
|
);
|
|
};
|
|
|
|
const removeDiacritics = (string: string): string => {
|
|
return shoetest.simplify(string);
|
|
};
|
|
|
|
const splitInput = (input: string) => {
|
|
return removeDiacritics(input)
|
|
.split(/\s/)
|
|
.filter((i) => i.length !== 0);
|
|
};
|
|
|
|
const generateMask = (word: string) => {
|
|
const maskArray: (RegExp | string)[] = [];
|
|
word.split("").forEach((char) => {
|
|
// a letter
|
|
if (/[a-z]/i.test(char)) {
|
|
maskArray.push(/[a-z]/i);
|
|
} else if (/\d/.test(char)) {
|
|
maskArray.push(/\d/);
|
|
} else {
|
|
// some special character like e.x. "-" or "/"
|
|
maskArray.push(char);
|
|
}
|
|
});
|
|
return maskArray;
|
|
};
|
|
|
|
const getCleanedValue = (value: string): string => {
|
|
return value
|
|
.split("")
|
|
.filter((c) => /[a-z]/i.test(c) || /\d/.test(c))
|
|
.join("");
|
|
};
|
|
|
|
const generateInputData = (answer: string): [InputData, string[]] => {
|
|
const inputArray = splitInput(answer);
|
|
const generatedData: InputData = {};
|
|
const idsInOrder: string[] = [];
|
|
inputArray.forEach((word, wordIdx) => {
|
|
const id = `${word}_${wordIdx}`;
|
|
idsInOrder.push(id);
|
|
const data: InputProps = {
|
|
value: "",
|
|
expectedValue: word,
|
|
isCorrect: null,
|
|
};
|
|
generatedData[id] = data;
|
|
});
|
|
|
|
return [generatedData, idsInOrder];
|
|
};
|
|
|
|
const SpellingByWord: FC<Props> = ({ data, onAnswer }) => {
|
|
const answer = applyFixesTable(data.answer);
|
|
const inputArray = splitInput(answer);
|
|
|
|
const [hasFinishedEntering, setHasFinishedEntering] = useState(false);
|
|
const [shouldAnimateBlob, setShouldAnimateBlob] = useState(false);
|
|
|
|
const [answered, setAnswered] = useState<[boolean, string] | null>(null);
|
|
const currentlyFocusedInput = useRef<HTMLInputElement | null>(null);
|
|
const [shouldShowCorrectAnswer, setShouldShowCorrectAnswer] = useState(false);
|
|
|
|
const inputIdsInOrder = useRef<string[]>();
|
|
const [inputData, setInputData] = useState<InputData | null>(null);
|
|
|
|
// used to trigger blob animation on answer which itself triggers onAnswer in parent component
|
|
useEffect(() => {
|
|
if (answered == null || hasFinishedEntering === false) return;
|
|
if (answered[0] === false) {
|
|
setShouldShowCorrectAnswer(true);
|
|
return;
|
|
}
|
|
setShouldAnimateBlob(true);
|
|
}, [answered, hasFinishedEntering, shouldShowCorrectAnswer]);
|
|
|
|
useEffect(() => {
|
|
// if inputData is not null -> data is already generated
|
|
if (inputData != null) return;
|
|
const [generatedData, idsInOrder] = generateInputData(answer);
|
|
setInputData(generatedData);
|
|
inputIdsInOrder.current = idsInOrder;
|
|
}, [answer, inputData]);
|
|
|
|
const checkAnswer: FormEventHandler<HTMLFormElement> = (e) => {
|
|
e.preventDefault();
|
|
if (hasFinishedEntering === false || inputIdsInOrder.current == null || inputData == null) return;
|
|
if (shouldShowCorrectAnswer === true) {
|
|
setShouldAnimateBlob(true);
|
|
}
|
|
|
|
let verdict = true;
|
|
const userInput: string[] = [];
|
|
const inputDataClone = Object.assign({}, inputData);
|
|
inputIdsInOrder.current.forEach((id, idIndex) => {
|
|
const input = inputDataClone[id];
|
|
const correspondingWord = inputArray[idIndex];
|
|
const inputVerdict = input.value.toLowerCase() === correspondingWord.toLowerCase();
|
|
if (inputVerdict === false) verdict = false;
|
|
userInput.push(input.value);
|
|
input.isCorrect = inputVerdict;
|
|
});
|
|
setInputData(inputDataClone);
|
|
setTimeout(() => setAnswered([verdict, userInput.join(" ")]), 100);
|
|
};
|
|
|
|
const onChangeHandler = (value: string, id: string) => {
|
|
if (inputData == null) return;
|
|
const input = inputData[id];
|
|
const cleanValue = getCleanedValue(value);
|
|
// detect when input is fully filled, then try to focus next one (if found)
|
|
if (cleanValue.length === getCleanedValue(input.expectedValue).length) {
|
|
const currentInput = currentlyFocusedInput.current;
|
|
const nextInput = currentInput?.nextElementSibling;
|
|
if (nextInput instanceof HTMLInputElement) nextInput.focus();
|
|
}
|
|
setInputData((oldState) => {
|
|
return {
|
|
...oldState,
|
|
[id]: { ...oldState![id], value: value },
|
|
};
|
|
});
|
|
};
|
|
|
|
const onFocusHander: FocusEventHandler<HTMLInputElement> = (e) => {
|
|
// onChangeHandler(e.target.value, e.target.dataset.id!);
|
|
currentlyFocusedInput.current = e.target;
|
|
};
|
|
|
|
const borderStyles = classNames({
|
|
[`${styles["container--correct"]}`]: shouldAnimateBlob && answered != null && answered[0] === true,
|
|
[`${styles["container--incorrect"]}`]: shouldAnimateBlob && answered != null && answered[0] === false,
|
|
});
|
|
|
|
// if (!inputData) return <p>Generating...</p>;
|
|
if (!inputData) return null;
|
|
|
|
return (
|
|
<motion.div
|
|
variants={card}
|
|
initial="out"
|
|
animate="in"
|
|
exit="outExit"
|
|
onAnimationComplete={() => {
|
|
if (!hasFinishedEntering) setHasFinishedEntering(true);
|
|
}}
|
|
className={styles.wrapper}
|
|
>
|
|
<motion.div className={classNames(styles.container, borderStyles)}>
|
|
<p className={styles.question}>{data.question}</p>
|
|
<Watermark size="md" text="spelling" />
|
|
<form onSubmit={checkAnswer}>
|
|
{inputArray.map((word, wordIdx) => {
|
|
const mask = generateMask(word);
|
|
const id = `${word}_${wordIdx}`;
|
|
const inputProps = inputData[id];
|
|
const props = {
|
|
id: id,
|
|
mask: mask,
|
|
isCorrect: inputProps.isCorrect,
|
|
maskPlaceholder: "_",
|
|
autoFocus: wordIdx === 0,
|
|
onFocusCallback: onFocusHander,
|
|
onChangeCallback: onChangeHandler,
|
|
};
|
|
return <WordInput key={id} {...props} />;
|
|
})}
|
|
<input className="hidden" type="submit" />
|
|
</form>
|
|
<AnimatePresence>
|
|
{shouldShowCorrectAnswer && (
|
|
<motion.div
|
|
className={styles.answerPreview}
|
|
initial={{ opacity: 0, height: 0 }}
|
|
animate={{ opacity: 1, height: "auto" }}
|
|
>
|
|
<Information size="1.25em" variant="Bold" color="currentColor" />
|
|
{answer}
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
|
|
{answered != null && shouldAnimateBlob && (
|
|
<ExpandingBlob
|
|
type={answered[0] === true ? "correct" : "wrong"}
|
|
onAnimationComplete={() => {
|
|
onAnswer(answered[0], answered[1], inputArray.join(" "), { ...data, answer });
|
|
}}
|
|
/>
|
|
)}
|
|
</motion.div>
|
|
<motion.button
|
|
initial={{ x: "-50%", y: -100, scale: 0 }}
|
|
animate={{
|
|
y: shouldAnimateBlob ? -100 : 0,
|
|
scale: shouldAnimateBlob ? 0 : 1,
|
|
transition: { delay: shouldAnimateBlob ? 0 : 0.5 },
|
|
}}
|
|
whileTap={{ scale: 0.95, transition: { delay: 0 } }}
|
|
onClick={checkAnswer as any}
|
|
className={styles.submit}
|
|
>
|
|
Submit
|
|
<ArrowRight size="24" color="currentColor" variant="Outline" />
|
|
</motion.button>
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
export default SpellingByWord;
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/Streak/index.tsx
|
|
================================================
|
|
import Streak from "./Streak";
|
|
export default Streak;
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/Streak/Streak.module.scss
|
|
================================================
|
|
.wrapper {
|
|
margin-top: 1rem;
|
|
width: fit-content;
|
|
font-size: 0.75em;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
position: relative;
|
|
isolation: isolate;
|
|
z-index: 1;
|
|
border-radius: 4px;
|
|
border: 2px solid var(--clr-accent-peachy);
|
|
color: var(--clr-accent-peachy);
|
|
display: flex;
|
|
.content {
|
|
padding: 0.25rem 1.25rem;
|
|
position: relative;
|
|
z-index: 1;
|
|
background-color: var(--clr-background-300);
|
|
}
|
|
.pulse {
|
|
position: absolute;
|
|
z-index: -1;
|
|
background-color: var(--clr-accent-peachy);
|
|
top: 50%;
|
|
left: 50%;
|
|
border-radius: 50%;
|
|
height: 100%;
|
|
aspect-ratio: 1/1;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/Streak/Streak.tsx
|
|
================================================
|
|
import getStreakEmojis from "@utils/getStreakEmojis";
|
|
import { AnimatePresence, motion } from "framer-motion";
|
|
import React, { FC, useEffect, useState } from "react";
|
|
import styles from "./Streak.module.scss";
|
|
|
|
interface Props {
|
|
streak: number;
|
|
}
|
|
const ACTIVATE_AT = 5;
|
|
|
|
const Streak: FC<Props> = ({ streak }) => {
|
|
const [shouldPulse, setShouldPulse] = useState(false);
|
|
useEffect(() => {
|
|
if (streak > ACTIVATE_AT) {
|
|
setShouldPulse(true);
|
|
}
|
|
}, [streak]);
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
{streak >= ACTIVATE_AT && (
|
|
<motion.div
|
|
key="streak"
|
|
initial={{ scale: 0.85, opacity: 0, y: -10 }}
|
|
animate={{ scale: shouldPulse ? 1.125 : 1, opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0 }}
|
|
className={styles.wrapper}
|
|
>
|
|
<div className={styles.content}>
|
|
Streak x{streak} {getStreakEmojis(streak)}
|
|
</div>
|
|
{shouldPulse && (
|
|
<motion.div
|
|
key="pulse"
|
|
className={styles.pulse}
|
|
initial={{ scale: 1, opacity: 1, x: "-50%", y: "-50%" }}
|
|
animate={{ scale: 4, opacity: 0 }}
|
|
transition={{ duration: 0.4, ease: "linear" }}
|
|
onAnimationComplete={() => setShouldPulse(false)}
|
|
/>
|
|
)}
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
};
|
|
|
|
export default Streak;
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/Watermark/index.tsx
|
|
================================================
|
|
import Watermark from "./Watermark";
|
|
|
|
export default Watermark;
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/Watermark/Watermark.module.scss
|
|
================================================
|
|
.wrapper {
|
|
color: var(--clr-text-muted);
|
|
opacity: 0.03;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%) rotate(-15deg);
|
|
font-weight: 700;
|
|
margin: 0;
|
|
z-index: -1;
|
|
line-height: 100%;
|
|
&::before,
|
|
&::after {
|
|
content: attr(data-text);
|
|
font-size: inherit;
|
|
position: absolute;
|
|
left: 0;
|
|
}
|
|
&::before {
|
|
top: -100%;
|
|
}
|
|
&::after {
|
|
top: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
================================================
|
|
FILE: components/Watermark/Watermark.tsx
|
|
================================================
|
|
import { FC } from "react";
|
|
import styles from "./Watermark.module.scss";
|
|
|
|
const Watermark: FC<{ text: string; size: "lg" | "md" }> = ({ text, size }) => {
|
|
const getFontSize = (size: "lg" | "md") => {
|
|
if (size === "lg") return "8rem";
|
|
else if (size === "md") return "6rem";
|
|
};
|
|
return (
|
|
<div
|
|
className={styles.wrapper}
|
|
style={{
|
|
fontSize: getFontSize(size),
|
|
}}
|
|
data-text={text}
|
|
>
|
|
{text}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Watermark;
|
|
|
|
|
|
|
|
================================================
|
|
FILE: hooks/useIndexSelectedData.ts
|
|
================================================
|
|
import { useState } from "react";
|
|
|
|
const useIndexSelectedData = <T>(dataArray: T[] | undefined, startingIndex?: number) => {
|
|
const [selectedIndex, setSelectedIndex] = useState(startingIndex || 0);
|
|
const [isDone, setIsDone] = useState(false);
|
|
const selectedItem = dataArray?.[selectedIndex];
|
|
const amountOfItems = dataArray?.length ?? 0;
|
|
const nextItem = () => {
|
|
if (dataArray == null) return;
|
|
setSelectedIndex((i) => {
|
|
const nextIndex = i + 1;
|
|
if (nextIndex >= dataArray.length) {
|
|
setIsDone(true);
|
|
return i;
|
|
}
|
|
return nextIndex;
|
|
});
|
|
};
|
|
const prevItem = () => {
|
|
if (dataArray == null) return;
|
|
if (isDone === true) setIsDone(false);
|
|
setSelectedIndex((i) => {
|
|
const prevIndex = i - 1;
|
|
if (prevIndex < 0) return 0;
|
|
return prevIndex;
|
|
});
|
|
};
|
|
const resetIndex = () => {
|
|
setIsDone(false);
|
|
setSelectedIndex(startingIndex || 0);
|
|
};
|
|
|
|
return {
|
|
selectedItem,
|
|
selectedIndex,
|
|
amountOfItems,
|
|
progress: {
|
|
isDone,
|
|
isFirst: selectedIndex === 0,
|
|
isLast: (dataArray && selectedIndex === dataArray.length - 1) || false,
|
|
},
|
|
nextItem,
|
|
prevItem,
|
|
resetIndex,
|
|
};
|
|
};
|
|
|
|
export default useIndexSelectedData;
|
|
|
|
|
|
|
|
================================================
|
|
FILE: hooks/useShuffledData.ts
|
|
================================================
|
|
import shuffle from "@utils/shuffle";
|
|
import { useEffect, useState } from "react";
|
|
|
|
const useShuffledData = <T>(data: T[]) => {
|
|
const [shuffledData, setShuffledData] = useState(data);
|
|
const [isShuffled, setIsShuffled] = useState(false);
|
|
const reshuffle = (newData: T[] | null = null) => {
|
|
setShuffledData(() => {
|
|
return shuffle(newData == null ? shuffledData : newData);
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
setShuffledData(shuffle(data));
|
|
setIsShuffled(true);
|
|
}, [data]);
|
|
|
|
return {
|
|
data: shuffledData,
|
|
isShuffled,
|
|
reshuffle,
|
|
};
|
|
};
|
|
|
|
export default useShuffledData;
|
|
|
|
|
|
|
|
================================================
|
|
FILE: hooks/useStreak.ts
|
|
================================================
|
|
import { useEffect, useState } from "react";
|
|
|
|
function useStreak() {
|
|
const [streak, setStreak] = useState(0);
|
|
const [maxStreak, setMaxStreak] = useState(0);
|
|
useEffect(() => {
|
|
if (streak > maxStreak) {
|
|
setMaxStreak(streak);
|
|
}
|
|
}, [streak, maxStreak]);
|
|
const reset = () => {
|
|
setStreak(0);
|
|
setMaxStreak(0);
|
|
};
|
|
return [streak, setStreak, maxStreak, reset] as const;
|
|
}
|
|
export default useStreak;
|
|
|
|
|
|
|
|
================================================
|
|
FILE: hooks/useWindowSize.ts
|
|
================================================
|
|
import { useState, useEffect } from "react";
|
|
|
|
function useWindowSize() {
|
|
// Initialize state with undefined width/height so server and client renders match
|
|
// Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
|
|
const [windowSize, setWindowSize] = useState<{ width: undefined | number; height: undefined | number }>({
|
|
width: undefined,
|
|
height: undefined,
|
|
});
|
|
|
|
useEffect(() => {
|
|
// Handler to call on window resize
|
|
function handleResize() {
|
|
// Set window width/height to state
|
|
setWindowSize({
|
|
width: window.innerWidth,
|
|
height: window.innerHeight,
|
|
});
|
|
}
|
|
if (!process.browser) return;
|
|
|
|
// Add event listener
|
|
window.addEventListener("resize", handleResize);
|
|
|
|
// Call handler right away so state gets updated with initial window size
|
|
handleResize();
|
|
|
|
// Remove event listener on cleanup
|
|
return () => window.removeEventListener("resize", handleResize);
|
|
}, []); // Empty array ensures that effect is only run on mount
|
|
|
|
return windowSize;
|
|
}
|
|
|
|
export default useWindowSize;
|
|
|
|
|
|
|
|
================================================
|
|
FILE: pages/404.tsx
|
|
================================================
|
|
const Page404 = () => {
|
|
return <div>Not Found</div>;
|
|
};
|
|
|
|
export default Page404;
|
|
|
|
|
|
|
|
================================================
|
|
FILE: pages/_app.tsx
|
|
================================================
|
|
import "@styles/globals.scss";
|
|
import type { AppProps } from "next/app";
|
|
|
|
function MyApp({ Component, pageProps }: AppProps) {
|
|
return <Component {...pageProps} />;
|
|
}
|
|
export default MyApp;
|
|
|
|
|
|
|
|
================================================
|
|
FILE: pages/_document.tsx
|
|
================================================
|
|
import { Html, Head, Main, NextScript } from "next/document";
|
|
|
|
export default function Document() {
|
|
return (
|
|
<Html lang="en">
|
|
<Head />
|
|
<body>
|
|
<Main />
|
|
<NextScript />
|
|
</body>
|
|
</Html>
|
|
);
|
|
}
|
|
|
|
|
|
|
|
================================================
|
|
FILE: pages/index.tsx
|
|
================================================
|
|
import { InferGetStaticPropsType, NextPage } from "next";
|
|
import React, { ChangeEventHandler, useEffect, useState } from "react";
|
|
import styles from "@styles/Home.module.scss";
|
|
import ListEntries from "@components/ListEntries";
|
|
import { motion } from "framer-motion";
|
|
import Filter from "@components/Filter";
|
|
import Head from "next/head";
|
|
|
|
export const getStaticProps = async () => {
|
|
const rawData = await fetch(`${process.env.API_URL}/cards?populate=questions&sort=updatedAt%3Adesc`, {
|
|
method: "GET",
|
|
headers: {
|
|
Authorization: `Bearer ${process.env.API_TOKEN}`,
|
|
"content-type": "application/json",
|
|
},
|
|
});
|
|
let data: ApiResponse = await rawData.json();
|
|
|
|
return {
|
|
props: {
|
|
data: data,
|
|
},
|
|
revalidate: 60,
|
|
};
|
|
};
|
|
|
|
const Home: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({ data: { data, meta: _ } }) => {
|
|
const [inputValue, setInputValue] = useState("");
|
|
const [filterString, setFilterString] = useState<string | null>(null);
|
|
|
|
const handleInputChange: ChangeEventHandler<HTMLInputElement> = (e) => {
|
|
setInputValue(e.target.value);
|
|
};
|
|
|
|
useEffect(() => {
|
|
const TIMEOUT_MS = inputValue.length === 0 ? 0 : 400;
|
|
const timeoutId = window.setTimeout(() => {
|
|
setFilterString(inputValue);
|
|
}, TIMEOUT_MS);
|
|
return () => {
|
|
clearTimeout(timeoutId);
|
|
};
|
|
}, [inputValue]);
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>Flash Card App</title>
|
|
</Head>
|
|
<main className={styles.wrapper}>
|
|
<motion.h1 initial={{ y: -50, opacity: 0 }} animate={{ y: 0, opacity: 1 }} className={styles.heading}>
|
|
Select one of the topics below
|
|
</motion.h1>
|
|
<Filter value={inputValue} onChangeHandler={handleInputChange} />
|
|
<ListEntries filterString={filterString} data={data} />
|
|
</main>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Home;
|
|
|
|
|
|
|
|
================================================
|
|
FILE: pages/[slug]/index.tsx
|
|
================================================
|
|
import { GetServerSidePropsContext } from "next";
|
|
|
|
export default function Redirect() {
|
|
return null;
|
|
}
|
|
|
|
export async function getServerSideProps(_context: GetServerSidePropsContext) {
|
|
return {
|
|
redirect: {
|
|
destination: "/",
|
|
permanent: true,
|
|
},
|
|
};
|
|
}
|
|
|
|
|
|
|
|
================================================
|
|
FILE: pages/[slug]/card/index.tsx
|
|
================================================
|
|
import { useState } from "react";
|
|
import { GetStaticPropsContext } from "next";
|
|
import FlipCard from "@components/FlipCard";
|
|
import EndCard from "@components/EndCard";
|
|
import ProgressBar from "@components/ProgressBar";
|
|
import useIndexSelectedData from "@hooks/useIndexSelectedData";
|
|
import useShuffledData from "@hooks/useShuffledData";
|
|
import { AnimatePresence, motion } from "framer-motion";
|
|
import styles from "@styles/Card.module.scss";
|
|
import useStreak from "@hooks/useStreak";
|
|
import Head from "next/head";
|
|
|
|
interface Props {
|
|
title: string;
|
|
rawData: Question[];
|
|
dataClass: ClassString;
|
|
}
|
|
|
|
export const getStaticProps = async ({ params }: GetStaticPropsContext) => {
|
|
const apiData = await fetch(`${process.env.API_URL}/cards?filters[slug][$eq]=${params?.slug}&populate=questions`, {
|
|
method: "GET",
|
|
headers: {
|
|
Authorization: `Bearer ${process.env.API_TOKEN}`,
|
|
"content-type": "application/json",
|
|
},
|
|
});
|
|
let dataArray: ApiResponse = await apiData.json();
|
|
|
|
if (!dataArray.data.length) {
|
|
return {
|
|
redirect: {
|
|
destination: "/",
|
|
permanent: false,
|
|
},
|
|
};
|
|
}
|
|
|
|
const {
|
|
attributes: { title, questions, class: classString },
|
|
} = dataArray.data[0];
|
|
return {
|
|
props: {
|
|
title,
|
|
rawData: questions,
|
|
dataClass: classString,
|
|
},
|
|
revalidate: 60,
|
|
};
|
|
};
|
|
|
|
export async function getStaticPaths() {
|
|
const rawData = await fetch(`${process.env.API_URL}/cards`, {
|
|
method: "GET",
|
|
headers: {
|
|
Authorization: `Bearer ${process.env.API_TOKEN}`,
|
|
"content-type": "application/json",
|
|
},
|
|
});
|
|
let data: ApiResponse = await rawData.json();
|
|
|
|
const paths = data.data.map((d) => {
|
|
return {
|
|
params: { slug: d.attributes.slug },
|
|
};
|
|
});
|
|
|
|
return { paths, fallback: "blocking" };
|
|
}
|
|
|
|
export default function CardId({ title, rawData, dataClass }: Props) {
|
|
const [incorrectAnswers, setIncorrectAnswers] = useState<Question[]>([]);
|
|
const [correctAnswers, setCorrectAnswers] = useState<Question[]>([]);
|
|
const [streak, setStreak, maxStreak, resetStreak] = useStreak();
|
|
const { data, isShuffled, reshuffle } = useShuffledData(rawData);
|
|
const {
|
|
selectedItem,
|
|
selectedIndex,
|
|
nextItem,
|
|
resetIndex,
|
|
amountOfItems,
|
|
progress: { isDone },
|
|
} = useIndexSelectedData(data);
|
|
|
|
const onAnswer = (rightAnswer: boolean, data: Question) => {
|
|
const stateUpdater = rightAnswer ? setCorrectAnswers : setIncorrectAnswers;
|
|
stateUpdater((prevState) => {
|
|
if (prevState == null) return [data];
|
|
return [...prevState, data];
|
|
});
|
|
if (rightAnswer === true) {
|
|
setStreak((c) => c + 1);
|
|
}
|
|
if (rightAnswer === false) {
|
|
setStreak(0);
|
|
}
|
|
nextItem();
|
|
};
|
|
|
|
const handleRestart = (newData: Question[] | null = null) => {
|
|
resetIndex();
|
|
setIncorrectAnswers([]);
|
|
setCorrectAnswers([]);
|
|
reshuffle(newData);
|
|
resetStreak();
|
|
};
|
|
|
|
const getKeyFromData = (d: Question) => {
|
|
return `${d.id}_${d.question}_${d.answer}`;
|
|
};
|
|
|
|
if (!rawData || !isShuffled || selectedItem == null) return null;
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>{title} | Card Mode | Flash Card App</title>
|
|
</Head>
|
|
<div className={styles.container}>
|
|
<AnimatePresence mode="wait">
|
|
{!isDone ? (
|
|
<motion.div key="cards" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
|
|
<ProgressBar currentAmount={selectedIndex} maxAmount={amountOfItems} streak={streak} />
|
|
<AnimatePresence>
|
|
<FlipCard
|
|
key={getKeyFromData(selectedItem)}
|
|
dataClass={dataClass}
|
|
onAnswer={onAnswer}
|
|
data={selectedItem}
|
|
/>
|
|
</AnimatePresence>
|
|
</motion.div>
|
|
) : (
|
|
<EndCard
|
|
key="endcard"
|
|
mode="cards"
|
|
data={{ correct: correctAnswers, incorrect: incorrectAnswers }}
|
|
dataClass={dataClass}
|
|
amount={rawData.length}
|
|
onRestart={handleRestart}
|
|
streak={maxStreak}
|
|
/>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
|
|
|
|
================================================
|
|
FILE: pages/[slug]/list/index.tsx
|
|
================================================
|
|
import { useEffect, useRef, useState } from "react";
|
|
import styles from "@styles/List.module.scss";
|
|
import classNames from "classnames";
|
|
import getAccentForClass from "@utils/getAccentForClass";
|
|
import { GetStaticPropsContext } from "next";
|
|
import groupBy from "@utils/groupBy";
|
|
import { ArrowCircleDown2, ArrowCircleRight2, Back, Danger } from "iconsax-react";
|
|
import { motion } from "framer-motion";
|
|
import Link from "next/link";
|
|
import Head from "next/head";
|
|
|
|
interface Props {
|
|
data: Card;
|
|
}
|
|
|
|
export default function CardId({
|
|
data: {
|
|
attributes: { questions, title, class: classString },
|
|
},
|
|
}: Props) {
|
|
const headerRef = useRef<HTMLHeadingElement | null>(null);
|
|
const [isSticky, setIsSticky] = useState(false);
|
|
const [dupsData, setDupsData] = useState<Question[][]>();
|
|
|
|
const topContainerClasses = classNames(styles["top__container"], {
|
|
[`${styles["top__container--sticky"]}`]: isSticky,
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (!questions) return;
|
|
const grouped = groupBy(questions, (q) => q.question);
|
|
const values = Object.values(grouped);
|
|
const dups = values.filter((v) => v.length > 1);
|
|
if (dups.length > 0) setDupsData(dups);
|
|
}, [questions]);
|
|
|
|
useEffect(() => {
|
|
const cachedRef = headerRef.current;
|
|
if (cachedRef == null) return;
|
|
const observer = new IntersectionObserver(
|
|
([entry]) => {
|
|
setIsSticky(entry.intersectionRatio < 1);
|
|
},
|
|
{ threshold: [1], rootMargin: "0px 100% 0px 100%" }
|
|
);
|
|
|
|
observer.observe(cachedRef);
|
|
return () => {
|
|
observer.unobserve(cachedRef);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>{title} | List View | Flash Card App</title>
|
|
</Head>
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
className={styles.container}
|
|
style={{ margin: "2rem auto 0", ["--clr-accent" as any]: getAccentForClass(classString) }}
|
|
>
|
|
<div>
|
|
<Link className={styles.backButton} href="/">
|
|
<>
|
|
<Back variant="Outline" size="1.125rem" color="currentColor" />
|
|
Go Back
|
|
</>
|
|
</Link>
|
|
</div>
|
|
<h1 className={styles.title}>
|
|
List view for <br />
|
|
<span>
|
|
{title}
|
|
<motion.div
|
|
initial={{ scaleX: 0 }}
|
|
animate={{ scaleX: 1, transition: { delay: 0.3 } }}
|
|
className={styles.line}
|
|
/>
|
|
</span>
|
|
</h1>
|
|
</motion.div>
|
|
{dupsData && (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1, transition: { delay: 0.3 } }}
|
|
className={classNames(styles.container, styles.dupWarning)}
|
|
>
|
|
<h1>
|
|
<Danger size="32" color="currentColor" variant="Bold" />
|
|
Duplicates found in this dataset
|
|
</h1>
|
|
<p>Please combine them into one for a better learning experience by using e.x. a comma</p>
|
|
<h3>List of duplicates</h3>
|
|
<ol>
|
|
{dupsData.map((dup) => {
|
|
return <li key={dup[0].question}>{dup[0].question}</li>;
|
|
})}
|
|
</ol>
|
|
</motion.div>
|
|
)}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1, transition: { delay: 0.3 } }}
|
|
ref={headerRef}
|
|
className={topContainerClasses}
|
|
style={{ ["--clr-accent" as any]: getAccentForClass(classString) }}
|
|
>
|
|
<div className={styles.container}>
|
|
<header className={styles.top}>
|
|
<p>Question</p>
|
|
<ArrowCircleRight2 size="32" color="currentColor" variant="Bold" />
|
|
<p>Answer</p>
|
|
</header>
|
|
</div>
|
|
</motion.div>
|
|
<div className={styles.container} style={{ ["--clr-accent" as any]: getAccentForClass(classString) }}>
|
|
<div className={styles.list}>
|
|
{questions.map((d, index) => {
|
|
let { answer, question } = d;
|
|
return (
|
|
<motion.div
|
|
initial={{ y: 20, opacity: 0 }}
|
|
animate={{ y: 0, opacity: 1, transition: { delay: 0.05 * index + 0.3 } }}
|
|
className={styles.list__item}
|
|
key={`${question}-${answer}`}
|
|
>
|
|
<div className={styles.question}>{question}</div>
|
|
<div className={styles.spacer}></div>
|
|
<ArrowCircleDown2 size="32" color="var(--clr-accent)" variant="Bold" />
|
|
<div className={styles.answer}>
|
|
<span>{answer}</span>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export const getStaticProps = async ({ params }: GetStaticPropsContext) => {
|
|
const apiData = await fetch(`${process.env.API_URL}/cards?filters[slug][$eq]=${params?.slug}&populate=questions`, {
|
|
method: "GET",
|
|
headers: {
|
|
Authorization: `Bearer ${process.env.API_TOKEN}`,
|
|
"content-type": "application/json",
|
|
},
|
|
});
|
|
let dataArray: ApiResponse = await apiData.json();
|
|
|
|
if (!dataArray.data.length) {
|
|
return {
|
|
redirect: {
|
|
destination: "/",
|
|
permanent: false,
|
|
},
|
|
};
|
|
}
|
|
|
|
const rawData = dataArray.data[0];
|
|
return {
|
|
props: {
|
|
data: rawData,
|
|
},
|
|
revalidate: 60,
|
|
};
|
|
};
|
|
|
|
export async function getStaticPaths() {
|
|
const rawData = await fetch(`${process.env.API_URL}/cards`, {
|
|
method: "GET",
|
|
headers: {
|
|
Authorization: `Bearer ${process.env.API_TOKEN}`,
|
|
"content-type": "application/json",
|
|
},
|
|
});
|
|
let data: ApiResponse = await rawData.json();
|
|
|
|
const paths = data.data.map((d) => {
|
|
return {
|
|
params: { slug: d.attributes.slug },
|
|
};
|
|
});
|
|
|
|
return { paths, fallback: "blocking" };
|
|
}
|
|
|
|
|
|
|
|
================================================
|
|
FILE: pages/[slug]/spelling/index.tsx
|
|
================================================
|
|
import { FC, useState } from "react";
|
|
import styles from "@styles/Spelling.module.scss";
|
|
import { GetStaticPropsContext } from "next";
|
|
import { AnimatePresence, motion } from "framer-motion";
|
|
import useShuffledData from "@hooks/useShuffledData";
|
|
import useIndexSelectedData from "@hooks/useIndexSelectedData";
|
|
import EndCard from "@components/EndCard";
|
|
import ProgressBar from "@components/ProgressBar";
|
|
import SpellingByWord from "@components/SpellingByWord";
|
|
import useStreak from "@hooks/useStreak";
|
|
import Head from "next/head";
|
|
|
|
interface Props {
|
|
title: string;
|
|
rawData: Question[];
|
|
dataClass: ClassString;
|
|
}
|
|
|
|
const getKeyFromQuestion = (d: Question) => {
|
|
return `${d.id}_${d.question}_${d.answer}`;
|
|
};
|
|
|
|
const CardId: FC<Props> = ({ title, rawData, dataClass }) => {
|
|
const { data, isShuffled, reshuffle } = useShuffledData(rawData);
|
|
const { selectedItem, selectedIndex, nextItem, resetIndex, progress, amountOfItems } = useIndexSelectedData(data);
|
|
const [incorrectAnswers, setIncorrectAnswers] = useState<SpellingData[]>([]);
|
|
const [correctAnswers, setCorrectAnswers] = useState<SpellingData[]>([]);
|
|
const [streak, setStreak, maxStreak, resetStreak] = useStreak();
|
|
|
|
const onRestart = (newData: Question[] | null = null) => {
|
|
resetIndex();
|
|
setIncorrectAnswers([]);
|
|
setCorrectAnswers([]);
|
|
reshuffle(newData);
|
|
resetStreak();
|
|
};
|
|
|
|
const onAnswer = (answeredRight: boolean, input: string, expected: string, data: Question) => {
|
|
const stateUpdater = answeredRight ? setCorrectAnswers : setIncorrectAnswers;
|
|
const answerData: SpellingData = {
|
|
input,
|
|
expected,
|
|
data,
|
|
};
|
|
stateUpdater((prevState) => {
|
|
return [...prevState, answerData];
|
|
});
|
|
if (answeredRight === true) {
|
|
setStreak((c) => c + 1);
|
|
}
|
|
if (answeredRight === false) {
|
|
setStreak(0);
|
|
}
|
|
nextItem();
|
|
};
|
|
|
|
if (!rawData || !isShuffled || selectedItem == null) return null;
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>{title} | Spelling Mode | Flash Card App</title>
|
|
</Head>
|
|
<div className={styles.container}>
|
|
<AnimatePresence mode="wait">
|
|
{!progress.isDone ? (
|
|
<motion.div key="cards" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
|
|
<ProgressBar currentAmount={selectedIndex} maxAmount={amountOfItems} streak={streak} />
|
|
<AnimatePresence>
|
|
<SpellingByWord
|
|
data={selectedItem as Question}
|
|
onAnswer={onAnswer}
|
|
key={getKeyFromQuestion(selectedItem as Question)}
|
|
/>
|
|
</AnimatePresence>
|
|
</motion.div>
|
|
) : (
|
|
<EndCard
|
|
key="endcard"
|
|
mode="spelling"
|
|
dataClass={dataClass}
|
|
data={{ incorrect: incorrectAnswers, correct: correctAnswers }}
|
|
amount={rawData.length}
|
|
onRestart={onRestart}
|
|
streak={maxStreak}
|
|
/>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export const getStaticProps = async ({ params }: GetStaticPropsContext) => {
|
|
const apiData = await fetch(`${process.env.API_URL}/cards?filters[slug][$eq]=${params?.slug}&populate=questions`, {
|
|
method: "GET",
|
|
headers: {
|
|
Authorization: `Bearer ${process.env.API_TOKEN}`,
|
|
"content-type": "application/json",
|
|
},
|
|
});
|
|
let dataArray: ApiResponse = await apiData.json();
|
|
|
|
if (!dataArray.data.length) {
|
|
return {
|
|
redirect: {
|
|
destination: "/",
|
|
permanent: false,
|
|
},
|
|
};
|
|
}
|
|
|
|
const {
|
|
attributes: { title, questions, class: classString },
|
|
} = dataArray.data[0];
|
|
return {
|
|
props: {
|
|
title,
|
|
rawData: questions,
|
|
dataClass: classString,
|
|
},
|
|
revalidate: 60,
|
|
};
|
|
};
|
|
|
|
export async function getStaticPaths() {
|
|
const rawData = await fetch(`${process.env.API_URL}/cards`, {
|
|
method: "GET",
|
|
headers: {
|
|
Authorization: `Bearer ${process.env.API_TOKEN}`,
|
|
"content-type": "application/json",
|
|
},
|
|
});
|
|
let data: ApiResponse = await rawData.json();
|
|
|
|
const paths = data.data.map((d) => {
|
|
return {
|
|
params: { slug: d.attributes.slug },
|
|
};
|
|
});
|
|
|
|
return { paths, fallback: "blocking" };
|
|
}
|
|
|
|
export default CardId;
|
|
|
|
|
|
|
|
================================================
|
|
FILE: styles/_variables.scss
|
|
================================================
|
|
body {
|
|
--clr-background-200: hsl(0, 0%, 10%);
|
|
--clr-background-300: hsl(0, 0%, 13%);
|
|
--clr-background-400: hsl(0, 0%, 16%);
|
|
--clr-background-500: hsl(0, 0%, 20%);
|
|
--clr-background-600: hsl(0, 0%, 30%);
|
|
--clr-background-card: hsl(0, 0%, 20%);
|
|
--clr-text: hsl(0, 0%, 96%);
|
|
--clr-text-muted: hsl(0, 0%, 70%);
|
|
|
|
--clr-accent-blue: hsl(212, 75%, 70%);
|
|
--clr-accent-green: hsl(124, 60%, 69%);
|
|
--clr-accent-green-darker: hsl(124, 40%, 56%);
|
|
--clr-accent-peachy: hsl(23, 90%, 68%);
|
|
--clr-accent-red: hsl(359, 100%, 70%);
|
|
--clr-accent-red-darker: hsl(359, 63%, 54%);
|
|
--clr-accent-yellow: hsl(49, 100%, 50%);
|
|
--clr-accent-pink: hsl(333, 71%, 51%);
|
|
}
|
|
|
|
body.light {
|
|
--clr-background-300: hsl(0, 0%, 96%);
|
|
--clr-background-400: hsl(0, 0%, 93%);
|
|
--clr-background-500: hsl(0, 0%, 86%);
|
|
--clr-background-600: hsl(0, 0%, 86%);
|
|
--clr-background-card: hsl(0, 0%, 80%);
|
|
--clr-text: hsl(0, 0%, 8%);
|
|
--clr-text-muted: hsl(0, 0%, 20%);
|
|
|
|
--clr-accent-blue: hsl(212, 90%, 60%);
|
|
--clr-accent-green: hsl(113, 51%, 55%);
|
|
--clr-accent-green-darker: hsl(113, 51%, 45%);
|
|
--clr-accent-peachy: hsl(23, 90%, 68%);
|
|
--clr-accent-red: hsl(359, 100%, 60%);
|
|
--clr-accent-red-darker: hsl(359, 63%, 50%);
|
|
}
|
|
|
|
|
|
|
|
================================================
|
|
FILE: styles/Card.module.scss
|
|
================================================
|
|
.container {
|
|
min-height: 100vh;
|
|
padding: 1rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
|
|
================================================
|
|
FILE: styles/globals.scss
|
|
================================================
|
|
@use "variables";
|
|
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&family=Source+Code+Pro:wght@600&display=swap");
|
|
|
|
html,
|
|
body,
|
|
#__next {
|
|
min-height: 100%;
|
|
width: 100vw;
|
|
}
|
|
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
background-color: var(--clr-background-300);
|
|
color: var(--clr-text);
|
|
font-family: "Poppins", sans-serif;
|
|
overflow-x: hidden;
|
|
-webkit-tap-highlight-color: transparent; //remove annoying highlight on mobile chrome
|
|
&.no-scroll {
|
|
overflow-y: hidden;
|
|
}
|
|
}
|
|
|
|
#__next {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
input {
|
|
font-family: inherit;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
-moz-outline-radius: 0px !important;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
================================================
|
|
FILE: styles/Home.module.scss
|
|
================================================
|
|
.wrapper {
|
|
padding: 2rem;
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
max-width: 800px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.adminLink {
|
|
color: var(--clr-accent-blue);
|
|
margin-bottom: 1.5rem;
|
|
&:focus,
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
.heading {
|
|
margin-top: 0;
|
|
margin-bottom: 2rem;
|
|
font-size: clamp(1.5rem, 8vw, 2.5rem);
|
|
font-weight: 700;
|
|
}
|
|
|
|
@media (min-width: 450px) {
|
|
.heading {
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
================================================
|
|
FILE: styles/List.module.scss
|
|
================================================
|
|
.container {
|
|
margin: 0 auto;
|
|
width: calc(100% - 3rem);
|
|
display: grid;
|
|
max-width: 750px;
|
|
}
|
|
|
|
.backButton {
|
|
padding: 0.5em 1em;
|
|
border-radius: 4px;
|
|
font-size: 0.85rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5em;
|
|
display: inline-flex;
|
|
background-color: var(--clr-background-400);
|
|
}
|
|
|
|
.title {
|
|
font-size: 1.5rem;
|
|
font-weight: 500;
|
|
span {
|
|
font-size: 1.35em;
|
|
font-weight: 700;
|
|
color: var(--clr-accent);
|
|
.line {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dupWarning {
|
|
border-radius: 4px;
|
|
padding: 1rem;
|
|
margin-bottom: 2rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: var(--clr-background-300);
|
|
background-color: var(--clr-accent-yellow);
|
|
h1 {
|
|
font-size: 1.5rem;
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
|
|
svg {
|
|
margin-right: 0.75rem;
|
|
width: 3rem;
|
|
height: 3rem;
|
|
}
|
|
}
|
|
h3 {
|
|
margin: 0;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
ol {
|
|
margin: 0;
|
|
padding-left: 1rem;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.top__container {
|
|
display: none;
|
|
}
|
|
|
|
.list {
|
|
display: grid;
|
|
row-gap: 1rem;
|
|
margin-bottom: 2rem;
|
|
grid-template-columns: 1fr;
|
|
&__item {
|
|
padding: 1rem;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
border-radius: 4px;
|
|
background-color: var(--clr-background-400);
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: auto 40px auto;
|
|
column-gap: 0.5rem;
|
|
.question,
|
|
.answer {
|
|
text-align: center;
|
|
font-size: 1.125rem;
|
|
}
|
|
.answer {
|
|
font-weight: 700;
|
|
color: var(--clr-accent);
|
|
}
|
|
.question {
|
|
font-weight: 500;
|
|
}
|
|
.spacer {
|
|
display: none;
|
|
}
|
|
svg {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
place-self: center;
|
|
margin: 0.25rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (min-width: 600px) {
|
|
.top__container {
|
|
max-width: none;
|
|
position: sticky;
|
|
top: -1px;
|
|
display: block;
|
|
padding-top: 1px;
|
|
z-index: 2;
|
|
background-color: var(--clr-background-300);
|
|
isolation: isolate;
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: -1;
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
|
|
opacity: 0;
|
|
transition: opacity 150ms ease;
|
|
}
|
|
|
|
&--sticky {
|
|
svg {
|
|
opacity: 1 !important;
|
|
}
|
|
&::after {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.top {
|
|
display: grid;
|
|
grid-template-columns: 1fr 60px 1fr;
|
|
column-gap: 2rem;
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
padding: 0 1rem;
|
|
svg {
|
|
place-self: center;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
transition: opacity 150ms ease;
|
|
opacity: 0;
|
|
color: var(--clr-accent);
|
|
}
|
|
& > p:last-child {
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dupWarning {
|
|
h1 {
|
|
font-size: 2rem;
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
font-size: 2rem;
|
|
span {
|
|
padding-right: 0.25em;
|
|
background-color: var(--clr-background-300);
|
|
position: relative;
|
|
.line {
|
|
display: block !important;
|
|
width: 750px;
|
|
height: 3px;
|
|
position: absolute;
|
|
transform-origin: left;
|
|
top: 50%;
|
|
left: 0;
|
|
background: var(--clr-accent);
|
|
z-index: -2;
|
|
}
|
|
}
|
|
}
|
|
|
|
.list {
|
|
grid-template-columns: 1fr;
|
|
&__item {
|
|
grid-template-columns: 1fr 20px 1fr;
|
|
grid-template-rows: auto;
|
|
column-gap: 1rem;
|
|
.spacer {
|
|
display: block;
|
|
height: 100%;
|
|
width: 3px;
|
|
border-radius: 3px;
|
|
background-color: var(--clr-background-500);
|
|
place-self: center;
|
|
}
|
|
svg {
|
|
display: none;
|
|
}
|
|
.question,
|
|
.answer {
|
|
text-align: left;
|
|
color: var(--clr-text);
|
|
}
|
|
.question {
|
|
font-weight: 500;
|
|
}
|
|
.answer {
|
|
color: var(--clr-accent);
|
|
font-weight: 700;
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
================================================
|
|
FILE: styles/Spelling.module.scss
|
|
================================================
|
|
.container {
|
|
min-height: 100vh;
|
|
padding: 1rem;
|
|
position: relative;
|
|
align-items: center;
|
|
justify-content: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
|
|
================================================
|
|
FILE: utils/getAccentForClass.ts
|
|
================================================
|
|
export default function getAccentForClass(cls: ClassString) {
|
|
switch (cls) {
|
|
case "de":
|
|
return "var(--clr-accent-peachy)";
|
|
case "en":
|
|
return "var(--clr-accent-blue)";
|
|
case "geo":
|
|
return "var(--clr-accent-green)";
|
|
}
|
|
}
|
|
|
|
|
|
|
|
================================================
|
|
FILE: utils/getHumanReadableClass.ts
|
|
================================================
|
|
export default function getHumanReadableClass(cls: ClassString) {
|
|
switch (cls) {
|
|
case "de":
|
|
return "German";
|
|
case "en":
|
|
return "English";
|
|
case "geo":
|
|
return "Geography";
|
|
}
|
|
}
|
|
|
|
|
|
|
|
================================================
|
|
FILE: utils/getStreakEmojis.ts
|
|
================================================
|
|
function getStreakEmojis(streak: number): string {
|
|
let multiplicator = 1;
|
|
if (streak >= 20) multiplicator = 2;
|
|
if (streak >= 40) multiplicator = 3;
|
|
if (streak >= 80) multiplicator = 4;
|
|
if (streak >= 160) multiplicator = 5;
|
|
return "🔥".repeat(multiplicator);
|
|
}
|
|
|
|
export default getStreakEmojis;
|
|
|
|
|
|
|
|
================================================
|
|
FILE: utils/groupBy.ts
|
|
================================================
|
|
const groupBy = <T, K extends keyof any>(list: T[], getKey: (item: T) => K) =>
|
|
list.reduce((previous, currentItem) => {
|
|
const group = getKey(currentItem);
|
|
if (!previous[group]) previous[group] = [];
|
|
previous[group].push(currentItem);
|
|
return previous;
|
|
}, {} as Record<K, T[]>);
|
|
|
|
export default groupBy;
|
|
|
|
|
|
|
|
================================================
|
|
FILE: utils/shuffle.ts
|
|
================================================
|
|
function shuffle<T>(a: T[]) {
|
|
const aC = a.slice();
|
|
for (let i = aC.length - 1; i > 0; i--) {
|
|
const j = Math.floor(Math.random() * (i + 1));
|
|
[aC[i], aC[j]] = [aC[j], aC[i]];
|
|
}
|
|
return aC;
|
|
}
|
|
|
|
export default shuffle;
|
|
|
|
|