/* global React */ const { useState, useEffect, useRef } = React; // Read the current data-lang attr off and re-render when it changes. function useLangAttr() { const [lang, setLang] = useState(() => (typeof document !== 'undefined' && document.documentElement.getAttribute('data-lang')) || 'ja'); useEffect(() => { if (typeof document === 'undefined') return; const obs = new MutationObserver(() => { setLang(document.documentElement.getAttribute('data-lang') || 'ja'); }); obs.observe(document.documentElement, { attributes: true, attributeFilter: ['data-lang'] }); return () => obs.disconnect(); }, []); return lang; } // ============================================ // Risograph Machine concept diagram // ============================================ function RisoMachineDiagram() { return ( ); } // ============================================ // Color separation simulator // ============================================ function SeparationSim() { const [layers, setLayers] = useState({ Y: true, P: true, B: true, K: true }); const [combo, setCombo] = useState('YPBK'); const palettes = { YPBK: { Y:'#ffe600', P:'#ff5294', B:'#2c5fff', K:'#1a1a1a', label:'Y + P + B + K (Standard)' }, FLOR: { Y:'#fff04a', P:'#ff3982', B:'#1a1a1a', K:'#0aa3a0', label:'Flo Yellow + Flo Pink + K + Teal' }, DUO: { Y:'#ff7a32', P:'#ff5294', B:'#2c5fff', K:'#1a1a1a', label:'Flo Orange + Pink + Blue + K' }, }; const c = palettes[combo]; const ToggleBtn = ({k, name, hex}) => ( ); // Each "layer" is an SVG of a hibiscus-like simple poster shape, in flat color, mix-blend multiply return (

分版シミュレーター Color Separation Simulator

{Object.keys(palettes).map(k => ( ))}

{/* Yellow layer — sun shape */} {/* Pink layer — flower + RISO */} {/* Blue layer — wave + SHOP (offset/indented under RISO) */} {/* Black layer — outlines on RISO + caption */}

トグルで版を重ねて、データ作成時の色分解を確認できます。 Toggle layers to see how color separation works.

); } // ============================================ // 2-pass timeline animation // ============================================ function PassAnimation() { const lang = useLangAttr(); const isEn = lang === 'en'; const [stage, setStage] = useState(0); // 0 idle, 1 pass1, 2 dry, 3 pass2, 4 done const [playing, setPlaying] = useState(false); const [dryHours, setDryHours] = useState(0); const tRef = useRef(); useEffect(() => { if (!playing) return; if (stage === 0) { setStage(1); return; } if (stage === 1) { const t = setTimeout(() => setStage(2), 2000); return () => clearTimeout(t); } if (stage === 2) { const t = setInterval(() => setDryHours(h => { if (h >= 6) { clearInterval(t); setStage(3); return h; } return h + 0.5; }), 250); return () => clearInterval(t); } if (stage === 3) { const t = setTimeout(() => setStage(4), 2000); return () => clearTimeout(t); } }, [stage, playing]); function reset() { setStage(0); setPlaying(false); setDryHours(0); } function play() { if (stage === 4) reset(); setPlaying(true); if (stage === 0) setStage(1); } const Pass = ({n, ttl, en, desc, active, drums}) => (

PASS {n}

{ttl}

{drums.map((d,i)=>(

D{i+1}

))}

{en}

{desc}

); return (

INTERVAL

{isEn ? 'Drying' : '乾燥'}

DRY {dryHours.toFixed(1)}h

{isEn ? 'Wait several hours' : '数時間〜半日'}

STAGE {stage}/4

); } // Paper flow visualization — paper slides through machine function PaperFlow({stage}) { const lang = useLangAttr(); const isEn = lang === 'en'; return (

); } // ============================================ // Drum swap diagram // ============================================ function DrumSwapDiagram() { const lang = useLangAttr(); const isEn = lang === 'en'; const [step, setStep] = useState(0); // 0 = before, 1 = remove, 2 = insert, 3 = ready return (

{[ ['1', '電源OFF / インクキャップ', 'Power off · Cap ink'], ['2', '取手を握って引き抜く', 'Grip handle · Pull out'], ['3', '次色ドラムを差し込む', 'Insert next drum'], ['4', 'ロック確認 / 電源ON', 'Lock · Power on'], ].map(([n, ja, en], i) => ( ))}

); } // ============================================ // Trapping illustration // ============================================ function TrappingDiagram() { const lang = useLangAttr(); const isEn = lang === 'en'; return ( ); } // Expose to window Object.assign(window, { RisoMachineDiagram, SeparationSim, PassAnimation, DrumSwapDiagram, TrappingDiagram });