diff --git a/public/fonts/ConduitITCStd Bold.woff2 b/public/fonts/ConduitITCStd Bold.woff2 new file mode 100644 index 0000000..9eae636 Binary files /dev/null and b/public/fonts/ConduitITCStd Bold.woff2 differ diff --git a/public/fonts/ConduitITCStd ExtraBold.woff2 b/public/fonts/ConduitITCStd ExtraBold.woff2 new file mode 100644 index 0000000..258a75a Binary files /dev/null and b/public/fonts/ConduitITCStd ExtraBold.woff2 differ diff --git a/public/fonts/ConduitITCStd-Regular.woff2 b/public/fonts/ConduitITCStd-Regular.woff2 new file mode 100644 index 0000000..9e8bad9 Binary files /dev/null and b/public/fonts/ConduitITCStd-Regular.woff2 differ diff --git a/src/Roster.jsx b/src/Roster.jsx index ca3e4c8..023cf70 100644 --- a/src/Roster.jsx +++ b/src/Roster.jsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useRef, useState, useEffect } from "react"; import factionBackground from "./assets/factionBackground.png"; import adeptusAstartesIcon from "./assets/adeptusAstartesIcon.png"; import rangedIcon from "./assets/rangedIcon.png"; @@ -63,6 +63,8 @@ const Force = ({ force, onePerPage }) => { const Unit = ({ unit, index, catalog, onePerPage, forceRules }) => { const [hide, setHide] = useState(false); + const uploadRef = useRef(); + const [image, setImage] = useState(null); let { name, weapons, @@ -118,6 +120,20 @@ const Unit = ({ unit, index, catalog, onePerPage, forceRules }) => { const overridePrimary = getOverridePrimary(factions, keywords); + useEffect(() => { + // Check if the browser is Safari, and if so, remove the accept attribute + // from the file input element. This is because Safari doesn't support + // extensions on the accept attribute for input type=file + // (https://caniuse.com/input-file-accept). If set, they will not allow any + // file to be selected. + if ( + navigator.userAgent.match(/AppleWebKit.*Safari/) && + !navigator.userAgent.includes("Chrome") + ) { + uploadRef.current?.removeAttribute("accept"); + } + }, []); + return (
{ background: "linear-gradient(90deg, rgba(20,21,25,1) 0%, rgba(48,57,62,1) 45%, rgba(73,74,79,1) 100%)", color: "#fff", + minHeight: 200, + position: "relative", }} >
{
{ display: "flex", justifyContent: "space-between", alignItems: "center", + marginBottom: 2, }} > {name} - + {cost.points}pts
@@ -241,9 +263,62 @@ const Unit = ({ unit, index, catalog, onePerPage, forceRules }) => { } /> ))} +
+
+ {image && ( + + )} + +
{ ); }; -const ModelStats = ({ - modelStats, - modelStat, - index, - showName, - showWeapons, - modelList, -}) => { +const ModelStats = ({ modelStat, index, showName, showWeapons, modelList }) => { let { move, toughness, save, wounds, leadership, name, bs, ws, attacks } = modelStat; if (!wounds) { diff --git a/src/Weapons.jsx b/src/Weapons.jsx index 8e748b3..a84d25c 100644 --- a/src/Weapons.jsx +++ b/src/Weapons.jsx @@ -112,6 +112,7 @@ const Weapon = ({ weapon, modelStats, isMelee, className, forceRules }) => { replaceAbilityWithType( [ "Each time an attack is made with this weapon, that attack automatically hits the target.", + "Each time an attack is made with this weapon profile, that attack automatically hits the target.", "This weapon automatically hits its target.", "This weapon automatically hits its targets.", "When resolving an attack made with this weapon, do not make a hit roll: it automatically scores a hit.", @@ -119,6 +120,13 @@ const Weapon = ({ weapon, modelStats, isMelee, className, forceRules }) => { "Torrent", "When resolving an attack made with this weapon, do not make a hit roll: it automatically scores a hit." ); + replaceAbilityWithType( + [ + "Each time an attack is made with this weapon, you can re-roll the wound roll.", + ], + "Twin-Linked", + "Each time an attack is made with this weapon, you can re-roll the wound roll." + ); replaceAbilityWithType( ["This weapon can target units that are not visible to the bearer."], "Indirect Fire", diff --git a/src/index.css b/src/index.css index 87f3530..12761c2 100644 --- a/src/index.css +++ b/src/index.css @@ -20,6 +20,22 @@ --size-32: 32px; } +@font-face { + font-family: "ConduitITCStd"; + src: url("fonts/ConduitITCStd ExtraBold.woff2") format("woff2"); + font-weight: 800; +} +@font-face { + font-family: "ConduitITCStd"; + src: url("fonts/ConduitITCStd Bold.woff2") format("woff2"); + font-weight: 700; +} +@font-face { + font-family: "ConduitITCStd"; + src: url("fonts/ConduitITCStd-Regular.woff2") format("woff2"); + font-weight: 400; +} + * { box-sizing: border-box; print-color-adjust: exact; @@ -46,7 +62,10 @@ h1 { line-height: 1.1; } -button { +button, +.button { + background-color: #f0f0f0; + color: #111113; border-radius: 8px; border: 2px solid #999; padding: 0.6em 1.2em; @@ -56,12 +75,15 @@ button { cursor: pointer; transition: border-color 0.25s; } -button:hover { +button:hover, +.button:hover { border-color: var(--primary-color); background-color: var(--primary-color-transparent); } button:focus, -button:focus-visible { +button:focus-visible, +.button:focus, +.button:focus-visible { outline: 4px auto -webkit-focus-ring-color; }