SIT Orientation 2017 สานต่อสิ่งดีๆในวันปฐมนิเทศนักศึกษา

ขอขอบคุณภาพจาก ITBangmod Photo Club ชมรมคนรักการถ่ายภาพแห่ง IT บางมด!

On This Day…

SIT ORIENTATION 2016 ความล้มเหลวที่มีคุณค่า

ขอพาดพิงนิดนึง คือถ้าไม่มีพี่สองคนนี้ งานปฐมนิเทศปีนี้อาจจะเป็นแบบปีที่แล้ว ขอบคุณความผิดพลาดของพี่ ที่ทำให้พวกผมทำงานสำเร็จในวันนี้
- (พี่ซัน IT20 และ พี่ออฟ IT20)

เกริ่น…

ผมชื่อเต้ IT22 ครับ เพิ่งขึ้น ปี2 เต็มตัว และ เรียนอยู่ “ไอทีบางมด” ครับ ทำมาก็หลายงาน นานๆทีจะได้เขียนบล็อค จริงๆกะเขียนรวมบล็อคเดียว แต่อันนี้ต้องรีบเขียนนิดนึง เพราะโชกโชนสุดๆ อินมากๆ รวมวันที่ทำนี่ ยังไม่ถึง 14 วันเลย ที่ทำโปรเจคนี้ และเป็นโปรเจคที่ Learning Curve สูงโคตรๆ เพราะ Stack ที่ใช้เคยแตะแค่ React นิดหน่อย นอกนั้นไม่เคยแตะเลยครับ ซึ่งเป็นงานที่ทำแล้วสนุกจริงๆ แล้วได้อะไรกลับมาเยอะมากๆเลยครับ

#SIT #Alchemist #ITBangmod
#คณะเทคโนโลยีสารสนเทศ #มหาวิทยาลัยเทคโนโลยีพระจอมเกล้าธนบุรี

STACK | Front-end & Back-end

Stack | React + Socket.io + Express.js + Node.js

# DB ใช้ MySQL ต่อด้วย Knex.js
# CSS Framework — Bulma.io
#ปกติเขียน scss แต่งานนี้ลองใช้ styled-components+cssปกติ แล้วเออเขียนง่ายดีเลยติดใจชอบมากๆขอบอกต่อ

โปรเจคนี้คืออะไร?

เป็นโจทย์ที่พี่เริ่มไว้จากการที่ ปฐมนิเทศแบบปกตินั้นออกแนวน่าง่วงหนาวหาวนอน พวกเราจึงพยายามทำให้งานปฐมนิเทศ มีความน่าสนใจครับ

รูปแบบงานคือ ในงานจะมีการแนะนำอาจารย์ประจำคณะครับ(IT & CS) ถ้าปกติก็จะเรียกทีละคนไปเรื่อยๆจนครบใช่ไหมครับ? แต่เราไม่

สิ่งที่เราทำคือ! ทำเกมขึ้นมา 1 เกมครับ โดยที่เกมเนี่ยจะต้อง Interact กับน้อง ทำให้น้องไม่เบื่อง่ายๆ และรู้สึกสนุก , ตัวละครต้องสื่อถึงอาจารย์คนนั้นๆ และ สุดท้าย จะให้น้องเลือกตัวละครนั้นๆ ไปแล้วรวมคะแนนอาจารย์ที่มากที่สุดออกมาพูดแนะนำตัวครับ

ซึ่งในตอนแรกคิดได้หลากหลายเกมมากครับ โดยมีพี่ๆช่วยเหลือช่วยคิด โดยเกมแรกที่เลือกคือ เกมตีตัวตุ่น ตีม Retro เกม ที่นำ เกมปลูกผักเกมหนึ่ง มาใช้ครับ ซึ่งเกมจะมี Flow คือ

หน้าแรก > เลือกตัวละคร > เล่น > รวมคะแนนขึ้น Projector

ทีนี้เกิดปัญหามาหลายอย่าง คือ

• คิดไว้สำหรับเล่นเพื่ออาจารย์ 1 คน ( 1รอบ ได้ อาจารย์ 1 คน แนะนำตัว )
• เวลาไม่พอเมื่อคำนวนแล้ว ( คนนึงใช้เวลาประมาณ 3 นาทีขึ้นไป มีอาจารย์ 20 คน และมี เวลาแค่ 45 นาที )
• ด้าน Technical ถือว่าโหดมากจากการแนะนำจากเพื่อนปุ๊ และ พี่ๆ เพราะจะมีน้องเล่น หลัก 130 คนขึ้นไป และทำการยิงรัวๆตลอดเวลา ทำให้มีสิทธิล่มได้

จากโจทย์ที่เพิ่มมานี้ทำให้ เกมถูกเปลี่ยน ซึ่งด้านตัวเกมไม่เท่าไหร่ครับ โค้ดนี่พอแก้ได้ในเวลาไม่นาน แต่ที่สงสารที่ฝ่ายดีไซน์ (ขอโทษครับ ฮืออ) ที่แก้เยอะมากๆ ที่วาดไว้ก็ไม่ได้ใช้ซะเยอะเลย

สุดท้ายปรับแก้คิดไปคิดมา จนกลายเป็น “ Shake IT! ” เกมเขย่าแสนสนุกที่จะมาพร้อมกับท่าทางเขย่าเท่ๆของน้องๆครับ 😆

Note #ขอบคุณชื่อเกมเท่ๆจากพี่ชิน หัวหน้าทีมเกมแห่ง Alchemistครับ

Shake IT!

ตรงตัวครับ เขย่า-มัน แอบเล่นคำนิดๆว่าเขย่า-ไอที(แต่ไม่จริงจังคิดกันเล่นๆ คนคิดนี่สุดยอดจริงๆ)
เกมนี้จะแบ่ง ออกเป็น 3 ส่วนครับคือ
- user (เล่น)
- projector (แสดง)
- admin (ควบคุม)

ทำไมต้องแบ่งแบบนี้?

เนื่องจากต้องการแสดงข้อมูลที่ต่างกันออกไปครับคืออยากแบ่งเกมในส่วน
Front-end ของมือถือน้องๆ และ Projector ออกจากกัน และอยากมีหน้าแอดมิน
คอยคุม Flow เกมด้วย

โดยหน้าเล่นเกม ก็จะเป็นหน้าเล่นเกมของน้องๆ โดยเป็นเกม เขย่า !
เขย่าทำไม? เขย่าเพื่อให้ได้แต้ม แล้วนำแต้มของตัวละครที่ซ้ำๆกัน มารวมกันเพื่อจัด Ranking และ เพื่อแก้ปัญหาเรื่องเวลาไม่พอจากปีที่แล้วที่จะต้องเลือกทีละคน เราจึงแก้ไขปัญหาโดยให้อาจารย์มาพูดตามอันดับสูงสุด 3 อันดับแรกครับ

note # library ที่ใช้เขย่า คือ shake.js ลองเล่นดูสิ :)

สรุปแล้ว การเล่น 1 รอบ จะได้อาจารย์พูดแนะนำตัว 3 คน ทำให้เวลาที่คำนวนไว้เป็น
เวลาเริ่มเกม + Standby น้อง ประมาณ 1–3 นาที
เวลาเล่นเกมประมาณ คือ 1 นาที (เริ่ม — จบ Flow เกม)
และเวลาเรียนเชิญอาจารย์ 3 ท่าน ทั้งหมด 1นาที
จำนวนอาจารย์ทั้งหมด 20 คน

คำนวน โดย 20/3 * (3+1+1) = 33.33 นาที เป็นเวลาที่ดีมากๆ โดยเวลาที่เหลือคือ สำหรับ MC ในการดำเนินเกมครับ เป็นสิ่งที่ดีงามสุดๆ

Flow Game

เริ่มจากหน้า User (หน้าเกมของน้อง) จะมีการแบ่ง Routes ใน React Router ตามสถานะของน้องๆว่ากำลังอยู่หน้าไหน

React Router แบ่ง Route User ตามสถานะการเล่น

โดยจาก Route ก็จะไล่ UI ได้จากซ้ายไปขวาเลยครับ จะเป็นหน้าตาของเกมๆนี้

Flow Game with Wireframe from Design (แจม) #note หน้าสุดท้ายพื้นหลังสีเดียวกับ frame ที่ 3 #

