can technically discard tiles
This commit is contained in:
Didictateur
parent
655e1e5c1c
commit
39c1cc7d69
2 changed files with 144 additions and 8 deletions
|
|
@ -20,11 +20,12 @@ class Hand {
|
|||
}
|
||||
|
||||
discard(k) {
|
||||
if (k = this.tiles.length) {
|
||||
tile = this.drawn;
|
||||
if (k === this.tiles.length) {
|
||||
const tile = this.drawn;
|
||||
this.drawn = null;
|
||||
return tile;
|
||||
} else {
|
||||
tile = this.tiles[k];
|
||||
const tile = this.tiles[k];
|
||||
this.tiles.splice(k, 1);
|
||||
return tile;
|
||||
}
|
||||
|
|
@ -39,7 +40,9 @@ class Hand {
|
|||
}
|
||||
|
||||
flatten() {
|
||||
if (this.drawn) {
|
||||
this.tiles.push(this.drawn);
|
||||
}
|
||||
this.drawn = null;
|
||||
this.sort();
|
||||
}
|
||||
|
|
@ -158,10 +161,12 @@ class Game {
|
|||
}
|
||||
|
||||
discard(player, k) {
|
||||
if (player === this.turn) {
|
||||
const tile = this.hands[player].discard(k);
|
||||
this.discards[player].add(tile);
|
||||
this.hands[player].flatten();
|
||||
}
|
||||
}
|
||||
|
||||
chii(player, tiles, dir) {
|
||||
const hand = this.hands[player];
|
||||
|
|
@ -176,6 +181,13 @@ class Game {
|
|||
console.assert(dir == 1);
|
||||
this.hands[player].makeGroup(tiles, this.discards[player].beingStollen(), dir);
|
||||
}
|
||||
|
||||
botPlay() {
|
||||
this.draw(this.turn);
|
||||
const hand = this.hands[this.turn];
|
||||
const randomIndex = Math.floor(Math.random() * (hand.tiles.length + (hand.drawn ? 1 : 0)));
|
||||
this.discard(this.turn, randomIndex);
|
||||
}
|
||||
}
|
||||
|
||||
export { Discard, Draw, Game, Group, Hand };
|
||||
|
|
|
|||
|
|
@ -136,6 +136,70 @@
|
|||
transition: transform 0.2s;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#discard-0 {
|
||||
position: absolute;
|
||||
transform: translate(-50%, 50%);
|
||||
bottom: 25%;
|
||||
left: 50%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 2px;
|
||||
flex-wrap: wrap;
|
||||
width: 400px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#discard-1 {
|
||||
position: absolute;
|
||||
transform: translate(-50%, -400%) rotate(-90deg) translate(0%, 450%);
|
||||
bottom: -25%;
|
||||
left: 50%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 2px;
|
||||
flex-wrap: wrap;
|
||||
width: 400px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#discard-2 {
|
||||
position: absolute;
|
||||
transform: translate(-50%, -400%) rotate(180deg) translate(0%, 450%);
|
||||
bottom: -25%;
|
||||
left: 50%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 2px;
|
||||
flex-wrap: wrap;
|
||||
width: 400px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#discard-3 {
|
||||
position: absolute;
|
||||
transform: translate(-50%, -400%) rotate(90deg) translate(0%, 450%);
|
||||
bottom: -25%;
|
||||
left: 50%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 2px;
|
||||
flex-wrap: wrap;
|
||||
width: 400px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#discard-0 div,
|
||||
#discard-1 div,
|
||||
#discard-2 div,
|
||||
#discard-3 div {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.discard-tile svg {
|
||||
height: 50px;
|
||||
width: 35px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -151,8 +215,11 @@
|
|||
<div id="hand-0"></div>
|
||||
<div id="discard-0"></div>
|
||||
<div id="hand-1"></div>
|
||||
<div id="discard-1"></div>
|
||||
<div id="hand-2"></div>
|
||||
<div id="discard-2"></div>
|
||||
<div id="hand-3"></div>
|
||||
<div id="discard-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -197,12 +264,29 @@
|
|||
const handTiles = document.createElement('div');
|
||||
handTiles.className = 'hand-tiles';
|
||||
|
||||
for (const tile of game.hands[i].tiles) {
|
||||
for (let k = 0; k < game.hands[i].tiles.length; k++) {
|
||||
const tile = game.hands[i].tiles[k];
|
||||
const tileDiv = document.createElement('div');
|
||||
// Ajouter la classe 'player-tile' uniquement pour le joueur
|
||||
if (i === 0) {
|
||||
tileDiv.className = 'player-tile';
|
||||
tileDiv.innerHTML = tile.getSVG();
|
||||
tileDiv.style.cursor = 'pointer';
|
||||
const handleClick = (() => {
|
||||
const tileToDiscard = tile;
|
||||
return () => {
|
||||
// Trouver l'index actuel de la tuile
|
||||
const currentIdx = game.hands[0].tiles.findIndex(t => t === tileToDiscard);
|
||||
if (currentIdx !== -1) {
|
||||
game.discard(0, currentIdx);
|
||||
game.nextTurn();
|
||||
renderHands();
|
||||
renderDiscards();
|
||||
playBotsSequentially();
|
||||
}
|
||||
};
|
||||
})();
|
||||
tileDiv.addEventListener('click', handleClick);
|
||||
} else {
|
||||
// Bots : afficher le dos
|
||||
tileDiv.innerHTML = `<svg class="tile tile-back" viewBox="0 0 310 410" height="82" width="60">
|
||||
|
|
@ -221,6 +305,19 @@
|
|||
if (i === 0) {
|
||||
drawDiv.classList.add('player-tile');
|
||||
drawDiv.innerHTML = game.hands[i].drawn.getSVG();
|
||||
drawDiv.style.cursor = 'pointer';
|
||||
const drawnTile = game.hands[i].drawn;
|
||||
const handleDrawnClick = (() => {
|
||||
return () => {
|
||||
// Défausser la tuile piochée (index === tiles.length)
|
||||
game.discard(0, game.hands[0].tiles.length);
|
||||
game.nextTurn();
|
||||
renderHands();
|
||||
renderDiscards();
|
||||
playBotsSequentially();
|
||||
};
|
||||
})();
|
||||
drawDiv.addEventListener('click', handleDrawnClick);
|
||||
} else {
|
||||
drawDiv.innerHTML = `<svg class="tile tile-back" viewBox="0 0 310 410" height="82" width="60">
|
||||
<image href="/img/Regular/Gray.svg" x="10" y="10" height="410" width="310"/>
|
||||
|
|
@ -234,6 +331,33 @@
|
|||
}
|
||||
}
|
||||
|
||||
function renderDiscards() {
|
||||
for (let i = 0; i < 4; i++) {
|
||||
const discardDiv = document.getElementById(`discard-${i}`);
|
||||
discardDiv.innerHTML = '';
|
||||
for (const tile of game.discards[i].tiles) {
|
||||
const tileDiv = document.createElement('div');
|
||||
tileDiv.className = 'discard-tile';
|
||||
tileDiv.innerHTML = tile.getSVG();
|
||||
discardDiv.appendChild(tileDiv);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function playBotsSequentially() {
|
||||
// Les bots jouent après le joueur humain
|
||||
while (game.turn !== 0) {
|
||||
await new Promise(resolve => setTimeout(resolve, 800));
|
||||
game.botPlay();
|
||||
game.nextTurn();
|
||||
renderHands();
|
||||
renderDiscards();
|
||||
}
|
||||
game.draw(0);
|
||||
renderHands();
|
||||
renderDiscards();
|
||||
}
|
||||
|
||||
renderHands();
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue