add landing page and ability to load custom wads

ading2210 · Jan 13, 2025 · 9a57516 · 9a57516
1 parent 3ada922
commit 9a57516
Show file tree

Hide file tree

Showing 12 changed files with 191 additions and 17 deletions.
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -17,8 +17,6 @@ jobs:
           source .venv/bin/activate
           pip3 install -r requirements.txt
           env CFLAGS=-O3 ./build.sh
-          cp index.html out
-          rm out/compiled.js
           du -sh out/*
 
       - name: Publish to Cloudflare Pages

diff --git a/build.sh b/build.sh
@@ -21,6 +21,11 @@ fi
 emmake make -C doomgeneric -f Makefile.pdfjs -j$(nproc --all)
 
 mkdir -p out
+cp web/* out/
+
 python3 embed_file.py file_template.js doomgeneric/doom1.wad out/data.js
 cat pre.js out/data.js doomgeneric/doomgeneric.js > out/compiled.js
-python3 generate.py out/compiled.js out/doom.pdf
+cat pre.js file_template.js doomgeneric/doomgeneric.js > out/compiled_nowad.js
+
+python3 generate.py out/compiled.js out/doom.pdf
+python3 generate.py out/compiled_nowad.js out/doom_nowad.pdf
diff --git a/doomgeneric/doomgeneric_pdfjs.c b/doomgeneric/doomgeneric_pdfjs.c
@@ -131,9 +131,10 @@ void doomjs_tick() {
 
 int main(int argc, char **argv) {
   EM_ASM({
-    let stream = FS.open("/doom1.wad", "w+");
-    FS.write(stream, file_data, 0, file_data.length, 0);
-    FS.close(stream);
+    write_file(file_name, file_data);
+    if (file2_data) {
+      write_file(file2_name, file2_data);    
+    }
   });
 
   doomgeneric_Create(argc, argv);

diff --git a/embed_file.py b/embed_file.py
@@ -6,7 +6,8 @@
 
 with open(sys.argv[2], "rb") as f:
   b64 = base64.b64encode(f.read()).decode()
-  js = js.replace("__b64_data__", b64, 1)
+  js = js.replace("__iwad_file__", b64, 1)
+  js = js.replace("__iwad_filename__", "doom1.wad", 1)
 
 with open(sys.argv[3], "w") as f:
   f.write(js)
diff --git a/file_template.js b/file_template.js
@@ -12,4 +12,17 @@ function b64_to_uint8array(str) {
   return new Uint8Array(result);
 }
 
-var file_data = b64_to_uint8array("__b64_data__");
+var file_data = b64_to_uint8array("__iwad_file__");
+var file_name = "__iwad_filename__"
+var file2_data = b64_to_uint8array("__wad_file__");
+var file2_name = "__wad_filename__"
+
+if (file_data.length <= 9) {
+  throw "Error: IWAD not found.";
+}
+if (file2_data.length <= 9) {
+  file2_data = null;
+}
+else {
+  Module.arguments = ["-file", file2_name];
+}
diff --git a/index.html b/index.html
diff --git a/pre.js b/pre.js
@@ -64,3 +64,9 @@ function reset_input_box() {
 }
 app.setInterval("reset_input_box()", 1000);
 
+function write_file(filename, data) {
+  let stream = FS.open("/"+filename, "w+");
+  FS.write(stream, data, 0, data.length, 0);
+  FS.close(stream);
+}
+
diff --git a/web/favicon.ico b/web/favicon.ico
diff --git a/web/favicon.png b/web/favicon.png
diff --git a/web/index.css b/web/index.css
@@ -0,0 +1,56 @@
+* {
+  font-family: Arial, Helvetica, sans-serif;
+  box-sizing: border-box;
+}
+body {
+  padding: 8px;
+  margin: 0px;
+  width: 100%;
+  background-color: #222222;
+}
+
+.spacer {
+  flex-grow: 1;
+}
+
+#article {
+  background-color: whitesmoke;
+  padding: 12px;
+  border-radius: 4px;
+
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 550px;
+  height: 300px;
+  margin-left: -275px;
+  margin-top: -150px;
+}
+#header_box {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+#header_box > h1 {
+  margin: 0px;
+}
+#controls_box {
+  display: flex;
+  align-items: center;
+}
+#controls_box > * {
+  font-size: 14px;
+}
+#wad_container {
+  align-items: center;
+  font-size: 12px;
+  display: none;
+  margin-top: 12px;
+}
+#play_button {
+  text-decoration: none;
+  color: black;
+  background-color: lightgray;
+  padding: 8px;
+  border-radius: 3px;
+}
diff --git a/web/index.html b/web/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <title>DoomPDF</title>
+    <link rel="stylesheet" href="/index.css">
+    <script src="/index.js" defer></script>
+  </head>
+  <body>
+    <div id="article">
+      <div id="header_box">
+        <img src="/favicon.png" width="48px" height="48px">
+        <h1>DoomPDF</h1>
+      </div>
+
+      <p>This is a Doom source port that runs inside a PDF file.</p>
+      <p>Source code: <a href="https://github.com/ading2210/doompdf">https://github.com/ading2210/doompdf</a></p>
+
+      <hr><br>
+
+      <div id="controls_box">
+        <a href="/doom.pdf" id="play_button">Start Game</a>
+        <p id="shareware_note" style="margin: 0px; margin-left: 8px;">(shareware)</p>
+        <div class="spacer"></div>
+        <input type="checkbox" id="custom_wad_checkbox">
+        <label for="custom_wad_checkbox">Custom WAD</label>
+      </div>
+      <div id="wad_container">
+        <div>
+          <label for="iwad_file_picker">IWAD file:</label><br>
+          <input type="file" id="iwad_file_picker" name="iwad_file_picker" accept=".wad">
+        </div>
+        <div class="spacer"></div>
+        <div>
+          <label for="iwad_file_picker">PWAD file:</label><br>
+          <input type="file" id="wad_file_picker" name="wad_file_picker" accept=".wad">
+        </div>
+      </div>
+      <br>
+      <p style="font-size: 12px; margin-top: 4px; margin-bottom: 4px;">Note: the PDF only works inside Chromium-based browsers.</p>
+    </div>
+  </body>
+</html>
diff --git a/web/index.js b/web/index.js
@@ -0,0 +1,59 @@
+const from_id = (id) => {return document.getElementById(id)};
+const custom_wad_checkbox = from_id("custom_wad_checkbox");
+const wad_file_picker = from_id("wad_file_picker");
+const iwad_file_picker = from_id("iwad_file_picker");
+const wad_container = from_id("wad_container");
+const play_button = from_id("play_button");
+const shareware_note = from_id("shareware_note");
+
+custom_wad_checkbox.onchange = () => {
+  if (custom_wad_checkbox.checked) {
+    wad_container.style.display = "flex";
+    shareware_note.style.display = "none";
+  }
+  else {
+    wad_container.style.display = "none";
+    shareware_note.style.display = "initial";
+  } 
+}
+
+play_button.onclick = (event) => {
+  if (!custom_wad_checkbox.checked) 
+    return;
+  event.stopImmediatePropagation();
+  event.preventDefault();
+
+  launch_custom_wads();
+}
+
+function get_file_b64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result.split(",")[1]);
+    reader.onerror = error => reject(error);
+  });
+}
+
+async function launch_custom_wads() {
+  let iwad_file = iwad_file_picker.files[0];
+  if (!iwad_file)
+    alert("Error: No IWAD file selected.");
+  let pwad_file = wad_file_picker.files[0];
+
+  let response = await fetch("/doom_nowad.pdf");
+  let pdf = await response.text();
+
+  let iwad_b64 = await get_file_b64(iwad_file);
+  pdf = pdf.replace("__iwad_file__", iwad_b64);
+  pdf = pdf.replace("__iwad_filename__", iwad_file.name);
+
+  if (pwad_file) {
+    let pwad_b64 = await get_file_b64(pwad_file);
+    pdf = pdf.replace("__wad_file__", pwad_b64);
+    pdf = pdf.replace("__wad_filename__", pwad_file.name);  
+  }
+
+  let blob = new Blob([pdf], {type: "application/pdf"});
+  open(URL.createObjectURL(blob));
+}