alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-06-22 02:37:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

fixed

Browse Source
This commit is contained in:
Aotumuri
2025-04-13 07:28:51 +09:00
parent 9b941ce179
commit 9bf6c6d010
4 changed files with 61 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/FlagInput.ts
+57
View File
@@ -1128,3 +1128,60 @@ export class FlagInput extends LitElement {
`;
}
}
export function renderPlayerFlag(flagCode: string, target: HTMLElement) {
const reverseNameMap = Object.fromEntries(
Object.entries(LayerShortNames).map(([k, v]) => [v, k]),
);
const reverseColorMap = Object.fromEntries(
Object.entries(ColorShortNames).map(([k, v]) => [v, k]),
);
if (!flagCode.startsWith("ctmfg")) return;
const code = flagCode.replace("ctmfg", "");
const layers = code.split("_").map((segment) => {
const [shortName, shortColor] = segment.split("-");
const name = reverseNameMap[shortName] || shortName;
const color = reverseColorMap[shortColor] || shortColor;
return { name, color };
});
target.innerHTML = "";
target.style.overflow = "hidden";
target.style.position = "relative";
target.style.aspectRatio = "3/4";
for (const { name, color } of layers) {
const mask = `/flags/custom/${name}.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 isSpecial = !color.startsWith("#");
if (isSpecial) {
layer.classList.add(`flag-color-${color}`);
} else {
layer.style.backgroundColor = color;
}
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);
}
}
src/client/Utils.ts
-58
View File
@@ -1,4 +1,3 @@
import { ColorShortNames, LayerShortNames } from "./FlagInput";
import { LangSelector } from "./LangSelector";
export function renderTroops(troops: number): string {
@@ -95,60 +94,3 @@ export const translateText = (
return langSelector.translateText(key, params);
};
export function renderPlayerFlag(flagCode: string, target: HTMLElement) {
const reverseNameMap = Object.fromEntries(
Object.entries(LayerShortNames).map(([k, v]) => [v, k]),
);
const reverseColorMap = Object.fromEntries(
Object.entries(ColorShortNames).map(([k, v]) => [v, k]),
);
if (!flagCode.startsWith("ctmfg")) return;
const code = flagCode.replace("ctmfg", "");
const layers = code.split("_").map((segment) => {
const [shortName, shortColor] = segment.split("-");
const name = reverseNameMap[shortName] || shortName;
const color = reverseColorMap[shortColor] || shortColor;
return { name, color };
});
target.innerHTML = "";
target.style.overflow = "hidden";
target.style.position = "relative";
target.style.aspectRatio = "3/4";
for (const { name, color } of layers) {
const mask = `/flags/custom/${name}.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 isSpecial = !color.startsWith("#");
if (isSpecial) {
layer.classList.add(`flag-color-${color}`);
} else {
layer.style.backgroundColor = color;
}
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);
}
}
src/client/graphics/layers/NameLayer.ts
+2 -1
View File
@@ -11,7 +11,8 @@ import { ClientID } from "../../../core/Schemas";
import { Theme } from "../../../core/configuration/Config";
import { AllPlayers, Cell, nukeTypes } from "../../../core/game/Game";
import { GameView, PlayerView } from "../../../core/game/GameView";
import { createCanvas, renderPlayerFlag, renderTroops } from "../../Utils";
import { renderPlayerFlag } from "../../FlagInput";
import { createCanvas, renderTroops } from "../../Utils";
import { TransformHandler } from "../TransformHandler";
import { Layer } from "./Layer";
src/client/graphics/layers/PlayerInfoOverlay.ts
+2 -1
View File
@@ -12,8 +12,9 @@ import {
import { TileRef } from "../../../core/game/GameMap";
import { GameView, PlayerView, UnitView } from "../../../core/game/GameView";
import { ClientID } from "../../../core/Schemas";
import { renderPlayerFlag } from "../../FlagInput";
import { MouseMoveEvent } from "../../InputHandler";
import { renderNumber, renderPlayerFlag, renderTroops } from "../../Utils";
import { renderNumber, renderTroops } from "../../Utils";
import { TransformHandler } from "../TransformHandler";
import { Layer } from "./Layer";