Widget:C.WeaponToggle
Ir para navegação
Ir para pesquisar
<script>
(() => {
let modalListenersBound = false;
// Variável global para o ícone do weapon toggle let globalWeaponToggleIcon = null;
// Função helper para construir URL de arquivo (mesmo sistema usado em Character.Skills.html)
function filePathURL(fileName) {
// Evita requisições para valores vazios
if (
!fileName ||
fileName.trim() === ""
) {
return "";
}
// Remove prefixos e decodifica se já estiver codificado (evita double encoding)
let cleanName = fileName.replace(/^Arquivo:|^File:/, "");
try {
// Tenta decodificar primeiro (caso já venha codificado como %27)
cleanName = decodeURIComponent(cleanName);
} catch (e) {
// Se falhar, usa o nome original
}
// Agora codifica corretamente
const f = encodeURIComponent(cleanName);
const base =
window.mw && mw.util && typeof mw.util.wikiScript === "function"
? mw.util.wikiScript()
: window.mw && window.mw.config
? mw.config.get("wgScript") || "/index.php"
: "/index.php";
// Garante HTTPS para evitar Mixed Content
let url = `${base}?title=Especial:FilePath/${f}`;
if (window.location.protocol === "https:" && url.startsWith("http://")) {
url = url.replace("http://", "https://");
}
return url;
}
// Função para resolver o ícone do weapon toggle do character-box
function resolveCharacterWeaponIcon() {
const root = document.querySelector(".character-box");
if (!root) return;
const raw = root.dataset.weaponicon;
if (!raw || raw.trim() === "") {
globalWeaponToggleIcon = null;
return;
}
globalWeaponToggleIcon = filePathURL(raw.trim());
// console.log('[WeaponToggle] Resolved weaponicon:', raw, '->', globalWeaponToggleIcon);
}
// Textos i18n para o popup
const i18nTexts = {
pt: {
title: "Visualização com Arma Especial",
body1:
"Este modo ativa a visualização do personagem equipado com sua arma especial.",
body2:
"Algumas habilidades são diferentes enquanto estão com a arma equipada, essas habilidades ficam destacadas com borda vermelha.",
dontShow: "Não mostrar novamente",
ok: "Entendi",
weaponLink: "Ver página da arma:",
},
en: {
title: "Special Weapon View",
body1:
"This mode activates the view of the character equipped with their special weapon.",
body2:
"Some abilities are different while equipped with the weapon, these abilities are highlighted with a red border.",
dontShow: "Don't show again",
ok: "Got it",
weaponLink: "View weapon page:",
},
es: {
title: "Visualización con Arma Especial",
body1:
"Este modo activa la visualización del personaje equipado con su arma especial.",
body2:
"Algunas habilidades son diferentes mientras están con el arma equipada, estas habilidades quedan destacadas con borde rojo.",
dontShow: "No mostrar de nuevo",
ok: "Entendido",
weaponLink: "Ver página del arma:",
},
pl: {
title: "Widok z Bronią Specjalną",
body1:
"Ten tryb aktywuje widok postaci wyposażonej w broń specjalną.",
body2:
"Niektóre umiejętności różnią się podczas posiadania broni, te umiejętności są podświetlone czerwoną obwódką.",
dontShow: "Nie pokazuj ponownie",
ok: "Rozumiem",
weaponLink: "Zobacz stronę broni:",
},
};
const getCurrentLang = () => {
const html = document.documentElement.lang || "pt-br";
const norm = html.toLowerCase().split("-")[0];
return i18nTexts[norm] ? norm : "pt";
};
const bindModalEvents = () => {
if (modalListenersBound) return;
modalListenersBound = true;
document.addEventListener("click", (ev) => {
if (
ev.target.closest(".weapon-modal-close") ||
ev.target.closest(".weapon-modal-btn")
) {
const checkbox = document.getElementById("weapon-dont-show");
if (checkbox && checkbox.checked) {
try {
localStorage.setItem("glaWeaponPopupDismissed", "1");
} catch (x) { }
}
hidePopup();
return;
}
if (ev.target.classList.contains("weapon-modal-overlay")) {
hidePopup();
}
});
};
const applyWeaponState = (enabled) => {
if (typeof window.__setGlobalWeaponEnabled === "function") {
window.__setGlobalWeaponEnabled(enabled);
}
try {
localStorage.setItem("glaWeaponEnabled", enabled ? "1" : "0");
} catch (x) { }
// Dispara evento para atualizar subskills
window.dispatchEvent(
new CustomEvent("gla:weaponToggled", { detail: { enabled } })
);
// SISTEMA UNIFICADO: Aplica toggle em skills E subskills
// Skills principais e subskills usam data-weapon (padronizado)
document
.querySelectorAll(".skill-icon[data-weapon], .subicon[data-weapon]")
.forEach((el) => {
const weaponData = el.getAttribute("data-weapon");
// Verifica se o weapon não está vazio (não é '{}' ou vazio)
let hasValidWeapon = false;
if (weaponData && weaponData.trim() !== "" && weaponData !== "{}") {
try {
const weaponObj = JSON.parse(weaponData);
if (
weaponObj &&
typeof weaponObj === "object" &&
Object.keys(weaponObj).length > 0
) {
hasValidWeapon = true;
}
} catch (e) {
// Se não for JSON válido, não considera como weapon válido
}
}
if (enabled && hasValidWeapon) {
el.classList.add("has-weapon-available");
} else {
el.classList.remove("has-weapon-available");
el.classList.remove("weapon-equipped");
const ind = el.querySelector(".weapon-indicator");
if (ind) ind.remove();
}
});
// Atualiza descrição da skill/subskill selecionada (se houver) para refletir estado da arma
// Aguarda um pouco mais para garantir que o estado global foi sincronizado
setTimeout(() => {
// Atualiza skill principal se houver - força reativação completa incluindo vídeo
const sel = document.querySelector(
".skill-icon.active:not(.weapon-bar-toggle)"
);
if (sel) {
// Força uma reativação completa da skill para garantir que vídeo seja atualizado
if (
typeof window.__subskills !== "undefined" &&
window.__subskills.hideAll
) {
const videoBox =
document.querySelector(".video-container") ||
document.querySelector(".skills-video-box");
if (videoBox) window.__subskills.hideAll(videoBox);
}
// Reativa a skill para atualizar vídeo, descrição e atributos
if (
typeof window.__lastActiveSkillIcon !== "undefined" &&
window.__lastActiveSkillIcon === sel
) {
sel.dispatchEvent(new Event("click", { bubbles: true }));
} else {
sel.dispatchEvent(new Event("click", { bubbles: true }));
}
}
// Atualiza subskill ativa se houver - força reativação completa incluindo vídeo
const activeSub = document.querySelector(".subicon.active");
if (activeSub) {
activeSub.dispatchEvent(new Event("click", { bubbles: true }));
}
}, 100);
};
const updateModalTexts = (modal) => {
const lang = getCurrentLang();
const t = i18nTexts[lang];
const title = modal.querySelector(".weapon-modal-header h3");
if (title) title.textContent = t.title;
const body = modal.querySelector(".weapon-modal-body");
if (body) {
const p1 = body.querySelector("p:first-child");
const p2 = body.querySelector("p:nth-child(2)");
if (p1) p1.innerHTML = t.body1;
if (p2) p2.innerHTML = t.body2;
}
const checkbox = modal.querySelector(".weapon-modal-checkbox span");
if (checkbox) checkbox.textContent = t.dontShow;
const btn = modal.querySelector(".weapon-modal-btn");
if (btn) btn.textContent = t.ok;
// Atualiza link da arma se existir
try {
const firstWithWeapon = document.querySelector(
".skill-icon[data-weapon]"
);
if (firstWithWeapon) {
const raw = firstWithWeapon.getAttribute("data-weapon");
const obj = JSON.parse(raw || "{}");
const nm = obj && obj.name ? String(obj.name).trim() : "";
if (nm) {
const linkHost =
window.mw && mw.util && typeof mw.util.getUrl === "function"
? mw.util.getUrl(nm)
: "/index.php?title=" + encodeURIComponent(nm);
const holder = modal.querySelector(".weapon-info-link");
if (holder) {
holder.style.display = "block";
holder.innerHTML = `<a href="${linkHost}">${t.weaponLink} ${nm}</a>`;
}
}
}
} catch (_) { }
};
const ensureModal = () => {
let modal = document.getElementById("weapon-info-modal");
if (modal) {
updateModalTexts(modal);
return modal;
}
// Insere dentro da character-box para isolar completamente
const container =
document.querySelector(".character-box") ||
document.querySelector("#mw-content-text") ||
document.body;
modal = document.createElement("div");
modal.id = "weapon-info-modal";
modal.className = "weapon-modal";
modal.innerHTML = `
`;
container.appendChild(modal);
updateModalTexts(modal);
bindModalEvents();
return modal;
};
const showPopup = () => {
const modal = ensureModal();
if (modal) {
updateModalTexts(modal);
// Força reflow antes de adicionar classe para garantir transição
void modal.offsetHeight;
modal.classList.add("show");
}
};
const hidePopup = () => {
const m = document.getElementById("weapon-info-modal");
if (m) m.classList.remove("show");
};
window.__applyWeaponState = applyWeaponState;
window.__glaWeaponShowPopup = showPopup;
window.__glaWeaponHidePopup = hidePopup;
try {
window.dispatchEvent(
new CustomEvent("weapon:ready", {
detail: { applyWeaponState, showPopup, hidePopup },
})
);
} catch (err) { }
// Escuta mudanças de idioma
window.addEventListener("gla:langChanged", () => {
const modal = document.getElementById("weapon-info-modal");
if (modal) updateModalTexts(modal);
});
// Função para obter o nome da arma
function getWeaponName() {
let weaponName = "Arma Especial";
try {
const firstWithWeapon = document.querySelector(
".skill-icon[data-weapon]"
);
if (firstWithWeapon) {
const raw = firstWithWeapon.getAttribute("data-weapon");
const obj = JSON.parse(raw || "{}");
if (obj && obj.name) {
weaponName = String(obj.name).trim();
}
}
} catch (e) { }
return weaponName;
}
// Função para criar o novo toggle abaixo do char-translator
function createWeaponToggle() {
// Remove toggle antigo se existir
const oldToggle = document.querySelector(".weapon-bar-toggle");
if (oldToggle) oldToggle.remove();
const existingContainer = document.querySelector(
".weapon-toggle-container"
);
if (existingContainer) return existingContainer;
const characterHeader = document.querySelector(".character-header");
if (!characterHeader) return null;
// Resolve o ícone
resolveCharacterWeaponIcon();
const weaponName = getWeaponName();
// Cria o container do toggle
const container = document.createElement("div");
container.className = "weapon-toggle-container";
container.setAttribute("role", "button");
container.setAttribute("aria-pressed", "false");
container.setAttribute("aria-label", weaponName);
// Cria o sprite (círculo com imagem)
const sprite = document.createElement("div");
sprite.className = "weapon-toggle-sprite";
if (globalWeaponToggleIcon) {
const img = document.createElement("img");
img.src = globalWeaponToggleIcon;
img.alt = weaponName;
img.className = "weapon-toggle-icon";
img.decoding = "async";
img.loading = "eager"; // Ícone do toggle é crítico - carrega imediatamente
img.onerror = function () {
// console.error('[WeaponToggle] Erro ao carregar imagem:', globalWeaponToggleIcon);
};
img.onload = function () {
// console.log('[WeaponToggle] Imagem carregada com sucesso:', globalWeaponToggleIcon);
};
sprite.appendChild(img);
}
// Cria a barra com texto
const bar = document.createElement("div");
bar.className = "weapon-toggle-bar";
const nameSpan = document.createElement("span");
nameSpan.className = "weapon-toggle-name";
nameSpan.setAttribute("data-lang", getCurrentLang());
bar.appendChild(nameSpan);
container.appendChild(sprite);
container.appendChild(bar);
// Adiciona evento de clique
container.addEventListener("click", () => {
let currentState = false;
try {
currentState = localStorage.getItem("glaWeaponEnabled") === "1";
} catch (e) { }
const nextState = !currentState;
if (nextState) {
// Verifica se o popup foi dispensado antes de mostrar
let shouldShowPopup = true;
try {
if (localStorage.getItem("glaWeaponPopupDismissed") === "1") {
shouldShowPopup = false;
}
} catch (e) { }
if (
shouldShowPopup &&
typeof window.__glaWeaponShowPopup === "function"
) {
window.__glaWeaponShowPopup();
}
}
if (typeof window.__applyWeaponState === "function") {
window.__applyWeaponState(nextState);
}
});
// Insere no container de controles (character-header-controls)
const controlsContainer = document.querySelector(
".character-header-controls"
);
if (controlsContainer) {
controlsContainer.appendChild(container);
} else {
// Fallback: insere no character-header se o container não existir
characterHeader.appendChild(container);
}
// Atualiza estado visual inicial
updateToggleVisualState();
return container; }
// Função para atualizar o estado visual do toggle
function updateToggleVisualState() {
const container = document.querySelector(".weapon-toggle-container");
if (!container) return;
let isEnabled = false;
try {
isEnabled = localStorage.getItem("glaWeaponEnabled") === "1";
} catch (e) { }
if (isEnabled) {
container.classList.add("weapon-active");
container.setAttribute("aria-pressed", "true");
} else {
container.classList.remove("weapon-active");
container.setAttribute("aria-pressed", "false");
}
// Atualiza idioma do texto
const nameSpan = container.querySelector(".weapon-toggle-name");
if (nameSpan) {
nameSpan.setAttribute("data-lang", getCurrentLang());
}
}
// Observa quando o container de controles é criado para posicionar o toggle
function observeCharacterHeader() {
const controlsContainer = document.querySelector(
".character-header-controls"
);
const characterHeader = document.querySelector(".character-header");
if (controlsContainer) {
// Container existe - cria o toggle imediatamente
createWeaponToggle();
} else if (characterHeader) {
// Header existe mas container não - cria o container e depois o toggle
const newContainer = document.createElement("div");
newContainer.className = "character-header-controls";
characterHeader.appendChild(newContainer);
// Aguarda um frame para garantir que o container foi adicionado
requestAnimationFrame(() => {
createWeaponToggle();
});
} else {
// Nada existe ainda - tenta novamente após um delay
setTimeout(observeCharacterHeader, 100);
}
}
// Observa mudanças no DOM para detectar quando o container de controles é criado
function observeDOMForHeader() {
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
mutation.addedNodes.forEach((node) => {
if (node.nodeType === 1) {
if (
node.classList &&
(node.classList.contains("character-header-controls") ||
node.classList.contains("character-header"))
) {
setTimeout(() => createWeaponToggle(), 10);
} else if (
node.querySelector &&
(node.querySelector(".character-header-controls") ||
node.querySelector(".character-header"))
) {
setTimeout(() => createWeaponToggle(), 10);
}
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
}
const boot = () => {
// Resolve o ícone do character antes de tudo
resolveCharacterWeaponIcon();
// Verificar se existe alguma skill ou subskill com arma
function checkHasAnyWeapon() {
// PRIORIDADE 1: Verifica se há weaponicon global no character-box
const characterBox = document.querySelector(".character-box");
if (characterBox && characterBox.dataset.weaponicon) {
const weaponIcon = characterBox.dataset.weaponicon.trim();
if (weaponIcon && weaponIcon !== "") {
return true;
}
}
// PRIORIDADE 2: Verifica skills principais
const mainSkills = document.querySelectorAll(
".skill-icon[data-weapon]"
);
for (const el of mainSkills) {
const weapon = el.dataset.weapon;
if (weapon && weapon.trim() !== "" && weapon !== "{}") {
try {
const weaponObj = JSON.parse(weapon);
if (
weaponObj &&
typeof weaponObj === "object" &&
Object.keys(weaponObj).length > 0
) {
return true;
}
} catch (e) {
// Se não for JSON válido mas não está vazio, considera válido
return true;
}
}
}
// PRIORIDADE 3: Verifica weaponicon em skills principais
const skillsWithWeaponIcon = document.querySelectorAll(
".skill-icon[data-weaponicon]"
);
for (const el of skillsWithWeaponIcon) {
const weaponIcon = el.dataset.weaponicon;
if (weaponIcon && weaponIcon.trim() !== "") {
return true;
}
}
// PRIORIDADE 4: Verifica subskills
const skillIcons = document.querySelectorAll(".skill-icon[data-subs]");
for (const el of skillIcons) {
try {
const subs = JSON.parse(el.getAttribute("data-subs") || "[]");
if (
Array.isArray(subs) &&
subs.some(
(s) =>
s &&
s.weapon &&
typeof s.weapon === "object" &&
Object.keys(s.weapon).length > 0
)
) {
return true;
}
} catch (e) { }
}
return false;
}
const hasAnyWeapon = checkHasAnyWeapon();
if (!hasAnyWeapon) {
// Limpar estado visual para chars sem arma (previne cache entre páginas)
const topRail = document.querySelector(".top-rail.skills");
if (topRail) {
topRail.classList.remove("weapon-mode-on");
}
document
.querySelectorAll(".skill-icon.has-weapon-available")
.forEach((el) => {
el.classList.remove("has-weapon-available");
el.classList.remove("weapon-equipped");
const ind = el.querySelector(".weapon-indicator");
if (ind) ind.remove();
});
// Remover toggle se existir
const toggleContainer = document.querySelector(
".weapon-toggle-container"
);
if (toggleContainer) toggleContainer.remove();
// Atualizar estado global para desligado
if (typeof window.__setGlobalWeaponEnabled === "function") {
window.__setGlobalWeaponEnabled(false);
}
return;
}
ensureModal();
// Cria o novo toggle - tenta múltiplas vezes para garantir
observeCharacterHeader();
observeDOMForHeader();
// Tenta criar novamente após um delay maior para garantir que o translator já criou o container
setTimeout(() => {
const existing = document.querySelector(".weapon-toggle-container");
if (!existing) {
observeCharacterHeader();
}
}, 500);
// Última tentativa após 1 segundo
setTimeout(() => {
const existing = document.querySelector(".weapon-toggle-container");
if (!existing) {
observeCharacterHeader();
}
}, 1000);
// Remove qualquer toggle antigo que apareça nas barras de skills/subskills
function removeOldToggles() {
document.querySelectorAll(".weapon-bar-toggle").forEach((toggle) => {
toggle.remove();
});
}
// Observa mudanças nas barras de ícones para remover toggles antigos
const iconBarObserver = new MutationObserver(() => {
removeOldToggles();
});
// Observa todas as barras de ícones existentes e futuras
const observeAllIconBars = () => {
document.querySelectorAll(".icon-bar").forEach((bar) => {
iconBarObserver.observe(bar, { childList: true, subtree: true });
});
};
// Remove toggles antigos imediatamente
removeOldToggles();
// Observa barras existentes
observeAllIconBars();
// Observa criação de novas barras
const bodyObserver = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
mutation.addedNodes.forEach((node) => {
if (node.nodeType === 1) {
if (node.classList && node.classList.contains("icon-bar")) {
iconBarObserver.observe(node, {
childList: true,
subtree: true,
});
removeOldToggles();
} else if (
node.querySelector &&
node.querySelector(".icon-bar")
) {
observeAllIconBars();
removeOldToggles();
}
}
});
});
});
bodyObserver.observe(document.body, { childList: true, subtree: true });
// Escuta mudanças no estado do weapon para atualizar visual
window.addEventListener("gla:weaponToggled", () => {
setTimeout(updateToggleVisualState, 50);
});
// Escuta mudanças de idioma
window.addEventListener("gla:langChanged", () => {
updateToggleVisualState();
});
// Estado inicial do toggle
let init = false;
try {
if (localStorage.getItem("glaWeaponEnabled") === "1") init = true;
} catch (x) { }
setTimeout(() => {
applyWeaponState(init);
updateToggleVisualState();
}, 150);
};
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", boot);
} else {
boot();
}
})();
</script> <style>
/* Character-box precisa de position relative para conter o modal */
.character-box {
position: relative;
}
/* Modal posicionado dentro da character-box */
.weapon-modal {
position: absolute;
inset: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.weapon-modal.show {
pointer-events: all;
}
/* Overlay escurece apenas a character-box - aparece PRIMEIRO */
.weapon-modal-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.65);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
opacity: 0;
transition: opacity 0.15s ease;
}
.weapon-modal.show .weapon-modal-overlay {
opacity: 1;
}
/* Conteúdo aparece DEPOIS do overlay */
.weapon-modal-content {
position: relative;
z-index: 1;
transform: scale(0.96);
background: linear-gradient(145deg, #2d1a1a, #1e1212);
border: 1px solid rgba(255, 100, 100, 0.2);
border-radius: 14px;
max-width: 420px;
width: 90%;
opacity: 0;
transition: transform 0.18s ease 0.08s, opacity 0.15s ease 0.08s;
overflow: hidden;
}
.weapon-modal.show .weapon-modal-content {
transform: scale(1);
opacity: 1;
}
.weapon-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid rgba(255, 100, 100, 0.12);
background: linear-gradient(90deg, rgba(255, 80, 80, 0.06), transparent);
}
.weapon-modal-header h3 {
margin: 0;
font-size: 16px;
font-weight: 600;
color: #fff;
}
.weapon-modal-close {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.5);
font-size: 18px;
font-family: Arial, sans-serif;
line-height: 1;
cursor: pointer;
padding: 0;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 6px;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.weapon-modal-close:hover {
background: rgba(255, 80, 80, 0.15);
border-color: rgba(255, 80, 80, 0.3);
color: #ff7043;
}
.weapon-modal-body {
padding: 20px;
color: rgba(255, 255, 255, 0.85);
line-height: 1.65;
font-size: 14px;
}
.weapon-modal-body p {
margin: 0 0 12px;
display: block !important;
}
.weapon-modal-body p:last-child,
.weapon-modal-body p.weapon-info-link {
margin: 0;
}
.weapon-modal-body p.weapon-info-link:empty {
display: none !important;
}
.weapon-modal-body strong {
color: #ff7043;
font-weight: 600;
}
.weapon-modal-body .weapon-info-link a {
color: #ff7043;
text-decoration: none;
font-weight: 600;
}
.weapon-modal-body .weapon-info-link a:hover {
text-decoration: underline;
}
.weapon-modal-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
border-top: 1px solid rgba(255, 100, 100, 0.1);
background: rgba(0, 0, 0, 0.1);
gap: 12px;
}
.weapon-modal-checkbox {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
line-height: 1.2;
color: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: color 0.15s;
}
.weapon-modal-checkbox:hover {
color: rgba(255, 255, 255, 0.75);
}
.weapon-modal-checkbox input[type="checkbox"] {
accent-color: #ff5722;
margin: 0;
width: 14px;
height: 14px;
flex-shrink: 0;
transform: translateY(1px);
}
.weapon-modal-checkbox span {
line-height: 1.2;
}
.weapon-modal-btn {
background: #bf360c;
border: none;
color: #fff;
padding: 10px 24px;
border-radius: 6px;
font-weight: 600;
font-size: 13px;
line-height: 1;
cursor: pointer;
transition: background 0.15s;
display: inline-flex;
align-items: center;
justify-content: center;
}
.weapon-modal-btn:hover {
background: #d84315;
}
.weapon-modal-btn:active {
background: #a52714;
}
@media (max-width: 600px) {
.weapon-modal-content {
width: 92%;
max-width: none;
}
.weapon-modal-header,
.weapon-modal-body,
.weapon-modal-footer {
padding: 14px 16px;
}
.weapon-modal-footer {
flex-direction: column;
gap: 12px;
}
.weapon-modal-btn {
width: 100%;
}
}
/* =========================== NOVO WEAPON TOGGLE =========================== */
.weapon-toggle-container {
display: flex;
align-items: center;
z-index: 10;
background: transparent;
padding: 0;
border-radius: 0;
border: none;
box-shadow: none;
cursor: pointer;
transition: transform 0.08s ease;
overflow: visible;
height: 44px;
box-sizing: border-box;
}
.weapon-toggle-container:hover {
transform: translateY(-1px);
}
.weapon-toggle-sprite {
width: 44px;
height: 44px;
flex-shrink: 0;
border-radius: 50%;
overflow: visible;
position: relative;
background: rgb(40, 40, 48);
border: 2px solid rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
margin: 0;
padding: 0;
box-sizing: border-box;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
will-change: background-color;
}
.weapon-toggle-sprite img {
width: 64px;
height: 64px;
display: block;
/* Força redimensionamento pixelado (nearest neighbor) - ordem importante */
-ms-interpolation-mode: nearest-neighbor;
/* IE/Edge antigo - deve vir primeiro */
image-rendering: -moz-crisp-edges;
/* Firefox */
image-rendering: -webkit-optimize-contrast;
/* Safari/Chrome antigo */
image-rendering: pixelated;
/* Chrome/Edge moderno */
image-rendering: crisp-edges !important;
/* Fallback padrão - força sem suavização */
/* Garante que não há suavização por transform ou filter */
transform: translateZ(0);
backface-visibility: hidden;
/* Mantém proporção sem suavização */
object-fit: contain;
object-position: center;
/* Força renderização sem suavização - importante para sprites pixelados */
-webkit-font-smoothing: none;
font-smoothing: none;
}
.weapon-toggle-bar {
background: rgb(40, 40, 48);
padding: 5px 14px 5px 28px;
border-radius: 0 7px 7px 0;
border: 2px solid rgba(255, 255, 255, 0.15);
border-left: none;
display: flex;
align-items: center;
width: 180px;
position: relative;
overflow: hidden;
margin: 0;
margin-left: -22px;
height: 34px;
box-sizing: border-box;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
background-image 0.15s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
will-change: background-color, background-image;
}
.weapon-toggle-name {
color: #fff;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
position: relative;
z-index: 2;
letter-spacing: 0.3px;
display: inline-block;
}
/* Textos i18n - usando ::after para mostrar o texto baseado no data-lang e estado */
.weapon-toggle-name::after {
content: "Equipar Arma";
/* Default PT */
}
.weapon-toggle-name[data-lang="pt"]::after {
content: "Equipar Arma";
}
.weapon-toggle-name[data-lang="en"]::after {
content: "Equip Weapon";
}
.weapon-toggle-name[data-lang="es"]::after {
content: "Equipar Arma";
}
.weapon-toggle-name[data-lang="pl"]::after {
content: "Wyposaż Broń";
}
/* Estado ATIVO (arma equipada) - muda o texto */
.weapon-toggle-container.weapon-active .weapon-toggle-name::after {
content: "Desequipar Arma";
/* Default PT */
}
.weapon-toggle-container.weapon-active .weapon-toggle-name[data-lang="pt"]::after {
content: "Desequipar Arma";
}
.weapon-toggle-container.weapon-active .weapon-toggle-name[data-lang="en"]::after {
content: "Unequip Weapon";
}
.weapon-toggle-container.weapon-active .weapon-toggle-name[data-lang="es"]::after {
content: "Desequipar Arma";
}
.weapon-toggle-container.weapon-active .weapon-toggle-name[data-lang="pl"]::after {
content: "Zdjęć Broń";
}
/* Estado ativo - destaque vermelho */
.weapon-toggle-container.weapon-active .weapon-toggle-sprite {
background-color: rgb(200, 60, 40) !important;
border: 2px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.weapon-toggle-container.weapon-active .weapon-toggle-bar {
background-color: rgb(200, 60, 40);
background-image: linear-gradient(135deg,
rgb(200, 60, 40),
rgb(160, 45, 30));
border-color: rgba(255, 87, 34, 0.3);
border-left: none;
border-radius: 0 7px 7px 0;
}
.weapon-toggle-container.weapon-active .weapon-toggle-name {
color: #fff;
text-shadow: 0 0 4px rgba(255, 87, 34, 0.5);
}
</style>