Whykioh/main-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sdfgn

Browse Source
This commit is contained in:
Noah CIBOT NOËL
2026-03-19 14:26:52 +01:00
parent 54f754aa8a
commit 80e5a0f17d
1 changed files with 109 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files
poker-paf/Css/Game.css
+109 -208
View File
@@ -1,288 +1,189 @@
/* --- CONFIGURATION DES COULEURS & VARIABLES --- */ /* --- CONFIGURATION & VARIABLES --- */
:root { :root {
--table-green: radial-gradient(circle, #277d46 0%, #1a5e33 100%); --table-green: radial-gradient(circle, #277d46 0%, #1a5e33 100%);
--poker-border: #2c1b18; /* Marron cuir très sombre */ --poker-border: #2c1b18;
--gold: #d4af37; --gold: #d4af37;
--gold-light: #f9e27d; --dark-bg: #0a0a0a;
--dark-bg: #0f0f0f; --panel-bg: #151515;
--panel-bg: #1a1a1a;
--white: #ffffff; --white: #ffffff;
--shadow: 0 10px 30px rgba(0,0,0,0.8); --shadow: 0 10px 30px rgba(0,0,0,0.8);
} }
/* --- RESET & BASE --- */ /* --- STRUCTURE PRINCIPALE --- */
body { body {
background-color: var(--dark-bg); background-color: var(--dark-bg);
background-image: radial-gradient(circle at center, #1a1a1a 0%, #0a0a0a 100%);
color: var(--white); color: var(--white);
font-family: 'Segoe UI', Roboto, sans-serif; font-family: 'Segoe UI', sans-serif;
margin: 0; margin: 0;
height: 100vh; height: 100vh;
display: flex; display: flex;
flex-direction: column;
overflow: hidden; overflow: hidden;
} }
/* --- STATS BAR (TOP) --- */ .game-container {
.stats-bar {
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(10px);
padding: 12px 25px;
display: flex; display: flex;
justify-content: space-between; width: 100%;
align-items: center; height: 100%;
border-bottom: 1px solid rgba(212, 175, 55, 0.3);
z-index: 100;
} }
/* --- TABLE DE JEU --- */ /* --- TABLE DE JEU (GAUCHE) --- */
.table-container { .table-container {
flex-grow: 1; flex: 1; /* Prend tout l'espace restant */
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
perspective: 1000px; /* Petit effet de profondeur */ padding: 20px;
padding: 40px; background: radial-gradient(circle at center, #1a1a1a 0%, #050505 100%);
} }
.poker-table { .poker-table {
width: 900px; width: 800px;
height: 450px; height: 400px;
background: var(--table-green); background: var(--table-green);
border: 18px solid var(--poker-border); border: 15px solid var(--poker-border);
border-radius: 250px; border-radius: 200px;
position: relative; position: relative;
/* Ombre interne pour l'effet rebords et ombre externe pour la profondeur */ box-shadow: inset 0 0 50px rgba(0,0,0,0.7), 0 20px 40px rgba(0,0,0,0.8);
box-shadow:
inset 0 0 60px rgba(0,0,0,0.7),
0 25px 50px rgba(0,0,0,0.9),
0 0 0 4px #3d2b27;
} }
/* Ligne blanche de démarcation sur la table */ /* --- PANNEAU D'ACTION (DROITE) --- */
.poker-table::after {
content: '';
position: absolute;
top: 25px; left: 25px; right: 25px; bottom: 25px;
border: 2px solid rgba(255,255,255,0.1);
border-radius: 230px;
pointer-events: none;
}
/* --- ZONE CENTRALE (POT) --- */
.pot-area {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 2;
}
.total-pot {
font-size: 3.5rem;
font-weight: 900;
color: var(--white);
text-shadow: 0 4px 10px rgba(0,0,0,0.5);
letter-spacing: -1px;
}
.total-pot::before {
content: 'POT: ';
font-size: 0.9rem;
display: block;
color: var(--gold);
letter-spacing: 2px;
}
.current-bet-display {
font-size: 1rem;
text-transform: uppercase;
color: rgba(255,255,255,0.6);
margin-top: -5px;
}
/* --- JOUEURS --- */
.player-slot {
position: absolute;
width: 150px;
z-index: 10;
transition: transform 0.3s ease;
}
.player-info {
background: linear-gradient(145deg, #1e1e1e, #111);
border: 2px solid #333;
border-radius: 15px;
padding: 10px;
text-align: center;
box-shadow: var(--shadow);
}
/* Joueur actif : Effet brillant or */
.player-info.active {
border-color: var(--gold);
box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
transform: scale(1.08);
background: linear-gradient(145deg, #2a2a2a, #111);
}
.player-name {
display: block;
color: var(--gold);
font-weight: 700;
font-size: 0.9rem;
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.player-money {
font-size: 1.2rem;
font-weight: bold;
color: #fff;
}
.player-bet {
font-size: 0.8rem;
color: #888;
background: rgba(0,0,0,0.3);
border-radius: 20px;
padding: 2px 8px;
display: inline-block;
margin-top: 5px;
}
/* Dealer Badge */
.dealer-badge {
position: absolute;
top: -12px;
right: -12px;
background: #fff;
color: #000;
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
box-shadow: 0 2px 5px rgba(0,0,0,0.5);
border: 2px solid var(--poker-border);
}
/* --- POSITIONNEMENT DES SLOTS (AUTO-ADAPTATIF) --- */
.slot-0 { top: -75px; left: 50%; transform: translateX(-50%); }
.slot-1 { top: 10%; right: -130px; }
.slot-2 { top: 50%; right: -160px; transform: translateY(-50%); }
.slot-3 { bottom: 10%; right: -130px; }
.slot-4 { bottom: -75px; left: 50%; transform: translateX(-50%); }
.slot-5 { bottom: 10%; left: -130px; }
.slot-6 { top: 50%; left: -160px; transform: translateY(-50%); }
.slot-7 { top: 10%; left: -130px; }
/* --- PANNEAU D'ACTION --- */
.action-panel { .action-panel {
width: 300px;
background: var(--panel-bg); background: var(--panel-bg);
border-top: 2px solid var(--gold); border-left: 2px solid #222;
padding: 25px; padding: 30px 20px;
box-shadow: 0 -10px 30px rgba(0,0,0,0.5); display: flex;
flex-direction: column;
justify-content: center;
box-shadow: -10px 0 30px rgba(0,0,0,0.5);
z-index: 100;
} }
.turn-info { .turn-info {
text-align: center; text-align: center;
margin-bottom: 20px; margin-bottom: 30px;
font-size: 1.1rem; font-size: 1.2rem;
border-bottom: 1px solid #333;
padding-bottom: 20px;
} }
.action-buttons { .action-buttons {
display: flex; display: flex;
justify-content: center; flex-direction: column; /* Boutons empilés à droite */
gap: 15px; gap: 15px;
align-items: center;
} }
/* Boutons de base */ /* --- BOUTONS --- */
.btn { .btn {
padding: 14px 28px; width: 100%;
border-radius: 10px; padding: 16px;
border-radius: 8px;
border: none; border: none;
font-weight: 800; font-weight: 800;
cursor: pointer; cursor: pointer;
text-transform: uppercase; text-transform: uppercase;
transition: all 0.2s; transition: 0.2s;
font-size: 0.9rem;
} }
.btn-fold { background: #333; color: #999; } .btn-fold { background: #2a2a2a; color: #777; }
.btn-fold:hover { background: #444; color: #fff; } .btn-fold:hover { background: #333; color: #fff; }
/* Suivre en Blanc */
.btn-call { .btn-call {
background: transparent; background: #ffffff;
color: #fff; color: #000;
border: 2px solid var(--gold); box-shadow: 0 4px 10px rgba(255,255,255,0.2);
} }
.btn-call:hover { background: var(--gold); color: #000; } .btn-call:hover { background: #eeeeee; transform: scale(1.02); }
.btn-allin { .btn-allin {
background: linear-gradient(45deg, #8b0000, #e60000); background: #8b0000;
color: white; color: white;
box-shadow: 0 4px 15px rgba(230, 0, 0, 0.3);
} }
.btn-allin:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(230, 0, 0, 0.5); } .btn-allin:hover { background: #b00; }
/* Groupe Relance Spécial */ .btn-back {
text-align: center;
text-decoration: none;
color: #555;
font-size: 0.9rem;
margin-top: 20px;
}
/* Relance */
.raise-group { .raise-group {
display: flex; display: flex;
background: #000;
border: 2px solid var(--gold); border: 2px solid var(--gold);
border-radius: 10px; border-radius: 8px;
overflow: hidden; overflow: hidden;
} }
#raise-amount { #raise-amount {
width: 90px; flex: 1;
background: transparent; background: #000;
border: none; border: none;
color: white; color: white;
padding: 10px; padding: 12px;
text-align: center; text-align: center;
font-weight: bold; font-size: 1.1rem;
outline: none;
} }
.btn-validate { .btn-validate {
background: var(--gold); background: var(--gold);
border: none; border: none;
padding: 0 20px; padding: 0 20px;
color: #000;
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
} }
/* Boutons utilitaires du haut */ /* --- EFFETS JOUEURS COUCHÉS (BLUR / PIXEL) --- */
.btn-spaction, .btn-back, .btn-money { /* Effet de base : Flou */
background: rgba(255,255,255,0.05); .blur-effect, .All-in-Blur {
border: 1px solid rgba(212, 175, 55, 0.5); filter: blur(4px) grayscale(0.8);
color: var(--gold); opacity: 0.6;
padding: 8px 15px; pointer-events: none;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
font-size: 0.8rem;
transition: 0.3s;
margin-left: 5px;
} }
.btn-spaction:hover, .btn-back:hover { /* Simulation de "1 chance sur 4" de pixeliser au lieu de flouter */
background: var(--gold); /* On cible arbitrairement certains IDs pour l'effet pixel */
color: #000; .player-slot[data-id$="2"],
.player-slot[data-id$="5"],
.player-slot[data-id$="8"] {
/* Si la classe blur est active sur ces IDs, on applique l'effet pixel */
image-rendering: pixelated;
}
.player-slot[data-id$="2"].blur-effect,
.player-slot[data-id$="5"].blur-effect {
filter: contrast(2) brightness(0.5) opacity(0.7); /* Effet "glitch" visuel */
} }
/* Suppression des flèches du type "number" */ /* --- POSITIONNEMENT JOUEURS --- */
input::-webkit-outer-spin-button, .player-info {
input::-webkit-inner-spin-button { background: #1e1e1e;
-webkit-appearance: none; border: 2px solid #333;
margin: 0; border-radius: 12px;
} padding: 8px;
text-align: center;
min-width: 120px;
}
.player-info.active {
border-color: var(--gold);
box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
}
.slot-0 { top: -60px; left: 50%; transform: translateX(-50%); }
.slot-1 { top: 10%; right: -110px; }
.slot-2 { top: 50%; right: -130px; transform: translateY(-50%); }
.slot-3 { bottom: 10%; right: -110px; }
.slot-4 { bottom: -60px; left: 50%; transform: translateX(-50%); }
.slot-5 { bottom: 10%; left: -110px; }
.slot-6 { top: 50%; left: -130px; transform: translateY(-50%); }
.slot-7 { top: 10%; left: -110px; }
/* --- POT --- */
.pot-area {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.total-pot { font-size: 3rem; font-weight: 900; }
.total-pot::before { content: 'POT'; font-size: 0.8rem; color: var(--gold); display: block; }