כעת, נשאר לנו דבר אחרון לדאוג לו לפני שנוכל להתחיל לעבוד על מהלך המשחק עצמו – הפיכת הקלפים. יש לנו את הdiv שמייצגים את הקלפים. ואנחנו צריכים דרך לגרום לכך שבתחילת כל משחק הקלפים יהיו עם פנים כלפי מטה, וכאשר נלחץ על הקלף הוא יהפך. 

תחשבו. איך אפשר לגרום לכרטיס להיות עם 2 מצבים? 

גם אם אתם לא יודעים בפועל איך לעשות זאת, תנסו לחשוב איך אפשר לעשות זאת. זכרו שאתם צריכים להתייחס לאיך שהגדרתם את התמונה לכל קלף..

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

זמן ללמוד משו חדש: 

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

יש גם פקודה שנקראת toggle(נפגוש בהמשך) שפועלת באופן הבא: היא יכולה להוסיף class אם הוא לא קיים, או להוריד class אם הוא כבר קיים.

נסו לחשוב איך אפשר להשתמש בclass-ים בשביל לפתור את הבעיה שלנו? 

רעיון: 💡 

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

במקרה שלנו, נוכל לדוגמא בתחילת המשחק להוסיף את כל הקלפים לתוך class שנקרא facedown – כלומר class שייצב את הקלפים שהם מוצגים כלפי מטה, ואז בCSS, אנו נגדיר שכל מי שנמצא בclass הזה – שלא תופיע התמונה של הקלף אלא משו אחר. 

ואז נוכל בצורה דינאמית להחליט מתי אנחנו מוסיפים את הקלף לclass הזה, או מוציאים אותו מהclass הזה. וזה ישפיע על מה מה נראה בקלף. 

כמובן שאנו נרצה שהמצב הבסיסי של הקלף יהיה כלפי מטה, ורק כאשר לוחצים עליו הוא ייהפך. 

משימה: 

נסו להבין את הרעיון שנתנו ולהשתמש בו. 

כלומר הגדירו class חדש שמי שנמצא בו – אז הוא במצב שלא רואים את הקלף שלו. (או שכן רואים את הקלף. ההחלטה שלכם).

בשלב זה – תגיעו למצב שכשמתחילים לשחק – הקלפים הפוכים כלפי מטה.. נסו להבין איך אתם מוסיפים class לקלף, או קצת משנים את הקלף כדי שזה יתבצע. 

השלב הבא יהיה השלב המעשי של הפיכת הקלף. כלומר אנו נרצה להגיע למצב שבעת לחיצה על הקלף – הוא מתהפך.