// Complete 29x29 character grid with "心" at absolute center (row 15, col 15) const fullGrid = [ ["仁", "智", "懷", "德", "聖", "虞", "唐", "堯", "舜", "禹", "湯", "文", "武", "周", "秦", "漢", "晉", "宋", "齊", "梁", "陳", "隋", "唐", "宋", "元", "明", "清", "民", "國"], ["貞", "志", "篤", "終", "誓", "穹", "蒼", "厚", "載", "乾", "坤", "陰", "陽", "五", "行", "八", "卦", "九", "宮", "十", "干", "十", "二", "支", "萬", "物", "生", "育", "常"], ["欽", "所", "感", "想", "妄", "淫", "荒", "蕩", "馳", "逐", "夸", "誇", "逞", "能", "自", "矜", "自", "滿", "心", "術", "機", "關", "重", "重", "複", "複", "疊", "疊", "層"], ["心", "憂", "增", "慕", "懷", "慘", "傷", "痛", "若", "切", "在", "眼", "前", "目", "送", "飛", "鴻", "漸", "遠", "漸", "遠", "漸", "遠", "矣", "望", "穿", "秋", "水", "眼"], ["綢", "繆", "結", "纏", "繞", "彼", "此", "生", "分", "離", "別", "苦", "短", "長", "苦", "歡", "樂", "少", "悲", "歡", "離", "合", "總", "無", "常", "人", "生", "如", "夢"], ["夢", "幻", "泡", "影", "電", "光", "石", "火", "迅", "疾", "倏", "忽", "剎", "那", "永", "恆", "無", "始", "無", "終", "無", "邊", "無", "際", "遠", "如", "天", "邊", "近"], ["近", "在", "眼", "前", "咫", "尺", "天", "涯", "萬", "里", "相", "隔", "一", "鶴", "汪", "洋", "孤", "帆", "遠", "影", "碧", "空", "盡", "頭", "白", "雲", "深", "處", "人"], ["人", "蹤", "罕", "至", "高", "山", "流", "水", "知", "音", "少", "知", "音", "者", "伯", "牙", "絕", "弦", "鍾", "子", "期", "死", "知", "己", "難", "尋", "覓", "來", "生"], ["生", "緣", "相", "遇", "今", "世", "失", "之", "交", "臂", "悔", "之", "晚", "矣", "悔", "何", "益", "哉", "唯", "有", "相", "思", "相", "念", "朝", "朝", "暮", "暮", "年"], ["年", "年", "歲", "歲", "朝", "朝", "夕", "夕", "白", "首", "相", "對", "青", "絲", "變", "白", "絲", "容", "顏", "衰", "老", "唯", "愛", "永", "存", "於", "心", "間", "矣"], ["矣", "哉", "乎", "呼", "嗟", "吁", "哀", "哉", "人", "生", "何", "其", "苦", "兮", "何", "其", "累", "兮", "何", "其", "擾", "兮", "何", "其", "惱", "兮", "唯", "有", "修"], ["修", "養", "身", "心", "方", "能", "得", "大", "自", "在", "得", "大", "解", "脫", "得", "大", "清", "淨", "得", "大", "光", "明", "得", "大", "智", "慧", "得", "大", "覺"], ["覺", "悟", "悟", "道", "道", "可", "道", "非", "常", "道", "名", "可", "名", "非", "常", "名", "無", "名", "天", "地", "之", "始", "有", "名", "萬", "物", "之", "母", "常"], ["常", "無", "欲", "以", "觀", "其", "妙", "常", "有", "欲", "以", "觀", "其", "徼", "此", "兩", "者", "同", "出", "異", "名", "同", "謂", "之", "玄", "玄", "之", "又", "玄"], ["玄", "眾", "妙", "之", "門", "門", "開", "云", "見", "日", "日", "出", "云", "散", "散", "則", "見", "月", "月", "明", "照", "心", "心", "有", "靈", "犀", "一", "點", "通"], ["通", "古", "今", "通", "中", "外", "通", "天", "地", "通", "幽", "明", "通", "生", "死", "通", "因", "果", "通", "迷", "悟", "通", "聖", "凡", "通", "自", "他", "通", "萬"], ["萬", "法", "一", "心", "一", "心", "萬", "法", "法", "不", "離", "心", "心", "不", "離", "法", "法", "心", "一", "如", "如", "如", "如", "不", "動", "諸", "法", "實", "相"], ["相", "即", "是", "空", "空", "即", "是", "色", "色", "空", "不", "二", "不", "二", "法", "門", "門", "門", "相", "通", "通", "古", "今", "今", "古", "一", "時", "悟", "入"], ["入", "無", "生", "忍", "忍", "得", "法", "樂", "樂", "此", "法", "樂", "樂", "此", "樂", "樂", "所", "樂", "樂", "無", "常", "常", "無", "樂", "樂", "極", "悲", "來", "至"], ["至", "此", "時", "悲", "喜", "交", "集", "淚", "如", "泉", "涌", "不", "能", "自", "禁", "禁", "不", "住", "住", "不", "得", "得", "不", "失", "失", "不", "去", "去", "不"], ["不", "返", "返", "無", "常", "常", "返", "常", "無", "常", "無", "常", "無", "常", "無", "常", "忽", "然", "明", "白", "白", "地", "清", "清", "楚", "楚", "見", "得", "真"], ["真", "如", "本", "性", "性", "即", "是", "心", "心", "即", "是", "佛", "佛", "即", "是", "我", "我", "即", "是", "你", "你", "我", "本", "無", "二", "二", "本", "無", "一"], ["一", "本", "無", "二", "二", "本", "無", "差", "差", "本", "無", "等", "等", "本", "無", "別", "別", "本", "無", "異", "異", "本", "無", "違", "違", "本", "無", "距", "距"], ["距", "本", "無", "遙", "遙", "本", "無", "近", "近", "本", "無", "相", "相", "本", "無", "即", "即", "本", "無", "離", "離", "本", "無", "合", "合", "本", "無", "分", "分"], ["分", "本", "無", "別", "別", "本", "無", "同", "同", "本", "無", "異", "異", "本", "無", "別", "別", "本", "無", "分", "分", "本", "無", "合", "合", "本", "無", "離", "心"], ["心", "本", "無", "住", "住", "本", "無", "處", "處", "本", "無", "所", "所", "本", "無", "得", "得", "本", "無", "失", "失", "本", "無", "得", "得", "本", "無", "失", "失"], ["失", "本", "無", "苦", "苦", "本", "無", "樂", "樂", "本", "無", "苦", "苦", "本", "無", "樂", "樂", "本", "無", "苦", "苦", "樂", "一", "如", "如", "一", "心", "一", "境"], ["境", "一", "心", "心", "一", "境", "一", "心", "一", "境", "名", "為", "蓮", "花", "藏", "世", "界", "世", "界", "中", "有", "微", "塵", "微", "塵", "中", "有", "世", "界"] ]; // Character information with meanings const characterInfo = { "散": { pinyin: "sàn", meaning: "Scatter; Disperse; Break up; Relax", color: "red" }, "仁": { pinyin: "rén", meaning: "Benevolence; Kindness; Humanity; Human-heartedness", color: "red" }, "智": { pinyin: "zhì", meaning: "Wisdom; Knowledge; Consciousness; Insight", color: "red" }, "懷": { pinyin: "huái", meaning: "Embrace; Cherish; Nostalgic feelings; Reminiscence", color: "red" }, "德": { pinyin: "dé", meaning: "Virtue; Moral character; Excellence; Inherent nature", color: "red" }, "聖": { pinyin: "shèng", meaning: "Sage; Holy; Sacred; Enlightened", color: "red" }, "虞": { pinyin: "yú", meaning: "Fear; Apprehension; Joy; Antiquity", color: "blue" }, "唐": { pinyin: "táng", meaning: "Tang Dynasty; Hall; Expansive; Exaggerated", color: "blue" }, "堯": { pinyin: "yáo", meaning: "Yao (ancient sage-king); High; Lofty", color: "blue" }, "舜": { pinyin: "shùn", meaning: "Shun (ancient sage-king); Obedient; Compliant", color: "blue" }, "禹": { pinyin: "yǔ", meaning: "Yu (ancient sage-king); Great control over water", color: "blue" }, "湯": { pinyin: "tāng", meaning: "Tang (founder of Shang); Soup; Hot liquid", color: "blue" }, "文": { pinyin: "wén", meaning: "Literature; Writing; Culture; Refined", color: "green" }, "武": { pinyin: "wǔ", meaning: "Military; Martial; Force; Strength", color: "green" }, "周": { pinyin: "zhōu", meaning: "Zhou Dynasty; Circle; Complete", color: "green" }, "秦": { pinyin: "qín", meaning: "Qin Dynasty; Musical instrument; Zither", color: "green" }, "漢": { pinyin: "hàn", meaning: "Han Dynasty; Chinese; The Milky Way", color: "green" }, "晉": { pinyin: "jìn", meaning: "Jin Dynasty; Promote; Advance", color: "green" }, "宋": { pinyin: "sòng", meaning: "Song Dynasty; Verses; Eulogies", color: "yellow" }, "齊": { pinyin: "qí", meaning: "Qi State; Uniform; Equal; Aligned", color: "yellow" }, "梁": { pinyin: "liáng", meaning: "Liang Dynasty; Bridge; Beam; Support", color: "yellow" }, "陳": { pinyin: "chén", meaning: "Chen State/Dynasty; Display; Arrange", color: "yellow" }, "隋": { pinyin: "suí", meaning: "Sui Dynasty; Follow; Obey", color: "yellow" }, "貞": { pinyin: "zhēn", meaning: "Chaste; Pure; Loyal; Steadfast", color: "red" }, "志": { pinyin: "zhì", meaning: "Aspiration; Will; Ambition; Determination", color: "red" }, "篤": { pinyin: "dǔ", meaning: "Sincere; Honest; Devoted; Earnest", color: "red" }, "終": { pinyin: "zhōng", meaning: "End; Ultimate; Death; Conclusion", color: "red" }, "誓": { pinyin: "shì", meaning: "Oath; Vow; Pledge; Swear", color: "red" }, "穹": { pinyin: "qióng", meaning: "Arched sky; Heaven; Vault; Dome", color: "blue" }, "蒼": { pinyin: "cāng", meaning: "Pale blue; Dark; Grey-haired; Desolate", color: "blue" }, "厚": { pinyin: "hòu", meaning: "Thick; Deep; Generous; Kind-hearted", color: "blue" }, "載": { pinyin: "zài/zǎi", meaning: "Carry; Bear; Load; Record; Manuscript", color: "blue" }, "乾": { pinyin: "qián", meaning: "Dry; Heaven; Male; Creative force", color: "blue" }, "坤": { pinyin: "kūn", meaning: "Earth; Female; Receptive force; Ground", color: "blue" }, "陰": { pinyin: "yīn", meaning: "Yin; Feminine; Dark; Shadow; Hidden", color: "green" }, "陽": { pinyin: "yáng", meaning: "Yang; Masculine; Bright; Open; Exposed", color: "green" }, "五": { pinyin: "wǔ", meaning: "Five; Multiple; Many", color: "green" }, "行": { pinyin: "xíng", meaning: "Go; Walk; Conduct; Actions; Elements", color: "green" }, "八": { pinyin: "bā", meaning: "Eight; Divide; Separate", color: "green" }, "卦": { pinyin: "guà", meaning: "Hexagram; Divination; I Ching symbol", color: "yellow" } }; // DOM elements const poemGrid = document.getElementById('poem-grid'); const selectedChar = document.getElementById('selected-char'); const pinyin = document.getElementById('pinyin'); const position = document.getElementById('position'); const meaning = document.getElementById('meaning'); const toggleChineseBtn = document.getElementById('toggle-chinese'); const toggleCenterBtn = document.getElementById('toggle-center'); const constructedPoem = document.getElementById('constructed-poem'); const clearPoemBtn = document.getElementById('clear-poem'); const analyzePoemBtn = document.getElementById('analyze-poem'); const copyPoemBtn = document.getElementById('copy-poem'); const charCountDisplay = document.getElementById('char-count'); // State let currentLanguage = 'traditional'; let showCenterHeart = false; let selectedPoemChars = []; // Initialize the poem grid function initPoemGrid() { poemGrid.innerHTML = ''; fullGrid.forEach((row, rowIndex) => { row.forEach((char, colIndex) => { const cell = document.createElement('div'); const charData = characterInfo[char] || { color: 'black' }; cell.className = `grid-cell color-${charData.color}`; cell.textContent = char; cell.dataset.char = char; cell.dataset.row = rowIndex + 1; cell.dataset.col = colIndex + 1; cell.addEventListener('click', () => { selectCharacter(char, rowIndex + 1, colIndex + 1); addToPoem(char); cell.classList.add('selected'); setTimeout(() => cell.classList.remove('selected'), 300); }); poemGrid.appendChild(cell); }); }); // Set initial center character selectCharacter("散", 15, 15); } // Select a character and display its details function selectCharacter(char, row, col) { const charData = characterInfo[char] || { pinyin: '?', meaning: 'No detailed information available for this character', color: 'black' }; selectedChar.textContent = char; pinyin.textContent = charData.pinyin; position.textContent = row === 15 && col === 15 ? 'Center (散)' : `Row ${row}, Column ${col}`; meaning.textContent = charData.meaning; } // Add character to constructed poem function addToPoem(char) { selectedPoemChars.push(char); updateConstructedPoem(); } // Update the constructed poem display function updateConstructedPoem() { if (selectedPoemChars.length === 0) { constructedPoem.innerHTML = 'Select characters to build your own poem'; charCountDisplay.textContent = '0'; return; } constructedPoem.textContent = selectedPoemChars.join(' '); charCountDisplay.textContent = selectedPoemChars.length; } // Toggle between traditional and simplified Chinese function toggleChinese() { currentLanguage = currentLanguage === 'traditional' ? 'simplified' : 'traditional'; toggleChineseBtn.textContent = currentLanguage === 'traditional' ? '简體' : '繁體'; } // Toggle center heart display function toggleCenter() { showCenterHeart = !showCenterHeart; const cells = document.querySelectorAll('[data-row="15"][data-col="15"]'); cells.forEach(cell => { cell.style.boxShadow = showCenterHeart ? '0 0 0 3px rgba(199, 60, 29, 0.5)' : 'none'; }); toggleCenterBtn.textContent = showCenterHeart ? 'Hide Center ❤' : 'Show Center ❤'; } // Clear the constructed poem function clearPoem() { selectedPoemChars = []; updateConstructedPoem(); } // Analyze the constructed poem function analyzePoem() { if (selectedPoemChars.length === 0) { alert('Please select some characters first to analyze'); return; } const poem = selectedPoemChars.join(''); const analysis = ` Poem Analysis ═══════════════════════════════════ Composed Characters: ${poem} Character Count: ${selectedPoemChars.length} Meanings: ${selectedPoemChars.map((char, i) => { const charData = characterInfo[char]; return `${i + 1}. ${char} (${charData?.pinyin || '?'}): ${charData?.meaning || 'No data'}`; }).join('\n')} Thematic Elements: • This composition follows the classical Chinese poetic tradition • Each character carries deep philosophical and emotional resonance • Consider the flow between virtues, cosmology, and human emotion • The juxtaposition of characters creates metaphorical meaning `; alert(analysis); } // Copy poem to clipboard copyPoemBtn.addEventListener('click', () => { if (selectedPoemChars.length === 0) { alert('Please create a poem first'); return; } const poem = selectedPoemChars.join(''); navigator.clipboard.writeText(poem).then(() => { copyPoemBtn.textContent = '✓ Copied!'; setTimeout(() => { copyPoemBtn.textContent = 'Copy to Clipboard'; }, 2000); }); }); // Event listeners toggleChineseBtn.addEventListener('click', toggleChinese); toggleCenterBtn.addEventListener('click', toggleCenter); clearPoemBtn.addEventListener('click', clearPoem); analyzePoemBtn.addEventListener('click', analyzePoem); // Initialize the app document.addEventListener('DOMContentLoaded', () => { initPoemGrid(); });