Chat

VirtualTabletop does not have a built in chat feature (yet). However, there is a way to bring chat to your rooms by adding some additional widgets.

How It Works

Installing the chat feature will add 23 widgets to your room, only one of which starts out as visible. The rest are located offscreen around "x": -500, "y":0. The visible widget is a blue and white start button that appears in the upper left corner. Players who want to enter the chat press this button to activate it. This button can be customized in any way the room designer wants or the clickRoutine code can be moved to some other menu control system. As long as players have a way to start the chat system, the form this button takes does not matter.

The chat system is run through cloned widgets that are owned by each player pressing the start button. No changes occur on the original widgets except that the chat log history is maintained on the widget with the ID "mainChat." Game room designers should not alter the original widgets; doing so is likely to break the chat system functionality or cause the system to appear strange. Trust us; we had plenty of this during development and testing.

Once the system is installed and a user presses the start key, a chat window opens on the game screen. The entire chat window is owned by that player and no one else can see it, so it will not visually interefer with anything other players see. The user is presented with some brief instructions and asked to pick a color. The colors are unicode icons that work with the text and the playerName to identify each chat room participant by a color and their name. A player who wishes to change his or her name must do so using the Player List overlay that is part of the VirtualTabletop features. Multiple players can be the same color in the chat system.

After choosing a color, the user can begin typing in the white text box. After pressing the "Enter" key, the message is transmitted to the "mainChat" log and from there to all the players. This system works slightly differently than other chat rooms you may be familiar with in that the most recent message is always at the top of the window rather than at the bottom.

While using the chat system, users can alter some settings by pressing the "Options" button. This allows the user to change several CSS settings that change the visual appearance of the text or window. The user can also choose between a full and half height window.

They window can be easily moved around the screen by dragging the side button. Clicking on the button instantly "docks" the system at the nearest left or right boundary. When it gets close to the left or right border, the window will also snap to a grid. Pushing past the grid point will also dock the window. Docking hides everything except the blue side button so as to keep the chat system out of the way when not being used. The button can be dragged to or docked in almost any edge boundary (except near the corners) on the screen. While the system is docked, the button will turn red if any other player posts a message. The button will stay red until the system is undocked.

How To Install

There are two ways to install the chat system.

The first way involves working with a .vtt file outside of the VirtualTabletop environment. To use this method follow these instructions:

1. Download the .vtt file you want to add chat to.
2. Open the file using a zip file editor.
3. After intially opening the file, you will see one or more .json files. Each file represents one variant from the room. The files will have random 4 random letters/numbers as the file name.
4. Open the first .json file using a text editor.
5. Scroll to the bottom of the file you just opened. At the end of the file delete the last curly bracket `}'.
6. Cut and paste the .json code from below into the file you opened.
7. Save the file.
8. Repeat for any additional variants you want to add chat to.
9. Save the .vtt file using the zip editor.
10. Upload the modified file to VirtualTabletop. In the unlikely event you made an error, the program will tell you.

The second way involves copying and pasting all 23 widgets individually from an existing room with the chat system. You will need to use the JSON editor (CTRL-J) in order to view the widgets but that editor also has issues copying long parts of the code and a few of the widgets have very long code. So you will need to break up the copy and paste into smaller chunks which creates its own problems and opportunities for error. If you have the capability to do so, you should use the first method.

Help and Feedback

If you have problems installing or using the chat system, feedback about its operation, or requests for changes, contact Interitus or LawDawg on Discord.

JSON Code

The following is the JSON code you need to copy and paste using the first method for installing described above. Just select and copy the code and paste as described above. Note, this link takes you outside ArnoldSmith86's virtualtabletop github repository to a different repository created for the purpose of making this particular piece of code easy to select and copy. This code will not run on its own (I mean, it starts with a comma) and is intended only to be copied and pasted as described above.

https://raw.githubusercontent.com/96LawDawg/virtualtabletopchat/main/Chat%20Room%20Code%20v1.1