/* ============================================
COINRUSH ULTRA-MODERN LANDING PAGE - React Component
============================================ */
const { useState, useEffect, useRef } = React;
// ============================================
// ICONS
// ============================================
const Icons = {
coin: (
),
crash: (
),
plinko: (
),
jackpot: (
),
knights: (
),
dice: (
),
lottery: (
),
shield: (
),
lightning: (
),
users: (
),
arrowRight: (
),
play: (
),
btc: (
),
eth: (
),
usdt: (
)
};
// ============================================
// COMPONENTS
// ============================================
function Navbar() {
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const handleScroll = () => setScrolled(window.scrollY > 50);
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
return (
);
}
function LiveTicker() {
// Simulated live wins
const wins = [
{ user: "CryptoKing", game: "Crash", amount: "$1,240.50" },
{ user: "LuckyDoge", game: "Coinflip", amount: "$500.00" },
{ user: "MoonBoy", game: "Jackpot", amount: "$5,420.00" },
{ user: "Satoshi", game: "Dice", amount: "$120.00" },
{ user: "WhaleAlert", game: "Knights", amount: "$2,100.00" },
{ user: "HODLer", game: "Crash", amount: "$850.25" },
{ user: "ToTheMoon", game: "Lottery", amount: "$10,000.00" },
];
return (
{[...wins, ...wins, ...wins].map((win, i) => (
{win.user} won {win.amount} on {win.game}
))}
);
}
function Hero() {
const [gameState, setGameState] = useState({
p1Health: 100,
p2Health: 100,
p1State: 'idle',
p2State: 'idle',
damage: null,
winner: null,
turn: 'p1',
p1PotionUsed: false,
p2PotionUsed: false
});
useEffect(() => {
let mounted = true;
const runBattle = async () => {
while (mounted) {
// Reset
setGameState({
p1Health: 100,
p2Health: 100,
p1State: 'idle',
p2State: 'idle',
damage: null,
winner: null,
turn: Math.random() > 0.5 ? 'p1' : 'p2',
p1PotionUsed: false,
p2PotionUsed: false
});
await new Promise(r => setTimeout(r, 1000));
let p1 = 100;
let p2 = 100;
let p1Potion = false;
let p2Potion = false;
let currentTurn = Math.random() > 0.5 ? 'p1' : 'p2';
while (p1 > 0 && p2 > 0 && mounted) {
const isP1Attacking = currentTurn === 'p1';
const attacker = isP1Attacking ? 'p1' : 'p2';
const defender = isP1Attacking ? 'p2' : 'p1';
const attackerHealth = isP1Attacking ? p1 : p2;
const attackerPotionUsed = isP1Attacking ? p1Potion : p2Potion;
// Decide move: Attack or Potion (if health < 50 and potion not used)
let move = 'attack';
if (attackerHealth < 50 && !attackerPotionUsed && Math.random() > 0.3) {
move = 'potion';
}
if (move === 'potion') {
// Potion Animation
setGameState(prev => ({
...prev,
[attacker === 'p1' ? 'p1State' : 'p2State']: 'potion',
turn: currentTurn
}));
await new Promise(r => setTimeout(r, 600));
// Heal Effect
const heal = Math.floor(Math.random() * 10) + 20;
if (isP1Attacking) { p1 = Math.min(100, p1 + heal); p1Potion = true; }
else { p2 = Math.min(100, p2 + heal); p2Potion = true; }
setGameState(prev => ({
...prev,
p1Health: p1,
p2Health: p2,
[attacker === 'p1' ? 'p1State' : 'p2State']: 'idle',
p1PotionUsed: p1Potion,
p2PotionUsed: p2Potion,
damage: { val: heal, target: attacker, type: 'heal' }
}));
// Potion doesn't end turn in real game, but for visual flow we can just proceed to attack or next turn
// Let's make them attack immediately after potion for better flow
await new Promise(r => setTimeout(r, 800));
setGameState(prev => ({ ...prev, damage: null }));
}
// Attack Animation (Always happens unless game over, or if we want to simulate potion taking a turn slot - but usually it's a free action or part of turn)
// For this visual, let's just do attack now.
setGameState(prev => ({
...prev,
[attacker === 'p1' ? 'p1State' : 'p2State']: 'attack',
turn: currentTurn
}));
await new Promise(r => setTimeout(r, 300));
// Calculate damage
const dmg = Math.floor(Math.random() * 20) + 10;
if (isP1Attacking) p2 = Math.max(0, p2 - dmg);
else p1 = Math.max(0, p1 - dmg);
// Hit animation and damage display
setGameState(prev => ({
...prev,
p1Health: p1,
p2Health: p2,
[attacker === 'p1' ? 'p1State' : 'p2State']: 'idle',
[defender === 'p1' ? 'p1State' : 'p2State']: 'hit',
damage: { val: dmg, target: defender, type: 'damage' }
}));
await new Promise(r => setTimeout(r, 400));
// Reset states
setGameState(prev => ({
...prev,
p1State: 'idle',
p2State: 'idle',
damage: null
}));
// Switch turn
currentTurn = currentTurn === 'p1' ? 'p2' : 'p1';
await new Promise(r => setTimeout(r, 600));
}
if (!mounted) break;
setGameState(prev => ({ ...prev, winner: p1 > 0 ? 'p1' : 'p2' }));
await new Promise(r => setTimeout(r, 3000));
}
};
runBattle();
return () => { mounted = false; };
}, []);
return (
LIVE ARENA ACTIVE
NEXT GEN
CRYPTO BATTLES
The world's first provably fair RPG battle arena. Stake your claim, defeat your rivals, and earn real rewards in the metaverse.
window.openRegisterModal()}>
ENTER THE ARENA {Icons.arrowRight}
document.getElementById('games').scrollIntoView({behavior: 'smooth'})}>
VIEW GAMES
{/* Left Knight (Blue) */}
{gameState.damage?.target === 'p1' && (
{gameState.damage.type === 'heal' ? '+' : '-'}{gameState.damage.val}
)}
{gameState.winner === 'p1' &&
👑
}
VS
{/* Right Knight (Red) */}
{gameState.damage?.target === 'p2' && (
{gameState.damage.type === 'heal' ? '+' : '-'}{gameState.damage.val}
)}
{gameState.winner === 'p2' &&
👑
}
);
}
function GameCard({ id, title, description, icon, link, color }) {
return (
window.location.href = link}>
{title}
{description}
Play Now
);
}
function GamesSection() {
const games = [
{
id: "coinflip",
title: "Coinflip",
description: "Double your money in a 50/50 clash.",
icon: Icons.coin,
link: "/coinflip"
},
{
id: "plinko",
title: "Plinko",
description: "Drop the ball and win multipliers.",
icon: Icons.plinko || Icons.crash,
link: "/plinko"
},
{
id: "jackpot",
title: "Jackpot",
description: "Winner takes all in this high stakes game.",
icon: Icons.jackpot,
link: "/jackpot"
},
{
id: "knights",
title: "Knights",
description: "PvP battles in the arena.",
icon: Icons.knights,
link: "/barbarian"
},
{
id: "dice",
title: "Dice",
description: "Roll the dice and predict the outcome.",
icon: Icons.dice,
link: "/slice-dice"
},
{
id: "lottery",
title: "Lottery",
description: "Buy tickets for a chance to win big.",
icon: Icons.lottery,
link: "/lottery"
},
];
return (
Our Games
Provably fair games designed for thrill and transparency.
{games.map((game, i) => (
))}
);
}
function FeaturesSection() {
return (
Provably Fair Gaming
Every game outcome is cryptographically verifiable. We use a transparent seed system that ensures no manipulation is possible. Verify any bet, any time.
window.location.href='/provably-fair'}>
Learn More {Icons.arrowRight}
const serverSeed = "d8b...3f2" ;
const clientSeed = "user_provided" ;
const hash = hmac_sha256 (serverSeed, clientSeed);
// Result is deterministic
return hexToDec (hash);
{Icons.shield}
Instant Global Payouts
Withdraw your winnings instantly to your crypto wallet. No waiting periods, no hidden fees, just your money when you want it.
window.openLoginModal()}>
Start Playing {Icons.arrowRight}
{Icons.coin}
{Icons.coin}
{Icons.coin}
$12,450.00
Transfer Complete
);
}
function Footer() {
return (
);
}
function Stars() {
// Generate static stars for background depth
const [staticStars, setStaticStars] = useState('');
// Generate twinkling stars
const [twinklingStars, setTwinklingStars] = useState([]);
useEffect(() => {
// 1. Generate dense static star field using box-shadow
let shadowValue = '';
for (let i = 0; i < 400; i++) {
const x = Math.random() * 100;
const y = Math.random() * 100;
const size = Math.random() * 1.5;
shadowValue += `${x}vw ${y}vh ${size}px #fff, `;
}
setStaticStars(shadowValue.slice(0, -2));
// 2. Generate animated twinkling stars
const newStars = Array.from({ length: 60 }).map((_, i) => ({
id: i,
top: Math.random() * 100 + '%',
left: Math.random() * 100 + '%',
delay: Math.random() * 5 + 's',
duration: Math.random() * 3 + 2 + 's',
opacity: Math.random() * 0.7 + 0.3,
size: Math.random() * 3 + 1 + 'px'
}));
setTwinklingStars(newStars);
}, []);
return (
{twinklingStars.map(star => (
))}
);
}
function Galaxy() {
return (
);
}
function App() {
return (
{Icons.btc}
{Icons.eth}
{Icons.usdt}
{Icons.btc}
{Icons.eth}
{Icons.usdt}
{Icons.btc}
{Icons.eth}
);
}
// Render
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render( );