🎮 Bubble Shooter 🫧

Temps 00:00

Coups 00

Difficulté

Thème

Chargeur (clique pour sélectionner)

Règles :

Minimum 3 mêmes couleurs pour exploser
Cluster de 5 → génère une bulle multicolore
La bulle multicolore supprime toutes les bulles de la meme couleur ciblée
Modes *Normal*Difficile*Maître** :
- Nouvelle bulles toutes les *50 secondes*.

Tirez en cliquant/touchant et relâchant l'écran.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="language" content="fr" />
<meta http-equiv="x-dns-prefetch-control" content="on" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5" />
<link href="css.css" rel="stylesheet" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="description" content="">
<title>🎮 Bubble Shooter 🫧</title>
<style type="text/css">
/* CSS pour le jeu */
html,body{ height:100%; margin:0; font-family:system-ui, -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial; background:#07101a; color:#e6eef0; }

.wrapper{ display:flex; flex-direction:column; min-height:100vh; align-items:center; justify-content:flex-start; padding:12px; box-sizing:border-box; }

.game-area{
	display:flex;
	gap:12px; align-items:flex-start;
	flex-wrap:wrap;
	justify-content:center; /* ✔ Centre tout */
	flex-direction: column !important; /* ✔ PANEL EN DESSOUS */
}

.board-wrap{
	position:relative;
	width:340px; /* ✔ cadre du jeux */
	border:2px solid rgba(255,255,255,0.2);
	border-radius:8px;
	background:rgba(255,255,255,0.02);
	overflow:hidden;
	margin: 0 auto;
	box-sizing: border-box;
}

/* Tableau pour aligner les cellules */
table.board{ 
	border-collapse:collapse;
	background:transparent;
	table-layout:fixed;
	width:100%;
	user-select:none;
	border-spacing: 0;
}
table.board td{ 
	width:16px;
	height:16px;
	padding:0;
	border:0;
	position:relative;
	vertical-align:top;
	line-height:1;
}

/* Bulle (Diamètre de 16px) */
.bubble{
	width:16px;
	height:16px;
	border-radius:50%;
	margin:0;
	position:relative;
	display:flex;
	align-items: center;
	justify-content: center;
	box-shadow:0 2px 4px rgba(0,0,0,0.6);
	font-size:10px;
	cursor:default;
	transition:transform 0.12s linear, opacity 0.12s linear;
}
/* AJOUT DU REFLET POUR LA BULLE */
.bubble::after {
	content: '';
	position: absolute;
	top: 2px; /* Position du reflet */
	left: 2px;
	width: 12px;
	height: 6px;
	border-radius: 50%;
	/* Gradient pour simuler la lumière en haut à gauche */
	background: radial-gradient(circle at 75% 25%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 70%);
	pointer-events: none;
	z-index: 5;
}
.cell-empty{ opacity:0;}
.overlay{ position:absolute; left:0; top:0; pointer-events:none; width:100%; height:100%;}
.moving{
	position:absolute;
	width:16px;
	height:16px;
	border-radius:50%;
	transform:translate(-50%,-50%);
	z-index:20;
	pointer-events:none;
	box-shadow:0 2px 4px rgba(0,0,0,0.6);
	display:flex; align-items:center; justify-content:center;
}

.aim-line{ position:absolute; top:0; left:0; right:0; bottom:0; pointer-events:none;}
.aim-dot{ position:absolute; width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,0.5);}

.panel{
	width: 100%;
	max-width: 320px;
	margin: 0 auto;
	background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01));
	padding:10px;
	border-radius:8px;
	box-shadow:0 6px 12px rgba(0,0,0,0.5);
}

.hud-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.hud-row label{ font-size:12px;}
.small{ font-size:12px;color:#cfe9d8;}

/* Lanceur (Corrigé pour iOS) */
	.shooter-container{
		perspective: 1000px;
	}
.shooter{
	display:flex;
	align-items:center;
	gap:8px;
	padding:6px;
	justify-content:center;
	position:relative;
	width:150px;
	height: 38px;
	margin: 0 auto;
	transition: transform 0.3s ease-out;
}
.preview{ 
	width:30px;
	height:30px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	box-shadow:inset 0 -3px 0 rgba(0,0,0,0.15);
	cursor:pointer;
	border:2px solid rgba(255,255,255,0.05);
	transition:transform .12s ease;
	position:absolute;
}
.preview[data-idx="1"]{ 
	/* Bulle principale (en bas) */
	bottom: 1;
	left: 50%;
	margin-left: -15px; /* Centrage */
	transform: none;
}
.preview[data-idx="0"]{
	/* Bulle gauche (en haut à gauche) */
	top: 0;
	left: calc(40% - 20px);
	margin-left: -15px;
	transform: none;
}
.preview[data-idx="2"]{
	/* Bulle droite (en haut à droite) */
	top: 0;
	left: calc(60% + 20px);
	margin-left: -15px;
	transform: none;
}

.preview.selected{
	transform:scale(1.06);
	border-color:rgba(255,255,255,0.12) 
}

/* Thèmes (7 au total) */
.theme-1 .wrapper{ background:linear-gradient(135deg,#0b1225,#66CC99,#2b8);}
.theme-2 .wrapper{ background:linear-gradient(135deg,#091326,#4466cc,#66ccff);}
.theme-3 .wrapper{ background:linear-gradient(135deg,#24121a,#cc6699,#ffb347);}
.theme-4 .wrapper{ background:linear-gradient(135deg,#020024,#2b5876,#4e4376);}
.theme-5 .wrapper{ background:linear-gradient(135deg,#1f1a30,#441e88,#9276d4);}
.theme-6 .wrapper{ background:linear-gradient(135deg,#000000,#00ff99,#ff00ff);}
.theme-7 .wrapper{ background:radial-gradient(circle, #3a3a3a, #1a1a1a);}
.theme-8 .wrapper{ background:radial-gradient(circle, #FFEEAD, #FF9A8B);}
	.theme-8 .wrapper * { color: #000 !important;}
.theme-9 .wrapper{ background:radial-gradient(circle at 50% 50%, #ff8bd1, #7b2ff7, #2c003e);}
.theme-10 .wrapper{ background:radial-gradient(circle, #ffeaff, #ffd6e0, #a3a1ff, #2e1f5e);}
	.theme-10 .wrapper * { color: #000 !important;}

/* Couleurs des bulles */
.c-red{ background:linear-gradient(180deg,#ff5a5a,#c92b2b);}
.c-green{ background:linear-gradient(180deg,#9fe57c,#2d9e2f);}
.c-blue{ background:linear-gradient(180deg,#7fbfff,#0b6fd8);}
.c-yellow{ background:linear-gradient(180deg,#ffe08a,#ffb300);}
.c-cyan{ background:linear-gradient(180deg,#aee8ff,#4ab6e6);}
.c-orange{ background:linear-gradient(180deg,#ff8000,#cc5500);}
.c-purple{ background:linear-gradient(180deg,#d397fa,#8a2be2);}
.c-white{ background:linear-gradient(180deg,#ffffff,#cccccc); color:#000;}
.c-rainbow{ background:conic-gradient(#ff4d4d,#ffd24d,#7be86d,#66d6ff,#9a8cff); border:2px solid rgba(255,255,255,0.06);}
.bubble span{ filter:drop-shadow(0 1px 1px rgba(0,0,0,0.4));}

.explosion { animation: explode 0.3s ease-out forwards; opacity: 1 !important; transform: scale(1.5);}

@keyframes explode {
	0% { transform: scale(1); opacity: 1;}
	100% { transform: scale(0); opacity: 0;}
}

/* Adaptation mobile du plateau */
@media (max-width:880px){
	.game-area{ flex-direction:column; align-items:center;}
	.panel{ width:92%;} 
	.board-wrap{ width:92%;}
}

.btn{ background:rgba(255,255,255,0.06); color:inherit; border:0; padding:6px 10px; border-radius:6px; cursor:pointer; font-weight:600;}
.btn:active{ transform:translateY(1px);}

/* MODIFIÉ : Overlay Game Over avec flex-direction: column et style pour le bouton */
.overlay-message{
	position:fixed;
	left:0;
	right:0;
	top:0;
	bottom:0;
	display:flex;
	flex-direction: column; /* Pour empiler Game Over et le bouton */
	align-items:center;
	justify-content:center;
	background:linear-gradient(180deg,rgba(0,0,0,0.45),rgba(0,0,0,0.65));
	z-index:200;
	color:#fff;
	font-size:28px;
	font-weight:800;
	text-align: center; /* Pour le texte de game over */
}
.overlay-message .btn { /* Style spécifique pour le bouton dans l'overlay */
	margin-top: 20px;
	font-size: 18px;
	padding: 10px 20px;
	background: rgba(255, 255, 255, 0.15);
	border: 2px solid rgba(255, 255, 255, 0.3);
	color: white;
}

.blink { animation: blink-animation 1s steps(2, start) infinite;}
@keyframes blink-animation { to { visibility: hidden;}}

footer{ margin-top:12px; width:100%; text-align:center; padding:8px; font-size:12px; color:#b7c8bf;}
</style>
</head>

<body class="theme-2">
<div class="wrapper">
	<h2>🎮 Bubble Shooter 🫧</h2>
	<div class="game-area">
		<div class="board-wrap" id="boardWrap">
			<table class="board" id="board">
				<tbody id="boardBody"></tbody>
			</table>
			<div class="overlay" id="overlay">
				<svg class="aim-line" id="aimSvg" width="100%" height="100%"></svg>
			</div>
		</div>
		<div class="panel">
			<div class="hud-row">
				<div><div style="font-weight:700">Temps <span id="timer" class="small">00:00</span></div></div>
				<div><div style="font-weight:700">Coups <span id="shotCount" class="small">00</span></div></div> 
			</div>
			<div class="hud-row">
				<span><label for="difficulty">Difficulté</label>
					<select id="difficulty">
						<option value="easy">Facile</option>
						<option value="normal" selected="selected">Normal</option>
						<option value="hard">Difficile ( + Gravité)</option>
						<option value="master">Maître ( + Gravité)</option> 
					</select>
				</span>
				<div><label for="theme">Thème</label>
					<select id="theme">
						<option value="theme-1">Défaut</option>
						<option value="theme-2" selected="selected">Océan</option>
						<option value="theme-3">Rose</option>
						<option value="theme-4">Sombre claire</option>
						<option value="theme-5">Violet</option>
						<option value="theme-6">Néon</option>
						<option value="theme-7">Rétro</option>
						<option value="theme-8">Sombre</option>
						<option value="theme-9">Galary 2</option>
						<option value="theme-10">Galary 3</option>
					</select>
				</div>
			</div>
			<hr style="opacity: 2.00; border:none; border-top: 1px solid rgba(255,255,255,0.04)" />

<div style="text-align:center;margin-bottom:6px;font-weight:700">Chargeur (clique pour sélectionner)</div>
			<div class="shooter-container"> 
				<div class="shooter" id="shooter">
					<div class="preview" data-idx="0" id="preview0"></div>
					<div class="preview selected" data-idx="1" id="preview1"></div>
					<div class="preview" data-idx="2" id="preview2"></div>
				</div>
			</div>

<div style="margin-top:8px" class="small">
				<span style="font-weight:700">Règles :</span>
				<ul style="margin:4px 0 0 16px;padding:0">
					<li>Minimum <strong>3</strong> mêmes couleurs pour exploser</li>
					<li>Cluster de <strong>5</strong> → génère une bulle multicolore</li>
					<li>La bulle multicolore supprime <em>toutes</em> les bulles de la meme couleur ciblée</li>
					<li>Modes *Normal*Difficile*Maître** :<br>- Nouvelle bulles toutes les *50 secondes*.</li>
				</ul>
				<p style="margin-top:4px">Tirez en cliquant/touchant et relâchant l'écran.</p>
			</div>
		</div>
	</div>
	<footer>Bulles : rouge 😵‍💫, vert 🤯, bleu 🥶, jaune 🤭, bleu clair 🔵, orange 🍊, violet 🟣, blanc ⚪</footer>

</div>
<div id="gameOver" class="overlay-message" style="display:none">
	<div id="gameOverText" class="blink">Game Over</div> 
	<button class="btn" id="replayBtnGameOver">Rejouer</button> 
</div>
<footer style="position:relative; margin:0 auto; width:50%; text-align:center; border-radius:20px; overflow:hidden; box-shadow:0 0 12px rgba(0,0,0,0.3); padding:10px 0; font-family:sans-serif; font-size:12px;"><p style="margin: 0;"><a href="https://feuille-heures-angelique.neocities.org/" style="text-decoration: none; color: inherit;">Calculatrice d’heures - Feuille d'Heures Angélique (FR)</a></p></footer>

/* DOM Elements */
const boardBody = document.getElementById('boardBody');
const overlay = document.getElementById('overlay');
const aimSvg = document.getElementById('aimSvg');
const shooterEl = document.getElementById('shooter');
const previewEls = [
	document.getElementById('preview0'),
	document.getElementById('preview1'),
	document.getElementById('preview2')
];
// MODIFIÉ : Référence au nouveau bouton dans l'overlay
const replayBtnGameOver = document.getElementById('replayBtnGameOver');
const timerEl = document.getElementById('timer');
const shotCountEl = document.getElementById('shotCount');
const difficultyEl = document.getElementById('difficulty');
const themeEl = document.getElementById('theme');
const gameOverEl = document.getElementById('gameOver');
const boardWrap = document.getElementById('boardWrap');

/* ======== AIDE & THÈMES ======== */
const EMOJI = {'red':'😵‍💫','green':'🤯','blue':'🥶','yellow':'🤭','cyan':'🔵','orange':'🍊','purple':'🟣','white':'⚪','rainbow':'🌈'};
const COLOR_CLASSES = {'red':'c-red','green':'c-green','blue':'c-blue','yellow':'c-yellow','cyan':'c-cyan','orange':'c-orange','purple':'c-purple','white':'c-white','rainbow':'c-rainbow'};
const ALL_COLORS = ['red','green','blue','yellow','cyan','orange','purple','white'];
const THEMES = ['theme-1','theme-2','theme-3','theme-4','theme-5','theme-6','theme-7','theme-8','theme-9','theme-10'];

function randChoice(arr){ return arr[Math.floor(Math.random()*arr.length)]; }
function fmtTime(ms){ const s=Math.floor(ms/1000); return String(Math.floor(s/60)).padStart(2,'0')+':'+String(s%60).padStart(2,'0'); }

function colorSetForDifficulty(){
	const diff = difficultyEl.value;
	if(diff==='easy') return ALL_COLORS.slice(0, 3);
	if(diff==='normal') return ALL_COLORS.slice(0, 4);
	if(diff==='hard') return ALL_COLORS.slice(0, 5);
	if(diff==='master') return ALL_COLORS.slice(0, 6);
	return ALL_COLORS.slice(0, 5);
}

// Fonction pour définir le nombre de lignes initiales remplies
function initialRowsForDifficulty(){
	const diff = difficultyEl.value;
	if(diff==='easy') return 5;
	if(diff==='normal') return 6;
	if(diff==='hard') return 7;
	if(diff==='master') return 8;
	return 6;
}

function applyTheme(themeName) {
	document.body.classList.remove(...THEMES);
	if (themeName) {
		document.body.classList.add(themeName);
	}
}

/* ======== CONSTRUCTION DU PLATEAU ======== */
function buildTable(){
	boardBody.innerHTML='';
	for(let r=0;r<ROWS;r++){
		const tr=document.createElement('tr');
		for(let c=0;c<COLS;c++){
			const td=document.createElement('td');
			td.dataset.r=r; td.dataset.c=c;
			tr.appendChild(td);
		}
		boardBody.appendChild(tr);
	}
}

/** Gestion de l'effet d'explosion.*/
function renderBoard(clusterToExplode = []) {
	for (let r = 0; r < ROWS; r++) {
		for (let c = 0; c < COLS; c++) {
			const td = boardBody.rows[r].cells[c];
			td.innerHTML = '';
			td.classList.remove('cell-empty');

const val = board[r][c];
			if (!val) {
				td.classList.add('cell-empty');
				continue;
			}

const b = document.createElement('div');
			b.className = 'bubble ' + COLOR_CLASSES[val.color];
			b.style.width = b.style.height = '16px';
			b.innerHTML = '<span style="font-size:10px">' + EMOJI[val.color] + '</span>';

const isExploding = clusterToExplode.some(p => p.r === r && p.c === c);

if (isExploding) {
				b.classList.add('explosion');
				b.innerHTML = '<span style="font-size:10px">💥</span>';
			}

td.appendChild(b);
		}
	}
}

/* ======== FILE DU TIREUR ======== */
function refillQueue(){
	const colors = colorSetForDifficulty();
	while(shooterQueue.length<3) shooterQueue.push(randChoice(colors));
	updatePreview();
}

/** Gère la rotation du chargeur après un tir */
function rotateShooter() {
	shooterRotation = (shooterRotation + 120) % 360;
	shooterEl.style.transform = `rotate(${shooterRotation}deg)`;
}

previewEls.forEach((el,idx)=>el.addEventListener('click',()=>{selectedPreview=idx;updatePreview();}));

/* ======== VISÉE BIDIRECTIONNELLE ======== */
function drawAim(){
	const svg = aimSvg;
	const w = svg.clientWidth, h = svg.clientHeight;
	svg.innerHTML='';
	const shooterX = w/2;
	const shooterY = h - 20;
	const dx = aimX-shooterX, dy = aimY-shooterY;
	const angle = Math.atan2(dy,dx);
	const step=18;
	const dist=Math.hypot(dx,dy);
	if (dy > 0) return;

for(let d=30;d<Math.min(500,dist+200);d+=step){
		const x=shooterX+Math.cos(angle)*d;
		const y=shooterY+Math.sin(angle)*d;
		const c=document.createElementNS('http://www.w3.org/2000/svg','circle');
		c.setAttribute('cx',x); c.setAttribute('cy',y); c.setAttribute('r',3); c.setAttribute('fill','rgba(255,255,255,0.5)');
		svg.appendChild(c);
	}
	const ax=shooterX+Math.cos(angle)*Math.min(500,dist+20);
	const ay=shooterY+Math.sin(angle)*Math.min(500,dist+20);
	const g=document.createElementNS('http://www.w3.org/2000/svg','polygon');
	const size=14;
	const a1x=ax+Math.cos(angle)*size;
	const a1y=ay+Math.sin(angle)*size;
	const a2x=ax+Math.cos(angle+Math.PI*0.5)*(size*0.5);
	const a2y=ay+Math.sin(angle+Math.PI*0.5)*(size*0.5);
	const a3x=ax+Math.cos(angle-Math.PI*0.5)*(size*0.5);
	const a3y=ay+Math.sin(angle-Math.PI*0.5)*(size*0.5);
	g.setAttribute('points',`${a1x},${a1y} ${a2x},${a2y} ${a3x},${a3y}`);
	g.setAttribute('fill','rgba(255,255,255,0.9)');
	svg.appendChild(g);
}
function setAim(x,y){aimX=x; aimY=y; drawAim();}

/* ======== TIMER ET GRAVITÉ ======== */
function startTimer(){if(timerInterval) clearInterval(timerInterval); startTime=Date.now(); timerInterval=setInterval(()=>{timerEl.textContent=fmtTime(Date.now()-startTime);},250);}
function stopTimer(){if(timerInterval){clearInterval(timerInterval); timerInterval=null;}}

function startGravityTimer() {
	stopGravityTimer();
	const currentDiff = difficultyEl.value;

// fonction des bulles qui descendent mode (difficile, Maitre)
	// 60000 millisecondes = 1 minute - descendu à 50 secondes
	if (currentDiff === 'normal') {
	gravityInterval = setInterval(addNewRow, 50000);
	} else if (currentDiff === 'hard') {
	gravityInterval = setInterval(addNewRow, 40000);
	} else if (currentDiff === 'master') {
	gravityInterval = setInterval(addNewRow, 30000);
}

/* last version
		if (currentDiff === 'normal' || currentDiff === 'hard' || currentDiff === 'master') {
		// 60000 millisecondes = 1 minute - descendu à 50 secondes
		 gravityInterval = setInterval(addNewRow, 50000);
	} */
}

function stopGravityTimer() {
	if (gravityInterval) {
		clearInterval(gravityInterval);
		gravityInterval = null;
	}
}

/* ======== TIR ======== */
function shootSelected(){
	if(movingBall) return;
	if(shooterQueue.length===0) refillQueue();

const color=shooterQueue[selectedPreview];
	if (!color) return;

shooterQueue.splice(selectedPreview,1);
	rotateShooter();
	refillQueue(); updatePreview();

const overlayRect=overlay.getBoundingClientRect();
	const startX=overlayRect.width/2, startY=overlayRect.height - 20;
	let dx = aimX - startX;
	let dy = aimY - startY;

if (dx === 0 && dy === 0) {
		dy = -1;
	}

if (dy > 0) return;

const angle=Math.atan2(dy, dx);
	const speed = SHOOT_SPEED;
	const vx=Math.cos(angle)*speed, vy=Math.sin(angle)*speed;

const mv=document.createElement('div');
	mv.className='moving '+COLOR_CLASSES[color];
	mv.style.width=mv.style.height='16px';
	mv.style.left=startX+'px'; mv.style.top=startY+'px';
	mv.innerHTML='<span style="line-height:16px;font-size:10px">'+EMOJI[color]+'</span>';
	overlay.appendChild(mv);

movingBall={x:startX,y:startY,vx,vy,color,dom:mv};

// Compteur de coups
	shotCount++;
	shotCountEl.textContent = String(shotCount).padStart(2, '0');

if(!gameRunning) {
		startTimer();
		startGravityTimer();
	}
	gameRunning=true;
	requestAnimationFrame(updateMovingBall);
}

/* ======== LOGIQUE DE JEU (Snap et Gravité) ======== */

/** NOUVEAU: Ajoute une nouvelle ligne en haut et pousse toutes les autres vers le bas. */
function addNewRow() {
	// Étape 1 : Vérification Game Over AVANT la descente
	// On vérifie si la ligne la plus basse, (ROWS - 1), est occupée.
	// Si la ligne la plus basse (index 15) est pleine, la descente va causer la défaite.
	for (let c = 0; c < COLS; c++) {
		if (board[ROWS - 1][c]) { 
			gameOver();
			stopGravityTimer();
			return;
		}
	}

// Étape 2 : Décalage de toutes les lignes vers le bas
	for (let r = ROWS - 1; r > 0; r--) {
		board[r] = board[r - 1];
	}

// Étape 3 : Création de la nouvelle ligne (ligne 0)
	const colors = colorSetForDifficulty();
	const newRow = [];
	for (let c = 0; c < COLS; c++) {
		newRow.push({ color: randChoice(colors) });
	}
	board[0] = newRow;

// Étape 4 : Mise à jour de l'affichage
	renderBoard();
}

function findBubblesConnectedToCeiling() {
	const connected = new Set();
	const queue = [];

for (let c = 0; c < COLS; c++) {
		if (board[0][c]) {
			const key = `0,${c}`;
			if (!connected.has(key)) {
				connected.add(key);
				queue.push({ r: 0, c });
			}
		}
	}

let head = 0;
	while (head < queue.length) {
		const { r, c } = queue[head++];

for (const [dr, dc] of ADJACENT_DIRS) {
			const nr = r + dr;
			const nc = c + dc;
			const key = `${nr},${nc}`;

if (
				nr >= 0 && nr < ROWS && nc >= 0 && nc < COLS &&
				board[nr][nc] && 
				!connected.has(key)
			) {
				connected.add(key);
				queue.push({ r: nr, c: nc });
			}
		}
	}
	return connected;
}

function removeFloatingBubbles() {
	let bubblesRemoved = false;
	const connectedKeys = findBubblesConnectedToCeiling();

for (let r = 0; r < ROWS; r++) {
		for (let c = 0; c < COLS; c++) {
			if (board[r][c] && !connectedKeys.has(`${r},${c}`)) {
				board[r][c] = null;
				bubblesRemoved = true;
			}
		}
	}
	return bubblesRemoved;
}

/** Cherche la position d'ancrage la plus proche et valide. */
function findSnapPosition(x, y) {
	const ov = overlay.getBoundingClientRect();
	const cellW = ov.width / COLS;
	const cellH = ov.height / ROWS;

let targetCol = Math.floor(x / cellW);
	let targetRow = Math.floor(y / cellH);

targetCol = Math.max(0, Math.min(COLS - 1, targetCol));
	targetRow = Math.max(0, Math.min(ROWS - 1, targetRow));

const pointsToCheck = [];
	pointsToCheck.push({ r: targetRow, c: targetCol });
	for (const [dr, dc] of ADJACENT_DIRS) {
		pointsToCheck.push({ r: targetRow + dr, c: targetCol + dc });
	}

let bestSnap = null;
	let minDistSq = Infinity;

for (const { r, c } of pointsToCheck) {
		if (r < 0 || r >= ROWS || c < 0 || c >= COLS) continue;

if (!board[r][c]) { 
			let isAttached = r === 0;

if (!isAttached) { 
				for (const [dr, dc] of ADJACENT_DIRS) {
					const nr = r + dr;
					const nc = c + dc;

if (nr >= 0 && nr < ROWS && nc >= 0 && nc < COLS && board[nr][nc]) {
						isAttached = true;
						break;
					}
				}
			}

if (isAttached) { 
				const snapX = c * cellW + cellW / 2;
				const snapY = r * cellH + cellH / 2;
				const dx = x - snapX;
				const dy = y - snapY;
				const distSq = dx * dx + dy * dy;

if (distSq < minDistSq) { 
					minDistSq = distSq;
					bestSnap = { r, c };
				}
			}
		}
	}

// S'assurer que la bulle ne s'ancre pas sur une ligne qui est en dehors de la zone visuellement jouable.
	// ROWS = 16. La ligne la plus basse est 15.
	if (bestSnap && bestSnap.r >= ROWS) {
		return null;
	}

return bestSnap;
}

function getCluster(sr,sc,color){
	const seen=new Set();
	const stack=[{r:sr,c:sc}];
	const clusterPoints = [];

while(stack.length){
		const p=stack.pop();
		const key=p.r+','+p.c;
		if(seen.has(key)) continue;
		seen.add(key);

if(!board[p.r] || !board[p.r][p.c] || board[p.r][p.c].color !== color) continue;

clusterPoints.push(p);

ADJACENT_DIRS.forEach(d=>{
			const nr=p.r+d[0], nc=p.c+d[1];
			if(nr>=0 && nr<ROWS && nc>=0 && nc<COLS && !seen.has(nr+','+nc)) {
				stack.push({r:nr,c:nc});
			}
		});
	}
	return clusterPoints;
}

/** Logique post-ancrage avec effet d'explosion. */
function stopMovingBallAt(r, c, color) { 
	if (r < 0 || r >= ROWS || c < 0 || c >= COLS) return;

board[r][c] = { color };
	renderBoard();

const matchedCluster = getCluster(r, c, color);

if (matchedCluster.length >= 3) {
		
		setTimeout(() => {
			renderBoard(matchedCluster);
		}, 50);

setTimeout(() => {
			matchedCluster.forEach(p => board[p.r][p.c] = null);

if (matchedCluster.length >= 5) {
				shooterQueue.unshift('rainbow');
				if(shooterQueue.length > 3) shooterQueue.pop();
				updatePreview();
			}

removeFloatingBubbles();
			renderBoard();
			checkGameOver(); // Vérification de Game Over après l'action
		}, 350);

} else {
		checkGameOver(); // Vérification de Game Over immédiatement
	}
}

setTimeout(() => {
		renderBoard(clusterToExplode);
	}, 50);

setTimeout(() => {
		clusterToExplode.forEach(p => board[p.r][p.c] = null);
		removeFloatingBubbles();
		renderBoard();
		checkGameOver();
	}, 350);
}

/** Vérifie la condition de Game Over. */
function checkGameOver(){
	// La ligne de Game Over est la ligne (ROWS - 1), la dernière visible du tableau.
	// Si la ligne ROWS - 1 (index 15) contient une bulle, c'est Game Over.
	const gameOverRow = ROWS - 1;

for(let c=0;c<COLS;c++){
		if (board[gameOverRow][c]) { 
			gameOver(); return;
		}
	}

// Vérification de victoire (plus de bulles)
	let hasBubbles = false;
	for (let r = 0; r < ROWS; r++) {
		for (let c = 0; c < COLS; c++) {
			if (board[r][c]) {
				hasBubbles = true;
				break;
			}
		}
		if (hasBubbles) break;
	}
	if (!hasBubbles && gameRunning) {
		gameOver(true);
	}
}

function gameOver(isWin = false){
	gameRunning=false;
	stopTimer();
	stopGravityTimer();
	// MODIFIÉ : Utilisation du nouvel ID pour le texte
	document.getElementById('gameOverText').textContent = isWin ? 'VICTOIRE !' : 'GAME OVER';
	gameOverEl.style.display='flex';
}

/* ======== BOUCLE DE MOUVEMENT ======== */
function updateMovingBall(){
	if(!movingBall) return;

// 1. Mouvement 
	movingBall.x+=movingBall.vx * 0.80;
	movingBall.y+=movingBall.vy * 0.80;
	const ov=overlay.getBoundingClientRect();
	const radius = 8;
	const collisionDistSq = (radius * 2) * (radius * 2);

// 2. Collision murale
	if(movingBall.x < radius){movingBall.x=radius; movingBall.vx*=-1;}
	if(movingBall.x > ov.width - radius){movingBall.x=ov.width - radius; movingBall.vx*=-1;}

let hitBubble = false;

// 3. Collision avec le plafond
	if(movingBall.y < radius) { 
		hitBubble = true;
	} else {
		// Collision Bulle-à-bulle (vérification basée sur la distance)
		const cellW = ov.width / COLS;
		const cellH = ov.height / ROWS;

for (let r = 0; r < ROWS; r++) {
			for (let c = 0; c < COLS; c++) {
				if (board[r]?.[c]) {
					const staticX = c * cellW + cellW / 2;
					const staticY = r * cellH + cellH / 2;

const dx = movingBall.x - staticX;
					const dy = movingBall.y - staticY;
					const distSq = dx * dx + dy * dy;

if (distSq < collisionDistSq) { 
						hitBubble = true;
						break;
					}
				}
			}
			if (hitBubble) break;
		}
	}

movingBall.dom.style.left=movingBall.x+'px';
	movingBall.dom.style.top=movingBall.y+'px';

if(hitBubble){
		const shotColor = movingBall.color;
		const finalX = movingBall.x;
		const finalY = movingBall.y;

movingBall.dom.remove();
		movingBall = null;

const snapPos = findSnapPosition(finalX, finalY);

if (snapPos) {
			// Logique arc-en-ciel
			if (shotColor === 'rainbow') {
				const nearest = findNearestOccupied(snapPos.r, snapPos.c);
				const targetColor = nearest ? nearest.color : null;
				if (targetColor && targetColor !== 'rainbow') {
					rainbowResolve(targetColor);
					return;
				}
			}
			stopMovingBallAt(snapPos.r, snapPos.c, shotColor);
		} else {
			// Si la bulle n'arrive pas à s'ancrer, elle n'est pas ajoutée.
			checkGameOver();
		}
	} else requestAnimationFrame(updateMovingBall);
}

/* ======== CONTROLES ======== */
const getCoords = (e) => {
	const rect = overlay.getBoundingClientRect();
	const t = e.touches ? e.touches[0] : e;
	return { 
		x: t.clientX - rect.left, 
		y: t.clientY - rect.top 
	};
};

// MODIFIÉ : Utilisation du nouveau bouton
replayBtnGameOver.addEventListener('click',resetGame);
difficultyEl.addEventListener('change',()=>{resetGame();});

themeEl.addEventListener('change',e=>{
	applyTheme(e.target.value);
});

// Souris
	boardWrap.addEventListener('mousemove',e=>{if(isDragging){const {x, y} = getCoords(e);setAim(x,y);}});
	boardWrap.addEventListener('mousedown',e=>{isDragging=true;const {x, y} = getCoords(e);setAim(x,y);});
	boardWrap.addEventListener('mouseup',e=>{if(isDragging){shootSelected();
		isDragging=false; aimSvg.innerHTML='';}});
	boardWrap.addEventListener('mouseleave',()=>{aimSvg.innerHTML='';
		isDragging=false;});

// Tactile
boardWrap.addEventListener('touchstart',e=>{
	e.preventDefault();
	isDragging=true;
	const {x, y} = getCoords(e);
	setAim(x, y);
}, { passive: false });

boardWrap.addEventListener('touchmove',e=>{
	e.preventDefault();
	if(isDragging){
		const {x, y} = getCoords(e);
		setAim(x, y);
	}
}, { passive: false });

boardWrap.addEventListener('touchend',e=>{
	if(isDragging){
		shootSelected();
		isDragging=false;
		aimSvg.innerHTML='';
	}
});

/* ======== RESET ======== */
function resetGame(){
	if(movingBall){movingBall.dom.remove(); movingBall=null;}
	shooterQueue=[]; selectedPreview=1; updatePreview();
	shooterRotation = 0;
	shooterEl.style.transform = `rotate(0deg)`;
	initBoard(); refillQueue();
	startTime=null; stopTimer(); timerEl.textContent='00:00';
	stopGravityTimer();
	shotCount = 0;
	shotCountEl.textContent = '00';
	gameOverEl.style.display='none'; gameRunning=false;
}

/* ======== INITIALISATION ======== */
function start(){
	buildTable();
	initBoard();
	refillQueue(); refillQueue(); updatePreview();

const initialTheme = 'theme-2';
	themeEl.value = initialTheme;
	applyTheme(initialTheme);

const ro=new ResizeObserver(()=>{
		aimSvg.setAttribute('width',boardWrap.offsetWidth);
		aimSvg.setAttribute('height',boardWrap.offsetHeight);
		drawAim();
	});
	ro.observe(boardWrap);
}
start();

window.resetGame=resetGame;
</script>
</html>