{fmtClock(nowMin)} / {fmtClock(totalMin)}
onScrub(parseFloat(e.target.value))}>
{[15, 45, 120].map((s) => (
))}
{voiceList && voiceList.length > 0 ? (
) : null}
);
}
function App() {
const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
const saved = React.useMemo(loadSaved, []);
const [lang, setLang] = React.useState(() => (saved && saved.lang) || 'vi');
const T = React.useMemo(() => window.makeT(lang), [lang]);
React.useEffect(() => { AUDIOX.setLang(lang); document.documentElement.setAttribute('lang', lang); }, [lang]);
const [p, setP] = React.useState(() => ({ ...DEFAULT_PARAMS, ...(saved && saved.params) }));
const [nowMin, setNowMin] = React.useState(() => (saved && typeof saved.nowMin === 'number' ? saved.nowMin : 150));
const [playing, setPlaying] = React.useState(false);
const [speed, setSpeed] = React.useState(45); // phút mô phỏng / giây thực
const [sound, setSound] = React.useState(() => ({ sfx: true, voice: true, ...(saved && saved.sound) }));
const meat = MEATS[p.meatId];
const totalMin = Math.round(p.hours * 60);
const set = (patch) => setP((prev) => ({ ...prev, ...patch }));
// mô phỏng đầy đủ — tính lại khi tham số đổi
const simResult = React.useMemo(() => SIM.simulate(p), [JSON.stringify(p)]);
const plan = React.useMemo(() => SIM.fuelPlan(p, simResult.setpoint), [JSON.stringify(p)]);
const events = React.useMemo(() => buildSchedule(simResult, p, plan, T), [simResult, plan, T]);
const s = SIM.sampleAt(simResult, Math.min(nowMin, totalMin));
// nhiệt 3 vùng tại thời điểm hiện tại
const zoneTemps = React.useMemo(() => {
const out = {};
const rackOff = RACKS.find((r) => r.id === p.rackId).tempOffset;
for (const z of ZONES) out[z.id] = Math.round(s.pit + (z.tempOffset + rackOff) * Math.min(1, nowMin / 42));
return out;
}, [s.pit, p.rackId, nowMin]);
// đồng hồ mô phỏng
React.useEffect(() => {
if (!playing) return;
let last = performance.now(), raf;
const tick = (now) => {
const dt = (now - last) / 1000; last = now;
setNowMin((m) => {
const next = m + dt * speed;
if (next >= totalMin) { setPlaying(false); return totalMin; }
return next;
});
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [playing, speed, totalMin]);
// lưu trạng thái
React.useEffect(() => {
const id = setTimeout(() => {
try { localStorage.setItem(LS_KEY, JSON.stringify({ params: p, nowMin: Math.round(nowMin), sound, lang })); } catch (e) {}
}, 400);
return () => clearTimeout(id);
}, [p, sound, lang, Math.round(nowMin / 4)]);
React.useEffect(() => { if (nowMin > totalMin) setNowMin(totalMin); }, [totalMin]);
React.useEffect(() => {
document.documentElement.style.setProperty('--accent', tw.accent);
}, [tw.accent]);
const tips = liveTips(p, s, meat, nowMin / 60, T);
const simHours = nowMin / 60;
// ====== ÂM THANH + LỜI ĐỌC ======
const fireLevel = Math.min(1, (p.fuelRate / 4) * (0.4 + 0.6 * p.vent));
const qualityNow = SIM.smokeQuality(p.vent, p.fuelRate);
const verdictNow = SIM.verdict(meat, s, simHours, T);
// tiếng lửa nền theo độ lớn lửa
React.useEffect(() => {
if (playing && sound.sfx) AUDIOX.fireOn(fireLevel);
else AUDIOX.fireOff();
}, [playing, sound.sfx, Math.round(fireLevel * 10)]);
React.useEffect(() => () => { AUDIOX.fireOff(); AUDIOX.stopSpeak(); }, []);
// đọc từng bước lịch trình khi đồng hồ chạy qua
const lastMinRef = React.useRef(nowMin);
React.useEffect(() => {
const prev = lastMinRef.current; lastMinRef.current = nowMin;
if (!playing || nowMin <= prev || nowMin - prev > 240) return;
const crossed = events.filter((e) => e.min > prev && e.min <= nowMin);
if (!crossed.length) return;
const e = crossed[crossed.length - 1];
if (sound.sfx) AUDIOX.ding();
if (sound.voice) AUDIOX.speak(T.s('sp_hour', { clock: fmtClock(e.min) }) + e.text);
}, [nowMin]);
// cảnh báo khói bẩn
const lastQualRef = React.useRef(qualityNow);
React.useEffect(() => {
if (qualityNow === lastQualRef.current) return;
lastQualRef.current = qualityNow;
if (qualityNow === 'dirty') {
if (sound.sfx) AUDIOX.warn();
if (sound.voice) AUDIOX.speak(T.s('sp_warn_dirty'));
}
}, [qualityNow]);
// báo khi thịt đạt chuẩn
const lastGradeRef = React.useRef(verdictNow.grade);
React.useEffect(() => {
if (verdictNow.grade === lastGradeRef.current) return;
lastGradeRef.current = verdictNow.grade;
if (verdictNow.grade === 'perfect' && playing) {
if (sound.sfx) AUDIOX.ding();
if (sound.voice) AUDIOX.speak(T.s('sp_perfect', { meat: T.meat(meat.id, 'short'), T: Math.round(s.internal) }));
}
}, [verdictNow.grade]);
const toggleSfx = () => { AUDIOX.ensureCtx(); setSound((sd) => { const v = !sd.sfx; if (v) AUDIOX.click(); else AUDIOX.fireOff(); return { ...sd, sfx: v }; }); };
const toggleVoice = () => { AUDIOX.ensureCtx(); setSound((sd) => { const v = !sd.voice; if (!v) AUDIOX.stopSpeak(); else AUDIOX.speak(T.s('sp_voice_on')); return { ...sd, voice: v }; }); };
const speakStep = (e) => {
AUDIOX.ensureCtx();
if (AUDIOX.speaking()) { AUDIOX.stopSpeak(); return; }
AUDIOX.speak(e ? T.s('sp_step_now', { clock: fmtClock(e.min) }) + e.text : T.s('sp_no_step'));
};
const speakAll = () => {
AUDIOX.ensureCtx();
if (AUDIOX.speaking()) { AUDIOX.stopSpeak(); return; }
const mains = events.filter((e) => !e.minor);
let txt = T.s('sp_all_intro', { name: T.meat(meat.id, 'name'), n: p.units, unit: T.meat(meat.id, 'unit'), hours: p.hours });
txt += T.s('sp_all_prep', { char: plan.charcoalKg, logs: plan.oakLogs });
txt += mains.map((e) => T.s('sp_all_hour', { clock: fmtClock(e.min) }) + e.text).join(' ');
txt += T.s('sp_all_outro', { feed: plan.feedEveryMin });
AUDIOX.speak(txt);
};
// danh sách giọng đọc theo ngôn ngữ hiện tại
const [voiceList, setVoiceList] = React.useState(() => AUDIOX.getVoicesFor(lang));
const [voiceName, setVoiceName] = React.useState(() => { const v = AUDIOX.currentVoiceFor(lang); return v ? v.name : ''; });
React.useEffect(() => {
if (!window.speechSynthesis) return;
const update = () => {
setVoiceList(AUDIOX.getVoicesFor(lang));
const v = AUDIOX.currentVoiceFor(lang); setVoiceName(v ? v.name : '');
};
update();
speechSynthesis.addEventListener('voiceschanged', update);
return () => speechSynthesis.removeEventListener('voiceschanged', update);
}, [lang]);
const pickVoice = (name) => {
AUDIOX.setVoice(name); setVoiceName(name);
AUDIOX.ensureCtx(); AUDIOX.speak(T.s('sp_voice_changed'));
};
const changeLang = (lng) => {
setLang(lng); AUDIOX.setLang(lng); AUDIOX.stopSpeak();
const v = AUDIOX.currentVoiceFor(lng); setVoiceName(v ? v.name : '');
setVoiceList(AUDIOX.getVoicesFor(lng));
};
return (