Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts

    want to create a tournament bracket interface using JS + CSS

    Hey all... I'm posting from a lan tournament and i'm fed up with how they are setting up the scoreboard. they are creating images to make an whole table layout to display the scores of each team in the standard bracket formation style

    i was wondering, how hard would it be to create a little JS + CSS diddy that would have initial form fields lined up vertically down the page (all the teams), then based on score, the team who won is displayed in the next round, the team who lost goes to the losers bracket, etc.?

    I could explain it further but i assume all of you get the concept i'm discussing and have seen examples of it. The CSS part would be to colour the score of the winning teams cell Blue while coloring the team who lost's score Red.

    its the first team to 16 rounds won, with two 15 round halves.

    any prelim ideas, or should i explain myself more?
    Last edited by canadianjameson; 09-18-2005 at 08:08 PM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    Regular Coder
    Join Date
    Aug 2005
    Location
    Toronto, ON, Canada
    Posts
    231
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It is easy. Use <table> and images to draw a tree structure
    like

    Code:
                    +--------+
                    |        |
                 +--+ team1  |
                 |  |        |
     +--------+  |  +--------+
     |        |  |
    -+ winner +--+
     |        |  |
     +--------+  |  +--------+
                 |  |        |
                 +--+ team2  |
                    |        |
                    +--------+
    Boxes are cell borders, connection between them are images. (They could be borders of cells as well, but is is easier with images). Images are "mosaic"
    rm -f /


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •