Sci-Fi Wars Component

/* Scoped CSS: Sadece bu bileşeni etkiler */
#scifi-wrapper {
–sf-primary: #e50914;
–sf-secondary: #007bff;
–sf-dark-bg: #0a0a0a;
–sf-card-bg: #141414;

font-family: ‘Montserrat’, sans-serif;
background-color: var(–sf-dark-bg);
color: #fff;
position: relative;
width: 100%;
padding: 50px 0;
box-sizing: border-box;
overflow: hidden;
background-image: radial-gradient(circle at center, #1a1a1a 0%, #000 100%);
}

#scifi-wrapper * { box-sizing: border-box; }

/* HEADER */
#scifi-wrapper .sf-header { text-align: center; margin-bottom: 40px; }

#scifi-wrapper .sf-logo {
font-family: ‘Bebas Neue’, sans-serif;
font-size: 3.5rem;
background: linear-gradient(to right, var(–sf-secondary), #fff, var(–sf-primary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 4px;
display: inline-block;
filter: drop-shadow(0 0 10px rgba(255,255,255,0.2));
}

#scifi-wrapper .sf-subtitle {
color: #aaa;
font-size: 0.9rem;
letter-spacing: 1.5px;
margin-top: 5px;
font-weight: 300;
}
#scifi-wrapper .sf-subtitle strong { color: #fff; font-weight: 700; }

/* ARENA */
#scifi-wrapper .arena-container {
display: flex;
justify-content: center;
align-items: stretch;
width: 95%;
max-width: 1200px;
margin: 0 auto;
position: relative;
gap: 20px;
}

/* CARDS */
#scifi-wrapper .fighter-side {
flex: 1;
background: var(–sf-card-bg);
border-radius: 12px;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
min-height: 600px; /* İçerik arttığı için biraz uzattım */
position: relative;
transition: all 0.5s ease;
border: 1px solid #333;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
overflow: hidden;
}

#scifi-wrapper .fighter-content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}

/* PLACEHOLDER */
#scifi-wrapper .placeholder-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
padding: 40px;
color: rgba(255,255,255,0.3);
text-align: center;
}

#scifi-wrapper .placeholder-icon {
font-size: 4rem;
margin-bottom: 20px;
border: 3px dashed rgba(255,255,255,0.2);
width: 100px;
height: 100px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}

/* VS BUTTON */
#scifi-wrapper .vs-container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 50;
}

#scifi-wrapper .vs-btn {
width: 100px;
height: 100px;
background: #000;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: ‘Bebas Neue’, sans-serif;
font-size: 3.5rem;
cursor: pointer;
border: 4px solid #fff;
animation: sf-pulse 2s infinite;
transition: all 0.3s ease;
outline: none;
}

#scifi-wrapper .vs-btn:hover {
transform: scale(1.1);
background: #fff;
color: #000;
box-shadow: 0 0 30px rgba(255,255,255,0.6);
animation: none;
}

@keyframes sf-pulse {
0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
70% { box-shadow: 0 0 0 15px rgba(255, 255, 255, 0); }
100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* MOVIE INFO STYLES */
#scifi-wrapper .poster-container {
width: 100%;
aspect-ratio: 2 / 3;
overflow: hidden;
position: relative;
border-bottom: 1px solid #333;
}

#scifi-wrapper .poster-container img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

#scifi-wrapper .movie-details {
padding: 20px;
text-align: center;
width: 100%;
background: linear-gradient(to top, rgba(0,0,0,1), rgba(20,20,20,0));
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
}

#scifi-wrapper .movie-title {
font-family: ‘Bebas Neue’, sans-serif;
font-size: 2rem;
margin: 5px 0;
line-height: 1;
color: #fff;
}

#scifi-wrapper .movie-meta {
color: #aaa;
font-size: 0.8rem;
margin-bottom: 10px;
font-weight: bold;
}

/* Yeni Eklenen Açıklama ve Cast Stilleri */
#scifi-wrapper .movie-overview {
font-size: 0.85rem;
color: #ddd;
line-height: 1.4;
margin: 10px 0;
display: -webkit-box;
-webkit-line-clamp: 3; /* 3 satırda kes */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}

