<!DOCTYPE html>
<html lang="so">
<head>
<meta charset="UTF-8">
<title>Ciyaarta Godadka 5x5 - Waab iyo Berber Dhac</title>
<style>
body { font-family: Arial; text-align:center; margin-top:20px;}
#board { display:grid; grid-template-columns:repeat(5,80px); gap:10px; justify-content:center;}
.cell{ width:80px; height:80px; border:2px solid black; border-radius:50%; cursor:pointer;}
.red{background:red;}
.blue{background:blue;}
.selected{outline:4px solid yellow;}
.move{background:#90ee90;}
#berberText{
position:fixed; top:40%; left:50%; transform:translate(-50%,-50%);
font-size:80px; font-weight:bold; color:orange; display:none;
}
#winnerScreen{
position:fixed; top:0; left:0; width:100%; height:100%;
background:white; display:none; align-items:center; justify-content:center;
flex-direction:column; font-size:50px; font-weight:bold;
}
button{font-size:20px; padding:10px 20px; margin:10px;}
</style>
</head>
<body>
<h2>Ciyaarta Godadka 5x5</h2>
<p id="status"></p>
<div id="board"></div>
<div id="berberText">BERBER DHAC!</div>
<div id="winnerScreen">
<div id="winnerText"></div>
<div style="font-size:25px;margin-top:20px;">Dib ma u bilaabaysaa?</div>
<div>
<button onclick="restartGame()">Haa</button>
<button onclick="stopGame()">Maya</button>
</div>
</div>
<script>
const SIZE=25, WIDTH=5;
let board=new Array(SIZE).fill(null);
let phase="placing";
let currentPlayer="red";
let redPlaced=0, bluePlaced=0, placeCount=0;
let selected=null, moves=[];
const boardDiv=document.getElementById("board");
function draw(){
boardDiv.innerHTML="";
for(let i=0;i<SIZE;i++){
let cell=document.createElement("div");
cell.className="cell";
if(board[i]=="red") cell.classList.add("red");
if(board[i]=="blue") cell.classList.add("blue");
if(i===selected) cell.classList.add("selected");
if(moves.includes(i)) cell.classList.add("move");
cell.onclick=()=>clickCell(i);
boardDiv.appendChild(cell);
}
document.getElementById("status").innerText =
phase=="placing" ? `Dhigista: ${currentPlayer} (${placeCount}/2)` : `Turn: ${currentPlayer}`;
}
function clickCell(i){
if(phase=="placing") placePiece(i);
else movePiece(i);
draw();
}
function placePiece(i){
if(board[i]!=null) return;
board[i]=currentPlayer;
placeCount++;
if(currentPlayer=="red") redPlaced++; else bluePlaced++;
if(placeCount==2){ placeCount=0; switchPlayer(); }
if(redPlaced>=12 && bluePlaced>=12){ phase="move"; currentPlayer="red"; checkNoMoveLose(); }
}
function movePiece(i){
if(board[i]==currentPlayer){
selected=i;
moves=getMoves(i);
return;
}
if(selected!=null && moves.includes(i)){
let old=selected;
board[i]=currentPlayer;
board[old]=null;
// Nusqaan / berber dhac
let captured=capture(i);
// Hubi waab
if(isWaab(currentPlayer)){
let leaveWaab = confirm("WAAB AYAAD GASHAY. BERBER DHAC. MA KA SOO BAXAYSAA WAABKA?");
if(!leaveWaab){
alert("Ciyaarta waa dib loo bilaabayaa!");
restartGame();
return;
}
// Haddii HAA uu doorto, ciyaarta sii soconaysaa
}
// Haddii fusad uu jiro, ciyaaryahanka hadda wuu sii wadi karaa
if(captured && getMoves(i).length>0){
selected=i;
moves=getMoves(i);
showBerber();
return;
}
selected=null;
moves=[];
checkWinner();
switchPlayer();
checkNoMoveLose();
}
}
function getMoves(pos){
let list=[];
let row=Math.floor(pos/WIDTH), col=pos%WIDTH;
let dirs=[[1,0],[-1,0],[0,1],[0,-1]];
for(let [dr,dc] of dirs){
let r=row+dr, c=col+dc;
if(r>=0 && r<WIDTH && c>=0 && c<WIDTH){
let idx=r*WIDTH+c;
if(board[idx]==null) list.push(idx);
}
}
return list;
}
// Hubi haddii ciyaaryahanka uu hal boos uun leeyahay
function isWaab(player){
let movableCount=0;
for(let i=0;i<SIZE;i++){
if(board[i]==player) movableCount += getMoves(i).length;
}
return movableCount===1;
}
function capture(pos){
let did=false;
let row=Math.floor(pos/WIDTH), col=pos%WIDTH;
let dirs=[[1,0],[-1,0],[0,1],[0,-1]];
for(let [dr,dc] of dirs){
let r1=row+dr, c1=col+dc, r2=row+2*dr, c2=col+2*dc;
if(r2>=0 && r2<WIDTH && c2>=0 && c2<WIDTH){
let mid=r1*WIDTH+c1, end=r2*WIDTH+c2;
if(board[mid] && board[mid]!=currentPlayer && board[end]==currentPlayer){
board[mid]=null;
did=true;
}
}
}
if(did) showBerber();
return did;
}
function showBerber(){
let text=document.getElementById("berberText");
text.style.display="block";
setTimeout(()=>{ text.style.display="none"; },1500);
}
function countPieces(player){ return board.filter(c=>c==player).length; }
function checkWinner(){
if(countPieces("red")<=1) showWinner("Blue");
if(countPieces("blue")<=1) showWinner("Red");
}
function hasAnyMove(player){
for(let i=0;i<SIZE;i++){
if(board[i]==player && getMoves(i).length>0) return true;
}
return false;
}
function checkNoMoveLose(){
if(!hasAnyMove(currentPlayer)){
let winner = currentPlayer=="red"?"Blue":"Red";
showWinner(winner);
}
}
function showWinner(player){
document.getElementById("winnerText").innerText = "đ "+player.toUpperCase()+" AYAA GUULEYSTAY";
document.getElementById("winnerScreen").style.display="flex";
}
function restartGame(){ location.reload(); }
function stopGame(){ document.getElementById("winnerText").innerText="Ciyaarta waa la joojiyay"; }
function switchPlayer(){ currentPlayer = currentPlayer=="red"?"blue":"red"; }
draw();
</script>
</body>
</html>
