Gametime3 — a bridge timer in JavaScript!

This is the documentation for Gametime3, a timer for bridge clubs and tournaments written in JavaScript. (The original Gametime was written in QBASIC in the 1990s, and Gametime2 in PerlTk in the 2000s. The idea for this program is old but the developer is entirely self-taught and works at an excruciatingly slow pace...)

Writing this third version in JavaScript has the advantage that it can be used on any browser under any operating system, and look almost the same. Screen sizes will affect the look slightly but as long as the screen viewport area is about 30-60% wider than it is long, the elements should fit and fill the available viewport.

You should be able to run the program on any recent browser version under any somewhat recent operating system and get good results on a computer, a tablet, a laptop, possibly even a phone (haven't tested that yet....) Most of the time you don't even need to be online. The program downloads two font-faces (Fira Sans regular and bold, the text font you are reading now) from Google Fonts and uses JQuery, a free library that makes writing JavaScript easier. On my PCs I have simply downloaded and installed the fonts and the small needed JQuery file. On my iPad I ran the program once while online and the browser cache saved the files so that it could be run again while not online (which probably works for computers as well).

Since this is written in JavaScript, by "run the program" I mean simply "load the page into your browser." It's designed to be (I hope) fairly intutive, but let's have a look at some screenshots so I can show you the features:

When you start the program this is what you will see. A default setup that is easily changed. It looks like a lot of buttons but it is far less confusing that a jetliner flight deck...

The default setup is Section A (white) as a 13-round open pairs, and Section B (yellow) as a 12-round Gold Rush event, both playing two-board rounds a bit longer than fifteen minutes, with two hospitality breaks of five minutes after round 4 and 9, and a skip in section B after round six. The basic idea is to start the clock very early, possibly even before you start selling, with a 'countdown round' to the scheduled gametime, and make whatever adjustments you need while the clock counts down the minutes to the start.

In a club, most of the time you will simply delete Section B and make a few changes to the parameters of Section A and you're good to go. In a tournament, you may want to have several clocks, one for two-board-round games, one for three-board-rounds, and one for four-board-rounds if you have any. You'll have a bit of setting up to do, but it can all be done on the fly easily and checked quickly, while the clock runs.

So our first illustration will be to show the way we set things up. We'll assume this is a tournament with multiple events, but lucky for us, all of them are three-board rounds this session. We'll change the number of rounds first to 9, the length of the longest game. The individual sections can be set to go fewer rounds, and end earlier.

Let's change the number of rounds to nine, by clicking the '-1' button four times, underneath the label that says 'Number of Rounds.' As you do this, you will see the 13 rounds, represented in the second column from the left, redrawn to 12, then 11, then 10, then 9 rounds...
We've switched to nine maximum rounds, but as you can see in that second column, the breaks are still after the 4th and 9th rounds. To the left and right of 'Number of Rounds' are arrows which cycle through the types of 'Setup Adjustments' you can make. Let's cycle through until we get to "Break Rounds" and then use the '+1' or '-1' keys to cycle through the options until '4, 9' becomes a more logical choice of '3, 6' for hospitality breaks.

As you cycle through the options (which are preselected as the most likely to be used for the number of maximum rounds), you will see the breaks displayed graphically in that second column.
Anything you see with rounded corners is a clickable button, usually with a white border. In the 'Setup Adjustments' area you can change the number of boards per round, the maximum number of rounds, the rounds which are followed by hospitality breaks, and the current round number.

That current round number starts at '-1' and next moves to '0' for the pre-game countdown, then of course goes to round '1'.

The green column on the right hand side of the screen shows two rectangles under the green bit, which represent the two boards in a round. We'll want to change that from '2' to '3' under 'Setup Adjustments' as well.
Now we have three boards per round, but there is one more adjustment we should make. This is the amount of time in each round, currently set at 15 minutes and 12 seconds, as you can see in the "Add/Subtract Time In..." section. Click the '+60' button seven times to get rounds up to 22:12, which is more like it for three boards.

The options available in the "Add/Subtract Time In..." section are:

"...Remaining Rounds"—This changes the length of unstarted rounds, but not the current round.

"...Current Round"—This adjusts the time in the current round. If you reduce it past zero you will be in the next round. If you add time to a round which is more time than a normal round has, it will let you do so; it won't go back to the previous round. (It will assume you forgot to program a break.) Adjustments can be made with the clock running and the current time will appear in the rectangle below, as well as with much larger digits above.

"...Hospitality Breaks"—This determines how much time the program will add to a round that is followed by a hospitality break. The default is five minutes. It seems long, but if you reduce it to three, I guarantee you that someone will take at least five...
Now we have three boards per round and 22 minute rounds. Remember, if you have multiple sections playing different numbers of boards in each round, you should really use two clocks. A big external monitor will allow you to run two or three or even four browser windows simultaneously and you can fit them on the same screen by reducing the size of each window. Or, you could have a monitor for one clock, a laptop for another and an iPad for a third. All kinds of options exist.

But, to make them all work, players need to know which clock to look at. The list of sections on the left makes this fairly clear, and if they still can't figure it out, you can point to the board display on the right as a way to tell. But we need to know how to set up the various sections. That's next, but let's do this with the countdown clock running.

Click the red 'Start Clock' button.
Our clock has begun and has assumed that gametime is imminent. But we still have sections to setup! Maybe we're in a club and we have only the one section, so we want to delete section B. Maybe we have put out a different table marker letter or colour.

Let's add some time to the clock so we can make the section changes. Scroll through under 'Add/Subtract Time In...' to get to "...Current Round" and then use the '+60' button to add some minutes.
Ten should be about enough. (Actually, as you can see below, it's only nine minutes and three seconds. The 'Minutes Left' section's big numerals show full or partial minutes left. That means when it says '1' you are in the final minute of a round.)

To edit the section details, you have probably already guessed that we are going to click the brown button in the bottom left that says 'Edit Section Details.' (I told you it was intutive.)

What we can't really show you is the cool effect that results. In about a half second, the 'Setup Adjustments' and 'Add/Subtract Time In...' areas fade out and the section contols fade in. Being the slow developer that I am, I knew that this was what I was eventually going to do here, but even I was gobsmacked the first time I saw it happen...
Our brown 'Edit Section Details' button also changed, to a purple 'Edit Round Timing' button. You can go back and forth between the two modes as often as you want. The same is true for the red and green 'Start Clock' / 'Stop Clock' button beside it.

Another interesting effect to take in at this point: that green rectangle on the right is getting smaller as the clock ticks down, and the actual ticking is happening in the middle with a little second blip.

But while we looked at all of these effects, our user has been busy at work adding a third section. It looks like Section Y now, but he has changed the letter to 'C', the type to 'BAM,' and nothing has happened. This area is a bit different. To lock in your changes you need to click the 'Accept Changes' button.

(This is different from the 'Round Timing' area, where changes made get a screen update immediately.)
Our user clicked "Accept Changes" and got the desired effect: a green section C which is now a Board-A-Match.

When we click on 'Accept Changes,' the section at the left displays our choices for all to see. There are five options that can be set for each section, and a maximum of four sections on one screen. The section currently selected has a white border around the left side of the two-toned pill shape that contains its current section letter. Click on the one you want to change first, or you will be changing a different section than the one you want!

Let's add a fourth section for our 99ers by clicking on the one ADD button left.

The other options are:

"Letter" — Currently limited to A-Z. New sections are always W X Y or Z, but the selection loops from Z back to A so it's not too many clicks to get what you want. It is not forbidden to have two sections with the same letter, it will just make you look like an amateur (it can be quickly changed on the fly, of course). At some point I might add more options for double and triple letter sections, but I don't know how DDD will fit in the space...

"End Round" — The round number that is the last round for this section. If you set up a game for nine maximum rounds, any section with fewer rounds is removed from the display once its last round ends.

"Skip After" — The round number that is, in this section, followed by a skip.

"Colour" — (Sorry for the Canadian spelling. Change it if you prefer.) You can cycle through eleven different colours here, as well as the 'ACBL default' option, where A-F is white-yellow-green-orange-blue-pink, and so is G-L, M-R, S-X, and Y and Z are white and yellow. Directors remember this by the mnenomic '[W]ould [Y]ou [G]et [O]ur [B]oards [P]lease.' If you choose 'ACBL default' and then change the letter, the little square beside (WYGOBP) will change colour as you do so.

"Type" — This controls the short text under the section letter, and has many options, from A/X/Y to B/C to Swiss to 0-almost anything.

To delete a section, click its red DEL button, but be warned: this is immediate and permanent. (Maybe I should add an undo option...) To add a section, click a green ADD button (if you have already four sections in play, you will need to delete one section first), then click on the section letter given to you to select it, make the changes needed, then click 'Accept Changes.'

It seems a lot of work, but looking at the clock you can see how long it took me, and I've only had this working for about a week as I write this. After a while you will find it quick and easy. In most games, if it is set up properly, you may not need to do anything for the next three hours!

Anyhow, we're ready now to start the first round. Click back to Edit Round Timing and reduce the time left in 'Round 0' and let's get started!
Now that our game has begun, we have a few more things to note:

The current round in the second column is in red. This is something you can point to when a somehow-exhausted player asks how many rounds are left in the middle of round two...

The first line of the status area below the big numerals now tells us which sections this clock controls and how much time is left until the last game is scheduled to end.

The second line tells us how many rounds (maximum, some sections may have less), how many boards per round, and how many minutes players get for each board. If something is set up wrong, this line will reveal what you need to correct.
Halfway through round one, the green rectangle clearly shows that we should be about halfway through the second board.
We've moved ahead to round three, the first hospitality round. Time has been automatically added to the round. The three boards have been squished upwards a bit to graphically display that there is a break at the end of the round! The players probably won't notice, so...
When we get to ten minutes left in the round, the second line of the status area reminds directors to let players know that a break is coming.
In every round, when we get to the last four minutes, the number turns bright red. Some Directors like to have a rule that says no new boards may be started at this point, and a red number makes that point emphatically.
Also in every round, once we get to the last two minutes, there is another effect that persists until the round is over...
It's easy to see as the program runs, but not easy to see with screenshots.
The background behind the minutes numeral fluctuates between a darker and a lighter gray, in the hopes that someone, perhaps dummy, will notice and urge that play be completed quickly.
I first used this effect in Gametime2, where it was immediately dubbed 'Heavy Breathing Mode' by someone!
Now we're in round four, where something will happen at the end. Remember, Section B and D are playing eight rounds only. If you've figured it out, don't say it yet! Wait until six minutes left in the round, and then...
No sense telling anyone to skip before they've gotten into the round, so we wait until near the end to display it. If properly set up, this will be a reminder to Directors and players. Just be sure that everyone knows exactly which sections are supposed to skip.
After the skip, the notices are removed.
There's always one conspiratorialist who doesn't believe that he's late when half of the room is already out the door. When the last round ends, the clock counts UP so you can let the slowpoke know how many extra minutes he has delayed the reporting of the results!

I seem to have forgotten to grab a screenshot of the final round, where the two sections that are finished suddenly dissappear from the left side section list. But I have tested that and it works. Another thing you may wonder about is how the numbers above 9 fit into the round number box. (They shrink but are still easy to see.)

If you are an expert in JavaScript, you will have a good laugh when you see the code. I'm still a beginner here and the advanced concepts elude me. I know it's unusual to have the CSS and the JavaScript all in the same file, but I'm OK with working that way. Don't bother talking to me about objects or global variables or styles or other concepts I'm unlikely to need to get the thing to do what I want it to do. If you suggest an improvement that interests me, I might get to it at some point.

On a very large screen like my 32 inch external, the text tends to drift a little higher and not quite fill the boxes as well. Feel free to edit the CSS values for line-height, letter-spacing, and font-size to what works for you if you have the expertise to do so. Best is to save a copy of the file first as a backup in case something goes wrong. You certainly don't want to be asking me for debugging advice!

Here is the link if you want to play around with it. Have fun!