Rolebutton OL engine tutorial

1. What is this?

This page contains an OL game (One Line game): a full messaging board made using only one line of HTML with JavaScript inside it. It uses your browser’s localStorage, so it even works without internet once loaded.

2. How to use the message board

Step 1: Click the “Board” button

When you click the button, a popup will appear asking for your username. Type any name you want to use and press OK.

Step 2: Choose “send” or “view”

After entering your username, you will be asked to type send or view:

• send: write a new message to add to the board
• view: see all messages that are already on the board

Step 3: Sending a message

If you choose send, you will be asked to type your message. You can use some special tricks:

• /n: creates a new line in your message
• /t: adds a space (tab style)
• /rollX: rolls a dice with X sides, for example /roll20

After you send your message, the board will show all messages in one big popup. Each line has the date, time, username, and message.

3. How it works (simple explanation)

The button has JavaScript inside its onclick attribute. When you click it, the script:

1. Asks for your username and saves it in localStorage.user.
2. Loads the board from localStorage.board (or creates an empty one).
3. Asks if you want to send or view messages.
4. When sending: it formats your message, handles /n, /t, and /roll, then adds a timestamp.
5. Saves the updated board back into localStorage and shows everything in an alert.

(if your friend says they put a message and you don't see it, refresh the page.)

4. Make your own OL game

You can make your own OL game by creating a single <button> with all the JavaScript inside the onclick attribute, just like this one. Here’s a simple template to start from:

<button onclick="alert('Hello from my OL game!');">My OL Game</button>

From there, you can:

• Add prompts: use prompt('Question') to ask the player things.
• Store data: use localStorage.key = value to remember things.
• Use arrays: store lists with JSON.stringify and JSON.parse.
• Make rules: use if statements to react to what the player types.

5. Tips for your own OL games

• Keep it short: it has to fit in one line of HTML.
• Be creative: dice, secrets, mini-RPGs, puzzles, anything.
• Test often: refresh the page and click your button a lot.

Have fun making your own OL games and message boards!