This project implements a dice rolling game with a blockchain-backed component using the Telegram API. Players can connect a wallet, place bets, roll dice, win/lose based on the result, and view a leaderboard of top rollers.
- TON wallet connectivity via TonConnect library
- Place bets with associated odds
- Random dice rolls simulated via JavaScript
- Winnings/losses calculated based on bet amount and roll
- Leaderboard to view rankings of top players
- Help information describing gameplay
- Customizable settings like sound volume
- Share big wins to Telegram and Twitter
- Setup
- To run the project locally:
- Start development server: npm start
- Open http://localhost:3000 to view app
The app is built using:
- React - For frontend UI
- JavaScript - For logic and utility functions
- HTML/CSS - Styling
- TON Blockchain - For wallet connectivity
- Telegram API - For social sharing and login
- App.js - Main entrypoint and router
- BetRoll.js - Place bets and roll dice
- Wallet.js - Connect TON wallet
- Leaderboard.js - View rankings
- Info.js - Help modal content
- SoundPlayer.js - Background audio
- DiceAnimation.js - Simulate dice tumble on roll
This uses the TonConnect library to connect a user's TON wallet. The provider and address are saved to state.
const [provider, setProvider] = useState();
const [address, setAddress] = useState('');
useEffect(() => {
const ton = new TonConnect();
ton.connect().then(setProvider);
}, []);
This saves the bet amount input by the user to state, updating it on change.
const handleRoll = () => {
const roll = Math.floor(Math.random() * 6) + 1;
if (roll === 6) {
// Win 3x bet amount
}
}
<button onClick={handleRoll}>Roll</button>
The handleRoll method is triggered when the user clicks "Roll". A random number between 1 and 6 is generated to simulate the dice roll. If a 6 is rolled, the user wins 3x their bet.
const handleRoll = () => {
const roll = Math.floor(Math.random() * 6) + 1;
if (roll === 6) {
// Win 3x bet amount
}
}
<button onClick={handleRoll}>Roll</button>
This displays a table of the top ranked players by name, rank and total rolls. The data is passed in as a prop from the parent.
<Table>
<thead>
<tr>
<th>Rank</th>
<th>Name</th>
<th>Rolls</th>
</tr>
</thead>
<tbody>
{data.map(item => (
<tr key={item.name}>
<td>{item.rank}</td>
<td>{item.name}</td>
<td>{item.rolls}</td>
</tr>
))}
</tbody>
</Table>
User enters bet amount
- Click "Roll Dice" to roll
- Dice animation shows tumbling dice [Betting Screen]
- User wins 3x bet amount
- Winning sound and confetti animation
- Share to Telegram and Twitter buttons
- Win Screen
- Lists top 10 rollers by name and total rolls
- Click username to view profile and share
- Leaderboard Screen