How to run Ttang on stream

한국어

A stream overlay that puts Korea's 17 provinces on a tile map and lets two teams split them. There is nothing to install and no account to make. One address is all it takes. This page runs from first setup to the spots where your hands get tangled mid-stream.

What this overlay is

It is a conquest map you place over your stream. Korea's 17 provinces sit as square tiles, and each tile is either empty or wears the color of one of the two teams. At the top, numbers and a bar show how many tiles each team holds. Viewers see where the match stands just by looking at the screen.

One thing up front: this app has no rule that decides a winner. The stream decides who takes which tile, and the host taps the result in by hand. So the tool only shows a settled result big and clearly. The rules that make it fun are yours. Section 5 below collects a few shapes those rules can take.

The layout is an approximate tile map, not the real administrative borders. The square tiles roughly keep which provinces neighbor which, so areas and shapes differ from the real ones. The names are the common short names of the 17 provinces.

Basic use

Name your teams

The first screen has two input boxes. They start as Blue and Red, so change them to whatever you like. A team name holds up to eight characters, so a longer one gets cut off. The overlay is narrow, so a short name reads better anyway.

Copy the address into OBS

As soon as you type a name, the overlay address appears in the box below. Press the copy button, add a browser source in your streaming software, and paste the address in. About 400 wide by 640 tall fits well. The board itself is drawn 380 wide, so anything narrower squeezes the tile text.

The overlay background is transparent. Place it on your stream and only the tiles and the bar float there, with the picture showing through. You do not need to touch any setting to turn the background off.

Tap to paint while live

When a mission ends and you have a result, tap that province's tile. Each tap moves it from Neutral to one team, then to the other team, and one more tap returns it to Neutral. A browser source only displays and does not take clicks, so right-click the source, open the interact window, and tap there. The result shows on stream right away.

What the app does in detail

From here on, this is what the code really does. These are the parts that are easy to mix up mid-stream, so a quick read saves you from panic.

Seventeen tiles and the empty spots

The grid is four wide and six tall, 24 cells, but there are only 17 tiles, so seven spots stay empty. Those are not missing provinces. They are spacing left to keep some of the map's shape. A small place like Sejong gets a tile the same size as Gyeonggi. The match is decided by the number of cells, not by area, so one cell of Seoul weighs the same as one cell of Gangwon.

The three states of a tile

A tile is Neutral, one team, or the other team. Each tap moves it one step in that order, and after the last it goes back to the first. There is no undo button, but since it cycles that is not a problem. If you tapped by mistake, tap twice more to send it back.

What the territory bar shows

The bar has three parts. The left part is one team, the right part is the other team, and the faded middle is Neutral, which nobody has taken yet. The numbers on the sides are the tiles each team holds, and the bar length is that count out of 17. You can watch Neutral shrink, which helps you judge how much of the segment is left.

The board lives in the address

Every time you tap a tile, the whole board is attached to the end of the address. Each tile is one digit, so it is 17 digits: 0 is Neutral, and 1 and 2 are the two teams. There is no storage server. This string is the saved copy. Refreshing the browser redraws the board exactly as the address says.

To carry on in the next stream, copy the whole address from the interact window when you finish and note it somewhere. Open the source with that address next time and the last board comes back as it was. You may also edit the address by hand: any character other than 1 or 2 reads as Neutral, and anything past 17 digits is ignored. So a strange address will not break the screen.

Team names travel in the address

The overlay screen has no place to edit names. The names ride in the address you made on the first screen, and the overlay only reads and shows them. To change a name mid-stream, make a new address on the first screen. Names arriving in the address are also cut at eight characters.

What goes to a server and what does not

Team names and the board are not stored on a server. Everything runs inside the browser, and the board lives at the end of the address (after the # on the overlay, in ?pan= on the home page). Whoever receives that address sees the same board, and the share button on the home page makes exactly that address. The server only counts anonymous steps, such as whether the page was opened, whether the board filled up, and whether copy was pressed. It never records which tile belongs to whom.

There is no way for several PCs to watch one board live. A shared board is a snapshot of the moment you sent it and does not follow later tiles. Open the overlay in two places and you get two separate boards. For a joint stream, it is safer to have one person run the board and share their screen.

What it does not have

There is no link that reads chat or donations and paints tiles for you. There is no timer and no scoreboard, and no setting to add a third team or change the team colors. You cannot remove a province or add another. What you have is 17 tiles, two colors, and one action: tap to paint.

Basic tips

Tap once before you go live

Set where you open the interact window and how big it is before the stream starts. Paint one tile, then tap it twice more to put it back to Neutral. Your hand will remember where to go when the stream begins.

For a new board, cut the end of the address

To start the next round on a fresh board, delete everything from the hash sign at the end of the address and open it again. You get a board with all 17 tiles Neutral. Copying a new address from the first screen gives the same result.

Measure a segment in tiles

With 17 tiles and one mission per tile, that is 17 rounds. At three or four minutes a mission, it becomes a segment of a little over an hour. To cut it short, stop when about half is filled, or decide ahead to leave a few provinces Neutral. Tell viewers before you start how far you plan to go today, and the segment feels less likely to fizzle out.

Say the color along with the team name

One team is painted blue and the other red. When you call a team on stream, say the name and the color together. A viewer who joins late can then follow the situation from the bar alone.

Ways to run it

The rule that decides who takes a tile lives outside the app. Below are shapes that work well when you write your own rules. None of them is something you have to follow.

One province per round

Put one province at stake, run one game or one quiz question, and paint the tile in the winner's color. It is the simplest shape. The screen changes the moment a result comes in, so the flow never breaks. If you use the same game for every round, such as Snake or Sudoku from our sibling tools, it is clear both teams played on equal terms.

Pick the next province by chat vote

Letting viewers decide where to paint adds a sense of taking part. Put two of the remaining Neutral provinces up as candidates, take a chat vote, and run the mission in the winning province. If you let a team take a province the other team already holds, the board flips back again late in the match.

Give provinces a character

Choose a few strongholds and give only those a hard mission, and the board gets tense. You could also let the side that already holds a neighboring province start with an edge, or make Jeju open for a challenge only after a team holds three other provinces. The app enforces none of this, so it is safer to keep just one or two conditions that you can remember easily.

Spread it over several streams

The board stays in the address, so you do not need to finish in one stream. You can play up to five tiles today, note the address, and pick up from that spot in the next stream. A map that fills in over several days becomes a record of your channel on its own.

Common snags

The tiles will not respond

The browser source you see on stream is only a picture, so it takes no clicks. Right-click it in the source list, open the interact window, and tap inside that window. The interact window does not go out on stream, so you can leave it open while you play.

The board is empty after a refresh

The board sits in the string of digits at the end of the address. Open an address without that part and you get an empty board. The first address you put in the browser source has no digits, so to carry on, copy the address from the interact window and put it into the source settings instead.

The team name has not changed

The name is a value that comes in the address, so you cannot change it inside the overlay. Go back to the first screen, edit the name, copy a new address, and put it into the source. The board does not follow to the new address, so if a match is running, copy the digits from the old address onto the end of the new one and the board comes back.

The name is cut off

A team name shows only up to eight characters. On a narrow overlay, a long name pushes the numbers aside, so that limit is fixed. Use a short form for long names.

Two teams fight over one tile

If two teams keep taking the same province back and forth, the segment drags. The app does not count how many times a tile changed, so it is cleaner to set a rule in advance, such as one challenge per province per day. The rule you set on stream is the rule of this tool.