import React, { useState, useEffect, useRef } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
const GAME_WIDTH = 400;
const GAME_HEIGHT = 600;
const GRAVITY = 0.5;
const JUMP_STRENGTH = -10;
const PIPE_WIDTH = 60;
const PIPE_GAP = 200;
function Bird({ y, invincible }) {
return (
<div style={{
position: 'absolute',
left: '50px',
top: `${y}px`,
width: '30px',
height: '30px',
backgroundColor: invincible ? 'gold' : 'yellow',
borderRadius: '50%',
transition: 'background-color 0.3s',
cursor: 'pointer',
}}>
🐤
</div>
);
}
function Pipe({ x, height, isTop, isGhost }) {
return (
<div style={{
position: 'absolute',
left: `${x}px`,
[isTop ? 'top' : 'bottom']: '0',
width: `${PIPE_WIDTH}px`,
height: `${height}px`,
backgroundColor: isGhost ? 'rgba(0, 255, 0, 0.5)' : 'green',
transition: 'background-color 0.3s',
}} />
);
}
function GameOver({ score, onRestart }) {
return (
<div style={{
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
textAlign: 'center',
}}>
<h2>Game Over</h2>
<p>Score: {score}</p>
<button onClick={onRestart}>Restart</button>
</div>
);
}
function BloodEffect({ x, y }) {
return (
<div style={{
position: 'absolute',
left: `${x}px`,
top: `${y}px`,
width: '50px',
height: '50px',
backgroundColor: 'red',
borderRadius: '50%',
opacity: 0.7,
animation: 'expand 0.5s ease-out',
}} />
);
}
function SlotMachine({ spinning, result, onSpin }) {
return (
<div style={{
position: 'absolute',
top: '10px',
right: '10px',
backgroundColor: 'rgba(0, 0, 0, 0.8)',
padding: '5px',
borderRadius: '5px',
color: 'white',
textAlign: 'center',
width: '120px',
}}>
<div style={{ fontSize: '24px', marginBottom: '5px' }}>🎰</div>
{spinning ? (
<div style={{ fontSize: '14px' }}>Spinning...</div>
) : (
<>
<div style={{ fontSize: '14px', marginBottom: '5px' }}>
{result ? `Result: ${result}` : 'Spin the slot!'}