Wiki Gla - Contribuições do usuário [pt-br]

Usuário:Ttuzu

2025-06-26T17:24:06Z

Ttuzu: Limpou toda a página

Usuário Discussão:Ttuzu

2025-06-10T22:51:07Z

Ttuzu: Limpou toda a página

Usuário Discussão:Ttuzu

2025-06-10T22:39:10Z

Ttuzu: /* Personagem:Franky (Timeskip) */ nova seção

Usuário Discussão:Ttuzu

2025-06-10T22:37:56Z

Ttuzu: /* Predefinição:Persona */ nova seção

Usuário Discussão:Ttuzu

2025-06-10T22:31:41Z

Ttuzu: /* Predefinição:Persona/styles.css */

Usuário Discussão:Ttuzu

2025-06-10T22:30:43Z

Ttuzu: /* Widget:Persona */ nova seção

== Predefinição:Persona/styles.css ==

@media (min-width: 1280px) and (min-aspect-ratio: 3/4) {
.habilidades-details {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px;
justify-content: center;
width: 90%;
align-self: center;
margin-top: 20px;
}

.habilidades-container {
flex-direction: column-reverse;
width: 100%;
}

.cuadros-container {
display: flex;
flex-wrap: nowrap;
gap: 16px;
width: 100%;
overflow-x: auto;
padding-bottom: 8px;
margin-bottom: 1%;
justify-self: center;
justify-content: flex-start;
}

.descripcion-container {
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
padding: 20px;
background-color: #2a2a2a;
border-radius: 8px;
}

.descripcion-container h3 {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 15px;
color: #fff;
font-size: 1.5em;
margin-bottom: 10px;
}

.ability-name-text {
font-weight: bold;
}

.ability-level-text {
font-size: 0.8em;
color: #bbb;
}

.ability-attributes {
display: flex;
align-items: center;
gap: 10px;
}

.ability-attributes div {
display: flex;
align-items: center;
gap: 5px;
color: #fff;
font-size: 0.9em;
}

.ability-attributes img {
width: 24px;
height: 24px;
vertical-align: middle;
}

.ability-desc {
color: #ccc;
line-height: 1.5;
font-size: 1.1em;
margin-bottom: 15px;
}

.ability-video-container {
width: 100%;
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
margin-top: auto;
}

.ability-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 4px;
background-color: #000;
}

.cuadros-container .cuadro {
flex: 0 0 auto;
width: 60px;
height: 60px;
border-radius: 8px;
border: 2px solid transparent;
cursor: pointer;
transition: all 0.2s ease-in-out;
background-size: cover;
background-position: center;
background-color: #333;
overflow: hidden;
}

.cuadros-container .cuadro.active {
border-color: #007bff;
box-shadow: 0 0 10px rgba(0, 123, 255, 0.6);
}
}

.persona-container {
max-width: 1200px;
margin: 20px auto;
background-color: #1a1a1a;
color: #fff;
font-family: sans-serif; /* Usar fonte padrão, ou especificar uma que você importe */
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
padding: 20px;
}

.persona-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #333;
}

.art-personagem {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #007bff;
}

.persona-info h1 {
font-size: 2.5em;
margin: 0;
color: #007bff;
}

.persona-info p {
margin: 5px 0;
color: #bbb;
}

.persona-tabs {
display: flex;
margin-bottom: 20px;
border-bottom: 2px solid #333;
}

.tab-btn {
background-color: #333;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
font-size: 1.1em;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
transition: background-color 0.3s ease;
margin-right: 5px;
}

.tab-btn:hover {
background-color: #444;
}

.tab-btn.active {
background-color: #007bff;
color: #fff;
border-bottom: 2px solid #007bff;
}

@media (max-width: 768px) {
.persona-header {
flex-direction: column;
text-align: center;
}

.persona-info {
text-align: center;
}

.habilidades-details {
flex-direction: column;
width: 95%;
}

.cuadros-container {
flex-wrap: wrap;
justify-content: center;
}

.cuadros-container .cuadro {
width: 50px;
height: 50px;
}

.descripcion-container h3 {
flex-direction: column;
align-items: flex-start;
gap: 5px;
}

.ability-attributes {
margin-top: 10px;
justify-content: center;
flex-wrap: wrap;
}
}

