Re-imagine CB's interface (in Contests)

We've had some successful theme contests in the past, but I think we've pretty much exhausted what we can do with the current "theme engine," which dates back to the very first CB1 code I wrote in 2000. That's... really old, as web technology goes.

So, I'd like to shake things up some. Hence this contest: a contest to re-invent the guts of CB's layout. To make a better theme engine, if you want to think of it that way. But also to make CB look much much better.

Again, THIS IS NOT A THEME CONTEST. This is harder, and more work. But the prizes are better, too.

The prizes will be $40M, $10M, and $5M for 1st, 2nd, and 3rd place. (Feel free to refer graphically talented friends to this contest. You can always take a cut of their winnings in exchange for liquidating it.)

However, in the event that I don't like any entry enough to take it live, the prizes will be $5M each.

I will be the sole judge of 1st place and "enough to take live," but I'm willing to let 2nd and 3rd place be determined by a poll. :) I also may award "honorable mentions" at my discretion.

You are welcome to submit photoshopped or otherwise mocked up previews for feedback, but actual html and CSS is required for an official entry.

Entries must include code for the sidebar and the "main page." You may include mockups of other pages if you wish, but these two are required.

Hints:

• The winning entry will not use tables, and will use CSS to allow much more powerful theme-ing in the future. You'll have to get knee-deep in the html.
• Don't worry about keeping the javascript in. If anything it will be easier to take your design live without it.
• I'm not really looking to break away from the 3-frame layout (sidebar, "main area," and chat) unless you have a really compelling alternative.
• Must work with Firefox and IE. Safari is a bonus but not required. (I do have access to a Mac at work so don't bother trying to bluff. :)
• Feel free to add or remove information on either the sidebar or the main page if you can make a good case for it being elsewhere. (E.g., moving Max Tattoo to Manage Characters might make sense. Moving Opponents off of the sidebar probably doesn't.)
• Keep image sizes reasonable.
• Don't assume screen resolutions larger than 1024x768. Should scale nicely with browser window size. (No fixed-width layouts please. Although a fixed-width sidebar is of course OK.)

This contest is open until the end of the month. Good luck!

Cool!

Is this because I didn't accept your offer earlier? =P

Sounds good, I may do some collaborative work ;)

Hint: move play-by-play option to a persistent setting.

:P Maybe? Maybe this time?

Watch Freed win it :-P

Would love to see something wicked prolific with our man swirly. ;)

Moving CB to a higher graphics interface is a bold move that would literally change the way we all view the game. I know I've only been here for a few months but when I try to introduce new people to the game they are always turned off by the low quality graphics.

I'm not a coder, so I won't be entering into this contest but I fully support it. I think it would help us all if some of our IT people out there could come up with something outstanding. I always hear about how we are community! I think Jon has really turned it over to us to make our own experience here in CB come to life!

So basically you want us to come up with a new design for CB, w/out any actual Javascript.

Question, say we've done the layout. Do you want us to design one or more themes to go with this new layout, and must this new layout be backwards compatible (with the older themes)? If it does need to be backwards compatible, then perhaps will limit the extent we can change the current layout.

Tables aren't bad, any reason the winner won't be a design with tables?

Maybe my brother could help..400 USD isn't bad :P

I know some things about HTML and CSS but not enough to actually do something big... though if anyone would need a tester, I'm all yours ;)

i was the code of the sidebar as it is now, and it's a bit too complicated for the HTML i know now, and so is the CSS :-(
but maybe i can help someone.

Xiaz:

Tables aren't bad, any reason the winner won't be a design with tables?


tables can be done with CSS, making theming much easier.

Tables are bad.

Divisions are done with CSS ;)

This is awesome I hope to see some very interesting new Interfaces.

"Moving CB to a higher graphics interface"

Just so we're clear on this, I'm not asking for adding fight animations or anything like that. I just want to modernize the look-and-feel, as it were. That _could_ include more pixmaps and such, but I don't think it's a requirement.

