diff --git a/src/10th/Roster.jsx b/src/10th/Roster.jsx index 18662d6..a007fad 100644 --- a/src/10th/Roster.jsx +++ b/src/10th/Roster.jsx @@ -1,6 +1,8 @@ import { useRef, useState, useEffect, Fragment } from "react"; import factionBackground from "../assets/factionBackground.png"; -import adeptusAstartesIcon from "../assets/adeptusAstartesIcon.png"; +import keywordsBackground from "../assets/keywordsBackground.png"; +import cardBackground from "../assets/cardBackground.png"; +import dgBackground from "../assets/dgBackground.png"; import { Arrow, wavyLine } from "../assets/icons"; import { Weapons, hasDifferentProfiles } from "./Weapons"; import { useIndexedDB } from "../helpers/useIndexedDB"; // New hook for IndexedDB @@ -202,7 +204,6 @@ const Unit = ({ style={{ fontWeight: 500, marginBottom: 32, - "--primary-color": overridePrimary, "--primary-color-transparent": overridePrimary ? overridePrimary + "60" @@ -248,6 +249,11 @@ const Unit = ({ paddingBottom: 4, background: "linear-gradient(90deg, rgba(20,21,25,1) 0%, rgba(48,57,62,1) 45%, rgba(73,74,79,1) 100%)", + backgroundImage: + catalog === "Chaos - Death Guard" + ? `url(${dgBackground})` + : `url(${factionBackground})`, + backgroundSize: "cover", color: "#fff", position: "relative", }} @@ -467,6 +473,8 @@ const Unit = ({ style={{ display: "flex", backgroundColor: "#DFE0E2", + background: `url(${cardBackground})`, + backgroundSize: "cover", }} >
{ }} >
+ > + {factionIcons[catalog] || + (catalog.includes("Imperium") ? factionIcons["Imperium"] || "" : "")} +
); }; +const factionIcons = { + Imperium: ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ), + "Imperium - Adeptus Mechanicus": ( + + + + + + + + ), + "Chaos - Death Guard": ( + + + + + + + + + ), + "Xenos - Tyranids": ( + + + + ), + "Xenos - Orks": ( + + + + + + + + ), +}; + const Keywords = ({ keywords }) => { const joinedKeywords = [...keywords].join(", "); return ( @@ -787,7 +892,8 @@ const Keywords = ({ keywords }) => { backgroundColor: "#BCBCBE", border: "2px solid var(--primary-color)", width: "calc(100% - 0.9rem)", - backgroundSize: "contain", + background: `url(${keywordsBackground})`, + backgroundSize: "cover", minHeight: 54, gap: 3, }} @@ -942,6 +1048,8 @@ const boldKeywords = [ "heretic astartes", "adeptus astartes", "adeptus mechanicus", + "adeptus custodes", + "adeptus sororitas", "tyranids", "orks", ]; @@ -949,12 +1057,14 @@ const boldKeywords = [ const weaponKeywords = [ "lethal hits", "blast", - /* "assault", */ + "assault", + "lance", "heavy", "torrent", "indirect fire", "sustained hits 1", "sustained hits 2", + "devastating wounds", ]; const Abilities = ({ abilities }) => { @@ -980,10 +1090,12 @@ const Abilities = ({ abilities }) => { new RegExp(`\\[${keyword}\\]`, "gi"), `[${keyword.toUpperCase()}]`, ); - newValue = newValue.replace( - new RegExp(`\\b${keyword}\\b`, "gi"), - `${keyword.toUpperCase()}`, - ); + if (keyword !== "assault") { + newValue = newValue.replace( + new RegExp(`\\b${keyword}\\b`, "gi"), + `${keyword.toUpperCase()}`, + ); + } } replacedAbilities.set(key, newValue); @@ -1177,6 +1289,8 @@ const ForceRules = ({ rules, onePerPage }) => { backgroundColor: "#dfe0e2", border: "2px solid var(--primary-color)", marginBottom: 32, + background: `url(${cardBackground})`, + backgroundSize: "cover", }} > {[...rules.keys()].map((rule) => ( diff --git a/src/10th/Weapons.jsx b/src/10th/Weapons.jsx index 3c00986..59e1601 100644 --- a/src/10th/Weapons.jsx +++ b/src/10th/Weapons.jsx @@ -107,7 +107,7 @@ const Weapon = ({ weapon, previousWeapon, nextWeapon, isMelee, className }) => { return ( <> - + {differentProfiles && (
{Arrow}
)} @@ -149,8 +149,8 @@ const Weapon = ({ weapon, previousWeapon, nextWeapon, isMelee, className }) => { ? ws.join("|") : ws : bs.join - ? bs.join("|") - : bs} + ? bs.join("|") + : bs} {str} {ap} diff --git a/src/App.jsx b/src/App.jsx index 7917b10..d4c1925 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -10,6 +10,28 @@ import { Roster as Roster10th } from "./10th/Roster"; import { useLocalStorage } from "./helpers/useLocalStorage"; import { parseJSON, stringifyJSON } from "./helpers/json"; +const throttle = (func, limit) => { + let lastFunc; + let lastRan; + return function (...args) { + if (!lastRan) { + func(...args); + lastRan = Date.now(); + } else { + clearTimeout(lastFunc); + lastFunc = setTimeout( + () => { + if (Date.now() - lastRan >= limit) { + func(...args); + lastRan = Date.now(); + } + }, + limit - (Date.now() - lastRan), + ); + } + }; +}; + function App() { const [rosters, setRosters] = useLocalStorage("rosters", "[]"); const rostersJSON = parseJSON(rosters ?? "[]"); @@ -22,6 +44,10 @@ function App() { const [hideModelSelections, setHideModelSelections] = useState(false); const uploadRef = useRef(); + const throttledSetPrimaryColor = useRef( + throttle((color) => setPrimaryColor(color), 50), + ).current; + const toggleHideModelSelections = (hide) => { const checkboxes = document.querySelectorAll( 'input[type="checkbox"].hide-model-selection', @@ -167,6 +193,7 @@ function App() { }, []); useEffect(() => { if (roster) { + js_colorPicker.value = getPrimaryColor(roster.forces[0].catalog); setPrimaryColor(getPrimaryColor(roster.forces[0].catalog)); setColorUserChoice(false); } @@ -369,34 +396,36 @@ function App() {
- {roster && - primaryColor !== getPrimaryColor(roster.forces[0].catalog) && ( - - )} + {roster && colorUserChoice && ( + + )}
diff --git a/src/assets/cardBackground.png b/src/assets/cardBackground.png new file mode 100644 index 0000000..6fa894d Binary files /dev/null and b/src/assets/cardBackground.png differ diff --git a/src/assets/dgBackground.png b/src/assets/dgBackground.png new file mode 100644 index 0000000..fc61584 Binary files /dev/null and b/src/assets/dgBackground.png differ diff --git a/src/assets/factionBackground.png b/src/assets/factionBackground.png index 31bbd84..47939b2 100644 Binary files a/src/assets/factionBackground.png and b/src/assets/factionBackground.png differ diff --git a/src/assets/keywordsBackground.png b/src/assets/keywordsBackground.png index 75c10cd..8884a08 100644 Binary files a/src/assets/keywordsBackground.png and b/src/assets/keywordsBackground.png differ diff --git a/src/index.css b/src/index.css index 435a637..4d1d784 100644 --- a/src/index.css +++ b/src/index.css @@ -4,8 +4,9 @@ @layer base { :root { - font-family: "Noto Sans", sans-serif, Inter, system-ui, Avenir, Helvetica, - Arial, sans-serif; + font-family: + "Noto Sans", sans-serif, Inter, system-ui, Avenir, Helvetica, Arial, + sans-serif; line-height: 1.5; font-weight: 400; font-size: 13px; @@ -179,7 +180,7 @@ } .rowOtherColor { - background-color: #d0d1d3; + background-color: #c4c4c480; } .avoid-page-break {