Game Server Web Application

The Game Server Web Application provides an interface for the participants of a scenario. This interface includes user specific views and controls based on the user's role in the scenario, whether it be a moderator, player, or spectator. In the figure below is an example of what the user may see upon first opening up the Moderator View.

Italics denote features to be implemented

Moderator view - scenario not started

A . Navigation Bar - Currently, the navigation bar features a drop-down menu that allows the user to switch between the moderator and spectator view.

B . Scenario Information - This information button will display a modal with listed information about the current scenario. For more information on scenarios, visit the Scenario File page.

C . Event Filter - Allows the moderator to filter which events are showing in the Event Card List (D). By default, All shows events from all teams as long as the events aren't completed or deleted.

D . Event Card List - Clicking on an event in the Event Card List will open up a modal displaying information about the event (See Events section below). Clicking the list headers will allow the user to sort the list by name, start time, or event frequency (repeat).

E . Event Options - Each event features a button that will open a drop-down menu providing the option to edit the event and also an option to delete or un-delete the event. For more information about events and custom events, visit the Game Server page.

F . Game Clock - Here the game time is shown, either ascending or descending. Next to the game time is a button to start the scenario. This button will split into a pause/play button and a stop button upon starting the scenario.

G . Score Widget - The score widget features a chart that updates every minute, showing the last score closest to that minute mark for each team. The score widget also features a rotating carousel of the scores below the chart. The scores in the carousel are updated very frequently and are almost live.

H . Event Log - The event log will show events that have completed. Clicking on events in the event log will open a modal with additional log information. See figure 7 to see what the Event Log widget may look like while the scenario is running.


Events are the primary focus of the Moderator View. In the Event modal that is opened by clicking an event in the Event Card List, the moderator can see additional information including the event's unique id (UUID), the team's ID, and in many cases the score-group. The score-group shows how points will be distributed upon completion of the event, depending on if it succeeded or failed. This information can be seen in figure 1.

In addition to seeing this extra information about events, the Moderator has the ability to modify the following details of an event:

  • Set the name of an event
  • Set the time an event occurs
  • Set how often an event occurs
  • Set the drift for an event
    • drift refers to a give/take time period for when the event happens.
      • Ex) An event with start time = 1:00 and drift = 30 could happen anywhere between 0:30 and 1:30 game time.
Figure 1 - Event Info Modal Figure 2 - Event Detail Form
Figure 3 - Event Detail Dropdown Figure 4 - Invalid Form

Side Panel / Moderator Widgets

Game Clock

The game clock widget shows the length of a scenario and the current time of the scenario. It also provides controls for pausing, playing, and stopping the scenario. Stopping the scenario will prompt the user with a confirmation window before taking any action.

Figure 5 - Game Clock Widget

Score Widget

The Score Widget shows the past ten minutes of score activity in the form of a line chart. The user can click the labels to change which scores are showing. The range of values on the y-axis of the score chart are scaled to fit the score with the highest values.

As an example, look at the two charts below in figure 6. In the chart on the left, we have the blue team's score showing and so the y-axis scales up to 6,000*. The user can click the score labels above the chart to toggle their appearance. If we toggle the blue team and red team to be off, then the values scale to fit the uptime score's value, as shown in the chart on the left.

*Note that the Blue Team's score is 7,063 at the time of capture, but when the last score had been added to the chart, it was around 5,500

Figure 6 - Score Chart Comparison

The moderator also has the ability to control the rotation of score values beneath the chart. Hovering the mouse over the score value will stop the rotation and clicking that area will pause it until it's clicked again. Additionally, the arrows allow the user to manually rotate through the scores.

Event Log

The event log will periodically update with the events that have completed since it last checked. It displays the time they occurred and whether they succeeded or failed. Clicking an event in the Event Log will display a modal with additional information about the event.

Figure 7 - Event Log Modal

Attachments (13)

Download all attachments as: .zip