chore: fixed images relative imports for static build

This commit is contained in:
Davide Passoni
2024-12-10 17:42:57 +01:00
parent 8d7aa5df65
commit 95505ec9fa
17 changed files with 60 additions and 62 deletions

View File

@@ -3,12 +3,12 @@
"short_name": "DCS Olympus", "short_name": "DCS Olympus",
"icons": [ "icons": [
{ {
"src": "./images/favicons/android-chrome-192x192.png", "src": "/images/favicons/android-chrome-192x192.png",
"sizes": "192x192", "sizes": "192x192",
"type": "image/png" "type": "image/png"
}, },
{ {
"src": "./images/favicons/android-chrome-512x512.png", "src": "/images/favicons/android-chrome-512x512.png",
"sizes": "512x512", "sizes": "512x512",
"type": "image/png" "type": "image/png"
} }

View File

@@ -31,7 +31,7 @@ export class ExplosionMarker extends CustomMarker {
var el = document.createElement("div"); var el = document.createElement("div");
el.classList.add("ol-explosion-icon"); el.classList.add("ol-explosion-icon");
var img = document.createElement("img"); var img = document.createElement("img");
img.src = "./images/markers/explosion.svg"; img.src = "/images/markers/explosion.svg";
img.onload = () => SVGInjector(img); img.onload = () => SVGInjector(img);
el.appendChild(img); el.appendChild(img);
this.getElement()?.appendChild(el); this.getElement()?.appendChild(el);

View File

@@ -28,7 +28,7 @@ export class SmokeMarker extends CustomMarker {
el.classList.add("ol-smoke-icon"); el.classList.add("ol-smoke-icon");
el.setAttribute("data-color", this.#color); el.setAttribute("data-color", this.#color);
var img = document.createElement("img"); var img = document.createElement("img");
img.src = "./images/markers/smoke.svg"; img.src = "/images/markers/smoke.svg";
img.onload = () => SVGInjector(img); img.onload = () => SVGInjector(img);
el.appendChild(img); el.appendChild(img);
this.getElement()?.appendChild(el); this.getElement()?.appendChild(el);

View File

@@ -1,6 +1,6 @@
.airbase-icon { .airbase-icon {
align-items: center; align-items: center;
cursor: url("./images/cursors/pointer.svg"), auto; cursor: url("/images/cursors/pointer.svg"), auto;
display: flex; display: flex;
justify-content: center; justify-content: center;
position: relative; position: relative;

View File

@@ -1,6 +1,6 @@
.bullseye-icon { .bullseye-icon {
align-items: center; align-items: center;
cursor: url("./images/cursors/pointer.svg"), auto; cursor: url("/images/cursors/pointer.svg"), auto;
display: flex; display: flex;
justify-content: center; justify-content: center;
position: relative; position: relative;

View File

@@ -1,6 +1,6 @@
/*** Unit marker elements ***/ /*** Unit marker elements ***/
[data-object|="unit"] { [data-object|="unit"] {
cursor: url("./images/cursors/pointer.svg"), auto; cursor: url("/images/cursors/pointer.svg"), auto;
display: flex; display: flex;
height: 100%; height: 100%;
justify-content: center; justify-content: center;
@@ -9,29 +9,29 @@
} }
[data-object|="unit"].attack-cursor { [data-object|="unit"].attack-cursor {
cursor: url("./images/cursors/attack.svg"), auto !important; cursor: url("/images/cursors/attack.svg"), auto !important;
} }
[data-object|="unit"].follow-cursor { [data-object|="unit"].follow-cursor {
cursor: url("./images/cursors/follow.svg"), auto !important; cursor: url("/images/cursors/follow.svg"), auto !important;
} }
[data-object|="unit"].fire-at-area-cursor, [data-object|="unit"].fire-at-area-cursor,
[data-object|="unit"].bomb-cursor, [data-object|="unit"].bomb-cursor,
[data-object|="unit"].carpet-bomb-cursor { [data-object|="unit"].carpet-bomb-cursor {
cursor: url("./images/cursors/fire-at-area.svg"), auto !important; cursor: url("/images/cursors/fire-at-area.svg"), auto !important;
} }
[data-object|="unit"].land-cursor { [data-object|="unit"].land-cursor {
cursor: url("./images/cursors/land.svg"), auto !important; cursor: url("/images/cursors/land.svg"), auto !important;
} }
[data-object|="unit"].land-at-point-cursor { [data-object|="unit"].land-at-point-cursor {
cursor: url("./images/cursors/land-at-point.svg"), auto !important; cursor: url("/images/cursors/land-at-point.svg"), auto !important;
} }
[data-object|="unit"].simulate-fire-fight-cursor { [data-object|="unit"].simulate-fire-fight-cursor {
cursor: url("./images/cursors/simulate-fire-fight.svg"), auto !important; cursor: url("/images/cursors/simulate-fire-fight.svg"), auto !important;
} }
[data-awacs-mode] .unit-short-label { [data-awacs-mode] .unit-short-label {
@@ -439,15 +439,15 @@
} }
[data-object|="unit"][data-state="rtb"] .unit-state { [data-object|="unit"][data-state="rtb"] .unit-state {
background-image: url("./images/states/rtb.svg"); background-image: url("/images/states/rtb.svg");
} }
[data-object|="unit"][data-state="land"] .unit-state { [data-object|="unit"][data-state="land"] .unit-state {
background-image: url("./images/states/rtb.svg"); background-image: url("/images/states/rtb.svg");
} }
[data-object|="unit"][data-state="idle"] .unit-state { [data-object|="unit"][data-state="idle"] .unit-state {
background-image: url("./images/states/idle.svg"); background-image: url("/images/states/idle.svg");
} }
[data-object*="groundunit"][data-state="idle"] .unit-state, [data-object*="groundunit"][data-state="idle"] .unit-state,
@@ -459,59 +459,59 @@
[data-object|="unit"][data-state="bomb-point"] .unit-state, [data-object|="unit"][data-state="bomb-point"] .unit-state,
[data-object|="unit"][data-state="carpet-bombing"] .unit-state, [data-object|="unit"][data-state="carpet-bombing"] .unit-state,
[data-object|="unit"][data-state="fire-at-area"] .unit-state { [data-object|="unit"][data-state="fire-at-area"] .unit-state {
background-image: url("./images/states/attack.svg"); background-image: url("/images/states/attack.svg");
} }
[data-object|="unit"][data-state="follow"] .unit-state { [data-object|="unit"][data-state="follow"] .unit-state {
background-image: url("./images/states/follow.svg"); background-image: url("/images/states/follow.svg");
} }
[data-object|="unit"][data-state="refuel"] .unit-state { [data-object|="unit"][data-state="refuel"] .unit-state {
background-image: url("./images/states/refuel.svg"); background-image: url("/images/states/refuel.svg");
} }
[data-object|="unit"][data-state="human"] .unit-state { [data-object|="unit"][data-state="human"] .unit-state {
background-image: url("./images/states/human.svg"); background-image: url("/images/states/human.svg");
} }
[data-object|="unit"][data-state="dcs"] .unit-state { [data-object|="unit"][data-state="dcs"] .unit-state {
background-image: url("./images/states/dcs.svg"); background-image: url("/images/states/dcs.svg");
} }
[data-object|="unit"][data-state="land-at-point"] .unit-state { [data-object|="unit"][data-state="land-at-point"] .unit-state {
background-image: url("./images/states/land-at-point.svg"); background-image: url("/images/states/land-at-point.svg");
} }
[data-object|="unit"][data-state="no-task"] .unit-state { [data-object|="unit"][data-state="no-task"] .unit-state {
background-image: url("./images/states/no-task.svg"); background-image: url("/images/states/no-task.svg");
} }
[data-object|="unit"][data-state="off"] .unit-state { [data-object|="unit"][data-state="off"] .unit-state {
background-image: url("./images/states/off.svg"); background-image: url("/images/states/off.svg");
} }
[data-object|="unit"][data-state="tanker"] .unit-state { [data-object|="unit"][data-state="tanker"] .unit-state {
background-image: url("./images/states/tanker.svg"); background-image: url("/images/states/tanker.svg");
} }
[data-object|="unit"][data-state="AWACS"] .unit-state { [data-object|="unit"][data-state="AWACS"] .unit-state {
background-image: url("./images/states/awacs.svg"); background-image: url("/images/states/awacs.svg");
} }
[data-object|="unit"][data-state="miss-on-purpose"] .unit-state { [data-object|="unit"][data-state="miss-on-purpose"] .unit-state {
background-image: url("./images/states/miss-on-purpose.svg"); background-image: url("/images/states/miss-on-purpose.svg");
} }
[data-object|="unit"][data-state="scenic-aaa"] .unit-state { [data-object|="unit"][data-state="scenic-aaa"] .unit-state {
background-image: url("./images/states/scenic-aaa.svg"); background-image: url("/images/states/scenic-aaa.svg");
} }
[data-object|="unit"][data-state="simulate-fire-fight"] .unit-state { [data-object|="unit"][data-state="simulate-fire-fight"] .unit-state {
background-image: url("./images/states/simulate-fire-fight.svg"); background-image: url("/images/states/simulate-fire-fight.svg");
} }
[data-object|="unit"] .unit-health::before { [data-object|="unit"] .unit-health::before {
background-image: url("./images/icons/health.svg"); background-image: url("/images/icons/health.svg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
content: " "; content: " ";

View File

@@ -56,7 +56,7 @@ export class TemporaryUnitMarker extends CustomMarker {
var unitIcon = document.createElement("div"); var unitIcon = document.createElement("div");
unitIcon.classList.add("unit-icon"); unitIcon.classList.add("unit-icon");
var img = document.createElement("img"); var img = document.createElement("img");
img.src = `./images/units/map/${getApp().getMap().getOptions().AWACSMode ? "awacs" : "normal"}/${this.#coalition}/${blueprint.markerFile ?? blueprint.category}.svg`; img.src = `/images/units/map/${getApp().getMap().getOptions().AWACSMode ? "awacs" : "normal"}/${this.#coalition}/${blueprint.markerFile ?? blueprint.category}.svg`;
img.onload = () => SVGInjector(img); img.onload = () => SVGInjector(img);
unitIcon.appendChild(img); unitIcon.appendChild(img);
unitIcon.toggleAttribute("data-rotate-to-heading", false); unitIcon.toggleAttribute("data-rotate-to-heading", false);

View File

@@ -132,7 +132,7 @@
} }
.ol-target-icon { .ol-target-icon {
background-image: url("./images/markers/target.svg"); background-image: url("/images/markers/target.svg");
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
@@ -184,53 +184,53 @@ path.leaflet-interactive:focus {
} }
.attack-cursor { .attack-cursor {
cursor: url("./images/cursors/attack.svg"), auto !important; cursor: url("/images/cursors/attack.svg"), auto !important;
} }
.follow-cursor { .follow-cursor {
cursor: url("./images/cursors/follow.svg"), auto !important; cursor: url("/images/cursors/follow.svg"), auto !important;
} }
.fire-at-area-cursor, .bomb-cursor, .carpet-bomb-cursor { .fire-at-area-cursor, .bomb-cursor, .carpet-bomb-cursor {
cursor: url("./images/cursors/fire-at-area.svg"), auto !important; cursor: url("/images/cursors/fire-at-area.svg"), auto !important;
} }
.land-cursor { .land-cursor {
cursor: url("./images/cursors/land.svg"), auto !important; cursor: url("/images/cursors/land.svg"), auto !important;
} }
.land-at-point-cursor { .land-at-point-cursor {
cursor: url("./images/cursors/land-at-point.svg"), auto !important; cursor: url("/images/cursors/land-at-point.svg"), auto !important;
} }
.simulate-fire-fight-cursor { .simulate-fire-fight-cursor {
cursor: url("./images/cursors/simulate-fire-fight.svg"), auto !important; cursor: url("/images/cursors/simulate-fire-fight.svg"), auto !important;
} }
#map-container.leaflet-grab { #map-container.leaflet-grab {
cursor: url("./images/cursors/grab.svg") 16 16, auto; cursor: url("/images/cursors/grab.svg") 16 16, auto;
} }
.explosion-cursor { .explosion-cursor {
cursor: url("./images/cursors/explosion.svg"), auto !important; cursor: url("/images/cursors/explosion.svg"), auto !important;
} }
.smoke-white-cursor { .smoke-white-cursor {
cursor: url("./images/cursors/smoke-white.svg"), auto !important; cursor: url("/images/cursors/smoke-white.svg"), auto !important;
} }
.smoke-blue-cursor { .smoke-blue-cursor {
cursor: url("./images/cursors/smoke-blue.svg"), auto !important; cursor: url("/images/cursors/smoke-blue.svg"), auto !important;
} }
.smoke-red-cursor { .smoke-red-cursor {
cursor: url("./images/cursors/smoke-red.svg"), auto !important; cursor: url("/images/cursors/smoke-red.svg"), auto !important;
} }
.smoke-green-cursor { .smoke-green-cursor {
cursor: url("./images/cursors/smoke-green.svg"), auto !important; cursor: url("/images/cursors/smoke-green.svg"), auto !important;
} }
.smoke-orange-cursor { .smoke-orange-cursor {
cursor: url("./images/cursors/smoke-orange.svg"), auto !important; cursor: url("/images/cursors/smoke-orange.svg"), auto !important;
} }

View File

@@ -67,7 +67,7 @@ export class Airbase extends CustomMarker {
el.classList.add("airbase-icon"); el.classList.add("airbase-icon");
el.setAttribute("data-object", "airbase"); el.setAttribute("data-object", "airbase");
this.#img.src = "./images/markers/airbase.svg"; this.#img.src = "/images/markers/airbase.svg";
this.#img.onload = () => SVGInjector(this.#img); this.#img.onload = () => SVGInjector(this.#img);
el.appendChild(this.#img); el.appendChild(this.#img);
this.getElement()?.appendChild(el); this.getElement()?.appendChild(el);

View File

@@ -23,7 +23,7 @@ export class Bullseye extends CustomMarker {
el.classList.add("bullseye-icon"); el.classList.add("bullseye-icon");
el.setAttribute("data-object", "bullseye"); el.setAttribute("data-object", "bullseye");
var img = document.createElement("img"); var img = document.createElement("img");
img.src = "./images/markers/bullseye.svg"; img.src = "/images/markers/bullseye.svg";
img.onload = () => SVGInjector(img); img.onload = () => SVGInjector(img);
el.appendChild(img); el.appendChild(img);
this.getElement()?.appendChild(el); this.getElement()?.appendChild(el);

View File

@@ -15,7 +15,7 @@ export class Carrier extends Airbase {
el.classList.add("airbase-icon"); el.classList.add("airbase-icon");
el.setAttribute("data-object", "airbase"); el.setAttribute("data-object", "airbase");
this.getImg().src = "./images/carriers/nimitz.png"; this.getImg().src = "/images/carriers/nimitz.png";
this.getImg().style.width = `0px`; // Make the image immediately small to avoid giant carriers this.getImg().style.width = `0px`; // Make the image immediately small to avoid giant carriers
el.appendChild(this.getImg()); el.appendChild(this.getImg());
this.getElement()?.appendChild(el); this.getElement()?.appendChild(el);

View File

@@ -44,7 +44,7 @@ export function OlUnitListEntry(props: {
invert invert
`}> `}>
<img <img
src={`./images/units/${props.silhouette}`} src={`/images/units/${props.silhouette}`}
className="my-auto max-h-full max-w-full" className="my-auto max-h-full max-w-full"
/> />
</div> </div>

View File

@@ -20,7 +20,7 @@ export function OlUnitSummary(props: { blueprint: UnitBlueprint; coalition: Coal
className={` className={`
absolute right-5 top-0 h-full object-cover opacity-10 invert absolute right-5 top-0 h-full object-cover opacity-10 invert
`} `}
src={"vite./images/units/" + props.blueprint.filename} src={"vite/images/units/" + props.blueprint.filename}
alt="" alt=""
/> />
<div <div
@@ -33,9 +33,7 @@ export function OlUnitSummary(props: { blueprint: UnitBlueprint; coalition: Coal
</div> </div>
</div> </div>
<div <div
className={` className={`flex h-fit flex-col justify-between px-2 leading-normal`}
flex h-fit flex-col justify-between px-2 leading-normal
`}
> >
<p <p
className={` className={`

View File

@@ -94,7 +94,7 @@ export function LoginModal(props: { open: boolean }) {
max-md:border-none max-md:border-none
`} `}
> >
<img src="./images/splash/1.jpg" className={` <img src="/images/splash/1.jpg" className={`
contents-center w-full object-cover opacity-[7%] contents-center w-full object-cover opacity-[7%]
`}></img> `}></img>
<div <div
@@ -154,7 +154,7 @@ export function LoginModal(props: { open: boolean }) {
`} `}
> >
<span className="size-[80px] min-w-14"> <span className="size-[80px] min-w-14">
<img src="./images/olympus-500x500.png" className={` <img src="/images/olympus-500x500.png" className={`
flex w-full flex w-full
`}></img> `}></img>
</span> </span>
@@ -360,7 +360,7 @@ export function LoginModal(props: { open: boolean }) {
> >
<Card className="flex"> <Card className="flex">
<img <img
src="./images/splash/1.jpg" src="/images/splash/1.jpg"
className={` className={`
h-[40%] max-h-[120px] contents-center w-full rounded-md h-[40%] max-h-[120px] contents-center w-full rounded-md
object-cover object-cover
@@ -385,7 +385,7 @@ export function LoginModal(props: { open: boolean }) {
</Card> </Card>
<Card className="flex"> <Card className="flex">
<img <img
src="./images/splash/1.jpg" src="/images/splash/1.jpg"
className={` className={`
h-[40%] max-h-[120px] contents-center w-full rounded-md h-[40%] max-h-[120px] contents-center w-full rounded-md
object-cover object-cover

View File

@@ -349,7 +349,7 @@ export function FormationMenu(props: {
translate-y-[-50%] rotate-90 cursor-move opacity-80 translate-y-[-50%] rotate-90 cursor-move opacity-80
invert invert
`} `}
src={`./images/units/${unit?.getBlueprint()?.filename}`} src={`/images/units/${unit?.getBlueprint()?.filename}`}
></img> ></img>
</div> </div>
); );

View File

@@ -66,8 +66,8 @@ import {
const bearingStrings = ["north", "north-east", "east", "south-east", "south", "south-west", "west", "north-west", "north"]; const bearingStrings = ["north", "north-east", "east", "south-east", "south", "south-west", "west", "north-west", "north"];
var pathIcon = new Icon({ var pathIcon = new Icon({
iconUrl: "./images/markers/marker-icon.png", iconUrl: "/images/markers/marker-icon.png",
shadowUrl: "./images/markers/marker-shadow.png", shadowUrl: "/images/markers/marker-shadow.png",
iconAnchor: [13, 41], iconAnchor: [13, 41],
}); });
@@ -912,7 +912,7 @@ export abstract class Unit extends CustomMarker {
if (this.belongsToCommandedCoalition() || this.getDetectionMethods().some((value) => [VISUAL, OPTIC].includes(value))) if (this.belongsToCommandedCoalition() || this.getDetectionMethods().some((value) => [VISUAL, OPTIC].includes(value)))
marker = this.getBlueprint()?.markerFile ?? this.getDefaultMarker(); marker = this.getBlueprint()?.markerFile ?? this.getDefaultMarker();
else marker = "aircraft"; else marker = "aircraft";
img.src = `./images/units/map/${getApp().getMap().getOptions().AWACSMode ? "awacs" : "normal"}/${this.getCoalition()}/${marker}.svg`; img.src = `/images/units/map/${getApp().getMap().getOptions().AWACSMode ? "awacs" : "normal"}/${this.getCoalition()}/${marker}.svg`;
img.onload = () => SVGInjector(img); img.onload = () => SVGInjector(img);
unitIcon.appendChild(img); unitIcon.appendChild(img);

View File

@@ -178,7 +178,7 @@ export class Weapon extends CustomMarker {
var unitIcon = document.createElement("div"); var unitIcon = document.createElement("div");
unitIcon.classList.add("unit-icon"); unitIcon.classList.add("unit-icon");
var img = document.createElement("img"); var img = document.createElement("img");
img.src = `./images/units/map/${getApp().getMap().getOptions().AWACSMode ? "awacs" : "normal"}/${this.getCoalition()}/${this.getMarkerCategory()}.svg`; img.src = `/images/units/map/${getApp().getMap().getOptions().AWACSMode ? "awacs" : "normal"}/${this.getCoalition()}/${this.getMarkerCategory()}.svg`;
img.onload = () => SVGInjector(img); img.onload = () => SVGInjector(img);
unitIcon.appendChild(img); unitIcon.appendChild(img);
unitIcon.toggleAttribute("data-rotate-to-heading", this.getIconOptions().rotateToHeading); unitIcon.toggleAttribute("data-rotate-to-heading", this.getIconOptions().rotateToHeading);