DevWarsWatchingCompetingEarning
Under Development

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

Last Modified: June 30, 2018

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 3HTMLCSSJAVASCRIPT

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.

Zen Garden

1 VS 1CSS

Time: 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. Objectives are not available in Zen Garden games.

Coffee Run

1 VS 1JAVASCRIPT

Coming soon!

Themes

Every game mode is paired with a theme to keep the websites comparable between both teams.

Objectives

Primary focus in 3v3 matches is to fulfil certain objectives in order to gain the points needed to overtake the opposing team. These do not have to be completed in order and as soon as a team declares an objective fulfilled, the host checks if the requirements have been met. Only if that is the case the team gets a point.

Completing Objectives

When an objective is complete, players must request the objective to be removed by the game show host in order to secure the point(s).

Bonus Objectives

Unlike standard objectives, bonus objectives are worth 2 points instead of 1 and are denoted by a gold color. By default, bonus objectives are locked and cannot be achieved until all 4 standard objectives have been completed.

Strikes

If the game show host finds a submitted objective to be incomplete, the team will earn a strike. Once a team reaches 3 strikes, the bonus objective will be eliminated from that team.

Dropped Objectives

After the clock runs out, the game show host will do a final review of all the objectives completed for both teams. Points earned from a completed objective will be lost if found to be incomplete during the final review.

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:

PhasePossible Points
Standard Objectives4
Bonus Objective2
Voting (UI)2
Voting (UX)2
 10

Rules

  1. No Frameworks of any kind are to be used.
  2. The DevWars Twitch channel must not be open whilst competing.
  3. No copying and pasting of code, however copying code and URLs from teammates is acceptable.
  4. After the 60 minute timer has run out, your code can no longer be modified.
  5. Inline styling is not allowed. All styling must be performed using CSS.
  6. Player must code in the DevWars Editor, coding in any other editor/IDE is strictly prohibitted.

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 UI and UX.

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 total votes per team.

ThresholdsPoints
< 55%0
>= 55%1
>= 80%2

UI / User Interface

Base your vote on the overall design of the website. The interface should feel coherent with consistent use of elements. The website should be responsive, look good on mobile and follow the game's theme.

UX / User Experience

Base your vote on how you feel when interacting with the website. It should be simple to use and easy to navigate. Look for things such as bugs or poor execution of functionality by way of design.

Tie Breaker

If the points on both teams are tied, we run a Tie Breaker for the best overall team. Users vote blindly, meaning, the voting bars will not be displayed on the stream. In the unlikely event that there is a tie in the tie breaker, the game host will make the final decision and declare the winner.

Betting

Put your hard earned Devcoins on the line by betting on which team you think will win the game. Betting is only open for ten minutes after the first five minutes of the match.

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

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

ValueDescription
IntegerA minimum of 50 Devcoins are required to place a bet.

[team]
Enter the team color you are betting to win.

ValueDescription
blueBet on blue team
redBet on red team

[objectives]
Enter the minimum number of objectives you think the team will secure.

ValueDescription
1-5Number of objectives
aceAlias to typing (5) indiciating that the team will secure all objectives

!clearbet
Clears your last placed bet.

Payouts

Win more Devcoins depending on how specific your bet is. The lower the odds, the greater the payout. Below is a chart of payouts against different odds:

BetExamplePayout
Team (Blue/Red)!bet 100 blue1:2
>=1 Objectives!bet 100 red 13:5
>=2 Objectives!bet 100 red 24:5
>=3 Objectives!bet 100 red 31:1
>=4 Objectives!bet 100 red 47:5
==5 Objectives (Ace)!bet 100 blue ace2:1

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 hosting on our Official 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 live timer, points, and strikes.

Supported Keys

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

KeyCommand
Ctrl+SSave document
Ctrl+DFind next matching selection
Ctrl+FFind
Ctrl+HReplace
Ctrl+GGo to line number
Ctrl+SpaceTrigger 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.

Submitting Objectives

When you complete an objective, you must submit it for review. To submit an objective, click the checkbox icon on the top left corner of the game view.

Tip: Make sure all team members are ready before marking an objective complete or else your team could potentially receive a Strike.

Earning

Earn XP to level up and collect Devcoins to spend!

Devcoins

Earn Devcoins to spend on cool items in the Shop.

How to earn

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

MethodDescriptionAmount
Twitch Chat (offline)Awarded every 30 minutes
2
Twitch Chat (live)Awarded every 30 minutes
10
BettingPlace Bets during a gameVariable
BadgesEarn BadgesVariable
CompetingCompete in a DevWars gameVariable