mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-07-05 14:02:02 +00:00
custom flag (1) (#1257)
## Description: This PR separates only the rendering logic. The settings and other related parts will be handled when updating the UI. The remaining work will be split into two separate PRs. Once this is done, I’ll move on to the next one. ## Please complete the following: - [x] I have added screenshots for all UI updates - [x] I process any text displayed to the user through translateText() and I've added it to the en.json file - [x] I have added relevant tests to the test directory - [x] I confirm I have thoroughly tested these changes and take full responsibility for any bugs introduced - [x] I understand that submitting code with bugs that could have been caught through manual testing blocks releases and new features for all contributors
This commit is contained in:
Aotumuri
@@ -10,6 +10,7 @@ import nukeWhiteIcon from "../../../../resources/images/NukeIconWhite.svg";
|
||||
import shieldIcon from "../../../../resources/images/ShieldIconBlack.svg";
|
||||
import targetIcon from "../../../../resources/images/TargetIcon.svg";
|
||||
import traitorIcon from "../../../../resources/images/TraitorIcon.svg";
|
||||
import { renderPlayerFlag } from "../../../core/CustomFlag";
|
||||
import { PseudoRandom } from "../../../core/PseudoRandom";
|
||||
import { Theme } from "../../../core/configuration/Config";
|
||||
import { AllPlayers, Cell, nukeTypes } from "../../../core/game/Game";
|
||||
@@ -190,14 +191,26 @@ export class NameLayer implements Layer {
|
||||
element.appendChild(iconsDiv);
|
||||
|
||||
const nameDiv = document.createElement("div");
|
||||
const applyFlagStyles = (element: HTMLElement): void => {
|
||||
element.classList.add("player-flag");
|
||||
element.style.opacity = "0.8";
|
||||
element.style.zIndex = "1";
|
||||
element.style.aspectRatio = "3/4";
|
||||
};
|
||||
|
||||
if (player.flag()) {
|
||||
const flagImg = document.createElement("img");
|
||||
flagImg.classList.add("player-flag");
|
||||
flagImg.style.opacity = "0.8";
|
||||
flagImg.src = "/flags/" + player.flag() + ".svg";
|
||||
flagImg.style.zIndex = "1";
|
||||
flagImg.style.aspectRatio = "3/4";
|
||||
nameDiv.appendChild(flagImg);
|
||||
const flag = player.flag();
|
||||
if (flag !== undefined && flag !== null && flag.startsWith("!")) {
|
||||
const flagWrapper = document.createElement("div");
|
||||
applyFlagStyles(flagWrapper);
|
||||
renderPlayerFlag(flag, flagWrapper);
|
||||
nameDiv.appendChild(flagWrapper);
|
||||
} else if (flag !== undefined && flag !== null) {
|
||||
const flagImg = document.createElement("img");
|
||||
applyFlagStyles(flagImg);
|
||||
flagImg.src = "/flags/" + flag + ".svg";
|
||||
nameDiv.appendChild(flagImg);
|
||||
}
|
||||
}
|
||||
nameDiv.classList.add("player-name");
|
||||
nameDiv.style.color = this.theme.textColor(player);
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import { LitElement, TemplateResult, html } from "lit";
|
||||
import { ref } from "lit-html/directives/ref.js";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
import { translateText } from "../../../client/Utils";
|
||||
import { renderPlayerFlag } from "../../../core/CustomFlag";
|
||||
import { EventBus } from "../../../core/EventBus";
|
||||
import {
|
||||
PlayerProfile,
|
||||
@@ -206,11 +208,22 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
|
||||
: "text-white"}"
|
||||
>
|
||||
${player.flag()
|
||||
? html`<img
|
||||
class="h-8 mr-1 aspect-[3/4]"
|
||||
src=${"/flags/" + player.flag() + ".svg"}
|
||||
/>`
|
||||
: ""}
|
||||
? player.flag()!.startsWith("!")
|
||||
? html`<div
|
||||
class="h-8 mr-1 aspect-[3/4] player-flag"
|
||||
${ref((el) => {
|
||||
if (el instanceof HTMLElement) {
|
||||
requestAnimationFrame(() => {
|
||||
renderPlayerFlag(player.flag()!, el);
|
||||
});
|
||||
}
|
||||
})}
|
||||
></div>`
|
||||
: html`<img
|
||||
class="h-8 mr-1 aspect-[3/4]"
|
||||
src=${"/flags/" + player.flag()! + ".svg"}
|
||||
/>`
|
||||
: html``}
|
||||
${player.name()}
|
||||
</div>
|
||||
${player.team() !== null
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@import url("./styles/core/flag-animation.css");
|
||||
@import url("./styles/core/variables.css");
|
||||
@import url("./styles/core/typography.css");
|
||||
@import url("./styles/layout/header.css");
|
||||
|
||||
@@ -0,0 +1,236 @@
|
||||
@keyframes rainbow {
|
||||
0% {
|
||||
background-color: #990033;
|
||||
}
|
||||
16% {
|
||||
background-color: #996600;
|
||||
}
|
||||
32% {
|
||||
background-color: #336600;
|
||||
}
|
||||
48% {
|
||||
background-color: #008080;
|
||||
}
|
||||
64% {
|
||||
background-color: #1c3f99;
|
||||
}
|
||||
80% {
|
||||
background-color: #5e0099;
|
||||
}
|
||||
100% {
|
||||
background-color: #990033;
|
||||
}
|
||||
}
|
||||
|
||||
.flag-color-rainbow {
|
||||
animation: rainbow 7s infinite;
|
||||
}
|
||||
|
||||
@keyframes brightRainbow {
|
||||
0% {
|
||||
background-color: #ff0000;
|
||||
} /* Red */
|
||||
16% {
|
||||
background-color: #ffa500;
|
||||
} /* Orange */
|
||||
32% {
|
||||
background-color: #ffff00;
|
||||
} /* Yellow */
|
||||
48% {
|
||||
background-color: #00ff00;
|
||||
} /* Green */
|
||||
64% {
|
||||
background-color: #00ffff;
|
||||
} /* Cyan */
|
||||
80% {
|
||||
background-color: #0000ff;
|
||||
} /* Blue */
|
||||
100% {
|
||||
background-color: #ff0000;
|
||||
} /* Back to red */
|
||||
}
|
||||
|
||||
.flag-color-bright-rainbow {
|
||||
animation: brightRainbow 7s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes copperGlow {
|
||||
0%,
|
||||
100% {
|
||||
background-color: #b87333;
|
||||
filter: brightness(1);
|
||||
}
|
||||
50% {
|
||||
background-color: #cd7f32;
|
||||
filter: brightness(1.4);
|
||||
}
|
||||
}
|
||||
|
||||
.flag-color-copper-glow {
|
||||
animation: copperGlow 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes silverGlow {
|
||||
0%,
|
||||
100% {
|
||||
background-color: #c0c0c0;
|
||||
filter: brightness(1);
|
||||
}
|
||||
50% {
|
||||
background-color: #e0e0e0;
|
||||
filter: brightness(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
.flag-color-silver-glow {
|
||||
animation: silverGlow 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes goldGlow {
|
||||
0%,
|
||||
100% {
|
||||
background-color: #ffd700;
|
||||
filter: brightness(1);
|
||||
}
|
||||
50% {
|
||||
background-color: #fff8dc;
|
||||
filter: brightness(1.6);
|
||||
}
|
||||
}
|
||||
|
||||
.flag-color-gold-glow {
|
||||
animation: goldGlow 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes neonPulseGreen {
|
||||
0%,
|
||||
100% {
|
||||
background-color: #39ff14;
|
||||
box-shadow:
|
||||
0 0 4px #39ff14,
|
||||
0 0 8px #39ff14;
|
||||
filter: brightness(1);
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
25% {
|
||||
background-color: #2aff60;
|
||||
box-shadow:
|
||||
0 0 8px #2aff60,
|
||||
0 0 12px #2aff60;
|
||||
filter: brightness(1.2);
|
||||
transform: scale(1.05);
|
||||
opacity: 0.9;
|
||||
}
|
||||
50% {
|
||||
background-color: #00ff88;
|
||||
box-shadow:
|
||||
0 0 12px #00ff88,
|
||||
0 0 20px #00ff88;
|
||||
filter: brightness(1.4);
|
||||
transform: scale(1.12);
|
||||
opacity: 0.7;
|
||||
}
|
||||
75% {
|
||||
background-color: #2aff60;
|
||||
box-shadow:
|
||||
0 0 8px #2aff60,
|
||||
0 0 12px #2aff60;
|
||||
filter: brightness(1.2);
|
||||
transform: scale(1.05);
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.flag-color-neon {
|
||||
animation: neonPulseGreen 3s ease-in-out infinite;
|
||||
will-change: transform, opacity, filter;
|
||||
}
|
||||
|
||||
@keyframes waterFlicker {
|
||||
0% {
|
||||
transform: translateY(0px) scale(1);
|
||||
filter: brightness(1);
|
||||
opacity: 0.9;
|
||||
background-color: #00bfff;
|
||||
}
|
||||
12% {
|
||||
transform: translateY(-1px) scale(1.01);
|
||||
filter: brightness(1.05);
|
||||
opacity: 0.95;
|
||||
background-color: #1e90ff;
|
||||
}
|
||||
27% {
|
||||
transform: translateY(1px) scale(1.02);
|
||||
filter: brightness(1.15);
|
||||
opacity: 1;
|
||||
background-color: #87cefa;
|
||||
}
|
||||
45% {
|
||||
transform: translateY(-0.5px) scale(1.01);
|
||||
filter: brightness(1.05);
|
||||
opacity: 0.93;
|
||||
background-color: #4682b4;
|
||||
}
|
||||
63% {
|
||||
transform: translateY(0.7px) scale(1.03);
|
||||
filter: brightness(1.2);
|
||||
opacity: 1;
|
||||
background-color: #87cefa;
|
||||
}
|
||||
80% {
|
||||
transform: translateY(-1px) scale(1);
|
||||
filter: brightness(1);
|
||||
opacity: 0.88;
|
||||
background-color: #1e90ff;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0px) scale(1);
|
||||
filter: brightness(1);
|
||||
opacity: 0.9;
|
||||
background-color: #00bfff;
|
||||
}
|
||||
}
|
||||
|
||||
.flag-color-water {
|
||||
animation: waterFlicker 6.2s ease-in-out infinite;
|
||||
will-change: transform, opacity, filter;
|
||||
}
|
||||
|
||||
@keyframes lavaFlow {
|
||||
0% {
|
||||
background-color: #ff4500;
|
||||
filter: brightness(1.1);
|
||||
transform: scale(1);
|
||||
}
|
||||
20% {
|
||||
background-color: #ff6347;
|
||||
filter: brightness(1.2);
|
||||
transform: scale(1.02);
|
||||
}
|
||||
40% {
|
||||
background-color: #ff8c00;
|
||||
filter: brightness(1.3);
|
||||
transform: scale(1.03);
|
||||
}
|
||||
60% {
|
||||
background-color: #ff4500;
|
||||
filter: brightness(1.4);
|
||||
transform: scale(1.01);
|
||||
}
|
||||
80% {
|
||||
background-color: #ff0000;
|
||||
filter: brightness(1.2);
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
background-color: #ff4500;
|
||||
filter: brightness(1.1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.flag-color-lava {
|
||||
animation: lavaFlow 6s ease-in-out infinite;
|
||||
will-change: background-color, filter, transform;
|
||||
}
|
||||
@@ -12,6 +12,21 @@ export const CosmeticsSchema = z.object({
|
||||
role_group: z.string().optional(),
|
||||
}),
|
||||
),
|
||||
flag: z.object({
|
||||
layers: z.record(
|
||||
z.string(),
|
||||
z.object({
|
||||
name: z.string(),
|
||||
}),
|
||||
),
|
||||
color: z.record(
|
||||
z.string(),
|
||||
z.object({
|
||||
color: z.string(),
|
||||
name: z.string(),
|
||||
}),
|
||||
),
|
||||
}),
|
||||
});
|
||||
export type Cosmetics = z.infer<typeof CosmeticsSchema>;
|
||||
export const COSMETICS: Cosmetics = CosmeticsSchema.parse(cosmetics_json);
|
||||
|
||||
@@ -0,0 +1,69 @@
|
||||
import { COSMETICS } from "./CosmeticSchemas";
|
||||
|
||||
const ANIMATION_DURATIONS: Record<string, number> = {
|
||||
rainbow: 4000,
|
||||
"bright-rainbow": 4000,
|
||||
"copper-glow": 3000,
|
||||
"silver-glow": 3000,
|
||||
"gold-glow": 3000,
|
||||
neon: 3000,
|
||||
lava: 6000,
|
||||
water: 6200,
|
||||
};
|
||||
|
||||
export function renderPlayerFlag(flag: string, target: HTMLElement) {
|
||||
if (!flag.startsWith("!")) return;
|
||||
|
||||
const code = flag.slice("!".length);
|
||||
const layers = code.split("_").map((segment) => {
|
||||
const [layerKey, colorKey] = segment.split("-");
|
||||
return { layerKey, colorKey };
|
||||
});
|
||||
|
||||
target.innerHTML = "";
|
||||
target.style.overflow = "hidden";
|
||||
target.style.position = "relative";
|
||||
target.style.aspectRatio = "3/4";
|
||||
|
||||
for (const { layerKey, colorKey } of layers) {
|
||||
const layerName = COSMETICS.flag.layers[layerKey]?.name ?? layerKey;
|
||||
|
||||
const mask = `/flags/custom/${layerName}.svg`;
|
||||
if (!mask) continue;
|
||||
|
||||
const layer = document.createElement("div");
|
||||
layer.style.position = "absolute";
|
||||
layer.style.top = "0";
|
||||
layer.style.left = "0";
|
||||
layer.style.width = "100%";
|
||||
layer.style.height = "100%";
|
||||
|
||||
const colorValue = COSMETICS.flag.color[colorKey]?.color ?? colorKey;
|
||||
const isSpecial =
|
||||
!colorValue.startsWith("#") &&
|
||||
!/^([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/.test(colorValue);
|
||||
|
||||
if (isSpecial) {
|
||||
const duration = ANIMATION_DURATIONS[colorValue] ?? 5000;
|
||||
const now = performance.now();
|
||||
const offset = now % duration;
|
||||
if (!duration) console.warn(`No animation duration for: ${colorValue}`);
|
||||
layer.classList.add(`flag-color-${colorValue}`);
|
||||
layer.style.animationDelay = `-${offset}ms`;
|
||||
} else {
|
||||
layer.style.backgroundColor = colorValue;
|
||||
}
|
||||
|
||||
layer.style.maskImage = `url(${mask})`;
|
||||
layer.style.maskRepeat = "no-repeat";
|
||||
layer.style.maskPosition = "center";
|
||||
layer.style.maskSize = "contain";
|
||||
|
||||
layer.style.webkitMaskImage = `url(${mask})`;
|
||||
layer.style.webkitMaskRepeat = "no-repeat";
|
||||
layer.style.webkitMaskPosition = "center";
|
||||
layer.style.webkitMaskSize = "contain";
|
||||
|
||||
target.appendChild(layer);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user