อธิบาย
- เริ่มมาน้องจะไปที่ / เพื่อ Standby Game นับจำนวน Client ทั้งหมดด้วย Socket.io และแสดงผลหน้า Admin ว่ามีกี่คนแล้ว
- ต่อไปจะใช้ Socket.io ยิงไปที่ Client ให้เปลี่ยน Route เพื่อให้น้องเลือกตัวละครที่ชอบ
- หลังจากเลือกแล้วน้องจะ Standby ที่หน้า Wait เพื่อรอเริ่มเกม โดยจะส่งจำนวนคนที่อยู่ Route นี้ให้หน้า Admin เช่นกันเพื่อตัดสินใจว่าควรเริ่มเกมรึยัง
- เมื่อจำนวนน้องที่รอมากพอ จะสั่งเริ่มเกมโดยใช้ Socket ยิงอีกเช่นกัน แล้วจะเข้าสู่หน้านับถอยหลัง แล้วจะเริ่มอนุญาติให้น้องเขย่าใน 5 วินาที!
- เมื่อครบเวลาก็จะนำน้องเข้าสู่หน้า Result โดยบอกคะแนนที่น้องเขย่าได้ เป็นอันจบ Flow เกมของ Front-end Client น้องๆ

ภาพเมื่อน้องเลือกตัวละครเสร็จแล้ว ภาพจาก ITBangmod Photo Club ชมรมคนรักการถ่ายภาพแห่ง IT บางมด!

ต่อไปจะเป็นด้าน Projector ครับ มีการแบ่ง Routes เพื่อแสดงเหมือนกัน โดยจะแบ่งคล้ายๆ User แต่มีการตัดหน้า เลือกตัวละคร กับ Waiting ออก และ เพิ่มหน้า Ranking , อาจารย์ แต่ละท่าน และ หน้า Game Clear เข้ามาครับ

React Router แบ่ง Route Projector ตาม Flow โดยไล่ UI จากซ้ายไปขวา

อธิบาย
- เริ่มโดยเป็นหน้าเริ่ม /projector ครับ
- เมื่อน้องๆเลือกตัวละครครบกดเริ่มเกมจะ push ไปหน้า /run และนับถอยหลัง 3 2 1
- จากนั้นก็จะเป็นหน้า UI ว่า เขย่าสิ ! 5 วินาที
- แล้วก็จะเป็นหน้าหยุดเขย่าครับ (ลืมใส่ในภาพ ฮ่าา)
- จากนั้นเมื่อ Score อาจารย์ทุกท่านนิ่งแล้วก็จะเข้าสู่หน้า Ranking เพื่อแสดงอาจารย์ 3 อันดับแรกที่จะได้พูดครับ
- และ MC ก็จะให้สัญญาณอาจารย์พูด เราก็จะยิง ให้ push หน้าไปสำหรับอาจารย์ท่านนั้นๆ
- เมื่อครบ 3 คน จะเริ่มเกมใหม่เรื่อยๆ จนอาจารย์พูดครบก็จะ push เข้าสู่หน้า
Game Clear เป็นอันจบ Flow ครับ

หน้า Ranking แสดง 3 อันดับของอาจารย์ ภาพจาก ITBangmod Photo Club ชมรมคนรักการถ่ายภาพแห่ง IT บางมด!

ส่วนสุดท้าย Admin คุม Flow เกม และมี Service สำหรับดูแลระบบครับ ติดตามได้หัวข้อเทคนิคที่ใช้ด้านล่าง… อิอิ

วันจริงมาแล้ว!

คลิปบรรยากาศในงาน สามารถดูตัวเต็มได้ด้านล่างสุดครับ