"Do you want us to design one or more themes to go with this new layout?"

The layout should be production-ready, so yes, in that sense you're proposing both a layout and a default theme. You may include other themes if you wish to demonstrate just how powerful your layout is.

"must this new layout be backwards compatible?"

No. If you try, you will probably cripple your efforts. Don't bother.

"any reason the winner won't be a design with tables?"

Because that constrains what theme authors can do with that information.

Of course inherently tabular information will remain in tables. Transfer records, for instance. But the sidebar and "main page" contain nothing that fits this description.

Modern?!
/prepares his "retro" CB1 look interface

Well, I probably won't have time for this, but this is what I'd suggest:

Make all the Information to be transferred as plain XML-File.

Put as one of the first lines in the xml-file a line as:

<?xml-stylesheet type="text/css" href="myfavoritetheme.css"?>

The XML could look like this:

<cb>
<chars>
<char>
<name>Kaeptn</name>
<score>1452320</score>
<pr>894213</pr>
<mpr>675335</mpr>
<minions>
<minion>
<name>Kaeptn</name>
<exp>13</exp>
<hp>750000</hp>
<st>750000</hp>
<dx>250000</dx>
[..]
<armor>
<body>
<name>Adam</name>
<base>40</base>
<plus>+70</plus>
</body>
</armor>
</minion>
<minion>
<name>Protector</name>
[..]
</minion>
</minions>
</char>
<char>
[..]
</char>
</chars>

<opponents>
<standard>
[..]
</standard>
<favorites>
<opponent>
<name>UserFriendly</name>
<score>1554080</score>
<fight-link>fight.tcl?opponent=xx</fight-link>
</opponent>
</favorites>
</opponents>
[...]
[...]
</cb>


And so on. This would make the complete layout configurable via CSS.
To enable another Theme, only the first line in the whole xml would need to be replaced.

I'm not sure if CSS is capable of AJAX (e.g. XMLHttpRequest), but if, then we wouldn't even need to transfer the whole document for each fight, but only the <fight-result> tags and whatever more you like. Just change the 'innerHTML' of some tag and, weee, the new information is visible there :)
As far as i know XMLHttpRequest is (mostly) compatible between IE and FireFox.

cu

adding fight animations would be pretty cool

Uberenforcer: not.

stabilo: Try not to re-invent the wheel called XSL ;)

This seems rather difficult without access to some serverside information. Since you're talking about creating the actual engine via css, we're going to need what information is available to work with. I've created a few css engines before, and though the task can be daunting, doing so without a basic framework from which to pull information seems extraordinairily difficult. It's like asking someone to build a greek to english translator without giving the person grammar books and dictionaries. Sure, it's possible... but you don't know where to start, and you don't know if you ever finish. You can build an open architecture framework and allow the user to create as many language rules as necessary... but you don't have any concept as to the type of rules he'll be making.

To that end, do we just make stuff up? For instance, say we wanted to make character information available in the sidebar to theme authors (just for the sake of argument). Do we define a section in a raw html file such as <div class="CharInfo" id="MPR">[Insert char's MPR here]</div> ? We're allowing for the theme author to define a css style for all character information as well as this specific MPR stat.... but how do we actually reference the MPR? Or do we just stub that out as I've done in that one-liner and let you fill that in if you choose our particular entry?

I suppose stubbing things out would work... which then raises the question... Is the sky the limit? What if we design in access to things for theme authors that don't really exist? For instance, say I'd like to include an interface in the sidebar that... I dunno... keeps a running total of your battles fought during wacky XP time (this is just for the sake of argument.. I don't think I'd actually include that information). Is that information available?

Is there a list somewhere of all the information that we can provide? Obviously most basic links are easy. But what about more complicated links? The "News" section, for instance, is dynamically generated. How do we code that in? Do we have to make a tcl interface, or do we stick to html?

------

On another note, what version of CSS should we code against? I prefer the most recent, as there are some fantastic addtions in CSS3, but it's not technically finished yet, so it's not standardized.

There's no need to access server side info. View Source provides all that's needed. Just make up something that looks good, uses up-to-date techniques, and shows more or less the same information as the old page.

The question of what CSS version to use is answered by the fact that CB should work in all popular browsers. I think you're free to use CSS3 as much as you like, as long as you make sure that the page still is usable on your average non-compliant browser, such as IE6.

No, you don't need serverside info to compete in this contest. You are looking at the interface already, simply save it to your HD, OR start fresh and make something new. I think I might toss my hat into this one if I get a chance. The interface is way crazy as it is, and I wouldn't mind re-designing. Although I hope there are some real honest-to-goodness graphic designers here, because as a programmer, there is only so much I can "realize" without the fancy design element. :)

