Hugging Face's logo

Spaces:
didico97115
/
jeux-guadeloupe
Running

App Files Community
jeux-guadeloupe / index.html
didico97115's picture
didico97115
Add 2 files
19f65bc verified
raw
history blame contribute delete
62.1 kB
 <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Karukera Stratégie</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Pacifico&family=Caramel&display=swap');
:root {
--primary: #2C5E1A;
--secondary: #F9A825;
--accent: #8D6E63;
--dark: #1A120B;
--light: #F5F5DC;
--water: #3B82F6;
--food: #10B981;
--wood: #92400E;
--stone: #6B7280;
}
body {
font-family: 'Montserrat', sans-serif;
background-color: var(--light);
color: var(--dark);
overflow-x: hidden;
}
.title-font {
font-family: 'Caramel', cursive;
font-size: 2.5rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.creole-font {
font-family: 'Caramel', cursive;
}
.floating {
animation: floating 3s ease-in-out infinite;
}
@keyframes floating {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.bg-pattern {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgdmlld0JveD0iMCAwIDYwIDYwIj48cGF0aCBkPSJNMzAgMTVjLTguMjg0IDAtMTUgNi43MTYtMTUgMTVzNi43MTYgMTUgMTUgMTUgMTUtNi43MTYgMTUtMTUtNi43MTYtMTUtMTUtMTV6IiBmaWxsPSJub25lIiBzdHJva2U9IiNGRjlBMjVGIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=');
opacity: 0.1;
}
.village-bg {
background: linear-gradient(rgba(44, 94, 26, 0.7), rgba(44, 94, 26, 0.9)), url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIGhlaWdodD0iMTAwJSI+PHBhdGggZD0iTTAgMCBMIDEwMCAwIEwgMTAwIDEwMCBMIDAgMTAwIEwgMCAwIiBmaWxsPSIjMkM1RTFBIi8+PC9zdmc+');
background-size: cover;
background-position: center;
border-radius: 15px;
box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
}
.dialog-triangle {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 15px solid var(--secondary);
}
.progress-bar {
height: 10px;
background-color: #e0e0e0;
border-radius: 5px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background-color: var(--secondary);
transition: width 0.3s ease;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: var(--accent);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #6d4c41;
}
/* Animation for resources */
@keyframes resourceBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
.resource-bounce {
animation: resourceBounce 1.5s infinite;
}
/* Shake animation for notifications */
@keyframes shake {
0% { transform: translateX(0); }
25% { transform: translateX(-5px); }
50% { transform: translateX(5px); }
75% { transform: translateX(-5px); }
100% { transform: translateX(0); }
}
.shake {
animation: shake 0.5s;
}
/* Building pulse effect */
@keyframes buildingPulse {
0% { box-shadow: 0 0 0 0 rgba(249, 168, 37, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(249, 168, 37, 0); }
100% { box-shadow: 0 0 0 0 rgba(249, 168, 37, 0); }
}
.building-pulse {
animation: buildingPulse 2s infinite;
}
/* Wave animation for water */
@keyframes wave {
0% { transform: rotate(0deg); }
10% { transform: rotate(-1deg); }
20% { transform: rotate(2deg); }
30% { transform: rotate(-1deg); }
40% { transform: rotate(1deg); }
50% { transform: rotate(0deg); }
100% { transform: rotate(0deg); }
}
.wave {
animation: wave 8s ease-in-out infinite;
transform-origin: 50% 100%;
}
/* Tooltip */
.tooltip {
position: relative;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: var(--dark);
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s;
font-size: 12px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
/* Day/Night cycle */
.daytime {
background: linear-gradient(to bottom, #87CEEB, #E0F7FA);
}
.nighttime {
background: linear-gradient(to bottom, #0F2027, #203A43, #2C5364);
}
/* Construction animation */
@keyframes construct {
0% { opacity: 0; transform: scale(0.5); }
100% { opacity: 1; transform: scale(1); }
}
.construct-animation {
animation: construct 0.5s ease-out;
}
/* Resource gain animation */
@keyframes resourceGain {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
.resource-gain {
animation: resourceGain 0.5s;
}
/* Cloud animation */
@keyframes cloudMove {
0% { transform: translateX(-100px); }
100% { transform: translateX(calc(100vw + 100px)); }
}
.cloud {
animation: cloudMove 60s linear infinite;
opacity: 0.7;
}
</style>
</head>
<body class="bg-pattern">
<!-- Main Game Container -->
<div class="min-h-screen flex flex-col">
<!-- Clouds Background -->
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<div class="cloud absolute top-20" style="left: 10%; animation-delay: 0s;">
<i class="fas fa-cloud text-white text-4xl"></i>
</div>
<div class="cloud absolute top-40" style="left: 30%; animation-delay: 10s;">
<i class="fas fa-cloud text-white text-3xl"></i>
</div>
<div class="cloud absolute top-10" style="left: 60%; animation-delay: 20s;">
<i class="fas fa-cloud text-white text-5xl"></i>
</div>
</div>
<!-- Header -->
<header class="bg-gradient-to-r from-green-900 to-green-700 text-white shadow-lg relative z-10">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fas fa-leaf text-yellow-400 text-2xl"></i>
<h1 class="title-font text-2xl md:text-3xl">Karukera Stratégie</h1>
</div>
<div class="flex items-center space-x-4">
<div class="flex items-center bg-green-800 px-3 py-1 rounded-full">
<i class="fas fa-sun text-yellow-300 mr-2"></i>
<span class="text-sm">Jour <span id="day-count">1</span></span>
</div>
<button id="sound-toggle" class="bg-yellow-500 hover:bg-yellow-600 text-white rounded-full w-8 h-8 flex items-center justify-center transition tooltip">
<i class="fas fa-volume-up"></i>
<span class="tooltiptext">Activer/Désactiver le son</span>
</button>
<button id="menu-toggle" class="bg-green-800 hover:bg-green-900 text-white rounded-full w-8 h-8 flex items-center justify-center transition tooltip">
<i class="fas fa-bars"></i>
<span class="tooltiptext">Menu</span>
</button>
</div>
</div>
</header>
<!-- Game Content -->
<main class="flex-1 flex flex-col md:flex-row relative z-0">
<!-- Left Panel - Resources and Stats -->
<div class="w-full md:w-1/4 bg-green-800 text-white p-4 shadow-lg">
<div class="bg-green-900 rounded-lg p-4 mb-4">
<h2 class="text-xl font-bold mb-2 flex items-center">
<i class="fas fa-user-circle mr-2"></i> Chef Mayanou
</h2>
<div class="flex items-center mb-2">
<div class="w-3/4">
<div class="text-sm mb-1">Niveau: <span class="font-bold" id="level">1</span></div>
<div class="progress-bar">
<div class="progress-fill" id="level-progress" style="width: 25%;"></div>
</div>
</div>
<div class="w-1/4 text-right">
<span class="text-sm"><span id="level-current">25</span>/100</span>
</div>
</div>
<div class="flex justify-between text-sm">
<div>
<i class="fas fa-heart text-red-400 mr-1"></i> <span id="health">100</span>
</div>
<div>
<i class="fas fa-star text-yellow-400 mr-1"></i> <span id="prestige">5</span>
</div>
</div>
</div>
<div class="bg-green-900 rounded-lg p-4 mb-4">
<h2 class="text-xl font-bold mb-2 flex items-center">
<i class="fas fa-coins mr-2"></i> Ressources
</h2>
<div class="space-y-2">
<div class="flex justify-between items-center resource-bounce" id="food-resource">
<div class="flex items-center">
<i class="fas fa-seedling text-green-300 mr-2"></i>
<span>Nourriture</span>
</div>
<span class="font-bold" id="food-count">150</span>
</div>
<div class="flex justify-between items-center resource-bounce" id="water-resource">
<div class="flex items-center">
<i class="fas fa-tint text-blue-300 mr-2"></i>
<span>Eau</span>
</div>
<span class="font-bold" id="water-count">200</span>
</div>
<div class="flex justify-between items-center resource-bounce" id="wood-resource">
<div class="flex items-center">
<i class="fas fa-tree text-amber-300 mr-2"></i>
<span>Bois</span>
</div>
<span class="font-bold" id="wood-count">100</span>
</div>
<div class="flex justify-between items-center resource-bounce" id="stone-resource">
<div class="flex items-center">
<i class="fas fa-gem text-gray-300 mr-2"></i>
<span>Pierre</span>
</div>
<span class="font-bold" id="stone-count">50</span>
</div>
</div>
</div>
<div class="bg-green-900 rounded-lg p-4">
<h2 class="text-xl font-bold mb-2 flex items-center">
<i class="fas fa-tasks mr-2"></i> Objectifs
</h2>
<div class="space-y-3" id="quests">
<div class="flex items-start">
<input type="checkbox" class="mt-1 mr-2" checked>
<span class="text-sm line-through">Construire 3 cases</span>
</div>
<div class="flex items-start">
<input type="checkbox" class="mt-1 mr-2" checked>
<span class="text-sm line-through">Planter 5 champs</span>
</div>
<div class="flex items-start">
<input type="checkbox" class="mt-1 mr-2" id="well-quest">
<span class="text-sm">Construire un puits</span>
</div>
<div class="flex items-start">
<input type="checkbox" class="mt-1 mr-2" id="protect-quest">
<span class="text-sm">Protéger le village</span>
</div>
</div>
</div>
</div>
<!-- Center Panel - Game Area -->
<div class="flex-1 p-4 flex flex-col">
<!-- Level Info -->
<div class="bg-white rounded-lg shadow-md p-4 mb-4">
<div class="flex items-center justify-between mb-2">
<h2 class="text-2xl font-bold text-green-800 creole-font">Niveau 1 - La naissance du village</h2>
<div class="bg-yellow-500 text-white px-3 py-1 rounded-full text-sm font-bold">Débutant</div>
</div>
<p class="text-gray-700 mb-3 italic creole-font">
"Ti-Mayanou, écoute bien… Avant les villes et les routes, y avait les forêts et les esprits. Il te faut construire ton premier village, avec respect pour la terre…"
</p>
<div class="flex justify-between items-center text-sm text-gray-600">
<div>
<i class="fas fa-clock mr-1"></i> Temps: <span id="game-time">05:23</span>
</div>
<div>
<i class="fas fa-check-circle mr-1"></i> Progression: <span id="level-percent">50</span>%
</div>
</div>
</div>
<!-- Village Area -->
<div class="flex-1 village-bg rounded-lg shadow-lg p-4 relative overflow-hidden">
<!-- Sun/Moon -->
<div id="day-night-indicator" class="absolute top-4 right-4 text-yellow-300 text-3xl">
<i class="fas fa-sun"></i>
</div>
<!-- Buildings -->
<div class="absolute top-10 left-10 construct-animation">
<div class="bg-yellow-600 w-16 h-16 rounded-md flex items-center justify-center cursor-pointer hover:scale-110 transition transform tooltip building-pulse" id="house-1">
<i class="fas fa-home text-white text-2xl"></i>
<div class="absolute -bottom-2 -right-2 bg-green-700 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">1</div>
<span class="tooltiptext">Case familiale<br>Loge 2 villageois</span>
</div>
<div class="text-white text-xs mt-1 text-center">Case</div>
</div>
<div class="absolute top-10 right-20 construct-animation">
<div class="bg-yellow-600 w-16 h-16 rounded-md flex items-center justify-center cursor-pointer hover:scale-110 transition transform tooltip building-pulse" id="house-2">
<i class="fas fa-home text-white text-2xl"></i>
<div class="absolute -bottom-2 -right-2 bg-green-700 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">2</div>
<span class="tooltiptext">Case familiale<br>Loge 2 villageois</span>
</div>
<div class="text-white text-xs mt-1 text-center">Case</div>
</div>
<div class="absolute bottom-20 left-1/4 construct-animation">
<div class="bg-green-600 w-20 h-12 rounded-md flex items-center justify-center cursor-pointer hover:scale-110 transition transform tooltip building-pulse" id="field-1">
<i class="fas fa-tractor text-white text-xl"></i>
<div class="absolute -bottom-2 -right-2 bg-green-700 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">3</div>
<span class="tooltiptext">Champ de manioc<br>Produit 5 nourriture/jour</span>
</div>
<div class="text-white text-xs mt-1 text-center">Champ</div>
</div>
<div class="absolute bottom-20 right-1/4 construct-animation">
<div class="bg-green-600 w-20 h-12 rounded-md flex items-center justify-center cursor-pointer hover:scale-110 transition transform tooltip building-pulse" id="field-2">
<i class="fas fa-tractor text-white text-xl"></i>
<div class="absolute -bottom-2 -right-2 bg-green-700 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">4</div>
<span class="tooltiptext">Champ de patates douces<br>Produit 5 nourriture/jour</span>
</div>
<div class="text-white text-xs mt-1 text-center">Champ</div>
</div>
<!-- Construction Spots -->
<div class="absolute bottom-10 left-1/2 transform -translate-x-1/2">
<div class="bg-gray-200 bg-opacity-50 w-16 h-16 rounded-md border-2 border-dashed border-white flex items-center justify-center cursor-pointer hover:bg-opacity-70 transition tooltip" id="construction-spot">
<i class="fas fa-plus text-white text-xl"></i>
<span class="tooltiptext">Cliquez pour construire un nouveau bâtiment</span>
</div>
<div class="text-white text-xs mt-1 text-center">Nouveau bâtiment</div>
</div>
<!-- Water Spot -->
<div class="absolute top-1/2 left-1/4 wave">
<div class="bg-blue-300 bg-opacity-50 w-24 h-24 rounded-full flex items-center justify-center cursor-pointer tooltip" id="water-spot">
<i class="fas fa-tint text-blue-500 text-3xl"></i>
<span class="tooltiptext">Source d'eau<br>Collectez 20 eau</span>
</div>
</div>
<!-- Forest Spot -->
<div class="absolute top-1/3 right-1/4">
<div class="bg-green-800 bg-opacity-50 w-24 h-24 rounded-full flex items-center justify-center cursor-pointer tooltip" id="forest-spot">
<i class="fas fa-tree text-green-300 text-3xl"></i>
<span class="tooltiptext">Forêt<br>Coupez du bois</span>
</div>
</div>
<!-- Character -->
<div class="absolute bottom-5 right-10 floating">
<div class="relative">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCveD0iMCAwIDEwMCAxMDAiPjxjaXJjbGUgY3g9IjUwIiBjeT0iMzAiIHI9IjIwIiBmaWxsPSIjRDRCNjU5Ii8+PGNpcmNsZSBjeD0iNTAiIGN5PSI3MCIgcj0iNDAiIGZpbGw9IiNEOENBOTYiLz48Y2lyY2xlIGN4PSI0MCIgY3k9IjI1IiByPSI1IiBmaWxsPSIjNzk0NTEyIi8+PGNpcmNsZSBjeD0iNjAiIGN5PSIyNSIgcj0iNSIgZmlsbD0iIzc5NDUxMiIvPjxwYXRoIGQ9Ik00MCA0MGMwIDUgNSAxMCAxMCAxMHMxMC01IDEwLTEwIiBmaWxsPSJub25lIiBzdHJva2U9IiM3OTQ1MTIiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==" alt="Mayanou" class="w-16 h-16 cursor-pointer" id="character">
<div class="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center pulse" id="character-alert">!</div>
</div>
</div>
<!-- Dialog Bubble -->
<div class="absolute bottom-24 right-24 bg-yellow-500 text-white p-3 rounded-lg shadow-lg max-w-xs hidden" id="dialog-bubble">
<p class="text-sm" id="dialog-text">Nous avons besoin de plus d'eau! Construisons un puits.</p>
<div class="dialog-triangle absolute -bottom-3 right-5"></div>
</div>
</div>
</div>
<!-- Right Panel - Actions and Info -->
<div class="w-full md:w-1/4 bg-amber-100 p-4 shadow-lg">
<div class="bg-white rounded-lg p-4 mb-4 shadow">
<h2 class="text-xl font-bold mb-3 text-green-800 flex items-center">
<i class="fas fa-hammer mr-2"></i> Constructions
</h2>
<div class="grid grid-cols-2 gap-3">
<div class="bg-green-100 p-2 rounded-lg cursor-pointer hover:bg-green-200 transition text-center tooltip construct-btn" data-building="house" data-cost-wood="50">
<i class="fas fa-home text-green-700 text-2xl mb-1"></i>
<div class="text-xs font-bold text-green-800">Case</div>
<div class="text-xs text-gray-600">50 bois</div>
<span class="tooltiptext">Logement pour 2 villageois<br>Coût: 50 bois</span>
</div>
<div class="bg-green-100 p-2 rounded-lg cursor-pointer hover:bg-green-200 transition text-center tooltip construct-btn" data-building="field" data-cost-wood="30">
<i class="fas fa-tractor text-green-700 text-2xl mb-1"></i>
<div class="text-xs font-bold text-green-800">Champ</div>
<div class="text-xs text-gray-600">30 bois</div>
<span class="tooltiptext">Produit 5 nourriture/jour<br>Coût: 30 bois</span>
</div>
<div class="bg-green-100 p-2 rounded-lg cursor-pointer hover:bg-green-200 transition text-center tooltip construct-btn" data-building="well" data-cost-stone="20">
<i class="fas fa-tint text-blue-500 text-2xl mb-1"></i>
<div class="text-xs font-bold text-green-800">Puits</div>
<div class="text-xs text-gray-600">20 pierre</div>
<span class="tooltiptext">+20 eau/jour<br>Coût: 20 pierre</span>
</div>
<div class="bg-green-100 p-2 rounded-lg cursor-pointer hover:bg-green-200 transition text-center tooltip construct-btn" data-building="tower" data-cost-wood="80">
<i class="fas fa-shield-alt text-amber-700 text-2xl mb-1"></i>
<div class="text-xs font-bold text-green-800">Tour</div>
<div class="text-xs text-gray-600">80 bois</div>
<span class="tooltiptext">Protège le village<br>Coût: 80 bois</span>
</div>
</div>
</div>
<div class="bg-white rounded-lg p-4 mb-4 shadow">
<h2 class="text-xl font-bold mb-3 text-green-800 flex items-center">
<i class="fas fa-users mr-2"></i> Villageois
</h2>
<div class="space-y-2">
<div class="flex justify-between items-center">
<div class="flex items-center">
<i class="fas fa-male text-green-700 mr-2"></i>
<span class="text-sm">Travailleurs</span>
</div>
<span class="font-bold text-sm" id="workers-count">5/10</span>
</div>
<div class="flex justify-between items-center">
<div class="flex items-center">
<i class="fas fa-child text-amber-700 mr-2"></i>
<span class="text-sm">Enfants</span>
</div>
<span class="font-bold text-sm" id="children-count">3</span>
</div>
<div class="flex justify-between items-center">
<div class="flex items-center">
<i class="fas fa-female text-purple-700 mr-2"></i>
<span class="text-sm">Artisans</span>
</div>
<span class="font-bold text-sm" id="artisans-count">2/5</span>
</div>
</div>
<div class="mt-3 bg-blue-50 p-2 rounded-lg">
<div class="flex justify-between items-center text-sm">
<span>Disponibles:</span>
<span class="font-bold" id="available-villagers">3</span>
</div>
<button class="w-full bg-green-600 hover:bg-green-700 text-white py-1 rounded mt-2 text-sm transition" id="assign-workers">
Assigner aux ressources
</button>
</div>
</div>
<div class="bg-white rounded-lg p-4 shadow">
<h2 class="text-xl font-bold mb-3 text-green-800 flex items-center">
<i class="fas fa-book mr-2"></i> Connaissances
</h2>
<div class="space-y-3" id="knowledge-list">
<div class="flex items-center bg-amber-50 p-2 rounded-lg">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span class="text-sm">Agriculture basique</span>
</div>
<div class="flex items-center bg-amber-50 p-2 rounded-lg">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span class="text-sm">Construction de cases</span>
</div>
<div class="flex items-center bg-gray-100 p-2 rounded-lg opacity-70">
<i class="fas fa-lock text-gray-500 mr-2"></i>
<span class="text-sm">Techniques de pêche</span>
</div>
<div class="flex items-center bg-gray-100 p-2 rounded-lg opacity-70">
<i class="fas fa-lock text-gray-500 mr-2"></i>
<span class="text-sm">Médecine traditionnelle</span>
</div>
</div>
<button class="w-full bg-yellow-500 hover:bg-yellow-600 text-white py-2 rounded mt-3 text-sm transition flex items-center justify-center" id="learn-btn">
<i class="fas fa-graduation-cap mr-2"></i>
Apprendre (5 prestige)
</button>
</div>
</div>
</main>
<!-- Bottom Bar - Quick Actions -->
<footer class="bg-green-900 text-white p-2 shadow-lg relative z-10">
<div class="container mx-auto flex justify-around">
<button class="flex flex-col items-center text-xs p-2 hover:bg-green-800 rounded-lg transition active-nav" id="nav-village">
<i class="fas fa-home text-lg mb-1"></i>
<span>Village</span>
</button>
<button class="flex flex-col items-center text-xs p-2 hover:bg-green-800 rounded-lg transition" id="nav-quests">
<i class="fas fa-tasks text-lg mb-1"></i>
<span>Missions</span>
</button>
<button class="flex flex-col items-center text-xs p-2 hover:bg-green-800 rounded-lg transition" id="nav-map">
<i class="fas fa-map text-lg mb-1"></i>
<span>Carte</span>
</button>
<button class="flex flex-col items-center text-xs p-2 hover:bg-green-800 rounded-lg transition" id="nav-culture">
<i class="fas fa-book text-lg mb-1"></i>
<span>Culture</span>
</button>
<button class="flex flex-col items-center text-xs p-2 hover:bg-green-800 rounded-lg transition" id="nav-settings">
<i class="fas fa-cog text-lg mb-1"></i>
<span>Options</span>
</button>
</div>
</footer>
</div>
<!-- Construction Modal -->
<div id="construction-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-lg shadow-xl w-11/12 md:w-1/2 p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold text-green-800">Construire un nouveau bâtiment</h3>
<button id="close-modal" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4" id="building-options">
<div class="border rounded-lg p-4 hover:bg-green-50 cursor-pointer transition building-option" data-building="house">
<div class="flex justify-center mb-2">
<i class="fas fa-home text-3xl text-green-700"></i>
</div>
<h4 class="font-bold text-center text-green-800">Case</h4>
<p class="text-xs text-gray-600 text-center mb-2">Logement pour 2 villageois</p>
<div class="flex justify-between text-xs">
<span class="text-gray-600">Coût:</span>
<span class="font-bold">50 bois</span>
</div>
</div>
<div class="border rounded-lg p-4 hover:bg-green-50 cursor-pointer transition building-option" data-building="well">
<div class="flex justify-center mb-2">
<i class="fas fa-tint text-3xl text-blue-500"></i>
</div>
<h4 class="font-bold text-center text-green-800">Puits</h4>
<p class="text-xs text-gray-600 text-center mb-2">+20 eau/jour</p>
<div class="flex justify-between text-xs">
<span class="text-gray-600">Coût:</span>
<span class="font-bold">20 pierre</span>
</div>
</div>
<div class="border rounded-lg p-4 hover:bg-green-50 cursor-pointer transition building-option" data-building="field">
<div class="flex justify-center mb-2">
<i class="fas fa-tractor text-3xl text-green-600"></i>
</div>
<h4 class="font-bold text-center text-green-800">Champ</h4>
<p class="text-xs text-gray-600 text-center mb-2">+10 nourriture/jour</p>
<div class="flex justify-between text-xs">
<span class="text-gray-600">Coût:</span>
<span class="font-bold">30 bois</span>
</div>
</div>
</div>
<div class="flex justify-between items-center bg-yellow-50 p-3 rounded-lg mb-4 hidden" id="not-enough-resources">
<i class="fas fa-exclamation-triangle text-yellow-500 mr-2"></i>
<span class="text-sm" id="resource-error">Vous n'avez pas assez de ressources!</span>
</div>
<div class="flex justify-end">
<button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg transition mr-2" id="cancel-build">
Annuler
</button>
<button class="bg-green-700 hover:bg-green-800 text-white px-4 py-2 rounded-lg transition" id="confirm-build">
Construire
</button>
</div>
</div>
</div>
<!-- Notification -->
<div id="notification" class="fixed top-4 right-4 bg-green-600 text-white px-4 py-2 rounded-lg shadow-lg flex items-center hidden z-50">
<i class="fas fa-check-circle mr-2"></i>
<span id="notification-text">Nouvelle case construite avec succès!</span>
</div>
<!-- Resource Collection Popup -->
<div id="resource-popup" class="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white p-4 rounded-lg shadow-xl z-50 hidden">
<div class="flex justify-between items-center mb-3">
<h3 class="font-bold text-lg" id="resource-popup-title">Collecter de l'eau</h3>
<button id="close-resource-popup" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="flex items-center mb-4">
<i class="fas fa-tint text-blue-500 text-2xl mr-3"></i>
<div class="flex-1">
<div class="flex justify-between text-sm mb-1">
<span>Quantité disponible:</span>
<span class="font-bold" id="resource-amount">50</span>
</div>
<div class="progress-bar">
<div class="progress-fill" id="resource-progress" style="width: 100%;"></div>
</div>
</div>
</div>
<div class="flex justify-between mb-4">
<div>
<label class="text-sm">Villageois assignés:</label>
<div class="flex items-center mt-1">
<button class="bg-gray-200 hover:bg-gray-300 w-6 h-6 rounded flex items-center justify-center" id="decrease-workers">
<i class="fas fa-minus text-xs"></i>
</button>
<span class="mx-2 font-bold" id="assigned-workers">1</span>
<button class="bg-gray-200 hover:bg-gray-300 w-6 h-6 rounded flex items-center justify-center" id="increase-workers">
<i class="fas fa-plus text-xs"></i>
</button>
</div>
</div>
<div>
<label class="text-sm">Taux de collecte:</label>
<div class="text-right font-bold" id="collection-rate">5/jour</div>
</div>
</div>
<button class="w-full bg-green-600 hover:bg-green-700 text-white py-2 rounded transition" id="collect-resource">
<i class="fas fa-play mr-1"></i> Commencer la collecte
</button>
</div>
<!-- Culture Modal -->
<div id="culture-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-lg shadow-xl w-11/12 md:w-2/3 p-6 max-h-screen overflow-y-auto">
<div class="flex justify-between items-center mb-4">
<h3 class="text-2xl font-bold text-green-800 creole-font">Culture Gwadloupéenne</h3>
<button id="close-culture-modal" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-amber-50 p-4 rounded-lg">
<div class="flex justify-center mb-3">
<i class="fas fa-music text-3xl text-green-700"></i>
</div>
<h4 class="font-bold text-center text-green-800 mb-2">Musique et Danse</h4>
<p class="text-sm text-gray-700">
Le Gwoka est la musique traditionnelle de la Guadeloupe, accompagnée de danses énergiques et de chants créoles.
</p>
</div>
<div class="bg-amber-50 p-4 rounded-lg">
<div class="flex justify-center mb-3">
<i class="fas fa-utensils text-3xl text-green-700"></i>
</div>
<h4 class="font-bold text-center text-green-800 mb-2">Cuisine</h4>
<p class="text-sm text-gray-700">
La cuisine créole est un mélange de saveurs avec des plats comme le colombo, le bokit et les accras de morue.
</p>
</div>
<div class="bg-amber-50 p-4 rounded-lg">
<div class="flex justify-center mb-3">
<i class="fas fa-book-open text-3xl text-green-700"></i>
</div>
<h4 class="font-bold text-center text-green-800 mb-2">Contes et Légendes</h4>
<p class="text-sm text-gray-700">
Les contes traditionnels comme Ti-Jean et la diablesse font partie du patrimoine oral de la Guadeloupe.
</p>
</div>
</div>
<div class="mt-6 bg-green-50 p-4 rounded-lg">
<h4 class="font-bold text-green-800 mb-2">Savoir-faire traditionnel</h4>
<p class="text-sm text-gray-700">
Les artisans guadeloupéens perpétuent des techniques ancestrales comme la vannerie, la poterie et la construction de cases créoles.
</p>
</div>
</div>
</div>
<script>
// Game State
const gameState = {
resources: {
food: 150,
water: 200,
wood: 100,
stone: 50
},
villagers: {
workers: 5,
children: 3,
artisans: 2,
available: 3
},
buildings: {
houses: 2,
fields: 2,
wells: 0,
towers: 0
},
level: 1,
levelProgress: 25,
day: 1,
time: '05:23',
prestige: 5,
health: 100,
selectedBuilding: null,
currentResource: null,
assignedWorkers: 1
};
// Costs
const buildingCosts = {
house: { wood: 50 },
field: { wood: 30 },
well: { stone: 20 },
tower: { wood: 80 }
};
// Production rates
const productionRates = {
field: { food: 5 },
well: { water: 20 },
worker: {
water: 5,
wood: 3,
stone: 2
}
};
// Quests
const quests = {
buildHouses: { completed: true, target: 3 },
buildFields: { completed: true, target: 5 },
buildWell: { completed: false, target: 1 },
protectVillage: { completed: false, target: 1 }
};
// Knowledge
const knowledge = [
{ name: "Agriculture basique", learned: true },
{ name: "Construction de cases", learned: true },
{ name: "Techniques de pêche", learned: false },
{ name: "Médecine traditionnelle", learned: false }
];
// Dialogues
const dialogues = [
"Nous avons besoin de plus d'eau! Construisons un puits.",
"Les anciens parlent d'une source sacrée dans la montagne...",
"La saison des pluies approche, préparons-nous!",
"Un nouveau villageois est né aujourd'hui!",
"Les champs produisent bien cette saison."
];
// Initialize game
function initGame() {
updateResourceDisplays();
updateVillagerDisplays();
updateBuildingDisplays();
updateQuestDisplays();
startDayNightCycle();
// Initial dialogue
setTimeout(() => {
showNotification("Bienvenue dans Karukera Stratégie!");
showDialogue(dialogues[0]);
}, 1000);
}
// Update resource displays
function updateResourceDisplays() {
document.getElementById('food-count').textContent = gameState.resources.food;
document.getElementById('water-count').textContent = gameState.resources.water;
document.getElementById('wood-count').textContent = gameState.resources.wood;
document.getElementById('stone-count').textContent = gameState.resources.stone;
document.getElementById('prestige').textContent = gameState.prestige;
document.getElementById('health').textContent = gameState.health;
}
// Update villager displays
function updateVillagerDisplays() {
document.getElementById('workers-count').textContent = `${gameState.villagers.workers}/10`;
document.getElementById('children-count').textContent = gameState.villagers.children;
document.getElementById('artisans-count').textContent = `${gameState.villagers.artisans}/5`;
document.getElementById('available-villagers').textContent = gameState.villagers.available;
}
// Update building displays
function updateBuildingDisplays() {
document.getElementById('level').textContent = gameState.level;
document.getElementById('level-current').textContent = gameState.levelProgress;
document.getElementById('level-progress').style.width = `${gameState.levelProgress}%`;
}
// Update quest displays
function updateQuestDisplays() {
document.getElementById('well-quest').checked = quests.buildWell.completed;
document.getElementById('protect-quest').checked = quests.protectVillage.completed;
}
// Show notification
function showNotification(message) {
const notification = document.getElementById('notification');
document.getElementById('notification-text').textContent = message;
notification.classList.remove('hidden');
notification.classList.add('shake');
setTimeout(() => {
notification.classList.add('hidden');
}, 3000);
}
// Show dialogue
function showDialogue(text) {
const dialog = document.getElementById('dialog-bubble');
document.getElementById('dialog-text').textContent = text;
dialog.classList.remove('hidden');
setTimeout(() => {
dialog.classList.add('hidden');
}, 5000);
}
// Day/Night cycle
function startDayNightCycle() {
let isDay = true;
const dayNightIndicator = document.getElementById('day-night-indicator');
setInterval(() => {
isDay = !isDay;
if (isDay) {
dayNightIndicator.innerHTML = '<i class="fas fa-sun"></i>';
dayNightIndicator.className = 'absolute top-4 right-4 text-yellow-300 text-3xl';
gameState.day++;
document.getElementById('day-count').textContent = gameState.day;
// Daily production
gameState.resources.food += gameState.buildings.fields * productionRates.field.food;
gameState.resources.water += gameState.buildings.wells * productionRates.well.water;
// Random events
if (Math.random() < 0.3) {
const randomDialogue = dialogues[Math.floor(Math.random() * dialogues.length)];
showDialogue(randomDialogue);
}
updateResourceDisplays();
resourceGainEffect();
} else {
dayNightIndicator.innerHTML = '<i class="fas fa-moon"></i>';
dayNightIndicator.className = 'absolute top-4 right-4 text-blue-300 text-3xl';
}
}, 30000); // Change every 30 seconds for demo purposes
}
// Resource gain effect
function resourceGainEffect() {
const resources = ['food', 'water', 'wood', 'stone'];
resources.forEach(resource => {
if (gameState.resources[resource] > parseInt(document.getElementById(`${resource}-count`).textContent)) {
const element = document.getElementById(`${resource}-resource`);
element.classList.add('resource-gain');
setTimeout(() => {
element.classList.remove('resource-gain');
}, 500);
}
});
}
// Construction functions
function openConstructionModal() {
document.getElementById('construction-modal').classList.remove('hidden');
}
function closeConstructionModal() {
document.getElementById('construction-modal').classList.add('hidden');
gameState.selectedBuilding = null;
document.getElementById('not-enough-resources').classList.add('hidden');
}
function selectBuilding(building) {
gameState.selectedBuilding = building;
document.querySelectorAll('.building-option').forEach(option => {
option.classList.remove('border-green-500', 'bg-green-50');
});
event.currentTarget.classList.add('border-green-500', 'bg-green-50');
// Check if player has enough resources
const costs = buildingCosts[building];
let hasEnoughResources = true;
for (const resource in costs) {
if (gameState.resources[resource] < costs[resource]) {
hasEnoughResources = false;
break;
}
}
if (hasEnoughResources) {
document.getElementById('not-enough-resources').classList.add('hidden');
document.getElementById('confirm-build').classList.remove('bg-gray-300');
document.getElementById('confirm-build').classList.add('bg-green-700', 'hover:bg-green-800');
} else {
document.getElementById('resource-error').textContent = `Vous n'avez pas assez de ${getResourceName(Object.keys(costs)[0])}!`;
document.getElementById('not-enough-resources').classList.remove('hidden');
document.getElementById('confirm-build').classList.add('bg-gray-300');
document.getElementById('confirm-build').classList.remove('bg-green-700', 'hover:bg-green-800');
}
}
function getResourceName(resource) {
const names = {
'food': 'nourriture',
'water': 'eau',
'wood': 'bois',
'stone': 'pierre'
};
return names[resource] || resource;
}
function constructBuilding() {
if (!gameState.selectedBuilding) return;
const building = gameState.selectedBuilding;
const costs = buildingCosts[building];
// Deduct resources
for (const resource in costs) {
gameState.resources[resource] -= costs[resource];
}
// Add building
gameState.buildings[`${building}s`]++;
// Update quests if needed
if (building === 'well' && !quests.buildWell.completed) {
quests.buildWell.completed = true;
gameState.levelProgress += 25;
showNotification("Objectif accompli: Puits construit!");
}
// Random new position for demo
const constructionSpot = document.getElementById('construction-spot');
const randomLeft = 10 + Math.random() * 70;
const randomTop = 10 + Math.random() * 70;
constructionSpot.parentElement.style.left = `${randomLeft}%`;
constructionSpot.parentElement.style.top = `${randomTop}%`;
// Show new building (simplified for demo)
const buildingTypes = {
'house': { icon: 'home', class: 'bg-yellow-600', name: 'Case' },
'field': { icon: 'tractor', class: 'bg-green-600', name: 'Champ' },
'well': { icon: 'tint', class: 'bg-blue-500', name: 'Puits' },
'tower': { icon: 'shield-alt', class: 'bg-amber-700', name: 'Tour' }
};
const newBuilding = document.createElement('div');
newBuilding.className = 'absolute construct-animation';
newBuilding.style.left = `${randomLeft}%`;
newBuilding.style.top = `${randomTop}%`;
newBuilding.innerHTML = `
<div class="${buildingTypes[building].class} w-16 h-16 rounded-md flex items-center justify-center cursor-pointer hover:scale-110 transition transform tooltip building-pulse">
<i class="fas fa-${buildingTypes[building].icon} text-white text-2xl"></i>
<span class="tooltiptext">${buildingTypes[building].name} construite</span>
</div>
<div class="text-white text-xs mt-1 text-center">${buildingTypes[building].name}</div>
`;
document.querySelector('.village-bg').appendChild(newBuilding);
// Update displays
updateResourceDisplays();
updateBuildingDisplays();
updateQuestDisplays();
showNotification(`${buildingTypes[building].name} construite avec succès!`);
closeConstructionModal();
}
// Resource collection
function openResourcePopup(resource) {
gameState.currentResource = resource;
document.getElementById('resource-popup').classList.remove('hidden');
const resourceNames = {
'water': { title: 'Collecter de l\'eau', icon: 'tint', color: 'blue' },
'wood': { title: 'Couper du bois', icon: 'tree', color: 'green' },
'stone': { title: 'Extraire de la pierre', icon: 'gem', color: 'gray' }
};
document.getElementById('resource-popup-title').textContent = resourceNames[resource].title;
document.getElementById('resource-amount').textContent = Math.floor(Math.random() * 50) + 50;
document.getElementById('assigned-workers').textContent = 1;
gameState.assignedWorkers = 1;
// Update icon
const icon = document.querySelector('#resource-popup i');
icon.className = `fas fa-${resourceNames[resource].icon} text-${resourceNames[resource].color}-500 text-2xl mr-3`;
}
function closeResourcePopup() {
document.getElementById('resource-popup').classList.add('hidden');
}
function assignWorker(change) {
const newCount = gameState.assignedWorkers + change;
if (newCount > 0 && newCount <= gameState.villagers.available) {
gameState.assignedWorkers = newCount;
document.getElementById('assigned-workers').textContent = newCount;
document.getElementById('collection-rate').textContent =
`${newCount * productionRates.worker[gameState.currentResource]}/jour`;
}
}
function collectResource() {
const amount = parseInt(document.getElementById('resource-amount').textContent);
const rate = gameState.assignedWorkers * productionRates.worker[gameState.currentResource];
gameState.resources[gameState.currentResource] += amount;
gameState.villagers.available -= gameState.assignedWorkers;
showNotification(`+${amount} ${getResourceName(gameState.currentResource)} collectés!`);
updateResourceDisplays();
updateVillagerDisplays();
closeResourcePopup();
// Randomly free up workers after some time
setTimeout(() => {
gameState.villagers.available += gameState.assignedWorkers;
updateVillagerDisplays();
showNotification(`${gameState.assignedWorkers} travailleurs sont de retour au village.`);
}, 10000);
}
// Learn knowledge
function learnKnowledge() {
if (gameState.prestige < 5) {
showNotification("Pas assez de prestige pour apprendre!");
return;
}
const availableKnowledge = knowledge.filter(k => !k.learned);
if (availableKnowledge.length === 0) {
showNotification("Vous avez tout appris!");
return;
}
gameState.prestige -= 5;
const randomIndex = Math.floor(Math.random() * availableKnowledge.length);
availableKnowledge[randomIndex].learned = true;
updateResourceDisplays();
renderKnowledge();
showNotification(`Nouvelle connaissance: ${availableKnowledge[randomIndex].name}`);
}
function renderKnowledge() {
const knowledgeList = document.getElementById('knowledge-list');
knowledgeList.innerHTML = '';
knowledge.forEach(k => {
const item = document.createElement('div');
item.className = `flex items-center p-2 rounded-lg ${k.learned ? 'bg-amber-50' : 'bg-gray-100 opacity-70'}`;
item.innerHTML = `
<i class="fas fa-${k.learned ? 'check-circle text-green-500' : 'lock text-gray-500'} mr-2"></i>
<span class="text-sm">${k.name}</span>
`;
knowledgeList.appendChild(item);
});
}
// Event listeners
document.addEventListener('DOMContentLoaded', initGame);
// Sound toggle
document.getElementById('sound-toggle').addEventListener('click', function() {
const icon = this.querySelector('i');
if (icon.classList.contains('fa-volume-up')) {
icon.classList.remove('fa-volume-up');
icon.classList.add('fa-volume-mute');
showNotification("Son désactivé");
} else {
icon.classList.remove('fa-volume-mute');
icon.classList.add('fa-volume-up');
showNotification("Son activé");
}
});
// Construction
document.getElementById('construction-spot').addEventListener('click', openConstructionModal);
document.getElementById('close-modal').addEventListener('click', closeConstructionModal);
document.getElementById('cancel-build').addEventListener('click', closeConstructionModal);
document.getElementById('confirm-build').addEventListener('click', constructBuilding);
document.querySelectorAll('.building-option').forEach(option => {
option.addEventListener('click', function() {
selectBuilding(this.dataset.building);
});
});
document.querySelectorAll('.construct-btn').forEach(btn => {
btn.addEventListener('click', function() {
openConstructionModal();
selectBuilding(this.dataset.building);
});
});
// Resource collection
document.getElementById('water-spot').addEventListener('click', () => openResourcePopup('water'));
document.getElementById('forest-spot').addEventListener('click', () => openResourcePopup('wood'));
document.getElementById('close-resource-popup').addEventListener('click', closeResourcePopup);
document.getElementById('increase-workers').addEventListener('click', () => assignWorker(1));
document.getElementById('decrease-workers').addEventListener('click', () => assignWorker(-1));
document.getElementById('collect-resource').addEventListener('click', collectResource);
// Character interaction
document.getElementById('character').addEventListener('click', function() {
const randomDialogue = dialogues[Math.floor(Math.random() * dialogues.length)];
showDialogue(randomDialogue);
});
// Assign workers
document.getElementById('assign-workers').addEventListener('click', function() {
if (gameState.villagers.available > 0) {
gameState.villagers.workers += gameState.villagers.available;
gameState.villagers.available = 0;
updateVillagerDisplays();
showNotification("Travailleurs assignés aux ressources!");
} else {
showNotification("Aucun villageois disponible!");
}
});
// Learn knowledge
document.getElementById('learn-btn').addEventListener('click', learnKnowledge);
// Navigation
document.getElementById('nav-culture').addEventListener('click', function() {
document.getElementById('culture-modal').classList.remove('hidden');
});
document.getElementById('close-culture-modal').addEventListener('click', function() {
document.getElementById('culture-modal').classList.add('hidden');
});
// Update active nav
document.querySelectorAll('[id^="nav-"]').forEach(nav => {
nav.addEventListener('click', function() {
document.querySelectorAll('[id^="nav-"]').forEach(n => {
n.classList.remove('active-nav');
n.classList.add('bg-green-900');
});
this.classList.add('active-nav');
this.classList.remove('bg-green-900');
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=didico97115/jeux-guadeloupe" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>