DevWars
Watching
Competing
Earning
Under Development

This documentation is currently under development. More sections will be added over time, please check back frequently for updates.

Last Modified: January 8, 2021

DevWars

A live game show for developers

About

People of all levels are invited to participate in an exhilarating battle to create the best website they can within 60 minutes. Teams are formed of 3 people, with the team's members each controlling a single language - HTML, CSS and JavaScript.

Positions

Each player can only code in the language they are assigned to. This requires teams to communicate in order to complete their website in unison. There are currently only 3 positions available to play in DevWars: HTML, CSS and JavaScript.

< / html >
HTML
Templating
{ ; css }
CSS
Styling
( $ js )
JAVASCRIPT
Functionality

Each position plays a critical role for the team. HTML is in charge of templating the DOM, CSS handles the design for the website, and JavaScript brings functionality into the website.

Game Modes

In DevWars, each game mode offers unique playing experience with its own set of rules and conditions.

Classic

3 VS 3
HTML
CSS
JAVASCRIPT

Time: 60:00

This action-packed game mode is the only one that features all 3 supported languages. Two teams of three, face off against each other with a theme and a set of objectives.

Blitz

1 VS 1
HTML
CSS
JAVASCRIPT

Time: 30:00

A fast-paced of Classic where both competing players have access to all 3 languages.

Zen Garden

1 VS 1
CSS

Time: 30:00 - 60:00

This 1 vs 1 game mode provides both teams the same pre-made HTML document. Both teams can only use CSS to style their website.

Themes

Every game has a theme that all teams must follow.

Objectives

Primary focus during the game is to complete objectives in order to gain the points needed to overtake the opposing team.

Completing Objectives

During the game, if the host finds an objective was completed, the team will earn a point. At the end of the game, if the objective no longer works, the point will be retracted.

Bonus Objectives

Unlike standard objectives, bonus objectives are worth 2 points instead of 1 and are denoted by a gold color. Bonus objectives are much harder to complete, teams must be mindful of the time remaining when working on them.

Points

The team with the most points wins the game. Below is a chart displaying a list of points you can earn in each phase:

Phase Possible Points
Standard Objectives 4
Bonus Objectives 2
Voting (Design) 2
Voting (Function) 2
  10

Rules

  1. No Frameworks of any kind are to be used.
  2. No copying and pasting of code, however copying code and URLs from teammates is acceptable.
  3. After the timer has run out, your code can no longer be modified.
  4. Player must code in the DevWars Editor, coding in any other editor/IDE is strictly prohibitted.
  5. Players must code in the language they are assigned to. For example, if you are assigned HTML, you cannot open a <style> tag to code CSS properties. Javascript may add HTML so long as it was copied from their HTML player and is used for dynamic purposes (i.e. templates).

Watching

Take your viewing experience to a whole new level.

Tools

Below are products and resources that will help improve your viewing experience during a live game.

Voting

In addition to the objectives, our audience awards additional points in the categories Design and Function.

To participate in voting, type !blue or !red in the chat to express your personal favorite in each category when prompted.

Point Distribution

Depending on how many votes a team gets in each category up to two (2) points can be earned if certain thresholds are exceeded. Thresholds are determined by the percentage of votes per team.

Thresholds Points
<= 50% 0
> 50% 1
>= 80% 2

Design

Classic
Blitz

Base your vote on the overall look and feel of the website.

  • Look for: Design, Animations, Responsiveness
  • Ignore: Functionality, Features, Bugs
Zen Garden

Base your vote on the overall look and feel of the website.

  • Look for: Functionality, Features, Bugs
  • Ignore: Design, Animations, Responsiveness

Function

Classic
Blitz

Base your vote on the websites features and functionality.

  • Look for: Functionality, Features, Bugs
  • Ignore: Design, Animations, Responsiveness

Responsive

Zen Garden

Base your vote on the overall look and feel of the website.

  • Look for: Responsiveness, Mobile Friendliness
  • Ignore: Design, Animations

Betting

During the beginning of each game, you will have the opportunity to place a bet with Devcoins on the outcome of the game. When you place a bet, you are betting on which team will complete the most amount of objectives, not which team you think will win. This is to prevent bias voting in the voting phases.

You can bet with the following command in the Twitch chat:
!bet [amount] [option]

[amount]
Enter the amount of Devcoins you want to bet.

[option]
Enter the option you are betting on.

Value Description
blue Bet on blue team
red Bet on red team
tie Bet on both teams tying

!clearbet
Clears your last placed bet.

Payouts

Your payout is influenced by the bet sizes placed on other options. If you bet on a team where 80% of the bets were placed, then you will have higher odds of winning, thus you will earn a smaller reward.

Bot Commands

A list of commands you can use on the DevWars Twitch channel

!watch
Outputs links for red and blue team's code editors and websites for live games.

!discord
Get link for DevWars Discord

!coins
See how many Devcoins you have.

!hype
Aboard the Hypetrain when it comes around to earn more coins.

Competing

Compete in live DevWars games for a unique team-building experience.

Requirements

Browsers

v.61 +

v.56 +

v.16 +

v.11 +

Communication

Microphone

Discord

English

It is required that you have a microphone so that you can speak with your teammates during a live game. Contestants must be able to read, write and speak English.

Communication is not required on Zen Garden games.

All voice communications are hosted on our Discord.

Editor

Game View

Each player has their own view with a full-height editor, a window to display the rendered website and documents to preview other team members.

During the game, players can see the game timer, points, and objectives.

Supported Keys

You can use the following keyboard shortcuts in the DevWars editor (currently only displaying Windows keyboard layout):

Key Command
Ctrl+S Save document
Ctrl+D Find next matching selection
Ctrl+F Find
Ctrl+H Replace
Ctrl+G Go to line number
Ctrl+Space Trigger auto complete

Saving Changes

It is important for you to save your document frequently using Ctrl+S. Make sure to only save when your code is complete. The viewers and game host will not be able to render your website until you have saved your changes.

Earning

Earn XP to level up and collect Devcoins to spend!

Devcoins

Earn Devcoins to spend on cool elements in the Shop.

How to earn

Below are all the different ways you can earn more precious Devcoins:

Method Description Amount
Twitch Chat (offline) Awarded every 15 minutes
10
Twitch Chat (live) Awarded every 15 minutes
20
Twitch Chat Bonus 10% chance of randomly receiving bonus coins 0 - 999
Hypetrain Earn coins with !hype when Hypetrain is active Variable
Betting Place Bets during a game Variable
Badges Earn Badges Variable
Competing Compete in a DevWars game Variable