v0.0.2

aymeric-giraudet · Nov 22, 2020 · 8dcd8f9 · 8dcd8f9
1 parent 6616f6c
commit 8dcd8f9
Show file tree

Hide file tree

Showing 12 changed files with 254 additions and 315 deletions.
diff --git a/index.css b/index.css
@@ -8,6 +8,48 @@ body {
 
 #controls {
   margin: 2rem;
+  display: none;
+}
+
+#episode {
+  display: none;
+}
+
+#update {
+  float: right;
+  position: relative;
+}
+
+#updated-at {
+  visibility: hidden;
+  width: 120px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  padding: 5px 0;
+  border-radius: 6px;
+  top: 100%;
+  left: 50%;
+  margin-left: -60px;
+  position: absolute;
+  z-index: 1;
+}
+
+#update:hover #updated-at {
+  visibility: visible;
+}
+
+#updating {
+  color: white;
+  text-shadow: #000 0px 0px 5px, #000 0px 0px 5px, #000 0px 0px 5px,
+    #000 0px 0px 5px, #000 0px 0px 5px, #000 0px 0px 5px, #000 0px 0px 5px,
+    #000 0px 0px 5px, #000 0px 0px 5px;
+  font-weight: 600;
+  font-size: 2.2rem;
+  position: absolute;
+  left: 30%;
+  top: 45%;
+  display: none;
 }
 
 #dialog {
@@ -59,6 +101,7 @@ body {
 #text-jp {
   text-shadow: #000 0px 0px 3px, #000 0px 0px 3px, #000 0px 0px 3px,
     #000 0px 0px 3px, #000 0px 0px 3px, #000 0px 0px 3px;
+  font-family: "Sawarabi Gothic";
   margin-top: 2.5rem;
   position: fixed;
   bottom: 2%;

diff --git a/index.html b/index.html
@@ -3,8 +3,12 @@
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="Content-Security-Policy" content="default-src 'self'" />
-    <script type="module" src="src/index.js"></script>
+    <link
+      rel="stylesheet"
+      href="node_modules/typeface-sawarabi-gothic/index.css"
+    />
     <link rel="stylesheet" href="index.css" />
+    <script type="module" src="src/index.js"></script>
   </head>
   <body>
     <div id="controls">
@@ -16,9 +20,15 @@
         <option value="Chapter4">Chapter 4</option>
         <option value="LastChapter">Last Chapter</option>
         <option value="ExtraChapter">Extra Chapter</option>
+        <option value="Episodes">Episodes --></option>
       </select>
-      <input type="number" id="line-number" />
+      <select name="episode" id="episode"></select>
+      <input type="number" min="0" id="line-number" />
+      <button type="button" id="update">
+        Update translations<span id="updated-at"></span>
+      </button>
     </div>
+    <div id="updating">Updating translations, please wait...</div>
     <div id="dialog">
       <div id="text-box">
         <div id="name"></div>

diff --git a/main.js b/main.js
@@ -9,10 +9,10 @@ function createWindow() {
     transparent: true,
     hasShadow: false,
     webPreferences: {
-      nodeIntegration: false, // is default value after Electron v5
-      contextIsolation: true, // protect against prototype pollution
-      enableRemoteModule: false, // turn off remote
-      preload: path.join(__dirname, "preload.js"), // use a preload script
+      nodeIntegration: false,
+      contextIsolation: true,
+      enableRemoteModule: false,
+      preload: path.join(__dirname, "preload.js"),
     },
   });
 