== Widget:Persona ==

(function () {
const personaData = document.getElementById('persona-data');
if (!personaData) {
console.error('Persona widget: não se encontrou #persona-data!');
return;
}

// Extração de dados
const nome = personaData.dataset.nome || '';
const tier = personaData.dataset.tier || '';
const classe = personaData.dataset.classe || '';
const image = personaData.dataset.image || '';
let habilidades = [];
let skins = [];

// Função auxiliar para parsear strings raw em objetos
const parseRawString = (rawString) => {
const data = [];
if (!rawString) return data;

const lines = rawString.split('||').map(line => line.trim()).filter(Boolean);

lines.forEach(line => {
const parts = line.split('\n').map(p => p.trim()).filter(Boolean);
const item = {};
parts.forEach(part => {
if (part.startsWith('')) {
// Ignorar comentários
return;
}
const eqIndex = part.indexOf('=');
if (eqIndex > -1) {
const key = part.substring(0, eqIndex).trim();
const value = part.substring(eqIndex + 1).trim();
item[key] = value;
}
});
if (Object.keys(item).length > 0) {
data.push(item);
}
});
return data;
};

habilidades = parseRawString(personaData.dataset.habilidadesraw);
skins = parseRawString(personaData.dataset.skinsraw);

// Referências aos elementos HTML
const tabBtns = document.querySelectorAll('.persona-tabs .tab-btn');
const cuadrosContainer = document.querySelector('.cuadros-container');
const abilityNameText = document.querySelector('.descripcion-container .ability-name-text');
const abilityLevelText = document.querySelector('.descripcion-container .ability-level-text');
const abilityDesc = document.querySelector('.descripcion-container .ability-desc');
const abilityVideo = document.querySelector('.descripcion-container .ability-video');
const abilityVideoSource = abilityVideo.querySelector('source');
const abilityAttributesContainer = document.querySelector('.descripcion-container .ability-attributes');
const artPersonagem = document.querySelector('.art-personagem');
const personaName = document.querySelector('.persona-name');
const personaTier = document.querySelector('.persona-tier');
const personaClass = document.querySelector('.persona-class');

// Preencher informações do header do personagem
if (artPersonagem) artPersonagem.src = image;
if (personaName) personaName.textContent = nome;
if (personaTier) personaTier.textContent = `Tier: ${tier}`;
if (personaClass) personaClass.textContent = `Classe: ${classe}`;

// Estado atual
let currentActiveTab = 'habilidades';
let currentActiveIndex = 0; // Índice da habilidade/skin ativa

// Função para renderizar os ícones (habilidades ou skins)
const renderIcons = (items, type) => {
cuadrosContainer.innerHTML = ''; // Limpar antes de renderizar
items.forEach((item, index) => {
const cuadro = document.createElement('div');
cuadro.classList.add('cuadro');
cuadro.style.backgroundImage = `url('${item.icon || item.image}')`;
cuadro.dataset.index = index;
cuadro.dataset.type = type;

cuadro.addEventListener('click', () => {
selectItem(index, type);
});
cuadrosContainer.appendChild(cuadro);
});
};

// Função para exibir detalhes da habilidade/skin
const displayItemDetails = (item, type) => {
// Limpa atributos anteriores
abilityAttributesContainer.innerHTML = '';

if (type === 'habilidades') {
abilityNameText.textContent = item.nome || '';
abilityLevelText.textContent = `Level: ${item.level || ''}`;
abilityDesc.textContent = item.desc || '';

// Renderizar atributos dinamicamente
if (item.atr) {
const atrParts = item.atr.split(',').map(p => p.trim());
for (let i = 0; i < atrParts.length; i += 2) {
const iconPath = atrParts[i];
const value = atrParts[i + 1];

if (iconPath && value !== undefined && value !== null) { // Verifique se o valor não é null/undefined
const attributeDiv = document.createElement('div');
const attributeImg = document.createElement('img');
attributeImg.src = iconPath;
attributeImg.alt = "Atributo";
attributeDiv.appendChild(attributeImg);
attributeDiv.appendChild(document.createTextNode(value));
abilityAttributesContainer.appendChild(attributeDiv);
}
}
}

if (item.video) {
abilityVideoSource.src = item.video;
abilityVideo.load();
abilityVideo.style.display = 'block';
} else {
abilityVideoSource.src = '';
abilityVideo.style.display = 'none';
}
} else { // Skins
abilityNameText.textContent = item.nome || '';
abilityLevelText.textContent = '';
abilityDesc.textContent = item.desc || '';
abilityVideoSource.src = '';
abilityVideo.style.display = 'none';
}
};

// Função para selecionar um item (habilidade ou skin)
const selectItem = (index, type) => {
const items = type === 'habilidades' ? habilidades : skins;
const selectedItem = items[index];

// Atualizar classe 'active' nos ícones
document.querySelectorAll('.cuadro').forEach(cuadro => {
cuadro.classList.remove('active');
});
const activeCuadro = cuadrosContainer.querySelector(`.cuadro[data-index="${index}"][data-type="${type}"]`);
if (activeCuadro) {
activeCuadro.classList.add('active');
}

displayItemDetails(selectedItem, type);
currentActiveIndex = index;
currentActiveTab = type;
};

// Event Listeners para as abas
tabBtns.forEach(btn => {
btn.addEventListener('click', () => {
const tabType = btn.dataset.tab;

// Remover 'active' de todas as abas
tabBtns.forEach(b => b.classList.remove('active'));
// Adicionar 'active' à aba clicada
btn.classList.add('active');

if (tabType === 'habilidades') {
renderIcons(habilidades, 'habilidades');
if (habilidades.length > 0) {
selectItem(0, 'habilidades');
} else {
abilityNameText.textContent = 'Nenhuma Habilidade';
abilityLevelText.textContent = '';
abilityDesc.textContent = '';
abilityAttributesContainer.innerHTML = '';
abilityVideoSource.src = '';
abilityVideo.style.display = 'none';
}
} else { // Skins
renderIcons(skins, 'skins');
if (skins.length > 0) {
selectItem(0, 'skins');
} else {
abilityNameText.textContent = 'Nenhuma Skin';
abilityLevelText.textContent = '';
abilityDesc.textContent = '';
abilityAttributesContainer.innerHTML = '';
abilityVideoSource.src = '';
abilityVideo.style.display = 'none';
}
}
});
});

// Inicialização: renderizar habilidades e selecionar a primeira por padrão
if (habilidades.length > 0) {
renderIcons(habilidades, 'habilidades');
selectItem(0, 'habilidades');
} else if (skins.length > 0) {
document.querySelector('.tab-btn[data-tab="skins"]').click();
} else {
cuadrosContainer.innerHTML = '<p style="color: #bbb; text-align: center; width: 100%;">Nenhum conteúdo disponível.</p>';
abilityNameText.textContent = 'Nenhum Conteúdo';
abilityLevelText.textContent = '';
abilityDesc.textContent = '';
abilityAttributesContainer.innerHTML = '';
abilityVideoSource.src = '';
abilityVideo.style.display = 'none';
}

})();

