Upload frontend/cave3d.js

frontend/cave3d.js

@@ -1,7 +1,8 @@
 /* =========================================================================
    CaveScene — hang 3D đầy đủ như hangmu.online gốc:
    vòm + sàn bậc + hố lửa + nước + đuốc + màn hình lớn (board) + vòng huyền thoại
-   + hội trường đá (benches) + lối vào
+   + hội trường đá (benches) + lối vào + sân ngoài + tường huyền thoại
+   + bảng EPL + ngày này năm xưa + cúp + banner + nộm + sân chơi
    ========================================================================= */
 import * as THREE from 'three'
 import React, { useMemo, useRef, useLayoutEffect, useState, useEffect } from 'react'
@@ -335,7 +336,7 @@ function TorchLight({ seed }) {
 }
 
 /* =========================================================================
-   LỐI VÀO (south +z) — arch + tunnel + exit light
+   LỐI VÀO (south +z) — arch + tunnel + exit light + vành sáng + vòm đá
    ========================================================================= */
 function Entrance() {
   const archGeo = useMemo(() => {
@@ -360,10 +361,16 @@ function Entrance() {
       <mesh geometry={tunnelGeo} position={[0, 2.6, 9]}>
         <meshLambertMaterial vertexColors side={THREE.DoubleSide} />
       </mesh>
-      <mesh position={[0, 3, 17.5]}>
-        <planeGeometry args={[14, 10]} />
-        <meshBasicMaterial color="#f4e7cf" side={THREE.DoubleSide} fog={false} />
+      {/* vành sáng + vòm đá quanh cửa hang (thay tấm chặn mờ) */}
+      <mesh position={[0, 3.2, 17.6]}>
+        <ringGeometry args={[6.3, 7.5, 30]} />
+        <meshLambertMaterial color="#6b5540" side={THREE.DoubleSide} fog={false} />
       </mesh>
+      <mesh position={[0, 3.3, 17.3]}>
+        <torusGeometry args={[6.9, 0.72, 8, 26, Math.PI]} />
+        <meshLambertMaterial color="#8a6f55" flatShading side={THREE.DoubleSide} fog={false} />
+      </mesh>
+      <pointLight position={[0, 10, 15.5]} color="#ffe9c8" intensity={45} distance={30} decay={1.2} fog={false} />
       <pointLight position={[0, 5, 1]} color="#ffe2b8" intensity={30} distance={22} decay={1.6} />
     </group>
   )
@@ -371,7 +378,6 @@ function Entrance() {
 
 /* =========================================================================
    MÀN HÌNH LỚN (board) — plane + texture "BẢNG TIN HANG MU" + khung gỗ
-   (video thật qua CSS3D projection — phần app.js)
    ========================================================================= */
 export const BOARD = { w: 24, h: 14, y: 7.3, z: -47.5 }
 function Board() {
@@ -428,7 +434,7 @@ function Board() {
 }
 
 /* =========================================================================
-   VÒNG HUYỀN THOẠI — 8 ghế đá quanh hố lửa, mỗi ghế 1 người (leaderboard top)
+   VÒNG HUYỀN THOẠI — 8 ghế đá quanh hố lửa (leaderboard top)
    ========================================================================= */
 const RING_SLOTS = 8
 const RING_R = 8.5
@@ -448,7 +454,6 @@ function LegendRing() {
         list.push({ name: row.name, number: row.number, wins: row.wins, game: g, rank: 1 })
       }
     }
-    // nếu chưa đủ 8 → thêm người đang trong hang (tránh đứng top)
     for (const p of players.values()) {
       if (list.length >= RING_SLOTS) break
       if (seen.has(p.name)) continue
@@ -465,7 +470,7 @@ function LegendRing() {
       const ang = (i / RING_SLOTS) * Math.PI * 2
       const bob = Math.sin(t * 1.6 + i * 1.1) * 0.03
       child.position.set(Math.sin(ang) * RING_R, 0.25 + bob, Math.cos(ang) * RING_R)
-      child.rotation.y = -ang + Math.PI / 2
+      child.rotation.y = -ang + Math.PI
     })
   })
   return (
@@ -561,6 +566,656 @@ function Benches() {
     </group>
   )
 }
+function BenchRings() {
+  const items = useMemo(() => {
+    const out = []
+    for (let t = 1; t <= CAVE.tiers; t++) {
+      const r = CAVE.pitRadius + (t - 1) * CAVE.tierWidth + 1.25
+      const y = -CAVE.pitDepth + (t - 1) * tierH + 0.23
+      out.push({ r, y, t })
+    }
+    return out
+  }, [])
+  return (
+    <group>
+      {items.map((it, i) => (
+        <mesh key={i} position={[0, it.y, 0]} rotation={[-Math.PI / 2, 0, 0]}>
+          <ringGeometry args={[it.r - 1.3, it.r + 1.2, 72]} />
+          <meshLambertMaterial color="#1c1612" roughness={0.6} metalness={0.5} side={THREE.DoubleSide} />
+        </mesh>
+      ))}
+    </group>
+  )
+}
+
+/* =========================================================================
+   BẢNG XẾP HẠNG NGOẠI HẠNG ANH (EPL) — texture như gốc
+   ========================================================================= */
+const EPL_TEAMS = [
+  ['Arsenal', 38, 28, 5, 5, 91, 29, 89, 'ucl'], ['Man City', 38, 28, 7, 3, 96, 34, 91, 'ucl'],
+  ['Liverpool', 38, 24, 10, 4, 86, 41, 82, 'ucl'], ['Aston Villa', 38, 20, 8, 10, 76, 61, 68, 'ucl'],
+  ['Tottenham', 38, 20, 6, 12, 74, 61, 66, 'europe'], ['Chelsea', 38, 18, 9, 11, 77, 63, 63, 'europe'],
+  ['Newcastle', 38, 18, 6, 14, 85, 62, 60, 'europe'], ['Man United', 38, 18, 6, 14, 57, 58, 60, 'europe'],
+  ['West Ham', 38, 14, 10, 14, 60, 74, 52, ''], ['Crystal Palace', 38, 13, 10, 15, 57, 58, 49, ''],
+  ['Brighton', 38, 12, 12, 14, 55, 62, 48, ''], ['Bournemouth', 38, 13, 9, 16, 54, 67, 48, ''],
+  ['Fulham', 38, 13, 8, 17, 55, 61, 47, ''], ['Wolves', 38, 13, 7, 18, 50, 65, 46, ''],
+  ['Everton', 38, 13, 9, 16, 40, 51, 40, ''], ['Brentford', 38, 10, 9, 19, 56, 65, 39, ''],
+  ['Nottm Forest', 38, 9, 9, 20, 49, 67, 32, ''], ['Luton', 38, 6, 8, 24, 52, 85, 26, 'relegation'],
+  ['Burnley', 38, 5, 9, 24, 41, 78, 24, 'relegation'], ['Sheffield Utd', 38, 3, 7, 28, 35, 104, 16, 'relegation'],
+]
+function makeEplTex() {
+  const c = document.createElement('canvas'); c.width = 1400; c.height = 1560
+  const g = c.getContext('2d')
+  const gr = g.createLinearGradient(0, 0, 0, 1560)
+  gr.addColorStop(0, '#5c0e1b'); gr.addColorStop(0.5, '#3a0812'); gr.addColorStop(1, '#1b1410')
+  g.fillStyle = gr; g.fillRect(0, 0, 1400, 1560)
+  g.strokeStyle = 'rgba(255,240,220,0.12)'; g.lineWidth = 14; g.strokeRect(7, 7, 1386, 1546)
+  g.textAlign = 'center'; g.fillStyle = '#8a1a2a'
+  g.font = '900 96px Bitter, Georgia, serif'; g.fillText('NGOẠI HẠNG ANH', 700, 130)
+  g.fillStyle = 'rgba(255,240,220,0.7)'; g.font = '600 42px "Be Vietnam Pro", sans-serif'
+  g.fillText('Bảng xếp hạng mùa giải', 700, 195)
+  const cols = [700, 1070, 1180, 1280]
+  g.fillStyle = 'rgba(201,162,78,0.85)'; g.font = '600 32px "Be Vietnam Pro", sans-serif'
+  ;['Đội', 'T', 'H', 'Đ'].forEach((t, i) => g.fillText(t, cols[i], 250))
+  for (let i = 0; i < EPL_TEAMS.length; i++) {
+    const t = EPL_TEAMS[i]
+    const y = 300 + i * 58
+    g.fillStyle = i % 2 ? 'rgba(255,240,220,0.045)' : 'rgba(255,240,220,0.0)'
+    g.fillRect(20, y - 22, 1360, 56)
+    if (i === 7) { g.fillStyle = 'rgba(142,11,32,0.5)'; g.fillRect(20, y - 22, 1360, 56) }
+    g.textAlign = 'left'; g.fillStyle = i === 7 ? '#ffd76a' : (t[7] ? '#8e0b20' : 'rgba(255,240,220,0.85)')
+    g.font = i === 7 ? '800 42px Bitter' : '600 42px "Be Vietnam Pro", sans-serif'
+    g.fillText(t[0], 60, y + 8)
+    g.textAlign = 'center'
+    g.fillStyle = 'rgba(255,240,220,0.7)'
+    ;[t[1], t[5] - t[6], t[6]].forEach((v, k) => { g.fillText(String(v), cols[k + 1], y + 8) })
+    g.fillStyle = i === 7 ? '#ffd76a' : 'rgba(255,240,220,0.95)'
+    g.font = '800 44px Bitter'; g.fillText(String(t[7]), 1310, y + 8)
+  }
+  g.textAlign = 'right'; g.fillStyle = 'rgba(255,240,220,0.4)'; g.font = '500 28px "Be Vietnam Pro", sans-serif'
+  g.fillText('Dự Cúp C1 · Cúp châu Âu · Xuống hạng · Đ = Điểm', 1360, 1540)
+  const tx = new THREE.CanvasTexture(c); tx.colorSpace = THREE.SRGBColorSpace; tx.anisotropy = 16
+  return tx
+}
+function EplBoard() {
+  const [tex, setTex] = React.useState(null)
+  React.useEffect(() => {
+    let alive = true
+    const t = makeEplTex()
+    if (alive && t) setTex(t)
+    return () => { alive = false }
+  }, [])
+  if (!tex) return null
+  return (
+    <group position={[-18.5, 6.5, -44]} rotation={[0, 0.52, 0]}>
+      <mesh position={[0, 0, -0.08]}>
+        <boxGeometry args={[8.4, 9.4, 0.28]} />
+        <meshLambertMaterial color="#3d2a1a" flatShading />
+      </mesh>
+      <mesh position={[0, 0, 0.1]}>
+        <planeGeometry args={[8.0, 9.0]} />
+        <meshBasicMaterial map={tex} transparent toneMapped={false} fog={false} />
+      </mesh>
+    </group>
+  )
+}
+
+/* =========================================================================
+   NGÀY NÀY NĂM XƯA — bảng lịch sử, đổi theo ngày thật
+   ========================================================================= */
+const ON_THIS_DAY = [
+  { m: 1, d: 21, y: 2017, title: 'Rooney thành vua phá lưới CLB', text: 'Cú sút phạt ở phút bù giờ trước Stoke là bàn thứ 250 — vượt kỷ lục của Sir Bobby Charlton.' },
+  { m: 2, d: 5, y: 1985, title: 'Cristiano Ronaldo chào đời', text: 'Sinh ở Madeira. 2008: Quả bóng Vàng đầu tiên trong màu áo Quỷ Đỏ.' },
+  { m: 2, d: 6, y: 1958, title: 'Thảm hoạ Munich', text: 'Chuyến bay chở đội bóng gặp nạn trên đường về từ Belgrade — 8 cầu thủ "Busby Babes" ra đi. Mãi không quên.' },
+  { m: 2, d: 19, y: 1910, title: 'Trận đầu tiên ở Old Trafford', text: 'Sân mới khai trương với trận gặp Liverpool. "Nhà hát của những giấc mơ" bắt đầu từ đây.' },
+  { m: 2, d: 19, y: 1958, title: 'Trận đầu sau Munich', text: '13 ngày sau thảm hoạ, MU thắng Sheffield Wednesday 3–0 ở FA Cup trong nước mắt cả Old Trafford.' },
+  { m: 2, d: 21, y: 1958, title: 'Duncan Edwards ra đi', text: 'Viên ngọc của "Busby Babes" qua đời sau 15 ngày chiến đấu với vết thương từ Munich, mới 21 tuổi.' },
+  { m: 2, d: 24, y: 1940, title: 'Denis Law chào đời', text: '"The King" của Stretford End, Quả bóng Vàng 1964.' },
+  { m: 2, d: 26, y: 1973, title: 'Ole Gunnar Solskjær chào đời', text: 'Người ghi bàn thắng định mệnh ở Camp Nou 1999.' },
+  { m: 3, d: 2, y: 1991, title: 'Ryan Giggs ra mắt', text: 'Trận đầu tiên của cầu thủ sau này khoác áo MU nhiều trận nhất lịch sử.' },
+  { m: 3, d: 4, y: 1995, title: 'Thắng Ipswich 9–0', text: 'Chiến thắng đậm nhất lịch sử Premier League lúc đó — Andy Cole ghi 5 bàn.' },
+  { m: 4, d: 14, y: 1999, title: 'Siêu phẩm của Giggs', text: 'Bán kết lại FA Cup với Arsenal: Giggs solo qua cả hàng thủ ở hiệp phụ, cởi áo ăn mừng.' },
+  { m: 4, d: 21, y: 1999, title: 'Ngược dòng ở Turin', text: 'Bị Juventus dẫn 2–0, Keane khơi mào, MU thắng 3–2 vào chung kết Champions League.' },
+  { m: 4, d: 22, y: 2013, title: 'Chức vô địch thứ 20', text: 'Van Persie lập hat-trick vào lưới Aston Villa, MU vô địch Ngoại hạng Anh lần thứ 20.' },
+  { m: 5, d: 8, y: 2013, title: 'Sir Alex chia tay', text: 'Sau hơn 26 năm và 38 danh hiệu, Sir Alex Ferguson thông báo nghỉ hưu.' },
+  { m: 5, d: 11, y: 1996, title: 'FA Cup 1996 — cú đúp thứ hai', text: 'Cantona ghi bàn duy nhất vào lưới Liverpool, MU giành cú đúp quốc nội lần thứ hai.' },
+  { m: 5, d: 14, y: 1999, title: 'Cúp C2 châu Âu', text: 'Thắng Barcelona 2–1 ở Rotterdam, Mark Hughes lập cú đúp.' },
+  { m: 5, d: 16, y: 1999, title: 'Mảnh ghép thứ nhất của cú ăn ba', text: 'Thắng Tottenham 2–1 ngày cuối mùa, giành chức vô địch Premier League.' },
+  { m: 5, d: 17, y: 1990, title: 'Danh hiệu đầu tiên của Sir Alex', text: 'Đá lại chung kết FA Cup, Lee Martin ghi bàn duy nhất vào lưới Crystal Palace.' },
+  { m: 5, d: 21, y: 2008, title: 'Vô địch châu Âu ở Moscow', text: 'Hoà Chelsea 1–1 dưới mưa, Van der Sar cản phạt Anelka — MU lần thứ ba vô địch châu Âu.' },
+  { m: 5, d: 22, y: 1999, title: 'Mảnh ghép thứ hai của cú ăn ba', text: 'Thắng Newcastle 2–0 ở chung kết FA Cup — Sheringham và Scholes ghi bàn.' },
+  { m: 5, d: 24, y: 2017, title: 'Vô địch Europa League', text: 'Thắng Ajax 2–0 ở Stockholm — danh hiệu châu Âu duy nhất còn thiếu trong tủ.' },
+  { m: 5, d: 25, y: 2024, title: 'FA Cup 2024', text: 'Thắng Man City 2–1 ở chung kết — Garnacho và Mainoo ghi bàn.' },
+  { m: 5, d: 26, y: 1999, title: 'Cú ăn ba — Camp Nou', text: 'Bị Bayern dẫn tới phút 90, Sheringham rồi Solskjær ghi bàn bù giờ — MU vô địch châu Âu, đúng sinh nhật Sir Matt.' },
+  { m: 5, d: 29, y: 1968, title: 'Lần đầu vô địch châu Âu', text: 'Thắng Benfica 4–1 sau hiệp phụ ở Wembley — 10 năm sau Munich. Charlton lập cú đúp.' },
+  { m: 8, d: 17, y: 1996, title: 'Beckham ghi bàn từ giữa sân', text: 'Cú sút từ vạch giữa sân vào lưới Wimbledon khiến cả nước Anh biết tên số 10 trẻ tuổi.' },
+  { m: 8, d: 28, y: 2011, title: 'Thắng Arsenal 8–2', text: 'Rooney lập hat-trick ở Old Trafford trong một chiều không thể quên.' },
+  { m: 9, d: 11, y: 2021, title: 'Ronaldo trở về', text: 'Lần thứ hai ra mắt ở Old Trafford, lập cú đúp vào lưới Newcastle.' },
+  { m: 10, d: 24, y: 1985, title: 'Wayne Rooney chào đời', text: 'Chân sút vĩ đại nhất lịch sử CLB với 253 bàn thắng.' },
+  { m: 11, d: 6, y: 1986, title: 'Sir Alex Ferguson nhậm chức', text: 'Ngày một người Scotland tới Old Trafford — mở ra 26 năm và 38 danh hiệu.' },
+  { m: 12, d: 2, y: 2008, title: 'Ronaldo đoạt Quả bóng Vàng', text: 'Cầu thủ MU đầu tiên giành Quả bóng Vàng sau George Best 1968.' },
+  { m: 12, d: 31, y: 1941, title: 'Sir Alex Ferguson chào đời', text: 'HLV vĩ đại nhất lịch sử bóng đá Anh, sinh ở Govan, Glasgow.' },
+]
+function OnThisDayBoard() {
+  const [tex, setTex] = React.useState(null)
+  React.useEffect(() => {
+    let alive = true
+    const c = document.createElement('canvas'); c.width = 900; c.height = 1000
+    const g = c.getContext('2d')
+    const gr = g.createLinearGradient(0, 0, 0, 1000)
+    gr.addColorStop(0, '#4f0c18'); gr.addColorStop(0.6, '#2a060d'); gr.addColorStop(1, '#180307')
+    g.fillStyle = gr; g.fillRect(0, 0, 900, 1000)
+    g.strokeStyle = 'rgba(201,162,78,0.8)'; g.lineWidth = 8; g.strokeRect(8, 8, 884, 984)
+    g.textAlign = 'center'; g.fillStyle = '#c9a24e'; g.font = '800 44px Bitter, Georgia, serif'
+    g.fillText('NGÀY NÀY NĂM XƯA', 450, 80)
+    const now = new Date()
+    const today = ON_THIS_DAY.filter((e) => e.m === now.getMonth() + 1 && e.d === now.getDate())
+    g.fillStyle = 'rgba(255,240,220,0.5)'; g.font = '600 28px "Be Vietnam Pro", sans-serif'
+    g.fillText(today.length ? '' + today.length + ' mốc son hôm nay' : 'Hôm nay chưa có dấu mốc nào — hãy tạo nên lịch sử!', 450, 125)
+    if (today.length) {
+      today.forEach((e, i) => {
+        const y = 210 + i * 210
+        g.fillStyle = 'rgba(142,11,32,0.45)'; g.fillRect(60, y - 60, 780, 170)
+        g.strokeStyle = 'rgba(201,162,78,0.6)'; g.lineWidth = 3; g.strokeRect(60, y - 60, 780, 170)
+        g.textAlign = 'left'; g.fillStyle = '#ffd76a'; g.font = '700 38px "Be Vietnam Pro", sans-serif'
+        g.fillText(e.d + ' THÁNG ' + e.m + ' · ' + e.y, 90, y - 22)
+        g.fillStyle = '#fff2c8'; g.font = '800 52px Bitter, Georgia, serif'
+        g.fillText(e.title.slice(0, 40), 90, y + 25)
+        g.fillStyle = 'rgba(255,240,220,0.8)'; g.font = '500 26px "Be Vietnam Pro", sans-serif'
+        g.fillText(e.text.length > 62 ? e.text.slice(0, 60) + '…' : e.text, 90, y + 78, 720)
+      })
+    }
+    const tx = new THREE.CanvasTexture(c); tx.colorSpace = THREE.SRGBColorSpace; tx.anisotropy = 16
+    if (alive) setTex(tx)
+    return () => { alive = false }
+  }, [])
+  if (!tex) return null
+  return (
+    <group position={[18.5, 6.5, -44]} rotation={[0, -0.5, 0]}>
+      <mesh position={[0, 0, -0.08]}>
+        <boxGeometry args={[6.6, 7.3, 0.28]} />
+        <meshLambertMaterial color="#3d2a1a" flatShading />
+      </mesh>
+      <mesh position={[0, 0, 0.1]}>
+        <planeGeometry args={[6.2, 6.9]} />
+        <meshBasicMaterial map={tex} transparent toneMapped={false} fog={false} />
+      </mesh>
+    </group>
+  )
+}
+
+/* =========================================================================
+   TƯỜNG HUYỀN THOẠI — 3 bảng lớn quanh vòm + 10 chân dung
+   ========================================================================= */
+const LEGEND_PANELS = [
+  { kicker: 'DI TÍCH LỊCH SỬ', title: 'Hang MU', sub: 'Nơi anh em fan Quỷ Đỏ tụ họp' },
+  { kicker: 'MANCHESTER UNITED', title: 'Từ 1878', sub: 'Glory Glory Man United' },
+  { kicker: 'TƯỜNG HUYỀN THOẠI', title: 'Thế hệ vàng', sub: 'Mười huyền thoại khoác áo đỏ' },
+]
+function drawLegendPanel(t) {
+  const c = document.createElement('canvas'); c.width = 1024; c.height = 512
+  const g = c.getContext('2d')
+  const r = g.createRadialGradient(307, 0, 40, 410, 205, 820)
+  r.addColorStop(0, '#96202f'); r.addColorStop(0.5, '#7a1424'); r.addColorStop(1, '#4f0c18')
+  g.fillStyle = r; g.fillRect(0, 0, 1024, 512)
+  g.strokeStyle = '#c9a24e'; g.lineWidth = 22; g.strokeRect(11, 11, 1002, 490)
+  g.strokeStyle = 'rgba(236,208,140,0.75)'; g.lineWidth = 4; g.strokeRect(40, 40, 944, 432)
+  for (const [x, y] of [[62, 62], [962, 62], [62, 450], [962, 450]]) {
+    const rr = g.createRadialGradient(x - 3, y - 3, 1, x, y, 11)
+    rr.addColorStop(0, '#f6e2a6'); rr.addColorStop(0.6, '#c9a24e'); rr.addColorStop(1, '#5e4719')
+    g.fillStyle = rr; g.beginPath(); g.arc(x, y, 11, 0, Math.PI * 2); g.fill()
+  }
+  g.textAlign = 'center'; g.textBaseline = 'middle'; g.shadowColor = 'rgba(0,0,0,0.6)'; g.shadowOffsetY = 4; g.shadowBlur = 2
+  g.fillStyle = '#c9a24e'; g.font = '800 46px Bitter, Georgia, serif'
+  if ('letterSpacing' in g) { g.letterSpacing = '10px' }
+  g.fillText(t.kicker, 512, 118, 864)
+  if ('letterSpacing' in g) { g.letterSpacing = '0px' }
+  g.fillStyle = '#ecd08c'; g.font = '900 150px Bitter, Georgia, serif'
+  g.fillText(t.title, 512, 250, 864)
+  g.shadowColor = 'transparent'
+  g.fillStyle = '#c9a24e'; g.fillRect(150, 342, 724, 4)
+  g.fillStyle = '#efe9dd'; g.font = '600 48px "Be Vietnam Pro", system-ui, sans-serif'
+  g.fillText(t.sub, 512, 410, 864)
+  const tx = new THREE.CanvasTexture(c); tx.colorSpace = THREE.SRGBColorSpace; tx.anisotropy = 16
+  return tx
+}
+const LEGEND_SLOTS = [
+  [-22.5, 11.4, -40.5, 0.52], [-13.4, 8.6, -45.6, 0.9], [12.8, 9.8, -46.5, 1.9],
+]
+function LegendWall() {
+  const [texs, setTexs] = React.useState(null)
+  React.useEffect(() => {
+    let alive = true
+    Promise.all([
+      document.fonts.load('900 150px Bitter', 'Hang MU').catch(() => 0),
+      document.fonts.load('800 46px Bitter', 'TƯỜNG HUYỀN THOẠI').catch(() => 0),
+      document.fonts.load('600 48px "Be Vietnam Pro"', 'Tụ họp').catch(() => 0),
+    ]).then(() => {
+      const t = LEGEND_PANELS.map(drawLegendPanel)
+      if (alive) setTexs(t)
+    })
+    return () => { alive = false }
+  }, [])
+  if (!texs) return null
+  return (
+    <group>
+      {LEGEND_SLOTS.map(([x, y, z, rot], i) => (
+        <group key={i} position={[x, y, z]} rotation={[0, rot, 0]}>
+          <mesh position={[0, 0, -0.12]}>
+            <boxGeometry args={[8.9, 4.45, 0.3]} />
+            <meshLambertMaterial color="#3d2a1a" flatShading />
+          </mesh>
+          <mesh position={[0, 0, 0.06]}>
+            <planeGeometry args={[8.5, 4.25]} />
+            <meshBasicMaterial map={texs[i]} transparent toneMapped={false} fog={false} />
+          </mesh>
+        </group>
+      ))}
+    </group>
+  )
+}
+const LEGENDS = [
+  ['rooney', 'Wayne Rooney', '2004–2017', 24, -42], ['ronaldo', 'Cristiano Ronaldo', '2003–2009, 2021–2022', 28, -40],
+  ['giggs', 'Ryan Giggs', '1991–2014', 20, -48], ['scholes', 'Paul Scholes', '1994–2013', 14, -50],
+  ['neville', 'Gary Neville', '1992–2011', -26, -44], ['ferdinand', 'Rio Ferdinand', '2002–2014', -20, -48],
+  ['vidic', 'Nemanja Vidić', '2006–2014', -14, -50], ['vandersar', 'Edwin van der Sar', '2005–2011', -28, -40],
+  ['carrick', 'Michael Carrick', '2006–2018', 8, -52], ['evra', 'Patrice Evra', '2006–2014', -8, -52],
+]
+function LegendPortraits() {
+  const [textures, setTextures] = React.useState(null)
+  React.useEffect(() => {
+    let alive = true
+    const loader = new THREE.TextureLoader()
+    const out = {}
+    let done = 0
+    LEGENDS.forEach(([key]) => {
+      loader.load('/images/legends/' + key + '.jpg', (t) => {
+        t.colorSpace = THREE.SRGBColorSpace
+        out[key] = t
+        done++
+        if (done >= LEGENDS.length && alive) setTextures({ ...out })
+      }, undefined, () => {
+        done++
+        if (done >= LEGENDS.length && alive) setTextures({ ...out })
+      })
+    })
+    return () => { alive = false }
+  }, [])
+  return (
+    <group>
+      {LEGENDS.map(([key, name, years, x, z]) => (
+        <group key={key} position={[x, 3.6, z]} rotation={[0, 0.9, 0]}>
+          <mesh position={[0, 0, -0.06]}>
+            <boxGeometry args={[1.9, 2.5, 0.14]} />
+            <meshLambertMaterial color="#3d2a1a" flatShading />
+          </mesh>
+          <mesh position={[0, 0.12, 0.07]}>
+            <planeGeometry args={[1.62, 2.1]} />
+            <meshBasicMaterial map={textures && textures[key] ? textures[key] : null}
+              color={textures && textures[key] ? '#ffffff' : '#5a4636'} transparent opacity={0.96} toneMapped={false} fog={false} />
+          </mesh>
+          <mesh position={[0, -1.18, 0.07]}>
+            <planeGeometry args={[1.62, 0.34]} />
+            <meshBasicMaterial color="#120b08" transparent opacity={0.85} toneMapped={false} fog={false} />
+          </mesh>
+        </group>
+      ))}
+    </group>
+  )
+}
+
+/* =========================================================================
+   HỘI TRƯỜNG ĐÁ sign + hình nộm rage + sân kéo co/giữ bóng trên sàn
+   ========================================================================= */
+function BenchSign() {
+  const [tex, setTex] = React.useState(null)
+  React.useEffect(() => {
+    let alive = true
+    const c = document.createElement('canvas'); c.width = 900; c.height = 200
+    const g = c.getContext('2d')
+    const gr = g.createLinearGradient(0, 0, 0, 200)
+    gr.addColorStop(0, '#8e1b2a'); gr.addColorStop(0.5, '#6a1220'); gr.addColorStop(1, '#3a0a12')
+    g.fillStyle = gr; g.fillRect(0, 0, 900, 200)
+    g.strokeStyle = 'rgba(236,208,140,0.8)'; g.lineWidth = 6; g.strokeRect(8, 8, 884, 184)
+    g.textAlign = 'center'; g.fillStyle = '#ffd76a'; g.font = '800 44px Bitter, Georgia, serif'
+    g.fillText('🎙 PHÒNG NÓI CHUYỆN', 450, 90)
+    g.fillStyle = '#fff2c8'; g.font = '900 84px Bitter, Georgia, serif'
+    g.fillText('Hội trường đá', 450, 160)
+    const tx = new THREE.CanvasTexture(c); tx.colorSpace = THREE.SRGBColorSpace; tx.anisotropy = 16
+    if (alive) setTex(tx)
+    return () => { alive = false }
+  }, [])
+  if (!tex) return null
+  return (
+    <mesh position={[0, 8.6, -27.2]} rotation={[0.15, 0, 0]}>
+      <planeGeometry args={[6.4, 1.5]} />
+      <meshBasicMaterial map={tex} transparent toneMapped={false} fog={false} />
+    </mesh>
+  )
+}
+function RageDummies() {
+  const colors = ['#c9a27a', '#b8102a', '#4a4a4a', '#f0c078']
+  return (
+    <group>
+      {colors.map((col, i) => {
+        const a = 1.9 + i * 1.2
+        const x = Math.sin(a) * 11.5 + (i % 2 ? 1.5 : -1.5)
+        const z = Math.cos(a) * 11.5
+        const fy = floorHeight(Math.hypot(x, z))
+        return (
+          <group key={i} position={[x, fy, z]} rotation-y={-a + 1.6}>
+            <mesh position={[0, 0.85, 0]}>
+              <capsuleGeometry args={[0.32, 1.1, 6, 10]} />
+              <meshLambertMaterial color={col} flatShading />
+            </mesh>
+            <mesh position={[0, 2.05, 0]}>
+              <sphereGeometry args={[0.34, 10, 8]} />
+              <meshLambertMaterial color="#ffd9c8" />
+            </mesh>
+            <mesh position={[0, 2.15, 0]} rotation-x={0.35}>
+              <coneGeometry args={[0.3, 0.4, 6]} />
+              <meshLambertMaterial color={col} flatShading />
+            </mesh>
+            <mesh position={[0, 0.5, 0]}>
+              <cylinderGeometry args={[0.22, 0.26, 0.12, 8]} />
+              <meshLambertMaterial color="#3a2a18" flatShading />
+            </mesh>
+          </group>
+        )
+      })}
+    </group>
+  )
+}
+function CourtMarks() {
+  return (
+    <group>
+      {[[-18, -35, 0.35], [18, -35, -0.35]].map(([x, z, rot], i) => (
+        <group key={i} position={[x, 0.03, z]} rotation={[0, rot, 0]}>
+          <mesh rotation={[-Math.PI / 2, 0, 0]}>
+            <planeGeometry args={[10, 8]} />
+            <meshBasicMaterial color="#1c1612" transparent opacity={0.55} />
+          </mesh>
+          <mesh position={[0, 0.01, -4]} rotation={[-Math.PI / 2, 0, 0]}>
+            <planeGeometry args={[0.25, 0.4]} />
+            <meshBasicMaterial color="#ffd76a" />
+          </mesh>
+          <mesh position={[0, 0.01, 4]} rotation={[-Math.PI / 2, 0, 0]}>
+            <planeGeometry args={[0.25, 0.4]} />
+            <meshBasicMaterial color="#ffd76a" />
+          </mesh>
+        </group>
+      ))}
+      <group position={[0, 0.03, 0]} rotation={[-Math.PI / 2, 0, 0]}>
+        <mesh>
+          <ringGeometry args={[11, 15, 48]} />
+          <meshBasicMaterial color="#1c1612" transparent opacity={0.45} />
+        </mesh>
+        <mesh position={[0, 0.01, -13]}>
+          <circleGeometry args={[1.9, 20]} />
+          <meshBasicMaterial color="#ffd76a" />
+        </mesh>
+      </group>
+    </group>
+  )
+}
+
+/* =========================================================================
+   CÚP VÀNG TRUNG TÂM (trophy)
+   ========================================================================= */
+function Trophy() {
+  return (
+    <group position={[0, 0, 0]} rotation-y={0.5}>
+      <mesh position={[0, 0.12, 0]} castShadow>
+        <cylinderGeometry args={[0.85, 1.0, 0.24, 8]} />
+        <meshStandardMaterial color="#5a4a2c" metalness={0.6} roughness={0.4} flatShading />
+      </mesh>
+      <mesh position={[0, 0.34, 0]} castShadow>
+        <cylinderGeometry args={[0.55, 0.7, 0.2, 8]} />
+        <meshStandardMaterial color="#8a6a2c" metalness={0.7} roughness={0.35} flatShading />
+      </mesh>
+      <mesh position={[0, 0.85, 0]} castShadow>
+        <cylinderGeometry args={[0.42, 0.5, 0.85, 10]} />
+        <meshStandardMaterial color="#c9a24e" metalness={0.85} roughness={0.25} flatShading />
+      </mesh>
+      <mesh position={[0, 1.32, 0]} castShadow>
+        <torusGeometry args={[0.5, 0.09, 8, 18]} />
+        <meshStandardMaterial color="#c9a24e" metalness={0.85} roughness={0.25} flatShading />
+      </mesh>
+      <mesh position={[-0.42, 0.85, 0]} rotation-z={0.3}>
+        <torusGeometry args={[0.26, 0.07, 8, 14, Math.PI]} />
+        <meshStandardMaterial color="#c9a24e" metalness={0.85} roughness={0.25} flatShading />
+      </mesh>
+      <mesh position={[0.42, 0.85, 0]} rotation-z={-0.3}>
+        <torusGeometry args={[0.26, 0.07, 8, 14, Math.PI]} />
+        <meshStandardMaterial color="#c9a24e" metalness={0.85} roughness={0.25} flatShading />
+      </mesh>
+      <mesh position={[0, 1.62, 0]} castShadow>
+        <sphereGeometry args={[0.2, 14, 14]} />
+        <meshStandardMaterial color="#c9a24e" metalness={0.85} roughness={0.25} flatShading />
+      </mesh>
+      <pointLight position={[0, 2.6, 0]} color="#ffd76a" intensity={18} distance={9} decay={1.6} />
+    </group>
+  )
+}
+
+/* =========================================================================
+   BANNER MU TRÊN VÒM
+   ========================================================================= */
+function makeBannerTex(text) {
+  const c = document.createElement('canvas')
+  c.width = 512; c.height = 128
+  const g = c.getContext('2d')
+  g.fillStyle = '#c8102e'; g.fillRect(0, 0, 512, 128)
+  g.fillStyle = '#8f0f22'; g.fillRect(6, 6, 500, 116)
+  g.strokeStyle = '#ffd76a'; g.lineWidth = 4; g.strokeRect(6, 6, 500, 116)
+  g.fillStyle = '#ffffff'; g.font = '900 52px "Be Vietnam Pro", sans-serif'
+  g.textAlign = 'center'; g.textBaseline = 'middle'
+  g.fillText(text, 256, 66)
+  const t = new THREE.CanvasTexture(c)
+  t.colorSpace = THREE.SRGBColorSpace
+  return t
+}
+function CaveBanners() {
+  const texA = useMemo(() => makeBannerTex('GLORY GLORY'), [])
+  const texB = useMemo(() => makeBannerTex('MAN UNITED'), [])
+  const texC = useMemo(() => makeBannerTex('MU FAN'), [])
+  const conf = [
+    { tex: texA, pos: [-14, 12.5, -24], rot: [0, 0.5, 0] },
+    { tex: texB, pos: [16, 12.8, -30], rot: [0, -0.45, 0] },
+    { tex: texC, pos: [0, 13.2, -8], rot: [0, 0, 0] },
+  ]
+  return (
+    <group>
+      {conf.map((c, i) => (
+        <group key={i} position={c.pos} rotation={c.rot}>
+          <mesh>
+            <planeGeometry args={[6, 1.5]} />
+            <meshBasicMaterial map={c.tex} transparent toneMapped={false} fog={false} />
+          </mesh>
+        </group>
+      ))}
+    </group>
+  )
+}
+
+/* =========================================================================
+   ÁO ĐỎ MU TRƯNG BÀY — jersey #7 trong khung gỗ cạnh màn hình lớn
+   ========================================================================= */
+function _jerseyTex() {
+  if (typeof document === 'undefined') return null
+  const c = document.createElement('canvas'); c.width = 512; c.height = 640
+  const g = c.getContext('2d')
+  g.fillStyle = '#17120d'; g.fillRect(0, 0, 512, 640)
+  g.fillStyle = '#241b12'; g.fillRect(26, 26, 460, 588)
+  g.fillStyle = '#c8102e'
+  g.beginPath(); g.moveTo(138, 168); g.lineTo(374, 168); g.lineTo(374, 468); g.lineTo(138, 468); g.closePath(); g.fill()
+  g.beginPath(); g.moveTo(138, 168); g.lineTo(50, 118); g.lineTo(86, 332); g.lineTo(138, 298); g.closePath(); g.fill()
+  g.beginPath(); g.moveTo(374, 168); g.lineTo(462, 118); g.lineTo(426, 332); g.lineTo(374, 298); g.closePath(); g.fill()
+  g.fillStyle = '#7c0d20'
+  g.beginPath(); g.arc(256, 172, 36, 0, Math.PI * 2); g.fill()
+  g.fillStyle = '#ffffff'
+  g.font = '800 200px Georgia, serif'; g.textAlign = 'center'; g.textBaseline = 'middle'
+  g.fillText('7', 256, 368)
+  g.fillStyle = '#ffe9c0'; g.font = '700 40px Georgia, serif'
+  g.fillText('MANCHESTER UNITED', 256, 548)
+  const t = new THREE.CanvasTexture(c)
+  t.colorSpace = THREE.SRGBColorSpace
+  t.anisotropy = 16
+  return t
+}
+function JerseyDisplay() {
+  const [tex, setTex] = React.useState(null)
+  React.useEffect(() => {
+    let alive = true
+    const t = _jerseyTex()
+    if (alive && t) setTex(t)
+    return () => { alive = false }
+  }, [])
+  return (
+    <group position={[15.5, 0, -41]} rotation={[0, -0.42, 0]}>
+      <mesh position={[0, 0.425, -0.12]}>
+        <boxGeometry args={[0.55, 0.85, 0.55]} />
+        <meshLambertMaterial color="#3d2a1a" flatShading />
+      </mesh>
+      <mesh position={[0, 2.15, -0.1]}>
+        <boxGeometry args={[2.7, 3.55, 0.16]} />
+        <meshLambertMaterial color="#5a3b22" flatShading />
+      </mesh>
+      {tex && (
+        <mesh position={[0, 2.18, 0.04]}>
+          <planeGeometry args={[2.35, 2.94]} />
+          <meshBasicMaterial map={tex} transparent fog={false} toneMapped={false} />
+        </mesh>
+      )}
+    </group>
+  )
+}
+
+/* =========================================================================
+   SÂN NGOÀI CỬA HANG (+z) — sân, cây, đá, trời, nắng
+   ========================================================================= */
+function _makeSkyTex() {
+  if (typeof document === 'undefined') return null
+  const c = document.createElement('canvas'); c.width = 64; c.height = 256
+  const g = c.getContext('2d')
+  const gr = g.createLinearGradient(0, 0, 0, 256)
+  gr.addColorStop(0, '#7fb2e0'); gr.addColorStop(0.55, '#cfe3f2'); gr.addColorStop(0.8, '#e8d9bd'); gr.addColorStop(1, '#d8c2a0')
+  g.fillStyle = gr; g.fillRect(0, 0, 64, 256)
+  const t = new THREE.CanvasTexture(c); t.colorSpace = THREE.SRGBColorSpace
+  return t
+}
+const _skyTexC = _makeSkyTex()
+function SkyDome() {
+  const tex = useMemo(() => _skyTexC, [])
+  return (
+    <mesh position={[0, 20, 178]} rotation={[0, Math.PI, 0]} fog={false}>
+      <planeGeometry args={[170, 96]} />
+      <meshBasicMaterial map={tex} fog={false} toneMapped={false} depthWrite={false} />
+    </mesh>
+  )
+}
+function OutdoorGround() {
+  const geo = useMemo(() => {
+    const m = new THREE.PlaneGeometry(170, 100, 70, 40)
+    m.rotateX(-Math.PI / 2)
+    const p = m.attributes.position
+    const cols = new Float32Array(p.count * 3)
+    const cA = new THREE.Color('#8a7a5c'), cB = new THREE.Color('#6d5c42'), moss = new THREE.Color('#7d7a45'), tmp = new THREE.Color()
+    for (let i = 0; i < p.count; i++) {
+      const x = p.getX(i), z = p.getZ(i)
+      p.setY(i, fbm3(x * 0.06, z * 0.06, 0, 21) * 1.1 - 0.3)
+      tmp.copy(cA).lerp(cB, fbm3(x * 0.12, z * 0.12, 3, 22) * 0.5 + 0.25)
+      tmp.lerp(moss, Math.max(0, fbm3(x * 0.08, 9, z * 0.08, 23)) * 0.35)
+      cols[i * 3] = tmp.r; cols[i * 3 + 1] = tmp.g; cols[i * 3 + 2] = tmp.b
+    }
+    m.setAttribute('color', new THREE.BufferAttribute(cols, 3))
+    m.computeVertexNormals()
+    return m
+  }, [])
+  return (
+    <mesh geometry={geo} position={[0, 0, 126]} receiveShadow fog={false}>
+      <meshLambertMaterial vertexColors fog={false} />
+    </mesh>
+  )
+}
+function OutdoorPath() {
+  return (
+    <mesh position={[0, 0.04, 112]} rotation={[-Math.PI / 2, 0, 0]} fog={false}>
+      <planeGeometry args={[11, 66]} />
+      <meshBasicMaterial color="#a89474" fog={false} transparent opacity={0.85} />
+    </mesh>
+  )
+}
+function OutdoorProps() {
+  const items = useMemo(() => {
+    const out = []
+    const boulder = (x, z, s, seed) => {
+      const geo = displaceAndColor(new THREE.IcosahedronGeometry(1, 1),
+        { amp: 0.3, freq: 1.1, seed, base: '#9a8a6c', shade: '#77664c', dark: '#4c3f2e', warm: '#b3a284' })
+      out.push({ kind: 'boulder', geo, x, z, s })
+    }
+    const tree = (x, z, s, seed) => out.push({ kind: 'tree', x, z, s, seed })
+    boulder(-8, 80, 1.6, 101); boulder(9, 82, 2.1, 102); boulder(-14, 86, 2.8, 103)
+    boulder(15, 88, 2.4, 104); boulder(-6, 94, 1.2, 105); boulder(11, 96, 1.4, 106)
+    boulder(-18, 100, 3.2, 107); boulder(19, 102, 3.0, 108)
+    tree(-12, 88, 1.5, 201); tree(12, 90, 1.8, 202); tree(-16, 96, 2.1, 203); tree(16, 98, 2.0, 204)
+    tree(-8, 104, 1.4, 205); tree(8, 108, 1.6, 206)
+    return out
+  }, [])
+  return (
+    <group>
+      {items.map((it, i) => it.kind === 'boulder' ? (
+        <mesh key={i} geometry={it.geo} position={[it.x, it.s * 0.35, it.z]} scale={[it.s, it.s * 0.85, it.s]} fog={false}>
+          <meshLambertMaterial vertexColors flatShading fog={false} />
+        </mesh>
+      ) : (
+        <group key={i} position={[it.x, 0, it.z]} scale={[it.s, it.s, it.s]} fog={false}>
+          <mesh position={[0, 1.1, 0]} fog={false}>
+            <cylinderGeometry args={[0.22, 0.3, 2.2, 6]} />
+            <meshLambertMaterial color="#6b4a2c" flatShading fog={false} />
+          </mesh>
+          {[0, 1, 2].map((k) => (
+            <mesh key={k} position={[Math.sin(k * 2.1) * 0.7, 2.6 + k * 0.55, Math.cos(k * 2.1) * 0.7]} fog={false}>
+              <coneGeometry args={[1.35 - k * 0.25, 1.6, 7]} />
+              <meshLambertMaterial color={k === 0 ? '#3f6b2e' : k === 1 ? '#4c7a38' : '#5a8a42'} flatShading fog={false} />
+            </mesh>
+          ))}
+        </group>
+      ))}
+    </group>
+  )
+}
+function OutdoorLight() {
+  const tex = useMemo(() => {
+    const c = document.createElement('canvas'); c.width = c.height = 128
+    const g = c.getContext('2d')
+    const gr = g.createRadialGradient(64, 64, 2, 64, 64, 62)
+    gr.addColorStop(0, 'rgba(255,240,200,0.9)'); gr.addColorStop(0.5, 'rgba(255,214,140,0.35)'); gr.addColorStop(1, 'rgba(255,214,140,0)')
+    g.fillStyle = gr; g.fillRect(0, 0, 128, 128)
+    const t = new THREE.CanvasTexture(c); t.colorSpace = THREE.SRGBColorSpace
+    return t
+  }, [])
+  return (
+    <>
+      <directionalLight position={[15, 30, 140]} intensity={1.6} color="#fff1d6" fog={false} />
+      <pointLight position={[0, 16, 118]} color="#ffe6c0" intensity={5} distance={70} decay={0.5} fog={false} />
+      <sprite position={[0, 34, 132]} scale={[34, 34, 1]} fog={false}>
+        <spriteMaterial map={tex} transparent opacity={0.9} fog={false} depthWrite={false} blending={THREE.AdditiveBlending} />
+      </sprite>
+    </>
+  )
+}
+function OutdoorScene() {
+  return (
+    <group>
+      <SkyDome />
+      <OutdoorGround />
+      <OutdoorPath />
+      <OutdoorProps />
+      <OutdoorLight />
+    </group>
+  )
+}
 
 /* =========================================================================
    TỔNG HỢP CaveScene
@@ -579,31 +1234,22 @@ export function CaveScene() {
       <Board />
       <LegendRing />
       <Benches />
+      <LegendWall />
+      <LegendPortraits />
+      <EplBoard />
+      <OnThisDayBoard />
+      <BenchSign />
+      <RageDummies />
+      <CourtMarks />
+      <Trophy />
+      <CaveBanners />
+      <JerseyDisplay />
       <Entrance />
+      <OutdoorScene />
       <hemisphereLight args={[0xe8c090, 0x7a6152, 1.5]} />
       <ambientLight intensity={0.7} color={0xf4cba0} />
     </>
   )
 }
-function BenchRings() {
-  const items = useMemo(() => {
-    const out = []
-    for (let t = 1; t <= CAVE.tiers; t++) {
-      const r = CAVE.pitRadius + (t - 1) * CAVE.tierWidth + 1.25
-      const y = -CAVE.pitDepth + (t - 1) * tierH + 0.23
-      out.push({ r, y, t })
-    }
-    return out
-  }, [])
-  return (
-    <group>
-      {items.map((it, i) => (
-        <mesh key={i} position={[0, it.y, 0]} rotation={[-Math.PI / 2, 0, 0]}>
-          <ringGeometry args={[it.r - 1.3, it.r + 1.2, 72]} />
-          <meshLambertMaterial color="#1c1612" roughness={0.6} metalness={0.5} side={THREE.DoubleSide} />
-        </mesh>
-      ))}
-    </group>
-  )
-}
-export { floorHeight, domeHeight }
+
+export { floorHeight, domeHeight }