diff --git a/package.json b/package.json
@@ -14,6 +14,9 @@
     "electron": "^10.1.5"
   },
   "dependencies": {
+    "concat-stream": "^2.0.0",
+    "follow-redirects": "^1.13.0",
+    "typeface-sawarabi-gothic": "^1.1.13",
     "xlsx": "^0.16.8"
   },
   "config": {

diff --git a/parseXlsx.js b/parseXlsx.js
@@ -1,12 +1,54 @@
 const xlsx = require("xlsx");
 const fs = require("fs");
+const https = require("follow-redirects").https;
+const concat = require("concat-stream");
 
-const file = xlsx.readFile("./Hajimari.xlsx");
-const translations = Object.fromEntries(
-  file.SheetNames.map((name) => [
-    name,
-    xlsx.utils.sheet_to_json(file.Sheets[name]),
-  ])
-);
+function download(url, cb) {
+  const concatStream = concat(cb);
+  https.get(url, function (response) {
+    response.pipe(concatStream);
+  });
+}
 
-fs.writeFileSync("test.json", JSON.stringify(translations));
+const sheetsToIgnore = ["Misc", "Minigames", "Episodes"];
+
+module.exports = function downloadAndParseTranslations(cb) {
+  download(
+    "https://docs.google.com/spreadsheets/d/16vqUNRQRB5CimIOVHfdyT5Yp6YOPzzVkR_9vtrU1wtI/export?format=xlsx",
+    function xlsxToJson(buffer) {
+      const file = xlsx.read(buffer, { type: "buffer" });
+      const translations = {
+        ...Object.fromEntries(
+          file.SheetNames.filter(
+            (name) =>
+              !sheetsToIgnore.some((nameToIgnore) => name === nameToIgnore)
+          ).map((name) => [
+            name,
+            xlsx.utils
+              .sheet_to_json(file.Sheets[name], {
+                header: ["name", "en", "jp"],
+              })
+              .slice(name === "Prologue" ? 22 : 1),
+          ])
+        ),
+        Episodes: xlsx.utils
+          .sheet_to_json(file.Sheets["Episodes"], {
+            header: ["name", "en", "jp", "flag"],
+          })
+          .slice(1)
+          .reduce(
+            (acc, line) =>
+              line.flag === "x"
+                ? [...acc, [line]]
+                : [...acc.slice(0, -1), [...acc[acc.length - 1], line]],
+            []
+          ),
+      };
+      cb(translations);
+      fs.writeFileSync(
+        "translation.json",
+        JSON.stringify({ date: new Date(), ...translations })
+      );
+    }
+  );
+};
diff --git a/preload.js b/preload.js
@@ -1,7 +1,9 @@
-const trads = require("./test.json");
+const trads = require("./translation.json");
 const { contextBridge } = require("electron");
+const downloadAndParseTranslations = require("./parseXlsx");
 
 contextBridge.exposeInMainWorld("api", {
   getTranslations: () => trads,
+  updateTranslations: (cb) => downloadAndParseTranslations(cb),
   getPlatform: () => process.platform,
 });
diff --git a/src/dialogManager.js b/src/dialogManager.js
@@ -1,7 +1,8 @@
-import chapters from "./lines.js";
+import { chapters, updateTranslations } from "./lines.js";
 
 let textFrozen = false;
 let currentChapter = "Prologue";
+let currentEpisode = "0";
 let timeout;
 let speed;
 let finished = true;
@@ -10,7 +11,18 @@ const savedChapter = localStorage.getItem("currentChapter");
 if (savedChapter) {
   currentChapter = savedChapter;
 }
-let lines = chapters[currentChapter];
+const savedEpisode = localStorage.getItem("currentEpisode");
+if (savedEpisode) {
+  currentEpisode = savedEpisode;
+}
+
+let lines;
+if (currentChapter === "Episodes") {
+  lines = chapters.Episodes[parseInt(currentEpisode)];
+  document.getElementById("episode").style.display = "inline";
+} else {
+  lines = chapters[currentChapter];
+}
 
 const savedLine = localStorage.getItem("currentLine");
 if (savedLine) {
@@ -20,7 +32,19 @@ if (savedLine) {
 
 document.getElementById("chapter").addEventListener("change", (evt) => {
   currentChapter = evt.target.value;
-  lines = chapters[currentChapter];
+  if (currentChapter === "Episodes") {
+    document.getElementById("episode").style.display = "inline";
+    lines = chapters.Episodes[parseInt(currentEpisode)];
+  } else {
+    document.getElementById("episode").style.display = "none";
+    lines = chapters[currentChapter];
+  }
+  render(lines.next());
+});
+
+document.getElementById("episode").addEventListener("change", (evt) => {
+  currentEpisode = evt.target.value;
+  lines = chapters.Episodes[parseInt(currentEpisode)];
   render(lines.next());
 });
 
@@ -29,11 +53,34 @@ document.getElementById("line-number").addEventListener("change", (evt) => {
   render(lines.next());
 });
 
+document.getElementById("update").addEventListener("click", async (evt) => {
+  document.getElementById("updating").style.display = "block";
+  document.getElementById("update").disabled = true;
+  await updateTranslations();
+  document.getElementById("updating").style.display = "none";
+  document.getElementById("update").disabled = false;
+  if (currentChapter === "Episodes") {
+    lines = chapters.Episodes[parseInt(currentEpisode)];
+    document.getElementById("episode").style.display = "inline";
+  } else {
+    lines = chapters[currentChapter];
+  }
+  const savedLine = localStorage.getItem("currentLine");
+  lines.current = parseInt(savedLine);
+  render(lines[lines.current]);
+});
+
 function render(line) {
   const chapter = document.getElementById("chapter");
   chapter.value = currentChapter;
+  const episode = document.getElementById("episode");
+  episode.value = currentEpisode;
   const lineNumber = document.getElementById("line-number");
   lineNumber.value = lines.current;
+  const updatedAt = document.getElementById("updated-at");
+  updatedAt.innerText = `Last update : ${new Date(
+    chapters.date
+  ).toLocaleString()}`;
 
   const name = document.getElementById("name");
   name.innerText = line.name || "";
@@ -45,9 +92,10 @@ function render(line) {
 
   localStorage.setItem("currentLine", lines.current);
   localStorage.setItem("currentChapter", currentChapter);
+  localStorage.setItem("currentEpisode", currentEpisode);
 }
 
-function typeWriter(txt) {
+function typeWriter(txt = "") {
   const english = document.getElementById("text-en");
   english.innerText = "";
   speed = 20;
@@ -59,7 +107,7 @@ function typeWriter(txt) {
   function typeCharacter() {
     const character = characters.next();
     if (!character.done) {
-      document.getElementById("text-en").innerHTML += character.value;
+      english.innerHTML += character.value;
       timeout = setTimeout(typeCharacter, speed);
     } else {
       finished = true;

diff --git a/src/index.js b/src/index.js
@@ -2,6 +2,9 @@ import registerButtonHandlers from "./gamepad.js";
 import { advanceText, backwardText, freezeText } from "./dialogManager.js";
 import registerKeyHandlers from "./keyboard.js";
 
+document.getElementById("controls").style.display = "none";
+document.getElementById("updating").style.display = "none";
+
 if (window.api.getPlatform() === "darwin") {
   document.getElementById("name").classList.add("textStroke");
   document.getElementById("text-en").classList.add("textStroke");

diff --git a/src/lines.js b/src/lines.js
@@ -10,12 +10,39 @@ class TraversableArray extends Array {
   }
 }
 
-const translations = window.api.getTranslations();
-const lines = Object.fromEntries(
-  Object.entries(translations).map(([chapter, trans]) => [
-    chapter,
-    new TraversableArray(...trans),
-  ])
-);
+window.api.getTranslations();
 
-export default lines;
+function mapTranslations(translations) {
+  const episodesSelect = document.getElementById("episode");
+  translations.Episodes.forEach((episode, index) => {
+    const option = document.createElement("option");
+    option.value = index;
+    option.innerText = episode[0].en;
+    episodesSelect.appendChild(option);
+  });
+  return {
+    ...Object.fromEntries(
+      Object.entries(translations).map(([chapter, trans]) => [
+        chapter,
+        chapter === "Episodes"
+          ? trans.map((episode) => new TraversableArray(...episode))
+          : new TraversableArray(...trans),
+      ])
+    ),
+    date: translations.date,
+  };
+}
+
+let chapters = mapTranslations(window.api.getTranslations());
+
+async function updateTranslations() {
+  return new Promise((resolve) => {
+    window.api.updateTranslations((result) => {
+      chapters = mapTranslations(result);
+      chapters.date = new Date().toString();
+      resolve();
+    });
+  });
+}
+
+export { chapters, updateTranslations };
diff --git a/test.json b/test.json
diff --git a/translation.json b/translation.json