number-master

store.js (7248B)

---

 import { nativeStringFromNumber } from "./native.js";
 import { sinoStringFromNumber } from "./sino.js";
 import { hourStringFromNumber } from "./time.js";
 
 /**
  * @typedef {
  * 	| "number"
  * 	| "hangeul"
  * } Mode
  */
 
 /**
  * @typedef {
  * 	| "sino"
  * 	| "native"
  * 	| "time"
  * 	| "date"
  * 	| "counter"
  * } Tab
  */
 
 /**
  * @typedef {
  * 	| "correct"
  * 	| "incorrect"
  * 	| "undecided"
  * } QuestionState
  */
 
 /**
  * @typedef {Object} Config
  * @property {Mode} mode
  * @property {number} min
  * @property {number} max
  */
 
 /**
  * @typedef {Object} Time
  * @property {number} hour
  * @property {number} minute
  */
 
 /** @type {number} */
 const HINT_THRESHOLD = 3;
 
 const DEFAULT_CONFIG = {
 	mode: "number",
 	min: 1,
 	max: 10000,
 };
 
 window.Alpine.store("app", {
 	/** @type {number} */
 	num: 0,
 	/** @type {number} */
 	min: DEFAULT_CONFIG.min,
 	/** @type {number} */
 	max: DEFAULT_CONFIG.max,
 	/** @type {Mode} */
 	mode: DEFAULT_CONFIG.mode,
 	/** @type {Tab} */
 	tab: "sino",
 	/** @type {QuestionState} */
 	questionState: "undecided",
 	/** @type {string | null} */
 	rangeError: null,
 	/** @type {boolean} */
 	configSaved: false,
 	/** @type {Time} */
 	time: {
 		hour: 12,
 		minute: 30,
 	},
 	/** @type {Date} */
 	date: new Date(),
 	/** @type {number} */
 	wrongCount: 0,
 	/** @type {string[] | null} */
 	hint: null,
 
 	init() {
 		this.configSaved = false;
 		this.rangeError = null;
 		this.parseConfig();
 		this.onRangeChange();
 		this.newQuestion();
 	},
 
 	parseConfig() {
 		const persistentConfig = localStorage.getItem("numbermasterconfig");
 		if (!persistentConfig) return
 
 		/** @type {Config} */
 		const config = JSON.parse(persistentConfig);
 
 		/** @type {number} */
 		const min = parseInt(config.min, 10);
 		/** @type {number} */
 		const max = parseInt(config.max, 10);
 		switch (config.mode) {
 			case "hangeul":
 				this.mode = "hangeul";
 				break;
 			case "number":
 				this.mode = "number";
 				break;
 			default:
 				this.mode = DEFAULT_CONFIG.mode;
 				console.error("unknown mode selected");
 		}
 
 		this.min = isNaN(min) ? DEFAULT_CONFIG.min : min;
 		this.max = isNaN(max) ? DEFAULT_CONFIG.max : max;
 	},
 
 	/** @returns {string} */
 	get question() {
 		switch (this.mode) {
 			case "number":
 				return this.number;
 			case "hangeul":
 				return this.string;
 		}
 	},
 
 	/** @returns {string} */
 	get answer() {
 		switch (this.mode) {
 			case "number":
 				return this.string;
 			case "hangeul":
 				return this.number;
 		}
 	},
 
 	/** @returns {string} */
 	get string() {
 		switch (this.tab) {
 			case "sino":
 				return sinoStringFromNumber(this.num);
 			case "native":
 				return nativeStringFromNumber(this.num);
 			case "time":
 				return `${hourStringFromNumber(this.time.hour)}시 ${sinoStringFromNumber(this.time.minute)}분`;
 			case "date":
 				let year = sinoStringFromNumber(this.date.getFullYear());
 				if (year.startsWith("일")) year = year.slice(1);
 
 				// getMonth returns 0 for January
 				let month = sinoStringFromNumber(this.date.getMonth() + 1);
 				if (month === "십") month = "시";
 				if (month === "육") month = "유";
 
 				const day = sinoStringFromNumber(this.date.getDate());
 				return `${year}년 ${month}월 ${day}일`;
 			default:
 				throw new Error("unknown tab selected");
 		}
 	},
 
 	/** @returns {string} */
 	get number() {
 		switch (this.tab) {
 			case "sino":
 			case "native":
 				return this.num.toString();
 			case "time":
 				return `${this.time.hour.toString().padStart(2, "0")}:${this.time.minute.toString().padStart(2, "0")}`;
 			case "date":
 				const year = this.date.getFullYear();
 				// getMonth returns 0 for January
 				const month = this.date.getMonth() + 1;
 				const day = this.date.getDate();
 				return `${year}년 ${month}월 ${day}일`;
 			default:
 				throw new Error("unknown tab selected");
 		}
 	},
 
 	/** @returns {string} */
 	get questionHint() {
 		switch (this.tab) {
 			case "sino":
 			case "native":
 				return null;
 			case "time":
 				return [{
 					label: "시간 불규칙",
 					items: [
 						"하나시 → 한시",
 						"둘시 → 두시",
 						"셋시 → 세시",
 						"넷시 → 네시",
 						"열하나시 → 열한시",
 						"열둘시 → 열두시"
 					]
 				}];
 			case "date":
 				return [
 					{ label: "연도 불규칙", items: ["'천' 앞에서는 '일'이 생략됩니다"] },
 					{ label: "월 불규칙", items: ["십월 → 시월", "육월 → 유월"] }
 				];
 			default:
 				throw new Error("unknown tab selected");
 		}
 	},
 
 	/** @param {Event} event */
 	submit(event) {
 		event.preventDefault();
 		/** @type {string} */
 		let input = event.target.input.value;
 		/** @type {string} */
 		const sanitised = input.trim().split(" ").join("");
 
 		if (this.questionState !== "undecided") {
 			this.newQuestion();
 			event.target.input.value = "";
 			this.wrongCount = 0;
 			this.hint = null;
 			this.questionState = "undecided";
 			return
 		}
 
 		/** @type {string} */
 		let answer = this.answer.split(" ").join("");
 
 		if (
 			answer === sanitised ||
 			(this.tab === "time" && answer.slice(1) === sanitised) // "07:52".slice(1) == "7:52"
 		) {
 			this.questionState = "correct";
 		} else {
 			this.wrongCount++;
 			if (this.wrongCount === HINT_THRESHOLD) this.hint = this.questionHint;
 
 			const el = document.getElementById('input');
 			el.classList.add('-wrong-flash');
 			el.addEventListener('animationend', () => el.classList.remove('-wrong-flash'), { once: true });
 		}
 	},
 
 	skip() {
 		if (this.questionState !== "undecided") return
 		this.hint = this.questionHint;
 		this.questionState = "incorrect";
 	},
 
 	onRangeChange() {
 		if (this.min >= this.max) {
 			this.rangeError = "최소값은 최대값보다 작아야 합니다";
 			return;
 		}
 
 		this.rangeError = null;
 		this.newQuestion();
 		this.questionState = "undecided";
 	},
 
 	saveConfig() {
 		/** @type{Config} */
 		const config = { min: this.min, max: this.max, mode: this.mode };
 		localStorage.setItem("numbermasterconfig", JSON.stringify(config));
 		this.configSaved = true;
 
 		setTimeout(() => {
 			this.configSaved = false;
 		}, 2000)
 	},
 
 	/**
 	 * @param {Tab} tab
 	 */
 	changeTab(tab) {
 		this.questionState = "undecided";
 		this.hint = null;
 		this.wrontCount = 0;
 		this.tab = tab;
 		this.newQuestion();
 	},
 
 	newQuestion() {
 		switch (this.tab) {
 			case "sino":
 			case "native":
 				this.num = this.randomNumber;
 				break;
 			case "time":
 				this.time = this.randomNumber;
 				break;
 			case "date":
 				this.date = this.randomNumber;
 				break;
 			default:
 				throw new Error("unknown tab selected");
 		}
 	},
 
 	/** @returns {number | Time} */
 	get randomNumber() {
 		switch (this.tab) {
 			case "sino":
 				return random(this.min, this.max * 10);
 			case "native":
 				return random(1, 100);
 			case "time":
 				return {
 					hour: random(1, 13),
 					minute: random(0, 60),
 				};
 			case "date":
 				return randomDate(new Date(1960, 0, 1), new Date());
 			default:
 				throw new Error("unknown tab selected");
 		}
 	},
 });
 
 /**
  * @param {number} min
  * @param {number} max
  * @returns {number}
  */
 function random(min, max) {
 	return Math.floor(Math.random() * (max - min) + min);
 };
 
 /**
  * @param {Date} start
  * @param {Date} end
  * @returns {Date}
  */
 function randomDate(start, end) {
 	return new Date(+start + Math.random() * (end - start));
 }