-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathrom_manager.html
More file actions
313 lines (277 loc) · 15.5 KB
/
Copy pathrom_manager.html
File metadata and controls
313 lines (277 loc) · 15.5 KB
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
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Watapico ROM Manager</title>
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body class="bg-gray-100 text-gray-800">
<div x-data="romManager()" class="container mx-auto p-4">
<div x-show="!uf2Loaded" class="flex flex-col items-center justify-center min-h-screen">
<div @dragover.prevent @drop.prevent="handleUF2Drop" class="bg-white p-8 rounded-lg shadow-lg text-center cursor-pointer hover:bg-gray-50" @click="$refs.uf2Input.click()">
<svg class="w-24 h-24 mx-auto text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path></svg>
<h1 class="text-3xl font-bold mt-4">Watapico ROM Manager</h1>
<p class="text-gray-500 mt-2">Drag and drop your `watapico.uf2` file here or click to select</p>
<input type="file" x-ref="uf2Input" @change="handleUF2File" class="hidden" accept=".uf2">
</div>
<p x-text="uf2FileInfo" class="mt-4"></p>
</div>
<div x-show="uf2Loaded">
<header @dragover.prevent @drop.prevent="handleRomDrop" @click="$refs.romInput.click()" class="bg-blue-500 text-white p-4 rounded-lg shadow-lg flex justify-between items-center cursor-pointer hover:bg-blue-600">
<h1 class="text-2xl font-bold">Watapico ROM Manager</h1>
<div class="flex items-center">
<svg class="w-12 h-12 mr-4 text-green-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<div>
<p class="font-bold">Add ROMs</p>
<p class="text-sm">Drag & drop or click to select files</p>
</div>
<input type="file" x-ref="romInput" @change="handleRomFiles" class="hidden" accept=".sv" multiple>
</div>
</header>
<main class="mt-8 pb-24">
<section id="rom-management-section">
<h2 class="text-xl font-bold mb-4" x-text="`Manage ROMs (${roms.length} total)`"></h2>
<ul class="bg-white rounded-lg shadow">
<template x-for="(rom, index) in roms" :key="rom.name">
<li :draggable="true"
@dragstart="draggedIndex = index"
@dragover.prevent
@drop.prevent="dropIndex = index; reorderRoms()"
class="flex justify-between items-center p-4 border-b"
:class="{'opacity-50': draggedIndex === index}">
<div class="flex items-center">
<span x-text="`${index}:`" class="mr-2"></span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 cursor-move" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /></svg>
<span x-text="rom.name"></span>
</div>
<button @click="deleteRom(index)" class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600">🗑️</button>
</li>
</template>
</ul>
</section>
<section class="fixed bottom-0 left-0 right-0 bg-white p-4 border-t-2 border-gray-200 shadow-inner">
<div class="container mx-auto">
<button @click="generateAndSaveUF2" class="w-full bg-green-500 text-white px-4 py-3 rounded-lg font-bold text-lg hover:bg-green-600">💾 Save Updated UF2 File</button>
</div>
</section>
</main>
</div>
</div>
<script>
function romManager() {
return {
uf2Loaded: false,
uf2FileInfo: '',
uf2Blocks: [],
roms: [],
draggedIndex: null,
dropIndex: null,
// Drag and drop reordering for ROMs
reorderRoms() {
const [draggedRom] = this.roms.splice(this.draggedIndex, 1);
this.roms.splice(this.dropIndex, 0, draggedRom);
this.draggedIndex = null;
this.dropIndex = null;
},
// --- File Handling ---
handleUF2File(event) {
this.loadUf2(event.target.files[0]);
},
handleUF2Drop(event) {
this.loadUf2(event.dataTransfer.files[0]);
},
async loadUf2(file) {
if (!file || !file.name.endsWith('.uf2')) {
alert('Please select a valid .uf2 file.');
return;
}
try {
const buffer = await this.readFileAsArrayBuffer(file);
this.parseUF2(buffer);
this.uf2FileInfo = `Loaded: ${file.name}`;
this.uf2Loaded = true;
} catch (error) {
alert(`Error parsing UF2 file: ${error.message}`);
}
},
handleRomFiles(event) {
this.addRoms(event.target.files);
},
handleRomDrop(event) {
this.addRoms(event.dataTransfer.files);
},
addRoms(files) {
const romPromises = Array.from(files)
.filter(file => {
if (!file.name.endsWith('.sv')) {
alert(`Invalid file: ${file.name}. Only .sv files are supported.`);
return false;
}
return true;
})
.map(file => this.readRomFile(file));
Promise.all(romPromises).then(newRoms => {
if (files.length === 1) {
this.roms.unshift(...newRoms);
} else {
this.roms.push(...newRoms);
}
});
},
deleteRom(index) {
this.roms.splice(index, 1);
},
// --- Helper Functions ---
readFileAsArrayBuffer(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = (e) => resolve(e.target.result);
reader.onerror = reject;
reader.readAsArrayBuffer(file);
});
},
readRomFile(file) {
return new Promise((resolve, reject) => {
this.readFileAsArrayBuffer(file).then(buffer => {
const romData = new Uint8Array(buffer);
const romName = file.name.replace(/\.sv$/i, '');
resolve({ name: romName, data: romData });
}).catch(reject);
});
},
// --- UF2 Parsing and Generation ---
parseUF2(buffer) {
// UF2 file format constants
const UF2_BLOCK_SIZE = 512;
const UF2_MAGIC_START0 = 0x0A324655;
const UF2_MAGIC_START1 = 0x9E5D5157;
const UF2_MAGIC_END = 0x0AB16F30;
this.uf2Blocks = [];
this.roms = [];
const dataView = new DataView(buffer);
for (let i = 0; i < buffer.byteLength; i += UF2_BLOCK_SIZE) {
const block = buffer.slice(i, i + UF2_BLOCK_SIZE);
const magic0 = dataView.getUint32(i, true);
const magic1 = dataView.getUint32(i + 4, true);
const magicEnd = dataView.getUint32(i + UF2_BLOCK_SIZE - 4, true);
if (magic0 !== UF2_MAGIC_START0 || magic1 !== UF2_MAGIC_START1 || magicEnd !== UF2_MAGIC_END) {
throw new Error(`Invalid UF2 block at offset ${i}`);
}
this.uf2Blocks.push({
address: dataView.getUint32(i + 12, true),
data: new Uint8Array(block.slice(32, 32 + 256))
});
}
this.extractRoms();
},
extractRoms() {
// Memory layout constants
const ROM_LIST_BASE = 0x10000000 + 16 * 1024;
const ROM_DATA_BASE = 0x10000000 + 32 * 1024;
const romListData = new Uint8Array(16 * 1024);
const romData = new Uint8Array(16 * 1024 * 1024 - 32 * 1024);
// Extract ROM data from UF2 blocks
for (const block of this.uf2Blocks) {
if (block.address >= ROM_LIST_BASE && block.address < ROM_DATA_BASE) {
romListData.set(block.data, block.address - ROM_LIST_BASE);
} else if (block.address >= ROM_DATA_BASE) {
romData.set(block.data, block.address - ROM_DATA_BASE);
}
}
// Parse the ROM list
const romListView = new DataView(romListData.buffer);
for (let i = 0; i < romListData.byteLength; i += 56) {
const size = romListView.getUint32(i + 44, true);
if (size === 0 || size === 0xFFFFFFFF) break;
const nameBytes = romListData.slice(i + 4, i + 44);
const name = new TextDecoder().decode(nameBytes).split('\0')[0];
const dataPtr = romListView.getUint32(i + 52, true);
const dataOffset = dataPtr - ROM_DATA_BASE;
const data = romData.slice(dataOffset, dataOffset + size);
this.roms.push({ name, data });
}
},
generateAndSaveUF2() {
const UF2_BLOCK_SIZE = 512;
const UF2_DATA_SIZE = 256;
const UF2_MAGIC_START0 = 0x0A324655;
const UF2_MAGIC_START1 = 0x9E5D5157;
const UF2_MAGIC_END = 0x0AB16F30;
const RP2040_FAMILY_ID = 0xe48bff56;
const ROM_LIST_BASE = 0x10000000 + 16 * 1024;
const ROMS_TOTAL_BASE = 0x10000000 + 31 * 1024;
const ROM_DATA_BASE = 0x10000000 + 32 * 1024;
const newUf2Blocks = this.uf2Blocks.filter(b => b.address < ROM_LIST_BASE);
let romDataOffset = 0;
const romListData = new ArrayBuffer(16 * 1024);
const romListView = new DataView(romListData);
const romData = new Uint8Array(16 * 1024 * 1024 - 32 * 1024);
// Create new ROM list and data
this.roms.forEach((rom, i) => {
const entryOffset = i * 56;
const nameBytes = new TextEncoder().encode(rom.name.substring(0, 40));
new Uint8Array(romListData, entryOffset + 4, 40).set(nameBytes);
romListView.setUint32(entryOffset + 44, rom.data.length, true);
romListView.setUint32(entryOffset + 48, this.powerOfTwoMask(rom.data.length), true);
romListView.setUint32(entryOffset + 52, ROM_DATA_BASE + romDataOffset, true);
romData.set(rom.data, romDataOffset);
romDataOffset += rom.data.length;
romDataOffset = (romDataOffset + 3) & ~3; // 4-byte alignment
});
// Create new UF2 blocks for ROM list and data
for (let i = 0; i < romListData.byteLength; i += UF2_DATA_SIZE) {
newUf2Blocks.push({
address: ROM_LIST_BASE + i,
data: new Uint8Array(romListData, i, UF2_DATA_SIZE)
});
}
for (let i = 0; i < romDataOffset; i += UF2_DATA_SIZE) {
newUf2Blocks.push({
address: ROM_DATA_BASE + i,
data: romData.slice(i, i + UF2_DATA_SIZE)
});
}
// Create block for total ROMs count
const romsCountData = new Uint8Array(4);
new DataView(romsCountData.buffer).setUint32(0, this.roms.length, true);
newUf2Blocks.push({
address: ROMS_TOTAL_BASE,
data: romsCountData
});
// Generate final UF2 file
const finalUf2 = new Uint8Array(newUf2Blocks.length * UF2_BLOCK_SIZE);
const finalUf2View = new DataView(finalUf2.buffer);
newUf2Blocks.forEach((block, i) => {
const offset = i * UF2_BLOCK_SIZE;
finalUf2View.setUint32(offset, UF2_MAGIC_START0, true);
finalUf2View.setUint32(offset + 4, UF2_MAGIC_START1, true);
finalUf2View.setUint32(offset + 8, 0x2000, true); // Flags
finalUf2View.setUint32(offset + 12, block.address, true);
finalUf2View.setUint32(offset + 16, UF2_DATA_SIZE, true);
finalUf2View.setUint32(offset + 20, i, true);
finalUf2View.setUint32(offset + 24, newUf2Blocks.length, true);
finalUf2View.setUint32(offset + 28, RP2040_FAMILY_ID, true);
finalUf2.set(block.data, offset + 32);
finalUf2View.setUint32(offset + UF2_BLOCK_SIZE - 4, UF2_MAGIC_END, true);
});
// Trigger download
const blob = new Blob([finalUf2], { type: 'application/octet-stream' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'watapico_updated.uf2';
link.click();
},
powerOfTwoMask(size) {
let power = 1;
while (power < size) {
power <<= 1;
}
return power - 1;
}
}
}
</script>
</body>
</html>