1. The Tooltip-”Engine”

First of all we need a working JavaScript tooltip. For this small project I chose a tiny, tiny code snippet, which provided my with everything I needed. It was introduced by Alen Grakalic. For our purpose we have to modify the source a little bit. Instead of passing an complete path we only need to pass the card name to the function. Luckily all the card pictures are located in one directory (www.wizards.com/global/images/magic/general/).
But we’re not done yet. Passing the card name is fine as long the card doesn’t have any spaces, commas or primes but most card do have at least some spaces. That’s why we have to use a little replace function in order to adjust the image source path.

var cardname = this.name.replace(/ |%20/g,"_").replace(/,/g,"");

The name attribute will later be filled with the card name by the BBCode. As you might see there is no replace function for the primes. This is because ’ is used as a delimiter between strings and source code and the BBCode engine simply ignores text tokens with specials characters. Which is actually a good thing. Otherwise users could possibly exploit this to insert some XSS attacks

The last thing to do is to adjust the image source path correctly. I’ve done this for you already. Download the js file from here.




2. Implement the Tooltip-”Engine” in phpBB

Copy the tooltip.js inside your theme’s template directory. Should be something like: <phpBB3root>/styles/<theme name>/template/. After you have done this open the overall_header.html with your HTML-editor of choice (e.g Notepad++) and write these two lines inside the <header>:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/tooltip.js"></script>

Save the the file and close your editor. If you now refresh your forum you’ll see that the source code has not changed. Don’t panic! Rather open your Administration Control Panel (ACP), click on the “Styles”-tab and then on “Templates”. You’ll see a list of installed board themes. Click on your activated theme’s cache (e.g. if you have activated “prosilver” click the cache highlighted below).




Mark all template files and click “Delete marked”. This will erase the cache. If you know refresh and look at your source you’ll see the altered code.




3. Add the BBCode

Custom BBCodes are added via the ACP. Click on the “Postings”-tab and then “BBCodes” to create a new BBCode.



Write into the “BBCode usage” text box:

[card]{SIMPLETEXT}[/card]

And into the “HTML replacement” text box:

<a href="" name="{SIMPLETEXT}" class="preview">{SIMPLETEXT}</a>

Check “Display on posting page”, click “Submit” and you’re done.

If you followed the instructions correctly you can now use the [card]-Tags like you would use them with the MtG Helper (Remember: Do not use primes. Just ignore them). I did those steps on a clean and local phpBB installation. Everything worked fine

Hope it helps,
Sebastian

In letzter Zeit bin ich sehr viel am Probieren und Testen um Photoshop und Illustrator zu lernen. Alle Tutorials, die im Internet umherirren und mir gefallen werden ausprobiert in der Hoffnung endlich ein neues Design für meinen Blog anfertigen zu können. Manchmal entsteht dabei etwas Brauchbares. Manchmal nicht. Sehr weit bin ich mit dem neuen Design leider immernoch nicht. Aber ich hab schon eine weitere Idee im Hinterkopf. Allerdings bin ich noch nicht dazu gekommen, diese Umzusetzen…

Die letzten Tage habe ich versucht ein Design für das Wartungsmodus-Plugin von Frank Bülgte zu entwerfen.

Da ich gerade alles Mögliche ausprobiere, möchte ich heute mal versuchen den Enstehungsprozess als kleines Tutorial vorzustellen. Here we go.

1) Die Idee

Meine erste (gute) Idee war ein Design mit einer kleinen Notiz, auf der vermerkt ist, dass sich die Seite im Wartungsmodus befindet.
Leider war ich mit dem Ergebnis keines Wegs zufrieden und nach stundenlangen Versuchen das Design aufzupeppen, verwarf ich die Idee. Zwar wollte ich eine schlichtes und einfaches Design entwerfen, die Idee mit Notiz war jedoch zu einfach.

