Upload files to "static"

static/game.js

@@ -0,0 +1,258 @@
+// Game state
+let gameActive = false;
+
+async function startGame() {
+    const daysInput = document.getElementById('daysInput');
+    const days = parseInt(daysInput.value);
+
+    if (!days || days < 1) {
+        alert('Please enter a valid number of days');
+        return;
+    }
+
+    try {
+        const response = await fetch('/api/start', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ days: days })
+        });
+
+        if (!response.ok) throw new Error('Failed to start game');
+
+        gameActive = true;
+        document.getElementById('startScreen').classList.add('hidden');
+        document.getElementById('gameScreen').classList.remove('hidden');
+        document.getElementById('totalDays').textContent = days;
+
+        await updateGameDisplay();
+        populateStockSelect();
+    } catch (error) {
+        alert('Error starting game: ' + error.message);
+    }
+}
+
+async function updateGameDisplay() {
+    try {
+        const response = await fetch('/api/game-state');
+        if (!response.ok) throw new Error('Failed to fetch game state');
+
+        const data = await response.json();
+
+        document.getElementById('balance').textContent = data.balance;
+        document.getElementById('day').textContent = data.day;
+        document.getElementById('index').textContent = data.index;
+
+        displayStocks(data.stocks);
+        displayHoldings(data.holdings);
+        displayMessage(data.message);
+    } catch (error) {
+        console.error('Error updating game display:', error);
+    }
+}
+
+function displayStocks(stocks) {
+    const stocksList = document.getElementById('stocksList');
+    stocksList.innerHTML = '';
+
+    stocks.forEach(stock => {
+        const div = document.createElement('div');
+        div.className = 'stock-item';
+        div.innerHTML = `<span>${stock.name}</span><span>$${stock.price}</span>`;
+        stocksList.appendChild(div);
+    });
+}
+
+function displayHoldings(holdings) {
+    const holdingsList = document.getElementById('holdingsList');
+    holdingsList.innerHTML = '';
+
+    holdings.forEach(holding => {
+        const div = document.createElement('div');
+        div.className = 'holding-item';
+        div.innerHTML = `<span>${holding.name}</span><span>${holding.amount} shares</span>`;
+        holdingsList.appendChild(div);
+    });
+}
+
+function displayMessage(message) {
+    const messageDiv = document.getElementById('message');
+    if (message) {
+        messageDiv.textContent = message;
+        messageDiv.classList.add('show');
+        messageDiv.classList.remove('error');
+    } else {
+        messageDiv.classList.remove('show');
+    }
+}
+
+function populateStockSelect() {
+    const stocks = [
+        { id: 1, name: 'Kwik trip' },
+        { id: 2, name: 'Apple computers' },
+        { id: 3, name: 'Microsoft' },
+        { id: 4, name: 'Walmart Super Store' },
+        { id: 5, name: 'Car company' }
+    ];
+
+    const select = document.getElementById('stockSelect');
+    select.innerHTML = '';
+    stocks.forEach(stock => {
+        const option = document.createElement('option');
+        option.value = stock.id;
+        option.textContent = `${stock.name}`;
+        select.appendChild(option);
+    });
+}
+
+async function buyStock() {
+    if (!gameActive) return;
+
+    const stockId = parseInt(document.getElementById('stockSelect').value);
+    const amount = parseInt(document.getElementById('amountInput').value);
+
+    if (!amount || amount < 1) {
+        showError('Please enter a valid amount');
+        return;
+    }
+
+    try {
+        const response = await fetch('/api/buy', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                stock_id: stockId,
+                amount: amount
+            })
+        });
+
+        const data = await response.json();
+
+        if (!response.ok) {
+            showError(data.error);
+            return;
+        }
+
+        document.getElementById('amountInput').value = '1';
+        await updateGameDisplay();
+    } catch (error) {
+        showError('Error buying stock: ' + error.message);
+    }
+}
+
+async function sellStock() {
+    if (!gameActive) return;
+
+    const stockId = parseInt(document.getElementById('stockSelect').value);
+    const amount = parseInt(document.getElementById('amountInput').value);
+
+    if (!amount || amount < 1) {
+        showError('Please enter a valid amount');
+        return;
+    }
+
+    try {
+        const response = await fetch('/api/sell', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                stock_id: stockId,
+                amount: amount
+            })
+        });
+
+        const data = await response.json();
+
+        if (!response.ok) {
+            showError(data.error);
+            return;
+        }
+
+        document.getElementById('amountInput').value = '1';
+        await updateGameDisplay();
+    } catch (error) {
+        showError('Error selling stock: ' + error.message);
+    }
+}
+
+async function nextDay() {
+    if (!gameActive) return;
+
+    try {
+        const response = await fetch('/api/next-day', {
+            method: 'POST'
+        });
+
+        const data = await response.json();
+
+        if (data.game_over) {
+            await endGame();
+            return;
+        }
+
+        await updateGameDisplay();
+    } catch (error) {
+        showError('Error advancing to next day: ' + error.message);
+    }
+}
+
+async function endGame() {
+    try {
+        const response = await fetch('/api/end-game');
+        if (!response.ok) throw new Error('Failed to fetch end game stats');
+
+        const data = await response.json();
+
+        document.getElementById('startBalance').textContent = data.starting_balance;
+        document.getElementById('endBalance').textContent = data.ending_balance;
+        document.getElementById('netWorth').textContent = data.total_net_worth;
+        document.getElementById('profit').textContent = data.profit;
+
+        // Color profit red or green
+        const profitText = document.getElementById('profitText');
+        if (data.profit >= 0) {
+            profitText.style.color = '#4caf50';
+        } else {
+            profitText.style.color = '#f44336';
+        }
+
+        // Display final holdings
+        const finalHoldings = document.getElementById('finalHoldings');
+        finalHoldings.innerHTML = '';
+        data.holdings.forEach((holding, index) => {
+            if (holding.amount > 0) {
+                const div = document.createElement('div');
+                div.className = 'holding-final';
+                const stockPrice = data.stocks[index].price;
+                const value = holding.amount * stockPrice;
+                div.innerHTML = `
+                    <span>${holding.name}: ${holding.amount} shares</span>
+                    <span>Value: $${value}</span>
+                `;
+                finalHoldings.appendChild(div);
+            }
+        });
+
+        gameActive = false;
+        document.getElementById('gameScreen').classList.add('hidden');
+        document.getElementById('endScreen').classList.remove('hidden');
+    } catch (error) {
+        showError('Error getting game stats: ' + error.message);
+    }
+}
+
+function showError(message) {
+    const messageDiv = document.getElementById('message');
+    messageDiv.textContent = message;
+    messageDiv.classList.add('show', 'error');
+}
+
+// Initialize when page loads
+document.addEventListener('DOMContentLoaded', () => {
+    populateStockSelect();
+});

