-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
217 lines (185 loc) · 7.59 KB
/
index.html
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>
<head>
<title>3003 Numbered Pyramid</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: "Maven Pro", monospace;
text-align: center;
line-height: 1;
font-size: 11px;
letter-spacing: -0.5px;
word-spacing: -2px;
background-color: #262626;
color: #a7ffea;
transition: background-color 0.3s, color 0.3s;
}
.nav-links {
margin-top: 30px;
font-family: 'Maven Pro', monospace;
font-size: 16px;
line-height: 1.5;
letter-spacing: normal;
word-spacing: normal;
}
.nav-links a {
color: #a7ffea;
text-decoration: none;
transition: color 0.3s ease;
}
.nav-links a:hover {
text-decoration: underline;
}
.nav-links span {
color: #666;
}
.floating-title {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 1000;
padding: 20px;
border-radius: 10px;
}
.floating-title h1 {
font-family: 'Maven Pro', sans-serif;
color: #a7ffea;
margin: 0;
font-size: 4vw; /* Responsive font size */
line-height: 1.2;
letter-spacing: 10px;
text-shadow: 0 0 10px rgba(167, 255, 234, 0.5);
}
.floating-title h2 {
font-family: 'Maven Pro', sans-serif;
color: #a7ffea;
margin: 10px 0 0 0;
font-size: 4vw; /* Same size as MIDSOMAR */
letter-spacing: 5px;
text-shadow: 0 0 10px rgba(255, 165, 0, 0.5);
}
/* Mobile optimization */
@media (max-width: 768px) {
.floating-title h1 {
font-size: 8vw;
letter-spacing: 5px;
}
.floating-title h2 {
font-size: 8vw; /* Same size as MIDSOMAR */
letter-spacing: 3px;
}
}
</style>
</head>
<body>
<div class="floating-title">
<h1>MIDSOMAR</h1>
<h2>PN 4</h2>
</div>
<div id="pyramid"></div>
<script>
function generatePyramid(totalItems) {
// First, let's get the burned assets data from localStorage
const trackerState = JSON.parse(localStorage.getItem('trackerState'));
const burnedAssets = [];
if (trackerState && trackerState.assets) {
const assets = new Map(trackerState.assets);
// Loop through assets to check burned assets only
assets.forEach((asset, id) => {
// Only check the burnedSupply column
if (asset.burnedSupply > 0) {
burnedAssets.push([parseInt(id), asset.burnedSupply]);
console.log(`Asset ${id} has ${asset.burnedSupply} burned`);
}
});
}
// Debug log to check burned assets
console.log('Burned assets:', burnedAssets);
const pyramid = [];
let itemsUsed = 0;
let currentNumber = 76;
// Create a map of burned assets with their counts
const burnedMap = new Map();
burnedAssets.forEach(([assetNum, count]) => {
burnedMap.set(assetNum, count);
});
// Debug log to check burned map
console.log('Burned map:', Array.from(burnedMap.entries()));
while (itemsUsed < totalItems && currentNumber >= 0) {
const rowLength = 77 - currentNumber;
let rowNumbers = Array(rowLength).fill(currentNumber);
// If this asset has been burned, replace exact number of positions with ' '
const burnedCount = burnedMap.get(currentNumber) || 0;
if (burnedCount > 0) {
const actualBurnCount = Math.min(burnedCount, rowLength);
const positions = Array.from({length: rowLength}, (_, i) => i)
.sort(() => Math.random() - 0.5)
.slice(0, actualBurnCount);
positions.forEach(pos => {
rowNumbers[pos] = ' ';
});
}
// Format the numbers
rowNumbers = rowNumbers.map(n => n === ' ' ? n : n.toString().padStart(2, '0'));
pyramid.push(rowNumbers);
itemsUsed += rowLength;
currentNumber--;
}
return pyramid;
}
function renderPyramid(pyramid) {
const pyramidElement = document.getElementById('pyramid');
pyramidElement.innerHTML = '';
// Define base flame colors from bottom to top
const flameColors = [
['#ff0000', '#ff1111', '#ff2222'], // Red variations (base)
['#ff4500', '#ff3300', '#ff2200'], // Red-orange variations
['#ffa500', '#ff9834', '#ff8b17'], // Orange variations
['#ffd700', '#ffed4a', '#fff44f'], // Gold variations
['#ffffd0', '#fff7e6', '#fffff0'] // Very light yellow/white variations (tip)
];
const totalRows = pyramid.length;
pyramid.forEach((row, rowIndex) => {
const rowElement = document.createElement('div');
// Calculate color zone from bottom to top
const zoneIndex = Math.floor(((totalRows - rowIndex - 1) / totalRows) * flameColors.length);
rowElement.innerHTML = row.map(item => {
if (item === ' ') {
return '<span style="color: #666; opacity: 0.5;">..</span>';
} else {
const colorSet = flameColors[zoneIndex];
const randomColor = colorSet[Math.floor(Math.random() * colorSet.length)];
if (Math.random() < 0.2 && zoneIndex < flameColors.length - 1) {
const upperColorSet = flameColors[zoneIndex + 1];
const blendColor = upperColorSet[Math.floor(Math.random() * upperColorSet.length)];
return `<span style="color: ${blendColor};">${item}</span>`;
}
return `<span style="color: ${randomColor};">${item}</span>`;
}
}).join(' ');
pyramidElement.appendChild(rowElement);
});
}
// Example usage:
const burnedAssets = [
[4, 6], // 6 of asset 04 are burned
[2, 3], // 3 of asset 02 are burned
// Add more burned assets as needed
];
const pyramid = generatePyramid(3003, burnedAssets);
renderPyramid(pyramid);
</script>
<div class="nav-links">
<a href="about.html">About</a>
<span>•</span>
<a href="tracker.html">Asset manager</a>
<span>•</span>
<a href="My_Assets.html">My Assets</a>
<span>•</span>
<a href="prize-distribution.html">Prize calculator</a>
</div>
</body>
</html>