Also alles wieder auf Anfang.
Um nach Ideen zu suchen, surfte ich durch das Internet und durch meine alten Entwürfe und Kreationen. Dabei stieß ich auf eine “Monster”-Skizze, die ich vor einer Weile gezeichnet hatte. Die Idee!

2) Der Entwurf

Für mich ist der Schritt von der Idee zum Entwurf immer der schwerste Teil. Ich kann zwar ein Wenig zeichnen, aber meine Fähigkeiten sind trotzdem beschränkt (ein Zeichentablett wäre toll ) und so bin ich selten mit dem Resultat zufrieden.
Glücklicherweise hatte ich das Monster schon fertig gezeichnet. Nur ein paar Kleinigkeiten musste noch geändert werden.

Ein Fehler, den ich zu Begin meiner “Karriere” immer gemacht habe, ist, dass ich beim skizzieren nie an die Schatten gedacht habe. Meistens habe ich einfach die Umrisse gezeichnet. Beim anschließenden Kollorieren rächt sich das aber. Man sollte die Teile der Figur einfach separieren. Wenn man später die Schatten und Konturen malt erleichtert einem dies die Arbeit gewaltig. Geschlossene Pfade lassen sich zudem leichter mit Farbe füllen.

3) In bunt!!!

Ehm…ja. Pfade anklicken. Kontur weg und mit Farbe füllen.

4) Schatten und Tiefe

Ohne ein bisschen 3-Dimensionalität sieht das Monster recht langweilig aus. Es gibt viele verschiedene Möglichkeiten. Ich habe diesmal einen recht einfachen und schnellen Weg benutzt.

Ich habe mich dazu entschieden von links das Licht kommen zu lassen. Dementsprechend werden die Schatten links heller als die Grundfarbe des Monsters und rechts dunkler.

Zuerst erstelle ich zwei Kopien des Pfades. Der unterste Pfad bleibt dabei erhalten. Der mittlere Pfad stellt den Schatten da und wird dunkler bzw. heller gefärbt. Der oberste der drei Pfade wird später dazu benutzt, um den mittleren Schattenpfad zuzuschneiden.
Man selektiert den obersten Pfad und schiebt ihn in die gewünschte Richtung. So erhält man direkt eine Vorschau, wie der Schatten später aussehen wird.

Meistens muss man den obersten Pfad noch etwas anpassen damit alle ungewünschten Ecken des Schattens, welche beim Verschieben sichtbar wurden, wieder verschwinden.

Danach benutzt man das Pathfinder-Tool (Umschalt+Strg+F9 oder Fenster > Pathfinder), um die oberste Ebene zu Entfernen und die Schattenebene zuzuschneiden. Dies geschiet mit “Vom Formbereich subtrahieren Vorderes Objekt abziehen” (zweites Symbol von Links, oberste Ebene).

Und schon hat man den ersten Schatten

5) Eye for an eye

Als ich mit fast allen Schatten fertig war und den Hintergrund hinzugefügt hatte, musste ich feststellen, dass das Auge sehr sehr verrückt aussah. Ein bisschen zu verrückt. Fast schon hypnotisierend. Deswegen wurde aus dem Auge ein schwarzen Punkt. Besser

Noch einen Schatten drunter und schon ist das Monster fertig.

6) Sprechblase

Da das Monsterlein dem Besucher mitteilen sollte, dass sich die Seite momentan im Wartungsmodus befindet, musste noch eine Sprechblase her. Wiedermal eine recht simple Aufgabe. Rechteck + Spitze = Sprechblase. Damit diese nicht so langweilig ist noch deformieren und farbig machen. Fertig.

Zwischendurch merken, dass die Blase zu klein ist und eine dunklere, verschobene Version als “Effekt” hinzufügen. Wirklich fertig!

7) Ergebnis

Da der Quellcode schon vorgegeben war noch schnell die CSS-File geschrieben und fertig ist der Monster-Wartungsmodus

Nun hoffen ich, dass das Design dem Plugin-Autor genauso gefällt wie mir und er es in die Design-Sammlung aufnimmt

So long,
Seb

