mirror of
https://github.com/orangeglo/gbnp.git
synced 2026-04-16 21:55:56 -05:00
148 lines
5.8 KiB
HTML
148 lines
5.8 KiB
HTML
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Game Boy Nintendo Power ROM Builder</title>
|
|
<script src="script/vue.js"></script>
|
|
<script src="script/gbnp.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="style.css" />
|
|
</head>
|
|
|
|
<body>
|
|
<h1>GAME BOY Nintendo Power ROM Builder</h1>
|
|
<div class='text-container'>
|
|
This tool can build the data necessary to flash new games to a <a href="https://en.wikipedia.org/wiki/Nintendo_Power_(cartridge)">Nintendo Power Game Boy cart</a>. The cartridge can store up to seven roms, or a total of 896KB of game data. For flashing, I recommend the <a href="https://www.gbxcart.com/">GBxCart</a>.
|
|
</div>
|
|
<div id="app">
|
|
<h2>
|
|
1. Upload Menu ROM
|
|
<span v-if="menu.ready()" style="color: green">✓</span>
|
|
<span v-if="!menu.ready()" style="color: red">✗</span>
|
|
</h2>
|
|
<section>
|
|
<p v-if="!menu.present()">
|
|
Menu is not loaded. Please upload a menu ROM.
|
|
</p>
|
|
<p v-if="!menu.valid()">
|
|
Menu is not valid. Please upload a valid menu ROM.
|
|
</p>
|
|
<p v-if="menu.loadedFromStorage && menu.valid()">
|
|
Menu loaded from storage! You're all set.
|
|
</p>
|
|
<p v-if="!menu.loadedFromStorage && menu.ready()">
|
|
Menu loaded and cached! You're all set.
|
|
</p>
|
|
<button v-on:click="triggerAddMenuLabel" class="upload" type="button">
|
|
<label for="menuFileInput" ref="addMenuLabel" v-on:click="stopPropagation">Upload Menu</label>
|
|
</button>
|
|
<input style="display: none" id="menuFileInput" type="file" v-on:change="addMenu" accept=".gb,.gbc">
|
|
</section>
|
|
|
|
<h2>
|
|
2. Add Game ROMs
|
|
<span v-if="roms.length > 0 && !romOverflow" style="color: green">✓</span>
|
|
<span v-if="romOverflow"style="color: red">✗</span>
|
|
</h2>
|
|
<section>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
<th>Title</th>
|
|
<th>Type</th>
|
|
<th>ROM (KB)</th>
|
|
<th>RAM (KB)</th>
|
|
<th>Menu Title</th>
|
|
<th>Preview</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(rom, index) in roms" v-bind:key="index">
|
|
<td>
|
|
<button id="remove-rom" v-on:click="removeROM(index)" type="button">✗</button>
|
|
<button :disabled="index == 0" v-on:click="moveUp(index)" type="button">↑</button>
|
|
<button :disabled="index == (roms.length - 1)" v-on:click="moveDown(index)" type="button">↓</button>
|
|
</td>
|
|
<td>{{ rom.title }}</td>
|
|
<td>{{ rom.type }}</td>
|
|
<td>{{ rom.padded() ? '128 (' + rom.romSizeKB() + ')' : rom.romSizeKB() }}</td>
|
|
<td>{{ rom.ramSizeKB() }}</td>
|
|
<td>
|
|
<input type="text" class='menu-text' :value="rom.menuText" @input="e => updateMenuText(rom, e.target.value)"/>
|
|
</td>
|
|
<td>
|
|
<bitmap-preview :data="rom.bitmapPreviewBuffer"/>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<td>
|
|
<button v-on:click="triggerAddRomLabel" class="upload" :disabled="!menu.ready() || romOverflow" type="button">
|
|
<label for="romFileInput" ref="addRomLabel" v-on:click="stopPropagation">Add Game</label>
|
|
</button>
|
|
<input style="display: none" id="romFileInput" type="file" v-on:change="addROM" :disabled="!menu.ready() || romOverflow" accept=".gb,.gbc">
|
|
</td>
|
|
<td></td>
|
|
<td></td>
|
|
<td :class="{ overflow: romOverflow }">{{ processor.romUsedKB() }}</td>
|
|
<td>{{ processor.ramUsedKB() }}</td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</section>
|
|
|
|
<h2>3. Tweak Settings </h2>
|
|
<section class="flex-container">
|
|
<div class="flex-column">
|
|
<div>
|
|
<span class="settings-label">Menu Font: </span>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="settings-label" id="filename-label" for="filename-input">Filename: </label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-column">
|
|
<div>
|
|
<input type="radio" id="font0" name="font" value="0" v-model="fontIndex">
|
|
<label for="font0" id="pixeltype" class="radio-label">Pixeltype</label>
|
|
|
|
<input type="radio" id="font1" name="font" value="1" v-model="fontIndex">
|
|
<label for="font1" id="gameboy" class="radio-label">Game Boy</label>
|
|
|
|
<input type="radio" id="font2" name="font" value="2" v-model="fontIndex">
|
|
<label for="font2" id="nokia" class="radio-label">Nokia</label>
|
|
|
|
<input type="radio" id="font3" name="font" value="3" v-model="fontIndex">
|
|
<label for="font3" id="gamer" class="radio-label">Gamer</label>
|
|
</div>
|
|
|
|
<div>
|
|
<input id="filename-input" type="text" v-model:value="filename"/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<h2>4. Download Files</h2>
|
|
<section>
|
|
<a class='download-link' :download="filename + '.map'" :href="downloadEnabled ? mapData : null" type="application/octet-stream" v-on:click="downloadMapFile" :class="{ disabled: !downloadEnabled }">Download MAP File</a>
|
|
/
|
|
<a class='download-link' :download="filename + '.gb'" :href="downloadEnabled ? romData : null" type="application/octet-stream" v-on:click="downloadRomFile" :class="{ disabled: !downloadEnabled }">Download GB File</a>
|
|
</section>
|
|
</div>
|
|
|
|
<footer>
|
|
v0.1
|
|
-
|
|
built by orangeglo
|
|
-
|
|
<a href="https://github.com/orangeglo/gbnp">view this project on github</a>
|
|
</footer>
|
|
|
|
<script src="script/app.js"></script>
|
|
</body>
|
|
</html>
|