איקס עיגול בClojure – חלק ג׳ צד לקוח בSvelte

אז למה לי framework חדש עכשיו?

אז אחריי שבפוסטים הקודמים הסברתי איך לפתח לוגיקה של איקס עיגול וצד שרת, הגיע הזמן לפתח צד לקוח, כאשר המטרה שלי בפוסט זה לממש web-UI קטן ונחמד בשפת svelte שמתממשק עם השרת (והלוגיקה) שכתבתי בפוסטים הקודמים.

התמזל מזלי ובשנה שהתחלתי להתעסק בפיתוח צד לקוח בweb, React יצאה לאוויר העולם כך שלא נאלצתי לעשות שמיניות באוויר עם jQuery כדאי לגרום לדברים לעבוד. מדי פעם התעמקתי מעט בframeworks אחרים אך לא מצאתי שום סיבה טובה לפתח פרויקט גדול בארכיטקטורה שונה. ריבוי הספריות והפופולריות של React בקרב מפתחים הם סיבה טובה למה לבחור בReact כארכיטקטורה המרכזית בפרויקט הבא שלך. אך לאחר שראיתי סרטון קצר שסקר את Svelte גמלה בליבי החלטה להתנסות בהקדם בכתיבה בשפה זו (ספוילר- היה מדהים!).

כתיבה בSvelte מזכירה מאוד כתיבה בReact בכך שגם כאן כותבים באופן דקלרטיבי ולא פונקציונלי אך בשונה מReact הקוד שאתה כותב לא רץ באופן ישיר בדפדפן (כן כן, אני יודע שגם הקוד של React מתקמפל מjsx ל js) אלא מתקמפל לקוד javasript גדול מכוער ומאוד מאוד יעיל. שלא כמו React וספריות רבות אחרות המשתמשות בVirtual DOM בשביל לממש את עדכוני המצב של האתר, בSvelte נהנים משתי העולמות:

כתיבה נוחה באופן דקלרטיבי (בדומה לReact)
ריצה יעילה מאוד של הקוד המושג בעזרת תרגום של קוד הsvelte לקוד js פונקציונאלי הרץ באופן יעיל ומבצע את השינויים בDOM באופן מידי.

להבנה עמוקה יותר של העניין (ובכלל דרך להתחיל להיכנס לשפה) מומלץ להסתכל כאן.

וכעת נעבור לקוד

את הקוד עצמו מימשתי בשתי איטרציות. שלב ראשון UI מכוער אבל עובד קצה אל קצה, שלב שני להוסיף עיצוב מגניב. באופן כללי כשאני עובד על פרוייקטים של UI אני משתדל לממש בשלב הראשון קצה אל קצה כדי שיהיה אפשר למצוא בעיות באינטגרציה עם צד השרת בשלב מוקדם.

מימוש פונקציונליות של המשחק

נתחיל במימוש של כפתור המתחיל משחק חדש:

let game_id;

const URL = "https://9kyk6iii2a.execute-api.eu-west-1.amazonaws.com/tic-tac-toe-clojure"

