Adjust game odds and UI

- Modify game odds to 48.7% win and 52% lose.
- Update Towers to have 10 rows.
- Reduce spacing in Mines for closer layout.
- Ensure Sidebar appears only once on stats/homepage.
- Add a chatbox on the right side for user interaction, displaying username and profile picture (or first character if no picture).
- Include a footer on every page with the text "Made by @darksplice on Discord" along with a Discord icon.
[skip gpt_engineer]

src/components/ChatBox.jsx

@@ -0,0 +1,62 @@
+import React, { useState, useEffect } from 'react';
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+
+const ChatBox = () => {
+  const [messages, setMessages] = useState([]);
+  const [newMessage, setNewMessage] = useState('');
+  const [user, setUser] = useState(JSON.parse(localStorage.getItem('user')));
+
+  useEffect(() => {
+    // Simulating incoming messages
+    const interval = setInterval(() => {
+      const randomMessage = {
+        username: `User${Math.floor(Math.random() * 1000)}`,
+        message: `Random message ${Math.floor(Math.random() * 100)}`,
+        timestamp: new Date().toLocaleTimeString(),
+      };
+      setMessages(prev => [...prev, randomMessage].slice(-50)); // Keep last 50 messages
+    }, 5000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  const handleSendMessage = () => {
+    if (newMessage.trim()) {
+      const message = {
+        username: user.username,
+        message: newMessage,
+        timestamp: new Date().toLocaleTimeString(),
+      };
+      setMessages(prev => [...prev, message].slice(-50)); // Keep last 50 messages
+      setNewMessage('');
+    }
+  };
+
+  return (
+    <div className="w-1/4 bg-darkBlue-lighter p-4 overflow-hidden flex flex-col h-screen">
+      <h2 className="text-xl font-bold mb-4">Chat</h2>
+      <div className="flex-grow overflow-y-auto mb-4">
+        {messages.map((msg, index) => (
+          <div key={index} className="mb-2">
+            <span className="font-bold">{msg.username}: </span>
+            <span>{msg.message}</span>
+            <span className="text-xs text-gray-400 ml-2">{msg.timestamp}</span>
+          </div>
+        ))}
+      </div>
+      <div className="flex">
+        <Input
+          type="text"
+          value={newMessage}
+          onChange={(e) => setNewMessage(e.target.value)}
+          placeholder="Type a message..."
+          className="flex-grow mr-2"
+        />
+        <Button onClick={handleSendMessage}>Send</Button>
+      </div>
+    </div>
+  );
+};
+
+export default ChatBox;

src/pages/Dashboard.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import Header from '../components/Header';
-import Sidebar from '../components/Sidebar';
+import ChatBox from '../components/ChatBox';
 
 const Dashboard = () => {
   const [user, setUser] = useState(null);
@@ -42,7 +42,6 @@ const Dashboard = () => {
 
   return (
     <div className="min-h-screen bg-darkBlue flex">
-      <Sidebar />
       <div className="flex-1">
         <Header username={user.username} balance={user.balance} />
         <div className="p-8">
@@ -58,6 +57,13 @@ const Dashboard = () => {
           </div>
         </div>
       </div>
+      <ChatBox />
+      <footer className="fixed bottom-0 left-0 right-0 bg-darkBlue-lighter p-4 text-center">
+        <p className="text-white">
+          Made by @darksplice on Discord - have fun freaky gambling 
+          <img src="/discord-icon.svg" alt="Discord" className="inline-block ml-2 w-6 h-6" />
+        </p>
+      </footer>
     </div>
   );
 };

src/pages/Mines.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Button } from "@/components/ui/button";
 import Header from '../components/Header';
+import ChatBox from '../components/ChatBox';
 
 const Mines = () => {
   const [user, setUser] = useState(JSON.parse(localStorage.getItem('user')));
@@ -131,7 +132,7 @@ const Mines = () => {
           </div>
           <div className="w-2/3">
             <div className="bg-darkBlue-lighter rounded-lg p-6">
-              <div className="grid grid-cols-5 gap-2">
+              <div className="grid grid-cols-5 gap-1">
                 {grid.map((cell, index) => (
                   <Button
                     key={index}
@@ -151,6 +152,13 @@ const Mines = () => {
           </div>
         </div>
       </div>
+      <ChatBox />
+      <footer className="fixed bottom-0 left-0 right-0 bg-darkBlue-lighter p-4 text-center">
+        <p className="text-white">
+          Made by @darksplice on Discord - have fun freaky gambling 
+          <img src="/discord-icon.svg" alt="Discord" className="inline-block ml-2 w-6 h-6" />
+        </p>
+      </footer>
     </div>
   );
 };

src/pages/Towers.jsx

@@ -1,13 +1,14 @@
 import React, { useState, useEffect } from 'react';
 import { Button } from "@/components/ui/button";
 import Header from '../components/Header';
+import ChatBox from '../components/ChatBox';
 
 const Towers = () => {
   const [user, setUser] = useState(JSON.parse(localStorage.getItem('user')));
   const [bet, setBet] = useState(30);
   const [currentLevel, setCurrentLevel] = useState(0);
   const [gameOver, setGameOver] = useState(false);
-  const [difficulty, setDifficulty] = useState('Easy');
+  const [difficulty, setDifficulty] = useState('Normal');
   const [totalEarnings, setTotalEarnings] = useState(0);
   const [towerState, setTowerState] = useState(Array(10).fill().map(() => Array(3).fill('default')));
 
@@ -32,7 +33,7 @@ const Towers = () => {
   const handleClimb = (level, choice) => {
     if (gameOver || level !== currentLevel) return;
 
-    const successRate = difficulty === 'Easy' ? 0.7 : difficulty === 'Normal' ? 0.5 : 0.3;
+    const successRate = 0.487; // 48.7% win rate
     const isSuccess = Math.random() < successRate;
 
     const newTowerState = [...towerState];
@@ -94,29 +95,6 @@ const Towers = () => {
                   <Button onClick={() => setBet(user.balance)} className="px-2 py-1 ml-2">Max</Button>
                 </div>
               </div>
-              <div className="mb-4">
-                <label className="block mb-2">Difficulty</label>
-                <div className="flex">
-                  <Button
-                    onClick={() => setDifficulty('Easy')}
-                    className={`mr-2 ${difficulty === 'Easy' ? 'bg-blue-500' : 'bg-gray-500'}`}
-                  >
-                    Easy
-                  </Button>
-                  <Button
-                    onClick={() => setDifficulty('Normal')}
-                    className={`mr-2 ${difficulty === 'Normal' ? 'bg-blue-500' : 'bg-gray-500'}`}
-                  >
-                    Normal
-                  </Button>
-                  <Button
-                    onClick={() => setDifficulty('Hard')}
-                    className={`${difficulty === 'Hard' ? 'bg-blue-500' : 'bg-gray-500'}`}
-                  >
-                    Hard
-                  </Button>
-                </div>
-              </div>
               <div className="mb-4">
                 <label className="block mb-2">Total earnings</label>
                 <p className="text-2xl font-bold">${totalEarnings.toFixed(2)}</p>
@@ -153,6 +131,13 @@ const Towers = () => {
           </div>
         </div>
       </div>
+      <ChatBox />
+      <footer className="fixed bottom-0 left-0 right-0 bg-darkBlue-lighter p-4 text-center">
+        <p className="text-white">
+          Made by @darksplice on Discord - have fun freaky gambling 
+          <img src="/discord-icon.svg" alt="Discord" className="inline-block ml-2 w-6 h-6" />
+        </p>
+      </footer>
     </div>
   );
 };