Spaces:
Running
Running
| /* patch_scene.mjs — v17: sân trước cửa hang + cờ MU + áo MU + bảng điểm danh | |
| VẤN ĐỀ v16: cờ MU đặt z=66 nhưng sân ngoài (OutdoorGround) chỉ bắt đầu z~76 và | |
| walkR guard chặn z<55 → vùng z 55..78 là khoảng trống giữa cửa hang và sân | |
| ngoài: không đất nền, vật phẩm vô hình. | |
| FIX v17 (chạy trên SOURCE GỐC cave3d.js — bản chưa patch): | |
| (A) Forecourt — sân đất trước cửa hang (z 55..80) nối cửa với sân ngoài. | |
| (B) Cờ MU/GVMU 2 hàng hai bên lối ra trên forecourt (z=62, z=74). | |
| (C) Ghế gỗ nghỉ chân cạnh forecourt. | |
| (D) Bảng điểm danh CHUYEN CAN THANG NAY dựng trái cửa (z=62). | |
| (E) Giá treo áo MU #7 dựng phải cửa (z=62). | |
| (F) Kéo dài OutdoorPath (11x86) nối liền forecourt. | |
| LƯU Ý: OutdoorScene trong SOURCE GỐC chỉ gồm SkyDome/Ground/Path/Props/Light | |
| (không có Flags/Bench — những cái đó chỉ tồn tại trong bản build v16). | |
| Nếu pattern lệch -> exit(1) để build fail. */ | |
| import fs from 'node:fs' | |
| function patchFile(path, reps) { | |
| let s = fs.readFileSync(path, 'utf8') | |
| const failures = [] | |
| for (const [oldStr, newStr] of reps) { | |
| const count = s.split(oldStr).length - 1 | |
| if (count === 1) { s = s.replace(oldStr, newStr); continue } | |
| failures.push(`pattern not unique/found (count=${count}): ${oldStr.slice(0, 80)}`) | |
| } | |
| if (failures.length) { | |
| console.error(`PATCH SCENE FAILED (${path}):`) | |
| failures.forEach((f) => console.error(' -', f)) | |
| process.exit(1) | |
| } | |
| fs.writeFileSync(path, s) | |
| console.log('patched ok:', path) | |
| } | |
| /* ================= cave3d.js ================= */ | |
| patchFile('frontend/cave3d.js', [ | |
| /* ---- (A) Forecourt: san dat noi cua hang -> san ngoai ---- */ | |
| [ | |
| `function OutdoorGround() {`, | |
| `function Forecourt() { | |
| const geo = useMemo(() => { | |
| const m = new THREE.PlaneGeometry(64, 26, 40, 18) | |
| m.rotateX(-Math.PI / 2) | |
| const p = m.attributes.position | |
| const cols = new Float32Array(p.count * 3) | |
| const cA = new THREE.Color('#7d7258'), cB = new THREE.Color('#5f5540'), moss = new THREE.Color('#6d6a3e'), 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.09, z * 0.09, 0, 31) * 0.22 + 0.02) | |
| tmp.copy(cA).lerp(cB, fbm3(x * 0.16, z * 0.16, 3, 32) * 0.5 + 0.25) | |
| tmp.lerp(moss, Math.max(0, fbm3(x * 0.1, 9, z * 0.1, 33)) * 0.3) | |
| 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, 67]} receiveShadow fog={false}> | |
| <meshLambertMaterial vertexColors fog={false} /> | |
| </mesh> | |
| ) | |
| } | |
| function OutdoorGround() {`, | |
| ], | |
| /* ---- (B2E) OutdoorScene mới: flags + bench + attendance + jersey ---- */ | |
| [ | |
| `function OutdoorScene() { | |
| return ( | |
| <group> | |
| <SkyDome /> | |
| <OutdoorGround /> | |
| <OutdoorPath /> | |
| <OutdoorProps /> | |
| <OutdoorLight /> | |
| </group> | |
| ) | |
| }`, | |
| `/* ---- Bang diem danh (chuyen can) truoc cua hang ---- */ | |
| function AttendanceForecourt() { | |
| const [rows, setRows] = React.useState(null) | |
| React.useEffect(() => { | |
| let alive = true | |
| fetch('/api/attendance').then(r => r.ok ? r.json() : Promise.reject()).then(d => { | |
| if (alive && d && d.rows) setRows(d.rows) | |
| }).catch(() => { | |
| if (!alive) return | |
| const r = [] | |
| for (let i = 0; i < 5; i++) { | |
| const row = [] | |
| for (let j = 0; j < 10; j++) row.push(Math.random() > 0.35 ? { name: '', number: 0 } : null) | |
| r.push(row) | |
| } | |
| setRows(r) | |
| }) | |
| return () => { alive = false } | |
| }, []) | |
| const tex = React.useMemo(() => { | |
| const c = document.createElement('canvas'); c.width = 640; c.height = 320 | |
| const g = c.getContext('2d') | |
| g.fillStyle = '#7a5f42'; g.fillRect(0, 0, 640, 320) | |
| g.strokeStyle = '#4a3522'; g.lineWidth = 4; g.strokeRect(4, 4, 632, 312) | |
| g.fillStyle = '#3a2a18'; g.font = '700 26px "Be Vietnam Pro", sans-serif'; g.textAlign = 'center' | |
| g.fillText('CHUYEN CAN THANG NAY', 320, 36) | |
| for (let r = 0; r < 5; r++) for (let c = 0; c < 10; c++) { | |
| const x = 16 + c * 61, y = 50 + r * 50 | |
| g.fillStyle = '#5a442c'; g.fillRect(x, y, 56, 42) | |
| if (rows && rows[r] && rows[r][c]) { | |
| g.fillStyle = '#c8102e'; g.fillRect(x + 3, y + 3, 50, 36) | |
| g.fillStyle = '#fff'; g.font = '600 18px "Be Vietnam Pro", sans-serif' | |
| g.fillText('v', x + 28, y + 27) | |
| } else { g.fillStyle = '#8a6f4e'; g.fillRect(x + 3, y + 3, 50, 36) } | |
| } | |
| const t = new THREE.CanvasTexture(c); t.colorSpace = THREE.SRGBColorSpace | |
| return t | |
| }, [rows]) | |
| if (!rows) return null | |
| return ( | |
| <group position={[-4.2, 0, 62]} rotation={[0, 0.85, 0]} fog={false}> | |
| <mesh position={[0, 1.2, -0.12]}> | |
| <boxGeometry args={[2.5, 2.6, 0.2]} /> | |
| <meshLambertMaterial color="#3d2a1a" flatShading fog={false} /> | |
| </mesh> | |
| <mesh position={[0, -0.9, -0.1]}> | |
| <boxGeometry args={[0.18, 1.9, 0.18]} /> | |
| <meshLambertMaterial color="#5a4328" flatShading fog={false} /> | |
| </mesh> | |
| <mesh position={[0, 1.35, 0.05]}> | |
| <planeGeometry args={[2.2, 2.3]} /> | |
| <meshBasicMaterial map={tex} transparent toneMapped={false} fog={false} /> | |
| </mesh> | |
| </group> | |
| ) | |
| } | |
| /* ---- Gia treo ao MU (jersey #7) canh cua ---- */ | |
| function JerseyStand() { | |
| 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={[5.4, 0, 62]} rotation={[0, -0.7, 0]} fog={false}> | |
| <mesh position={[0, 1.3, 0]}> | |
| <cylinderGeometry args={[0.07, 0.09, 2.6, 6]} /> | |
| <meshLambertMaterial color="#4a3220" flatShading fog={false} /> | |
| </mesh> | |
| <mesh position={[0, 2.62, 0]}> | |
| <sphereGeometry args={[0.1, 8, 8]} /> | |
| <meshStandardMaterial color="#c9a24e" fog={false} /> | |
| </mesh> | |
| <mesh position={[0, 2.05, 0]} rotation-x={0.12}> | |
| <planeGeometry args={[1.15, 1.45]} /> | |
| <meshBasicMaterial map={tex ?? null} transparent side={THREE.DoubleSide} toneMapped={false} fog={false} /> | |
| </mesh> | |
| </group> | |
| ) | |
| } | |
| /* ---- Co phuon MU hai ben loi ra (forecourt) ---- */ | |
| function makePennantTex(text) { | |
| if (typeof document === 'undefined') return null | |
| const c = document.createElement('canvas'); c.width = 128; c.height = 128 | |
| const g = c.getContext('2d') | |
| g.fillStyle = '#c8102e'; g.fillRect(0, 0, 128, 128) | |
| g.strokeStyle = '#ffd76a'; g.lineWidth = 6; g.strokeRect(4, 4, 120, 120) | |
| g.fillStyle = '#ffffff'; g.font = '700 40px "Be Vietnam Pro", sans-serif' | |
| g.textAlign = 'center'; g.textBaseline = 'middle' | |
| g.fillText(text, 64, 66) | |
| const t = new THREE.CanvasTexture(c); t.colorSpace = THREE.SRGBColorSpace | |
| return t | |
| } | |
| function OutdoorFlags() { | |
| const texM = useMemo(() => makePennantTex('MU'), []) | |
| const texG = useMemo(() => makePennantTex('GGMU'), []) | |
| const flags = [ | |
| { x: -7, z: 62, tex: texM }, { x: 7, z: 62, tex: texG }, | |
| { x: -11, z: 74, tex: texG }, { x: 11, z: 74, tex: texM }, | |
| ] | |
| return ( | |
| <group> | |
| {flags.map((f, i) => ( | |
| <group key={i} position={[f.x, 0, f.z]} fog={false}> | |
| <mesh position={[0, 1.9, 0]} fog={false}> | |
| <cylinderGeometry args={[0.09, 0.12, 3.8, 6]} /> | |
| <meshLambertMaterial color="#5a4328" flatShading fog={false} /> | |
| </mesh> | |
| <mesh position={[0, 3.85, 0]} fog={false}> | |
| <sphereGeometry args={[0.12, 8, 8]} /> | |
| <meshLambertMaterial color="#c9a24e" fog={false} /> | |
| </mesh> | |
| <mesh position={[0.5, 3.0, 0]} fog={false}> | |
| <planeGeometry args={[1.4, 1.1]} /> | |
| <meshBasicMaterial map={f.tex} transparent side={THREE.DoubleSide} fog={false} toneMapped={false} /> | |
| </mesh> | |
| </group> | |
| ))} | |
| </group> | |
| ) | |
| } | |
| /* ---- Ghe go nghi chan ---- */ | |
| function OutdoorBench() { | |
| const bench = (x, z, rot) => ( | |
| <group key={`${x}-${z}`} position={[x, 0, z]} rotation-y={rot} fog={false}> | |
| <mesh position={[0, 0.5, 0]} fog={false}> | |
| <boxGeometry args={[1.9, 0.16, 0.55]} /> | |
| <meshLambertMaterial color="#6a4a2c" flatShading fog={false} /> | |
| </mesh> | |
| <mesh position={[0, 0.72, 0]} fog={false}> | |
| <boxGeometry args={[1.9, 0.12, 0.5]} /> | |
| <meshLambertMaterial color="#7a5a38" flatShading fog={false} /> | |
| </mesh> | |
| <mesh position={[-0.72, 0.22, 0]} fog={false}> | |
| <boxGeometry args={[0.12, 0.44, 0.5]} /> | |
| <meshLambertMaterial color="#4a3220" flatShading fog={false} /> | |
| </mesh> | |
| <mesh position={[0.72, 0.22, 0]} fog={false}> | |
| <boxGeometry args={[0.12, 0.44, 0.5]} /> | |
| <meshLambertMaterial color="#4a3220" flatShading fog={false} /> | |
| </mesh> | |
| </group> | |
| ) | |
| return ( | |
| <group> | |
| {bench(-6, 60, 0.12)} | |
| {bench(6, 60, -0.1)} | |
| </group> | |
| ) | |
| } | |
| function OutdoorScene() { | |
| return ( | |
| <group> | |
| <SkyDome /> | |
| <OutdoorGround /> | |
| <OutdoorPath /> | |
| <OutdoorProps /> | |
| <OutdoorFlags /> | |
| <OutdoorBench /> | |
| <AttendanceForecourt /> | |
| <JerseyStand /> | |
| <OutdoorLight /> | |
| </group> | |
| ) | |
| }`, | |
| ], | |
| /* ---- (F) Keo dai OutdoorPath len forecourt nhin lien mach ---- */ | |
| [ | |
| ` <planeGeometry args={[11, 66]} />`, | |
| ` <planeGeometry args={[11, 86]} />`, | |
| ], | |
| ]) | |
| console.log('patch_scene.mjs OK — forecourt + MU flags + jersey stand + attendance board added') |