David Kotnik
2112827c1d
✅ NEW SYSTEMS: - CropGrowthSeasonSystem.js (8 growth stages + 4 seasons) - Asset generation manifest (113 sprites defined) 📋 ALREADY IMPLEMENTED: - Bug Catching System (50+ bugs, 3 net tiers) ✅ - Tool System (6 tiers, durability, repair) ✅ - Time/Season System (automatic season changes) ✅ 📝 READY FOR GENERATION: - 24 bug sprites (Common to Legendary) - 63 tool sprites (10 types × 6 tiers + enchanted) - 6 Ivan NPC sprites - 8 Blacksmith building sprites - 6 Repair Bench & UI sprites - 3 missing crop sprites (pumpkin winter) - 3 item icons (wood, stone, bread) ⏰ Awaiting API quota reset: 01:19 CET 🎯 Next: Generate all 113 assets → Integration → Build complete
344 lines
10 KiB
HTML
344 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>🌾 Faza 1 Crop Catalog - NovaFarma</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
|
color: #eee;
|
|
padding: 20px;
|
|
}
|
|
|
|
.header {
|
|
text-align: center;
|
|
padding: 30px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 15px;
|
|
margin-bottom: 30px;
|
|
border: 2px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 3em;
|
|
margin-bottom: 10px;
|
|
background: linear-gradient(45deg, #4CAF50, #8BC34A);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.stats {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 30px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.stat-box {
|
|
background: rgba(76, 175, 80, 0.1);
|
|
padding: 15px 30px;
|
|
border-radius: 10px;
|
|
border: 2px solid rgba(76, 175, 80, 0.3);
|
|
}
|
|
|
|
.stat-box .number {
|
|
font-size: 2.5em;
|
|
font-weight: bold;
|
|
color: #4CAF50;
|
|
}
|
|
|
|
.stat-box .label {
|
|
font-size: 0.9em;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.filters {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 15px;
|
|
margin-bottom: 30px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.filter-btn {
|
|
padding: 10px 20px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border: 2px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: 25px;
|
|
color: #eee;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
font-size: 1em;
|
|
}
|
|
|
|
.filter-btn:hover {
|
|
background: rgba(76, 175, 80, 0.3);
|
|
border-color: #4CAF50;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.filter-btn.active {
|
|
background: #4CAF50;
|
|
border-color: #4CAF50;
|
|
color: white;
|
|
}
|
|
|
|
.crop-section {
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
.crop-header {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.crop-title {
|
|
font-size: 2em;
|
|
color: #4CAF50;
|
|
}
|
|
|
|
.progress-bar {
|
|
width: 300px;
|
|
height: 30px;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: 15px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #4CAF50, #8BC34A);
|
|
transition: width 0.5s;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.season-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.season-card {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 10px;
|
|
padding: 15px;
|
|
border: 2px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.season-card h3 {
|
|
margin-bottom: 15px;
|
|
text-align: center;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.season-card.spring h3 {
|
|
background: rgba(139, 195, 74, 0.2);
|
|
color: #8BC34A;
|
|
}
|
|
|
|
.season-card.summer h3 {
|
|
background: rgba(255, 193, 7, 0.2);
|
|
color: #FFC107;
|
|
}
|
|
|
|
.season-card.fall h3 {
|
|
background: rgba(255, 152, 0, 0.2);
|
|
color: #FF9800;
|
|
}
|
|
|
|
.season-card.winter h3 {
|
|
background: rgba(33, 150, 243, 0.2);
|
|
color: #2196F3;
|
|
}
|
|
|
|
.stage-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 10px;
|
|
}
|
|
|
|
.stage-box {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: 8px;
|
|
padding: 10px;
|
|
text-align: center;
|
|
border: 2px solid rgba(255, 255, 255, 0.1);
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.stage-box:hover {
|
|
transform: scale(1.05);
|
|
border-color: #4CAF50;
|
|
box-shadow: 0 0 20px rgba(76, 175, 80, 0.3);
|
|
}
|
|
|
|
.stage-box img {
|
|
width: 100%;
|
|
height: auto;
|
|
image-rendering: pixelated;
|
|
border-radius: 5px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
padding: 5px;
|
|
}
|
|
|
|
.stage-label {
|
|
margin-top: 5px;
|
|
font-size: 0.8em;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.missing {
|
|
opacity: 0.3;
|
|
border-color: rgba(255, 0, 0, 0.3);
|
|
}
|
|
|
|
.missing img {
|
|
filter: grayscale(100%);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="header">
|
|
<h1>🌾 Faza 1 Crop Catalog</h1>
|
|
<p>Phase 1 Asset Generation Progress - Style 32 (Dark-Chibi Noir)</p>
|
|
<div class="stats">
|
|
<div class="stat-box">
|
|
<div class="number" id="total-sprites">157</div>
|
|
<div class="label">Total Sprites</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="number" id="crops-complete">5/6</div>
|
|
<div class="label">Crops Complete</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="number">37.4%</div>
|
|
<div class="label">Phase 1 Progress</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="filters">
|
|
<button class="filter-btn active" onclick="filterSeason('all')">All Seasons</button>
|
|
<button class="filter-btn" onclick="filterSeason('spring')">🌸 Spring</button>
|
|
<button class="filter-btn" onclick="filterSeason('summer')">☀️ Summer</button>
|
|
<button class="filter-btn" onclick="filterSeason('fall')">🍂 Fall</button>
|
|
<button class="filter-btn" onclick="filterSeason('winter')">❄️ Winter</button>
|
|
</div>
|
|
|
|
<div id="crops-container"></div>
|
|
|
|
<script>
|
|
const CROPS = [
|
|
{ name: 'Corn (Koruza)', folder: 'corn', total: 32, generated: 32 },
|
|
{ name: 'Tomatoes (Paradižnik)', folder: 'tomatoes', total: 32, generated: 32 },
|
|
{ name: 'Carrots (Korenje)', folder: 'carrots', total: 32, generated: 32 },
|
|
{ name: 'Potatoes (Krompir)', folder: 'potatos', total: 32, generated: 32 },
|
|
{ name: 'Lettuce (Solata)', folder: 'lettuces', total: 32, generated: 32 },
|
|
{ name: 'Pumpkin (Buča)', folder: 'pumpkins', total: 32, generated: 29 }
|
|
];
|
|
|
|
const SEASONS = ['spring', 'summer', 'fall', 'winter'];
|
|
const STAGES = [1, 2, 3, 4, 5, 6, 7, 8];
|
|
|
|
let currentFilter = 'all';
|
|
|
|
function renderCrops() {
|
|
const container = document.getElementById('crops-container');
|
|
container.innerHTML = '';
|
|
|
|
CROPS.forEach(crop => {
|
|
const section = document.createElement('div');
|
|
section.className = 'crop-section';
|
|
|
|
const progress = Math.round((crop.generated / crop.total) * 100);
|
|
|
|
section.innerHTML = `
|
|
<div class="crop-header">
|
|
<div class="crop-title">${crop.name}</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: ${progress}%">
|
|
${crop.generated}/${crop.total} (${progress}%)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="season-grid" id="${crop.folder}-grid"></div>
|
|
`;
|
|
|
|
container.appendChild(section);
|
|
|
|
const grid = document.getElementById(`${crop.folder}-grid`);
|
|
|
|
SEASONS.forEach(season => {
|
|
if (currentFilter !== 'all' && currentFilter !== season) return;
|
|
|
|
const seasonCard = document.createElement('div');
|
|
seasonCard.className = `season-card ${season}`;
|
|
seasonCard.innerHTML = `
|
|
<h3>${season.charAt(0).toUpperCase() + season.slice(1)}</h3>
|
|
<div class="stage-grid" id="${crop.folder}-${season}-stages"></div>
|
|
`;
|
|
grid.appendChild(seasonCard);
|
|
|
|
const stageGrid = document.getElementById(`${crop.folder}-${season}-stages`);
|
|
|
|
STAGES.forEach(stage => {
|
|
const stageBox = document.createElement('div');
|
|
const imgPath = `../assets/crops/faza1/${crop.folder}/${season}/stage${stage}.png`;
|
|
|
|
// Check if this is a missing sprite (only pumpkin winter stages 2-8)
|
|
const isMissing = crop.folder === 'pumpkins' && season === 'winter' && stage > 1;
|
|
|
|
stageBox.className = `stage-box ${isMissing ? 'missing' : ''}`;
|
|
stageBox.innerHTML = `
|
|
<img src="${imgPath}" alt="${crop.name} ${season} stage ${stage}"
|
|
onerror="this.parentElement.classList.add('missing')">
|
|
<div class="stage-label">Stage ${stage}</div>
|
|
`;
|
|
|
|
stageGrid.appendChild(stageBox);
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
function filterSeason(season) {
|
|
currentFilter = season;
|
|
|
|
// Update button states
|
|
document.querySelectorAll('.filter-btn').forEach(btn => {
|
|
btn.classList.remove('active');
|
|
});
|
|
event.target.classList.add('active');
|
|
|
|
renderCrops();
|
|
}
|
|
|
|
// Initial render
|
|
renderCrops();
|
|
</script>
|
|
</body>
|
|
|
|
</html> |