Build a game

To learn about how game objects are scored, learn about Classic Mode.

Create a new Game

To make a new game with 2bttns, go to the Games area in your Console. After you name your new game, open it to set it up.

The "Games" page in your Console

You can also create games directly from the API using the following endpoint:

Remember to use an authenticated Bearer Token!

Create Game

post

Create a new Game

Authorizations

Body

idstringOptional

ID value. Only alphanumeric, underscore, and hyphen are allowed.

Pattern: ^[a-zA-Z0-9_-]+$

namestringRequired

descriptionstringOptional

Responses

200

Successful response

application/json

default

Error response

application/json

post

HTTPcURLJavaScriptPython

POST /api/games HTTP/1.1
Host: 
Authorization: Bearer YOUR_SECRET_TOKEN
Content-Type: application/json
Accept: */*
Content-Length: 48

{
  "id": "text",
  "name": "text",
  "description": "text"
}

{
  "createdGame": {
    "id": "text",
    "name": "text",
    "description": "text",
    "createdAt": "text",
    "updatedAt": "text",
    "mode": "text"
  }
}

Configure the Game

• Set the length of your game.

• Set a question prompt for users to answer.

• Input data into your game buttons.

Once you've created your game, you can configure the following settings:

Game Details
ID	A default ID is generated for you when a Game is created. An ID may only contain alphanumeric, underscore (_), and hyphen (-) characters. ⚠️ Warning: Changing the ID will change the URL of the Game. This may break external connections to your Game.
Name	Optional display name of the Game
Description	Optional text description of the Game.
Input Tags	Choose the tag(s) corresponding to the collection of Game Objects that players should see when they play the Game.
Number of Game Objects	The number of Game Objects associated with this game, based on the Input Tags associated with this Game.
Custom CSS	Custom CSS stylesheet for overriding the Game UI elements. Different modes will expose different classes you can use to override their styles.

Custom CSS

(Before) Default 2bttns game with no custom styling

(After) Custom styling applied to 2bttns game

Behind the scenes, this custom CSS is passed to a new database field on Games. Admins will be able to paste custom CSS via the dashboard.

Paste your custom CSS here

Below are all the overridable CSS classes to customize the styling of your game:

CSS Classes

/* EXAMPLE STYLING */
/* --------------- */

/* base layout */
.twobttns__layout {
    background-color: #1c2127 !important;
    color: #ddd !important;
    font-family: Verdana, sans-serif !important;
}

/* player id text */
.play__player-id-text {
    font-size: 14px !important;
}

.play__player-id-text::before {
    color:#ddd !important;
    content: "🚀 My Stylish 2bttns Game" !important;
    position: absolute !important;
    left: 1rem !important;

}

/* content container */
.classicMode__container {
    margin-top: 8rem !important;
}

/* question text */
.classicMode__question {
    background: linear-gradient(90deg, hsla(152, 100%, 50%, 1) 0%, hsla(186, 100%, 69%, 1) 100%);
    padding: 0 2rem !important;
    font-size: 20px !important;
    position: absolute !important;
    bottom: 0 !important;
    width:100% !important;
    text-align: center !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
}

.classicMode__question::before {
    content: "❓ " !important;
}
.classicMode__question::after {
    content: " ❓" !important;
}

.classicMode__question--finished {
    color: green !important;
}

.classicMode__question--not-finished {
    color : black !important;
}


/* "or" text */
.classicMode__or-text {
    color: #ddd !important;
}


/* progress bar layout */
.classicMode__progress-container {
    flex-direction: row-reverse !important;
    gap: 0.5rem !important;
}

.classicMode__progress-container--complete {
    display: none !important;
}

/* progress bar background */
.classicMode__progress-bar {
    background-color: #ddd !important;
}

/* progress bar fill */
.classicMode__progress-bar > div:first-of-type {
    background-color: #45edc6 !important;
}

/* progress bar text */
.classicMode__progress-text {
    color: #ddd !important;
}

/* progress bar tooltip */
.classicMode__progress-tooltip {
    background-color: #ddd !important;
    color: black !important;
}

/* 2bttns animated icon */
.classicMode__icon {
    display: none !important;
}

/* choice buttons */
.classicMode__button {
    background-color: black !important;
    border-radius: 0px !important;
}
.classicMode__button-color-bar {
    border-radius: 0px !important;
}
.classicMode__button-content-container {
    justify-content: space-between !important;
    flex-direction: row-reverse !important;
}
.classicMode__button-content {
    color: #ddd !important;
}

.classicMode__button-hotkey {
    background-color: gray !important;
    color: #ddd !important;
    border-radius: 100% !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
}
.classicMode__button-hotkey:hover {
    background-color: darken(gray, 10) !important;
    font-size: 18px !important;
}

/* redirect text */
.classicMode__redirect-text {
    color: #ddd !important;
}

/* media queries */
@media screen and (max-width: 470px) {
    .classicMode__button-content-container {
        justify-content: left !important;
    }

    .classicMode__question {
        font-size: 12px !important;
    }
}

User Experience

When you're creating your game, you'll need to specifc a Game Mode. Game Modes in 2bttns are configurations that feature custom interactions and processing mechanisms. They allow for the development of unique game experiences within the 2bttns platform.

Mode Configuration under Games > Your Game

Classic Mode is an example provided out of the box, which offers a simple user interface along with a backend system that ranks items based on user preferences.

Mode Configuration
Game Mode	The user interface and underlying data processing functionality that define how a Game is played. Coming Soon: Additional Modes that can be installed or custom-built to support new types of Games.
Round Length	The default number of Game Objects that should appear when a user plays this Game. The higher this number, the longer the game will be. We recommend a shorter game for a more enjoyable user experience. This value should be greater than 1 and less than or equal to the maximum number of Game Objects associated with the Game's input tags. Erasing this value to be empty will make the game use ALL Game Objects associated with the Game's input tags.
Question	Optional question prompt the player will see as they play the game. For example, "Which is more fun?"
Item Policy	Choose how Classic mode should load Game Objects when playing the Game. preload Preload all Game Objects before the Game starts. Additional policies will be added in the future, along with the ability to create custom policies.
Replace Policy	Choose how Classic mode should replace Game Objects with new options during the Game. keep-picked Keep the picked Game Object and replace the rest. replace-picked Replace the picked Game Object and keep the rest. replace-all Replace all Game Objects with new options.
Show Color Bar on Buttons	Set to true to show a color bar on the buttons players will see during the game. The color is a Hex color code automatically generated based on the item name the button displays.