Spaces:

Alex59000
/

tamacodechi

Running

App Files Files Community

Alex59000 commited on Apr 8, 2025

Commit

2c868fc

verified ·

1 Parent(s): f8bedf5

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +495 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Tamacodechi
-emoji: ⚡
-colorFrom: indigo
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: tamacodechi
+emoji: 🐳
+colorFrom: blue
+colorTo: gray
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,495 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tamacodechi - Le Tamagotchi des Développeurs</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>
+        @keyframes bounce {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-10px); }
+        }
+        .bounce-animation {
+            animation: bounce 1s infinite;
+        }
+        .progress-bar {
+            transition: width 0.5s ease-in-out;
+        }
+        .tamagotchi-screen {
+            box-shadow: inset 0 0 20px rgba(0, 255, 255, 0.5);
+        }
+        .pixel-art {
+            image-rendering: pixelated;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white min-h-screen flex items-center justify-center p-4">
+    <div class="container mx-auto max-w-md">
+        <div class="bg-gray-800 rounded-3xl p-6 shadow-2xl border-4 border-cyan-400 relative overflow-hidden">
+            <!-- En-tête avec titre et niveau -->
+            <div class="flex justify-between items-center mb-4">
+                <h1 class="text-2xl font-bold text-cyan-400">
+                    <i class="fas fa-code mr-2"></i>Tamacodechi
+                </h1>
+                <div class="bg-gray-700 px-3 py-1 rounded-full text-sm font-mono">
+                    Niveau: <span id="level">1</span>
+                </div>
+            </div>
+            <!-- Écran du Tamacodechi -->
+            <div class="tamagotchi-screen bg-black rounded-xl p-4 mb-6 h-64 flex flex-col items-center justify-center relative overflow-hidden">
+                <div id="pet-container" class="relative">
+                    <div id="pet" class="text-6xl pixel-art bounce-animation">👨‍💻</div>
+                    <div id="pet-status" class="absolute -bottom-6 left-1/2 transform -translate-x-1/2 text-xs bg-black bg-opacity-70 px-2 py-1 rounded whitespace-nowrap"></div>
+                </div>
+                <div id="message" class="mt-4 text-center text-sm text-cyan-300 font-mono"></div>
+                <div id="evolution" class="absolute top-0 left-0 w-full h-full flex items-center justify-center hidden">
+                    <div class="text-4xl animate-pulse text-yellow-300">LEVEL UP!</div>
+                </div>
+            </div>
+            <!-- Barres de statut -->
+            <div class="space-y-3 mb-6">
+                <div>
+                    <div class="flex justify-between text-xs mb-1">
+                        <span><i class="fas fa-heart text-red-400 mr-1"></i> Santé</span>
+                        <span id="health-value">100%</span>
+                    </div>
+                    <div class="w-full bg-gray-700 rounded-full h-2">
+                        <div id="health-bar" class="progress-bar bg-red-500 h-2 rounded-full" style="width: 100%"></div>
+                    </div>
+                </div>
+                <div>
+                    <div class="flex justify-between text-xs mb-1">
+                        <span><i class="fas fa-hamburger text-yellow-400 mr-1"></i> Nourriture</span>
+                        <span id="food-value">100%</span>
+                    </div>
+                    <div class="w-full bg-gray-700 rounded-full h-2">
+                        <div id="food-bar" class="progress-bar bg-yellow-500 h-2 rounded-full" style="width: 100%"></div>
+                    </div>
+                </div>
+                <div>
+                    <div class="flex justify-between text-xs mb-1">
+                        <span><i class="fas fa-bolt text-blue-400 mr-1"></i> Énergie</span>
+                        <span id="energy-value">100%</span>
+                    </div>
+                    <div class="w-full bg-gray-700 rounded-full h-2">
+                        <div id="energy-bar" class="progress-bar bg-blue-500 h-2 rounded-full" style="width: 100%"></div>
+                    </div>
+                </div>
+                <div>
+                    <div class="flex justify-between text-xs mb-1">
+                        <span><i class="fas fa-laugh-beam text-green-400 mr-1"></i> Bonheur</span>
+                        <span id="happiness-value">100%</span>
+                    </div>
+                    <div class="w-full bg-gray-700 rounded-full h-2">
+                        <div id="happiness-bar" class="progress-bar bg-green-500 h-2 rounded-full" style="width: 100%"></div>
+                    </div>
+                </div>
+                <div>
+                    <div class="flex justify-between text-xs mb-1">
+                        <span><i class="fas fa-brain text-purple-400 mr-1"></i> XP</span>
+                        <span id="xp-value">0/100</span>
+                    </div>
+                    <div class="w-full bg-gray-700 rounded-full h-2">
+                        <div id="xp-bar" class="progress-bar bg-purple-500 h-2 rounded-full" style="width: 0%"></div>
+                    </div>
+                </div>
+            </div>
+            <!-- Boutons d'action -->
+            <div class="grid grid-cols-3 gap-3">
+                <button id="feed-btn" class="bg-yellow-600 hover:bg-yellow-500 text-white py-2 px-3 rounded-lg flex flex-col items-center text-xs">
+                    <i class="fas fa-utensils mb-1"></i>
+                    Nourrir
+                </button>
+                <button id="play-btn" class="bg-green-600 hover:bg-green-500 text-white py-2 px-3 rounded-lg flex flex-col items-center text-xs">
+                    <i class="fas fa-gamepad mb-1"></i>
+                    Jouer
+                </button>
+                <button id="sleep-btn" class="bg-blue-600 hover:bg-blue-500 text-white py-2 px-3 rounded-lg flex flex-col items-center text-xs">
+                    <i class="fas fa-moon mb-1"></i>
+                    Dormir
+                </button>
+                <button id="code-btn" class="bg-purple-600 hover:bg-purple-500 text-white py-2 px-3 rounded-lg flex flex-col items-center text-xs">
+                    <i class="fas fa-code mb-1"></i>
+                    Coder
+                </button>
+                <button id="clean-btn" class="bg-pink-600 hover:bg-pink-500 text-white py-2 px-3 rounded-lg flex flex-col items-center text-xs">
+                    <i class="fas fa-broom mb-1"></i>
+                    Nettoyer
+                </button>
+                <button id="heal-btn" class="bg-red-600 hover:bg-red-500 text-white py-2 px-3 rounded-lg flex flex-col items-center text-xs">
+                    <i class="fas fa-medkit mb-1"></i>
+                    Soigner
+                </button>
+            </div>
+            <!-- Boutons spéciaux -->
+            <div class="flex justify-between mt-4">
+                <button id="debug-btn" class="bg-gray-700 hover:bg-gray-600 text-xs py-1 px-3 rounded-full">
+                    <i class="fas fa-bug mr-1"></i>Debug
+                </button>
+                <button id="save-btn" class="bg-cyan-700 hover:bg-cyan-600 text-xs py-1 px-3 rounded-full">
+                    <i class="fas fa-save mr-1"></i>Sauvegarder
+                </button>
+                <button id="load-btn" class="bg-cyan-700 hover:bg-cyan-600 text-xs py-1 px-3 rounded-full">
+                    <i class="fas fa-folder-open mr-1"></i>Charger
+                </button>
+            </div>
+            <!-- Console de debug -->
+            <div id="debug-console" class="mt-4 bg-black text-green-400 font-mono text-xs p-2 rounded-lg h-24 overflow-y-auto hidden">
+                <div>System initialized...</div>
+            </div>
+        </div>
+        <!-- Crédits -->
+        <div class="text-center text-gray-500 text-xs mt-4">
+            Tamacodechi v1.0 - Le Tamagotchi des développeurs
+        </div>
+    </div>
+    <script>
+        // État du Tamacodechi
+        const state = {
+            health: 100,
+            food: 100,
+            energy: 100,
+            happiness: 100,
+            xp: 0,
+            level: 1,
+            xpToNextLevel: 100,
+            isSleeping: false,
+            isSick: false,
+            isDirty: false,
+            evolutionStage: 0,
+            lastAction: null,
+            messages: [
+                "Salut ! Je suis ton Tamacodechi!",
+                "J'ai faim...",
+                "Joue avec moi!",
+                "Je veux coder!",
+                "J'ai besoin de dormir...",
+                "Je me sens seul...",
+                "Je suis malade...",
+                "Je suis sale...",
+                "Je veux apprendre!",
+                "Je m'ennuie..."
+            ]
+        };
+        // Éléments du DOM
+        const elements = {
+            pet: document.getElementById('pet'),
+            petStatus: document.getElementById('pet-status'),
+            message: document.getElementById('message'),
+            evolution: document.getElementById('evolution'),
+            healthBar: document.getElementById('health-bar'),
+            healthValue: document.getElementById('health-value'),
+            foodBar: document.getElementById('food-bar'),
+            foodValue: document.getElementById('food-value'),
+            energyBar: document.getElementById('energy-bar'),
+            energyValue: document.getElementById('energy-value'),
+            happinessBar: document.getElementById('happiness-bar'),
+            happinessValue: document.getElementById('happiness-value'),
+            xpBar: document.getElementById('xp-bar'),
+            xpValue: document.getElementById('xp-value'),
+            level: document.getElementById('level'),
+            debugConsole: document.getElementById('debug-console')
+        };
+        // Boutons d'action
+        const buttons = {
+            feed: document.getElementById('feed-btn'),
+            play: document.getElementById('play-btn'),
+            sleep: document.getElementById('sleep-btn'),
+            code: document.getElementById('code-btn'),
+            clean: document.getElementById('clean-btn'),
+            heal: document.getElementById('heal-btn'),
+            debug: document.getElementById('debug-btn'),
+            save: document.getElementById('save-btn'),
+            load: document.getElementById('load-btn')
+        };
+        // Évolution du Tamacodechi
+        const evolutionStages = [
+            { emoji: "👶", name: "Bébé Codeur", xpRequired: 0 },
+            { emoji: "👦", name: "Apprenti Dev", xpRequired: 100 },
+            { emoji: "👨‍💻", name: "Développeur", xpRequired: 300 },
+            { emoji: "🧙‍♂️", name: "Codeur Pro", xpRequired: 600 },
+            { emoji: "🧙‍♂️", name: "Hacker", xpRequired: 1000 }
+        ];
+        // Initialisation
+        function init() {
+            updateUI();
+            setRandomMessage();
+            startGameLoop();
+            setupEventListeners();
+            logToConsole("Tamacodechi initialisé!");
+        }
+        // Boucle de jeu
+        function startGameLoop() {
+            setInterval(() => {
+                // Dégradation naturelle des stats
+                if (!state.isSleeping) {
+                    state.food = Math.max(0, state.food - 1);
+                    state.energy = Math.max(0, state.energy - 1);
+                    state.happiness = Math.max(0, state.happiness - 0.5);
+                } else {
+                    // Récupération pendant le sommeil
+                    state.energy = Math.min(100, state.energy + 2);
+                    state.health = Math.min(100, state.health + 0.5);
+                }
+                // Effets secondaires
+                if (state.food < 30) {
+                    state.health = Math.max(0, state.health - 0.5);
+                }
+                if (state.energy < 20) {
+                    state.health = Math.max(0, state.health - 0.5);
+                }
+                if (state.happiness < 20) {
+                    state.health = Math.max(0, state.health - 0.3);
+                }
+                // Maladie aléatoire
+                if (Math.random() < 0.005 && !state.isSick) {
+                    state.isSick = true;
+                    showMessage("Je ne me sens pas bien...");
+                }
+                // Saleté aléatoire
+                if (Math.random() < 0.01 && !state.isDirty) {
+                    state.isDirty = true;
+                    showMessage("Je suis tout sale!");
+                }
+                // Vérifier l'évolution
+                checkEvolution();
+                // Mettre à jour l'UI
+                updateUI();
+                // Changer de message aléatoirement
+                if (Math.random() < 0.05) {
+                    setRandomMessage();
+                }
+            }, 3000);
+        }
+        // Mise à jour de l'interface
+        function updateUI() {
+            // Mettre à jour les barres de progression
+            elements.healthBar.style.width = `${state.health}%`;
+            elements.foodBar.style.width = `${state.food}%`;
+            elements.energyBar.style.width = `${state.energy}%`;
+            elements.happinessBar.style.width = `${state.happiness}%`;
+            elements.xpBar.style.width = `${(state.xp / state.xpToNextLevel) * 100}%`;
+            // Mettre à jour les valeurs textuelles
+            elements.healthValue.textContent = `${Math.round(state.health)}%`;
+            elements.foodValue.textContent = `${Math.round(state.food)}%`;
+            elements.energyValue.textContent = `${Math.round(state.energy)}%`;
+            elements.happinessValue.textContent = `${Math.round(state.happiness)}%`;
+            elements.xpValue.textContent = `${Math.round(state.xp)}/${state.xpToNextLevel}`;
+            elements.level.textContent = state.level;
+            // Changer l'apparence en fonction de l'état
+            if (state.isSick) {
+                elements.pet.style.color = "red";
+                elements.petStatus.textContent = "Malade";
+                elements.petStatus.style.color = "red";
+            } else if (state.isDirty) {
+                elements.pet.style.color = "brown";
+                elements.petStatus.textContent = "Sale";
+                elements.petStatus.style.color = "brown";
+            } else if (state.isSleeping) {
+                elements.pet.style.color = "blue";
+                elements.petStatus.textContent = "Endormi";
+                elements.petStatus.style.color = "blue";
+            } else if (state.food < 30) {
+                elements.pet.style.color = "yellow";
+                elements.petStatus.textContent = "Affamé";
+                elements.petStatus.style.color = "yellow";
+            } else if (state.energy < 30) {
+                elements.pet.style.color = "orange";
+                elements.petStatus.textContent = "Fatigué";
+                elements.petStatus.style.color = "orange";
+            } else if (state.happiness < 30) {
+                elements.pet.style.color = "pink";
+                elements.petStatus.textContent = "Triste";
+                elements.petStatus.style.color = "pink";
+            } else {
+                elements.pet.style.color = "white";
+                elements.petStatus.textContent = evolutionStages[state.evolutionStage].name;
+                elements.petStatus.style.color = "cyan";
+            }
+            // Désactiver les boutons si nécessaire
+            buttons.play.disabled = state.isSleeping;
+            buttons.code.disabled = state.isSleeping;
+            buttons.feed.disabled = state.isSleeping;
+            buttons.clean.disabled = state.isSleeping;
+            buttons.heal.disabled = state.isSleeping;
+            // Changer l'emoji en fonction du stade d'évolution
+            elements.pet.textContent = evolutionStages[state.evolutionStage].emoji;
+        }
+        // Vérifier l'évolution
+        function checkEvolution() {
+            if (state.xp >= state.xpToNextLevel && state.evolutionStage < evolutionStages.length - 1) {
+                state.level++;
+                state.evolutionStage++;
+                state.xp = 0;
+                state.xpToNextLevel = evolutionStages[state.evolutionStage].xpRequired;
+                // Animation d'évolution
+                elements.evolution.classList.remove('hidden');
+                setTimeout(() => {
+                    elements.evolution.classList.add('hidden');
+                }, 2000);
+                showMessage(`Je suis maintenant un ${evolutionStages[state.evolutionStage].name}!`);
+                logToConsole(`Évolution! Nouveau niveau: ${state.level}`);
+            }
+        }
+        // Afficher un message
+        function showMessage(msg) {
+            elements.message.textContent = msg;
+            setTimeout(() => {
+                if (elements.message.textContent === msg) {
+                    elements.message.textContent = '';
+                }
+            }, 3000);
+        }
+        // Message aléatoire
+        function setRandomMessage() {
+            if (!state.lastAction || Date.now() - state.lastAction > 5000) {
+                const randomMsg = state.messages[Math.floor(Math.random() * state.messages.length)];
+                showMessage(randomMsg);
+            }
+        }
+        // Journalisation dans la console de debug
+        function logToConsole(msg) {
+            const now = new Date();
+            const timeString = now.toLocaleTimeString();
+            const entry = document.createElement('div');
+            entry.textContent = `[${timeString}] ${msg}`;
+            elements.debugConsole.appendChild(entry);
+            elements.debugConsole.scrollTop = elements.debugConsole.scrollHeight;
+        }
+        // Configuration des écouteurs d'événements
+        function setupEventListeners() {
+            // Nourrir
+            buttons.feed.addEventListener('click', () => {
+                state.food = Math.min(100, state.food + 30);
+                state.lastAction = Date.now();
+                showMessage("Miam! C'est bon!");
+                logToConsole("Tamacodechi nourri");
+                updateUI();
+            });
+            // Jouer
+            buttons.play.addEventListener('click', () => {
+                state.happiness = Math.min(100, state.happiness + 25);
+                state.energy = Math.max(0, state.energy - 10);
+                state.lastAction = Date.now();
+                showMessage("Yeah! C'est amusant!");
+                logToConsole("Joué avec Tamacodechi");
+                updateUI();
+            });
+            // Dormir/Réveiller
+            buttons.sleep.addEventListener('click', () => {
+                state.isSleeping = !state.isSleeping;
+                state.lastAction = Date.now();
+                if (state.isSleeping) {
+                    showMessage("Zzzzzz...");
+                    logToConsole("Tamacodechi endormi");
+                } else {
+                    showMessage("Je me sens reposé!");
+                    logToConsole("Tamacodechi réveillé");
+                }
+                updateUI();
+            });
+            // Coder
+            buttons.code.addEventListener('click', () => {
+                state.xp = Math.min(state.xpToNextLevel, state.xp + 10);
+                state.energy = Math.max(0, state.energy - 15);
+                state.happiness = Math.min(100, state.happiness + 5);
+                state.lastAction = Date.now();
+                showMessage("J'adore coder!");
+                logToConsole("Tamacodechi a codé");
+                updateUI();
+            });
+            // Nettoyer
+            buttons.clean.addEventListener('click', () => {
+                state.isDirty = false;
+                state.happiness = Math.min(100, state.happiness + 10);
+                state.lastAction = Date.now();
+                showMessage("Merci de m'avoir nettoyé!");
+                logToConsole("Tamacodechi nettoyé");
+                updateUI();
+            });
+            // Soigner
+            buttons.heal.addEventListener('click', () => {
+                state.isSick = false;
+                state.health = Math.min(100, state.health + 30);
+                state.lastAction = Date.now();
+                showMessage("Je me sens mieux!");
+                logToConsole("Tamacodechi soigné");
+                updateUI();
+            });
+            // Debug
+            buttons.debug.addEventListener('click', () => {
+                elements.debugConsole.classList.toggle('hidden');
+            });
+            // Sauvegarder
+            buttons.save.addEventListener('click', () => {
+                localStorage.setItem('tamacodechi_save', JSON.stringify(state));
+                showMessage("Progression sauvegardée!");
+                logToConsole("Jeu sauvegardé");
+            });
+            // Charger
+            buttons.load.addEventListener('click', () => {
+                const savedData = localStorage.getItem('tamacodechi_save');
+                if (savedData) {
+                    Object.assign(state, JSON.parse(savedData));
+                    showMessage("Bienvenue de retour!");
+                    logToConsole("Jeu chargé");
+                    updateUI();
+                } else {
+                    showMessage("Aucune sauvegarde trouvée");
+                    logToConsole("Aucune sauvegarde trouvée");
+                }
+            });
+        }
+        // Démarrer le jeu
+        window.onload = init;
+    </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=Alex59000/tamacodechi" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>