// 黒板 — 手書き風に文字と図がリアルタイムで描かれる演出
const { useEffect, useRef, useState: useStateBB } = React;
// ラフな手書き風の線を描くためのユーティリティ
function roughPath(x1, y1, x2, y2, amp = 2) {
const mx = (x1+x2)/2 + (Math.random()-0.5)*amp;
const my = (y1+y2)/2 + (Math.random()-0.5)*amp;
return `M ${x1} ${y1} Q ${mx} ${my} ${x2} ${y2}`;
}
// 各文字を「チョーク風に現れる」アニメで表示
function ChalkText({ text, x, y, size = 32, delay = 0, color = '#fff' }) {
return (
{text}
);
}
// 手書き風に線を一本、stroke-dashoffset でアニメーション
function ChalkStroke({ d, delay = 0, duration = 0.8, color = '#fff', width = 2.5, opacity = 1 }) {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
const len = el.getTotalLength ? el.getTotalLength() : 300;
el.style.strokeDasharray = len;
el.style.strokeDashoffset = len;
el.getBoundingClientRect();
el.style.transition = `stroke-dashoffset ${duration}s ease-out ${delay}s, opacity 0.2s linear ${delay}s`;
el.style.strokeDashoffset = 0;
el.style.opacity = opacity;
}, [d, delay, duration, opacity]);
return ;
}
function Blackboard({ theme = 'green', content = null, boardKey = 0 }) {
// theme: green (緑の黒板) / paper (茶紙) / white (白板)
const palette = {
green: { bg: '#2b4a34', bg2: '#1f3627', frame: '#8a6237', chalk: '#f6eed8', chalkAccent: '#f2c94c', chalkRed: '#f2a88b' },
brown: { bg: '#4a3520', bg2: '#372616', frame: '#8a6237', chalk: '#f6eed8', chalkAccent: '#f2c94c', chalkRed: '#f2a88b' },
white: { bg: '#fbf6e8', bg2: '#f3ecd6', frame: '#8a6237', chalk: '#2d2418', chalkAccent: '#c84a3b', chalkRed: '#6b8e5a' },
}[theme] || { bg: '#2b4a34', bg2: '#1f3627', frame: '#8a6237', chalk: '#f6eed8', chalkAccent: '#f2c94c', chalkRed: '#f2a88b' };
return (
{/* 木目テクスチャ */}
{/* 黒板面 — SVGで手書き表示 */}
{/* チョークトレイ */}