195 lines
4.6 KiB
Markdown
195 lines
4.6 KiB
Markdown
# 🦖 Dino Game - Solana Token Website
|
|
|
|
A modern, dino-themed website for your Chrome offline dino game, integrated with Solana blockchain for token-based gameplay.
|
|
|
|
## ✨ Features
|
|
|
|
- **Wallet Integration**: Connect Phantom and other Solana wallets
|
|
- **Token Payment**: Pay 1 DINO token to play the game
|
|
- **Buy Token Button**: Purchase DINO tokens directly from the website
|
|
- **Game Integration**: Seamless iframe integration for your Unity game
|
|
- **Dino Theme**: Beautiful green and yellow color scheme matching the game
|
|
- **Responsive Design**: Works on all devices
|
|
|
|
## 🚀 Getting Started
|
|
|
|
### Prerequisites
|
|
|
|
- Node.js 20.16.0 or higher
|
|
- npm or yarn package manager
|
|
- Solana wallet (Phantom recommended)
|
|
|
|
### Installation
|
|
|
|
1. Clone the repository:
|
|
```bash
|
|
git clone <your-repo-url>
|
|
cd dino_landing_page
|
|
```
|
|
|
|
2. Install dependencies:
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
3. Start the development server:
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
4. Open [http://localhost:3000](http://localhost:3000) in your browser.
|
|
|
|
## 🔧 Configuration
|
|
|
|
### Update Your Wallet Address
|
|
|
|
In `app/components/GameSection.tsx`, replace the placeholder wallet address:
|
|
|
|
```typescript
|
|
// Replace with your actual wallet address
|
|
const RECIPIENT_WALLET = new PublicKey('YOUR_ACTUAL_WALLET_ADDRESS_HERE');
|
|
```
|
|
|
|
### Customize Token Amount
|
|
|
|
Currently set to 0.001 SOL for demo purposes. To implement actual DINO token transfers:
|
|
|
|
1. Create your DINO token on Solana
|
|
2. Update the transaction logic in `GameSection.tsx`
|
|
3. Use SPL Token Program for token transfers
|
|
|
|
### Integrate Your Unity Game
|
|
|
|
1. Export your Unity game to WebGL
|
|
2. Replace `public/game.html` with your game's `index.html`
|
|
3. Ensure your game works in an iframe
|
|
4. Test the integration
|
|
|
|
## 🎮 How It Works
|
|
|
|
1. **Connect Wallet**: Users connect their Solana wallet
|
|
2. **Buy Tokens**: Purchase DINO tokens (integrate with your preferred DEX)
|
|
3. **Pay to Play**: Send 1 DINO token to your wallet
|
|
4. **Game Launch**: Game opens in an iframe after successful payment
|
|
5. **Blockchain Integration**: All transactions are recorded on Solana
|
|
|
|
## 🎨 Customization
|
|
|
|
### Colors
|
|
|
|
Update the CSS variables in `app/globals.css`:
|
|
|
|
```css
|
|
:root {
|
|
--dino-green: #059669;
|
|
--dino-green-light: #10b981;
|
|
--dino-green-dark: #047857;
|
|
--dino-yellow: #eab308;
|
|
--dino-yellow-light: #fbbf24;
|
|
--dino-yellow-dark: #ca8a04;
|
|
}
|
|
```
|
|
|
|
### Styling
|
|
|
|
- Modify Tailwind classes in components
|
|
- Update CSS animations and transitions
|
|
- Customize button styles and hover effects
|
|
|
|
## 🔌 DEX Integration
|
|
|
|
To enable actual token purchases, integrate with:
|
|
|
|
- **Raydium**: Popular Solana DEX
|
|
- **Orca**: User-friendly DEX
|
|
- **Jupiter**: Best price aggregator
|
|
- **Metaplex**: NFT marketplace
|
|
|
|
Example Raydium integration:
|
|
|
|
```typescript
|
|
// In your buy token function
|
|
const raydiumUrl = `https://raydium.io/swap/?inputCurrency=sol&outputCurrency=${DINO_TOKEN_MINT}`;
|
|
window.open(raydiumUrl, '_blank');
|
|
```
|
|
|
|
## 🚀 Deployment
|
|
|
|
### Vercel (Recommended)
|
|
|
|
1. Push your code to GitHub
|
|
2. Connect your repository to Vercel
|
|
3. Deploy automatically on push
|
|
|
|
### Other Platforms
|
|
|
|
- **Netlify**: Drag and drop deployment
|
|
- **AWS Amplify**: Full-stack deployment
|
|
- **Heroku**: Traditional hosting
|
|
|
|
## 📱 Mobile Optimization
|
|
|
|
The website is fully responsive and includes:
|
|
|
|
- Touch-friendly buttons
|
|
- Mobile-optimized layouts
|
|
- Responsive iframe sizing
|
|
- Mobile wallet support
|
|
|
|
## 🔒 Security Considerations
|
|
|
|
- Always verify wallet connections
|
|
- Implement proper transaction validation
|
|
- Use HTTPS in production
|
|
- Validate iframe sources
|
|
- Implement rate limiting
|
|
|
|
## 🐛 Troubleshooting
|
|
|
|
### Common Issues
|
|
|
|
1. **Wallet not connecting**: Ensure wallet extension is installed
|
|
2. **Transaction failing**: Check SOL balance for fees
|
|
3. **Game not loading**: Verify iframe source and CORS settings
|
|
4. **Build errors**: Check Node.js version compatibility
|
|
|
|
### Debug Mode
|
|
|
|
Enable debug logging in development:
|
|
|
|
```typescript
|
|
// Add to components for debugging
|
|
console.log('Wallet connected:', publicKey?.toString());
|
|
console.log('Transaction status:', transactionStatus);
|
|
```
|
|
|
|
## 📚 Resources
|
|
|
|
- [Solana Documentation](https://docs.solana.com/)
|
|
- [Wallet Adapter](https://github.com/solana-labs/wallet-adapter)
|
|
- [Web3.js](https://solana-labs.github.io/solana-web3.js/)
|
|
- [Tailwind CSS](https://tailwindcss.com/)
|
|
|
|
## 🤝 Contributing
|
|
|
|
1. Fork the repository
|
|
2. Create a feature branch
|
|
3. Make your changes
|
|
4. Submit a pull request
|
|
|
|
## 📄 License
|
|
|
|
This project is licensed under the MIT License - see the LICENSE file for details.
|
|
|
|
## 🆘 Support
|
|
|
|
For support and questions:
|
|
|
|
- Create an issue in the repository
|
|
- Contact the development team
|
|
- Check the documentation
|
|
|
|
---
|
|
|
|
**Happy Gaming! 🦖🎮**
|