wsy182
2625baf266
- 添加 PlayerTurnPayload 接口定义和 PLAYER_TURN 动作类型 - 实现选牌、出牌确认逻辑和相关状态管理 - 添加客户端出牌限制检查和错误提示 - 集成 PLAYER_TURN WebSocket 消息处理 - 添加房间状态面板显示游戏信息 - 优化桌面背景图片和样式布局 - 添加马蹄形动画样式文件 - 配置 Vite 别名和端口设置
151 lines
3.3 KiB
CSS
151 lines
3.3 KiB
CSS
.wind-square {
|
|
position: relative;
|
|
width: 96px;
|
|
height: 96px;
|
|
border-radius: 22px;
|
|
overflow: hidden;
|
|
box-shadow: 0 10px 18px rgba(0, 0, 0, 0.28),
|
|
inset 0 0 0 1px rgba(255, 240, 196, 0.2);
|
|
}
|
|
|
|
.square-base {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
filter: sepia(1) hue-rotate(92deg) saturate(3.3) brightness(0.22);
|
|
}
|
|
|
|
.wind-square::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: radial-gradient(circle at 28% 22%, rgba(255, 238, 191, 0.08), transparent 42%),
|
|
linear-gradient(145deg, rgba(5, 33, 24, 0.34), rgba(0, 0, 0, 0.16));
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* ===== 四个三角形区域 ===== */
|
|
.quadrant {
|
|
position: absolute;
|
|
inset: 0;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
/* 上三角 */
|
|
.quadrant-top {
|
|
clip-path: polygon(50% 50%, 0 0, 100% 0);
|
|
background: radial-gradient(circle at 50% 38%, rgba(255, 225, 180, 0.30), transparent 68%),
|
|
linear-gradient(to bottom, rgba(180, 95, 55, 0.28), rgba(80, 35, 20, 0.12));
|
|
}
|
|
|
|
/* 右三角 */
|
|
.quadrant-right {
|
|
clip-path: polygon(50% 50%, 100% 0, 100% 100%);
|
|
background: radial-gradient(circle at 62% 50%, rgba(255, 225, 180, 0.30), transparent 68%),
|
|
linear-gradient(to left, rgba(180, 95, 55, 0.28), rgba(80, 35, 20, 0.12));
|
|
}
|
|
|
|
/* 下三角 */
|
|
.quadrant-bottom {
|
|
clip-path: polygon(50% 50%, 0 100%, 100% 100%);
|
|
background: radial-gradient(circle at 50% 62%, rgba(255, 225, 180, 0.30), transparent 68%),
|
|
linear-gradient(to top, rgba(180, 95, 55, 0.28), rgba(80, 35, 20, 0.12));
|
|
}
|
|
|
|
/* 左三角 */
|
|
.quadrant-left {
|
|
clip-path: polygon(50% 50%, 0 0, 0 100%);
|
|
background: radial-gradient(circle at 38% 50%, rgba(255, 225, 180, 0.30), transparent 68%),
|
|
linear-gradient(to right, rgba(180, 95, 55, 0.28), rgba(80, 35, 20, 0.12));
|
|
}
|
|
|
|
/* 激活时闪烁 */
|
|
.quadrant.active {
|
|
opacity: 1;
|
|
animation: quadrant-pulse 1.2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes quadrant-pulse {
|
|
0% {
|
|
opacity: 0.22;
|
|
filter: brightness(0.95);
|
|
}
|
|
50% {
|
|
opacity: 0.72;
|
|
filter: brightness(1.18);
|
|
}
|
|
100% {
|
|
opacity: 0.22;
|
|
filter: brightness(0.95);
|
|
}
|
|
}
|
|
|
|
.diagonal {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 160%;
|
|
height: 2px;
|
|
border-radius: 999px;
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(0, 0, 0, 0) 0%,
|
|
rgba(80, 35, 20, 0.6) 25%,
|
|
rgba(160, 85, 50, 0.9) 50%,
|
|
rgba(80, 35, 20, 0.6) 75%,
|
|
rgba(0, 0, 0, 0) 100%
|
|
);
|
|
transform-origin: center;
|
|
z-index: 2;
|
|
}
|
|
|
|
.diagonal-a {
|
|
transform: translate(-50%, -50%) rotate(45deg);
|
|
}
|
|
|
|
.diagonal-b {
|
|
transform: translate(-50%, -50%) rotate(-45deg);
|
|
}
|
|
|
|
.wind-slot {
|
|
position: absolute;
|
|
width: 24px;
|
|
height: 24px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 3;
|
|
}
|
|
|
|
.wind-icon {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
filter: brightness(0) invert(1) drop-shadow(0 0 2px rgba(255, 220, 180, 0.8)) drop-shadow(0 0 4px rgba(120, 60, 30, 0.6));
|
|
}
|
|
|
|
.wind-top {
|
|
top: 5px;
|
|
left: 34px;
|
|
}
|
|
|
|
.wind-right {
|
|
top: 34px;
|
|
right: 5px;
|
|
}
|
|
|
|
.wind-bottom {
|
|
bottom: 5px;
|
|
left: 34px;
|
|
}
|
|
|
|
.wind-left {
|
|
top: 34px;
|
|
left: 5px;
|
|
} |