hexasphere/index-light.html at main · hightouch67/hexasphere · 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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Corrected Hexasphere.js</title>
        <meta name="Description" content="Fixed hexasphere implementation with proper non-overlapping tiles" />
        <style>
            body {
                margin: 0;
                padding: 0;
                background: #000011;
                overflow: hidden;
                font-family: Arial, sans-serif;
            }
            canvas {
                display: block;
            }
        </style>
    </head>
    <body>
        <!-- Hidden projection map for land/ocean detection -->
        <img id="projection" src="equirectangle_projection.png" style="display: none;" />

        <!-- Controls Panel -->
        <div id="controls" style="
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(0, 0, 0, 0.8);
            padding: 20px;
            border-radius: 10px;
            color: white;
            font-family: Arial, sans-serif;
            width: 250px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            z-index: 1000;
        ">
            <h3 style="margin: 0 0 15px 0; color: #4FC3F7;">Hexasphere Controls</h3>

            <div style="margin-bottom: 15px;">
                <label for="radiusSlider" style="display: block; margin-bottom: 5px; font-size: 12px; color: #ccc;">
                    Radius: <span id="radiusValue">25</span>
                </label>
                <input type="range" id="radiusSlider" min="10" max="100" value="25" style="
                    width: 100%;
                    height: 5px;
                    border-radius: 5px;
                    background: #ddd;
                    outline: none;
                    opacity: 0.7;
                    transition: opacity 0.2s;
                ">
            </div>

            <div style="margin-bottom: 15px;">
                <label for="subdivisionsSlider" style="display: block; margin-bottom: 5px; font-size: 12px; color: #ccc;">
                    Subdivisions: <span id="subdivisionsValue">20</span>
                </label>
                <input type="range" id="subdivisionsSlider" min="1" max="100" value="20" style="
                    width: 100%;
                    height: 5px;
                    border-radius: 5px;
                    background: #ddd;
                    outline: none;
                    opacity: 0.7;
                    transition: opacity 0.2s;
                ">
            </div>

            <div style="margin-bottom: 15px;">
                <label for="tileSizeSlider" style="display: block; margin-bottom: 5px; font-size: 12px; color: #ccc;">
                    Tile Size: <span id="tileSizeValue">0.98</span>
                </label>
                <input type="range" id="tileSizeSlider" min="0.1" max="1.0" step="0.01" value="0.98" style="
                    width: 100%;
                    height: 5px;
                    border-radius: 5px;
                    background: #ddd;
                    outline: none;
                    opacity: 0.7;
                    transition: opacity 0.2s;
                ">
            </div>

            <button id="regenerateBtn" style="
                background: linear-gradient(45deg, #4FC3F7, #29B6F6);
                color: white;
                border: none;
                padding: 10px 20px;
                border-radius: 5px;
                cursor: pointer;
                width: 100%;
                margin-top: 10px;
            ">Regenerate Hexasphere</button>

            <button id="animationToggleBtn" style="
                background: linear-gradient(45deg, #4CAF50, #45a049);
                color: white;
                border: none;
                padding: 10px 20px;
                border-radius: 5px;
                cursor: pointer;
                width: 100%;
                margin-top: 10px;
            ">▶️ Start Animation</button>

            <div style="margin-top: 15px;">
                <label style="display: flex; align-items: center; font-size: 12px; color: #ccc; cursor: pointer;">
                    <input type="checkbox" id="pathfindingMode" style="margin-right: 8px;">
                    Pathfinding Mode (click two tiles to find path)
                </label>
            </div>

            <div style="margin-top: 15px; font-size: 12px; color: #ccc;">
                <p>Tiles: <span id="tileCount">Loading...</span></p>
                <p>Drag to rotate • Mouse wheel to zoom</p>
                <p><strong>Normal:</strong> Click tiles to explore neighbors</p>
                <p><strong>Pathfinding:</strong> Click two tiles to find shortest path</p>
            </div>

            <div id="tileInfo" style="
                margin-top: 15px;
                padding: 10px;
                background: rgba(255,255,255,0.1);
                border-radius: 5px;
                font-size: 12px;
                max-height: 300px;
                overflow-y: auto;
            ">
                <p style="color: #ccc;">Click on a tile to see its information and neighbors.</p>
            </div>
        </div>

        <script type="module" src="main.ts"></script>
    </body>
</html>