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 return jsonify({'error': 'Tuile non trouvée'}), 404
tile = tiles[tile_id] tile = tiles[tile_id]
svg = f'<svg viewBox="0 0 500 700" width="100" height="140">{tile.get_img()}</svg>'
return jsonify({ return jsonify({
'id': tile.id, 'id': tile.id,
'family': str(tile.family), 'family': str(tile.family),
'value': str(tile.value), 'value': str(tile.value),
'svg': tile.get_img() 'svg': svg
}) })
# ============== POST ================ # ============== POST ================

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

@ -52,15 +52,13 @@ class Tile:
def get_img(self): def get_img(self):
if self.img == None: 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) 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) 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}"> ratio = 400 / 300
{shadow} width = 60
{front} 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>"""
{symbol}
</g>"""
return self.img return self.img
@staticmethod @staticmethod

65
index.html
View file

@ -3,9 +3,46 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Tuto Riichi</title> <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> </head>
<body> <body>
<div id="menu"></div> <div id="menu"></div>
<div id="tile-container"></div>
<div id="tile-rain"></div>
<script> <script>
// Charger le menu // Charger le menu
@ -13,6 +50,34 @@
.then(r => r.text()) .then(r => r.text())
.then(html => document.getElementById('menu').innerHTML = html); .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> </script>
</body> </body>
</html> </html>