лотерея

[iboga19]

import React, { useState, useEffect, createContext, useContext } from 'react';

// Context for global state management
const AppContext = createContext();

// Custom hook to use the context
const useAppContext = () => useContext(AppContext);

// Mock database
const mockDatabase = {
users: [
{ id: 1, username: 'admin', password: 'admin123', role: 'admin', balance: 500 },
{ id: 2, username: 'user1', password: 'password1', role: 'user', balance: 200 },
],
games: {
zabava: [],
roulette: [],
},
};

// Admin Panel Component
const AdminPanel = () => {
const [users, setUsers] = useState(mockDatabase.users);
const [newUser, setNewUser] = useState({ username: '', password: '', role: 'user' });

const handleAddUser = () => {
if (!newUser.username || !newUser.password) return;
const newUserObj = {
...newUser,
id: Math.max(...users.map(u => u.id)) + 1,
balance: 0,
};
setUsers([...users, newUserObj]);
setNewUser({ username: '', password: '', role: 'user' });
};

const handleDeleteUser = (id) => {
setUsers(users.filter(user => user.id !== id));
};

const handleChangeBalance = (id, amount) => {
setUsers(users.map(user =>
user.id === id ? { ...user, balance: user.balance + amount } : user
));
};

return (

Admin Panel

  <div className="mb-4">
    <h3 className="text-xl font-semibold mb-2">Add New User</h3>
    <input
      type="text"
      placeholder="Username"
      value={newUser.username}
      onChange={(e) => setNewUser({ ...newUser, username: e.target.value })}
      className="bg-gray-800 text-green-400 p-2 rounded mr-2 mb-2 w-full"
    />
    <input
      type="password"
      placeholder="Password"
      value={newUser.password}
      onChange={(e) => setNewUser({ ...newUser, password: e.target.value })}
      className="bg-gray-800 text-green-400 p-2 rounded mr-2 mb-2 w-full"
    />
    <select
      value={newUser.role}
      onChange={(e) => setNewUser({ ...newUser, role: e.target.value })}
      className="bg-gray-800 text-green-400 p-2 rounded mr-2 mb-2 w-full"
    >
      <option value="user">User</option>
      <option value="admin">Admin</option>
    </select>
    <button
      onClick={handleAddUser}
      className="bg-green-700 hover:bg-green-600 text-white px-4 py-2 rounded transition-colors"
    >
      Add User
    </button>
  </div>

  <h3 className="text-xl font-semibold mb-2">User Management</h3>
  <div className="overflow-x-auto">
    <table className="w-full text-left border-collapse">
      <thead>
        <tr className="border-b border-green-700">
          <th className="p-2">ID</th>
          <th className="p-2">Username</th>
          <th className="p-2">Role</th>
          <th className="p-2">Balance</th>
          <th className="p-2">Actions</th>
        </tr>
      </thead>
      <tbody>
        {users.map(user => (
          <tr key={user.id} className="border-b border-green-700">
            <td className="p-2">{user.id}</td>
            <td className="p-2">{user.username}</td>
            <td className="p-2">{user.role}</td>
            <td className="p-2">{user.balance.toFixed(2)} VC</td>
            <td className="p-2">
              <button
                onClick={() => handleChangeBalance(user.id, 100)}
                className="bg-blue-700 hover:bg-blue-600 text-white px-2 py-1 rounded mr-1 text-sm"
              >
                +100
              </button>
              <button
                onClick={() => handleChangeBalance(user.id, -100)}
                className="bg-red-700 hover:bg-red-600 text-white px-2 py-1 rounded mr-1 text-sm"
              >
                -100
              </button>
              <button
                onClick={() => handleDeleteUser(user.id)}
                className="bg-red-900 hover:bg-red-800 text-white px-2 py-1 rounded text-sm"
              >
                Delete
              </button>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>
</div>

);
};

// Login Component
const Login = ({ onLogin }) => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');

const handleSubmit = (e) => {
e.preventDefault();
const user = mockDatabase.users.find(
u => u.username === username && u.password === password
);

if (user) {
  onLogin(user);
} else {
  setError('Invalid username or password');
}

};

return (

Hacker Lottery Login

{error &&

{error}

}

Username

<input
id="username"
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
className="w-full bg-gray-700 text-green-300 p-2 rounded focus:outline-none focus:ring-2 focus:ring-green-500"
required
/>

Password

<input
id="password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full bg-gray-700 text-green-300 p-2 rounded focus:outline-none focus:ring-2 focus:ring-green-500"
required
/>

Login

);
};

// Wallet Component
const Wallet = () => {
const { currentUser } = useAppContext();
const [amount, setAmount] = useState('');
const [transactions, setTransactions] = useState([]);

const handleDeposit = () => {
if (!amount || isNaN(amount) || parseFloat(amount) <= 0) return;
const depositAmount = parseFloat(amount);
// In a real app, this would be an API call
setTransactions([
...transactions,
{
id: transactions.length + 1,
type: 'deposit',
amount: depositAmount,
date: new Date().toLocaleString(),
},
]);
alert(Deposited ${depositAmount} VC);
setAmount('');
};

const handleWithdraw = () => {
if (!amount || isNaN(amount) || parseFloat(amount) <= 0) return;
const withdrawAmount = parseFloat(amount);
if (withdrawAmount > currentUser.balance) {
alert('Insufficient funds');
return;
}
// In a real app, this would be an API call
setTransactions([
...transactions,
{
id: transactions.length + 1,
type: 'withdrawal',
amount: withdrawAmount,
date: new Date().toLocaleString(),
},
]);
alert(Requested withdrawal of ${withdrawAmount} VC);
setAmount('');
};

return (

Your Wallet

  <div className="mb-6">
    <p className="text-xl mb-2">Current Balance: <span className="font-bold">{currentUser.balance.toFixed(2)} VC</span></p>
  </div>

  <div className="mb-6">
    <h3 className="text-xl font-semibold mb-2">Deposit Funds</h3>
    <div className="flex">
      <input
        type="number"
        min="0.01"
        step="0.01"
        value={amount}
        onChange={(e) => setAmount(e.target.value)}
        className="bg-gray-800 text-green-400 p-2 rounded-l focus:outline-none w-full"
        placeholder="Amount in VC"
      />
      <button
        onClick={handleDeposit}
        className="bg-green-700 hover:bg-green-600 text-white px-4 py-2 rounded-r transition-colors"
      >
        Deposit
      </button>
    </div>
  </div>

  <div>
    <h3 className="text-xl font-semibold mb-2">Withdraw Funds</h3>
    <div className="flex">
      <input
        type="number"
        min="0.01"
        step="0.01"
        value={amount}
        onChange={(e) => setAmount(e.target.value)}
        className="bg-gray-800 text-green-400 p-2 rounded-l focus:outline-none w-full"
        placeholder="Amount in VC"
      />
      <button
        onClick={handleWithdraw}
        className="bg-red-700 hover:bg-red-600 text-white px-4 py-2 rounded-r transition-colors"
      >
        Withdraw
      </button>
    </div>
  </div>

  <div className="mt-8">
    <h3 className="text-xl font-semibold mb-2">Transaction History</h3>
    {transactions.length === 0 ? (
      <p>No transactions yet.</p>
    ) : (
      <div className="overflow-x-auto">
        <table className="w-full text-left border-collapse">
          <thead>
            <tr className="border-b border-green-700">
              <th className="p-2">ID</th>
              <th className="p-2">Type</th>
              <th className="p-2">Amount</th>
              <th className="p-2">Date</th>
            </tr>
          </thead>
          <tbody>
            {transactions.map(transaction => (
              <tr key={transaction.id} className="border-b border-green-700">
                <td className="p-2">{transaction.id}</td>
                <td className="p-2 capitalize">{transaction.type}</td>
                <td className={`p-2 ${transaction.type === 'withdrawal' ? 'text-red-400' : 'text-green-400'}`}>
                  {transaction.type === 'withdrawal' ? '-' : '+'}{transaction.amount.toFixed(2)} VC
                </td>
                <td className="p-2">{transaction.date}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    )}
  </div>
</div>

);
};

// Zabava Game Component
const ZabavaGame = () => {
const [selectedNumbers, setSelectedNumbers] = useState([]);
const [isPlaying, setIsPlaying] = useState(false);
const [result, setResult] = useState(null);
const [hashCheck, setHashCheck] = useState('');
const [hashResult, setHashResult] = useState('');
const { currentUser } = useAppContext();

const toggleNumber = (num) => {
if (selectedNumbers.includes(num)) {
setSelectedNumbers(selectedNumbers.filter(n => n !== num));
} else if (selectedNumbers.length < 12) {
setSelectedNumbers([...selectedNumbers, num]);
}
};

const playGame = () => {
if (selectedNumbers.length !== 12) {
alert('Please select exactly 12 numbers.');
return;
}

setIsPlaying(true);

// Simulate game processing
setTimeout(() => {
  const winningNumbers = Array.from({ length: 12 }, () => Math.floor(Math.random() * 24) + 1);
  const matchedNumbers = selectedNumbers.filter(num => winningNumbers.includes(num));
  const matches = matchedNumbers.length;

  // Calculate payout based on matches
  let payout = 0;
  if (matches >= 6) payout = 2; // Example payout
  if (matches >= 8) payout = 5;
  if (matches >= 10) payout = 10;
  if (matches === 12) payout = 50;

  const winAmount = payout * 10; // Assuming bet is 10 VC

  setResult({
    winningNumbers,
    matchedNumbers,
    matches,
    payout,
    winAmount,
  });

  setIsPlaying(false);
}, 2000);

};

const verifyHash = () => {
// In a real application, we'd use proper MD5 hashing and verification
if (hashCheck.trim() === '') {
setHashResult('Please enter a number to verify');
return;
}

const inputNum = parseInt(hashCheck);
if (isNaN(inputNum) || inputNum < 1 || inputNum > 100) {
  setHashResult('Please enter a valid number between 1 and 100');
  return;
}

// In a real implementation, we'd compare the hash here
// For demonstration, we'll just show how it would work
const generatedHash = btoa(inputNum.toString());
setHashResult(`Generated hash for ${inputNum}: ${generatedHash}`);

};

return (

Zabava - Guess 12 Numbers Out of 24

  <div className="mb-6">
    <p className="mb-2">Select exactly 12 numbers:</p>
    <div className="grid grid-cols-6 gap-2">
      {[...Array(24)].map((_, i) => {
        const num = i + 1;
        return (
          <button
            key={num}
            onClick={() => toggleNumber(num)}
            disabled={isPlaying}
            className={`py-2 rounded ${
              selectedNumbers.includes(num)
                ? 'bg-green-700 hover:bg-green-600'
                : 'bg-gray-800 hover:bg-gray-700'
            } transition-colors`}
          >
            {num}
          </button>
        );
      })}
    </div>
    <p className="mt-2">Selected: {selectedNumbers.length}/12</p>
  </div>

  <div className="mb-6">
    <button
      onClick={playGame}
      disabled={isPlaying || selectedNumbers.length !== 12}
      className={`px-6 py-3 rounded ${
        isPlaying || selectedNumbers.length !== 12
          ? 'bg-gray-700 cursor-not-allowed'
          : 'bg-green-700 hover:bg-green-600'
      } text-white transition-colors`}
    >
      {isPlaying ? 'Playing...' : 'Play Game'}
    </button>
  </div>

  {result && (
    <div className="mt-6 p-4 bg-gray-800 rounded">
      <h3 className="text-xl font-semibold mb-2">Game Result</h3>
      <p>Winning numbers: {result.winningNumbers.join(', ')}</p>
      <p>Your matched numbers: {result.matchedNumbers.join(', ') || 'None'}</p>
      <p>Matches: {result.matches}</p>
      <p>Payout multiplier: x{result.payout}</p>
      <p className="font-bold mt-2">
        You won: {result.winAmount.toFixed(2)} VC
      </p>
    </div>
  )}

  <div className="mt-8">
    <h3 className="text-xl font-semibold mb-2">Verify Random Number Hash</h3>
    <p className="mb-2">Enter the random number to verify:</p>
    <div className="flex">
      <input
        type="text"
        value={hashCheck}
        onChange={(e) => setHashCheck(e.target.value)}
        className="bg-gray-800 text-green-400 p-2 rounded-l focus:outline-none w-full"
        placeholder="Enter number (1-100)"
      />
      <button
        onClick={verifyHash}
        className="bg-blue-700 hover:bg-blue-600 text-white px-4 py-2 rounded-r transition-colors"
      >
        Verify
      </button>
    </div>
    {hashResult && <p className="mt-2 text-green-300">{hashResult}</p>}
  </div>
</div>

);
};

// Roulette Game Component
const RouletteGame = () => {
const [selectedNumber, setSelectedNumber] = useState('');
const [isSpinning, setIsSpinning] = useState(false);
const [result, setResult] = useState(null);
const [hashCheck, setHashCheck] = useState('');
const [hashResult, setHashResult] = useState('');
const [randomNumberHash, setRandomNumberHash] = useState('');
const { currentUser } = useAppContext();

useEffect(() => {
// Generate a random number and hash it before the game starts
const generateRandomNumber = () => {
const num = Math.floor(Math.random() * 100) + 1;
const hash = btoa(num.toString()); // Base64 encoding as simple hash
setRandomNumberHash(hash);
return num;
};

generateRandomNumber();

}, []);

const playGame = () => {
if (!selectedNumber || isNaN(selectedNumber) || selectedNumber < 1 || selectedNumber > 100) {
alert('Please select a valid number between 1 and 100.');
return;
}

setIsSpinning(true);

// Simulate spinning with timeout
setTimeout(() => {
  // In a real app, the result would come from the server
  const actualResult = parseInt(atob(randomNumberHash)); // Decode the hash to get original number
  
  const win = parseInt(selectedNumber) === actualResult;
  const payout = win ? 99 : 0;
  const winAmount = payout * 10; // Assuming bet is 10 VC

  setResult({
    actualResult,
    win,
    payout,
    winAmount,
  });

  setIsSpinning(false);
}, 3000);

};

const verifyHash = () => {
if (hashCheck.trim() === '') {
setHashResult('Please enter a number to verify');
return;
}

const inputNum = parseInt(hashCheck);
if (isNaN(inputNum) || inputNum < 1 || inputNum > 100) {
  setHashResult('Please enter a valid number between 1 and 100');
  return;
}

const generatedHash = btoa(inputNum.toString());
const isCorrect = generatedHash === randomNumberHash;

setHashResult(
  `Generated hash for ${inputNum}: ${generatedHash}\n` +
  `Match with game hash: ${isCorrect ? '✓ Correct' : '✗ Incorrect'}`
);

};

return (

Roulette - Guess 1 Number Out of 100

  <div className="mb-6">
    <p className="mb-2">Select a number between 1 and 100:</p>
    <input
      type="number"
      min="1"
      max="100"
      value={selectedNumber}
      onChange={(e) => setSelectedNumber(e.target.value)}
      disabled={isSpinning}
      className="bg-gray-800 text-green-400 p-2 rounded w-full focus:outline-none"
    />
  </div>

  <div className="mb-6">
    <button
      onClick={playGame}
      disabled={isSpinning}
      className={`px-6 py-3 rounded ${
        isSpinning
          ? 'bg-gray-700 cursor-not-allowed'
          : 'bg-green-700 hover:bg-green-600'
      } text-white transition-colors`}
    >
      {isSpinning ? 'Spinning...' : 'Spin Wheel'}
    </button>
  </div>

  {result && (
    <div className="mt-6 p-4 bg-gray-800 rounded animate-pulse">
      <h3 className="text-xl font-semibold mb-2">Game Result</h3>
      <p>The winning number was: <span className="font-bold text-green-400">{result.actualResult}</span></p>
      <p>Your guess: {selectedNumber}</p>
      {result.win ? (
        <p className="text-green-400 font-bold mt-2">
          Congratulations! You won {result.winAmount.toFixed(2)} VC
        </p>
      ) : (
        <p className="text-red-400 mt-2">Better luck next time!</p>
      )}
    </div>
  )}

  <div className="mt-8">
    <h3 className="text-xl font-semibold mb-2">Verify Random Number Hash</h3>
    <p className="mb-2">The hash for this round's random number is: <code className="bg-gray-800 p-1 rounded">{randomNumberHash}</code></p>
    <p className="mb-2">Enter the number you think corresponds to this hash:</p>
    <div className="flex">
      <input
        type="text"
        value={hashCheck}
        onChange={(e) => setHashCheck(e.target.value)}
        className="bg-gray-800 text-green-400 p-2 rounded-l focus:outline-none w-full"
        placeholder="Enter number (1-100)"
      />
      <button
        onClick={verifyHash}
        className="bg-blue-700 hover:bg-blue-600 text-white px-4 py-2 rounded-r transition-colors"
      >
        Verify
      </button>
    </div>
    {hashResult && <p className="mt-2 text-green-300 whitespace-pre-line">{hashResult}</p>}
  </div>
</div>

);
};

// Navigation Component
const Nav = ({ currentUser, onLogout }) => {
return (

HackerLottery

Welcome, {currentUser.username}

Balance: {currentUser.balance.toFixed(2)} VC


Logout

);
};

// Main App Component
const App = () => {
const [currentUser, setCurrentUser] = useState(null);
const [activePage, setActivePage] = useState('dashboard');

const handleLogin = (user) => {
setCurrentUser(user);
};

const handleLogout = () => {
setCurrentUser(null);
setActivePage('login');
};

useEffect(() => {
if (currentUser) {
setActivePage('dashboard');
} else {
setActivePage('login');
}
}, [currentUser]);

const renderContent = () => {
if (!currentUser) return ;

switch (activePage) {
  case 'dashboard':
    return (
      <div className="space-y-6">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <ZabavaGame />
          <RouletteGame />
        </div>
        <Wallet />
      </div>
    );
  case 'admin':
    return <AdminPanel />;
  default:
    return <Dashboard />;
}

};

return (
<AppContext.Provider value={{ currentUser }}>

{currentUser && (

)}

    <main className="container mx-auto p-4">
      {currentUser && (
        <div className="flex flex-wrap gap-2 mb-6">
          <button
            onClick={() => setActivePage('dashboard')}
            className={`px-4 py-2 rounded ${
              activePage === 'dashboard' 
                ? 'bg-green-700' 
                : 'bg-gray-800 hover:bg-gray-700'
            } transition-colors`}
          >
            Dashboard
          </button>
          {currentUser.role === 'admin' && (
            <button
              onClick={() => setActivePage('admin')}
              className={`px-4 py-2 rounded ${
                activePage === 'admin' 
                  ? 'bg-green-700' 
                  : 'bg-gray-800 hover:bg-gray-700'
              } transition-colors`}
            >
              Admin Panel
            </button>
          )}
        </div>
      )}
      
      {renderContent()}
    </main>
    
    <footer className="bg-gray-800 text-green-400 p-4 mt-8">
      <div className="container mx-auto text-center">
        <p>HackerLottery &copy; {new Date().getFullYear()} | Crypto-style lottery platform</p>
        <p className="text-sm mt-2">All games are provably fair using MD5 hashing technology</p>
      </div>
    </footer>
  </div>
</AppContext.Provider>

);
};

export default App;