Skip to content

лотерея #361

New issue
New issue
Open
Open
лотерея#361
@iboga19

Description

@iboga19
iboga19
opened on May 11, 2025

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;

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions