Code

Custom Challonge CSS

Posted on August 8, 2019 Leave a Comment

Tonight I worked on some custom CSS that could be injected into a BrowserSource in OBS to turn a bracket that looks something like this:

Into something that looks like this:

The CSS is included below for future reference.

@import url("https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap");

body {
  background: black;
}

svg text {
  font-family: "Press Start 2P", monospace;
}

/*** Remove rounded edges ***/
svg g.match rect.match--base-background {
  rx: 0;
  ry: 0;
}
svg g.match g {
  clip-path: none;
}

/**** Seeds ****/
svg path.match--seed-background {
  fill: #c1261d;
  outline: 2px solid black;
  outline-offset: 0px;
}
svg text.match--seed {
  transform: translateY(4px);
  fill: black;
}
/**** Player Names ****/
svg text.match--player-name {
  font-size: 15px;
  transform: translateY(5px);
  fill: white;
  stroke: transparent;
}

svg text.match--player-name.-placeholder {
  stroke: transparent;
  /* fill: transparent; */
  font-size: 10px;
  transform: translateY(2px);
}

svg path.match--player-background {
  outline: 2px solid black;
  outline-offset: 0px;
}

/**** Match dividing line ****/
svg line.match--player-divider {
  stroke: black;
  stroke-width: 3px;
}

/**** Player Scores ****/
svg text.match--player-score {
  font-size: 15px;
  transform: translateX(1px) translateY(5px);
  fill: black;
  stroke: transparent;
}

svg g.match svg.match--player path.match--player-score-background {
    outline: 2px solid black;
    outline-offset: 0px;
    /* outline: 2px double #c1261d;
    outline-offset: -7px; */
  fill: white;
}

svg g.match svg.match--player path.match--player-score-background.-winner {
  /* Winner gets highlighted background */
  fill: #f39c05;
}

/*** Round Names ***/
svg .round-label text {
  transform: translateY(2px);
}

svg.round g.round-label rect {
  fill: black;
  outline: 2px solid #aaecf2;
  outline-offset: -4px;
}

span.live-stamp {
  display: none;
}

Istanbul Stream Overlays

Posted on August 4, 2019 2 Comments

Lately we’ve been streaming our board game misadventures.

With the webcam set up over our table, we can capture a reasonable amount of the play area, but things are quite hard to read. So I’ve been experimenting with some overlays to convey pertinent game information.

Here’s a demo of the overlay in action – the popup in the top left only appears for a little while when I change the “last tile visited” variable, and the player information allows us to track all of the different resources and upgrades that the players pick up along the way.

I think keeping the overlays updated is quite the distraction though – I guess that’s my excuse for John going 3-0 undefeated tonight!

Democracy in Action

Posted on August 25, 2015 Leave a Comment

Guys, this is very important.

UnwiseOwl/NombreHombre/Dirk Fischmann/Some other name/Thom is moving to England. As many of us know, he has a formidable tie collection.

In true Thomly style, he is holding a ballot to decide which ties will be travelling with him. He talks about it much better than I could on his own blog.

Anyhow, I needed extra content to hit the once-per-day blog target for the month, plus it seemed like an interesting project to learn HTML 5’s fancy new flex boxes so I made a voting form. It kind of bloated out in size from what I’d originally intended so the coding is kind of awful but it seemed a waste to not share it with the world and see what results we can collate.

It’s a preferential voting form where you can either decide on a “party” of ties that you like best and vote party-by-party, or you can decide to number every tie as you like. We know you might want to be a bit lazy though so you can vote “below the line” and have a valid vote as long as you fill in at least six candidates.

VOTE HERE.

Landslide – A Challonge Addon

Posted on July 21, 2014 Leave a Comment

This past weekend I helped run AVCon, Adelaide’s local Anime and Video Games convention. For the first time since 2010 I also took charge of running the Smash Bros tournament at the event.

Although I like writing tournament management systems, this year I didn’t really have the time for it. Fortunately for me, Smash Bros. has been running as a 1v1 format for the last few years so I was able to fall back on trusty ol’ Challonge.

Challonge has bracketing and result reporting down-pat, but I’ve always felt that it lacks a crucial tool – indicating which station a match should be played on. After running tournaments in 2013 I was tempted to write a database to sit between Challonge and my players and create an interface where I could associate matches with console stations.

Fortunately for me in June of this year Challonge rolled out a change that allowed users to set match locations… even if it’s buried away in the interface a little. It wasn’t ideal, but with a little JavaScript hax I was able to very easily turn it into what I wanted. I wrote some JavaScript that modifies the Challonge tournament management screen to do two things.
1) Display a set of numbers representing the stations on which games should be played on.
2) Allow highlighting of matches to indicate that they are up “now” or “next”.

Consistent with my trend of naming projects after disasters, this script has been dubbed “Landslide”.

Installation Instructions

You need to find a way to run User Scripts in your browser. This script was tested and run with Greasemonkey on Firefox, so instructions will be for Greasemonkey.

Start off by installing Greasemonkey.

Grab this script – it’s where all the magic happens. Copy it to your clipboard.

Now in Firefox, navigate to the Greasemonkey dropdown and select “New User Script…”.

A few options come up – ignore them and click on “Use Script From Clipboard”. A window will appear with the script in it – save and close it and the script should be installed! You may need to refresh pages for the changes to take effect.

You can verify that script installation works correctly by checking out one of my tournaments and verifying that each game loads up an @[number] underneath its lettered match-name.

Usage Instructions

Mouse over match IDs to bring up a modified menu. The menu will display a few new things: “Toggle Highlight”, “Clear Station” and a series of station IDs. The IDs are by default set from 1-8. I haven’t really put time into customising the numbers but you could edit the script to make the station IDs appear differently if you wish.

Selecting a number will set the match location as an @[number] indicator, underneath the letter-name that Challonge assigns for the match.

Toggle highlight will set a match from no highlight, to yellow, which means there is a match on next.

Toggling a yellow highlight will turn it red. Toggling a red highlight will clear the match highlight AND will also automatically upgrade a match that is set up as being “next” (yellow) on the same station to be the new “now” (red) match.

Finally the script will attempt to stop you from setting two matches on the same station to both be on “now” or “next”.

How does it work?

I push the data into the “location” field of the match. You’ll see locations for matches set as something like 3|next

Because Challonge stores this data, match locations can be reloaded when you refresh the page!

Warnings

Do not modify location manually – this will probably cause the script to desync.

If you have any problems with the “state” of the script – it might get confused about which stations are active if a certain sequence of data entry occurs – just refresh the page and it should reload your data.

Closing thoughts – how did it go for MY tournaments?

Having the Station IDs accessible for matches was invaluable. As I was calling up players for their games, many would hear their names but wanted to confirm where they needed to play. Last year, I’d flail around counting down the bracket or call out “uh, is [opponent name] here?” then send the player asking me where they needed to go to whoever had their hand up. This year, I was able to immediately tell them “You’re on Station 5”. I feel it saved a lot of time and confusion.

The “now” and “next” highlighting wasn’t really as useful due to the speed at which games were being completed, and please note it is buggy due to its last-minute inclusion. But it wasn’t totally useless – when I forgot to input results the script would tell me that I had matches already active and I could then ask “Hey could [player] and [player] who played on [station number] confirm who won their match?”.

There is of course room for improvement – for example, matches don’t automatically toggle out of being on “now” when results are recorded. But it was hugely useful for me this last weekend and I think worth sharing. If you use this for nothing other than the Station number then I think you’ll still find it amazing.

Feedback and forks are welcomed. I hope you find this script useful.

Lion

Posted on March 17, 2012 Leave a Comment

Just something to prove I’m not completely out of the blogging game yet.

I’ve been working on a program to generate knot work. The idea initially was as a helper for human-generated knots but could also eventually extend into automation of patterns.

These knots are made using a font that contains characters that resemble common intersections and crossing overs. The font is quite cleverly designed and allows for a lot of different ideas to be expressed and also has all the rotations worked out in such a way that the generated knotwork tends to have the right crossing over and under effect appear.

This method of generation works very different from the traditional knotting which usually requires a lot of forethought and preparation. With this font a more stream-of-thought way of creating knotwork is enabled. It’s definitely quite fun and exciting to see a knot come to life in unexpected ways!

In Accord

Posted on March 1, 2012 2 Comments

[Edit 8th May 2015: I’ve been alerted to the fact that in Windows the audio sounds decidedly piano-like. This is not intentional! I will see if I can fix this at a later date.]

Well March Blog ~~Badness~~ Madness begins today! This challenge, having snuck up on me, has left me racking my brain for ideas of what to post. This time I have no weekly classes to guarantee me at least something to post each week (not that I did take advantage of said classes in order to put together posting material…) so I need to come up with ideas. Ideas of March.

Anyhoo, let’s start by discussing a coding thing I worked on last year. A prototype Accordion emulator written in Java

Screenshot below, you can download the program here. (Requires Java).

This program started as a simple attempt to generate a Stradella button map that I could refer to while playing the piano accordion. I wanted to draw up my own as a bit of fun in remembering my music theory (each row is a perfect fifth interval from the one below it). After some annoying attempts to draw the thing up by hand, then some fiddling around in Photoshop, I concluded that it’d be faster to write a program to generate the thing for me.

Once I’d done that, I decided it’d be fun to make the buttons play notes when they were pressed. Things snowballed from there.

Inspired by a program I’d spotted a few years ago I realised that I could use a keyboard with the program and could map a number of keyboard keys quite easily to the bass button keys as both key layouts contain diagonal rows. Quite fortunately, a standard keyboard should offer 12 rows and four columns of keys allowing for every note in a scale to be represented in my emulator. Although the focus of the program is on the bass keys, I added in a section of the piano keyboard as well to allow for a bit of experimentation with melody and bass.

Finally, I flipped the keyboards so that they correspond more intuitively to what a player would expect to see while playing, as the buttons face away from the player. This also became handy for when I wanted to practice accordion and didn’t have a mirror handy to check my hand placements 🙂

As you can tell I’ve had a few changes of heart in naming this program – it started as AccordionIng which naturally became Accordin’. I’ve started thinking of it as In Accord lately, not that I’ve been really thinking about it lately. Other people tend to just call it Accordion Hero. One day I’d like to turn this into something like an “Accordion Hero” type game or a music tutor. That would probably call for a rewrite. For now, I’m quite pleased that it allows me to practice with my headphones in and not bothering other people.