♟️ Reversteem: Play Fully Decentralized Reversi directly on the Steem Blockchain! (No Servers, No Smart Contracts)

puncakbukit (78)in #creativewriting • 2 days ago

5% of the rewards of this post are for @steem.amal

Hey Steemians! 👋

Imagine playing a classic, competitive turn-based board game where every move is logged forever on the Steem blockchain, with zero central servers, no smart contracts, and no custom backend.

Introducing Reversteem — a 100% decentralized, client-side dApp that turns Steem posts and comment trees into a deterministic, immutable game engine for Reversi (Othello)!

💡 What is Reversteem?

Reversteem is both a playable web game and a protocol experiment. It proves that you can build fully functional, serverless dApps using Steem as a state machine.

100% Serverless & Static: Runs entirely in your browser (hosted on GitHub Pages).
Steem Keychain Integrated: Move validation and game creation are seamlessly handled via Steem Keychain.
Deterministic Engine: Your browser reads on-chain comments and reconstructs the game board position live.
Steemit Compatible: Every move posts a beautifully formatted Markdown board snapshot, so non-dApp users on Steemit.com can watch the game unfold!
On-Chain ELO Ratings: Track your skill on a global leaderboard computed directly from historical match results.

🎮 Walkthrough: Alice vs. Bob in Action

To show you how easy it is to play, let's step into a standard game scenario between two players: @alice and @bob.

Step 1: Alice Creates a Game 🏁

Alice opens the Reversteem dApp and logs in using Steem Keychain.

She leaves the time mode set to Standard (default: 60 minutes per move).
She enters a title: "Friendly Match with Bob" and clicks Start Game.
Steem Keychain prompts her to sign a post.

behind the scenes, Reversteem broadcasts a root post to the Steem blockchain containing custom json_metadata:

{
  "app": "reversteem/0.1",
  "type": "game_start",
  "black": "alice",
  "white": null,
  "timeoutMinutes": 60,
  "tags": ["standard", "elo-1200", "reversi", "othello", "board", "game", "steem"]
}

Alice is automatically assigned to play as Black (⚫)!

Step 2: Bob Joins the Game ⚔️

Bob sees Alice's open game listed on the Reversteem Dashboard (or discovers her post on Steemit).

Bob clicks Join Game.
KeyChain broadcasts a reply comment under Alice’s post announcing Bob as White (⚪).
The game board activates instantly!

Step 3: Making Moves & Watching the Board 🔄

Alice gets the first move. She clicks cell F5 on the interactive 8x8 Vue board.

What Alice Sees: Her browser formats the move and sends a reply comment via Keychain.
What Bob Sees: Thanks to background polling, Bob’s UI updates within seconds showing Alice’s piece at F5 and flipping Bob's piece at E5.
What Spectators on Steemit See: Anyone visiting Alice’s original post on steemit.com sees neat Markdown tables rendered right in the comments!

|   | A | B | C | D | E | F | G | H |
|---|---|---|---|---|---|---|---|---|
| 1 | · | · | · | · | · | · | · | · |
| 2 | · | · | · | · | · | · | · | · |
| 3 | · | · | · | · | · | · | · | · |
| 4 | · | · | · | ⚪ | ⚫ | · | · | · |
| 5 | · | · | · | ⚫ | ⚫ | ⚫ | · | · |
...

Move #1: ⚫ @alice played F5

Step 4: Time Controls & Winner Determination ⏰🏆

Because Alice and Bob chose the default Standard (60 min) preset, each player has up to 1 hour to broadcast their move reply.

Pass Rule: If Bob gets trapped and has no legal moves, the game logic automatically passes the turn back to Alice during replay validation — no manual action needed.
Timeout Enforcement: If Bob takes longer than 60 minutes, the claim button activates for Alice. Posting a timeout_claim reply ends the match immediately and awards her the win.
Game End: Once the board fills up (or neither player has legal moves), the dApp freezes the board, counts the discs, determines the winner, and updates both players' ELO ratings on the global leaderboard!

🛠️ Built with Zero Tooling Complexity

For the developers in the room, Reversteem was built strictly without heavy frontend build tools, bundlers, or smart contract languages:

Vue 3 + Vue Router 4 (Loaded via CDN)
Steem-JS / RPC Fallback across multiple nodes (api.steemit.com, api.justyy.com, etc.)
Pure Client-Side State: The browser replays immutable comment history to evaluate game rules, board states, ELO updates, and illegal move filtering.

🚀 Try It Today!

Want to challenge a friend or test your skills on the leaderboard?

🌐 Live App: https://puncakbukit.github.io/reversteem/
💻 GitHub Repository: https://github.com/puncakbukit/reversteem

Feel free to post your open game links in the comments below or join existing games from the dashboard. Let the flips begin! ⚫⚪

Assisted by https://gemini.google.com/.