async function genericApiCall(data) {

const response = await fetch(URL, {

method: 'POST',

headers: {

'Content-Type': 'application/json'

body: JSON.stringify(data)

})

return await response.json();

}

async function startMewGame() {

const data = await genericApiCall({action: "start_new_game"})

game_id = data.game_id

}

</script>

<main>

<h1 on:click={startMewGame}> Start New Game </h1>

{#if game_id}

{/if}

</main>

<style>

h1 {

color: #ff3e00;

cursor: pointer;

}

</style>

כל קובץ svelte מתחלק ל3 חלקים, סקריפט, HTML וCSS. החלק העליון, הסקריפט כתוב בJS שם אנחנו מגדירים את הפונקציות ואת המצבים. בחלק האמצעי אנחנו כותבים קוד HTML עם תוספות ייחודיות לsvelte כמו דרך להגדיר רנדור המתבסס על תנאים ולולאות ולעשות binding של מצבים ופונקציות מהחלק של הjs. וכמו כן להשתמש ברכיבים (components) הממומשים בקבצי svelte אחרים. שיכול להשתמש בכל אחד מהמשתנים שהגדרנו בחלק העליון של הסקריפט והחלק השלישי של הקובץ הוא חלק של הcss שמה שמיוחד בו הוא שבשונה מcss רגיל כאן ההשפעה היא מקומית כך שכותרת של h1 בקובץ אחר לא תקבל את הצבע האדום.

בקטע הקוד הנוכחי אני מדגים שימוש בbinding של מידע במשתנה game_id של קריאה לפונקציה startNewGame ושימוש בcss המשפיע אך ורק בscope של הקובץ הנוכחי. (חדי העין ישימו לב שקריאות הAPI מעט שונות מהקריאות בפוסט הקודם, זה מכיוון שעברתי למימוש של serverless בעזרת פונקציות lambda של aws פירוט על כך יהיה ניתן לקרוא בפוסט הבא: איקס עיגול בClojure – חלק ד׳ עולים לפרודקשיין) .

נוסיף קוד שמרנדר את לוח המשחק:

import Cell from './Cell.svelte';

let game_id;

let game_data = {}

const URL = "https://9kyk6iii2a.execute-api.eu-west-1.amazonaws.com/tic-tac-toe-clojure"

async function genericApiCall(data) {

const response = await fetch(URL, {

method: 'POST',

headers: {

'Content-Type': 'application/json'

body: JSON.stringify(data)

})

return await response.json();

}

async function startMewGame() {

const data = await genericApiCall({action: "start_new_game"})

game_id = data.game_id

}

async function updateGameBoard() {

if(!game_id) return;

game_data = await genericApiCall({action: "get_game_update", game_id})

}

setInterval(updateGameBoard, 500)

</script>

<main>

<h1 on:click={startMewGame}> Start New Game </h1>

{#if game_data.board}

{#each game_data.board as row, i}

{#each row as cell, j}

{/each}

</div>

{/each}

{/if}

</main>

<style>

h1 {

color: #ff3e00;

cursor: pointer;

}

</style>

כדי לרנדר את הלוח אני עושה שימוש בלולאת בhtml המורחב (אופן כתיבת התנאים והלולאות מזכיר מאוד דרך של כתיבת html בצד שרת). ובנוסף לכך אני משתמש ברכיב חיצוני שמימשתי בקובץ Cell.svelte.

export let value;

</script>

<div>

{value || ""}

</div>

<style>

div {

width: 100px;

height: 100px;

border: 2px solid black;

}

</style>

השימוש בexport בחלק העליון של הסקריפט בקוד מגדיר שזהו משתנה המקבל את הערך שלו מהרכיב שמשתמש בו (כמו props בReact). הוספתי עיצוב פשוט של מסגרת וגודל קבוע לכל הdiv ברכיב הנוכחי (זה ממש מגניב שהcss לא משפיע על רכיבים אחרים ככה אפשר להגדיר ישרstyle של div בלי להשתמש בclass…) על מנת לקבל לוח בסיסי.

כעת נוסיף גם קוד שמציג את מצב המשחק (תור מי לשחק), מבצע מהלכים על הלוח מציג שגיאות וגם מי ניצח במשחק:

import Cell from './Cell.svelte';

let game_id;

let game_data = {}

let error;

const URL = "https://9kyk6iii2a.execute-api.eu-west-1.amazonaws.com/tic-tac-toe-clojure"

async function genericApiCall(data) {

const response = await fetch(URL, {

method: 'POST',

headers: {

'Content-Type': 'application/json'

body: JSON.stringify(data)

})

return await response.json();

}

async function startMewGame() {

const data = await genericApiCall({action: "start_new_game"})

game_id = data.game_id

}

async function updateGameBoard() {

if(!game_id) return;

game_data = await genericApiCall({action: "get_game_update", game_id})

}

async function move(x,y) {

const data = await genericApiCall({action: "move", x, y, game_id})

error = data.error

}

setInterval(updateGameBoard, 500)

</script>

<h1 on:click={startMewGame}> Start New Game </h1>

<main>

<h1 on:click={startMewGame}> Start New Game </h1>

{#if game_data.board}

{#each game_data.board as row, i}

{#each row as cell, j}

{/each}

</div>

{/each}

<p> You play: {game_data.player} turn: {game_data.turn}</p>

{/if}

{#if error}

<h4> {error} </h4>

{/if}

{#if game_data.winner}

<h2> The winner is: {game_data.winner}</h2>

{/if}

</main>

<style>

h1 {

color: #ff3e00;

cursor: pointer;

}

.row {

display: flex;

}

</style>

כלח מה שעשיתי זה להוסיף עוד כמה נתונים לתצוגה וקריאת API לmove (בסה״כ מי שמשתמש בכל framework web מודרני ימצא את הקוד ברור וקריא). כמובן שאת הcb שמועבר לCell צריך לממש גם בקובץ שלו:

</style>

export let value;

export let cb;

</script>

{value || ""}

</div>

<style>

div {

width: 100px;

height: 100px;

border: 2px solid black;

}

</style>

וזהו סיימנו את השלב הראשון, ממשק שלם מקצה-לקצה בפחות מ80 שורות קוד! מגניב ממש! הנה סרטון קצר של הממשק:

מהו הטבע ללא אסתטיקה?

ועכשיו מגיע הכיף של לעצב את המשחק. בחרתי לעצב את המשחק כמשחק רטרו של שנות ה80. אתחיל בלשנות את הפונט הראשי לפונט רטרו של משחקי מחשב ישנים, על ידי הוספת הפונט לתיקיית הpublic ושינוי הGlobal.css (קובץ שמגיע כמתחילים פרויקט מTemplate).

@font-face {

font-family: 'PressStart2P';

src: url('PressStart2P-Regular.ttf');

}

body {

color: #333;

margin: 0;

padding: 8px;

box-sizing: border-box;

font-family: PressStart2P;

}

נוסיף מסך פתיחה מגניב למשחק ע״י שינוי קצת html:

{#if !game_id}

{#if show_intro}

<h3>Route42 Present:</h3>

</div>

<p> A <span style="color: blue">MAN</span> AGAINST </p>

<p> A <span style="color: red">MACHINE</span> ADVENTURE </p>

</div>

{/if}

{#if !gameLoading}

<h1 on:click={startMewGame}> Start New Game </h1>

{:else}

<h1 on:click={startMewGame} style="color: yellow"> Loading... </h1>

{/if}

</div>

{/if}

ועוד הרבה css:

main {

text-align: center;

margin: 0 auto;

margin-top: 120px;

width: 480px;

height: 640px;

border: 1px solid black;

display: flex;

align-items: center;

flex-direction: column;

color: white;

background-color: black;

position: relative;

}

.start-new-game {

width: 480px;

height: 640px;

position: absolute;

top: 0px;

left: 0px;

}

.intro {

width: 480px;

height: 480px;

position: absolute;

top: 0px;

left: 0px;

}

.intro h3 {

color: magenta;

margin-top: 64px;

}

.intro h2 {

margin-top: 64px;

color: yellow;

}

.ascii_board {

margin: 80px;

color: cyan;

}

.ascii_board p {

font-size: 32px;

margin-top: -44px;

}

@keyframes flickerAnimation {

0% { opacity:0; }

49.9% { opacity:0; }

50% { opacity:1; }

100% { opacity:1; }

}

.start-new-game h1 {

cursor: pointer;

margin-top: 560px;

font-size: 24px;

color: magenta;

animation: flickerAnimation 1.5s infinite;

}

הוספתי רכיב חדש AnimatedSpan.svelte שעושה אנימציה על פי מצב פשוט שהוא מקבל כנתון

export let value;

export let enterAtStep;

export let step;

</script>

{#if step > enterAtStep}

<span> {value} </span>

{:else}

{/if}

ואני שולט על המצב שלו עם סקריפט פשוט:

function nextStep() {

step = (step + 1) % MAX_ANIM_STEP

show_intro && setTimeout(nextStep, ANIM_TIME)

}

setTimeout(nextStep, ANIM_TIME)

מכיוון שלוקח מעט זמן לקבל תגובה מהשרת, שכן כדי לראות את המהלך צריך לבצע שתי קריאות API (ביצוע המהלך, ועדכון הלוח) הוספתי מימוש של חווית משתמש אופטימית בו אתה מניח שהשרת יאשר את המהלך ואתה מציג את הלוח עם המהלך לפניי שקיבלת אישור מהשרת (כך לדוגמא אפשר ללחוץ על משבצת של היריב ולהחליף אותה לכמה שברירי שנייה לצבע שלך…) הקוד לביצוע די קצר:

async function updateGameBoard() {

if(!game_id) return;

game_data = await genericApiCall({action: "get_game_update", game_id})

performOptimsticMove()

if (game_data.winner) {

game_id = null;

}

function performOptimsticMove() {

if(!optimsticMove) return;

const {x, y} = optimsticMove

game_data.board[x][y] = game_data.player

}

async function move(x,y) {

optimsticMove = {x, y}

performOptimsticMove()

const data = await genericApiCall({action: "move", x, y, game_id})

optimsticMove = null

error = data.error

if(error) {

// we want the user to only see the errors for 1.5 seconds

clearTimeout(timer)

timer = setTimeout(() => {

error = null

}, 1500)

}

וזהו יש לנו משחק! כמה מגניב ופשוט!

את הקוד המלא ניתן לראות כאן. וכאן ניתן לשחק במשחק באון-ליין.

מחשבות לעתיד

הופתעתי לטובה מהזמן הקצר בו עלה בידי לכתוב את הממשק, לכך לי בערך כשעתיים וחצי לכתוב את הצד לקוח כולל עיצוב (אני מעריך שבReact הייתי עושה את זה מהר יותר ב70% אבל כמובן שהזמן הזה ירד עם אימון בשפה). כך שבעתיד אחשוב על svelte ברצינות לפניי שאתחיל את הפרויקט הweb הבא שלי.

בפוסט הבא והאחרון בסדרה אסקור איך מעלים את כל הקוד לפרודקשיין באופן יעיל מהיר וזול.

איקס עיגול בClojure – חלק ג׳ צד לקוח בSvelte

אז למה לי framework חדש עכשיו?

וכעת נעבור לקוד

מימוש פונקציונליות של המשחק

מהו הטבע ללא אסתטיקה?

מחשבות לעתיד

קשור

כתיבת תגובה לבטל