รายละเอียดการแก้ไขเ้พิ่มเติม

1. เพิ่มจำนวนรอบในการเดาคำสูงสุด เพื่อให้ผู้เล่นคิดให้รอบคอบก่อนเดาคำ หากเดาผิดครบจำนวนรอบที่กำหนด จะไม่สามารถเดาคำต่อไปอีกซึ่งสามารถตั้งค่าจำนวนได้ที่หน้า App.js โดยส่งเป็น props ชื่อ max_attempts ลงไปเป็นข้อมูลให้กับ sate ของ WordCard เพื่อใช้กำหนดใน CharacterCard ให้ไม่สามารถกดเดาคำได้หากเดาผิดครบจำนวนรอบที่กำหนด โดยในส่วนของ CharacterCard ได้เพิ่ม state ตัวหนึ่งชื่อว่า available เพื่อใช้ในการตรวจสอบค่าพร้อมกับ state active ว่าสามารถกดได้หรือไม่ (เริ่มต้นให้กดได้ true) และหากเดาผิดครบจำนวนรอบที่กำหนดก็ทำการเปลี่ยน state available ให้เป็น falseทำให้ไม่สามารถกดปุ่มเดาคำเพื่อเปลี่ยน state active ได้อีก (เดาคำต่อไม่ได้นั้นเอง)

2. สร้าง css style ชื่อ .topCard สำหรับแสดงตัวอักษรที่หน้าเว็บให้ใหญ่

3. เพิ่มคำแสดงหน้าเว็บและแสดงจำนวนรอบสูงสุดที่สามารถเดาได้

4. เพิ่มระบบแพ้กับชนะ โดยสร้าง state ตัวหนึ่งที่หน้า App.js ใช้ในการกำหนดคำสำหรับแสดงว่า แพ้("GAME OVER!!) หรือชนะ("GUESS WELL!!") (ซึ่งเริ่มต้นให้มีค่าเป็น '' คือไม่แสดงอะไร) และสร้างฟังก์ชั่น gameController ขึ้นมาสำหรับกดหนด state มี parameter คือ props ของ WordCard หาก state.completed เป็น true แสดง "GUESS WELL!" แต่หากจำนวนรอบการเดาครบจำนวณรอบการเดาสูงสุด แสดง "GAME OVER!!" ซึ่งจะส่งฟังก์ชั่นตัวนี้ลงไปให้กับ WordCard เรียกใช้ โดยเรียกด้วยฟังก์ชั่นuseEffect อีกที

5. เพิ่มจำนวนการรอบที่ผู้เล่นได้เดาไปแล้ว จากคำสั่งที่ว่าทุกครั้งที่เดาผิดจำนวนรอบที่เดาไปแล้วจะเพิ่มขึ้นแล้วเก็บลงใน state ของ WordCard (attempt) ผมจึงได้ สร้าง state ชื่อ attempt สำหรับแสดงจำนวนรอบที่เดาไปแล้วที่หน้า App.js โดยให้เปลี่ยน state ทุกครั้่งที่ gameController ถูกเรียกใช้ และนำตัวแปรนี้ไปแสดงที่หน้าเว็บอีกที

6. แก้ไข layout หน้าเว็บ เปลี่ยน css style จาก .topCard เป้น .bigText เพื่อไม่ให้สับสนกับ card และสร้าง css style ชื่อ .main สำหรับปรับ layout ของหน้าเว็บให้ทุกๆelementอยู่ตรงกลางพร้อมใส่กรอบให้ด้วย

7. เพิ่มปุ่มเริ่มเกมใหม่ โดยปุ่มนี้จะถูกสร้างหากข้อความแพ้ชนะถูกสร้างก่อน (ไม่มีค่าเป็น '') โดยปุ่มนี้เมื่อกดจะทำการเรียกฟังก์ชี่ยน refreshPage สำหรับ reload หน้าเว็บ ซึ่งจะทำให้ค่าทั้งหมดกลับเป็นเริ่มต้น (เริ่มเกมใหม่นั้นเอง)

8. ปรับแต่ง css เพิ่มเติม ปรับขนาดความหนาตัวอักษรของคำว่า GUESS THE WORD ! ปรับสีและความหนาของตัวอักษรของ ข้อความแพ้ชนะ สร้าง css style button ให้ดูเหมือนปุ่มมากขุึ้น สี ขนาด เมื่อเอาเมาส์ไปวางจะมืดลงเสมือนให้กดได้

Inline-style: