DocsLog in

A dark, mysterious five-act ARG built around hidden archives and forgotten witnesses.

Viewing files at commit 9eaa39d461b7Commit detailsView latest

assets/js/pages/evidence.js 88 lines · 2.7 KB · javascript
1
// Evidence board system
2
3
const EvidencePage = {
4
  render() {
5
    const docs = Array.from(GameState.evidence.documents.values());
6
    const audio = Array.from(GameState.evidence.audioLogs.values());
7
    const photos = Array.from(GameState.evidence.photographs.values());
8
    const connections = GameState.evidence.connections;
9
10
    let html = `
11
      <section class="hero">
12
        <h1>EVIDENCE BOARD</h1>
13
        <p class="lead">Connect the pieces. Find the truth.</p>
14
      </section>
15
    `;
16
17
    if (docs.length > 0) {
18
      html += `
19
        <section class="panel">
20
          <p class="panel-title">DOCUMENTS (${docs.length})</p>
21
          <div class="evidence-list">
22
      `;
23
      docs.forEach(doc => {
24
        html += `
25
          <div class="evidence-item document" data-id="${doc.id}">
26
            <div class="evidence-icon">📄</div>
27
            <div class="evidence-content">
28
              <div class="evidence-title">${doc.title}</div>
29
              <div class="evidence-excerpt">${doc.excerpt || doc.description}</div>
30
              ${doc.date ? `<div class="evidence-meta">Date: ${doc.date}</div>` : ''}
31
            </div>
32
          </div>
33
        `;
34
      });
35
      html += '</div></section>';
36
    }
37
38
    if (audio.length > 0) {
39
      html += `
40
        <section class="panel">
41
          <p class="panel-title">AUDIO RECORDINGS (${audio.length})</p>
42
          <div class="evidence-list">
43
      `;
44
      audio.forEach(record => {
45
        html += `
46
          <div class="evidence-item audio">
47
            <div class="evidence-icon">🔊</div>
48
            <div class="evidence-content">
49
              <div class="evidence-title">${record.title}</div>
50
              <div class="evidence-excerpt">${record.transcript || 'Transcript unavailable'}</div>
51
            </div>
52
          </div>
53
        `;
54
      });
55
      html += '</div></section>';
56
    }
57
58
    if (connections.length > 0) {
59
      html += `
60
        <section class="panel">
61
          <p class="panel-title">CONNECTIONS (${connections.length})</p>
62
          <div class="connections-list">
63
      `;
64
      connections.forEach(conn => {
65
        html += `
66
          <div class="connection-item">
67
            <span class="conn-id1">${conn.id1}</span>
68
            <span class="conn-arrow">→</span>
69
            <span class="conn-desc">${conn.description}</span>
70
            <span class="conn-arrow">→</span>
71
            <span class="conn-id2">${conn.id2}</span>
72
          </div>
73
        `;
74
      });
75
      html += '</div></section>';
76
    }
77
78
    if (docs.length === 0 && audio.length === 0 && photos.length === 0) {
79
      html += `
80
        <section class="panel">
81
          <p>No evidence collected yet. Solve puzzles and discover documents to populate this board.</p>
82
        </section>
83
      `;
84
    }
85
86
    return html;
87
  }
88
};