เป็นวันที่ไม่ได้นอนเลย แล้วก็มาคุมงานต่อเลยครับ อารมณ์ตื่นเต้นกลบความง่วงไปหมด น้องๆทยอยเข้ามาตอน 9โมง กว่าๆ และงานก็เริ่มไปตาม Flow ด้วยเวลาที่เลทนิดหน่อย คืนก่อนเริ่มงานคุยกับฟลุ๊คว่า ระบบจะล่มไหมวะ? ฟลุ๊คบอกว่า ไม่ล่มหรอก
อยู่ดีๆฟลุ๊คก็บอกว่า ทอยเหรียญนะ ถ้าออกหัว ล่ม ออกก้อยไม่ล่ม ผลสุดท้ายคือ ออกก้อย! เป็นที่ยืนยันว่าระบบไม่ล่มด้วย เป็นหลักการระดับเทพพระเจ้ามากๆ 555 (ไร้สาระละ)
แต่มันเป็นสิ่งที่เพิ่มกำลังใจให้ทำงานต่อไปได้จริงๆนะ หลังจากที่งานเริ่มไปเรื่อยๆ ก็มีเว็บ SIT Freshmen ที่เป็นผลงานอีกชิ้นของพวกผมเหมือนกัน ก็ได้ขายไปโดยอาจารย์ภายในงาน
เอาล่ะ! เมื่อถึงเวลาเกมจะเริ่มแล้วว ตื่นเต้นมากๆ ได้ประสานงานกับพี่ๆว่าจะคอยบอกให้ว่าจะเริ่มเกมตอนไหน โดยการ Monitor จากหน้า Admin ซึ่งรอบแรกนี่ เครียดนิดนึงเพราะว่า ตัวเลขน้องเยอะมาก 160 คน กว่าเลยทีเดียวที่เข้าเกมมา แต่ตัวเลขที่บอกว่าน้องพร้อมเล่นมีแค่ 50 กว่าคน!! จากนั้นก็เลยให้น้องๆเลือกตัวละครใหม่ แล้วตัวเลขก็เปลี่ยนไปเป็น 140 คนกว่า จากนั้นก็เลยสั่งเริ่มเกมไป พอจบตาแรกก็มีความไหลลื่นมากๆ แม้จะเสียเวลาตอนแรกไป 5 นาทีได้ แต่หลังจากนั้นก็ปกติครับ เกมก็จะไหลตาม Flow ที่วางแผนไว้ เป๊ะๆ แม้จะมีอาจารย์ไม่มาก็สามารถข้ามไปได้ครับ

ภาพตอนน้องๆเขย่า ภาพจาก ITBangmod Photo Club ชมรมคนรักการภ่ายภาพแห่ง IT บางมด!

ผมมีความสุขมากเวลาเห็นน้องๆ เขย่ามือถือ มีความสุขจริงๆคือ น้องอินมากๆในการเขย่า ดูท่าทางสนุกสุดๆ จนอยากเข้าไปเล่นเองเลย

เกมดำเนินเรื่อยๆจนรอบสุดท้าย กลับเจอปัญหาอีกครั้งคือ เหลืออาจารย์ 1 คน แต่!ไม่มีข้อมูลอาจารย์คนๆนี้ แต่ก็ได้พี่แอลช่วยแก้ปัญหาให้ครับคือให้อาจารย์พูดแบบ Background ไม่มีอะไรเลย 55555 แต่ก็ผ่านไปได้ครับ อาจารย์ก็พูดภายในเวลา 1 นาทีพอดี (เฮ้อโล่งใจ) จากนั้นเป็นการจบงานอย่างสวยงาม ! (ได้เวลานอนแล้ว)

จบวันงานครับ

เทคนิคที่ใช้

เวลาเขียน ผมเขียนกับ ฟลุ๊ค เพื่อนของผมครับ ซึ่งฟลุ๊คจะขึ้นโครงหน้า Admin ส่วนผมจะขึ้น โครงหน้า user กับ projector

withSocket.js # ขอบคุณท่าที่ใช้ port เดียวในการรันจากพี่เฟิสครับ

ในการขึ้นโครงของผมจะใช้หลัก HOC (high order components) และใช้หลัก Singleton ในการนำ Socket ไปให้ทุกๆ Component ครับ โดยจะมีไฟล์เริ่ม withSocket เพื่อเก็บ Socket.io ไว้
แล้วจะใช้ withLayout ที่ เป็น HOC import withSocket เข้ามาใช้ เป็นฐานให้กับ Component อื่นๆครับ โดยจะใช้ทั้ง user และ projector ครับ ทำให้ component ไม่เยอะมากเท่าไหร่

withLayout.js

ส่วนหน้าอื่นๆก็จะมีการใช้ styled-component บางจุดที่อยากจะใช้ปรับ style เฉพาะจุดครับ ส่วนตัวคือ ติดใจนิดหน่อยว่าใช้ HOC ไม่คุ้มเท่าไหร่ แต่ถือเป็นการลองและเป็นบทเรียนครับ

สุดท้ายแล้วเวลาเก็บข้อมูลตัวละครกับ score ก็จะเก็บผ่าน Local Storage ครับ และเคลียร์ออกทุกครั้งที่จบเกม

วิธีการดึงข้อมูลล่ะ?

ผมใช้ Node.js และ Express.js ในการสร้าง api ขึ้นมาครับ โดย api จะ serve ข้อมูล json ออกมา ทั้งหมดจะมี 3 ตัวครับ คือ

/lecturers จะทำหน้าที่ดึงอาจารย์ที่ยังไม่ได้พูดออกมาครับ และจะใช้คู่กับ React ในการ Render ตัวละครที่เป็นอาจารย์ที่ยังไม่ได้พูดออกมา และจะ fetch ข้อมูลใหม่เมื่อเกมจบครับ จะใช้ socket รับว่าเกมจบรึยัง ถ้าจบให้สั่ง fetch ใหม่ ทำให้ ไม่จำเป็นต้องส่งข้อมูลของอาจารย์ผ่าน socket โดยตรงครับ

/projector เป็น api ที่ส่งข้อมูลอาจารย์ ทั้งหมด ให้กับหน้า projector สำหรับดึงข้อมูลตอน Ranking กับนับถอยหลังเวลาพูดของอาจารย์ครับ

/scores เป็นส่วนที่สำคัญสุดๆ คือจะทำหน้าที่เก็บอันดับอาจารย์ต่อรอบๆนึงไว้ และจะ Refresh เมื่อเริ่มเกมใหม่ครับ

ทางหน้า Admin ก็จะแบ่งเป็น Component ยิบย่อย ตามหน้าที่ของตัวเองครับ เช่นสั่ง fetch ก็จะเป็น 1 component แล้วส่ง socket ผ่าน props ตรงๆครับ

หน้า Admin ทำอะไรได้บ้าง?

หน้า admin นี่ผมได้ปรับ UI ครับให้มีความใช้ง่ายและสวยงาม โดยใช้ bulma.io เป็นฐานในการขึ้นโครงครับ โดยจะแบ่งการทำงานออกเป็นส่วนๆ เป็นแผง Panel ครับ
โดยจะมี

• Game Flow Panel (คอยควบคุมเกม)

Game Flow Panel ควบคุม Flow Game

• User Panel (คอย Monitor น้องว่าน้องอยู่ในหน้าไหนกันแล้ว ดูเวลาเกม และเวลาของอาจารย์ในการพูด)

• Lecturers Panel (สามารถ Fetch ดูสถานะอาจารย์ได้ว่าพูดรึยัง มี Score เท่าไหร่ในแต่ละคน)

• ส่วนสุดท้ายคือ Service (ใช้สำหรับ ปรับสถานะอาจารย์ ที่ไม่ได้มา หรือลบสถานะที่ใช้ตอนเทสครับ)

Socket.io

พูดมาก็เยอะแล้วว่าใช้ Socket แต่จัดการกับ Socket ยังไงล่ะ?

Socket จะใช้การ Join Room ในการแยก emit กับ on ครับ

#emit คือสั่ง , on คือรับ

โดย Room ที่ใช้จะแบ่งเยอะมากๆครับ

โดยที่ใช้หลักๆจะเป็นการ สั่งให้ไปตาม Flow อย่างเช่น
- Room Game เมื่อยิงแล้วก็จะ push ไปหน้าเล่นเกม
- speak ก็สั่งให้เริ่มนับถอยหลังเวลาอาจารย์พูด
แต่ที่อยากอธิบายคือ
getScore ครับ เป็น Room ที่หนักสุดๆ คือจะคอยรับการ Emit Score จากทุกๆเครื่อง และนำมา Sum ใน Array ตามไอดีของตัวเอง
เช่นมี น้อง A ส่งมาด้วย
{ id:1, score: 500} ข้อมูลนี้ก็จะถูกเก็บใน scores[1] = 500
เมื่อน้อง B ส่งมาด้วย
{ id:1, score: 100 } ข้อมูลก็จะอัพเดทว่า scores[1] += 100 เป็น 600 นั่นเอง
หลังจากนั้นก็จะสั่ง Sort Array จากหน้าแอดมินให้เรียงคะแนน และ Serv ให้หน้า Ranking ด้วย api /scores ครับ