static/style.css

@@ -0,0 +1,319 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+}
+
+.container {
+    background: white;
+    border-radius: 15px;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+    max-width: 900px;
+    width: 100%;
+    padding: 40px;
+}
+
+h1 {
+    text-align: center;
+    color: #333;
+    margin-bottom: 30px;
+    font-size: 2.5em;
+}
+
+h2 {
+    color: #667eea;
+    margin-bottom: 20px;
+    text-align: center;
+}
+
+h3 {
+    color: #555;
+    margin-bottom: 15px;
+    font-size: 1.1em;
+}
+
+.screen {
+    display: block;
+}
+
+.screen.hidden {
+    display: none;
+}
+
+/* Start Screen */
+#startScreen .form-group {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+#startScreen label {
+    display: block;
+    margin-bottom: 10px;
+    font-size: 1.1em;
+    color: #333;
+}
+
+#startScreen input {
+    padding: 10px 15px;
+    font-size: 1em;
+    border: 2px solid #667eea;
+    border-radius: 5px;
+    margin-right: 10px;
+    width: 100px;
+}
+
+/* Game Header */
+.game-header {
+    margin-bottom: 30px;
+    padding: 20px;
+    background: #f8f9fa;
+    border-radius: 10px;
+}
+
+.info-box {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 15px;
+    margin-bottom: 15px;
+}
+
+.info-box h3 {
+    background: #667eea;
+    color: white;
+    padding: 15px;
+    border-radius: 8px;
+    margin-bottom: 0;
+    font-size: 1em;
+}
+
+.message {
+    padding: 15px;
+    background: #e8f5e9;
+    border-left: 4px solid #4caf50;
+    border-radius: 5px;
+    color: #2e7d32;
+    display: none;
+    margin-top: 10px;
+}
+
+.message.show {
+    display: block;
+}
+
+.message.error {
+    background: #ffebee;
+    border-left-color: #f44336;
+    color: #c62828;
+}
+
+/* Game Content */
+.game-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+}
+
+.section {
+    background: #f8f9fa;
+    padding: 20px;
+    border-radius: 10px;
+    border: 1px solid #e0e0e0;
+}
+
+.stocks-list,
+.holdings-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.stock-item,
+.holding-item {
+    background: white;
+    padding: 12px;
+    border-radius: 6px;
+    border-left: 4px solid #667eea;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.holding-item {
+    border-left-color: #764ba2;
+}
+
+.stock-item span,
+.holding-item span {
+    font-weight: bold;
+    color: #667eea;
+}
+
+/* Form Groups */
+.form-group {
+    margin-bottom: 15px;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 8px;
+    color: #333;
+    font-weight: bold;
+}
+
+.form-group input,
+.form-group select {
+    width: 100%;
+    padding: 10px;
+    border: 2px solid #e0e0e0;
+    border-radius: 5px;
+    font-size: 1em;
+    transition: border-color 0.3s;
+}
+
+.form-group input:focus,
+.form-group select:focus {
+    outline: none;
+    border-color: #667eea;
+}
+
+/* Buttons */
+button {
+    padding: 12px 20px;
+    border: none;
+    border-radius: 6px;
+    font-size: 1em;
+    cursor: pointer;
+    transition: all 0.3s;
+    font-weight: bold;
+}
+
+button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+}
+
+#startScreen button {
+    background: #667eea;
+    color: white;
+}
+
+#startScreen button:hover {
+    background: #764ba2;
+}
+
+.button-group {
+    display: flex;
+    gap: 10px;
+}
+
+.btn-buy {
+    background: #4caf50;
+    color: white;
+    flex: 1;
+}
+
+.btn-buy:hover {
+    background: #45a049;
+}
+
+.btn-sell {
+    background: #ff9800;
+    color: white;
+    flex: 1;
+}
+
+.btn-sell:hover {
+    background: #e68900;
+}
+
+.btn-next-day {
+    background: #667eea;
+    color: white;
+    width: 100%;
+    padding: 15px;
+    font-size: 1.1em;
+}
+
+.btn-next-day:hover {
+    background: #764ba2;
+}
+
+/* End Screen */
+.end-stats {
+    text-align: center;
+    padding: 20px;
+    background: #f8f9fa;
+    border-radius: 10px;
+}
+
+.end-stats p {
+    font-size: 1.1em;
+    margin: 10px 0;
+    color: #333;
+}
+
+.end-stats .profit {
+    font-size: 1.3em;
+    font-weight: bold;
+    color: #4caf50;
+    margin-top: 20px;
+}
+
+#finalHoldings {
+    text-align: left;
+    margin: 20px 0;
+    padding: 15px;
+    background: white;
+    border-radius: 6px;
+}
+
+.holding-final {
+    display: flex;
+    justify-content: space-between;
+    padding: 8px 0;
+    border-bottom: 1px solid #e0e0e0;
+}
+
+.holding-final:last-child {
+    border-bottom: none;
+}
+
+#endScreen button {
+    background: #667eea;
+    color: white;
+    margin-top: 20px;
+    padding: 12px 30px;
+}
+
+#endScreen button:hover {
+    background: #764ba2;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .container {
+        padding: 20px;
+    }
+
+    .game-content {
+        grid-template-columns: 1fr;
+    }
+
+    .info-box {
+        grid-template-columns: 1fr;
+    }
+
+    h1 {
+        font-size: 1.8em;
+    }
+}