I'm a designer, but I know nothing about writing code. Any of you programmers who don't know anything about design want to tag team, maybe?

Re-inventing the interface for CB entirely with CSS is going to be difficult. I do have a couple questions for Jon:

• When you say "without tables" do you mean without even the most basic of tables to hold two things together like the "Opponents (Standard)" section?
• Would you like to have all of CB in a flat file with the CSS dictating where EVERYTHING including the tiniest element goes?
• What kind of leeway do we have in terms of the menuing system? That old javascript menu library is showing its age (especially in new IE7)

bart: IE6 rules out a lot of CSS3, unfortunately, depending on which version we are restricted to.

Regarding the information in view-source... this only tells us what's already there, not what we can include. The idea, I thought, was not a direct port from the current setup to pure css but instead a ground-up redesign.

I suppose what I will do is pose a separate inquiry for anything I want to include outside of what's already there.

Actually, stabilio, that's exactly what I'm talking about. Is CB information available as XML? I know the forum is, which is nice. But is everything? That would REALLY make things fly into the 21st century. XML+CSS = !!!!

Can we use XML?

Nightstrike: if cleverly designed, you could use advanced features to make it look better for browsers that understand it, but you still need to fall back to something usable for other browsers that don't understand it.
A related point that may require some thought is how the page will look when the theme is not available (theme server down?). This could be done with a default css that's embedded in the page, and should be overridden by the theme.

The current pages and the new design serve the same function: display certain information. All this information is already visible for you. A clever design allows a theme designer to move around any piece of information wherever he wants it (including display:none ;), so you may want to label things intelligently.

Vestax: tables should not be used for layout. This has been the idea behind the HTML standards for the last 8 years or so. Anything that has to do with layout (fonts, colors, placement) IMNSHO does not belong in the .html, but into the .css instead.

I made a "flat html file" with no formatting that is ready for CSSing. I want to give it to the community, but maybe I should wait and use it for the contest. ;)

sounds fun!!!!!!!!! ummmmmm HOW DO I DO THIS?

Bart has gone over some of these but I'll add my two cents. :)

"you're talking about creating the actual engine via css,"

Your job is to just create html and css with appropriate placeholder values filled in. I will take care of adapting the "engine" to generate live html that looks like your template.

"Regarding the information in view-source... this only tells us what's already there, not what we can include."

Feel free to include anything you like. I'll let you know if I can't figure out a way to generate it, or if I can but won't. :)

"what version of CSS should we code against?"

Sorry, CB still needs to support IE6. (Maybe this project to upgrade IE6's css support would help: http://dean.edwards.name/IE7/)

"When you say without tables, do you mean without even the most basic of tables to hold two things together like the Opponents section?"

I don't see why that should need tables. You don't have to make it look like it does now.

"Would you like to have all of CB in a flat file with the CSS dictating where EVERYTHING including the tiniest element goes?"

Yes. And you don't have to dictate the tiniest element; browsers are good at laying things out if you give them hints. Take a look at some modern sites like digg -- no tables anywhere on their main page.

"What kind of leeway do we have in terms of the menuing system? That old javascript menu library is showing its age (especially in new IE7)"

I have no particular attachment to the old system. As long as your replacement handles browser compatibility at least as well, go crazy.

You don't even need a "menuing system" if you can come up with a way to either make all the info fit without one, or convince me that we don't really need all that clutter on the sidebar anyway. :)

