![\"\"](\"http:\/\/cdn2.spiegel.de\/images\/image-685335-galleryV9-pxcg-685335.jpg\")
<\/p>\nIch w\u00fchle mich durch das Tutorial und schreibe parallel die ersten Zeilen HTML und JavaScript. Dabei f\u00e4llt mir direkt eine Verbesserungsm\u00f6glichkeit im Design auf.<\/p>\n
<\/p>\n
Den ersten und zweiten Schritt aus dem Konzept kann man zusammenfassen, weil der erste Schritt ja wirklich nur aus „Spiel starten“ besteht. Vielleicht f\u00fcge ich irgendwann Optionen oder Statistiken hinzu, aber mit den Problemen kann sich Zukunfts-Christian besch\u00e4ftigen.<\/p>\n
Der neue Startscreen wird also direkt die M\u00f6glichkeit enthalten, ein Spiel mit vier oder f\u00fcnf Spielern zu starten. Grunds\u00e4tzlich verfolge ich das Ziel, die Anzahl der Modi so klein wie m\u00f6glich zu halten. Darin liegt die Komplexit\u00e4t der App.<\/p>\n
\u00dcber den Startscreen hinaus hat es sich als sehr n\u00fctzlich herausgestellt, dieses recht ausf\u00fchrliche Konzept gemacht zu haben, weil ich direkt wusste, welche Elemente auf welcher Seite zu sehen sein sollten. Die verschiedenen Modi habe ich, nachdem ich die ersten zwei Seiten des offiziellen Tutorials (https:\/\/vuejs.org\/v2\/guide\/index.html<\/a>) gelesen hatte, direkt mit einer simplen Vue.js-Funktionalit\u00e4t umgesetzt, die sich „v-if“ nennt. Bei dem folgenden Code handelt es sich um meine aktuelle Version des Startscreens:<\/p>\n Hier sieht man in der ersten Zeile direkt das „v-if“ und es bewirkt, dass der ganze Block nur dann angezeigt wird, wenn das Innere („isVisible…“) wahr ist. Der Modus hier nennt sich nun „screen_welcome“, also wird dieser Block nur dargestellt, wenn „screen_welcome“ als sichtbar gekennzeichnet wird. Auf diese Weise habe ich bereits die ganze Klick-Strecke umgesetzt. Sie hat noch keine Logik, also die Tabelle wird nach einem Stich noch nicht aktualisiert und die Optik war erstmal vollkommen egal. Hier ist ein kleiner Einblick als Gif:<\/p>\n Sehr praktisch war hier das Tool ScreenToGif<\/a>. Es l\u00e4sst sich einfach bedienen und liefert genau das, was ich brauche.<\/p>\n<div v-if=\"isVisible('screen_welcome')\">\r\n <rook-headline v-bind:item=\"text.screen_welcome\"><\/rook-headline> \r\n <div><button v-on:click=\"startNewGame(4)\">Spiel mit vier Spielern<\/button><\/div>\r\n <div><button v-on:click=\"startNewGame(5)\">Spiel mit f\u00fcnf Spielern<\/button><\/div>\r\n<\/div><\/pre>\n![\"\"](\"http:\/\/www.christian-epp.de\/wp-content\/uploads\/2018\/07\/Rook_Assistant_First.gif\")
<\/a><\/p>\nDas ist aber nicht so sch\u00f6n!<\/h3>\n