maddo/Crusader_Decomp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implement overlay sprite rendering and update API endpoints for overlays

Browse source
This commit is contained in:
Marco 2026-03-27 13:12:45 +01:00
commit 06e67d8341
6 changed files with 145 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

75
map_renderer/src/public/app.css
View file

@ -288,72 +288,29 @@ select:disabled,
font: inherit;
background: none;
cursor: pointer;
transition: transform 140ms ease, filter 140ms ease;
}
.overlay-marker {
display: grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 999px;
color: white;
font-size: 0.68rem;
font-weight: 800;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
transform: translate(-50%, -100%);
transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
.overlay-item:hover,
.overlay-item:focus-visible {
transform: scale(1.05);
filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.34));
}
.overlay-marker:hover,
.overlay-marker:focus-visible {
transform: translate(-50%, -100%) scale(1.08);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34);
filter: saturate(1.12);
}
.overlay-marker--editor {
background: linear-gradient(180deg, color-mix(in srgb, var(--overlay-editor) 86%, white 14%) 0%, var(--overlay-editor) 100%);
}
.overlay-marker--egg {
background: linear-gradient(180deg, color-mix(in srgb, var(--overlay-egg) 82%, white 18%) 0%, var(--overlay-egg) 100%);
}
.overlay-marker--roof {
background: linear-gradient(180deg, color-mix(in srgb, var(--overlay-roof) 84%, white 16%) 0%, var(--overlay-roof) 100%);
}
.overlay-helper {
display: flex;
align-items: flex-start;
justify-content: flex-start;
min-width: 14px;
min-height: 14px;
padding: 4px;
border-radius: 8px;
border: 1px solid var(--overlay-helper-stroke);
.overlay-item--helper {
outline: 1px solid var(--overlay-helper-stroke);
outline-offset: 1px;
background: var(--overlay-helper-fill);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
transition: transform 140ms ease, background 140ms ease;
}
.overlay-helper:hover,
.overlay-helper:focus-visible {
transform: scale(1.02);
background: color-mix(in srgb, var(--overlay-helper-fill) 70%, white 30%);
}
.overlay-helper-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
padding: 2px 6px;
border-radius: 999px;
background: rgba(7, 12, 18, 0.68);
color: rgba(255, 255, 255, 0.86);
font-size: 0.68rem;
font-weight: 800;
.overlay-sprite {
display: block;
width: 100%;
height: 100%;
image-rendering: pixelated;
image-rendering: crisp-edges;
user-select: none;
pointer-events: none;
}
.overlay-tooltip {