"Can we use XML?"

Not unless you mean XHTML. Which reminds me, you'll get bonus points if your design renders in standards mode (i.e., not quirks mode) in Firefox. This basically means, XHTML or HTML 4.01.

FORTY MILLION...wowzors

Since I'm not a graphic designer, I'll split the prize money with you if you design the graphics part, I already have a behind the scenes framework, and I can even design the CSS, all I need is someone to work with who has a good idea how CSS works.

Hmmm... I'm liking this a lot already. This is basically what I wanted when I asked Jon earlier. I think I'm going to go on this project solo, including coding and graphics (and may even start it off with a few themes ;)).

I do have a question, and I don't think it has already been covered. How do we submit this? Are we to submit this publicly or privately? I can probably set up something on my host for a sample website, and password protect it.

Jon, you answered all of my current questions.

Regarding CSS version, are we allowed to use those libraries presented on the page you referenced? It sounds kind of hokey to use a javascript library to feign pure CSS. Would that detract from the overall idea of "pure css"? I would love to use all of the advanced CSS3 (and even CSS2) options that Gecko provides (I've dolled up some great myspace sites for people by making crafty use of things like :hover... but it requires Gecko. Hint: You can trigger something on :hover to completely redesign the entire site, remininscent of the crazy flash/shockwave contraptions built on snarg.net.) However, IE6 prevents that.

This brings up another point. Issues of browser compatibility really fall back on the theme author. Despite us providing a default theme, that isn't the goal. We need to provide for the *ability* to modify the display attributes of everything on CB. That just requires crafty usage and naming of css classes and id's. The theme authoring is not the focus, as I understand it.

Given your extra credit section, I'd imagine that the xhtml idea would be the point of real skill. Perhaps I'll start from that standpoint.

"are we allowed to use those libraries presented on the page you referenced?"

yes

"Despite us providing a default theme, that isn't the goal."

it's not the only goal, but it is _a_ goal.

This may just be my guess, but I'm pretty sure Jon has no rules for this contest othe than creating a good "re-imaged" cb... Use any refeence, any person, anything you want. Other than the rules stated, I'm sure he has none...

Oh and Jon, I have yet another question to go along with my other ones... are you planning any theme contests in the future after this one is done? If so, I may be reluctant to release many themes with this new code.

By the way, I've coded around 95% of the sidebar, and have been easily able to apply the BattleTech theme to it with new CSS =D.

"How do we submit this?"

I'm not picky. If you want to email me a .html and .css file with appropriate file:// relative links, that's fine. If you want to put it on a server somewhere, that's fine too.

"are you planning any theme contests in the future?"

No time frame in mind yet, but since one of the objectives here is to have a more theme-able CB, yes, eventually.

Alrighty, here's a screenshot of my work in progress. So far I've only tested it in Safari. I coded a modular HTML file for sidebar and the main page, and applied a bit of the BattleTech theme to it. Front window is the new code, back window is the real game.



Very, very themable. I think its coming along well =D

Nice!

Sweet!

Before I go any further with this thing, I want to see if this is the sort of thing you are looking for..?

haha, yeah, really have no idea whatsoever

Good, my code is %100 firefox compatible. I'll wait until my friend goes online to test in IE, and in the meanwhile I think I'm going to create a new theme to show just how modular this is =D

That's along the lines of what I'm looking for in new approaches, Lukey. As long as you can do it in css. :)

Here's a start on a new theme. I'll have to fit it all into one little cell, since sticking each section into their own little space gives the sidebar too much vertical height.

Click here for the preview

I wish i knew how to do this.. I would try if i knew.. darn. :P

I don't get any of it. :P how does it work!? lol.

Magic, OB's Genie. Magic.

Anyways, here's an updated version. All the modules are combined into one area. Added logo image. Enjoy!

very nice!!!

