This is an environment to run dApps (state channel-based decentralized applications) using CF.js. It allows to showcase different demo apps, presenting a variety of use cases where state channels are applicable.
You can see the app online at https://playground.counterfactual.com.
How do I run the Playground?
Make sure your dependency tree and package builds is up-to-date. Run the following command at the monorepo's root directory:
yarn && yarn build
In order for the Playground to run at your workstation, you'll need:
- A PostgreSQL database (>= 10.x)
- A BIP39 mnemonic for the Server's funds account
Check on the Simple Hub Server requirements before running the Playground.
Running the Playground
You can use the following command at the monorepo's root to run the following Playground components:
This command will run:
- The Playground app itself (this package)
- The Simple Hub Server
- The High Roller and Tic-Tac-Toe dApps
Playing with bots
In order to play either High Roller or Tic-Tac-Toe locally, you'll need to run a bot package. You can run a bot package by running its own
yarn start command on its directory. Refer either to the High Roller or Tic-Tac-Toe's README files for any specific setup required by the bot.
Once you have a bot up and running, you'll need to setup the Playground to force-matchmake with the bot's account. Since matchmaking works by choosing random users, it might not select the bot user when you click "Play" on the dApp.
In order to force-matchmake, the Playground listens to a flag that can be set via Local Storage, called
Open the Playground's local URL,
http://localhost:3334 and on your devtools's console, run the following command:
// Use "HighRollerBot" or "TicTacToeBot" as value window.localStorage.setItem("playground:matchmakeWith", "<BotName>");
Refresh the page and you should see a
Now you're ready to play with a bot!
If you want to stop force-matchmaking, simply delete the flag by clicking the "Unset" action on the "Using dev flags" modal or by entering this command at your browser's console:
Be sure to refresh the page to apply the changes.
Playing with a specific user
You can use the same procedure described before to matchmake with a particular player. In order to do so, instead of using HighRollerBot or TicTacToe as the value of the flag, set it to the player's username.
- When using Firefox or any browsers without full support to Custom Elements, you can run the project with ES5 transpiling enabled (it'll slow down the live rebuilding a bit but it'll work). To do so, modify the
startNPM script and add the
--es5flag at the end of the command.