Add passing of tournament info for round win display

ValoSpectra · Feb 2, 2025 · ed20ddd · ed20ddd
1 parent e104b9c
commit ed20ddd
Show file tree

Hide file tree

Showing 8 changed files with 165 additions and 18 deletions.
diff --git a/.electron-delta.js b/.electron-delta.js
@@ -3,7 +3,7 @@ const DeltaBuilder = require("@electron-delta/builder");
 const path = require("path");
 
 // Last 5 versions
-const previousVersions = ["0.2.13", "0.2.12", "0.2.11", "0.2.10", "0.2.9"];
+const previousVersions = ["0.2.14", "0.2.13", "0.2.12", "0.2.11", "0.2.10"];
 
 const options = {
   productIconPath: path.join(__dirname, "/build/icon.ico"),

diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
     "name": "Spectra Team",
     "url": "https://www.valospectra.com"
   },
-  "version": "0.2.14",
+  "version": "0.2.15",
   "description": "https://www.valospectra.com",
   "private": true,
   "main": "./app/main.js",

diff --git a/src/frontend/index.html b/src/frontend/index.html
@@ -108,19 +108,43 @@ <h1 class="txt">Right Team</h1>
       </div>
       <div class="scroll-txt">Scroll for hotkeys and optional settings</div>
       <div class="section">
-        <h1 class="txt">Hotkeys</h1>
-        <label class="txt" for="hotkeySpikeInput">Spike planted</label>
+        <label class="txt" for="ShowTournamentInfo">
+          Show Round Win Box<input type="checkbox" id="ShowTournamentInfo" />
+        </label>
+        <label class="txt invisible" id="TournamentNameLabel" for="TournamentNameInput"
+          >Enter tournament name</label
+        >
         <input
           type="text"
-          class="textInput"
-          id="hotkeySpikeInput"
-          maxlength="30"
-          placeholder="e.g. Ctrl+F9"
-          value="F9"
-          pattern="^(Ctrl\+|Alt\+|Shift\+)*(\D|F[1-9][0-2]?|\d)$"
-          title="Can't resolve key. Try 'Ctrl+F9' for example."
+          maxlength="50"
+          class="textInput invisible"
+          id="TournamentNameInput"
+          placeholder="e.g. Spectra Invitational"
+        />
+        <label class="txt invisible" id="TournamentLogoLabel" for="TournamentLogoInput"
+          >Tournament logo URL</label
+        >
+        <input
+          type="text"
+          class="textInput invisible"
+          id="TournamentLogoInput"
+          maxlength="300"
+          placeholder="e.g. https://imgur.com/*.png "
+          title="Ensure the link ends in .png, .jpg, or .webp to ensure the image is able to be displayed"
+          pattern="https://.*\.(png|jpg|webp)"
           required
         />
+        <label class="txt invisible" id="TournamentBackdropLabel" for="TournamentBackdropInput"
+          >Tournament backdrop URL</label
+        >
+        <input
+          type="text"
+          class="textInput invisible"
+          id="TournamentBackdropInput"
+          maxlength="300"
+          placeholder="e.g. https://imgur.com/*.png, empty for default"
+          title="Ensure the link ends in .png, .jpg, or .webp to ensure the image is able to be displayed"
+        />
       </div>
       <div class="section">
         <label class="txt" for="MapsNeededInput">Enter maps needed to win series</label>
@@ -292,6 +316,22 @@ <h2 class="txt">Right Map</h2>
           <label class="txt" for="Map3RightPicker">Right Team</label>
         </div>
       </div>
+
+      <div class="section">
+        <h1 class="txt">Hotkeys</h1>
+        <label class="txt" for="hotkeySpikeInput">Spike planted</label>
+        <input
+          type="text"
+          class="textInput"
+          id="hotkeySpikeInput"
+          maxlength="30"
+          placeholder="e.g. Ctrl+F9"
+          value="F9"
+          pattern="^(Ctrl\+|Alt\+|Shift\+)*(\D|F[1-9][0-2]?|\d)$"
+          title="Can't resolve key. Try 'Ctrl+F9' for example."
+          required
+        />
+      </div>
       <div class="scroll-txt"></div>
     </div>
   </body>

diff --git a/src/frontend/renderer.js b/src/frontend/renderer.js
@@ -2,6 +2,10 @@ document.querySelector("#ConnectButton").addEventListener("click", () => {
   connect();
 });
 
+document.querySelector("#ShowTournamentInfo").addEventListener("change", () => {
+  showHideTournament();
+});
+
 document.querySelector("#ShowMappoolInfo").addEventListener("change", () => {
   showHideMapPool();
 });
@@ -58,6 +62,16 @@ function connect() {
     right: seedingRight,
   };
 
