verb-master

store.js (4923B)

---

 import { DEFAULT_CONFIG, loadConfig } from "./config.js"
 import { getRandomConjugations, isValidVerb } from "./conjugator.js";
 import { parseCSV } from "./csv.js";
 import "./types.js";
 
 window.Alpine.store("app", {
 	/** @type {"home" | "question" | "result"} */
 	screen: "home",
 	/** @type {Config} */
 	config: loadConfig(),
 	/** @type {number} */
 	questionCount: 10,
 	/** @type {number} */
 	correctCount: 0,
 	/** @type {number} */
 	currentWordIndex: 0,
 	/** @type {"correct" | "incorrect" | "undecided"} */
 	questionState: "undecided",
 	/** @type {string | null} */
 	error: null,
 	/** @type {boolean} */
 	configSaved: false,
 	/** @type {WordConjugation[]} */
 	words: [],
 	/** @type {Array<WordConjugation & { correct: boolean }>} */
 	results: [],
 
 	get tenseGroups() {
 		const registers = ['informal low', 'informal high', 'formal low', 'formal high'];
 		const moods = ['declarative', 'inquisitive', 'imperative', 'propositive'];
 
 		return moods.map(mood => {
 			const keys = Object.keys(this.config.tenses).filter(k => k.startsWith(mood));
 			const times = [...new Set(keys.map(k => {
 				// strip the last two words (the register, e.g. "informal low") to get 
 				// the "time" component
 				const parts = k.slice(mood.length + 1).split(' ');
 				return parts.slice(0, parts.length - 2).join(' ');
 			}))];
 
 			return {
 				mood,
 				columns: registers,
 				rows: times.map(time => ({
 					time,
 					cells: registers.map(reg => ({ key: `${mood} ${time} ${reg}` })),
 				})),
 			};
 		});
 	},
 
 	get tenseSpecials() {
 		const moods = ['declarative', 'inquisitive', 'imperative', 'propositive'];
 		return Object.keys(this.config.tenses).filter(k => !moods.some(m => k.startsWith(m)));
 	},
 
 	start() {
 		this.error = null;
 		this.configSaved = false;
 		this.correctCount = 0;
 		this.currentWordIndex = 0;
 		this.questionState = "undecided";
 		this.results = [];
 
 		/** @type {DB[]} */
 		const dbs = Object.values(this.config.datasets).filter(db => db.enabled).map(db => db.dataset);
 		/** @type {Tense[]} */
 		const tenses = Object.keys(this.config.tenses).filter(tense => this.config.tenses[tense].enabled);
 
 		try {
 			this.words = getRandomConjugations(this.questionCount, tenses, dbs);
 			this.screen = "question";
 		} catch (err) {
 			this.error = err.message;
 			this.screen = "home";
 		}
 	},
 
 	reset() {
 		this.error = null;
 		this.configSaved = false;
 		this.config.tenses = JSON.parse(JSON.stringify(DEFAULT_CONFIG.tenses));
 		const custom = Object.fromEntries(
 			Object.entries(this.config.datasets).filter(([, v]) => v.isCustom)
 		);
 		this.config.datasets = {
 			...JSON.parse(JSON.stringify(DEFAULT_CONFIG.datasets)),
 			...custom,
 		};
 		this.screen = "home";
 	},
 
 	quit() {
 		this.error = null;
 		this.screen = "home";
 	},
 
 	async uploadCSV(event) {
 		/** @type {File} */
 		const file = event.target.files[0];
 		if (!file) return;
 
 		try {
 			/** @type {KimchiCSVRow[]} */
 			const rows = await parseCSV(file);
 			/** @type {string} */
 			const name = file.name.replace(/\.csv$/i, '');
 
 			/** @type {Word[]} */
 			const words = rows.map(r => ({ text: r.word, kimchiLevel: r.kimchiLevel }));
 			/** @type {Word[]} */
 			const filtered = words.filter(word => isValidVerb(word.text));
 
 			this.config.datasets[file.name] = {
 				enabled: true,
 				name,
 				dataset: { words: filtered },
 				isCustom: true,
 			};
 		} catch (err) {
 			this.error = `Unable to read uploaded file: ${err.message}`;
 		}
 	},
 
 	removeDataset(key) {
 		if (this.config.datasets[key]?.isCustom) {
 			delete this.config.datasets[key];
 		}
 	},
 
 	saveConfig() {
 		localStorage.setItem("config", JSON.stringify(this.config));
 		this.configSaved = true;
 
 		setTimeout(() => {
 			this.configSaved = false;
 		}, 2000);
 	},
 
 	skip() {
 		if (this.questionState !== "undecided") return
 
 		this.results.push({
 			word: this.words[this.currentWordIndex].word,
 			conjugation: this.words[this.currentWordIndex].conjugation,
 			correct: false,
 		});
 		this.questionState = "incorrect";
 	},
 
 	/**
 	 * @param {Event} event
 	 */
 	submit(event) {
 		event.preventDefault();
 
 		const input = event.target.input.value;
 
 		if (this.questionState !== "undecided") {
 			if (this.currentWordIndex + 1 >= this.questionCount) {
 				this.screen = "result";
 				return;
 			}
 
 			this.currentWordIndex += 1;
 			event.target.input.value = "";
 			this.questionState = "undecided";
 
 			return;
 		}
 
 		const sanitised = input.trim();
 		const word = this.words[this.currentWordIndex].conjugation.conjugation;
 
 		if (sanitised === word) {
 			this.questionState = "correct";
 			this.correctCount += 1;
 			this.results.push({
 				word: this.words[this.currentWordIndex].word,
 				conjugation: this.words[this.currentWordIndex].conjugation,
 				correct: true,
 			});
 		} else {
 			const el = document.getElementById('input');
 			el.classList.add('-wrong-flash');
 			el.addEventListener('animationend', () => el.classList.remove('-wrong-flash'), { once: true });
 		}
 	},
 });