สนามหมากรุก
Chessground เป็น UI หมากรุกโอเพ่นซอร์สฟรี/libre ที่พัฒนาขึ้นสำหรับ lichess.org โดยกำหนดเป้าหมายไปที่เบราว์เซอร์สมัยใหม่ รวมถึงการพัฒนาอุปกรณ์เคลื่อนที่โดยใช้ Cordova
ใบอนุญาต
Chessground ได้รับการเผยแพร่ภายใต้ ใบอนุญาต GPL-3.0 (หรือเวอร์ชันที่ใหม่กว่า ตามตัวเลือกของคุณ) เมื่อคุณใช้ Chessground สำหรับเว็บไซต์ของคุณ งานรวมของคุณอาจถูกเผยแพร่ภายใต้ GPL เท่านั้น คุณต้องเผยแพร่ซอร์สโค้ดของคุณ แก่ผู้ใช้เว็บไซต์ของคุณ
โปรดอ่านเพิ่มเติมเกี่ยวกับ GPL สำหรับ JavaScript บน greendrake.info
การสาธิต
- โปรแกรมดู PGN แบบฝัง
- หมากรุกทีวี
- บรรณาธิการบอร์ด
- ปริศนา
- คณะกรรมการวิเคราะห์
- ตัวอย่างเกม
คุณสมบัติ
Chessground ได้รับการออกแบบมาเพื่อตอบสนองทุกความต้องการบนเว็บและแอปมือถือของ lichess.org ดังนั้นจึงมีฟีเจอร์ค่อนข้างมาก
- พิมพ์ดีด้วย TypeScript
- เร็ว. ใช้อัลกอริทึม DOM diff แบบกำหนดเองเพื่อลดการเขียน DOM ให้เหลือน้อยที่สุด
- ขนาดเล็ก: 10K gzipped (31K แตกไฟล์) ไม่มีการพึ่งพา
- การวาดวงกลม ลูกศร และรูปร่างผู้ใช้แบบกำหนดเอง SVG บนกระดาน
- ลูกศรสแน็ปเพื่อการเคลื่อนไหวที่ถูกต้อง สามารถวาดลูกศรด้วยมือเปล่าได้โดยการลากเมาส์ออกจากกระดานและย้อนกลับขณะวาดลูกศร
- สามารถกำหนดค่าได้ทั้งหมดและกำหนดค่าใหม่ได้ตลอดเวลา
- จัดแต่งทรงผมด้วย CSS เท่านั้น: กระดานและชิ้นส่วนสามารถเปลี่ยนแปลงได้โดยเพียงแค่เปลี่ยนคลาส
- รูปแบบของเหลว: สามารถปรับขนาดบอร์ดได้ตลอดเวลา
- รองรับชิ้นส่วนและบอร์ด 3D
- รองรับมือถือเต็มรูปแบบ (touchstart, touchmove, touchend)
- ย้ายชิ้นส่วนด้วยการคลิก
- ย้ายชิ้นส่วนด้วยการลากและวาง
- ระยะห่างขั้นต่ำก่อนลาก
- การรวมศูนย์ของชิ้นส่วนไว้ใต้เคอร์เซอร์
- องค์ประกอบผีชิ้น
- ส่งคืนหรือทิ้งขยะ
- นำออกด้วยการคลิกหรือลาก
- ลากชิ้นส่วนใหม่ลงบนกระดาน (บรรณาธิการ, Crazyhouse)
- แอนิเมชันของชิ้นส่วน: เคลื่อนตัวและจางหายไป
- แสดงการเคลื่อนไหวครั้งล่าสุด ตรวจสอบ ย้ายจุดหมายปลายทาง และนำจุดหมายปลายทางออก (สามารถใช้เอฟเฟกต์โฮเวอร์ได้)
- ตำแหน่งการนำเข้าและส่งออกในรูปแบบ FEN
- การโทรกลับของผู้ใช้
- ไม่มีตรรกะหมากรุกอยู่ภายใน: สามารถใช้กับรูปแบบหมากรุกได้
การติดตั้ง
npm install --save chessground
การใช้งาน
import { Chessground } from 'chessground' ;
const config = { } ;
const ground = Chessground ( document . body , config ) ; เครื่องห่อ
- ตอบสนอง: react-chess/chessground, ruilisi/react-chessground
- Vue.js: vitogit/vue-กระดานหมากรุก, qwerty084/vue3-กระดานหมากรุก
- เชิงมุม: topce/ngx-chessground
- Svelte: agelas/svelte-chessground-ui, gtim/svelte-chessground, gtm-nayan/svelte-use-chessground
มากกว่า? โปรดส่งคำขอดึงเพื่อรวมไว้ที่นี่
เอกสารประกอบ
- ประเภทการกำหนดค่า
- ค่ากำหนดเริ่มต้น
- ลายเซ็นประเภท API
- ตัวอย่างแบบสแตนด์อโลนอย่างง่าย
- ตัวอย่าง repo
- ฐาน CSS
การพัฒนา
ติดตั้งการพึ่งพาการสร้าง:
ในการสร้างโมดูลโหนด:
หากต้องการสร้างแบบสแตนด์อโลน:
