Wesnoth Bestiary

tsr · Post by **tsr** » March 25th, 2010, 8:44 am

ancestral wrote:Part of a good design is the code itself. Cloud, you do make a point in that strict, tabular data, a table is usually best for that presentation. However, I think you are wrong as far as the layout goes.

Tables are not optimal as they reinforce rigidity. They’re easy to make but not nearly as flexible. The idea is that the data on the page should be easy to be re-styled into radically different layouts.

Now why would that be important? Well, one of the things I plan on adding is a mobile version. It may not be practical having the data laid out anything like it is. Having one column may be a lot better, or perhaps only showing some content at one time, or even eliminating the portrait altogether, while the content flows back up, for example. Or a print version, something that scales the text to the width of the page, making certain sections bigger or smaller than others.

Well, iirc there isn't anything you can do with spans or divs that you can't do with tr/th/td-s as long as you style everything with CSS (ofc IE might have some problems with before and after pseudo-classes that you can use to insert line-breaks and other stuff).

/tsr

Post by **ancestral** » March 25th, 2010, 9:28 am

tsr wrote:Well, iirc there isn't anything you can do with spans or divs that you can't do with tr/th/td-s as long as you style everything with CSS (ofc IE might have some problems with before and after pseudo-classes that you can use to insert line-breaks and other stuff).

/tsr

Sure, you can style things all the same, but can you hide table cells? Can you move them to any X or Y pixels absolutely or relatively on the page while keeping other table cells in the same place? You can with spans and divs, and that will be required for a mobile version of the page.

tsr · Post by **tsr** » March 25th, 2010, 10:29 am

Do you mean something like this...

Code: Select all

<html>
	<head>
		<style type="text/css">
			table {
				position: relative;
				background-color: #E7D9C0;
				color: #000;
				font-family: Sans-Serif;
				top: 20px;
				left: 100px;
			}
			td {
				border: solid 1px green;
			}
			#i1_3 {
				background-color: #E7D9C0;
				color: #666;
				visibility: hidden;
			}
			#i2_1 {
				position: absolute;
				top: 100px;
				left: 200px;
			}
			#i3_2 {
				display: block;
				position: relative;
				top: 200px;	
				left: 200px;
				border: solid 1px red;
			}
		</style>
	</head>
	<body>
		<table>
			<tr><th id="i0_1">Column 1</th><th id="i0_2">Column 2</th><th id="i0_3">Column 3</th></tr>
			<tr><td id="i1_1">1_1: I'm the norm!</td><td id="i1_2">1_2: me too, we are just here for...</td><td id="i1_3">I'm hidden ;)</td></tr>
			<tr><td id="i2_1">2_1: I'm absolutely out of position</td><td id="i2_2">2_2: ...comparison, it is a bit ...</td><td id="i2_3">1_3: ...dull, but you know: that is the price ...</td></tr>
			<tr><td id="i3_1">3_1: ...for staying inside the box!</td><td id="i3_2">3_2: I'm relatively out of position, <br/ >notice how I brake the size of the<br /> table for everyone else (at least in FF3.5)</td><td id="i3_3">3_3: Please take me out of here!!</td></tr>
		</table>
	</body>
</html>

/tsr

Max · Post by **Max** » March 25th, 2010, 11:35 am

my screen resolution is 1920x1200 - but i still have to scroll. any chance you could change the layout so it would fit into e.g. 1280x1024?

em3 · Post by **em3** » March 25th, 2010, 3:20 pm

This might come across as a bit silly... but what do you think of swapping the left and right column of content? Somehow I think that this would make emphasis on more important (at least to me) aspects of the description.

Post by **ancestral** » March 25th, 2010, 7:46 pm

em3 wrote:This might come across as a bit silly... but what do you think of swapping the left and right column of content? Somehow I think that this would make emphasis on more important (at least to me) aspects of the description.

That's an interesting suggestion. I'll try it out and see hat it looks like.

Max2008 wrote:my screen resolution is 1920x1200 - but i still have to scroll. any chance you could change the layout so it would fit into e.g. 1280x1024?

Possibly. Let me see what I can do.

tsr wrote:Do you mean something like this...

Fair enough, I suppose you can move individual cells around and with CSS you can style them much like you can style any element.

Still, I don't like tables because you have to wait for the entire table to load before anything is shown. Non-table elements are much easier to style since content flows much easier; I can control the way it flows without having to write code for each element. Avoiding tables also improves search engine optimization and accessibility for screen readers and other devices. From a design standpoint, it's also semantically incorrect as tables impose a default layout with the content. If I were to add in tables they would only be for the tabular data and not the layout.

tsr · Post by **tsr** » March 26th, 2010, 5:46 am

ancestral wrote:
tsr wrote:Do you mean something like this...
Fair enough, I suppose you can move individual cells around and with CSS you can style them much like you can style any element.
[...]
If I were to add in tables they would only be for the tabular data and not the layout.

Yes, ofc, I didn't in any way want to suggest that you should use tables for the layout, just that you should use tables for tabular data.

/tsr

eyerouge · Post by **eyerouge** » March 26th, 2010, 4:17 pm

what
Something I have discussed once before was the lack of Wesnoth telling people against which units a unit has a high damage bonus against (due to the target having negaitve resistance to the units weapon type) , and vice versa - which enemy creatures this unit should watch out for because of it having low resistance against their damage type.

Simple example:

Wose
Damage bonus vs:
Name of unit 1, name of unit 2, bla bla

Weak resistance vs:
Drake unit 1, name of unit 2, yadda yadda

In order to make the list functional and not cluttered with many untis on them it should preferably only list units that a creature has (very) high bonus or allergy towards. I.e. wose and fire... so, I guess antyhgin where a unit gets either =>30% (or something like that) bonus/weakness should be included in the list. If too many units are then tehse 30% could be tweaked to another number, so lists are kept functional.

why
Because it would help new players a lot since they don't have to look up this info by jumping back and forth and reading other units infos all the time to figure this out. It's really simple: When a player reads a Woses descrption he/she should really be told which units the Wose should watch out for or could be used against. This is of course only seen from one perspective and shouldn't be taken all to seriousley since it only takes dagame/restistance in to account, but even if it's so basic the info seems pretty interesting and relevant.

Only problem is this isn't ingame, but now that you create the beastiary it might perhaps find its way into it?

Post by **Sangel** » March 26th, 2010, 10:02 pm

This is coming along nicely.

Suggestion: In the unit advancement tree, the name of the current page's unit should be in bold or otherwise highlighted. (ie, Fighter • Steelclad • Lord)

Post by **ancestral** » March 28th, 2010, 5:34 pm

Okay, I’ve updated again.

(Check out the Elvish Marksman also.)

So I broke down and switched to using tables for the data. Made some things a lot easier. I also added a border-bottom, effectively giving an underline to the headings, which I think helps with readability. I also broke down and am using an en dash for the damage/attacks separator.

The portrait is now an img, which will help with flow and height of large portraits. (It’s just as well since that and other data will need to be specified and changed in the HTML portion as users click on new units to view.) Some things are not quite functional yet, including the image switcher. I’m narrowing down how to best properly handle that. Also, the advancement section got some love here recently.

Feel free to provide feedback and see how it looks for the new Elf I’ll continue to add and expand.

Post by **thespaceinvader** » March 28th, 2010, 5:41 pm

Two things: the font you're using for the data items is kind of ugly - it's not regularly weighted or well-aliased. Might I suggest a different one?

IN general, there's quite a lot of wasted space - it would all fit on better if things were a bit tighter, I think.

Tables are the right way to do this sort of thing though - it's what they're for.

Keep it up. It will be brilliant to have the units pages looking better.

Post by **ancestral** » March 28th, 2010, 5:59 pm

thespaceinvader wrote:Two things: the font you're using for the data items is kind of ugly - it's not regularly weighted or well-aliased. Might I suggest a different one?