Erstmal das wichtigste: Downloaden könnt ihr v1.0 hier oder hier. (vorausgesetzt WP aktualisiert die Seite heute noch tztz)

Die neue Version ist zwar schon seit Mittwoch Abend fertig, aber ich habe am Donnerstag nochmal Bugs suchen lassen und konnte so noch ein paar Kleinigkeiten beseitigen. Ich wünsche euch viel Spaß mit der neuen Version und hoffe nicht direkt nächste Woche einen BugRelease herausbringen zu müssen

Für dieses Jahr war es das dann auch erstmal mit Neuerungen für das Plugin. Ich werde jetzt die vorweihnachtliche Stimmung genießen und mir morgen ein paar Glühweine hinter die Binde kippen.

2009 geht es dann aber natürlich weiter.
Ein Autocomplete-Feature muss auf jedenfall noch her. Ich habe auch schon ein bisschen herumprobiert. Scheint eigentlich kein großes Problem zu sein. Schließlich gibt es ein gutes jQuery-Plugin und (hoffentlich alle) bisher gedruckten Karten sind bereits in einer Datei abgespeichert.

Für Anregungen und Wünsche stehe ich natürlich weiterhin zur Verfügung.

So long,
Seb

es sind ein paar Wochen vergangen seit meinem letzten Update zum Fortschritt des MtG-Helpers, deswegen gibt es heute mal wieder ein paar Prognosen und Einblicke in mein Tun.

Zuerst einmal ein paar Schnappschüsse:

Auf den ersten Blick sehen die beiden Decks fast genauso aus wie mit Version 0.4+, allerdings wurden diese Kartenlisten nicht mehr mit dem [deck]-Tag erstellt, sondern mit dem neuen -Tag. Die beiden bisherigen Tags (deck,draft) waren einfach zu limiert in ihren Möglichkeiten und immer wieder neue Tags hinzuzufügen, wie zum Beispiel der geplante [sealed]-Tag, würde die Editor-Leiste nur vollstopfen bis man keinen Überblick mehr hat. Mit dem -Tag gibt es einen mächtigen Shortcode, der alle bisher verfügbaren und ein paar neue Darstellungen ermöglicht.

Eine Neuerung ist zum Beispiel die Art Kategorien darzustellen.
Bisher waren diese immer wie im zweiten Bild mit Überschriften getrennt. Mit der nächsten Version wird es Tabs geben um Kategorien zu trennen. Dies ermöglicht vorallem bei großen Mengen an Karten einen viel besseren Überblick. Somit haben wir anstatt für Sealed-Pools oder Ähnliches jedesmal einen neuen Tag einzuführen einen zentralen Tag, welcher uns alle Möglichkeiten offen lässt. So können wir zum Beispiel den [draft]-Tag mit den getabbeten Kategorien kombinieren.

Ganz neu sind auch die Deck-Optionen. In den obigen Beispielen kann man per Klick auf “toggle” das Deck minimieren, um Platz zu sparen. Gut aussehnde Decks sind zwar schön und gut, aber eigentlich steht der Artikel immernoch im Vordergrund. Also einfach minimieren und man kann ungestört lesen.
Zu den Deck-Optionen wird auch die Pick-Option der Draft-View hinzukommen, so dass man rechts neben dem Deck-Titel alle Optionen beisammen hat.

Das Ganze sieht natürlich nach ziemlich wenig Neues für die lange Zeit aus, aber man muss bedenken, dass ich den kompletten Parser neugeschrieben und verbessert habe. Was auch zur Folge hatte, dass man endlich beliebig viele Spalten zur Verfügung hat.
Allerdings muss ich zugeben, dass ich mich mit weniger wichtigeren Sachen wie der Spaltenhöhen (alle möglichst gleichlang) rumgeschlagen habe. Ja, was das Aussehen angeht bin ich ein bisschen pingelig.

Diese Woche konnte ich mit dem (auch komplett neuem) Admin-Menü beginnen.

