Euclid-Elements-Game/index.html at main · emmanuelsimon123/Euclid-Elements-Game · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Euclid's Elements</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="app">

        <!-- TITLE SCREEN -->
        <div id="title-screen" class="screen active">
            <h1>EUCLID'S ELEMENTS</h1>
            <p class="subtitle">Book I</p>
            <button id="start-btn" class="btn">Begin</button>
        </div>

        <!-- LEVEL SELECT SCREEN -->
        <div id="level-screen" class="screen">
            <h2>Book I &mdash; Propositions</h2>
            <div id="level-list"></div>
            <button id="back-to-title" class="btn btn-small">Back</button>
        </div>

        <!-- GAME SCREEN -->
        <div id="game-screen" class="screen">
            <div id="game-header">
                <h2 id="prop-title"></h2>
                <p id="prop-statement"></p>
            </div>

            <!-- CONSTRUCTION PHASE -->
            <div id="phase-construction" class="phase active">
                <div id="toolbar">
                    <button class="tool-btn active" data-tool="point" title="Place Point">● Point</button>
                    <button class="tool-btn" data-tool="line" title="Draw Line">╱ Line</button>
                    <button class="tool-btn" data-tool="circle" title="Draw Circle">○ Circle</button>
                    <span id="tool-separator">|</span>
                    <button class="tool-btn" id="undo-btn" title="Undo">↩ Undo</button>
                    <button class="tool-btn" id="clear-canvas-btn" title="Clear All">✕ Clear</button>
                </div>
                <div id="canvas-container">
                    <canvas id="geo-canvas" width="760" height="500"></canvas>
                </div>
                <div id="construction-hint">
                    <p id="hint-text">Select a tool and begin your construction.</p>
                </div>
                <button id="done-construction" class="btn">Done — Proceed to Proof →</button>
            </div>

            <!-- PROOF PHASE (fact selection + ordering) -->
            <div id="phase-selection" class="phase">
                <h3>Phase 2: Select the Relevant Facts</h3>
                <p class="instruction">Which definitions, postulates, and common notions does this proof require?</p>
                <div id="fact-bank"></div>
                <button id="confirm-selection" class="btn">Confirm Selection →</button>
            </div>

            <div id="phase-ordering" class="phase">
                <h3>Phase 3: Order the Proof</h3>
                <p class="instruction">Click steps in the correct logical order. Click a placed step to remove it.</p>
                <h4>Available Steps:</h4>
                <div id="available-steps"></div>
                <h4>Your Proof:</h4>
                <div id="proof-chain"></div>
                <div id="ordering-buttons">
                    <button id="clear-proof" class="btn btn-small">Clear</button>
                    <button id="check-proof" class="btn">Check Proof ✓</button>
                </div>
            </div>

            <!-- Results Phase -->
            <div id="phase-results" class="phase">
                <div id="results-stars" class="stars"></div>
                <h3 id="results-title"></h3>
                <div id="results-details"></div>
                <div id="unlock-message"></div>
                <button id="results-btn" class="btn">Continue</button>
            </div>

            <button id="back-to-levels" class="btn btn-small">← Back to Propositions</button>
        </div>

    </div>
    <script src="game.js"></script>
</body>
</html>