Keep it going Pixel!
Now just spice up the main frame and WHAM! $40million! (not quite that easy... but still)

A few random remarks:
Slashdot is currently also having a design contest. They of course have different requirements for the design, but what's nice about their contest is that CmdrTaco is discussing the interesting entries he has received so far in his journal over there. Maybe a source of ideas or things-not-to-do?

Be aware that the W3C html validator exists. There's also a CSS validator listed there. Feed them your new design for the interface, and try to figure out how to fix the errors it finds. It's not always required to be 100% compliant with the official html standards (because IE is not compliant with those standards), but validating your html and css code certainly helps you build a better page.

Uhh... please tell me there are others entering in this contest. Its not as fun being the only one! And Lukey told me he pulled out...

Is there a deadline for this. I have a feeling I'm going to finish pretty early, so I'll be sitting around for a while... probably making themes just in case I win, who knows.

Anyways, my theme so far is compatible in Safari and Firefox, and almost 100% compatible with IE. I made it so you can arrange the links on the sidebar with CSS, but IE is having some trouble interpreting newline breaks in the CSS. Darn IE....

i'll take the second prize for being DD and wishing i knew half the stuff you guys were talking about :P

This month's schedule for me is carpet bombed with dead lines, so I can't really afford to add another project to my TODO list. It's *very* tempting, however, so who knows? There's still 24 more days in this month ;)

Pixel:

"This contest is open until the end of the month. Good luck!"

Thanks Blarg =D. Anyways, I realized something. The winner of the contest will probably need to talk with Verifex to get his firefox greasemonkey plugin thingamajiger redone, too.

I'm still forming ideas in the old mind, yet to put anything to code. But I shall, hopefully. :)

sorry if i am mistaken but atm Pixel, are you just recreating the interface but using a 'better' coding or have I missed something critical here?

As I understand it, "coding" (how can you call it coding, when the language is not Turing complete?) is the point of this contest. A cool looking theme is only useful to "sell" your idea for a new interface.

True, to sell your idea you have to have an example which looks nice.
But something which would look nice (such as the themes we have now) but would be poorly coded, wouldn't be good either.


Perhaps I should spend some more time checking out CSS but I don't honestly think I can get something good enough (say to actually have a chance) within a month's time...

if you finish early, you're welcome to css-ify the fight results page. and discussion threads. :)

most of the simple pages I think I'll be able to handle.

is pixel the only one that has entered something?

Well, I haven't exactly entered anything yet, since its still in the works. It is very possible that I may rearrange things if I feel the need to, though I'd talk with Jonathan about it first. Of course, the way I coded it makes it very easy to change ;).

I'll likely write a documentation for themers to use. I also had in mind to create a theme-maker webpage. Yes, even before A Bathing Ape suggested it to me through CM, haha. That'll likely require me to learn some PHP, though it shouldn't be terribly difficult. It all depends on if I have time or not.

Shade, as far as I know, this is mainly to recode and even redesign the game's interface. However, the way I coded it allows the themer to redesign most aspects through CSS, even down to each individual link on the sidebar.

you stole my idea!!!

i'm very sad.

Awww, I didn't steal it! I was "inspired" by cb.panic.nl! I swear!

Now I'm sad =(

I'm working on one. I'm building upon the standpoint of making the engine simple but powerful, giving control over absolutely everything. The hard part for me will be doing the theme.

Yay, some competition! Good luck NightStrike!

I just have to pull myself away from HL2 for long enough to pump out some code =)

Alrighty, two dynamic themes using the same theme engine, just different CSS. Well, except for a few minor unnoticeable changes in the HTML to make it more modular. Anyways, I think this is pretty dynamic and customizable. Of course, I could make it EVEN MORE modular, but that would just over-complicate things, haha.



I bet you guys can't guess my favorite color =P.

Oh my goodness... IE is a disaster...

*sits in corner crying*

did you make a chatmail button?


well done! :)

Shade: Yup =D. Twas always wondering why its access wasn't as easy as things like "Current winning streaks".

