Untitled
unknown
plain_text
9 months ago
19 kB
11
Indexable
I'll redesign the layout to show the rarity information and collection on the side!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fishing Game</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(to bottom, #87CEEB 0%, #4682B4 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
overflow-x: hidden;
}
.main-container {
display: flex;
gap: 20px;
max-width: 1400px;
width: 100%;
align-items: flex-start;
}
.game-container {
background: rgba(255, 255, 255, 0.9);
border-radius: 20px;
padding: 30px;
box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
flex: 1;
min-width: 400px;
}
.sidebar {
background: rgba(255, 255, 255, 0.9);
border-radius: 20px;
padding: 25px;
box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
width: 350px;
max-height: 90vh;
overflow-y: auto;
}
h1 {
text-align: center;
color: #2c3e50;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
h2 {
color: #2c3e50;
margin-bottom: 15px;
font-size: 24px;
border-bottom: 3px solid #3498db;
padding-bottom: 10px;
}
.stats {
display: flex;
justify-content: space-around;
margin-bottom: 20px;
padding: 15px;
background: #ecf0f1;
border-radius: 10px;
}
.stat {
text-align: center;
}
.stat-label {
font-size: 14px;
color: #7f8c8d;
margin-bottom: 5px;
}
.stat-value {
font-size: 24px;
font-weight: bold;
color: #2c3e50;
}
.fishing-area {
background: linear-gradient(to bottom, #4682B4 0%, #1e3a5f 100%);
height: 250px;
border-radius: 15px;
position: relative;
margin-bottom: 20px;
overflow: hidden;
box-shadow: inset 0 5px 20px rgba(0, 0, 0, 0.3);
}
.waves {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.3;
}
.wave {
position: absolute;
width: 200%;
height: 100%;
background: repeating-linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.3) 25%,
transparent 50%
);
animation: wave 3s linear infinite;
}
@keyframes wave {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.fishing-line {
position: absolute;
left: 50%;
top: -10px;
width: 3px;
background: #34495e;
transform: translateX(-50%);
transform-origin: top;
transition: height 0.5s ease;
display: none;
}
.fishing-line.casting {
display: block;
height: 180px;
animation: cast 0.5s ease;
}
@keyframes cast {
0% { height: 0; }
100% { height: 180px; }
}
.hook {
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 10px;
height: 10px;
background: #e74c3c;
border-radius: 50%;
}
.cast-button {
width: 100%;
padding: 20px;
font-size: 20px;
font-weight: bold;
background: linear-gradient(to bottom, #3498db, #2980b9);
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
}
.cast-button:hover {
background: linear-gradient(to bottom, #2980b9, #21618c);
transform: translateY(-2px);
box-shadow: 0 7px 20px rgba(52, 152, 219, 0.6);
}
.cast-button:active {
transform: translateY(0);
}
.cast-button:disabled {
background: #95a5a6;
cursor: not-allowed;
transform: none;
}
.catch-display {
margin-top: 20px;
padding: 20px;
background: #fff;
border-radius: 10px;
min-height: 120px;
border: 3px solid #ecf0f1;
}
.catch-item {
padding: 15px;
border-radius: 8px;
font-size: 18px;
text-align: center;
animation: slideIn 0.5s ease;
}
@keyframes slideIn {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.rarity-common {
background: #bdc3c7;
color: #2c3e50;
}
.rarity-uncommon {
background: #2ecc71;
color: white;
}
.rarity-rare {
background: #3498db;
color: white;
}
.rarity-epic {
background: #9b59b6;
color: white;
}
.rarity-legendary {
background: #f39c12;
color: white;
box-shadow: 0 0 20px rgba(243, 156, 18, 0.6);
}
.rarity-mythic {
background: linear-gradient(45deg, #e74c3c, #c0392b, #e74c3c);
color: white;
box-shadow: 0 0 30px rgba(231, 76, 60, 0.8);
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
/* Sidebar Styles */
.rarity-info {
margin-bottom: 25px;
}
.rarity-item {
padding: 12px;
margin: 8px 0;
border-radius: 8px;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: bold;
transition: transform 0.2s;
}
.rarity-item:hover {
transform: translateX(5px);
}
.rarity-name {
font-size: 16px;
}
.rarity-chance {
font-size: 14px;
opacity: 0.9;
}
.collection {
margin-top: 25px;
}
.collection h2 {
margin-bottom: 15px;
}
.collection-item {
padding: 10px;
margin: 8px 0;
background: white;
border-radius: 8px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
border-left: 4px solid #3498db;
transition: transform 0.2s;
}
.collection-item:hover {
transform: translateX(5px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.collection-fish-name {
display: flex;
align-items: center;
gap: 8px;
}
.collection-fish-emoji {
font-size: 20px;
}
.collection-count {
font-weight: bold;
color: #3498db;
font-size: 16px;
}
.empty-collection {
text-align: center;
color: #7f8c8d;
padding: 20px;
font-style: italic;
}
/* Scrollbar Styling */
.sidebar::-webkit-scrollbar {
width: 8px;
}
.sidebar::-webkit-scrollbar-track {
background: #ecf0f1;
border-radius: 10px;
}
.sidebar::-webkit-scrollbar-thumb {
background: #3498db;
border-radius: 10px;
}
.sidebar::-webkit-scrollbar-thumb:hover {
background: #2980b9;
}
/* Responsive Design */
@media (max-width: 1024px) {
.main-container {
flex-direction: column;
align-items: center;
}
.sidebar {
width: 100%;
max-width: 600px;
max-height: 500px;
}
.game-container {
min-width: unset;
width: 100%;
max-width: 600px;
}
}
</style>
</head>
<body>
<div class="main-container">
<div class="game-container">
<h1>🎣 Legendary Fishing 🎣</h1>
<div class="stats">
<div class="stat">
<div class="stat-label">Casts</div>
<div class="stat-value" id="casts">0</div>
</div>
<div class="stat">
<div class="stat-label">Total Caught</div>
<div class="stat-value" id="totalCaught">0</div>
</div>
<div class="stat">
<div class="stat-label">Best Catch</div>
<div class="stat-value" id="bestCatch">None</div>
</div>
</div>
<div class="fishing-area">
<div class="waves">
<div class="wave"></div>
</div>
<div class="fishing-line" id="fishingLine">
<div class="hook"></div>
</div>
</div>
<button class="cast-button" id="castButton">Cast Your Line!</button>
<div class="catch-display" id="catchDisplay">
<p style="text-align: center; color: #7f8c8d;">Click the button to cast your line!</p>
</div>
</div>
<div class="sidebar">
<div class="rarity-info">
<h2>🎯 Rarity Chances</h2>
<div class="rarity-item rarity-common">
<span class="rarity-name">Common</span>
<span class="rarity-chance">50%</span>
</div>
<div class="rarity-item rarity-uncommon">
<span class="rarity-name">Uncommon</span>
<span class="rarity-chance">25%</span>
</div>
<div class="rarity-item rarity-rare">
<span class="rarity-name">Rare</span>
<span class="rarity-chance">15%</span>
</div>
<div class="rarity-item rarity-epic">
<span class="rarity-name">Epic</span>
<span class="rarity-chance">7%</span>
</div>
<div class="rarity-item rarity-legendary">
<span class="rarity-name">Legendary</span>
<span class="rarity-chance">2.5%</span>
</div>
<div class="rarity-item rarity-mythic">
<span class="rarity-name">Mythic</span>
<span class="rarity-chance">0.5%</span>
</div>
</div>
<div class="collection">
<h2>📦 Your Collection</h2>
<div id="collectionList">
<div class="empty-collection">No fish caught yet. Start casting!</div>
</div>
</div>
</div>
</div>
<script>
const fishDatabase = {
common: [
{ name: "Tiny Minnow", emoji: "🐟" },
{ name: "Old Boot", emoji: "👢" },
{ name: "Seaweed", emoji: "🌿" },
{ name: "Small Perch", emoji: "🐟" },
{ name: "Rusty Can", emoji: "🥫" }
],
uncommon: [
{ name: "Bass", emoji: "🐠" },
{ name: "Trout", emoji: "🐟" },
{ name: "Catfish", emoji: "🐱" },
{ name: "Carp", emoji: "🐟" }
],
rare: [
{ name: "Salmon", emoji: "🐟" },
{ name: "Tuna", emoji: "🐟" },
{ name: "Pike", emoji: "🐊" },
{ name: "Swordfish", emoji: "🗡️" }
],
epic: [
{ name: "Shark", emoji: "🦈" },
{ name: "Octopus", emoji: "🐙" },
{ name: "Giant Squid", emoji: "🦑" },
{ name: "Marlin", emoji: "🐟" }
],
legendary: [
{ name: "Golden Fish", emoji: "⭐" },
{ name: "Dragon Fish", emoji: "🐲" },
{ name: "Ancient Whale", emoji: "🐋" },
{ name: "Mermaid's Treasure", emoji: "💎" }
],
mythic: [
{ name: "Kraken", emoji: "🐙👑" },
{ name: "Leviathan", emoji: "🌊🐉" },
{ name: "Poseidon's Trident", emoji: "🔱" },
{ name: "Sea God's Blessing", emoji: "✨🌊" }
]
};
const rarityChances = {
common: 50,
uncommon: 25,
rare: 15,
epic: 7,
legendary: 2.5,
mythic: 0.5
};
const rarityOrder = ['common', 'uncommon', 'rare', 'epic', 'legendary', 'mythic'];
let casts = 0;
let totalCaught = 0;
let bestCatchRarity = -1;
let collection = {};
const castButton = document.getElementById('castButton');
const fishingLine = document.getElementById('fishingLine');
const catchDisplay = document.getElementById('catchDisplay');
const castsDisplay = document.getElementById('casts');
const totalCaughtDisplay = document.getElementById('totalCaught');
const bestCatchDisplay = document.getElementById('bestCatch');
const collectionList = document.getElementById('collectionList');
function getRarity() {
const roll = Math.random() * 100;
let cumulative = 0;
for (const [rarity, chance] of Object.entries(rarityChances)) {
cumulative += chance;
if (roll <= cumulative) {
return rarity;
}
}
return 'common';
}
function getFish(rarity) {
const fishArray = fishDatabase[rarity];
return fishArray[Math.floor(Math.random() * fishArray.length)];
}
function updateCollection(fish, rarity) {
const key = `${rarity}-${fish.name}`;
if (!collection[key]) {
collection[key] = {
fish: fish,
rarity: rarity,
count: 0
};
}
collection[key].count++;
updateCollectionDisplay();
}
function updateCollectionDisplay() {
const sorted = Object.values(collection).sort((a, b) => {
const rarityDiff = rarityOrder.indexOf(b.rarity) - rarityOrder.indexOf(a.rarity);
if (rarityDiff !== 0) return rarityDiff;
return b.count - a.count;
});
if (sorted.length === 0) {
collectionList.innerHTML = '<div class="empty-collection">No fish caught yet. Start casting!</div>';
return;
}
collectionList.innerHTML = sorted.map(item => `
<div class="collection-item">
<div class="collection-fish-name">
<span class="collection-fish-emoji">${item.fish.emoji}</span>
<div>
<div style="font-weight: bold;">${item.fish.name}</div>
<div style="font-size: 11px; color: #7f8c8d; text-transform: uppercase;">${item.rarity}</div>
</div>
</div>
<span class="collection-count">×${item.count}</span>
</div>
`).join('');
}
function castLine() {
castButton.disabled = true;
fishingLine.classList.add('casting');
casts++;
castsDisplay.textContent = casts;
setTimeout(() => {
const rarity = getRarity();
const fish = getFish(rarity);
totalCaught++;
totalCaughtDisplay.textContent = totalCaught;
const rarityIndex = rarityOrder.indexOf(rarity);
if (rarityIndex > bestCatchRarity) {
bestCatchRarity = rarityIndex;
bestCatchDisplay.textContent = rarity.charAt(0).toUpperCase() + rarity.slice(1);
}
updateCollection(fish, rarity);
catchDisplay.innerHTML = `
<div class="catch-item rarity-${rarity}">
<div style="font-size: 50px; margin-bottom: 10px;">${fish.emoji}</div>
<div style="font-weight: bold; font-size: 22px;">${fish.name}</div>
<div style="font-size: 16px; margin-top: 8px; letter-spacing: 2px;">${rarity.toUpperCase()}</div>
</div>
`;
fishingLine.classList.remove('casting');
castButton.disabled = false;
}, 1500);
}
castButton.addEventListener('click', castLine);
</script>
</body>
</html>
Perfect! I've redesigned the game with a **sidebar layout**. Here's what's new:
**New Layout:**
• 🎮 **Main game area** on the left with the fishing spot and your latest catch
• 📊 **Sidebar on the right** showing:
- **Rarity Chances** - All 6 rarity tiers with their percentages, color-coded
- **Your Collection** - Scrollable list of all fish you've caught with counts
**Sidebar Features:**
• Color-coded rarity display matching the fish colors
• Real-time collection updates
• Sorted by rarity (rarest first) then by count
• Shows emoji, fish name, rarity tier, and count
• Smooth scrolling when your collection gets large
• Hover effects for better interactivity
**Responsive:**
• On smaller screens, the sidebar moves below the game area
• Works great on both desktop and mobile
The rarity information is now always visible, so you can see exactly how rare each fish is as you catch them! 🎣✨Editor is loading...
Leave a Comment