#scifi-wrapper .movie-cast-info {
font-size: 0.75rem;
color: #888;
margin-bottom: 15px;
text-align: center;
line-height: 1.4;
}
#scifi-wrapper .movie-cast-info strong { color: #fff; }

#scifi-wrapper .score-display {
font-size: 3.5rem;
font-family: ‘Bebas Neue’, sans-serif;
font-weight: bold;
margin: 5px 0 15px 0;
opacity: 0;
transform: scale(0.5);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
text-shadow: 0 0 20px currentColor;
}

#scifi-wrapper .trailer-btn {
background: transparent;
border: 1px solid rgba(255,255,255,0.4);
color: #fff;
padding: 8px 25px;
font-size: 0.75rem;
cursor: pointer;
font-family: ‘Montserrat’, sans-serif;
text-transform: uppercase;
margin-top: auto;
transition: 0.3s;
letter-spacing: 1px;
}
#scifi-wrapper .trailer-btn:hover { background: #fff; color: #000; box-shadow: 0 0 15px rgba(255,255,255,0.5); }

/* WINNER / LOSER Logic */
#scifi-wrapper .winner-active {
border: 2px solid #ffd700;
box-shadow: 0 0 40px rgba(255, 215, 0, 0.3);
z-index: 10;
}
#scifi-wrapper .winner-active .score-display { color: #ffd700; opacity: 1; transform: scale(1); }

#scifi-wrapper .loser-active {
filter: grayscale(100%) opacity(0.5);
transform: scale(0.98);
}
#scifi-wrapper .loser-active .score-display { opacity: 1; transform: scale(1); }

#scifi-wrapper .winner-badge {
position: absolute;
top: 20px;
right: 20px;
background: #ffd700;
color: #000;
padding: 5px 15px;
font-family: ‘Bebas Neue’, sans-serif;
font-size: 1.5rem;
transform: rotate(10deg);
box-shadow: 0 5px 15px rgba(0,0,0,0.5);
z-index: 20;
animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn { from { transform: scale(0) rotate(0deg); } to { transform: scale(1) rotate(10deg); } }

/* MODAL */
#scifi-modal { display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); backdrop-filter: blur(5px); }
#scifi-modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 900px; aspect-ratio: 16/9; background: #000; box-shadow: 0 0 50px rgba(255,255,255,0.1); }
#scifi-close { position: absolute; top: 20px; right: 40px; color: #fff; font-size: 40px; cursor: pointer; }

@media (max-width: 768px) {
#scifi-wrapper .arena-container { flex-direction: column; gap: 40px; }
#scifi-wrapper .vs-container { position: relative; top: auto; left: auto; transform: none; margin: -20px auto; }
#scifi-wrapper .fighter-side { width: 100%; min-height: auto; }
}

const sfApiKey = ’25ec2c68c8aa9357786e0be45ac80de3′;
let sfIsBattling = false;

async function startSciFiWar() {
if (sfIsBattling) return;
sfIsBattling = true;

const btn = document.getElementById(‘sf-vs-btn’);
const leftSide = document.getElementById(‘sf-left’);
const rightSide = document.getElementById(‘sf-right’);
const leftContent = document.getElementById(‘content-left’);
const rightContent = document.getElementById(‘content-right’);

// RESETLEME
btn.style.transform = “scale(0.8) rotate(360deg)”;
btn.disabled = true;
btn.style.opacity = “0.7”;

leftSide.classList.remove(‘winner-active’, ‘loser-active’);
rightSide.classList.remove(‘winner-active’, ‘loser-active’);
document.querySelectorAll(‘.winner-badge’).forEach(el => el.remove());

leftContent.innerHTML = getLoadingHTML(“Scanning Sector 1…”);
rightContent.innerHTML = getLoadingHTML(“Scanning Sector 2…”);

try {
setTimeout(async () => {
let m1, m2;
do {
m1 = await getSfMovie();
m2 = await getSfMovie();
} while (m1.id === m2.id);

renderSfFighter(m1, ‘left’, leftContent);
renderSfFighter(m2, ‘right’, rightContent);

btn.innerText = “VS”;
btn.style.transform = “scale(1)”;
btn.style.opacity = “1”;

setTimeout(() => {
decideSfWinner(m1, m2);
sfIsBattling = false;
btn.disabled = false;
btn.innerText = “AGAIN”;
btn.style.fontSize = “1.5rem”;
}, 800);
}, 500);

} catch (err) {
console.error(err);
leftContent.innerHTML = `

`;
rightContent.innerHTML = `

`;
sfIsBattling = false;
btn.disabled = false;
}
}

