trees/index.html at main · fidgetbot/trees · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Trees</title>
  <link rel="icon" href="data:," />
  <link rel="stylesheet" href="styles.css?rev=forest-cycle-v1" />
</head>
<body>
  <div id="app">
    <main class="layout">
      <section class="left-panel panel" id="species-panel">
        <div id="species-list" class="species-list"></div>
        <button id="start-game" disabled>Start Game</button>
        <div class="start-build">Trees v<span data-build-version>…</span></div>
      </section>

      <section class="center-panel panel game-panel hidden" id="game-panel">
        <div id="map-content" class="panel-content">
          <div class="map-frame">
            <div class="map-status" aria-label="Current game status">
              <div class="map-stat"><span>Score</span><strong id="score">0</strong></div>
              <div class="map-stat"><span>Year</span><strong id="year">1</strong></div>
              <div class="map-stat"><span>Season</span><strong id="season">Spring</strong></div>
              <div class="map-stat"><span>Life stage</span><strong id="life-stage">Seed</strong></div>
              <div class="map-build">v<span data-build-version>…</span></div>
            </div>
            <canvas id="game-canvas" width="900" height="600" tabindex="0" role="button" aria-label="Explore the grove map"></canvas>
          </div>
        </div>
      </section>

      <section class="right-panel panel game-panel hidden collapsible-panel" id="hud-panel">
        <button id="hud-minimize" class="panel-corner-toggle" type="button" aria-expanded="true" aria-label="Minimize status">−</button>
        <button id="hud-restore" class="panel-chip hidden" type="button">📊 Status</button>
        <div id="hud-content" class="panel-content">
        <div id="turn-end-banner" class="turn-end-banner hidden" aria-live="polite"></div>
        <div id="growth-hint" class="growth-hint">Next growth: Take your first action: grow roots</div>
        <div class="hud-header actions-header">
          <h2>Actions <span class="actions-heading-count" id="actions-remaining" aria-live="polite">(3 remaining)</span></h2>
          <span id="phase-indicator" class="phase-pill">Action Phase</span>
        </div>
        <div class="action-command-bar">
          <div class="action-resource-strip" aria-label="Resources available for actions">
            <span class="action-resource-label">You have</span>
            <span class="action-resource-total res-sun"><span aria-hidden="true">☀️</span><strong id="action-sunlight">0</strong></span>
            <span class="action-resource-total res-water"><span aria-hidden="true">💧</span><strong id="action-water">0</strong></span>
            <span class="action-resource-total res-nutrient"><span aria-hidden="true">🌱</span><strong id="action-nutrients">0</strong></span>
            <span class="action-resource-total res-health" aria-label="Current health"><span aria-hidden="true">❤️</span><strong id="action-health">0/0</strong></span>
          </div>
          <button id="finish-turn" class="finish-turn-btn hidden" type="button">Finish Turn Early</button>
        </div>
        <div id="actions-list" class="actions-list"></div>

        <div id="species-badge" class="species-badge post-actions-status"></div>
        <div class="stats-container">
          <div class="stat-group" data-group="resources">
            <h4 class="stat-group-title">📊 Resources</h4>
            <div class="stat-group-content">
              <div class="stat-row" data-stat="sunlight" data-help="Leaves gather sunlight each turn. More leaves = more sunlight.">
                <span class="stat-icon">☀️</span>
                <span class="stat-name">Sunlight</span>
                <span class="stat-value" id="sunlight">0</span>
              </div>
              <div class="stat-row" data-stat="water" data-help="Trunk size determines water storage. Roots support uptake, stability, and networking.">
                <span class="stat-icon">💧</span>
                <span class="stat-name">Water</span>
                <span class="stat-value" id="water">0</span>
              </div>
              <div class="stat-row" data-stat="nutrients" data-help="Roots absorb nutrients. Allies boost nutrient gathering through fungal networks.">
                <span class="stat-icon">🌱</span>
                <span class="stat-name">Nutrients</span>
                <span class="stat-value" id="nutrients">0</span>
              </div>
              <div class="stat-divider" aria-hidden="true"></div>
              <div class="stat-row" data-stat="health" data-help="Health decreases from damage. At 0, you die and the run ends.">
                <span class="stat-icon">❤️</span>
                <span class="stat-name">Health</span>
                <span class="stat-value" id="health">0</span>
                <span class="stat-max" id="max-health">/ 0</span>
              </div>
              <div class="stat-row" data-stat="allies" data-help="Fungal allies boost nutrient gathering and provide other benefits.">
                <span class="stat-icon">🍄</span>
                <span class="stat-name">Allies</span>
                <span class="stat-value" id="allies">0</span>
              </div>
              <details class="offspring-stats hidden" id="offspring-stats">
                <summary id="offspring-stats-summary">Offspring</summary>
                <div id="offspring-stats-list"></div>
              </details>
              <details class="season-guide" id="season-guide">
                <summary id="season-guide-summary">Seasonal gathering</summary>
                <div class="season-guide-grid" id="season-guide-grid"></div>
                <p>Nutrient gathering has no direct seasonal penalty.</p>
              </details>
            </div>
          </div>

          <div class="stat-group" data-group="structure">
            <h4 class="stat-group-title">🌳 Structure</h4>
            <div class="stat-group-content">
              <div class="stat-row" data-stat="trunk" data-help="Thicker trunk increases max health, water storage, and drought resistance.">
                <span class="stat-icon">🪵</span>
                <span class="stat-name">Trunk</span>
                <span class="stat-value" id="trunk">0</span>
              </div>
              <div class="stat-row" data-stat="height-growth" data-help="Extra trunk height gathers more sunlight and lets you shade shorter trees.">
                <span class="stat-icon">↟</span>
                <span class="stat-name">Extra height</span>
                <span class="stat-value" id="height-growth">0</span>
              </div>
              <div class="stat-row" data-stat="spindly-growth" data-help="Each unbraced height level adds one damage in storms. Fortify Bark braces one level.">
                <span class="stat-icon">🌬️</span>
                <span class="stat-name">Wind penalty</span>
                <span class="stat-value" id="spindly-growth">None</span>
              </div>
              <div class="stat-row" data-stat="branches" data-help="More branches support more leaf clusters.">
                <span class="stat-icon">🌿</span>
                <span class="stat-name">Branches</span>
                <span class="stat-value" id="branches">0</span>
              </div>
              <div class="stat-row" data-stat="leaf-clusters" data-help="Leaf clusters gather sunlight. Exposed leaves gather more.">
                <span class="stat-icon">🍃</span>
                <span class="stat-name">Leaves</span>
                <span class="stat-value" id="leaf-clusters">0</span>
              </div>
              <div class="stat-row" data-stat="root-zones" data-help="Root zones improve nutrient uptake, storm stability, and fungal connection chances.">
                <span class="stat-icon">🌾</span>
                <span class="stat-name">Roots</span>
                <span class="stat-value" id="root-zones">0</span>
              </div>
            </div>
          </div>

          <div class="stat-group" data-group="reproduction">
            <h4 class="stat-group-title">🌸 Reproduction</h4>
            <div class="stat-group-content">
              <div class="stat-row compact" data-stat="flowers" data-help="Flowers may become pollinated by insects, producing seeds.">
                <span class="stat-icon">🌸</span>
                <span class="stat-name">Flowers</span>
                <span class="stat-value" id="flowers">0</span>
              </div>
              <div class="stat-row compact" data-stat="pollinated" data-help="Pollinated flowers will develop into fruit and seeds.">
                <span class="stat-icon">🐝</span>
                <span class="stat-name">Flowers Pollinated</span>
                <span class="stat-value" id="pollinated">0</span>
              </div>
              <div class="stat-row compact" data-stat="developing" data-help="Developing fruit will become viable seeds.">
                <span class="stat-icon">🍎</span>
                <span class="stat-name">Fruit</span>
                <span class="stat-value" id="developing">0</span>
              </div>
              <div class="stat-row compact" data-stat="seeds" data-help="Seeds become viable in Spring and contribute to your score.">
                <span class="stat-icon">🌰</span>
                <span class="stat-name">Seeds</span>
                <span class="stat-value" id="seeds">0</span>
              </div>
            </div>
          </div>

        </div>

        <h3>Log</h3>
        <div id="log" class="log"></div>
        </div>
      </section>
    </main>
  </div>

  <div id="feedback-container" class="feedback-container"></div>
  <div id="tooltip" class="tooltip hidden"></div>

  <div id="modal" class="modal hidden">
    <div class="modal-card">
      <h2 id="modal-title">Message</h2>
      <div id="modal-body"></div>
      <button id="modal-button">Continue</button>
    </div>
  </div>

  <div id="map-explorer" class="map-explorer hidden" role="dialog" aria-modal="true" aria-labelledby="map-explorer-title">
    <div class="map-explorer-shell">
      <div class="map-explorer-header">
        <div>
          <h2 id="map-explorer-title">Explore the Grove</h2>
          <p>Drag to pan. Pinch, use the buttons, or Ctrl/⌘-scroll to zoom. Tap the view to return.</p>
        </div>
        <div class="map-explorer-controls" aria-label="Map zoom controls">
          <button id="map-explorer-zoom-out" type="button" aria-label="Zoom out">−</button>
          <span id="map-explorer-zoom-label" aria-live="polite">100%</span>
          <button id="map-explorer-zoom-in" type="button" aria-label="Zoom in">+</button>
          <button id="map-explorer-reset" type="button">Reset</button>
          <button id="map-explorer-close" type="button" aria-label="Close map explorer">×</button>
        </div>
      </div>
      <div id="map-explorer-viewport" class="map-explorer-viewport" tabindex="0" aria-label="Scrollable grove view">
        <canvas id="map-explorer-canvas" width="4096" height="1200"></canvas>
      </div>
    </div>
  </div>

  <script>
    fetch('./version.json?ts=' + Date.now())
      .then(r => r.json())
      .then(data => {
        document.querySelectorAll('[data-build-version]').forEach(el => {
          if (typeof data.version !== 'undefined') el.textContent = data.version;
        });
      })
      .catch(() => {
        document.querySelectorAll('[data-build-version]').forEach(el => { el.textContent = 'unknown'; });
      });
  </script>
  <script type="module" src="main.js?rev=forest-cycle-v1"></script>
</body>
</html>