Chrepps Blog

Bunt und granatenstark

Tag: Onsen

Pet projects will put you in your grave – Rook Assistant Teil 5

13. Juli 2018 / / 0 Comments

Ich musste viel über den Satz nachdenken, den Dan Olson in einem Video über kreative Motivation brachte: „Pet projects will kill you“. Der Hintergrund dazu ist, dass er ein Verfechter davon ist, Projekte möglichst schnell abzuschließen. Er erwähnt auch eine Challenge, in der man sich vornimmt, etwas anzufangen und nach einer bestimmten Zeitspanne als fertig erklärt. Nicht „schau mal, was ich hier angefangen habe“, sondern „Es ist fertig“. Wenn man viele kleine Projekte beginnt, trainiert man die Fähigkeit, etwas anzufangen.  Diese Übung trainiert die Fähigkeit, etwas abzuschließen.

Und jetzt stehen wir hier mitten in einem „Pet Project“, das einen unbekannten Fertigstellungsgrad hat. Mein erklärtes Ziel ist, dass dieses Projekt nicht meine Zeit unnötig auffrisst und ich will auch nicht in die Sunk-Cost-Fallacy rutschen, indem ich mir sage, dass ich ja schon bestimmt mehrere Tage in dieses Projekt gesteckt habe und ich es darum auch zu Ende bringen MUSS. Ich erinnere mich jetzt hiermit selbst daran, dass das Ergebnis nicht zu komplex sein sollte.

Onsen UI und meine Definition von Modi

Wo wir gerade bei komplexen Problemen sind: Ich benutze jetzt Onsen UI als Template fürs App-Design. Es hat eine Integration mit Vue.js und man kann typische App-Design-Elemente verwenden, ohne viel darüber nachzudenken. Es sieht ganz hübsch aus und ob die Verwendung einfach ist, muss ich noch herausfinden. Es macht aber einen guten Eindruck.

Erstmal muss ich wohl meine gerade gefundene Terminologie ablegen, denn in der Onsen-Welt (und in der restlichen Welt wohl auch) spricht man nicht von einem Modus, sondern von einer Seite. Im Kontext einer App klickt man etwa auf einen Button (<v-ons-button>) und der löst eine Event namens „pushPage“ aus, das eine andere Seite anzeigt. Diese Seiten funktionieren nach derselben Logik wie meine Modi, nur dass sie nicht so einen coolen Namen haben.

Leider musste ich fast alles von meinem bisherigen Code wegschmeißen, weil manche Sachen, die ich selber gebaut habe, automatisch von Onsen erledigt werden. Danke Onsen! Bisher habe ich noch nicht alles nachgebaut, was man beim letzten Mal gesehen hat, aber ich finde es eigentlich schon ganz nett.

Jetzt gehe ich zurück in meinen Alltag und die nächste Folge kommt dann… bald. Bestimmt!

Tutorial und erste Anpassungen – Rook Assistant Teil 4

11. Juli 2018 / / 0 Comments

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.

© 2024 Chrepps Blog

Theme by Anders Noren — Up ↑