// This fragment deliberately carries its own visual assets so it can be
// uploaded or embedded independently of the main website.
const assets = './images/';
const games = [
  ['Egame','fe77fbc37be0a8f4.webp','https://player.stage.skillsandslots-new.com/egame'],
  ['Fire Kirin','4c0bbeacbb4b261b.webp','https://player.stage.skillsandslots-new.com/fire-kirin'],
  ['Game Vault','f70c57c15698dacb.webp','https://player.stage.skillsandslots-new.com/game-vault'],
  ['Gemini','210659c305d2afff.webp','https://player.stage.skillsandslots-new.com/gemini'],
  ['Juwa','c950bba51c4792e3.webp','https://player.stage.skillsandslots-new.com/juwa'],
  ['Orion Stars','5235a8ea300b9028.webp','https://player.stage.skillsandslots-new.com/orion-stars'],
  ['Panda Master','93d9806e78407812.webp','https://player.stage.skillsandslots-new.com/panda-master'],
  ['RSweeps','d6f2e3f52fb9e605.webp','https://player.stage.skillsandslots-new.com/rsweeps'],
  ['Tai Chi Master','7a3168c52321f58a.webp','https://player.stage.skillsandslots-new.com/tai-chi-master'],
  ['Ultra Panda','0fe4f57934bf5301.webp','https://player.stage.skillsandslots-new.com/ultra-panda'],
  ['Vblink','711a70ddb848f3ff.webp','https://player.stage.skillsandslots-new.com/vblink'],
  ['AceBook','9f14a58f5b66ec30.webp','https://player.stage.skillsandslots-new.com/acebook'],
  ['Blue Dragon','dc1d9ae018e4e68b.webp','https://player.stage.skillsandslots-new.com/games'],
  ['V Power','79ea49655ccfa957.webp','https://player.stage.skillsandslots-new.com/games'],
  ['Ultra Monster','8f59c46d0e980fc7.webp','https://player.stage.skillsandslots-new.com/games'],
  ['River Monster','33462d4a61b7d613.webp','https://player.stage.skillsandslots-new.com/games']
];
const cards = document.querySelector('#cards');
const icon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.3"><path d="M12 3v12m0 0 4-4m-4 4-4-4M4 17v3h16v-3"/></svg>';
cards.innerHTML = games.map(([name,logo,href],index) => `<article class="game-card" data-index="${index}"><div class="orb"><span class="orb-glow"></span></div><picture><source media="(max-width: 640px)" srcset="${assets}frames/anillo2-mobile.webp"><img class="frame" src="${assets}frames/anillo2.webp" alt=""></picture><div class="particles"></div><img class="logo ${name === 'Ultra Monster' ? 'ultra-monster' : ''}" src="${assets}games/${logo}" alt="${name}"><a class="download" href="${href}" target="_blank" rel="noopener noreferrer">${icon}<span>Download</span></a></article>`).join('');
const cardsList = [...cards.children]; let active = 0; let dragStart = null;
const wrap = value => (value % games.length + games.length) % games.length;
function sparks(card,mobile){const host=card.querySelector('.particles');host.replaceChildren();for(let i=0;i<(mobile?10:24);i++){const p=document.createElement('i'),angle=Math.random()*Math.PI*2,distance=80+Math.random()*(mobile?110:170);p.className='particle';p.style.setProperty('--size',`${3+Math.random()*7}px`);p.style.setProperty('--color',i%3?'#d65bff':'#fff2c7');p.style.setProperty('--dx',`${Math.cos(angle)*distance}px`);p.style.setProperty('--dy',`${Math.sin(angle)*distance}px`);p.style.setProperty('--duration',`${.7+Math.random()*.85}s`);p.style.animationDelay=`${Math.random()*.25}s`;host.append(p)}}
function draw(){const mobile=innerWidth<=640;cardsList.forEach((card,index)=>{let delta=index-active;if(delta>games.length/2)delta-=games.length;if(delta<-games.length/2)delta+=games.length;const distance=Math.abs(delta),center=delta===0,nearby=distance<=1;card.classList.toggle('center',center);card.classList.toggle('is-nearby',nearby);card.style.pointerEvents=distance>1?'none':'auto';if(!center)card.querySelector('.particles').replaceChildren();if(mobile){const direction=delta<0?-1:1;card.style.transform=center?'translate3d(-50%,0,0) scale(1)':distance===1?`translate3d(calc(-50% + ${direction*96}px),${direction<0?-128:150}px,0) scale(.48)`:'translate3d(-50%,0,0) scale(.2)';card.style.opacity=String(center?1:distance===1?.82:0);card.style.filter='none';card.style.zIndex=String(center?3:distance===1?2:0)}else{card.style.transform=distance>1?`translateX(calc(-50% ${delta<0?'-':'+'} 50vw ${delta<0?'-':'+'} 240px)) scale(.78)`:`translateX(calc(-50% + ${delta*377}px)) scale(${center?1:.88})`;card.style.opacity=String(distance>2?0:1);card.style.filter=center?'none':`brightness(${distance===1?.48:.45})`;card.style.zIndex=String(center?3:distance===1?2:1)}if(nearby){const glow=card.querySelector('.orb-glow');glow.style.setProperty('--x',`${28+Math.random()*44}%`);glow.style.setProperty('--y',`${28+Math.random()*44}%`)}});sparks(cardsList[active],mobile)}
function go(step){active=wrap(active+step);draw()}
document.querySelector('#prev').addEventListener('click',()=>go(-1));document.querySelector('#next').addEventListener('click',()=>go(1));
cardsList.forEach((card,index)=>{
  card.addEventListener('click',event=>{if(event.target.closest('.download'))return;let delta=index-active;if(delta>games.length/2)delta-=games.length;if(delta<-games.length/2)delta+=games.length;if(delta)go(delta)});
  const download = card.querySelector('.download');
  // The carousel captures pointer gestures for dragging. Keep a press on the
  // actual Download control entirely out of that gesture, then open its URL
  // explicitly from the user click so it works in a standalone upload too.
  download.addEventListener('pointerdown', event => event.stopPropagation());
  download.addEventListener('click', event => {
    event.preventDefault();
    event.stopPropagation();
    window.open(download.href, '_blank', 'noopener,noreferrer');
  });
});
cards.addEventListener('pointerdown',event=>{if(event.target.closest('.download'))return;dragStart=event.clientX;cards.classList.add('is-dragging');cards.setPointerCapture(event.pointerId)});cards.addEventListener('pointerup',event=>{if(dragStart===null)return;const distance=event.clientX-dragStart;if(Math.abs(distance)>28)go(distance<0?1:-1);dragStart=null;cards.classList.remove('is-dragging')});cards.addEventListener('pointercancel',()=>{dragStart=null;cards.classList.remove('is-dragging')});
draw();setInterval(()=>{if(dragStart===null)go(1)},7000);