Breitenangabe, Titel-Einstellungen und Karten-Links in den Kommentaren sind erhalten geblieben. Die restlichen Menüpunkte haben sich jedoch wesentlich verändert.

Ich habe mich für eine Umstrukturierung entschieden, um die Optionen übersichtlicher und leichter zugänglich zu machen. In den “Layout Settings” wird man die Standart-Werte für den -Tag einstellen können.
Aber was ist dann mit dem [deck] und [draft]-Tag?
Keine Sorge. Die wurden in den “Custom Tags” untergebracht und werden in jedemfall mitgeliefert. Auf Abwärtskompatibilität kann man seit Windows 95 schließlich nicht mehr verzichten.

Am Anfang vielleicht überrumpelt so viele Felder einzustellen zu müssen, wird man schnell feststellen, dass es genau die gleichen wie im Layout und vorigen Versionen sind. Das Plugin hilft dem Benutzer dabei aber sich durch die Attribute zu kämpfen
Denn schließlich sollen die Custom Tags genau das reduzieren. Anstatt jedes mal erneut eine Kleinigkeit am [deck]-Tag ändern zu müssen, kann man nun einfach eigene Tags mit den gewünschten Attributen erstellen. Schnell und einfach.

Soviel zu den erledigten Sachen. Ganz oben auf der “to do”-Liste steht momentan Folgendes:

• Pick-Option: Habe ich ausversehen bisher vergessen wieder einzubauen. Ehem…
• Die Option “Mousover Action” ist zwar schon da, aber hat bisher noch keine Wirkung. D. h. ich habe die .js-Datei noch nicht so verändert, dass sie die Animation unterscheiden kann.
• Ein paar Probleme mit den Tabs sind noch zu beheben. Z. B. bei zuvielen Kategorien mehrzeilige Tabs.

Natürlich sind noch ein paar kleinere Baustellen zu beseitigen. Aber dann kann endlich released werden! (Hoffen wir mal vor Weihnachten)

So long,
Seb

PS: Wenn ihr Anregungen oder Ideen habt, was auf gar keinen Fall fehlen darf, ist jetzt genau der richtige Zeitpunkt mir das mitzuteilen. Wie immer das Feedback-Formular benutzten.

Tach auch,

wie vielleicht einige bemerkt haben, gibt es momentan immer weniger Release des MtG-Helpers. Das heißt aber nicht, dass ich aufgehört habe am Plugin zu Arbeiten. Ganz im Gegenteil.

Aus der Bastel-Phase bin ich mittlerweile draußen. Ich habe konkrete Vorstellungen wie es mit dem Plugin weitergeht. Für mich ein wichtiger Schritt, denn Anfangs sollte das Plugin nur helfen einzelne Karten zu verlinken, doch irgendwie hat mich der Ergeiz gepackt und es kamen Stück für Stück neue Features dazu (die zum Glück mittlerweile auch von Einigen genutzt werden).
In all dem Eifer und Programmierwahn habe ich jedoch komplett das Ziel aus den Augen verloren. Was vorallem daran lag, dass ich Keins hatte. Das führte letztendlich auch dazu, dass ich den Teil der Deck-Generierung komplett neu geschrieben habe. Nicht, dass der Teil Fehler hatte, er war schlicht schwer erweiterungsfähig und umübersichtlich.

An diesem Punkt ist mir klar geworden, dass ich eine Endlösung für das Plugin her muss, wenn ich endlich aus der Pubertät des Plugins kommen will.
Deswegen habe ich mir einen Langzeitplan aufgestellt (lang, weil ich momentan viel in der Uni zu tun habe…). Ich bin fleißig am Coden und testen einer neuen Version, aber wann genau die neue Version rauskommt, kann ich nicht sagen. Es könnte Wochen oder Monate dauern. Vielleicht auch wird es auch nächste Woche released, wer weiß.
Es ist ein Haufen Arbeit und ich hoffe, es lohnt sich.

Hier sind die geplanten Änderungen:

1. Nur noch einen Parser für die verschiedenen Views.
   Momentan wird noch jeder Tag getrennt voneinander geparst. Bei den Einzelkarten und Deck/Draft macht das noch Sinn. Aber die Prozedur für das Erstellen der Deck- und Draft-View sind fast identisch. Außerdem soll ja noch eine Ansicht für ein Karten-Pool (also viiiiiele viele Karten) dazu kommen. Diese Pool-View ist fast identisch mit der Deck-View. Einen neuen Parser zu schreiben, wäre also reine Zeitverschwendung. Stattdessen wird nun es einen zentralen Parser geben, der sich darum kümmert.
2. Mit dem Parser wird es dann auch einen neuen Tag geben. Der Tag bietet Zugriff auf die komplette Gestaltungsfreiheit des Plugins.
3. Natürlich wird es auch neue Design-Möglichkeiten geben. Schon fertig sind anstelle der Headlines Tabs zu benutzen. Die Tabs sollen dabei vorallem bei großen Kartenlisten helfen die Übersicht zu gewährleisten. Fertig ist auch ein Collapse-Button. Mit dem man die komplette Karteliste auf ein Minimum (nur Titel) reduzieren kann.
   Manche Leute stören sich auch an den jQuery-Effekten. Diese wird man auch ändern können. Hinzu soll außerdem ein Deckeditor alla MTGO kommen damit man von geposteten Sealed-Pools Deckvorschläge bauen und posten kann. Momentan ist es recht lästig die ganzen Kartennamen selbst komplett einzutippen. Ein Tool zur Autoverfollständig soll dieses Manko beseitigen. Diese Dinge werden (höchstwahrscheinlich) nicht mit dem nächsten Release eingebaut. Sondern erst in einen Folgenden.
4. Und wo wir schon bei Autovervollständigug sind.
   Da es eigentlich nur noch einen Tag geben wird und man über diesen auch alle Style-Attribute definieren kann, werden die bestehenden Tags draft und deck nicht mehr vom Plugin genutzt. Aber keine Sorge, das heißt nicht, dass ihr eure alten Einträge ändern sollt. Stattdessen werdet ihr im Plugin eigene Tags definieren können, welche vom User definierte Style-Attribute beinhalten. Somit erspart man sich jedesmal das Style-Attribut dazuschreiben zu müssen und die alten Deck- und Draft-Tags bleiben erhalten.
5. Eine winzige Änderung wird es auch noch bei den Headlines geben. Die Headlines in Tags zu stecken ist zwar sehr lustig, aber sie stören die Übersicht ihm eh schon unübersichtlichen WP-Editor. Deswegen wird man anstatt eines Tags die Überschriften auch in “=” packen können, ähnlich wie wie bei LaTex.

Stay tuned,
Seb

nein ich bin nicht verschollen oder habe backseatsurfer.de “aufgegeben”. Gestern stand meine letzte Klausur für dieses, oder besser letztes, Semester an. Deswegen war ich ziemlich beschäftigt und kam nicht dazu für neuen Stoff zu sorgen.
Ich konnte leider auch zum gestrigen Sealed Event in der StuSie nicht erscheinen, weswegen es diese Woche kein Limited Bericht oder Ähnliches gibt.

Was es aber gibt ist ein MtG Helper Update, das sich gewaschen hat.
Lange habe ich mich davor gedrückt, doch schlussendlich wurde es Zeit das Plugin um ein paar Optionen zu erweitern. Da es ziemlich viele Optionen geworden sind und diejenigen, die das Plugin nur benutzen, sonst den Überblick verlieren, habe ich ins ReadMe eine ausführliche Anleitung zu allen bisherigen Optionen (es werden bestimmt nicht die Letzten gewesen sein!) und *trommelwirbel* ein Admin Menü hinzugefügt, in welchem ihr alle Standartwerte nun für das Plugin anpassen könnt.