Actually, yes. What font are you using? And what would you recommend? I’d like to stick with a serifed font if I can, and I’m not sure really what would work well.

thespaceinvader wrote:In general, there's quite a lot of wasted space - it would all fit on better if things were a bit tighter, I think.

I still do need to work space a little bit better. Thanks for your observation there.[/quote]

thespaceinvader wrote:Tables are the right way to do this sort of thing though - it's what they're for.

Keep it up. It will be brilliant to have the units pages looking better.

Thanks!

Post by **thespaceinvader** » March 28th, 2010, 7:09 pm

I see something that looks like this. I don't know what the font is, but it ain't pretty.

Using firefox, windows XP.

tsr · Post by **tsr** » March 28th, 2010, 7:51 pm

ancestral wrote:Okay, I’ve updated again.

Yay! Looking good. I love the air. Imho it does not need to be tightened up, air is good, makes it easier to read (both as a whole but also what is grouped with what)

ancestral wrote:So I broke down and switched to using tables for the data. Made some things a lot easier. I also added a border-bottom, effectively giving an underline to the headings, which I think helps with readability. I also broke down and am using an en dash for the damage/attacks separator.

Two good changes, me likes

I have two things that I come to think of:
- "id" should have the dame capitalization as "Race", "Alignment", etc
- "R" and "M" aren't completely readable for the ranges, I imagine you could do something like:

Code: Select all

Sword          7 - 3  Space for specials
Melee          Impact

/tsr

Post by **ancestral** » March 29th, 2010, 3:14 am

And I’ve updated again!

I got the image switcher working!

: image-switcher-sample.jpg (61.04 KiB) Viewed 5094 times

I’m still a bit new to jQuery so this is all kind of a learning experience for me, which is great! Still code cleanup I need to do.

At this point I want to get the small icons for the female marksman changing when switching to the female portrait… but for now I think I’m going to figure out how to put this together.

I’ve switched to using the larger icons for resistances again as I think things have gotten a bit more organized than I had originally. I think they may be here to stay. Still got to work with the defense/movement table. Otherwise, the big thing is pulling the data and scripting this all. (In Perl of course!)

How the Bestiary Will Work
Currently there is a program called wmlunits which is located in /data/tools that creates the units section at wesnoth.org. When run, it creates all the units’ information and the unit tree by parsing the unit files.

With all the eras, languages and sheer number of units in Wesnoth this can mean a lot of web pages. A lot.

Now you might say “why not make a php template and just load the raw data?” and you’d be correct. But, even better, I think we can take this a step further.

The goal here is to have pages load dynamically and have JavaScript change the content of the page (for example, switching from "Vampire Bat" to "Skeleton Archer,” after clicking on the link, the page will change the monster’s name, statistics and pictures with that of the new unit). This has two benefits (and assuming I’m not overlooking something grievous). Firstly, it’s faster for the user, as s/he doesn’t have to wait for the whole page to load over again when clicking to view a new unit’s page. Secondly, it should (hopefully) take a small burden off of the server, as most of the commands will be done on the user’s computer and it will only have to serve up pieces of information instead of entire pages.

The only downside is I’m using a lot more images (by choice) than the current units pages, which will add slightly to the loading time.

I’m open to the idea of having some kind of database to manage and compare different units, their attacks, and other information — but that in itself would be a somewhat massive undertaking that will have to wait.

As always, feel free to comment and critique.

The Battle for Wesnoth Forums

Wesnoth Bestiary

Re: Wesnoth Bestiary

Re: Wesnoth Bestiary

Re: Wesnoth Bestiary

Re: Wesnoth Bestiary

Re: Wesnoth Bestiary

Re: Wesnoth Bestiary

Re: Wesnoth Bestiary

Re: Wesnoth Bestiary

Re: Wesnoth Bestiary

Re: Wesnoth Bestiary

Re: Wesnoth Bestiary

Re: Wesnoth Bestiary

Re: Wesnoth Bestiary

Re: Wesnoth Bestiary

Re: Wesnoth Bestiary