https://yakumouranai.com/wp-content/themes/yakumo-brand/assets/js/iching/iching-table.js?ver=0.1.660

1/**
2 * ============================================================
3 * イーチンダイス - 六十四卦一覧表
4 * ============================================================
5 *
6 * 2026-10-04、八雲さまのご指示「この表をそのまま、イーチンダイスのところにいれろ」
7 * （易経占い ekikyo.net「六十四卦一覧」の表）。並びはその表と同じにした：
8 *   ・横（列）が上卦：左から 坤・艮・坎・巽・震・離・兌・乾
9 *   ・縦（行）が下卦：上から 乾・兌・離・震・巽・坎・艮・坤
10 *   ・いちばん右の列に下卦の名前、いちばん上の行に上卦の名前
11 *   ・各ますに、卦の番号・卦の形・卦の名前
12 * 表の中身は iching-data.js から組み立てる（サイトの絵や文章は写していない）。
13 *
14 * ますを押すと、その卦の解説（卦辞・解説・六つの爻辞）を表の下に出す。
15 * 卦を立てたあとは、本卦（朱）と之卦（墨の枠）を表の中で目立たせる。
16 * ============================================================
17 */
18
19import { HEXAGRAMS, trigramByNumber, hexagramByTrigrams } from './iching-data.js';
20
21export const UPPER_ORDER = [8, 7, 6, 5, 4, 3, 2, 1];
22export const LOWER_ORDER = [1, 2, 3, 4, 5, 6, 7, 8];
23
24function escapeHtml(text) {
25  return String(text).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]);
26}
27
28/** 爻の並び（下から上、1=陽）を、小さな横線の絵にする */
29function barsSvg(lines) {
30  const n = lines.length;
31  const rows = lines
32    .map((bit, i) => {
33      const y = (n - 1 - i) * 7;
34      return bit
35        ? `<rect x="0" y="${y}" width="30" height="4"/>`
36        : `<rect x="0" y="${y}" width="13" height="4"/><rect x="17" y="${y}" width="13" height="4"/>`;
37    })
38    .join('');
39  return `<svg class="iching-table-bars" viewBox="0 0 30 ${n * 7 - 3}" aria-hidden="true">${rows}</svg>`;
40}
41
42function trigramHead(no) {
43  const t = trigramByNumber(no);
44  return `${barsSvg(t.lines)}<span class="iching-table-tri">${t.name}</span><span class="iching-table-img">（${t.image}）</span>`;
45}
46
47export class HexagramTable {
48  /**
49   * @param {HTMLElement} wrap 表を入れる箱
50   * @param {HTMLElement} detail 押した卦の解説を出す箱
51   * @param {() => Promise<object|null>} loadTexts 解説データを読み込む関数
52   */
53  constructor(wrap, detail, loadTexts) {
54    this.wrap = wrap;
55    this.detail = detail;
56    this.loadTexts = loadTexts;
57    this.render();
58    wrap.addEventListener('click', (e) => {
59      const cell = e.target.closest('[data-hex]');
60      if (cell) this.show(Number(cell.dataset.hex));
61    });
62  }
63
64  render() {
65    const head = UPPER_ORDER.map((u) => `<th scope="col" class="iching-table-head">${trigramHead(u)}</th>`).join('');
66    const body = LOWER_ORDER.map((l) => {
67      const cells = UPPER_ORDER.map((u) => {
68        const h = hexagramByTrigrams(u, l);
69        return `<td><button type="button" class="iching-table-cell" data-hex="${h.number}" aria-label="第${h.number}卦 ${h.name}">
70            <span class="iching-table-no">${h.number}</span>${barsSvg(h.lines)}<span class="iching-table-name">${h.name}</span>
71          </button></td>`;
72      }).join('');
73      return `<tr>${cells}<th scope="row" class="iching-table-head is-lower">${trigramHead(l)}</th></tr>`;
74    }).join('');
75    this.wrap.innerHTML = `
76      <table class="iching-table">
77        <thead><tr>${head}

77<th scope="col" class="iching-table-corner">←上卦<br>↓下卦</th></tr></thead>
78        <tbody>${body}</tbody>
79      </table>`;
80  }
81
82  /** 立てた卦を表の中で目立たせる（本卦は朱、之卦は墨の枠）。null で消す */
83  mark(primaryNo = null, changedNo = null) {
84    this.wrap.querySelectorAll('.iching-table-cell').forEach((b) => {
85      const n = Number(b.dataset.hex);
86      b.classList.toggle('is-primary', n === primaryNo);
87      b.classList.toggle('is-changed', n === changedNo);
88    });
89  }
90
91  async show(number) {
92    const h = HEXAGRAMS[number - 1];
93    const texts = await this.loadTexts();
94    const t = texts?.[number];
95    this.wrap.querySelectorAll('.iching-table-cell').forEach((b) => b.classList.toggle('is-open', Number(b.dataset.hex) === number));
96    if (!t) return;
97    const lines = t.lines
98      .map((l) => `<li><p class="iching-reading-classic">${escapeHtml(l.text)}</p><p class="iching-reading-text">${escapeHtml(l.meaning)}</p></li>`)
99      .join('');
100    const extra = t.extra
101      ? `<li><p class="iching-reading-classic">${escapeHtml(t.extra.text)}</p><p class="iching-reading-text">${escapeHtml(t.extra.meaning)}</p></li>`
102      : '';
103    this.detail.innerHTML = `
104      <section class="iching-reading-block">
105        <h3 class="iching-reading-head"><span class="iching-reading-tag">第${h.number}卦</span>${escapeHtml(h.name)}<span class="iching-reading-key">${escapeHtml(t.keyword)}</span></h3>
106        <p class="iching-table-parts">上卦 ${h.upper.symbol} ${h.upper.name}（${h.upper.image}）・下卦 ${h.lower.symbol} ${h.lower.name}（${h.lower.image}）</p>
107        <p class="iching-reading-classic">${escapeHtml(t.judgment)}</p>
108        <p class="iching-reading-text">${escapeHtml(t.meaning)}</p>
109        <p class="iching-reading-advice">${escapeHtml(t.advice)}</p>
110        <h4 class="iching-table-subhead">爻辞（下の初爻から上爻へ）</h4>
111        <ul class="iching-reading-lines">${lines}${extra}</ul>
112      </section>`;
113    this.detail.hidden = false;
114    this.detail.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
115  }
116}