+  const tournamentInfo = getTournamentInfo();
+  const emptyTournamentInfo = {
+    name: "",
+    logoUrl: "",
+    backdropUrl: "",
+  };
+  const tournamentInfoToSend = document.getElementById("ShowTournamentInfo").checked
+    ? tournamentInfo
+    : emptyTournamentInfo;
+
   const hotkeySpike = document.getElementById("hotkeySpikeInput").value || "";
 
   const hotkeys = {
@@ -73,6 +87,7 @@ function connect() {
     key,
     seriesInfo,
     seedingInfo,
+    tournamentInfoToSend,
     hotkeys,
   );
 
@@ -81,12 +96,29 @@ function connect() {
   localStorage.setItem("ingestIp", ingestIp);
   localStorage.setItem("leftTeam", JSON.stringify(leftTeam));
   localStorage.setItem("rightTeam", JSON.stringify(rightTeam));
+  localStorage.setItem(
+    "tournamentInfoChecked",
+    document.getElementById("ShowTournamentInfo").checked,
+  );
+  if (document.getElementById("ShowTournamentInfo").checked) {
+    localStorage.setItem("tournamentInfo", JSON.stringify(tournamentInfo));
+  }
   localStorage.setItem("mapPoolChecked", document.getElementById("ShowMappoolInfo").checked);
   localStorage.setItem("seriesInfo", JSON.stringify(seriesInfo));
   localStorage.setItem("seedingInfo", JSON.stringify(seedingInfo));
   localStorage.setItem("hotkeys", JSON.stringify(hotkeys));
 }
 
+function getTournamentInfo() {
+  const toReturn = {
+    name: document.getElementById("TournamentNameInput").value || "",
+    logoUrl: document.getElementById("TournamentLogoInput").value || "",
+    backdropUrl: document.getElementById("TournamentBackdropInput").value || "",
+  };
+
+  return toReturn;
+}
+
 function getMappoolInfo() {
   const mappool = [];
 
@@ -209,6 +241,11 @@ window.electronAPI.setInputAllowed((value) => {
   document.getElementById("SeedingLeftInput").disabled = disableInput;
   document.getElementById("SeedingRightInput").disabled = disableInput;
 
+  document.getElementById("ShowTournamentInfo").disabled = disableInput;
+  document.getElementById("TournamentNameInput").disabled = disableInput;
+  document.getElementById("TournamentLogoInput").disabled = disableInput;
+  document.getElementById("TournamentBackdropInput").disabled = disableInput;
+
   document.getElementById("ShowMappoolInfo").disabled = disableInput;
 
   document.getElementById("Map1TimeSelect").disabled = disableInput;
@@ -310,6 +347,23 @@ function showHideMapPool() {
   mappool3.style.display = chkbox.checked ? "block" : "none";
 }
 
+function showHideTournament() {
+  const chkbox = document.getElementById("ShowTournamentInfo");
+  const roundwin1 = document.getElementById("TournamentNameInput");
+  const roundwin2 = document.getElementById("TournamentLogoInput");
+  const roundwin3 = document.getElementById("TournamentBackdropInput");
+  const roundwin4 = document.getElementById("TournamentNameLabel");
+  const roundwin5 = document.getElementById("TournamentLogoLabel");
+  const roundwin6 = document.getElementById("TournamentBackdropLabel");
+
+  roundwin1.style.display = chkbox.checked ? "block" : "none";
+  roundwin2.style.display = chkbox.checked ? "block" : "none";
+  roundwin3.style.display = chkbox.checked ? "block" : "none";
+  roundwin4.style.display = chkbox.checked ? "block" : "none";
+  roundwin5.style.display = chkbox.checked ? "block" : "none";
+  roundwin6.style.display = chkbox.checked ? "block" : "none";
+}
+
 function showHideMapDetails(map) {
   const down = document.getElementById(`Map${map}TimeSelect`);
 
@@ -356,9 +410,28 @@ function loadAll() {
     document.getElementById("SeedingRightInput").value = seedingInfo.right || "";
   }
 
-  const mapPool = localStorage.getItem("mapPoolChecked");
-  if (mapPool) {
-    document.getElementById("ShowMappoolInfo").checked = mapPool;
+  const shouldTournamentInfoChecked = localStorage.getItem("tournamentInfoChecked");
+  if (shouldTournamentInfoChecked) {
+    const roundWinElement = document.getElementById("ShowTournamentInfo");
+    if (shouldTournamentInfoChecked === "true") {
+      roundWinElement.checked = shouldTournamentInfoChecked;
+    }
+    showHideTournament();
+  }
+
+  const tournamentInfo = JSON.parse(localStorage.getItem("tournamentInfo")) || undefined;
+  if (tournamentInfo) {
+    document.getElementById("TournamentNameInput").value = tournamentInfo.name || "";
+    document.getElementById("TournamentLogoInput").value = tournamentInfo.logoUrl || "";
+    document.getElementById("TournamentBackdropInput").value = tournamentInfo.backdropUrl || "";
+  }
+
+  const shouldMappoolChecked = localStorage.getItem("mapPoolChecked");
+  if (shouldMappoolChecked) {
+    const mapPoolElement = document.getElementById("ShowMappoolInfo");
+    if (shouldMappoolChecked === "true") {
+      mapPoolElement.checked = shouldMappoolChecked;
+    }
     showHideMapPool();
   }
 

diff --git a/src/main.ts b/src/main.ts
@@ -7,7 +7,12 @@ import { dialog } from "electron";
 import { AuthTeam } from "./services/connectorService";
 import log from "electron-log/main";
 import { readFileSync } from "fs";
-import { FormattingService, ISeedingInfo, ISeriesInfo } from "./services/formattingService";
+import {
+  FormattingService,
+  ISeedingInfo,
+  ISeriesInfo,
+  ITournamentInfo,
+} from "./services/formattingService";
 import HotkeyService, { HotkeyType } from "./services/hotkeyService";
 
 const { app, BrowserWindow, ipcMain } = require("electron/main");
@@ -39,6 +44,7 @@ const createWindow = () => {
 
   ipcMain.on("process-inputs", processInputs);
   ipcMain.on("config-drop", processConfigDrop);
+  ipcMain.on("process-log", processLog);
 
   win.menuBarVisible = false;
   win.loadFile("./src/frontend/index.html");
@@ -98,6 +104,7 @@ function processInputs(
   key: string,
   seriesInfo: ISeriesInfo,
   seedingInfo: ISeedingInfo,
+  tournamentInfo: ITournamentInfo,
   hotkeys: any,
 ) {
   const webContents = event.sender;
@@ -151,8 +158,7 @@ function processInputs(
   const regex = /^(Ctrl\+|Alt\+|Shift\+)*(\D|F[1-9][0-2]?|\d)$/g;
   if (hotkeys.spikePlanted.match(regex)) {
     HotkeyService.getInstance().setKeyForHotkey(HotkeyType.SPIKE_PLANTED, hotkeys.spikePlanted);
-  }
-  else {
+  } else {
     messageBox(
       "Spectra Client - Error",
       "The hotkey for 'Spike planted' is invalid!",
@@ -174,6 +180,7 @@ function processInputs(
     key,
     seriesInfo,
     seedingInfo,
+    tournamentInfo,
     win,
   );
 }
@@ -214,6 +221,10 @@ function processConfigDrop(event: any, filePath: string) {
   }
 }
 
+function processLog(event: any, message: string) {
+  log.info(message);
+}
+
 function validateSpectraConfig(data: any) {
   if (!data.groupCode) return false;
   if (!data.ingestIp) return false;

diff --git a/src/preload.js b/src/preload.js
@@ -2,7 +2,18 @@
 const { contextBridge, ipcRenderer } = require("electron/renderer");
 
 contextBridge.exposeInMainWorld("electronAPI", {
-  processInputs: (ingestIp, groupId, obsName, leftTeam, rightTeam, key, seriesInfo, seedingInfo, hotkeys) =>
+  processInputs: (
+    ingestIp,
+    groupId,
+    obsName,
+    leftTeam,
+    rightTeam,
+    key,
+    seriesInfo,
+    seedingInfo,
+    tournamentInfo,
+    hotkeys,
+  ) =>
     ipcRenderer.send(
       "process-inputs",
       ingestIp,
@@ -13,9 +24,11 @@ contextBridge.exposeInMainWorld("electronAPI", {
       key,
       seriesInfo,
       seedingInfo,
+      tournamentInfo,
       hotkeys,
     ),
   processConfigDrop: (filePath) => ipcRenderer.send("config-drop", filePath),
+  processLog: (toLog) => ipcRenderer.send("process-log", toLog),
 
   setPlayerName: (callback) =>
     ipcRenderer.on("set-player-name", (_event, value) => callback(value)),

diff --git a/src/services/connectorService.ts b/src/services/connectorService.ts
@@ -8,6 +8,7 @@ import {
   IFormattedData,
   ISeedingInfo,
   ISeriesInfo,
+  ITournamentInfo,
 } from "./formattingService";
 import HotkeyService from "./hotkeyService";
 
@@ -58,6 +59,7 @@ export class ConnectorService {
     key: string,
     seriesInfo: ISeriesInfo,
     seedingInfo: ISeedingInfo,
+    tournamentInfo: ITournamentInfo,
     win: Electron.Main.BrowserWindow,
   ) {
     if (RegExp("(http|https)://[^/]+:[0-9]+").test(ingestIp)) {
@@ -159,6 +161,7 @@ export class ConnectorService {
       toolsData: {
         seriesInfo: seriesInfo,
         seedingInfo: seedingInfo,
+        tournamentInfo: tournamentInfo,
       },
     };
 

diff --git a/src/services/formattingService.ts b/src/services/formattingService.ts
@@ -197,6 +197,7 @@ export interface IMapWinInfo {
 export interface IToolsData {
   seriesInfo: ISeriesInfo;
   seedingInfo: ISeedingInfo;
+  tournamentInfo: ITournamentInfo;
 }
 
 export type ISeriesInfo = {
@@ -211,6 +212,12 @@ export type ISeedingInfo = {
   right: string;
 };
 
+export type ITournamentInfo = {
+  name: string;
+  logoUrl: string;
+  backdropUrl: string;
+};
+
 type BaseMapPoolInfo = {
   type: "past" | "present" | "future" | "error";
 };