Adrien/Riichi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

pluie de tuile

Browse source
This commit is contained in:
Didictateur 2026-02-18 16:20:30 +01:00
parent cdcf19e382
commit 8ab1f558e1
3 changed files with 71 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
backend/src/api.py
View file

@ -30,11 +30,12 @@ def get_tile(tile_id):
return jsonify({'error': 'Tuile non trouvée'}), 404
tile = tiles[tile_id]
svg = f'<svg viewBox="0 0 500 700" width="100" height="140">{tile.get_img()}</svg>'
return jsonify({
'id': tile.id,
'family': str(tile.family),
'value': str(tile.value),
'svg': tile.get_img()
'svg': svg
})
# ============== POST ================

10
backend/src/game/tile.py
View file

@ -52,15 +52,13 @@ class Tile:
def get_img(self):
if self.img == None:
shadow = self._load_svg(self.img_shadow, x=4, y=4)
shadow = self._load_svg(self.img_shadow, x=10, y=10)
front = self._load_svg(self.img_front, x=0, y=0)
symbol = self._load_svg(self.img_symbol, x=12, y=20, scale=0.9)
self.img = f"""<g class="tile tile-{self.id}" data-tile-id="{self.id}">
{shadow}
{front}
{symbol}
</g>"""
ratio = 400 / 300
width = 60
self.img = f"""<svg class="tile tile-{self.id}" data-tile-id="{self.id}" viewBox="0 0 310 410" height="{ratio * width}" width="{width}">{shadow}{front}{symbol}</svg>"""
return self.img
@staticmethod

65
index.html
View file

@ -3,9 +3,46 @@
<head>
<meta charset="UTF-8">
<title>Tuto Riichi</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background: #f0f0f0;
}
#menu {
position: relative;
z-index: 10;
}
#tile-rain {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.falling-tile {
position: absolute;
top: -100px;
animation: fall linear forwards;
}
@keyframes fall {
to {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
}
</style>
</head>
<body>
<div id="menu"></div>
<div id="tile-container"></div>
<div id="tile-rain"></div>
<script>
// Charger le menu
@ -13,6 +50,34 @@
.then(r => r.text())
.then(html => document.getElementById('menu').innerHTML = html);
let allTiles = [];
// Récupérer les tuiles
fetch('http://localhost:5000/api/tiles')
.then(r => r.json())
.then(data => {
allTiles = data.tiles;
// Lancer la pluie de tuiles
startTileRain();
});
function startTileRain() {
const container = document.getElementById('tile-rain');
setInterval(() => {
const randomTile = allTiles[Math.floor(Math.random() * allTiles.length)];
const tileElem = document.createElement('div');
tileElem.className = 'falling-tile';
tileElem.innerHTML = randomTile.svg;
tileElem.style.left = Math.random() * window.innerWidth + 'px';
const duration = 3 + Math.random() * 2;
tileElem.style.animationDuration = duration + 's';
container.appendChild(tileElem);
setTimeout(() => tileElem.remove(), duration * 1000);
}, 300);
}
</script>
</body>
</html>