🥷 Web Matsuba — วิธีติดตั้ง

เว็บไซต์ของหมู่บ้านนินจา (SvelteKit + GSAP + Tailwind)

---

📋 สิ่งที่ต้องมี

• Node.js เวอร์ชัน 20 ขึ้นไป (แนะนำ 22 LTS) — ดาวน์โหลด: https://nodejs.org
• Bun หรือ npm (โปรเจกต์นี้ใช้ Bun เป็นค่าเริ่มต้น)
  • ติดตั้ง Bun: curl -fsSL https://bun.sh/install | bash (Linux/Mac)
  • หรือใช้ npm ที่มากับ Node ก็ได้

---

🚀 ขั้นตอนติดตั้ง

1. แตกไฟล์ zip

unzip webmatsuba-main.zip
cd webmatsuba-main

2. ติดตั้ง dependencies

ใช้ Bun (แนะนำ — เร็วกว่า):

bun install

หรือใช้ npm:

npm install

3. รัน development server

ด้วย Bun:

bun run dev

หรือ npm:

npm run dev

จากนั้นเปิดเบราว์เซอร์ไปที่ http://localhost:5173

ถ้าอยากเปิด browser อัตโนมัติ ใช้ bun run dev -- --open

---

🏗️ Build สำหรับ production

bun run build       # หรือ npm run build
bun run preview     # หรือ npm run preview

---

📁 โครงสร้างหลัก 3 Sections

ID	Section	เพลงประกอบ
#intro	เข้าหมู่บ้านนินจา	SeeYouSomewhere.mp3
#mood	ความทรงจำของหมู่บ้านนินจา	Friends.mp3
#hotmail	กล่องจดหมาย	seasonschange.mp3

ระบบเพลงทำงานอัตโนมัติ — เมื่อ scroll ผ่าน section ไหน เพลงจะ crossfade เปลี่ยนเอง

---

🎯 ฟีเจอร์ที่ควรลอง

1. Section 1 (เข้าหมู่บ้านนินจา): ลองเอาเมาส์ไปที่ปุ่ม "เข้าหมู่บ้านนินจา" — มันจะหนี 5 ครั้งก่อนยอมให้กด
2. Section 2 (ความทรงจำ): scroll ลงเรื่อย ๆ — section จะ pin ไว้ แล้วรูปจะไหลแนวนอนทีละใบ
3. Player ขวาล่าง: ปรับเสียง / กดข้าม section / play-pause ได้

---

🔧 ไฟล์ที่ถูกแก้ในเวอร์ชันนี้

• src/routes/+page.svelte — เพิ่ม 2 sections (intro + memories horizontal scroll)
• src/routes/+layout.svelte — ตั้งระบบเพลง 3 เพลง 3 sections
• src/lib/components/sections/MailSection.svelte — ลบ import ที่ไม่ใช้ออก
• static/sounds/SeeYouSomewhere.mp3 — เพิ่มไฟล์ที่ขาด (copy มาจาก /songs/)

---

⚠️ Troubleshooting

ติดตั้งไม่สำเร็จ?

• ลบ node_modules/ กับ bun.lock (หรือ package-lock.json) แล้ว bun install ใหม่
• ตรวจสอบ Node version: node -v (ต้อง ≥ 20)

เพลงไม่เล่น?

• เบราว์เซอร์ส่วนใหญ่ block autoplay — ต้องคลิกที่หน้าเว็บก่อน 1 ครั้ง เพลงถึงจะเริ่ม
• ถ้าเห็นปุ่ม "🔊 เปิดเสียงประกอบ" ที่มุมขวาล่าง คลิกเลย

Animation กระตุก?

• ลอง build production แล้ว preview แทน dev mode
• ปิด extension เบราว์เซอร์ที่ inject script เยอะ ๆ

Database error?

• โปรเจกต์มี Drizzle + PostgreSQL setup แต่หน้าหลักไม่ได้ใช้ — ข้ามได้ ไม่จำเป็นต้องตั้ง database

---

ขอให้สนุกกับการสำรวจหมู่บ้านนินจาครับ 🍃