Hugging Face's logo

Spaces:
docto41
/
ttrun
Running

App Files Community
ttrun / index.html
docto41's picture
docto41
Add 2 files
c9c4fcd verified
raw
history blame contribute delete
30 kB
<!DOCTYPE html>
<html lang="fr">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Centre de Contrôle Robotique - Mode Jeu</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=Orbitron:wght@400;700&family=Roboto:wght@300;400;700&display=swap');
:root {
 --primary: #3B82F6;
 --secondary: #10B981;
 --accent: #F59E0B;
 --dark: #1F2937;
 --darker: #111827;
 --light: #F3F4F6;
 }
body {
 font-family: 'Roboto', sans-serif;
 background-color: var(--darker);
 color: white;
 overflow-x: hidden;
 }
.tech-font {
 font-family: 'Orbitron', sans-serif;
 }
.control-panel {
 background: linear-gradient(135deg, #1E3A8A 0%, #111827 100%);
 border: 1px solid rgba(59, 130, 246, 0.3);
 }
.robot-active {
 animation: pulse 2s infinite;
 }
@keyframes pulse {
 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
 70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
 }
.game-screen {
 background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
url('https://images.unsplash.com/photo-1593508512255-86ab42a8e620?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2078&q=80');
 background-size: cover;
 background-position: center;
 }
.joystick {
 background: radial-gradient(circle at center, #3B82F6 0%, #1D4ED8 100%);
 box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
 }
.binary-bg {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-image:
linear-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px),
 linear-gradient(90deg, rgba(59, 130, 246, 0.05) 1px, transparent 1px);
 background-size: 20px 20px;
 z-index: -1;
 }
.robot-eye {
 animation: eyeBlink 5s infinite;
 }
@keyframes eyeBlink {
 0%, 45%, 55%, 100% { transform: scaleY(1); }
 50% { transform: scaleY(0.1); }
 }
.game-grid {
 display: grid;
 grid-template-columns: repeat(10, 1fr);
 grid-template-rows: repeat(10, 1fr);
 gap: 2px;
 }
.game-cell {
 background-color: rgba(31, 41, 55, 0.7);
 transition: all 0.2s;
 }
.game-cell.active {
 background-color: #3B82F6;
 }
.game-cell.robot {
 background-color: #10B981;
 }
.game-cell.target {
 background-color: #F59E0B;
 }
.game-cell.obstacle {
 background-color: #EF4444;
 }
 </style>
</head>
<body>
 <!-- Binary background pattern -->
 <div class="binary-bg"></div>
<!-- Main Control Panel -->
 <div class="min-h-screen flex flex-col">
 <!-- Header -->
 <header class="bg-gray-900 py-4 px-6 border-b border-gray-800 flex justify-between items-center">
 <div class="flex items-center space-x-4">
 <div class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center">
 <i class="fas fa-robot text-white"></i>
 </div>
 <h1 class="text-xl font-bold tech-font">CENTRE DE CONTRÔLE <span class="text-blue-400">ROBOTIQUE</span></h1>
 </div>
 <div class="flex items-center space-x-4">
 <div class="px-4 py-2 rounded-full bg-green-600 text-white flex items-center">
 <span class="relative flex h-2 w-2 mr-2">
 <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
 <span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
 </span>
 <span id="system-status">SYSTÈME ACTIF</span>
 </div>
 <button id="fullscreen-btn" class="p-2 rounded-full bg-gray-800 hover:bg-gray-700 text-white">
 <i class="fas fa-expand"></i>
 </button>
 </div>
 </header>
<!-- Main Content -->
 <main class="flex-1 grid grid-cols-1 lg:grid-cols-3 gap-6 p-6">
 <!-- Robot Control Panel -->
 <div class="control-panel rounded-xl p-6 col-span-1">
 <h2 class="text-2xl font-bold mb-6 tech-font flex items-center">
 <i class="fas fa-gamepad mr-3 text-blue-400"></i>
 <span>CONTROLE <span class="text-blue-400">ROBOT</span></span>
 </h2>
<!-- Robot Selection -->
 <div class="mb-8">
 <h3 class="text-lg font-semibold mb-3 flex items-center">
 <i class="fas fa-robot mr-2 text-blue-400"></i>
 Sélection Robot
 </h3>
 <div class="grid grid-cols-3 gap-3">
 <button class="robot-btn p-3 rounded-lg bg-gray-800 hover:bg-gray-700 flex flex-col items-center" data-robot="1">
 <i class="fas fa-robot text-2xl mb-1 text-blue-400"></i>
 <span class="text-xs">RT-001</span>
 </button>
 <button class="robot-btn p-3 rounded-lg bg-gray-800 hover:bg-gray-700 flex flex-col items-center" data-robot="2">
 <i class="fas fa-robot text-2xl mb-1 text-green-400"></i>
 <span class="text-xs">RT-002</span>
 </button>
 <button class="robot-btn p-3 rounded-lg bg-gray-800 hover:bg-gray-700 flex flex-col items-center" data-robot="3">
 <i class="fas fa-robot text-2xl mb-1 text-yellow-400"></i>
 <span class="text-xs">RT-003</span>
 </button>
 </div>
 </div>
<!-- Activation Panel -->
 <div class="mb-8">
 <h3 class="text-lg font-semibold mb-3 flex items-center">
 <i class="fas fa-power-off mr-2 text-red-400"></i>
 Activation Robot
 </h3>
 <div class="bg-gray-800 rounded-lg p-4">
 <div class="flex justify-between items-center mb-4">
 <span>Statut Robot:</span>
 <span id="robot-status" class="px-3 py-1 rounded-full bg-gray-700 text-gray-300">INACTIF</span>
 </div>
 <button id="activate-btn" class="w-full py-3 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-bold flex items-center justify-center">
 <i class="fas fa-play mr-2"></i> ACTIVER ROBOT
 </button>
 </div>
 </div>
<!-- Game Mode Selection -->
 <div class="mb-8">
 <h3 class="text-lg font-semibold mb-3 flex items-center">
 <i class="fas fa-chess-board mr-2 text-purple-400"></i>
 Mode Jeu
 </h3>
 <div class="grid grid-cols-2 gap-3">
 <button class="game-mode-btn p-3 rounded-lg bg-gray-800 hover:bg-gray-700 flex flex-col items-center" data-mode="maze">
 <i class="fas fa-project-diagram text-2xl mb-1 text-purple-400"></i>
 <span class="text-xs">Labyrinthe</span>
 </button>
 <button class="game-mode-btn p-3 rounded-lg bg-gray-800 hover:bg-gray-700 flex flex-col items-center" data-mode="race">
 <i class="fas fa-flag-checkered text-2xl mb-1 text-red-400"></i>
 <span class="text-xs">Course</span>
 </button>
 <button class="game-mode-btn p-3 rounded-lg bg-gray-800 hover:bg-gray-700 flex flex-col items-center" data-mode="collect">
 <i class="fas fa-coins text-2xl mb-1 text-yellow-400"></i>
 <span class="text-xs">Collection</span>
 </button>
 <button class="game-mode-btn p-3 rounded-lg bg-gray-800 hover:bg-gray-700 flex flex-col items-center" data-mode="battle">
 <i class="fas fa-robot text-2xl mb-1 text-green-400"></i>
 <span class="text-xs">Combat</span>
 </button>
 </div>
 </div>
<!-- Joystick Control -->
 <div>
 <h3 class="text-lg font-semibold mb-3 flex items-center">
 <i class="fas fa-joystick mr-2 text-yellow-400"></i>
 Contrôle Manuel
 </h3>
 <div class="bg-gray-800 rounded-lg p-6 flex flex-col items-center">
 <div class="relative w-40 h-40 mb-4">
 <div class="absolute inset-0 flex items-center justify-center">
 <div class="joystick w-24 h-24 rounded-full flex items-center justify-center cursor-move" id="joystick">
 <i class="fas fa-arrows-alt text-white text-xl"></i>
 </div>
 </div>
 </div>
 <div class="grid grid-cols-3 gap-2 w-full">
 <button class="control-btn p-3 rounded bg-gray-700 hover:bg-gray-600 flex items-center justify-center" data-direction="forward">
 <i class="fas fa-arrow-up"></i>
 </button>
 <button class="control-btn p-3 rounded bg-gray-700 hover:bg-gray-600 flex items-center justify-center" data-direction="left">
 <i class="fas fa-arrow-left"></i>
 </button>
 <button class="control-btn p-3 rounded bg-gray-700 hover:bg-gray-600 flex items-center justify-center" data-direction="right">
 <i class="fas fa-arrow-right"></i>
 </button>
 <button class="control-btn p-3 rounded bg-gray-700 hover:bg-gray-600 flex items-center justify-center" data-direction="backward">
 <i class="fas fa-arrow-down"></i>
 </button>
 <button class="control-btn p-3 rounded bg-gray-700 hover:bg-gray-600 flex items-center justify-center col-span-3" data-direction="stop">
 <i class="fas fa-stop-circle mr-2"></i> STOP
 </button>
 </div>
 </div>
 </div>
 </div>
<!-- Game Screen -->
 <div class="game-screen rounded-xl p-6 col-span-2 relative overflow-hidden">
 <div class="absolute inset-0 flex items-center justify-center">
 <div class="text-center z-10 w-full max-w-2xl">
 <div id="game-start-screen">
 <h2 class="text-4xl font-bold mb-6 tech-font">MODE <span class="text-blue-400">JEU ROBOT</span></h2>
 <p class="text-xl mb-8">Sélectionnez un robot et un mode de jeu pour commencer</p>
 <div class="flex justify-center">
 <div class="w-32 h-32 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-6 robot-eye">
 <i class="fas fa-robot text-5xl text-white"></i>
 </div>
 </div>
 <button id="start-game-btn" class="px-8 py-4 bg-blue-600 rounded-full text-white font-bold hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
 <i class="fas fa-play mr-2"></i> DÉMARRER LE JEU
 </button>
 </div>
<div id="game-container" class="hidden">
 <div class="flex justify-between items-center mb-4">
 <h3 id="game-title" class="text-2xl font-bold tech-font">LABYRINTHE ROBOT</h3>
 <div class="flex items-center space-x-4">
 <div class="px-4 py-2 rounded-full bg-gray-800">
 <span id="game-score">Score: 0</span>
 </div>
 <div class="px-4 py-2 rounded-full bg-gray-800">
 <span id="game-time">Temps: 00:00</span>
 </div>
 </div>
 </div>
<div class="game-grid w-full aspect-square max-w-2xl mx-auto bg-gray-900 p-1 rounded-lg" id="game-grid">
 <!-- Game grid will be generated by JavaScript -->
 </div>
<div class="mt-6 flex justify-center space-x-4">
 <button id="restart-game-btn" class="px-6 py-3 bg-yellow-600 rounded-lg text-white hover:bg-yellow-700">
 <i class="fas fa-redo mr-2"></i> Recommencer
 </button>
 <button id="end-game-btn" class="px-6 py-3 bg-red-600 rounded-lg text-white hover:bg-red-700">
 <i class="fas fa-stop mr-2"></i> Quitter
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
 </main>
 </div>
<script>
 // System Status
 let systemActive = true;
 let robotActive = false;
 let selectedRobot = null;
 let gameMode = null;
 let gameRunning = false;
 let gameInterval;
 let gameTime = 0;
 let gameScore = 0;
 let robotPosition = { x: 0, y: 0 };
 let targetPosition = { x: 0, y: 0 };
 let obstacles = [];
// DOM Elements
 const systemStatusEl = document.getElementById('system-status');
 const robotStatusEl = document.getElementById('robot-status');
 const activateBtn = document.getElementById('activate-btn');
 const startGameBtn = document.getElementById('start-game-btn');
 const gameStartScreen = document.getElementById('game-start-screen');
 const gameContainer = document.getElementById('game-container');
 const gameGrid = document.getElementById('game-grid');
 const gameTitleEl = document.getElementById('game-title');
 const gameScoreEl = document.getElementById('game-score');
 const gameTimeEl = document.getElementById('game-time');
 const restartGameBtn = document.getElementById('restart-game-btn');
 const endGameBtn = document.getElementById('end-game-btn');
 const fullscreenBtn = document.getElementById('fullscreen-btn');
// Robot Buttons
 const robotButtons = document.querySelectorAll('.robot-btn');
 robotButtons.forEach(btn => {
 btn.addEventListener('click', () => {
 robotButtons.forEach(b => b.classList.remove('bg-blue-600', 'text-white'));
 btn.classList.add('bg-blue-600', 'text-white');
 selectedRobot = btn.dataset.robot;
 updateStartButton();
 });
 });
// Game Mode Buttons
 const gameModeButtons = document.querySelectorAll('.game-mode-btn');
 gameModeButtons.forEach(btn => {
 btn.addEventListener('click', () => {
 gameModeButtons.forEach(b => b.classList.remove('bg-blue-600', 'text-white'));
 btn.classList.add('bg-blue-600', 'text-white');
 gameMode = btn.dataset.mode;
 updateStartButton();
 });
 });
// Control Buttons
 const controlButtons = document.querySelectorAll('.control-btn');
 controlButtons.forEach(btn => {
 btn.addEventListener('click', () => {
 if (!robotActive) return;
const direction = btn.dataset.direction;
 moveRobot(direction);
 });
 });
// Activate Robot
 activateBtn.addEventListener('click', () => {
 if (!selectedRobot) {
 alert('Veuillez sélectionner un robot');
 return;
 }
robotActive = !robotActive;
 updateRobotStatus();
 });
// Start Game
 startGameBtn.addEventListener('click', () => {
 if (!robotActive) {
 alert('Veuillez activer un robot');
 return;
 }
startGame();
 });
// Restart Game
 restartGameBtn.addEventListener('click', () => {
 startGame();
 });
// End Game
 endGameBtn.addEventListener('click', () => {
 endGame();
 });
// Fullscreen
 fullscreenBtn.addEventListener('click', () => {
 if (!document.fullscreenElement) {
 document.documentElement.requestFullscreen().catch(err => {
 console.error(`Error attempting to enable fullscreen: ${err.message}`);
 });
 } else {
 if (document.exitFullscreen) {
 document.exitFullscreen();
 }
 }
 });
// Keyboard Controls
 document.addEventListener('keydown', (e) => {
 if (!robotActive || !gameRunning) return;
switch(e.key) {
 case 'ArrowUp':
 moveRobot('forward');
 break;
 case 'ArrowDown':
 moveRobot('backward');
 break;
 case 'ArrowLeft':
 moveRobot('left');
 break;
 case 'ArrowRight':
 moveRobot('right');
 break;
 case ' ':
 moveRobot('stop');
 break;
 }
 });
// Joystick Control
 const joystick = document.getElementById('joystick');
 let isDragging = false;
joystick.addEventListener('mousedown', () => {
 isDragging = true;
 });
document.addEventListener('mousemove', (e) => {
 if (!isDragging || !robotActive || !gameRunning) return;
const rect = joystick.getBoundingClientRect();
 const centerX = rect.left + rect.width / 2;
 const centerY = rect.top + rect.height / 2;
const deltaX = e.clientX - centerX;
 const deltaY = e.clientY - centerY;
// Calculate direction based on angle
 const angle = Math.atan2(deltaY, deltaX) * 180 / Math.PI;
if (Math.abs(deltaX) > 20 || Math.abs(deltaY) > 20) {
 if (angle >= -45 && angle < 45) {
 moveRobot('right');
 } else if (angle >= 45 && angle < 135) {
 moveRobot('backward');
 } else if (angle >= 135 || angle < -135) {
 moveRobot('left');
 } else if (angle >= -135 && angle < -45) {
 moveRobot('forward');
 }
 }
 });
document.addEventListener('mouseup', () => {
 isDragging = false;
 if (robotActive && gameRunning) {
 moveRobot('stop');
 }
 });
// Functions
 function updateStartButton() {
 startGameBtn.disabled = !(selectedRobot && gameMode);
 }
function updateRobotStatus() {
 if (robotActive) {
 robotStatusEl.textContent = 'ACTIF';
 robotStatusEl.classList.remove('bg-gray-700', 'text-gray-300');
 robotStatusEl.classList.add('bg-green-600', 'text-white');
 activateBtn.innerHTML = '<i class="fas fa-stop mr-2"></i> DÉSACTIVER ROBOT';
 activateBtn.classList.remove('bg-blue-600');
 activateBtn.classList.add('bg-red-600');
// Add robot-active class to robot buttons
 robotButtons.forEach(btn => {
 if (btn.dataset.robot === selectedRobot) {
 btn.classList.add('robot-active');
 }
 });
 } else {
 robotStatusEl.textContent = 'INACTIF';
 robotStatusEl.classList.add('bg-gray-700', 'text-gray-300');
 robotStatusEl.classList.remove('bg-green-600', 'text-white');
 activateBtn.innerHTML = '<i class="fas fa-play mr-2"></i> ACTIVER ROBOT';
 activateBtn.classList.add('bg-blue-600');
 activateBtn.classList.remove('bg-red-600');
// Remove robot-active class
 robotButtons.forEach(btn => {
 btn.classList.remove('robot-active');
 });
// End game if running
 if (gameRunning) {
 endGame();
 }
 }
 }
function startGame() {
 gameStartScreen.classList.add('hidden');
 gameContainer.classList.remove('hidden');
 gameRunning = true;
 gameTime = 0;
 gameScore = 0;
// Set game title based on mode
 switch(gameMode) {
 case 'maze':
 gameTitleEl.textContent = 'LABYRINTHE ROBOT';
 break;
 case 'race':
 gameTitleEl.textContent = 'COURSE ROBOT';
 break;
 case 'collect':
 gameTitleEl.textContent = 'COLLECTION ROBOT';
 break;
 case 'battle':
 gameTitleEl.textContent = 'COMBAT ROBOT';
 break;
 }
// Initialize game grid
 initializeGameGrid();
// Start game timer
 gameInterval = setInterval(() => {
 gameTime++;
 const minutes = Math.floor(gameTime / 60).toString().padStart(2, '0');
 const seconds = (gameTime % 60).toString().padStart(2, '0');
 gameTimeEl.textContent = `Temps: ${minutes}:${seconds}`;
 }, 1000);
 }
function endGame() {
 clearInterval(gameInterval);
 gameRunning = false;
 gameContainer.classList.add('hidden');
 gameStartScreen.classList.remove('hidden');
// Reset game grid
 gameGrid.innerHTML = '';
 }
function initializeGameGrid() {
 gameGrid.innerHTML = '';
// Create 10x10 grid
 for (let y = 0; y < 10; y++) {
 for (let x = 0; x < 10; x++) {
 const cell = document.createElement('div');
 cell.className = 'game-cell';
 cell.dataset.x = x;
 cell.dataset.y = y;
 gameGrid.appendChild(cell);
 }
 }
// Set initial robot position (random)
 robotPosition = {
 x: Math.floor(Math.random() * 10),
 y: Math.floor(Math.random() * 10)
 };
// Set target position (random, not same as robot)
 do {
 targetPosition = {
 x: Math.floor(Math.random() * 10),
 y: Math.floor(Math.random() * 10)
 };
 } while (targetPosition.x === robotPosition.x && targetPosition.y === robotPosition.y);
// Generate obstacles (20% of cells)
 obstacles = [];
 for (let i = 0; i < 20; i++) {
 let obstacle;
 do {
 obstacle = {
 x: Math.floor(Math.random() * 10),
 y: Math.floor(Math.random() * 10)
 };
 } while (
 (obstacle.x === robotPosition.x && obstacle.y === robotPosition.y) ||
 (obstacle.x === targetPosition.x && obstacle.y === targetPosition.y) ||
 obstacles.some(o => o.x === obstacle.x && o.y === obstacle.y)
 );
obstacles.push(obstacle);
 }
// Update grid display
 updateGameGrid();
 }
function updateGameGrid() {
 const cells = document.querySelectorAll('.game-cell');
cells.forEach(cell => {
 cell.className = 'game-cell';
 const x = parseInt(cell.dataset.x);
 const y = parseInt(cell.dataset.y);
if (x === robotPosition.x && y === robotPosition.y) {
 cell.classList.add('robot');
 } else if (x === targetPosition.x && y === targetPosition.y) {
 cell.classList.add('target');
 } else if (obstacles.some(o => o.x === x && o.y === y)) {
 cell.classList.add('obstacle');
 }
 });
 }
function moveRobot(direction) {
 if (!gameRunning) return;
let newX = robotPosition.x;
 let newY = robotPosition.y;
switch(direction) {
 case 'forward':
 newY = Math.max(0, robotPosition.y - 1);
 break;
 case 'backward':
 newY = Math.min(9, robotPosition.y + 1);
 break;
 case 'left':
 newX = Math.max(0, robotPosition.x - 1);
 break;
 case 'right':
 newX = Math.min(9, robotPosition.x + 1);
 break;
 case 'stop':
 // No movement
 break;
 }
// Check if new position is obstacle
 const isObstacle = obstacles.some(o => o.x === newX && o.y === newY);
if (!isObstacle || direction === 'stop') {
 robotPosition.x = newX;
 robotPosition.y = newY;
// Check if reached target
 if (robotPosition.x === targetPosition.x && robotPosition.y === targetPosition.y) {
 gameScore += 10;
 gameScoreEl.textContent = `Score: ${gameScore}`;
// Set new target
 do {
 targetPosition = {
 x: Math.floor(Math.random() * 10),
 y: Math.floor(Math.random() * 10)
 };
 } while (
 (targetPosition.x === robotPosition.x && targetPosition.y === robotPosition.y) ||
 obstacles.some(o => o.x === targetPosition.x && o.y === targetPosition.y)
 );
 }
updateGameGrid();
 }
 }
// Initialize
 updateRobotStatus();
 </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=docto41/ttrun" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>