y/kotsukotsu
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added server, db, auth system

Browse source
This commit is contained in:
polwex 2026-04-06 22:11:34 +09:00
parent 4d3395fa1c
commit 199dab69f9
28 changed files with 989 additions and 192 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/components/LessonSelect.tsx
View file

@ -1,6 +1,6 @@
import { LESSONS } from '../data/lessons'
import type { UserProgress } from '../types'
import styles from '../styles/typing.module.css'
import '../styles/typing.css'
type Props = {
progress: UserProgress
@ -16,13 +16,13 @@ export function LessonSelect({ progress, onSelect }: Props) {
return (
<div>
<div className={styles.modeHeader}>
<h2 className={styles.modeTitle}>Lessons</h2>
<p className={styles.modeSubtitle}>
<div className="modeHeader">
<h2 className="modeTitle">Lessons</h2>
<p className="modeSubtitle">
Master each lesson to unlock the next ({progress.completedLessons.length}/{LESSONS.length} completed)
</p>
</div>
<div className={styles.lessonSelect}>
<div className="lessonSelect">
{LESSONS.map(lesson => {
const unlocked = isUnlocked(lesson.id)
const completed = progress.completedLessons.includes(lesson.id)
@ -30,17 +30,17 @@ export function LessonSelect({ progress, onSelect }: Props) {
return (
<div
key={lesson.id}
className={`${styles.lessonCard} ${!unlocked ? styles.locked : ''} ${completed ? styles.completed : ''}`}
className={`lessonCard ${!unlocked ? 'locked' : ''} ${completed ? 'completed' : ''}`}
onClick={() => unlocked && onSelect(lesson.id)}
>
<div className={styles.lessonId}>Lesson {lesson.id}</div>
<div className={styles.lessonName}>{lesson.name}</div>
<div className="lessonId">Lesson {lesson.id}</div>
<div className="lessonName">{lesson.name}</div>
{lesson.newKeys.length > 0 && (
<div className={styles.lessonKeys}>
<div className="lessonKeys">
New: {lesson.newKeys.join(' ')}
</div>
)}
<div className={styles.lessonStatus}>
<div className="lessonStatus">
{completed ? 'Completed' : unlocked ? 'Ready' : 'Locked'}
</div>
</div>