Interactive Fun Cards
⚡ ปัจจุบันนี้ถ้าจะพัฒนาเว็บให้ดึงดูดผู้ใช้งาน คงหลีกเลี่ยงไม่ได้ที่จะทำให้เว็บดูสวยๆ และต้องมี interactive กับผู้ใช้ด้วยการแสดงอนิเมชันต่างๆ แน่นอนว่าในบทความนี้จะแสดงตัวอย่างการใช้ StimuluJS 🌈 มาช่วยจัดการเว็บกันหน่อย เรามาดูกันว่าโจทย์สำหรับบทความนี้จะเป็นอะไร
โจทย์
สุ่มตัวเลขตามจำนวนการ์ดที่กำหนดไว้ 🎲 โดยในเบื้องต้นจะให้คว่ำการ์ดเอาไว้ก่อน จนกว่าจะมีการคลิกจึงจะเปิดหน้าการ์ดขึ้นมาเพื่อแสดงตัวเลข โจทย์ในวันนี้ช่างง่ายดายจริงๆ มาลองพัฒนากันดู
แนวทางการพัฒนา
- โดยหลักๆ แล้ววันนี้เราจะใช้ stimulus controller 2 ตัวมาใช้ในการควบคุมด้วยกัน
-
GameController โดยเมื่อถูกสร้างขึ้นมาจะมีการสุ่มตัวเลข ตามจำนวนการ์ดที่ได้รับมาจากหลังบ้าน (Backend) และเก็บเอาไว้ ทันทีที่การ์ดแต่ละใบถูกสั่งให้เปิดก็จะแสดงตัวเลข
-
CardController ใช้สำหรับควบคุมการเปิด/ปิดการ์ดแต่ละใบ โดยเมื่อการ์ดถูกเปิดแล้วจะมีระยะเวลาจำกัด 2 วินาที และจะปิดการ์ดทันที
-
ผลลัพธ์
เรียนรู้อะไรบ้าง
- เราสามารถใช้ controller หลายๆ ตัวร่วมกันได้
- ถ้าเราออกแบบดีๆ เราก็สามารถนำ controller ไป reuse ใช้ได้กับ component อื่นๆ ได้ จากตัวอย่างก็จะเห็นว่าการ์ดแต่ละใบก็จะใช้ Card Controller แยกออกจากกัน
<div class="card" data-controller="card" data-card-openned="false" data-target="game.card card.element" data-game-index="<%= index %>"
data-action="click->game#showCard click->card#flip">
<div class="card__inner">
<div class="card__front">
<%= image_tag 'back.png', class: "image" %>
</div>
<div class="card__back">
</div>
</div>
</div>
ถ้าอยากดูรายละเอียดเพิ่มเติมดูได้จาก repo ที่แชร์ไว้ด้านล่างนะครับ 👇