Im Nachhinein bin ich froh, dass ich mich vor dem Admin Options Menü so lange gedrückt habe. Es ist ne heiden Arbeit.
Keine Denk- oder Programmierarbeit sondern einfaches copy&paste. Die Option.php ist fast 400 Zeilen lang und es gibt gerade mal Optionen für Draft und Deck. Wohlgemerkt sind das nur die standart Optionen. Es werden bestimmt noch welche folgen!

Wie immer: Bugs und sonstige Ideen direkt per Feedback an mich.
Ich werde jetzt noch ein bisschen auf meiner faulen Haut liegen. Morgen werde ich dann mit einer Ansicht für Sealed- und Karten-Pools beginnen. Außerdem würde ich gerne Andreas Pischners Vorschlag verfolgen und die Pool-Ansicht so gestalten, dass man wie bei Magic Online auf einem Extrascreen die Karten in Bildform per Drag und Drop tatsächlich hin- und herschieben kann. (Java Script ich komme!)

So long,
Seb

Unter anderem habe ich noch weiter an der Draft View gearbeitet.
Man konnte sie schon mit der vorherigen Version benutzen, aber der Tooltip sah nicht gut aus. JTip wird weiterhin für das Verlinken von einzelnen Karten verlinkt, aber sobald man anstatt von Text ein Bild oder Ähnliches hat, sieht jTip nicht mehr gut aus. Durch das Anzeigen am linken oder rechten Rand des Bildes wurden oft die anderen Karten zu sehr verdeckt. Irgendwie sah es einfach Fehl am Platz aus.
Deswegen hab ich (dank Simon) einen neuen JScript, welcher die Bilder heranzoomt. Das ganze funktioniert nach einiger Bug-Beseitigung sehr gut.

Die Optionen wurden auch noch einmal überarbeitet und etwas benutzerfreundlicher gestaltet.
Man kann die Optionen, welche bisher nur in der Draft View enthalten sind, wie in html/css benutzen. D. h. per Style-Attribut können nun alle vorhanden Optionen (momentan sind das Pick anzeigen, Pick toggeln und Breite) eingestellt werden falls die Standarteinstellungen nicht genehm ist.

Um den Benutzern noch mehr entgegen zu kommen, habe ich auch endlich die schreckliche Syntax der Deck View bearbeitet. Wo man früher noch mit * die Karten trennen musste, reicht heute ein Zeilenumbruch oder ein Semikolon.
Warum ich das noch nicht schon früher geändert habe?
Nun, ich hasse den Editior von Worpress… ich habe bis heute noch nicht genau verstanden wie der Text geparst wird. Mal davon abgesehen, dass der visuelle Editor manchmal komplette Formatierungen ändert… Ich habe es aber geschafft den Editor zu verarschen und nun geht es auch ohne lästiges und langes formatieren.

Viel Spaß mit der neuen Version. Sollte es Bugs geben oder ihr eine Idee haben was umbedingt noch in das Plugin muss, lasst es mich wissen.

Bis dahin,
Seb

Außerdem bin ich durch das Feedback erneut auf Draft Walkthroughs gestoßen. Bisher habe ich noch keine wirklich gelungene Umsetzung gesehen ohne viel Arbeit.
Genaus deswegen benutzen die Autoren wahrscheinlich immer Screenshots ihrer Drafts als Hilfestelltung. Mache schreiben alle Karten auch auf und verlinken sie einzelnd per Html. Beides keine wirklich gute Lösung meines Erachtens. Weder für Leser noch für Autoren.

Dabei ist es eigtl so einfach – hoffe ich jedenfalls.
Deswegen gibt es in der aktuellen Version meine Lösung des Problems. Ganz zufrieden bin ich damit noch nicht. Der Tooltip ist ein bisschen im Weg. Wie’s aussieht musst jTip früher oder später doch das Feld räumen und alles muss selbst gecoded werden. Wir werden sehen.

Bis dahin viel Spaß mit dem Plugin,
Seb

Die neuste Version des Plugins findet ihr wie immer hier: http://wordpress.org/extend/plugins/wp-mtg-helper/

So long,
Seb