According to this website, "IE5/Win does not understand backslash escapes. But then IE/Win doesn't understand the content property at all anyway." I'm guessing the latest version of IE doesn't either, since my friend is having problems with it. GAH! Looks like I'll probably have to add some more code to the HTML pages to make this work properly...

Someone needs to kill IE. Its causing the world to much pain.

hey, i'm going to give it a try, but i can't do it alone, so if you want to help me or anything, CM me

@[ABC]: Who are you talking to?

@Everyone: Well, looks like I got all if not most bugs out of windows IE. Nearly started ripping out my hair. Problem isn't in my coding, its in IE. Unfortunately, it is a requirement to make fine code work with horrible IE. Of course, the HTML is just fine with IE. Its my theme that's giving me bugs =P

and adapting your theme to not have problems, and working from there to recreate it? >.<

uh, Shade.... no clue what you just said.

HAHA. Laugh @ Pixle Sage. Your Safari hurts my eyes!

I was so impressed at first, then I looked at the browser bar.

I like Pixel Sages a lot. next time you show us, do it in the SNK3R theme. :P i would like the SNK3R theme more. :D i wonder which theme is jons favorite.

So, who else is in on this? Any progress from the rest of the competitors, or are they keeping it all a secret? =D

i am working on someting, i don't have much to show yet, and probably this will never be done, i think this is too difficult for me :-(

Patience.

Pixel? Already tried this page?

I have, PoisoN, and the errors thrown at me are going to be easy to fix. Just haven't had time to go fix them yet.

very nice pixel

Great, I love XHTML, if you need help, write me a CM...

Re: "* The winning entry will not use tables,"

What about 'table' (singular)?

As an "exercise for the student" sort of thing, I removed the 22 nested tables from the sidebar by using colspan and rowspan attributes on cells, and got an almost identical layout from a single table. The resulting html is much more compact, and about a thousand times easier to read, modify and maintain.

Btw, I'm not entering the contest. I just wanted to satisfy my curiosity whether there was actually a reason or need for that rat's nest of tables.

Hmm... I should assign my students to develop a new interface :D

Sadly, it's just Intro to Java. And I suppose it might not be too ethical if I were to make 40mil $CB from something my students did ;)

Validated my body code, now I need to validate my sidebar code. I didn't know you were only allowed to have one defined ID per page, and if you wanted more you needed to use CLASS. Thanks for letting me know Jon =D. Man, now I have to redo a bunch of my css, blah.

Come on, Pixel, you should know you gotta have class to make it in this world ;)

Sidebar and Main are now validated. However, it seems the validator does not like frameset and its arguments for some reason... blah. Oh well, doesn't affect the theming engine anyways =D

This contest is hard, I'm having a hard time building a page with pure CSS, its much more difficult then it looks. :)

I'm using Digg.com as an example, maybe that is too complex, does anyone know of any less complex examples for a pure CSS page?

I know Jay is Games uses CSS, but I have no idea if it's pure CSS...

It'd be nice to have an extension on this contest. I've been busy as heck recently, but would really like to have a chance to complete my entry. This is like asking for an extension on an assignment. :P

I've updated my default theme to work with the validated code. I'll probably change the logo image for the main theme, since as Shade stated, it didn't fit the futuristic style of the overall theme.

Adapted the Jet theme to validated code =D

Jonathan, I know this is asking way too much. Seriously. Do you think this contest could have an extension? Pretty please?

Carbonize, Vestax:

Would one more week be enough?

(If not then it's probably not worth extending. :)

Sure, that'll be good, thanks Jon. Uni's been eating my time, but the additional week will suffice. Apologize to Pixelsage, possibly delaying his winning of this contest for a week. :)

Hey! There's no telling if I'll win or not. I'm sure you guys will churn out fantastic entries!

I'll probably take the extra week to revamp the sidebar.

Okay, the contest will close at midnight a week from today.

Be careful about who you call Vestax. :P