Chrepps Blog

Bunt und granatenstark

Tag: JavaScript

Tutorial und erste Anpassungen – Rook Assistant Teil 4

Ich wühle mich durch das Tutorial und schreibe parallel die ersten Zeilen HTML und JavaScript. Dabei fällt mir direkt eine Verbesserungsmöglichkeit im Design auf.

Der Startscreen

Den ersten und zweiten Schritt aus dem Konzept kann man zusammenfassen, weil der erste Schritt ja wirklich nur aus „Spiel starten“ besteht. Vielleicht füge ich irgendwann Optionen oder Statistiken hinzu, aber mit den Problemen kann sich Zukunfts-Christian beschäftigen.

Der neue Startscreen wird also direkt die Möglichkeit enthalten, ein Spiel mit vier oder fünf Spielern zu starten. Grundsätzlich verfolge ich das Ziel, die Anzahl der Modi so klein wie möglich zu halten. Darin liegt die Komplexität der App.

Konzept und Praxis

Über den Startscreen hinaus hat es sich als sehr nützlich herausgestellt, dieses recht ausführliche 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) gelesen hatte, direkt mit einer simplen Vue.js-Funktionalität umgesetzt, die sich „v-if“ nennt. Bei dem folgenden Code handelt es sich um meine aktuelle Version des Startscreens:

<div v-if="isVisible('screen_welcome')">
   <rook-headline v-bind:item="text.screen_welcome"></rook-headline> 
   <div><button v-on:click="startNewGame(4)">Spiel mit vier Spielern</button></div>
   <div><button v-on:click="startNewGame(5)">Spiel mit fünf Spielern</button></div>
</div>

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:

Sehr praktisch war hier das Tool ScreenToGif. Es lässt sich einfach bedienen und liefert genau das, was ich brauche.

Das ist aber nicht so schön!

Anstatt die Logik zu Ende zu schreiben, werde ich mich jetzt doch schon mit der Optik beschäftigen. Mir ist da nämlich ein Framework über den Weg gelaufen, dass mir ganz gut gefällt. Es heißt Onsen UI und bis zum nächsten Artikel werde ich damit rumspielen.

Ein kleines Neben-Projekt – Rook Assistant Teil 1

Rook ist ein Kartenspiel, für das es keine deutschsprachige Wikipedia-Seite gibt und es macht süchtig. Man kann es sich wie Skat vorstellen insofern, dass man vorher bieten muss und man spielt, wenn man das Gebot gewonnen hat, mit einem Mitspieler. Mehr will ich hier gar nicht zu den Regeln sagen. Entscheidend ist, dass man nach jeder Runde die gesammelten Punkte notiert und derjenige, der als erster mehr als 1000 Punkte hat, gewinnt das Spiel. Hat ein Spieler weniger als -1000 Punkte, werden auch die Punkte gezählt und derjenige mit den meisten Punkten gewinnt.

An sich ist es kein gewaltiger Aufwand, eine Tabelle auf einen Zettel zu schreiben, bei der die Spalten die Mitspieler (4 bis 5) sind und die Zeilen die Spiele, aber ich dachte mir, es wäre doch eine interessante Herausforderung, dem „Schreiber“ die Arbeit zu erleichtern, indem man die Ergebnisse in eine einfach App eingibt, die dann den Zwischenstand hübsch ausgibt, während man spielt.

Da real MVP

Als wir im letzten Herbst spät abends mit der Familie über eine solche App brainstormten, ist mir schnell klar geworden, dass wir ein sehr einfaches Minimum Viable Product (MVP) definieren sollten. Es gibt viele Features, die man sich gut vorstellen könnte, aber meine Zeit ist kostbar und es soll ja auch tatsächlich fertig werden. Darum habe ich entschieden, dass die App wirklich nur die Features bieten soll, die eine Papier-Tabelle auch liefert, aber etwas komfortabler. Wenn der Stand erreicht ist, kann man über weitere Features nachdenken.

Anforderungsaufnahme

Ok, ich entwickle die App ganz alleine und vermutlich könnte ich eine funktionierende Version an einem entspannten Nachmittag runterhacken, aber ich versuche jetzt mal, möglichst formal vorzugehen, ohne zu übertreiben. Meine App sollte wenigstens die folgenden Features beinhalten:

  • Neues Spiel starten (4 oder 5 Mitspieler)
  • Namen der Mitspieler eingeben
  • Neues Blatt starten
  • Gebot eingeben
  • Erhöhen (auf 360, 720, 1005)
  • Kartengeber eingeben
  • Ggf. Mitspieler eingeben
  • Eingeben, ob der Stich gewonnen oder verloren wurde
  • Eingeben, wie viele Punkte die Gegenseite gesammelt hat

Ist das alles? Am besten mache ich noch ein Flussdiagramm. Das eigentliche Spiel wird nicht abgebildet, sondern nur die Funktionen, die meine App haben soll.

 

Was jetzt? Ich denke, eine Art technisches Konzept wäre jetzt angebracht. Ein paar Ideen habe ich schon. Gegen eine native App habe ich mich bereits entschieden, weil es ja ein kleines Projektchen werden sollte und darum wird die Sprache wohl JavaScript sein. Mehr dazu schreibe ich dann im zweiten Teil.

© 2020 Chrepps Blog

Theme by Anders NorenUp ↑