大屏结算分数时不再是黑漆漆的大背景了

big-screen/src/main.js

@@ -245,6 +245,18 @@ function loop() {
   ctx.restore()
 
   if (states.length > 0) {
+    const allGameOver = states.every(s => s.isGameOver)
+
+    if (allGameOver && states.length > 1) {
+      // 最终结果页使用干净背景，不再保留各玩家游戏盘面
+      const totalWidth = SCREEN_WIDTH * totalSlots
+      ctx.save()
+      ctx.setTransform(1, 0, 0, 1, 0, 0)
+      ctx.clearRect(0, 0, totalWidth, SCREEN_HEIGHT)
+      drawBackground(ctx, totalWidth, SCREEN_HEIGHT)
+      drawTeamResultOverlay(ctx, states, getPlayerTeam, totalWidth)
+      ctx.restore()
+    } else {
     // ── 按队伍分组渲染：A队左，B队右 ────────────────────────────────────────
       let currentOffsetX = 0
 
@@ -276,16 +288,6 @@ function loop() {
 
         currentOffsetX += SCREEN_WIDTH
       })
-
-    // ── 检测是否所有玩家都结束，显示队伍比分 ─────────────────────────────
-    const allGameOver = states.every(s => s.isGameOver)
-    if (allGameOver && states.length > 1) {
-      // 全屏显示队伍比分（传入实际的大屏宽度）
-      const totalWidth = SCREEN_WIDTH * totalSlots
-      ctx.save()
-      ctx.setTransform(1, 0, 0, 1, 0, 0)
-      drawTeamResultOverlay(ctx, states, getPlayerTeam, totalWidth)
-      ctx.restore()
     }
   } else {
     // ── 空闲等待画面 ──────────────────────────────────────────────────────

big-screen/src/renderer/gameinfo.js

@@ -322,14 +322,36 @@ export function drawTeamResultOverlay(ctx, playerStates, getPlayerTeam, totalWid
   const isDraw = teamAScore === teamBScore
   const winner = teamAScore > teamBScore ? 'A' : 'B'
 
-  // 半透明遮罩（全屏）
+  const cx = canvasWidth / 2
+  const startY = canvasHeight * 0.1
+
+  // 轻遮罩 + 氛围光，保留背景层次，避免整页发黑发闷
   ctx.save()
-  ctx.fillStyle = 'rgba(0,0,0,0.92)'
+  const veil = ctx.createLinearGradient(0, 0, 0, canvasHeight)
+  veil.addColorStop(0, 'rgba(14,8,26,0.42)')
+  veil.addColorStop(0.55, 'rgba(10,6,22,0.58)')
+  veil.addColorStop(1, 'rgba(6,3,14,0.72)')
+  ctx.fillStyle = veil
   ctx.fillRect(0, 0, canvasWidth, canvasHeight)
-  ctx.restore()
 
-  const cx = canvasWidth / 2
-  const startY = canvasHeight * 0.1
+  const leftGlow = ctx.createRadialGradient(
+    canvasWidth * 0.18, canvasHeight * 0.62, 0,
+    canvasWidth * 0.18, canvasHeight * 0.62, canvasWidth * 0.28
+  )
+  leftGlow.addColorStop(0, 'rgba(245,158,11,0.16)')
+  leftGlow.addColorStop(1, 'rgba(245,158,11,0)')
+  ctx.fillStyle = leftGlow
+  ctx.fillRect(0, 0, canvasWidth, canvasHeight)
+
+  const rightGlow = ctx.createRadialGradient(
+    canvasWidth * 0.82, canvasHeight * 0.24, 0,
+    canvasWidth * 0.82, canvasHeight * 0.24, canvasWidth * 0.24
+  )
+  rightGlow.addColorStop(0, 'rgba(236,72,153,0.14)')
+  rightGlow.addColorStop(1, 'rgba(236,72,153,0)')
+  ctx.fillStyle = rightGlow
+  ctx.fillRect(0, 0, canvasWidth, canvasHeight)
+  ctx.restore()
 
   // 标题
   ctx.save()
@@ -352,13 +374,30 @@ export function drawTeamResultOverlay(ctx, playerStates, getPlayerTeam, totalWid
   const cardX = cx - cardW / 2
 
   ctx.save()
-  ctx.fillStyle = 'rgba(30,15,60,0.95)'
-  ctx.strokeStyle = 'rgba(139,92,246,0.5)'
+  const scoreCardBg = ctx.createLinearGradient(cardX, cardY, cardX, cardY + cardH)
+  scoreCardBg.addColorStop(0, 'rgba(64,33,116,0.74)')
+  scoreCardBg.addColorStop(0.5, 'rgba(40,19,76,0.66)')
+  scoreCardBg.addColorStop(1, 'rgba(20,10,42,0.72)')
+  ctx.fillStyle = scoreCardBg
+  ctx.strokeStyle = 'rgba(196,181,253,0.36)'
   ctx.lineWidth = 2
+  ctx.shadowColor = 'rgba(0,0,0,0.24)'
+  ctx.shadowBlur = 26
+  ctx.shadowOffsetY = 10
   ctx.beginPath()
   ctx.roundRect(cardX, cardY, cardW, cardH, 16)
   ctx.fill()
+  ctx.shadowBlur = 0
   ctx.stroke()
+
+  ctx.beginPath()
+  ctx.roundRect(cardX, cardY, cardW, cardH, 16)
+  ctx.clip()
+  const scoreHl = ctx.createLinearGradient(cardX, cardY, cardX, cardY + cardH * 0.45)
+  scoreHl.addColorStop(0, 'rgba(255,255,255,0.16)')
+  scoreHl.addColorStop(1, 'rgba(255,255,255,0)')
+  ctx.fillStyle = scoreHl
+  ctx.fillRect(cardX, cardY, cardW, cardH * 0.45)
   ctx.restore()
 
   // A队分数（左侧）
@@ -385,13 +424,29 @@ export function drawTeamResultOverlay(ctx, playerStates, getPlayerTeam, totalWid
   const listCardX = cx - listCardW / 2
 
   ctx.save()
-  ctx.fillStyle = 'rgba(20,10,40,0.9)'
-  ctx.strokeStyle = 'rgba(139,92,246,0.4)'
+  const listBg = ctx.createLinearGradient(listCardX, listY, listCardX, listY + listCardH)
+  listBg.addColorStop(0, 'rgba(28,14,52,0.66)')
+  listBg.addColorStop(1, 'rgba(12,7,26,0.58)')
+  ctx.fillStyle = listBg
+  ctx.strokeStyle = 'rgba(196,181,253,0.3)'
   ctx.lineWidth = 2
+  ctx.shadowColor = 'rgba(0,0,0,0.18)'
+  ctx.shadowBlur = 22
+  ctx.shadowOffsetY = 8
   ctx.beginPath()
   ctx.roundRect(listCardX, listY, listCardW, listCardH, 12)
   ctx.fill()
+  ctx.shadowBlur = 0
   ctx.stroke()
+
+  ctx.beginPath()
+  ctx.roundRect(listCardX, listY, listCardW, listCardH, 12)
+  ctx.clip()
+  const listHl = ctx.createLinearGradient(listCardX, listY, listCardX, listY + listCardH * 0.28)
+  listHl.addColorStop(0, 'rgba(255,255,255,0.12)')
+  listHl.addColorStop(1, 'rgba(255,255,255,0)')
+  ctx.fillStyle = listHl
+  ctx.fillRect(listCardX, listY, listCardW, listCardH * 0.28)
   ctx.restore()
 
   // 左右两列显示玩家 - 调整列宽以适应更宽的卡片
@@ -485,6 +540,15 @@ function drawTeamPlayerList(ctx, x, y, w, h, team, players, isWinner) {
       ctx.fill()
     }
 
+    if (index > 0) {
+      ctx.strokeStyle = 'rgba(255,255,255,0.05)'
+      ctx.lineWidth = 1
+      ctx.beginPath()
+      ctx.moveTo(x + 8, rowY - rowHeight / 2)
+      ctx.lineTo(x + w - 8, rowY - rowHeight / 2)
+      ctx.stroke()
+    }
+
     // 排名
     ctx.textAlign = 'center'
     ctx.fillStyle = isWinner