Oliver Graf
Germany
Weissenthurm
[Ø]
-
I started working on a nicely formatted export of the fantastic geeklist based Nightfall FAQ (maintained by David Gregg himself) few days ago. First it was aimed for print, but this was before I saw that there already was a print version.
So I re-aimed it at mobile devices (my HTC Desire). You can try it out here:
Portable Nightfall FAQ
Features:
* single HTML page
* complete export of the geeklist items (not the discussion)
* addition of card stats in simple formatting
* optional loadable small card images (click on stats or set info to show)
* fully hyperlinked
* theme matching the game (i.e. it has a black background)
* minimum load on BGG (updated maximum 1 time per day)
* iPhone webapp compability (set viewport width to device width)
* optional display of kicker cards (link at bottom of card)
* you can choose the card sets you want to see
* you can sort the cards by name or by set (and then by name)
Resources used:
* Nightfall FAQ via the XMLAPI
* a database of card information created from scratch: http://t.ktk.de/BGG/NF/data/cards.xml
This thread is aimed to channelize discussion about it and not to spam the geeklists comments with it. Feel free to post ideas about formatting, problems on your device, ideas for add-ons, ... and I will see if I can fix them.
Screenshots from my HTC Desire:
Updates:
2012-02-26: added NF:CW All Fears Revealed, "Asset Seven", Blowtorch Triage, Dog Eat Dog, "Kilo 13", Patrol Zombie, Routine Questioning, "Smiling Biter", Still Standing, "Victor One" to cards.xml
2012-02-24: added NF:CW Blue Moon, Dark of the Moon, Harvest Moon, Hunter's Moon and Wolf Moon to cards.xml
2012-02-12: added NF:BC Promos Destiny Collins and Silas Bragg to cards.xml, updated pictures from the last CW update
2012-02-09: activated new size reduced export, added NF:CW "Bone Cruncher", "Clever Ivan", Doktor Nyilaszy, Emil Balev, Fresh Meat, Gathering Strength, Inhuman Wave, "Kaos 33", Kaspar Udunian, Katya Iliyevna, R & D, "Snowstorm", Unholy Resurrection to cards.xml
2012-01-31: added NF:CW Foul Revenant and Full Battle Rattle to cards.xml
2012-01-21: added NF:CW "Banner 89", Butcher's Moon, Gregor Dzanic, Power and Glory, Sophia Otrava and the CW Wound to cards.xml, plus better card item parsing for nffaq.py
2012-01-07: added NF:CW icon and section to the script and JAREK to cards.xml
2011-11-10: added remaining NF:BC cards to cards.xml
2011-11-03: added NF:BC Damon Montez, "Sierra Two", "Straight Eight" and Wight Trash to cards.xml, fixed missing keywords for the BC cards
2011-10-27: added NF:BC Promo Flayed Ghoul to cards.xml
2011-10-13: added NF:BC Vampiric Tuning to cards.xml
2011-10-05: added NF:BC LeShawn Wallace to cards.xml
2011-09-29: added NF:BC Pipe Bomb to cards.xml
2011-09-23: added NF:BC "Shadow Hound" to cards.xml
2011-09-21: added NF:BC Shut Up and Soldier to cards.xml
2011-09-16: added NF:BC "Mac Ten" to cards.xml
2011-09-13: added NF:BC Burning Meat to cards.xml
2011-09-10: added NF:BC K.C. Bigelow to cards.xml
2011-09-06: added NF:BC Vehicular Assault to cards.xml
2011-09-02: added NF:BC "Harley Doberman" to cards.xml
2011-08-25: added new promos, fixed some display bugs (kicker moon missing), url parsing fixed
2011-08-02: fixed new use of listitem links
2011-07-11: added set images to kicker display
2011-07-04: added set selectors and a cache manifest
2011-06-27: activated new design with in-page sorting feature. cards.xml structure has changed (feed now attribute of chain element).
2011-06-25: added index links to the index sections to the top of the page, some extra space at the bottom, some missing data in cards.xml
2011-06-23: added Blood Country card index recognition
2011-06-22: fixed changed card index titles, which removed the links below each card
2011-06-18: fixed last edited date and check for reload of geeklist xml
2011-06-14: added Lisa to cards.xml
2011-06-10: added four more ML cards
2011-06-09: added the new cards (over a dozen), fixed non-card FAQ detection, capitalize keywords
2011-06-07: added more reveals to cards.xml, fixed script for new card index items, added separate links for each index at the bottom of each card
2011-06-01: added "Mad Jake" to cards.xml
2011-05-28: added kicker card display and fixed some parsing bugs
2011-05-28: added 'Sweep and Clear' and the Martial Law Wound effect to cards.xml
2011-05-25: added "Legion Ten" to cards.xml
-
David Gregg
United States
Asheboro
North Carolina
NightfallGame.com/FAQ
BoardGameGeek.com/Blog/193
-
I'll add the link to the geeklist as well. One critique: the diamonds ♦ are a bit small. I know that a bullet • is really small as well, so how about using a small image the same height as the font?
-
Oliver Graf
Germany
Weissenthurm
[Ø]
-
My plan was to avoid images (and so adding the card images without loading them directly was wrong, as you pointed out). Bullet was an option, but if I make the bullet bigger, the line height will also get bigger. The diamond was the best compromise I could find. There was also a star, but my android browser could not display it.
I changed the colors to 16x16 images of the moons, about 1k a piece. Looks better, don't you think? I would rather not make the link moons smaller, because of the readability.
-
David Gregg
United States
Asheboro
North Carolina
NightfallGame.com/FAQ
BoardGameGeek.com/Blog/193
-
Yes, that looks much better and fortunately the browser only needs download each moon a single time a piece. Another option to reduce overhead is that instead of loading the images inline, you could link directly to the image, letting the user use their back button to return to the FAQ list. This way they only load the text and mini-moons initially, conserving bandwidth.
It's not quite as smooth an experience though, so meh, up to you 
-
Oliver Graf
Germany
Weissenthurm
[Ø]
-
A friend showed me the FAQ on his iPhone 4, and I saw that the iThing does not zoom the same way the android browser does.
I added two METAs to tell the browser that the page is webapp compatible and to set the viewport to the device width.
Edit: and the Android browser (HTC Desire 2.2) seems to recognize those tags also, cause I don't need to zoom the page anymore.
Edit 2: deactivated this feature again, cause it seems to collide with the javascript image loading code. I investigate later.
Edit 3: made the whole thing to valid XHTML 1.0 (yes, I'm lazy), and now it works.
-
Oliver Graf
Germany
Weissenthurm
[Ø]
-
The current FAQ export seems to swallow some lines. It's already fixed in my working copy, but I have to finish something else I'm currently adding to the script before I can update to it, so stay tuned!
-
Oliver Graf
Germany
Weissenthurm
[Ø]
-
A preview: http://t.ktk.de/BGG/NF/nffaq2.html
New feature: CHAIN (at the bottom of each card)
I'm all ears for ideas about the formatting. Current: Card in the middle, kickers directly around, rest above and below. Line in the following order: Color, Kicker small, Name, Linkcolors.
Different display: http://t.ktk.de/BGG/NF/nffaq3.html
This time the moons are more like they are on the cards...
-
David Gregg
United States
Asheboro
North Carolina
NightfallGame.com/FAQ
BoardGameGeek.com/Blog/193
-
Hmm, I think the chain section would be more valuable if it only showed or at least drew attention to the cards that could activate the kickers, especially as it won't take long for each card to have many cards that can simply link.
-
Oliver Graf
Germany
Weissenthurm
[Ø]
-
Well, they draw attention cause the kickers are right above and below the card in question. And they are bold italic.
But you are right, all linking cards are a lot of lines. So I try with only the kickers.
Any preference about the moon display in the chain box?
-
David Gregg
United States
Asheboro
North Carolina
NightfallGame.com/FAQ
BoardGameGeek.com/Blog/193
-
lydon wrote: Any preference about the moon display in the chain box?
Both versions looked good in their own way, so I'll leave that up to you.
-
Oliver Graf
Germany
Weissenthurm
[Ø]
-
A small test report:
I did some 3-player games of Nightfall (infecting my little brother who immediately did order the box) last weekend.
The FAQ on the phone came very handy! We used it many times, especially cause my brother (with more recent MtG history than my ancient experience) did analyse his card combos very deeply. Which we felt through the wounds he dealt...
-
-
I have an idea that i think would more easy see the life of the cards.
Example for Alton Hickman
3/3
can be changed to
3 III
replace the red I's with an actual image of the life.
This is simply a small thing, but would really make it "complete". You should only fetch the four options of life! 
Cool for making this! Have you released the source for the python script? Would love to see it! 
-
Oliver Graf
Germany
Weissenthurm
[Ø]
-
Zerothi wrote: I have an idea that i think would more easy see the life of the cards.
Example for Alton Hickman
3/3
can be changed to
3 III
replace the red I's with an actual image of the life.
The less images the better... I did not really want to use the moons either. But here it is really not needed, I think I rather stick to the numbers. You have the slashes on the card image anyway...
Zerothi wrote: Cool for making this! Have you released the source for the python script? Would love to see it!
Not yet. The first version was really ugly. Perhaps I make it a bit cleaner and then put it out. Totally separate output from parsing for example. So you could program a different output (perhaps a table style printable display of all cards with their stats and kickers... could replace a certain file here on BGG).
I'm currently making an iScroll/iScroll-less graphical display for it where you can view one card at a time and have tabs for image and other additional data. While doing this I will get the code released.
P.S.: This all might collide with the email I received an hour ago, stating that my Martial Law copy has been shipped
Edit: Got it, got it, got it!
-
Oliver Graf
Germany
Weissenthurm
[Ø]
-
lydon wrote: I'm currently making an iScroll/iScroll-less graphical display for it where you can view one card at a time and have tabs for image and other additional data. While doing this I will get the code released.
Sencha Touch looks more promising, I guess I will dive into this to develop the Web-App.
-
Oliver Graf
Germany
Weissenthurm
[Ø]
-
I explored the possibilities yesterday for making the export more App like, and I must say that the capabilities of the toolkits out there sound impressive. But they all fail in my eyes performance wise (at least on my HTC Desire).
The plain HTML index is super quick in the browser, and I currently don't think that I would swap that performance for needless eyecandy and doubtful UI improvement.
So, a possible Web App is not abandoned. But until I can find some toolkit that makes such a thing fast (besides of buying a new phone), I won't start doing it.
-
Oliver Graf
Germany
Weissenthurm
[Ø]
-
I played a bit with the layout:
* removed set/type line
* added set logo before title
* slashes instead of number for health
Take a look at it here http://t.ktk.de/BGG/NF/nffaq2.html and feel free to post suggestions.
-
Oliver Graf
Germany
Weissenthurm
[Ø]
-
Here is another design study: http://t.ktk.de/BGG/NF/nffaq3.html
It has a select box at the top which will resort the card FAQs by name or by set (and then by name). This one uses jQuery to do this and all JS/CSS is external... moving away from all-in-one-file, cause there are already more images in it than I initially wanted.
Comments?
-
David Gregg
United States
Asheboro
North Carolina
NightfallGame.com/FAQ
BoardGameGeek.com/Blog/193
-
<3 JQuery, good work!
-
Oliver Graf
Germany
Weissenthurm
[Ø]
-
lydon wrote:
Updated this one:
* button around stats, so that clicking it becomes more obvious
* some style changes
I think I will make this the new design. Can anyone tell me if it looks good on an iThing, too?
-
-
Very nice work! Really like it! Cannot confirm on iThing though...
-
Oliver Graf
Germany
Weissenthurm
[Ø]
-
I made the logo images before the top index table entries to buttons. You can use them to deselect (or reselect) sets of nightfall. The cards of the unselected sets will disappear (both in the card list and in the kicker popups). The button image should fade to indicated the deselected state.
All done with jQuery and simple CSS.
In addition I added a cache manifest, perhaps this will make the page more usable in offline situations. Note that only loaded card images will be cached and a re-export will touch the manifest file, invalidating the cache (hopefully).
-
Oliver Graf
Germany
Weissenthurm
[Ø]
-
As the portable FAQ gets bigger and bigger (nearing 800k HTML only) I optimized the thing a bit by reducing paths, putting more into css and making css class strings smaller. All of this resulted in a 30% size reduction.
The new Portable FAQ is tested on Android 2.3 on a HTC Desire. Please check it out with your mobile iDevice, if everything is working as expected. If there are no bugs I will replace the known URL with the new FAQ.
Thanks for the help!
Here is the beta
Edit: Is active now.
-
|
|
Posted Sun May 22, 2011 7:01 am
