🎰Kashino125

About Kashino125

เป็น Web App ที่ให้ผู้เล่นได้เล่นเกม Pokdeng โดยผู้เล่นจะต้องสมัครสมาชิกก่อนเล่นเกมเพื่อที่ระบบจะนำข้อมูลของผู้เล่นไปจัดอันดับ ซึ่งจะมีชื่อ และ คะแนนของผู้เล่นอยู่บน Leaderboard หรือจะเล่นในโหมด Anonymous ก็ได้แต่จะไม่มีการบันทึกคะแนนขึ้น Leaderboard โดยขั้นตอนการใช้งาน Web สามารถดูตาม GIF ด้านล่างได้เลย

ขั้นตอนการใช้งานแบบ Anonymous

ขั้นตอนการใช้งานแบบสมัครสมาชิก

Function ภายในเว็บ

Game Pokdeng

Leaderboard

Edit Account

ความสามารถของแต่ละ Component

Views :จำนวน 7 Views

Home.vue
หน้าแรกของตัวเว็บไซต์
Pokdeng.vue
ส่วนหน้าตาของเกม Pokdeng โดยจะมีการ UPDATE Points ไปยัง db.json ของผู้เล่นเมื่อกดเริ่มเกมและจบเกม
Signin.vue
ส่วนของการ GET ข้อมูลของ User จาก db.json เพื่อนำข้อมูลมาเช็คกับข้อมูลจาก Component AppSignin ที่ทำการส่ง emit มา ก่อนการ Sign in เข้าสู่ระบบ โดยถ้าชื่อหรือรหัสผ่านผิดจะทำการส่ง status การ login ไปยัง Component AppSignin เพื่อโชว์ข้อความเตือนผู้ใช้
Signout.vue
ส่วนของการ signout ออกจากระบบ
Signup.vue
ส่วนของการ POST ข้อมูลไปยัง db.json โดยจะทำการ GET ข้อมูลมาจาก db.json เพื่อเช็คว่าความถูกต้องของข้อมูลชื่อ username ที่ทำการระบุมาจาก Component AppSigup ที่ทำการส่ง emit มา ว่ามีอยู่ใน db.json แล้วหรือยัง
Leaderboard.vue
หน้าตาการจัดลำดับของผู้เล่นทุกคน โดยทำการ GET ข้อมูลจาก db.json และทำการ sort ข้อมูลตามจำนวน Points ของผู้เล่นจากมากไปน้อย
EditAccount.vue
เป็นในส่วนของหน้าที่สามารถ UPDATE และ DELETE ข้อมูลของผู้เล่น โดยสามารถเปลี่ยนได้ทั้ง Display name และ User name หรือจะทำการลบ Account

Components :จำนวน 7 Components

AppNavbar.vue
หน้าตาของ Navbar และจัดการเรื่องของการทำ router
AppSignin.vue
ส่วนหน้าตาของการ Signin และทำการส่ง emit ข้อมูลต่างๆจากการที่ผู้ใช้กรอกกลับมาให้กับหน้า View Signin.vue
AppSignup.vue
ส่วนหน้าตาของ Signout และทำการส่ง emit ข้อมูลต่างๆจากการที่ผู้ใช้กรอกกลับมาให้กับหน้า View Signup.vue
bot.vue
เป็นส่วนของหน้าตาการ์ดของบอท
card.vue
หน้าตาของการที่จะถูกสุ่มในเเต่ละใบ
player.vue
เป็นส่วนการ์ดของผู้เล่น
random.vue
ส่วนที่ทำการสุ่มเลขต่างๆ รวมไปถึงการ compare ของเกม

Vue 3 + Vite

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Recommended IDE Setup

VSCode + Volar

Installation and Usage

Install node_module

npm install

Run Project

npm run dev

Run Backend

npm run backend

INT203-Group5

No.	Name	Student ID
1	กัณฑ์พงษ์ ศรีสุธาภัทร์	63130500004
2	จิรสิน ฉัตร์บรรยงค์	63130500011
3	ชินภัค เจริญศิริ	63130500021
4	ทรรศภูมิ คงนิธิเฉลิม	63130500044
5	ธนกฤต แคนขา	63130500045

jirasin-c/sec-1-group-5-kashino125