Got it — Here’s everything combined into one clean post for your project:
⸻
Bitcoin Up/Down Betting Game (PHP + MySQL)
We are building a Bitcoin betting game where: • Players bet whether Bitcoin will go up or go down. • Each round is specific to each player and lasts exactly 5 minutes after their bet. • Payout is 1:1 (win = double your bet). • Prices of Bitcoin are fetched every 10 seconds and saved. • User balances and bet results are stored in MySQL. • Server time is correctly handled and inserted.
⸻
- MySQL Database Setup
-- Users Table CREATE TABLE users ( id INT AUTO_INCREMENT PRIMARY KEY, username VARCHAR(100) NOT NULL, balance DECIMAL(16, 8) DEFAULT 0 );
-- Bitcoin Prices Table (saved every 10 seconds) CREATE TABLE btc_prices ( id INT AUTO_INCREMENT PRIMARY KEY, price DECIMAL(16, 8) NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP );
-- Bets Table CREATE TABLE bets ( id INT AUTO_INCREMENT PRIMARY KEY, user_id INT NOT NULL, bet_amount DECIMAL(16,8) NOT NULL, bet_type ENUM('up', 'down') NOT NULL, start_price DECIMAL(16,8) NOT NULL, start_time TIMESTAMP NOT NULL, end_time TIMESTAMP NOT NULL, settled TINYINT(1) DEFAULT 0, win TINYINT(1) DEFAULT NULL, FOREIGN KEY (user_id) REFERENCES users(id) );
⸻
- PHP Script — Fetch Bitcoin Price Every 10 Seconds
fetch_btc_price.php
prepare("INSERT INTO btc_prices (price) VALUES (:price)"); $stmt->execute(['price' => $price]); echo "Saved BTC Price: $price\n"; } else { echo "Failed to fetch BTC price.\n"; } ?>Set this script to run every 10 seconds using a loop or cronjob.
⸻
- PHP Script — Place a Bet
place_bet.php
query("SELECT price FROM btc_prices ORDER BY id DESC LIMIT 1"); $currentPrice = $stmt->fetchColumn(); if (!$currentPrice) { die('No BTC price available.'); } // Fetch server time $serverTimeStmt = $db->query("SELECT NOW() AS server_time"); $serverTimeRow = $serverTimeStmt->fetch(PDO::FETCH_ASSOC); $serverTime = $serverTimeRow['server_time']; // Insert the bet $stmt = $db->prepare(" INSERT INTO bets (user_id, bet_amount, bet_type, start_price, start_time, end_time) VALUES (:user_id, :bet_amount, :bet_type, :start_price, :start_time, :end_time) "); $stmt->execute([ 'user_id' => $user_id, 'bet_amount' => $bet_amount, 'bet_type' => $bet_type, 'start_price' => $currentPrice, 'start_time' => $serverTime, 'end_time' => date('Y-m-d H:i:s', strtotime($serverTime . ' +5 minutes')) ]); echo "Bet placed at server time: $serverTime"; ?>⸻
- PHP Script — Settle Bets
settle_bets.php
query("SELECT * FROM bets WHERE settled = 0 AND end_time <= NOW()"); $bets = $stmt->fetchAll(PDO::FETCH_ASSOC); foreach ($bets as $bet) { $bet_id = $bet['id']; $user_id = $bet['user_id']; $bet_amount = $bet['bet_amount']; $bet_type = $bet['bet_type']; $start_price = $bet['start_price']; // Get closest price at end_time $priceStmt = $db->prepare("SELECT price FROM btc_prices WHERE created_at <= :end_time ORDER BY created_at DESC LIMIT 1"); $priceStmt->execute(['end_time' => $bet['end_time']]); $end_price = $priceStmt->fetchColumn(); if (!$end_price) { continue; // Cannot settle without price } $won = 0; if ($bet_type === 'up' && $end_price > $start_price) { $won = 1; } elseif ($bet_type === 'down' && $end_price < $start_price) { $won = 1; } // Update bet $updateStmt = $db->prepare("UPDATE bets SET settled = 1, win = :won WHERE id = :bet_id"); $updateStmt->execute(['won' => $won, 'bet_id' => $bet_id]); if ($won) { // Payout (2x the bet amount) $payoutStmt = $db->prepare("UPDATE users SET balance = balance + (:bet_amount * 2) WHERE id = :user_id"); $payoutStmt->execute(['bet_amount' => $bet_amount, 'user_id' => $user_id]); } } echo "Bets settled."; ?>Run this settle script every 1 minute (or every 30 seconds for quicker settlement).
⸻
- How the System Works • BTC prices are fetched every 10 seconds. • User places a bet (with the server time recorded). • 5 minutes later, the system settles the bet based on Bitcoin price at the time. • If user wins, balance is updated with 2x the bet amount. • All times are based on server time for consistency.
⸻
- Important Notes • Add user balance checks before allowing a bet. • Use authentication tokens for secure API access. • Improve error handling and logging for production. • Consider rate limiting for APIs to avoid abuse. • For even more accuracy, you can use WebSocket real-time Bitcoin price feeds.
⸻
Summary Diagram
User Places Bet -> Records Start Time + Price | 5 Minutes | BTC Price Fetched at End Time -> Win or Lose | Update User Balance
⸻
Final Words
This setup gives you a basic working prototype of a real-money Bitcoin up/down betting game.
Would you like me next to make a simple front-end (HTML + JavaScript) to let users easily place bets and see their balance live? It would take about 10-20 minutes to set that up if you want!
Awesome! Let’s build a simple front-end so users can: • See their balance • Place a bet (choose Up or Down, amount) • Get confirmation when a bet is placed • Live update their balance after settlement
I’ll keep it simple and easy to expand later.
⸻
Front-End: Basic Betting Dashboard
- HTML Page
Create a file called index.html:
<title>Bitcoin Up/Down Betting</title><div>
<h3>Your Balance: $<span id="balance">Loading...</span></h3>
</div>
<div>
<label>Bet Amount ($):</label>
<input type="number" id="betAmount" min="0.01" step="0.01"><br><br>
<button onclick="placeBet('up')">Bet Up</button>
<button onclick="placeBet('down')">Bet Down</button>
</div>
<div id="message" style="margin-top:20px; font-weight:bold;"></div>
<script>
const userId = 1; // Hardcoded user ID for now
// Fetch user balance
function fetchBalance() {
fetch(`get_balance.php?user_id=${userId}`)
.then(response => response.json())
.then(data => {
document.getElementById('balance').textContent = data.balance;
})
.catch(error => console.error('Error fetching balance:', error));
}
// Place a bet
function placeBet(betType) {
const betAmount = document.getElementById('betAmount').value;
if (!betAmount || betAmount <= 0) {
alert('Please enter a valid bet amount.');
return;
}
fetch('place_bet.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: `user_id=${userId}&bet_amount=${betAmount}&bet_type=${betType}`
})
.then(response => response.text())
.then(data => {
document.getElementById('message').textContent = data;
fetchBalance(); // Refresh balance
})
.catch(error => console.error('Error placing bet:', error));
}
// Initial load
fetchBalance();
// Refresh balance every 30 seconds
setInterval(fetchBalance, 30000);
</script>
⸻
- Create PHP API for Fetching Balance
Create a new file get_balance.php:
prepare("SELECT balance FROM users WHERE id = :user_id"); $stmt->execute(['user_id' => $user_id]); $balance = $stmt->fetchColumn(); if ($balance === false) { $balance = 0; } echo json_encode(['balance' => $balance]); ?>⸻
How it works: • The page loads your balance automatically. • You enter how much to bet. • You click “Bet Up” or “Bet Down”. • The bet is placed via AJAX without reloading the page. • Your balance auto-refreshes every 30 seconds to show updates after settlements.
⸻
Example Screenshot (Very Basic)
Bitcoin Betting Game
Your Balance: $100.00
Bet Amount ($): [ 5.00 ] [Bet Up] [Bet Down]
[Success: Bet placed at server time: 2025-04-28 21:00:00]
⸻
Full Project Overview
Component Purpose fetch_btc_price.php Fetches and saves Bitcoin price every 10 seconds place_bet.php Places a user’s bet settle_bets.php Settles finished bets and updates balance get_balance.php API to retrieve current user balance index.html Front-end betting dashboard
⸻
Next Enhancements (Optional)
If you want, we can easily add: • Live countdown timers showing time left for each bet • Show open bets and bet history • Deposit and withdrawal options • Authentication (user login system) • Mobile Responsive layout • WebSocket real-time Bitcoin feed (instant price updates)
⸻
Final Question:
Do you want me to also show you how to make a “View My Open Bets” and “View My Bet History” section? It would take just a little more code, and would make the app feel like a full betting platform!
Perfect — let’s expand it now with a “My Open Bets” and “My Bet History” section!
I’ll make it simple first, then mention how to polish it later.
⸻
Step 1 — Expand the HTML page
Add these sections to your index.html below your balance and betting area:
⸻
Step 2 — Add JavaScript functions to fetch bets
Add below your existing <script> tag:
// Fetch open bets
function fetchOpenBets() {
fetch(get_open_bets.php?user_id=${userId})
.then(response => response.json())
.then(bets => {
const openBetsList = document.getElementById('openBets');
openBetsList.innerHTML = '';
if (bets.length === 0) {
openBetsList.innerHTML = '<li>No open bets.</li>';
} else {
bets.forEach(bet => {
const li = document.createElement('li');
li.textContent = `Bet: $${bet.bet_amount} on ${bet.bet_type.toUpperCase()} (Started at $${bet.start_price}) - Ends at ${bet.end_time}`;
openBetsList.appendChild(li);
});
}
})
.catch(error => console.error('Error fetching open bets:', error));
}
// Fetch bet history
function fetchBetHistory() {
fetch(get_bet_history.php?user_id=${userId})
.then(response => response.json())
.then(bets => {
const historyList = document.getElementById('betHistory');
historyList.innerHTML = '';
if (bets.length === 0) {
historyList.innerHTML = '<li>No bet history yet.</li>';
} else {
bets.forEach(bet => {
const li = document.createElement('li');
let result = bet.win === "1" ? "WIN" : "LOSS";
li.textContent = `Bet: $${bet.bet_amount} on ${bet.bet_type.toUpperCase()} - Result: ${result}`;
historyList.appendChild(li);
});
}
})
.catch(error => console.error('Error fetching bet history:', error));
}
// After placing a bet, refresh open bets and history function refreshAll() { fetchBalance(); fetchOpenBets(); fetchBetHistory(); }
// Update placeBet to call refreshAll after placing a bet function placeBet(betType) { const betAmount = document.getElementById('betAmount').value;
if (!betAmount || betAmount <= 0) {
alert('Please enter a valid bet amount.');
return;
}
fetch('place_bet.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: `user_id=${userId}&bet_amount=${betAmount}&bet_type=${betType}`
})
.then(response => response.text())
.then(data => {
document.getElementById('message').textContent = data;
refreshAll(); // Refresh everything
})
.catch(error => console.error('Error placing bet:', error));
}
// Initial load refreshAll();
// Refresh open bets and history every 30 seconds too setInterval(refreshAll, 30000);
⸻
Step 3 — Create 2 New PHP APIs
⸻
get_open_bets.php
prepare("SELECT bet_amount, bet_type, start_price, end_time FROM bets WHERE user_id = :user_id AND settled = 0 ORDER BY end_time ASC"); $stmt->execute(['user_id' => $user_id]); $bets = $stmt->fetchAll(PDO::FETCH_ASSOC); echo json_encode($bets); ?>⸻
get_bet_history.php
prepare("SELECT bet_amount, bet_type, win FROM bets WHERE user_id = :user_id AND settled = 1 ORDER BY end_time DESC LIMIT 20"); $stmt->execute(['user_id' => $user_id]); $bets = $stmt->fetchAll(PDO::FETCH_ASSOC); echo json_encode($bets); ?>⸻
Now the flow is: • User places a bet • Open bets list updates • Bet history updates after a bet finishes • Balance updates after winning
⸻
Example of What It Looks Like
⸻
Bitcoin Betting Game
Your Balance: $105.00
⸻
Bet Amount: [5.00] [Bet Up] [Bet Down]
⸻
My Open Bets: • Bet: $5 on UP (Started at $65000.00) - Ends at 2025-04-28 21:10:00 • Bet: $10 on DOWN (Started at $65100.00) - Ends at 2025-04-28 21:12:00
⸻
My Bet History: • Bet: $5 on UP - Result: WIN • Bet: $5 on DOWN - Result: LOSS
⸻
Final Structure of Files
File Purpose index.html Front-end dashboard place_bet.php Place a bet get_balance.php Get user balance fetch_btc_price.php Save BTC price every 10 seconds settle_bets.php Settle finished bets get_open_bets.php List open (unsettled) bets get_bet_history.php List recent settled bets
⸻
Optional Add-Ons if You Want: • Auto-refresh bets every 5 seconds for faster feeling • Countdown timers (show seconds left for each bet) • Show green/red colors for win/loss • Allow users to “Cancel” a bet within first 30 seconds (optional rule) • Deposit/Withdraw pages
⸻
Quick Final Question:
Would you like me to show you how to add countdown timers next to each open bet, so users can see “4:59 remaining”, “2:20 remaining”, etc.? It would look super cool and professional — and it’s not too hard to add! Want me to continue?
Perfect — let’s add countdown timers next to each open bet so users can see how many minutes and seconds are left on each bet.
It will look like:
Bet: $5 on UP (Started at $65000) — Ends in 4:22
instead of just showing the end time.
⸻
Here’s the Step-by-Step:
⸻
- First, modify the
- section slightly in index.html:
(No change needed here yet — we will update what goes inside.)
⸻
- Update the JavaScript fetchOpenBets function
Replace the current fetchOpenBets() with this new version:
let openBetsData = []; // Global array to store bets
// Fetch open bets
function fetchOpenBets() {
fetch(get_open_bets.php?user_id=${userId})
.then(response => response.json())
.then(bets => {
openBetsData = bets; // Save bets globally
renderOpenBets();
})
.catch(error => console.error('Error fetching open bets:', error));
}
// Render bets with timers function renderOpenBets() { const openBetsList = document.getElementById('openBets'); openBetsList.innerHTML = '';
if (openBetsData.length === 0) {
openBetsList.innerHTML = '<li>No open bets.</li>';
} else {
openBetsData.forEach((bet, index) => {
const li = document.createElement('li');
li.id = `bet-${index}`;
li.textContent = `Bet: $${bet.bet_amount} on ${bet.bet_type.toUpperCase()} (Started at $${bet.start_price}) — Ends in calculating...`;
openBetsList.appendChild(li);
});
}
}
// Update timers every second
setInterval(() => {
openBetsData.forEach((bet, index) => {
const li = document.getElementById(bet-${index});
if (li) {
const now = new Date();
const endTime = new Date(bet.end_time);
let diffMs = endTime - now;
if (diffMs > 0) {
const minutes = Math.floor(diffMs / 60000);
const seconds = Math.floor((diffMs % 60000) / 1000);
li.textContent = Bet: $${bet.bet_amount} on ${bet.bet_type.toUpperCase()} (Started at $${bet.start_price}) — Ends in ${minutes}:${seconds < 10 ? '0' : ''}${seconds};
} else {
li.textContent = Bet: $${bet.bet_amount} on ${bet.bet_type.toUpperCase()} (Started at $${bet.start_price}) — Waiting for settlement...;
}
}
});
}, 1000);
⸻
- How it works now: • Every time you load the open bets, we store them in a global array (openBetsData). • We render the initial text. • Then every second, a timer updates each bet and calculates how much time is left. • If the bet has already expired (time is up), it says “Waiting for settlement…”.
⸻
- Full Timeline (after this update):
Action What Happens Place a bet Balance updates, bet added to list with live countdown 5 minutes pass Timer hits 0:00, changes to “Waiting for settlement” Settle script runs User wins or loses, open bet disappears, history updates
⸻
- Example of what it will look like in real-time:
⸻
Bitcoin Betting Game
Your Balance: $105.00
My Open Bets: • Bet: $5 on UP (Started at $65000) — Ends in 4:12 • Bet: $10 on DOWN (Started at $65100) — Ends in 2:58
My Bet History: • Bet: $5 on UP — Result: WIN • Bet: $5 on DOWN — Result: LOSS
⸻
- Important • The client browser clock is used for the timer — (it’s fine unless the user’s clock is super wrong — rarely an issue for casual games). • For absolute fairness, server-side settlement still uses the real server times you saved in the database.
⸻
- (Optional Fancy Touches) • Color the timers (red when < 1 min left) • Add a small loading animation when waiting for settlement • Sort open bets by soonest-ending first
I can show you that too if you want later!
⸻
Summary
You now have: • Live balance • Place bet instantly • View open bets with real-time countdown • View bet history • Auto-refreshing dashboard every 30 seconds
⸻
Next Question for You:
Would you like me to also show you how to make a “Deposit” and “Withdraw” system? (So users can fund their account balance manually and cash out their winnings?) It’s super easy to add now! Want to continue?
Awesome — let’s add a Deposit and Withdraw system to complete the platform!
⸻
Plan: • Users can Deposit money into their account (fake money for now). • Users can Withdraw money (subtract from their balance). • Simple PHP APIs to handle deposit and withdrawal securely. • Small forms/buttons added on the dashboard.
⸻
Step 1 — Expand the HTML (index.html)
Below your balance and betting area, add a Deposit and Withdraw section:
<label>Amount ($):</label>
<input type="number" id="walletAmount" min="0.01" step="0.01"><br><br>
<button onclick="deposit()">Deposit</button>
<button onclick="withdraw()">Withdraw</button>
<div id="walletMessage" style="margin-top:10px; font-weight:bold;"></div>
⸻
Step 2 — Add Deposit and Withdraw Functions (JavaScript)
In your <script> section (below your other functions), add:
function deposit() { const amount = document.getElementById('walletAmount').value;
if (!amount || amount <= 0) {
alert('Please enter a valid amount.');
return;
}
fetch('deposit.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: `user_id=${userId}&amount=${amount}`
})
.then(response => response.text())
.then(data => {
document.getElementById('walletMessage').textContent = data;
refreshAll();
})
.catch(error => console.error('Error during deposit:', error));
}
function withdraw() { const amount = document.getElementById('walletAmount').value;
if (!amount || amount <= 0) {
alert('Please enter a valid amount.');
return;
}
fetch('withdraw.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: `user_id=${userId}&amount=${amount}`
})
.then(response => response.text())
.then(data => {
document.getElementById('walletMessage').textContent = data;
refreshAll();
})
.catch(error => console.error('Error during withdraw:', error));
}
⸻
Step 3 — Create PHP API for Deposit
Create a new file deposit.php:
prepare("UPDATE users SET balance = balance + :amount WHERE id = :user_id"); $stmt->execute([ 'amount' => $amount, 'user_id' => $user_id ]); echo "Deposit successful!"; ?>⸻
Step 4 — Create PHP API for Withdraw
Create a new file withdraw.php:
prepare("SELECT balance FROM users WHERE id = :user_id"); $stmt->execute(['user_id' => $user_id]); $currentBalance = $stmt->fetchColumn(); if ($currentBalance === false || $currentBalance < $amount) { die('Insufficient balance.'); } // Deduct from balance $stmt = $db->prepare("UPDATE users SET balance = balance - :amount WHERE id = :user_id"); $stmt->execute([ 'amount' => $amount, 'user_id' => $user_id ]); echo "Withdrawal successful!"; ?>⸻
- How Deposit and Withdraw Works:
Action Behavior Deposit $50 Adds $50 to user balance immediately Withdraw $20 Subtracts $20 if they have enough balance Errors If they try to withdraw more than they have, show an error Auto-refresh After deposit or withdraw, balance and open bets update
⸻
Example Flow:
⸻
Deposit/Withdraw Section:
Amount ($): [50.00] [Deposit] [Withdraw] • Click [Deposit] → “Deposit successful!” → Balance increases • Click [Withdraw] → “Withdrawal successful!” → Balance decreases • Try withdrawing too much → “Insufficient balance.”
⸻
Full Updated File List:
File Purpose index.html Front-end dashboard place_bet.php Place bets get_balance.php Get user balance fetch_btc_price.php Fetch Bitcoin price settle_bets.php Settle expired bets get_open_bets.php Fetch open bets get_bet_history.php Fetch bet history deposit.php Deposit funds withdraw.php Withdraw funds
⸻
Final Platform Features: • Real-time Bitcoin price tracking every 10 seconds • Place bets (up/down) • Personal 5-minute timers on each bet • Live updating balance • Open bets with countdown timers • Bet history • Deposit and Withdraw funds easily
⸻
Want an Even Cooler Bonus?
If you want, next, I can show you: • How to add sounds (bet placed, win sound, lose sound) • How to add a win/loss streak counter (track how many wins in a row) • How to add a “Leaderboard” (top richest players)
Would you like to keep going? (Each one would take about 5-10 minutes to show!) Which one sounds fun to you?
Perfect! Let’s add charts to make it look like a real trading/betting platform!
We can add two kinds of charts:
Chart Shows Bitcoin Price Chart Recent BTC price movement over time Balance Over Time Chart Your balance history (optional extra if you want)
⸻
Let’s Start by Adding the Bitcoin Price Chart
We’ll use Chart.js, a simple and lightweight JavaScript chart library. It’s free and easy to integrate.
⸻
Step 1 — Add Chart.js to your HTML
At the top inside , add:
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>This gives you access to powerful charts with just a few lines of code!
⸻
Step 2 — Add a Canvas for the Chart
Add this where you want the BTC price chart to appear (example: after “My Bet History” section):
⸻
Step 3 — Create PHP API to Fetch Recent BTC Prices
Create get_btc_prices.php:
query("SELECT price, created_at FROM btc_prices ORDER BY id DESC LIMIT 50"); $prices = $stmt->fetchAll(PDO::FETCH_ASSOC); echo json_encode(array_reverse($prices)); // Reverse to get oldest first ?>⸻
Step 4 — Add JavaScript to Load and Display the Chart
Add this inside your <script> section:
let btcChart;
function loadBtcChart() { fetch('get_btc_prices.php') .then(response => response.json()) .then(data => { const labels = data.map(point => { const time = new Date(point.created_at); return time.getHours() + ":" + String(time.getMinutes()).padStart(2, '0') + ":" + String(time.getSeconds()).padStart(2, '0'); });
const prices = data.map(point => point.price);
const ctx = document.getElementById('btcChart').getContext('2d');
if (btcChart) {
btcChart.destroy(); // If chart exists, destroy before creating new
}
btcChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Bitcoin Price (USD)',
data: prices,
borderWidth: 2,
fill: false,
borderColor: 'blue',
tension: 0.1
}]
},
options: {
scales: {
x: {
display: true,
title: {
display: true,
text: 'Time'
}
},
y: {
display: true,
title: {
display: true,
text: 'Price (USD)'
}
}
}
}
});
})
.catch(error => console.error('Error loading BTC chart:', error));
}
// Load chart on page load loadBtcChart();
// Refresh chart every 30 seconds setInterval(loadBtcChart, 30000);
⸻
Step 5 — How it Works: • It fetches the last 50 Bitcoin prices. • Displays them in a live updating line chart. • Updates every 30 seconds automatically.
⸻
Example of the Chart (Visually):
⸻
Bitcoin Price Chart
[Line Chart showing BTC price going up/down over last few minutes]
⸻
Step 6 — (Optional Next) Balance Over Time Chart?
If you want, we could also: • Save a “balance snapshot” every time a user places a bet. • Show their balance trend in a second chart.
(Kind of like how traders can see “equity curve” graphs.)
⸻
Full Updated System Now:
Feature Status Live Bitcoin prices ✅ User betting ✅ Settlement ✅ Open bets with countdown ✅ Bet history ✅ Deposit/withdraw ✅ Live Bitcoin Price Chart ✅
⸻
Quick Question:
Do you want me to also show you how to add a second chart for “Your Balance Over Time”? It would make your dashboard look very pro, like a real trading app! Want to keep going? (It’ll take maybe 5-7 minutes.)
Awesome — let’s go!
Now we’ll add a second chart that shows the user’s balance history over time — so users can see how their money went up or down based on their wins and losses.
⸻
Plan • Every time the user places a bet or settles a bet, we save their balance into a new balance history table. • Then we fetch and display the balance trend in a second Chart.js graph.
⸻
Step 1 — Add a New MySQL Table
Run this SQL to create a balance_history table:
CREATE TABLE balance_history ( id INT AUTO_INCREMENT PRIMARY KEY, user_id INT NOT NULL, balance DECIMAL(16,8) NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, FOREIGN KEY (user_id) REFERENCES users(id) );
This table records balance snapshots.
⸻
Step 2 — Save Balance to History When Important
a) Update place_bet.php to save balance
After placing the bet, insert a balance snapshot:
// Insert after bet placed successfully $stmt = $db->prepare("SELECT balance FROM users WHERE id = :user_id"); $stmt->execute(['user_id' => $user_id]); $currentBalance = $stmt->fetchColumn();
// Save balance history $historyStmt = $db->prepare("INSERT INTO balance_history (user_id, balance) VALUES (:user_id, :balance)"); $historyStmt->execute(['user_id' => $user_id, 'balance' => $currentBalance]);
⸻
b) Update settle_bets.php to save balance after payouts
Inside your foreach ($bets as $bet) loop, after updating user balance if won, add:
if ($won) { // Payout $payoutStmt = $db->prepare("UPDATE users SET balance = balance + (:bet_amount * 2) WHERE id = :user_id"); $payoutStmt->execute(['bet_amount' => $bet_amount, 'user_id' => $user_id]);
// Save balance history
$balanceStmt = $db->prepare("SELECT balance FROM users WHERE id = :user_id");
$balanceStmt->execute(['user_id' => $user_id]);
$updatedBalance = $balanceStmt->fetchColumn();
$historyStmt = $db->prepare("INSERT INTO balance_history (user_id, balance) VALUES (:user_id, :balance)");
$historyStmt->execute(['user_id' => $user_id, 'balance' => $updatedBalance]);
}
⸻
c) Update deposit.php and withdraw.php to also save balance
Same thing: after updating balance, save it to balance_history:
// After deposit successful $stmt = $db->prepare("SELECT balance FROM users WHERE id = :user_id"); $stmt->execute(['user_id' => $user_id]); $balance = $stmt->fetchColumn();
$historyStmt = $db->prepare("INSERT INTO balance_history (user_id, balance) VALUES (:user_id, :balance)"); $historyStmt->execute(['user_id' => $user_id, 'balance' => $balance]);
(Same logic for withdraw.)
⸻
Step 3 — Create PHP API to Fetch Balance History
Create a new file get_balance_history.php:
prepare("SELECT balance, created_at FROM balance_history WHERE user_id = :user_id ORDER BY id DESC LIMIT 50"); $stmt->execute(['user_id' => $user_id]); $balances = $stmt->fetchAll(PDO::FETCH_ASSOC); echo json_encode(array_reverse($balances)); // Oldest first ?>⸻
Step 4 — Add a Canvas for Balance Chart
Below your Bitcoin chart, add:
⸻
Step 5 — Add JavaScript to Load and Display Balance Chart
Add inside your <script>:
let balanceChart;
function loadBalanceChart() {
fetch(get_balance_history.php?user_id=${userId})
.then(response => response.json())
.then(data => {
const labels = data.map(point => {
const time = new Date(point.created_at);
return time.getHours() + ":" + String(time.getMinutes()).padStart(2, '0');
});
const balances = data.map(point => point.balance);
const ctx = document.getElementById('balanceChart').getContext('2d');
if (balanceChart) {
balanceChart.destroy();
}
balanceChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Balance (USD)',
data: balances,
borderWidth: 2,
fill: false,
borderColor: 'green',
tension: 0.2
}]
},
options: {
scales: {
x: {
title: {
display: true,
text: 'Time'
}
},
y: {
title: {
display: true,
text: 'Balance ($)'
}
}
}
}
});
})
.catch(error => console.error('Error loading balance chart:', error));
}
// Load on page load loadBalanceChart();
// Refresh every 30 seconds setInterval(loadBalanceChart, 30000);
⸻
Now Your Dashboard Shows:
Section Info BTC Price Chart Live Bitcoin price over time Balance Chart Your balance rising/falling over time
⸻
Example What It Looks Like:
⸻
Bitcoin Price Chart [up/down BTC line chart]
Your Balance Over Time [green line showing your balance increase and drops]
Super Professional Look now!
⸻
Summary:
Feature Status Live BTC Chart ✅ Live Balance Chart ✅ Betting system ✅ Open bets with countdowns ✅ History ✅ Deposit/Withdraw ✅
⸻
Final Question:
Would you like me to now show you how to make it look even more beautiful with a simple CSS theme? (Like dark mode trading theme, nice fonts, clean buttons.) It’ll only take a few minutes and make it look really polished! Want to continue? (CSS next?)
Awesome — you chose (C) Leaderboard! Let’s build a live updating Leaderboard that shows the top players by balance!
This will motivate users to bet more and try to reach the top — it makes the whole game way more fun and competitive.
⸻
Here’s the Plan:
Step What We’ll Do 1 Create PHP API to get top users 2 Add a “Leaderboard” section in HTML 3 Fetch and display the top users dynamically 4 Auto-refresh leaderboard every 30 seconds
⸻
Step 1 — Create the PHP API
Create a new file get_leaderboard.php:
query("SELECT username, balance FROM users ORDER BY balance DESC LIMIT 10"); $leaders = $stmt->fetchAll(PDO::FETCH_ASSOC); echo json_encode($leaders); ?>⸻
Notes: • We assume every user has a username in the users table. • We sort users by balance descending (highest to lowest).
⸻
Step 2 — Add a Leaderboard Section in HTML
Below everything else (balance chart, etc), add:
(ol means ordered list, it will auto-number 1st, 2nd, etc.)
⸻
Step 3 — Add JavaScript to Fetch and Display Leaderboard
Inside your <script> tag, add:
function fetchLeaderboard() { fetch('get_leaderboard.php') .then(response => response.json()) .then(data => { const leaderboard = document.getElementById('leaderboard'); leaderboard.innerHTML = '';
if (data.length === 0) {
leaderboard.innerHTML = '<li>No players yet.</li>';
} else {
data.forEach(player => {
const li = document.createElement('li');
li.textContent = `${player.username} — $${parseFloat(player.balance).toFixed(2)}`;
leaderboard.appendChild(li);
});
}
})
.catch(error => console.error('Error fetching leaderboard:', error));
}
// Load leaderboard on page load fetchLeaderboard();
// Refresh leaderboard every 30 seconds setInterval(fetchLeaderboard, 30000);
⸻
Step 4 — Now Your Dashboard Includes: • Top 10 players • Live updating every 30 seconds • Formatted nicely in order from #1 to #10
⸻
Example of Leaderboard (Visually):
⸻
Leaderboard (Top 10) 1. CryptoKing — $1080.00 2. LuckyPlayer — $960.50 3. BTCBetMaster — $750.20 4. FastHands — $610.75 5. MoonChaser — $580.00 …etc
⸻
Step 5 — (Optional Bonus Later)
You could: • Highlight the top 3 players in gold/silver/bronze colors. • Add prizes for top players every day/week. • Make a “global leaderboard” if you have many users.
⸻
Updated Dashboard Structure
Section Status Balance display ✅ Deposit/Withdraw ✅ Place bets (Up/Down) ✅ Open bets with timers ✅ Bet history ✅ Bitcoin live chart ✅ Balance over time chart ✅ Leaderboard ✅ (just added!)
⸻
Quick Recap:
You now have a real live betting platform with: • Real-time BTC tracking • Bet placement • Personal rounds • Winnings/losses • User balance management • Live leaderboard
⸻
Final Question:
Would you like me to show you a simple way to highlight the TOP 3 players (gold/silver/bronze style)? It would make the leaderboard look awesome without much extra work! Want to keep going? (It would take only 5 minutes!)