ส่วนตัวรู้สึกว่าตัวเองใช้ socket เปลืองในด้าน Room มากๆ แต่พยายามแยกเพราะว่าไม่อยากให้มีการยิงใน Room เดียวกันเพราะอาจจะส่งผลกระทบได้ถ้าหากมีการรอรับ emit ก็เลยยอมที่จะแยกเยอะๆ แล้วจัดการ Room ให้มีหน้าที่ของตัวเองครับ

🌈สิ่งที่ได้รับ🌈

• รู้จักว่า api คืออะไรมากขึ้น
• รู้ว่า JS มันทำอะไรได้มากกว่า document.get… 5555
• ได้เขียน React แล้ววุ้ยยยยย
• ได้เขียน NodeJS
• ได้เขียน Socket
• ได้ลอง CSS Framework ที่นอกจาก Bootstrap นั่นคือ Bulma
• ได้ใช้ flexbox !
• ได้เขียนโปรแกรมที่ไม่ไร้ค่า มีคนใช้ และช่วยแก้ปัญหาได้ :)
• ได้ทำงานกับเพื่อน สนุกสุดๆ
• ได้เห็นน้องๆสนุกกับงานปฐมนิเทศ
• และอื่นๆ ที่ได้รับมาเยอะมากแต่อธิบายไม่ถูก :D

บทขอบคุณ

ขอบคุณและขอโทษคนที่ทำงานมาด้วยกัน คือ ป๋าฟลุ๊ค มากๆ ขอบคุณที่ทำงานมาด้วยกันตลอด อยู่ด้วยตั้งแต่เริ่มโปรเจคยัน launch เกมให้น้องเล่น ยันจบงาน ที่อดนอนมาด้วยกัน ที่ขอโทษคือ if นรก กับ -1 ที่ทำให้หัวร้อนมา ร่วม 6 ชั่วโมง แต่สนุกจริงๆที่ได้ทำงานมาด้วยกัน 555
ขอบคุณ พี่อู๋ รุ่นใหญ่ครับ ที่หาทางออกให้เกมนี้ ผมขอโทษครับไม่ได้เขียน Test 😅
ขอบคุณที่มาลุ้นด้วยกัน ตอนน้องเล่นเกมด้วย อิอิ
ขอบคุณพี่รุ่ง MC ที่ทำให้เกมไหลราบรื่นครับ
ขอบคุณพี่แอลครับ ที่คอยตามผม กับช่วยประสานงานให้ผมครับ
ขอบคุณ พี่เฟิส ครับไม่มีพี่ผมคงหาจุดลงโปรเจคนี้ไม่ได้แน่นอน พี่สอนผมเยอะมากๆเลย บางอย่างได้ใช้บ้าง ไม่ได้ใช้บ้างก็ขออภัยครับ แต่ไม่มีพี่นี่จบไม่ได้จริงๆ เป็นคนที่ทำให้ผมรู้จัก React ให้คำปรึกษาว่าแบบนี้จะดีหรือไม่ดี แบบไม่รู้จะพูดยังไงกับสิ่งที่พี่ให้มา เยอะมากจริงๆ ขอบคุณครับ
ขอบคุณ ไอปุ๊ ที่คอยให้คำปรึกษาเช่นกันเป็นคนที่ทำให้เห็นภาพว่าควรจะเขียนอะไรยังไงไปทางไหน ละคอยให้กำลังใจว่าจะไม่บึ้ม 555
ขอบคุณ พี่ปอง ถึงแม้จะไม่ได้มาดูมากแต่พี่คอยติดต่องานให้ตลอด และเชื่อใจน้องๆว่ามันจะผ่านไปด้วยดี และคอยดูแลเนื้อหา Freshmen ให้ครับ
ขอบคุณ พี่ซัน ที่เป็นตัวอย่างให้น้องว่าเคยมีความผิดพลาดอะไร ที่ควรแก้ ให้บทเรียนว่าไม่ควรทำอะไร จนเป็นงานนี้ออกมาได้ราบรื่น
ขอบคุณ พี่ออฟ เสี่ยกรรชัย คือถ้าไม่มีคนๆนี้ ผมอาจจะไม่ได้มีโอกาสทำอะไรที่มันเป็นประโยชน์ได้แบบนี้ แล้วก็อาจจะไม่ได้เรียนรู้อะไรที่มันเจ๋งๆ ไม่ได้ทำสิ่งที่มันทำแล้วมีความสุขอ่ะ สุดๆเลยคือ ได้เขียน React แล้วนะ ถ้าไม่มีพี่ ผมคงไม่ได้มาทำอะไรดีๆแบบนี้
ขอบคุณ ไอโว้ค ที่ทำเสียงให้เกมมีสีสันมากขึ้น ไม่น่าเบื่อ แถมฮาด้วย เย้
ขอบคุณ ทิดพี่ชิน ที่ให้คำปรึกษากับเกมๆนี้ครับ ช่วยได้เยอะมากๆเลย

