Finished menu file loading, style improvements

2026-04-25 07:37:06 -05:00 · 2020-03-30 22:38:06 -04:00 · 2020-03-30 22:38:06 -04:00 · e62fda8ff1
commit e62fda8ff1
parent 6b9aa9ca2e
7 changed files with 165 additions and 32 deletions
--- a/GillSansHeavyItalic.woff
+++ b/GillSansHeavyItalic.woff
--- a/img/font.png
+++ b/img/font.png
--- a/img/gbmm_font.bmp
+++ b/img/gbmm_font.bmp
--- a/index.html
+++ b/index.html
@ -1,65 +1,96 @@
 <html>
  <head>
    <meta charset="UTF-8">
-    <title>GBNP: Game Boy Nintendo Power ROM Builder</title>
+    <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>GBNP: Game Boy Nintendo Power ROM Builder</h1>
+    <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">
-      <div>
+      <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 class="upload" type="button"><label for="menuFileInput">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" style="color: green">✓</span></h2>
+      <section>
        <table>
          <thead>
            <tr>
-              <th>Index</th>
+              <th></th>
              <th>Title</th>
              <th>Type</th>
              <th>ROM (KB)</th>
              <th>RAM (KB)</th>
-              <th></th>
+              <th>Menu Title</th>
+              <th>Preview</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(rom, index) in roms">
-              <td>{{ index + 1 }}</td>
+              <td>
+                <button id="remove-rom" v-on:click="removeROM(index)" type="button">✗</button>
+                <button v-bind:disabled="index == 0" v-on:click="moveUp(index)" type="button">↑</button>
+                <button v-bind: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>
-                <button v-bind:disabled="index == 0" v-on:click="moveUp(index)" type="button">↑</button>
-                <button v-bind:disabled="index == (roms.length - 1)" v-on:click="moveDown(index)" type="button">↓</button>
-                <button id="remove-rom" v-on:click="removeFile(index)" type="button">x</button>
+                <input type="text" class='menu-text' v-bind:value="rom.menuText"/>
              </td>
+              <td></td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
-              <td></td>
+              <td>
+                <button class="upload" v-bind:disabled="!menu.ready()" type="button"><label for="romFileInput">Add Game</label></button>
+                <input style="display: none" id="romFileInput" type="file" v-on:change="addROM" v-bind:disabled="!menu.ready()" accept=".gb,.gbc">
+              </td>
              <td></td>
              <td></td>
              <td>{{ processor.romUsedKB() }}</td>
              <td>{{ processor.ramUsedKB() }}</td>
-              <td>
-                <button id="add-rom" type="button"><label for="fileInput">Add ROM</label></button>
-                <input style="display: none" id="fileInput" type="file" v-on:change="addFile">
-              </td>
+              <td></td>
+              <td></td>
            </tr>
          </tfoot>
        </table>
-      </div>
+      </section>

-
-      <p>
-        <a class='download-link' v-bind:download="filename + '.map'" v-bind:href="mapData" type="application/octet-stream" v-on:click="downloadMapFile">Download MAP File</a>
+      <h2>3. Download Files</h2>
+      <section>
+        <a class='download-link' v-bind:download="filename + '.map'" v-bind:href="downloadEnabled() ? mapData : null" type="application/octet-stream" v-on:click="downloadMapFile" v-bind:class="{ disabled: !downloadEnabled() }">Download MAP File</a>
        /
-        <a class='download-link' v-bind:download="filename + '.gb'" v-bind:href="romData" type="application/octet-stream" v-on:click="downloadRomFile">Download ROM File</a>
-      </p>
+        <a class='download-link' v-bind:download="filename + '.gb'" v-bind:href="downloadEnabled() ? romData : null" type="application/octet-stream" v-on:click="downloadRomFile" v-bind:class="{ disabled: !downloadEnabled() }">Download ROM 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>
--- a/script/app.js
+++ b/script/app.js
@ -1,20 +1,34 @@
 let app = new Vue({
  el: '#app',
  data: {
+    menu: new Menu(),
    roms: [],
    processor: new Processor([]),
    filename: 'output',
    mapData: '',
    romData: ''
  },
+  created: function() {
+    this.processor.menu = this.menu;
+  },
  methods: {
-    addFile: async function(e) {
-      this.roms.push(new ROM(await e.target.files[0].arrayBuffer()));
+    addMenu: function(e) {
+      let fileReader = new FileReader()
+      fileReader.onload = () => this.menu.setData(fileReader.result);
+      fileReader.readAsArrayBuffer(e.target.files[0]);
+
+      e.target.value = '';
+    },
+    addROM: function(e) {
+      let fileReader = new FileReader()
+      fileReader.onload = () => this.roms.push(new ROM(fileReader.result));
+      fileReader.readAsArrayBuffer(e.target.files[0]);
+
      this.processor.roms = this.roms;

      e.target.value = '';
    },
-    removeFile: function(index) {
+    removeROM: function(index) {
      this.roms.splice(index, 1);
      this.processor.roms = this.roms;
    },
@ -37,6 +51,9 @@ let app = new Vue({
    downloadRomFile: function(e) {
      if (this.romData) { URL.revokeObjectURL(this.romData) }
      this.romData = URL.createObjectURL(new Blob([this.processor.romData()]));
+    },
+    downloadEnabled: function() {
+      return (this.roms.length > 0) && this.menu.present() && this.menu.valid() ;
    }
  }
 });
--- a/script/gbnp.js
+++ b/script/gbnp.js
--- a/style.css
+++ b/style.css
@ -3,13 +3,47 @@ html {
  line-height: 1.4;
 }

+@font-face {
+  font-family: "GillSans-HeavyItalic";
+  src: url("./GillSansHeavyItalic.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+
+h1 {
+  color: #000079;
+}
+
+h1, h2 {
+  font-family: 'GillSans-HeavyItalic', sans-serif;
+  padding-top: 10px;
+}
+
+h2 {
+  color: #444;
+  border-top: 2px dotted grey;
+  display: inline-block;
+  border-bottom: 2px dotted grey;
+}
+
+p {
+  margin-top: 0;
+}
+
+footer {
+  margin-top: 40px;
+  font-size: 0.75em;
+  font-weight: bold;
+  color: #444;
+}
+
 button {
-  padding: 1px;
+  padding: 2px 5px;
  font-weight: bold;
 }

-button#add-rom {
-  padding: 1px 9px;
+button.upload {
+  padding: 2px 8px;
  color: blue;
 }

@ -17,10 +51,33 @@ button#remove-rom {
  color: red;
 }

-a.download-link {
+button[disabled='disabled'] {
+  color: grey;
+}
+
+.text-container {
+  width: 850px;
+}
+
+a {
+  color: #000079;
+}
+
+a.download-link{
  color: blue;
 }

+a.disabled {
+  pointer-events: none;
+  cursor: default;
+  text-decoration: none;
+  color: grey;
+}
+
+section {
+  margin-left: 10px;
+}
+
 table {
  border-collapse: collapse;
  min-width: 850px;