patreon names + colors fix again

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Database Editor F1 Manager",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "A tool that will let you edit your save file from F1 Manager games",
   "main": "main.js",
   "scripts": {

src/data/members.json

@@ -0,0 +1,14 @@
+[
+    { "name": "Justin Logan", "tier": "backer" },
+    { "name": "YT_T1zer350", "tier": "backer" },
+    { "name": "Richard Hicks", "tier": "founder" },
+    { "name": "Noel Hernandez", "tier": "founder" },
+    { "name": "Perefrin", "tier": "founder" },
+    { "name": "Richard Hicks", "tier": "founder" },
+    { "name": "Marcus Daemon", "tier": "founder" },
+    { "name": "nicolas theret", "tier": "backer" },
+    { "name": "Aaron655", "tier": "founder" },
+    { "name": "Parker Petrov", "tier": "backer" },
+    { "name": "steveybaby997", "tier": "supporter" },
+    { "name": "Kody Tipping", "tier": "founder"}
+  ]

src/index.html

@@ -1382,6 +1382,12 @@ <h3 class="modal-title bold-font">Comparison data selection</h3>
           <a class="bi bi-reddit" href="https://www.reddit.com/user/ignaciourreta" target="_blank">&nbsp;ignaciourreta</a>
           <a class="bi-custom-patreon" href="https://www.patreon.com/f1dbeditor" target="_blank">&nbsp;Support the project</a>
         </div>
+        <div class="patreon-members">
+          <div class="marquee">
+            <div class="marquee__inner">
+            </div>
+        </div>
+        </div>
       </div>
       <div class="script-view hide" id="predict_results">
         <div class="w-100 d-flex">

src/js/backend/scriptUtils/dbUtils.js

@@ -837,20 +837,16 @@ export function fetchEventsFrom(year) {
 
 
 export function formatSeasonResults(results, driverName, teamID, driver, year, sprints) {
-  // Asumiendo que driver y year son arrays (p.ej. driver=[123], year=[2023]):
   const driverID = driver;
   const season = year;
 
-  // -------- 1) Formatear nombre --------
   let nombre = "";
   let apellido = "";
 
-  // driverName podría ser un array [firstName, lastName] o un objeto {FirstName, LastName}.
-  // Aquí asumimos array. Si tu queryDB retorna objetos, ajusta a driverName.FirstName, driverName.LastName.
+
   const firstName = driverName ? driverName[0] : "";
   const lastName = driverName ? driverName[1] : "";
 
-  // Lógica análoga a Python para "STRING_LITERAL"
   if (!firstName.includes("STRING_LITERAL")) {
     const nombrePattern = /StaffName_Forename_(Male|Female)_(\w+)/;
     const match = firstName.match(nombrePattern);
@@ -881,31 +877,20 @@ export function formatSeasonResults(results, driverName, teamID, driver, year, s
 
   const nameFormatted = `${nombre} ${apellido}`.trim();
 
-  // -------- 2) Obtener todas las carreras que corrió este piloto en la temporada --------
   const racesParticipated = queryDB(`
       SELECT RaceID
       FROM Races_Results
       WHERE DriverID = ${driverID}
         AND Season = ${season}
     `, 'allRows') || [];
 
-  // results = array con [DriverID, TeamID, FinishingPos, Points]
-  // Queremos convertirlo en algo más detallado. 
-  // De Python: formatred_results = [(FinishingPos, Points) for result in results]
-  // Pero necesitamos mapear 1:1 con la lista de RaceIDs, así que iremos uno a uno.
+
   let formatredResults = results.map(r => [r[2], r[3]]);
-  // r[2] => FinishingPos, r[3] => Points.
 
-  // Suponiendo que hay la misma cantidad y el mismo orden de carreras 
-  // entre "results" y "racesParticipated". 
-  // Si no, necesitarías hacer matching por RaceID. 
-  // En tu Python original, tomabas RaceIDs en order y reasignabas. 
-  // Asegurémonos de usar el RaceID de 'racesParticipated[i]' igual que Python.
 
   for (let i = 0; i < racesParticipated.length; i++) {
-    const raceID = racesParticipated[i][0]; // Cada fila es [RaceID]
+    const raceID = racesParticipated[i][0]; 
 
-    // 2.1) Buscamos quién hizo la fastest lap
     const driverWithFastestLap = queryDB(`
         SELECT DriverID
         FROM Races_Results
@@ -937,12 +922,10 @@ export function formatSeasonResults(results, driverName, teamID, driver, year, s
       formatredResults[i] = arr;
     }
 
-    // Marcar fastest lap
-    if (driverWithFastestLap === driverID) {
-      // le append "1"
+    if (parseInt(driverWithFastestLap) === parseInt(driverID)) {
+      console.log("METO FASTEST LAP");
       formatredResults[i].push(1);
     } else {
-      // le append "0"
       formatredResults[i].push(0);
     }
 

src/js/frontend/renderer.js

@@ -25,6 +25,7 @@ import { resetH2H, hideComp, colors_dict, load_drivers_h2h, sprintsListeners, ra
 import { dbWorker } from './dragFile';
 import { Command } from "../backend/command.js";
 import { PUBLIC_KEY } from './public_key.js';
+import members from "../../data/members.json"
 
 import bootstrap from "bootstrap/dist/js/bootstrap.bundle.min.js";
 import { injectSpeedInsights } from '@vercel/speed-insights';
@@ -1283,11 +1284,14 @@ document.querySelector("#configDetailsButton").addEventListener("click", functio
         disabled: disabledList,
         triggerList: triggerList
     }
+    changeTheme()
     if (custom_team) {
         data["primaryColor"] = document.getElementById("primarySelector").value
         data["secondaryColor"] = document.getElementById("secondarySelector").value
         replace_custom_team_color(data["primaryColor"], data["secondaryColor"])
     }
+    reload_performance_graph()
+    reload_h2h_graphs()
 
     if (isSaveSelected === 1) {
         const command = new Command("configUpdate", data);
@@ -1301,7 +1305,7 @@ document.querySelector("#configDetailsButton").addEventListener("click", functio
 
         replace_custom_team_logo(document.querySelector(".logo-preview").src)
     }
-    changeTheme()
+
 
 })
 
@@ -1797,8 +1801,36 @@ document.addEventListener('DOMContentLoaded', () => {
     document.querySelector(".socials-box").classList.add("appear")
     getPatchNotes()
     checkPatreonStatus();
+    populateMarquee();
 });
 
+function createMarqueeItem(name, tier) {
+    const span = document.createElement("span");
+    span.textContent = name;
+    span.classList.add(tier);
+    return span;
+}
+
+function populateMarquee() {
+    const marqueeInner = document.querySelector(".marquee__inner");
+
+    // Crear dos grupos de nombres para el scroll infinito
+    const group1 = document.createElement("div");
+    group1.classList.add("marquee__group");
+
+    const group2 = document.createElement("div");
+    group2.classList.add("marquee__group", "second-group");
+
+    members.forEach(member => {
+        const item = createMarqueeItem(member.name, member.tier);
+        group1.appendChild(item.cloneNode(true));
+        group2.appendChild(item.cloneNode(true));
+    });
+
+    marqueeInner.appendChild(group1);
+    marqueeInner.appendChild(group2);
+}
+
 document.querySelectorAll(".one-theme").forEach(function (elem) {
     elem.addEventListener("click", function () {
         selectedTheme = elem.dataset.theme
@@ -1811,8 +1843,7 @@ function changeTheme() {
     document.querySelector("body").className = `font ${selectedTheme}`
     localStorage.setItem("theme", selectedTheme)
     init_colors_dict(selectedTheme)
-    reload_performance_graph()
-    reload_h2h_graphs()
+
 }
 
 function loadTheme() {

src/styles.css

@@ -9448,72 +9448,6 @@ span.reduced-weight,
   color: var(--new-primary);
 }
 
-/* 
-.rectangle {
-  position: absolute;
-  width: 150px;
-  height: 50px;
-  background: var(--new-primary); 
-}
-
-
-.rect1 {
-  bottom: 2%;              
-  left: 23.1%;                
-  transform: skewX(44deg);
-  animation: moveLeftRects 1.5s 0.5s linear forwards;
-  rotate: 314deg;
-}
-
-.rect2 {
-  bottom: -3%;
-  left: 16%;
-  transform: skewX(44deg);
-  rotate: 314deg;
-  animation: moveLeftRects 1.5s 0.55s linear forwards;
-}
-
-
-.rect3 {
-  top: 2%;
-  right: 23.1%;
-  transform: skewX(44deg); 
-  rotate: 314deg;
-  animation: moveRightRects 1.5s 0.5s linear forwards;
-}
-
-.rect4 {
-  top: -3%;
-  right: 16%;
-  transform: skewX(44deg);
-  rotate: 314deg;
-  animation: moveRightRects 1.5s 0.55s linear forwards;
-}
-
-@keyframes moveLeftRects {
-  0% {
-    transform: translateX(0) skewX(44deg);
-  }
-  40% {
-    transform: translateX(50%) skewX(44deg);
-  }
-  100% {
-    transform: translateX(52%) skewX(44deg);
-  }
-}
-
-@keyframes moveRightRects {
-  0% {
-    transform: translateX(0) skewX(44deg);
-  }
-  40% {
-    transform: translateX(-50%) skewX(44deg);
-  }
-  100% {
-    transform: translateX(-52%) skewX(44deg);
-  }
-} */
-
 #blockDiv {
   overflow: hidden;
   height: 100%;
@@ -9564,6 +9498,7 @@ body.light-theme #blockDiv{
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
   opacity: 0;
   transform: translateY(50px);
+  z-index: 2;
 }
 
 .splash-box.appear {
@@ -10004,6 +9939,7 @@ body:has(.active #mod25logo) .mod-drivers .ka-gradient {
 
 .ka-rectangle img {
   left: -2px;
+  bottom: -1px;
 }
 
 .lh-rectangle img {
@@ -10544,3 +10480,63 @@ a.bi-custom-patreon.close-slide-up{
 
 }
 
+
+.patreon-members {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  width: 100%;
+  height: 50px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+
+.marquee {
+  white-space: nowrap;
+  overflow: hidden;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.marquee__inner {
+  display: flex;
+  animation: scroll 30s linear infinite;
+  gap: 1em;
+}
+
+.marquee__group {
+  display: flex;
+  gap: 1em;
+}
+
+
+.marquee__group span {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+/* Estilos por tier */
+.backer{
+  color: color-mix(in srgb, var(--background) 40%, var(--dark-text))
+}
+
+.supporter {
+  color: color-mix(in srgb, var(--background) 40%, var(--disabled-text))
+}
+
+.founder {
+  color: color-mix(in srgb, var(--background) 40%, var(--table-first))
+}
+
+body.light-theme .founder {
+  color: color-mix(in srgb, var(--dark-text) 40%, var(--table-first))
+}
+
+/* Animación de desplazamiento */
+@keyframes scroll {
+  0% { transform: translateX(-50%); } /* Empieza con la segunda mitad visible */
+  100% { transform: translateX(9px); } /* Vuelve a la posición inicial */
+}