ขอบคุณทีม Design
พี่แจน ที่วาดรูปให้มาใช้ในเกมนนะครับสุดยอดไปเลยย น่ารักทุกตัวเลย แถมงานมาไวสุดๆ
แจมมี่ ที่คอยอยู่ด้วยเหมือนกันอีกคนนึง ที่ช่วยทำ UI ในโค้งสุดท้ายให้ออกมาสำเร็จ และอยู่ด้วยกันยันเกมออกมาให้น้องเล่นเหมือนกัน เย้
พงสกี้ ที่ออกแบบให้แต่ไม่ได้ใช้ ขอบคุณครับ

ขอบคุณทีม Infra
พี่เป็นไท ที่ทำเซิฟเวอร์ให้ครับและคอย Monitor ร่วมลุ้นไปด้วยกันว่าจะบึ้มไม่บึ้ม 55555 ไม่มีพี่ ไม่มีเกมนี้เช่นกัน
ซันสุดหล่อ ที่ให้คำติดต่อเสมอตอนอยากได้รหัส server ที่มาแต่เช้าละช่วยได้มากเลย
พ่อหนุ่มเกมพรเลิศ ที่ทำ DB ให้นะ

ขอบคุณทุกๆคนที่มาร่วมงานกับเราทั้ง งาน Freshmen ที่มีคนออกแบบคือ
แจน จิว หมิง แนน ครับ สวยมั้กๆ ขอโทษที่สั่งงานดึกดื่นครับ
ขอบคุณทุกคนที่ร่วมเทสแล้วเจอบัคครับผม ทั้ง โบ๊ท ไกด์ พี่โอติส โจ้ และอื่นๆ อีกมากมาย
ขอบคุณ อาจารย์ ทุกท่านที่ให้คำชม คำแนะนำ และ ส่งเสริมเกมนี้นะครับ จะเก็บไว้พัฒนาตัวเองให้ดีขึ้นไปอีกเยอะๆเลยครับ
ขอบคุณ น้องๆทุกคน ที่มาเล่นเกมของพี่นะครับ พี่ดีใจมาก ขอโทษคนที่มีปัญหาระหว่างเล่นด้วยนะครับ ณ ที่นี้ ถ้าหากมาอ่าน

และท้ายสุด ขอขอบคุณผู้อ่าน นะครับ ที่อ่านมาถึงจุดนี้ ที่ได้อ่านประสบการณ์ของผม ที่ชอบลองของใหม่ให้ชีวิตตัวเอง หากไม่ถูกใจขออภัย ณ ที่นี้ครับ

วันหนึ่งผมเคยบอกว่า อยากเขียน React
และวันนี้ ผมได้เขียนมันแบบจริงๆจังๆ ที่มีคนใช้จริง
ได้ช่วยให้งานปฐมนิเทศ ยังคงไม่น่าเบื่อ และผ่านไปด้วยดี
ขอบคุณ Alchemist ที่ให้โอกาสได้ทำสิ่งใหม่ๆและมีประโยชน์ครับ

เริ่ม Flow Game 1:25:16 , ดูตัวอย่างเกมได้เวลา 1:41:17