mirror of
https://git.astronand.dev/minecartchris/Stock-Game.git
synced 2026-06-04 08:10:54 -04:00
121 lines
5.2 KiB
HTML
121 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Stock Trading Game</title>
|
|
<link rel="stylesheet" href="static/style.css"></link>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script src="./static/game.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Stock Trading Game</h1>
|
|
|
|
<!-- Start Game Screen -->
|
|
<div id="startScreen" class="screen">
|
|
<h2>Welcome to the Stock Game!</h2>
|
|
<div class="form-group">
|
|
<label for="daysInput">How many days do you wish to play?</label>
|
|
<input type="number" id="daysInput" min="1" max="100" value="5">
|
|
<button onclick="startGame()">Start Game</button>
|
|
</div>
|
|
<div class="form-group">
|
|
<button onclick="viewLeaderboard()" class="btn-leaderboard">View Leaderboard</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Game Screen -->
|
|
<div id="gameScreen" class="screen hidden">
|
|
|
|
<div class="game-content">
|
|
|
|
<div class="section">
|
|
<h3>Your Holdings</h3>
|
|
<div id="holdingsList" class="holdings-list"></div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Buy/Sell Stocks</h3>
|
|
<div class="form-group">
|
|
<label for="stockSelect">Select Stock:</label>
|
|
<select id="stockSelect"></select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="amountInput">Amount:</label>
|
|
<input type="number" id="amountInput" min="1" value="1">
|
|
</div>
|
|
<div class="button-group">
|
|
<button onclick="sellStock()" class="btn-sell">Sell</button>
|
|
<button onclick="buyStock()" class="btn-buy">Buy</button>
|
|
</div>
|
|
<div class="button-group" style="margin-top: 10px;">
|
|
<button onclick="sellAll()" class="btn-sell-all">Sell All</button>
|
|
<button onclick="buyAll()" class="btn-buy-all">Buy All</button>
|
|
</div>
|
|
<div class="info-box" style="margin-top: 10px;">
|
|
<h3>Balance: $<span id="balance">0</span></h3>
|
|
<h3>Day: <span id="day">1</span>/<span id="totalDays">5</span></h3>
|
|
<h3>Market Index: <span id="index">0</span></h3>
|
|
</div>
|
|
<button onclick="nextDay()" class="btn-next-day">Next Day</button>
|
|
<div id="message" class="message" style="margin-top: 10px;"></div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Stock Prices</h3>
|
|
<div id="stocksList" class="stocks-list"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="charts-container" style="margin-top: 10px;">
|
|
<div class="chart-item" style="grid-column: 1/-1; padding-top: 10px;">
|
|
<h3 style="margin-bottom: 5px; text-align: center;">Stock Price Trends</h3>
|
|
<canvas id="priceChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- End Game Screen -->
|
|
<div id="endScreen" class="screen hidden">
|
|
<h2>Game Over!</h2>
|
|
<div class="end-stats">
|
|
<p>Starting Balance: $<span id="startBalance">1000</span></p>
|
|
<p>Ending Balance: $<span id="endBalance">0</span></p>
|
|
<p>Total Net Worth: $<span id="netWorth">0</span></p>
|
|
<p class="profit" id="profitText">Profit: $<span id="profit">0</span></p>
|
|
<h3>Final Holdings:</h3>
|
|
<div id="finalHoldings"></div>
|
|
|
|
<div class="charts-container" style="margin-top: 30px;">
|
|
<h3 style="grid-column: 1/-1; margin-bottom: 10px;">Final Price Trends</h3>
|
|
<div class="chart-item" style="grid-column: 1/-1;">
|
|
<canvas id="endPriceChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="playerName">Enter your name for the scoreboard:</label>
|
|
<input type="text" id="playerName" placeholder="Your Name" value="">
|
|
<button onclick="saveScore()" class="btn-save-score">Save Score</button>
|
|
</div>
|
|
|
|
<button onclick="location.reload()">Play Again</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Leaderboard Screen -->
|
|
<div id="leaderboardScreen" class="screen hidden">
|
|
<h2>Leaderboard</h2>
|
|
<div class="leaderboard-container">
|
|
<div id="leaderboardList" class="leaderboard-list"></div>
|
|
<div id="emptyLeaderboard" class="empty-message">No scores yet. Be the first to play!</div>
|
|
</div>
|
|
<button onclick="backToStart()" class="btn-back">Back to Start</button>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|