Usuário Discussão:Ttuzu

2025-06-10T22:29:50Z

Ttuzu: /* Predefinição:Persona/styles.css */ nova seção

Usuário:Ttuzu

2025-06-10T16:54:41Z

Ttuzu: Adicionado estilo customizado com animações (fadeIn, bounce) e ajustes visuais em popups e iframes para melhorar a experiência visual ao interagir com ícones no mapa.

<div class="map-container" id="map"></div>

<script>
const skulls = [
{ x: 410, y: 220, title: "White Skull", desc: "Boss: White Skull<br>Área sombria, cuidado com os ataques surpresa!", icon: "/images/d/dc/Whiteskull.png" },
{ x: 650, y: 125, title: "Red Fang", desc: "Boss: Red Fang<br>Possui resistência a fogo. Traga ataques de gelo!", icon: "/images/d/dc/Whiteskull.png" },
{ x: 250, y: 410, title: "Void Wraith", desc: "Boss: Void Wraith<br>Evite ataques diretos. Usa magia de sombras.", icon: "/images/d/dc/Whiteskull.png" },
{ x: 248, y: 320, title: "Night Howler", desc: "Boss: Night Howler<br>Ataca com velocidade e confusão. Use proteção contra atordoamento!", icon: "/images/d/dc/Whiteskull.png" },
];

