> For the complete documentation index, see [llms.txt](https://docs.2bttns.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.2bttns.com/how-to/build-a-game.md).

# Build a game

{% hint style="info" %}
To learn about how game objects are scored, [learn about Classic Mode](https://docs.2bttns.com/getting-started/what-is-2bttns#classic-mode). 
{% endhint %}

## 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.

<figure><img src="https://content.gitbook.com/content/n2L7ltGlCAKlpbJZ3edj/blobs/gKAWj8zFuQPB0jBWHdGP/Screenshot%202024-02-21%20at%209.46.02%E2%80%AFPM.png" alt=""><figcaption><p>The "Games" page in your Console</p></figcaption></figure>

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

{% hint style="info" %}
Remember to use an [authenticated Bearer Token](/references/apis/authentication.md)!&#x20;
{% endhint %}

{% openapi src="/files/kCwNyeiyMRxJvhZ934kk" path="/games" method="post" %}
[openapi.json](https://content.gitbook.com/content/n2L7ltGlCAKlpbJZ3edj/blobs/489xqKU5WXWpX6Dz2H47/openapi.json)
{% endopenapi %}

## 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:

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

## Custom CSS

<div><figure><img src="https://content.gitbook.com/content/n2L7ltGlCAKlpbJZ3edj/blobs/J1RxRxuTm6282zYOZ6vy/303957267-2b233c6c-e0fc-48a9-aa23-c05e0c94cd60.png" alt=""><figcaption><p>(Before) Default 2bttns game with no custom styling</p></figcaption></figure> <figure><img src="https://content.gitbook.com/content/n2L7ltGlCAKlpbJZ3edj/blobs/FfiFjElpmTScsyAnbU3d/303957332-6964c381-1093-49fb-bf34-d8124389e741.png" alt=""><figcaption><p>(After) Custom styling applied to 2bttns game</p></figcaption></figure></div>

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.

<figure><img src="https://content.gitbook.com/content/n2L7ltGlCAKlpbJZ3edj/blobs/z9sSaZQsPZK0MT3DIfAY/303957390-e74d7622-6a93-4e6a-b89e-a3f432943ddf.png" alt=""><figcaption><p>Paste your custom CSS here</p></figcaption></figure>

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

{% code title="CSS Classes" fullWidth="false" %}

```css
/* 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;
    }
}
```

{% endcode %}

## 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.

<figure><img src="https://content.gitbook.com/content/n2L7ltGlCAKlpbJZ3edj/blobs/AJvtIkvVQ30iRX2XozL4/Screenshot%202024-02-24%20at%202.43.21%E2%80%AFPM.png" alt="" width="563"><figcaption><p>Mode Configuration under Games > Your Game</p></figcaption></figure>

`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.

<table><thead><tr><th width="206">Mode Configuration</th><th></th></tr></thead><tbody><tr><td>Game Mode</td><td><p>The user interface and underlying data processing functionality that define how a Game is played.</p><p><br>Coming Soon: Additional Modes that can be installed or custom-built to support new types of Games.</p></td></tr><tr><td>Round Length</td><td><p>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. <mark style="background-color:yellow;">We <strong>recommend</strong> a shorter game for a more enjoyable user experience.</mark></p><p><br>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.</p><p><br>Erasing this value to be empty will make the game use ALL Game Objects associated with the Game's input tags.</p></td></tr><tr><td>Question</td><td>Optional question prompt the player will see as they play the game. For example, "Which is more fun?"</td></tr><tr><td>Item Policy</td><td><p>Choose how Classic mode should load Game Objects when playing the Game.</p><p></p><p><code>preload</code><br>Preload all Game Objects before the Game starts.</p><p><br>Additional policies will be added in the future, along with the ability to create custom policies.</p></td></tr><tr><td>Replace Policy</td><td><p>Choose how Classic mode should replace Game Objects with new options during the Game.<br></p><p><code>keep-picked</code></p><p>Keep the picked Game Object and replace the rest.<br></p><p><code>replace-picked</code></p><p>Replace the picked Game Object and keep the rest.<br></p><p><code>replace-all</code></p><p>Replace all Game Objects with new options.</p></td></tr><tr><td>Show Color Bar on Buttons</td><td>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.</td></tr></tbody></table>