function getLoadingHTML(text) {
return `

@keyframes spin { 100% { transform:rotate(360deg); } }
`;
}

async function getSfMovie() {
const page = Math.floor(Math.random() * 40) + 1;
const url = `https://api.themoviedb.org/3/discover/movie?api_key=${sfApiKey}&with_genres=878&vote_average.gte=6.5&vote_count.gte=500&include_adult=false&page=${page}`;
const res = await fetch(url);
const data = await res.json();

if (!data.results || data.results.length === 0) return getSfMovie();

const movie = data.results[Math.floor(Math.random() * data.results.length)];
// cast ve videos için detay çekiyoruz
const detail = await fetch(`https://api.themoviedb.org/3/movie/${movie.id}?api_key=${sfApiKey}&append_to_response=videos,credits`).then(r=>r.json());
return detail;
}

function renderSfFighter(movie, side, container) {
const year = movie.release_date ? movie.release_date.split(‘-‘)[0] : ”;
const director = movie.credits.crew.find(c => c.job === ‘Director’)?.name || ‘Unknown’;
const trailer = movie.videos.results.find(v => v.site === ‘YouTube’ && v.type === ‘Trailer’);

// GÜNCELLEME 2: Oyuncu listesini al (ilk 3 kişi)
const cast = movie.credits.cast.slice(0, 3).map(c => c.name).join(‘, ‘);

const trailerHtml = trailer
? `Watch Trailer`
: `No Trailer`;

const posterSrc = movie.poster_path
? `https://image.tmdb.org/t/p/w780${movie.poster_path}`
: ‘https://via.placeholder.com/500×750?text=No+Image’;

// GÜNCELLEME 3: Yeni HTML Yapısı (Özet ve Cast ile)
container.innerHTML = `

`;
}

function decideSfWinner(m1, m2) {
const leftSide = document.getElementById(‘sf-left’);
const rightSide = document.getElementById(‘sf-right’);

document.getElementById(‘sf-score-left’).style.opacity = ‘1’;
document.getElementById(‘sf-score-left’).style.transform = ‘scale(1)’;
document.getElementById(‘sf-score-right’).style.opacity = ‘1’;
document.getElementById(‘sf-score-right’).style.transform = ‘scale(1)’;

if (m1.vote_average > m2.vote_average) {
leftSide.classList.add(‘winner-active’);
rightSide.classList.add(‘loser-active’);
addSfBadge(leftSide);
} else if (m2.vote_average > m1.vote_average) {
rightSide.classList.add(‘winner-active’);
leftSide.classList.add(‘loser-active’);
addSfBadge(rightSide);
}
}

function addSfBadge(element) {
const badge = document.createElement(‘div’);
badge.className=”winner-badge”;
badge.innerText=”WINNER”;
element.appendChild(badge);
}

function openSfTrailer(key) {
const modal = document.getElementById(‘scifi-modal’);
const content = document.getElementById(‘scifi-modal-content’);
content.innerHTML = “;
modal.style.display = ‘block’;
}
function closeSfTrailer() {
const modal = document.getElementById(‘scifi-modal’);
document.getElementById(‘scifi-modal-content’).innerHTML = ”;
modal.style.display = ‘none’;
}
document.getElementById(‘scifi-modal’).onclick = function(e) {
if(e.target === this) closeSfTrailer();
}

This content was originally published on %Sci-Fi Wars | Random Sci-Fi Movie Battle & Generator% by YourSiteName.

Source link