const hearts = [
{ x: 280, y: 210, title: "Cura", desc: "Cura escondida: Quebre a caixa para obter uma cura.", icon: "/images/d/d9/Heart.png" },
{ x: 312, y: 196, title: "Cura", desc: "Pegue o coração para se curar", icon: "/images/d/d9/Heart.png" },
{ x: 245, y: 358, title: "Cura", desc: "Após o chefe, o jogador com menos vida receberá uma cura automática.", icon: "/images/d/d9/Heart.png" },
];

const puzzleButton = {
x: 244,
y: 217,
title: "Desafio Puzzle",
desc: `<iframe width="400" height="260" src="https://www.youtube.com/embed/10rhyP32vdw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>`,
icon: "/images/d/de/Engrenagem.png"
};

const map = document.getElementById("map");

function createIconWithPopup({ x, y, icon, title, desc }, className) {
const iconEl = document.createElement("img");
iconEl.src = icon;
iconEl.className = className;
iconEl.alt = title;
iconEl.title = title;
iconEl.style.left = `${(x / 811) * 100}%`;
iconEl.style.top = `${(y / 554) * 100}%`;

const popup = document.createElement("div");
popup.className = "popup";
popup.innerHTML = `<strong>${title}</strong><br>${desc}`;
popup.style.left = `calc(${(x / 811) * 100}% + 30px)`;
popup.style.top = `calc(${(y / 554) * 100}% - 10px)`;

iconEl.addEventListener("click", (e) => {
e.stopPropagation();
popup.style.display = popup.style.display === "block" ? "none" : "block";
iconEl.classList.add("clicked");
setTimeout(() => iconEl.classList.remove("clicked"), 300);
});

map.appendChild(iconEl);
map.appendChild(popup);
}

skulls.forEach(skull => createIconWithPopup(skull, "skull-icon"));
hearts.forEach(heart => createIconWithPopup(heart, "heart-icon"));
createIconWithPopup(puzzleButton, "puzzle-button");

document.addEventListener("click", () => {
document.querySelectorAll(".popup").forEach(p => p.style.display = "none");
});

document.addEventListener("keydown", (e) => {
if (e.key === "Escape") {
document.querySelectorAll(".popup").forEach(p => p.style.display = "none");
}
});
</script>

<style>
.map-container {
position: relative;
width: 100%;
max-width: 811px;
aspect-ratio: 811 / 554;
background: url('/images/5/55/SabaodyMap.png') no-repeat center center;
background-size: cover;
}

.skull-icon,
.heart-icon,
.puzzle-button {
position: absolute;
width: 26px;
height: 26px;
cursor: pointer;
transition: transform 0.2s, filter 0.2s;
}

.skull-icon:hover,
.heart-icon:hover,
.puzzle-button:hover {
transform: scale(1.3);
filter: brightness(1.5);
}

.popup {
position: absolute;
background: #1e1e1e;
color: #fff;
padding: 10px 14px;
border-radius: 8px;
border: 1px solid #444;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
display: none;
z-index: 10;
max-width: 500px;
font-size: 14px;
animation: fadeIn 0.3s ease-out;
}

.popup iframe {
border-radius: 6px;
margin-top: 6px;
max-width: 100%;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(-5px); }
to { opacity: 1; transform: translateY(0); }
}

.clicked {
animation: bounce 0.3s ease-in-out;
}

@keyframes bounce {
0% { transform: scale(1); }
50% { transform: scale(1.4); }
100% { transform: scale(1); }
}
</style>