Hugging Face's logo

Spaces:
DeepSiteOptional
/
turboned-developent
Running

App Files Community
turboned-developent / index.html
DeepSiteOptional's picture
DeepSiteOptional
Add 3 files
2ddb858 verified
raw
history blame contribute delete
67.4 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>TurbONED - Creative Coding Platform</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=Roboto:wght@300;400;500;700&display=swap');
body {
 font-family: 'Roboto', sans-serif;
 background-color: #f0f4f8;
 margin: 0;
 padding: 0;
 overflow-x: hidden;
 }
.gradient-bg {
 background: linear-gradient(135deg, #6e45e2 0%, #88d3ce 50%, #f9d423 100%);
 }
.block {
 background-color: rgba(255, 255, 255, 0.9);
 border-radius: 8px;
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 padding: 10px;
 margin: 5px;
 cursor: move;
 user-select: none;
 transition: all 0.2s;
 position: relative;
 }
.block:hover {
 transform: translateY(-2px);
 box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
 }
.block.active {
 animation: pulse 1s infinite alternate;
 box-shadow: 0 0 10px rgba(255, 165, 0, 0.7);
 }
@keyframes pulse {
 from {
 box-shadow: 0 0 5px rgba(255, 165, 0, 0.7);
 }
 to {
 box-shadow: 0 0 15px rgba(255, 0, 0, 0.7);
 }
 }
.workspace {
 background-color: white;
 border-radius: 10px;
 min-height: 400px;
 position: relative;
 overflow: hidden;
 }
.sprite {
 width: 60px;
 height: 60px;
 border-radius: 8px;
 background-color: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 transition: all 0.2s;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
.sprite:hover {
 transform: scale(1.05);
 }
.tab-content {
 display: none;
 }
.tab-content.active {
 display: block;
 }
#stage {
 background-color: #f0f0f0;
 border-radius: 8px;
 overflow: hidden;
 position: relative;
 }
.draggable {
 position: absolute;
 cursor: move;
 }
.modal {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.5);
 z-index: 1000;
 justify-content: center;
 align-items: center;
 }
.modal-content {
 background-color: white;
 padding: 20px;
 border-radius: 10px;
 max-width: 500px;
 width: 90%;
 max-height: 90vh;
 overflow-y: auto;
 }
.costume-thumbnail {
 width: 80px;
 height: 80px;
 border-radius: 8px;
 background-color: #f0f0f0;
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 5px;
 cursor: pointer;
 transition: all 0.2s;
 }
.costume-thumbnail:hover {
 transform: scale(1.05);
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
.sound-item {
 padding: 10px;
 border-radius: 8px;
 background-color: #f0f0f0;
 margin: 5px 0;
 display: flex;
 align-items: center;
 justify-content: space-between;
 }
.dragging {
 opacity: 0.5;
 }
.dropzone {
 min-height: 100px;
 border: 2px dashed #ccc;
 border-radius: 8px;
 padding: 10px;
 margin: 10px 0;
 text-align: center;
 }
.dropzone.highlight {
 border-color: #6e45e2;
 background-color: rgba(110, 69, 226, 0.1);
 }
.block-container {
 position: relative;
 margin: 10px 0;
 }
.block-connector {
 width: 100%;
 height: 15px;
 background-color: rgba(110, 69, 226, 0.2);
 border-radius: 0 0 8px 8px;
 margin-top: -5px;
 cursor: pointer;
 }
.block-connector:hover {
 background-color: rgba(110, 69, 226, 0.4);
 }
.block-connector-top {
 width: 100%;
 height: 15px;
 background-color: rgba(110, 69, 226, 0.2);
 border-radius: 8px 8px 0 0;
 margin-bottom: -5px;
 cursor: pointer;
 }
.block-connector-top:hover {
 background-color: rgba(110, 69, 226, 0.4);
 }
.connected-block {
 margin-top: -10px;
 }
.flag-btn {
 position: absolute;
 top: 10px;
 left: 10px;
 z-index: 10;
 background-color: #f9d423;
 color: white;
 width: 40px;
 height: 40px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 box-shadow: 0 2px 5px rgba(0,0,0,0.2);
 }
.flag-btn:hover {
 transform: scale(1.1);
 }
.block-slot {
 background-color: rgba(110, 69, 226, 0.1);
 border-radius: 4px;
 padding: 5px;
 margin: 5px 0;
 min-height: 20px;
 }
.block-slot.highlight {
 background-color: rgba(110, 69, 226, 0.3);
 border: 1px dashed #6e45e2;
 }
.creator-credit {
 position: fixed;
 bottom: 10px;
 right: 10px;
 background-color: rgba(255, 255, 255, 0.8);
 padding: 5px 10px;
 border-radius: 15px;
 font-size: 12px;
 z-index: 100;
 }
.block-options {
 position: absolute;
 top: 100%;
 left: 0;
 background-color: white;
 border-radius: 8px;
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 z-index: 100;
 padding: 10px;
 min-width: 200px;
 display: none;
 }
.block-option {
 padding: 8px;
 border-radius: 4px;
 cursor: pointer;
 margin-bottom: 5px;
 }
.block-option:hover {
 background-color: #f0f4f8;
 }
.block-with-options {
 position: relative;
 }
.block-options-container {
 display: none;
 position: absolute;
 top: 0;
 left: 100%;
 background-color: white;
 border-radius: 8px;
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 z-index: 100;
 padding: 10px;
 min-width: 200px;
 }
.block-options-container.show {
 display: block;
 }
/* New styles for enhanced block selection */
 .block-selection-overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.7);
 z-index: 2000;
 display: flex;
 justify-content: center;
 align-items: center;
 display: none;
 }
.block-selection-container {
 background-color: white;
 border-radius: 12px;
 width: 80%;
 max-width: 800px;
 max-height: 80vh;
 overflow-y: auto;
 padding: 20px;
 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
 }
.block-selection-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 20px;
 padding-bottom: 10px;
 border-bottom: 1px solid #eee;
 }
.block-selection-title {
 font-size: 1.5rem;
 font-weight: bold;
 color: #6e45e2;
 }
.block-selection-close {
 background: none;
 border: none;
 font-size: 1.5rem;
 cursor: pointer;
 color: #666;
 }
.block-selection-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
 gap: 15px;
 }
.block-selection-item {
 background-color: #f8f9fa;
 border-radius: 8px;
 padding: 15px;
 cursor: pointer;
 transition: all 0.2s;
 border: 2px solid transparent;
 }
.block-selection-item:hover {
 transform: translateY(-3px);
 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 border-color: #6e45e2;
 }
.block-selection-item.active {
 border-color: #6e45e2;
 background-color: #e9e0ff;
 }
.block-selection-icon {
 font-size: 1.5rem;
 margin-bottom: 10px;
 color: #6e45e2;
 }
.block-selection-name {
 font-weight: 500;
 margin-bottom: 5px;
 }
.block-selection-description {
 font-size: 0.8rem;
 color: #666;
 }
.block-selection-footer {
 display: flex;
 justify-content: space-between;
 margin-top: 20px;
 padding-top: 15px;
 border-top: 1px solid #eee;
 }
.block-selection-btn {
 padding: 8px 20px;
 border-radius: 6px;
 font-weight: 500;
 cursor: pointer;
 transition: all 0.2s;
 }
.block-selection-back {
 background-color: #f0f0f0;
 color: #333;
 }
.block-selection-back:hover {
 background-color: #e0e0e0;
 }
.block-selection-confirm {
 background-color: #6e45e2;
 color: white;
 }
.block-selection-confirm:hover {
 background-color: #5a35d1;
 }
/* Category tabs */
 .block-category-tabs {
 display: flex;
 margin-bottom: 15px;
 border-bottom: 1px solid #eee;
 }
.block-category-tab {
 padding: 8px 15px;
 margin-right: 5px;
 cursor: pointer;
 border-bottom: 3px solid transparent;
 font-weight: 500;
 color: #666;
 }
.block-category-tab.active {
 color: #6e45e2;
 border-bottom-color: #6e45e2;
 }
 </style>
</head>
<body class="min-h-screen">
 <!-- Main Layout -->
 <div class="flex flex-col min-h-screen">
 <!-- Header -->
 <header class="gradient-bg text-white shadow-lg">
 <div class="container mx-auto px-4 py-3 flex justify-between items-center">
 <div class="flex items-center">
 <i class="fas fa-code text-3xl mr-3"></i>
 <h1 class="text-2xl font-bold">TurbONED</h1>
 </div>
 <div class="flex items-center space-x-4">
 <button id="loginBtn" class="bg-white text-purple-600 px-4 py-1 rounded-lg hover:bg-gray-100 transition">Login</button>
 <button id="registerBtn" class="bg-white text-blue-600 px-4 py-1 rounded-lg hover:bg-gray-100 transition">Register</button>
 <div id="userMenu" class="hidden">
 <div class="relative">
 <button class="flex items-center space-x-2 bg-white bg-opacity-20 px-4 py-1 rounded-lg hover:bg-opacity-30 transition">
 <span id="usernameDisplay">User</span>
 <i class="fas fa-chevron-down"></i>
 </button>
 </div>
 </div>
 </div>
 </div>
 </header>
<!-- Main Content -->
 <main class="flex-grow container mx-auto px-4 py-6">
 <div class="flex flex-col lg:flex-row gap-6">
 <!-- Left Sidebar - Blocks -->
 <div class="w-full lg:w-1/4 bg-white rounded-xl shadow-md p-4">
 <div class="flex mb-4 border-b pb-2">
 <button onclick="changeTab('blocks')" class="tab-btn active px-4 py-2 font-medium text-purple-600 border-b-2 border-purple-600">Blocks</button>
 <button onclick="changeTab('costumes')" class="tab-btn px-4 py-2 font-medium text-blue-600">Costumes</button>
 <button onclick="changeTab('sounds')" class="tab-btn px-4 py-2 font-medium text-yellow-600">Sounds</button>
 </div>
<div id="blocks" class="tab-content active">
 <h3 class="font-bold text-lg mb-3 text-purple-700">Events</h3>
 <div class="block block-with-options" draggable="true" data-type="events" data-block="whenFlag" onclick="showBlockSelection('whenFlag')">
 <div class="flex items-center">
 <div class="w-6 h-6 rounded-full bg-green-500 mr-2"></div>
 <span>when flag clicked</span>
 <i class="fas fa-chevron-down ml-2 text-gray-500"></i>
 </div>
 <div class="block-connector"></div>
 </div>
 <div class="block block-with-options" draggable="true" data-type="events" data-block="whenKey" onclick="showBlockSelection('whenKey')">
 <div class="flex items-center">
 <div class="w-6 h-6 rounded-full bg-green-500 mr-2"></div>
 <span>when key pressed</span>
 <i class="fas fa-chevron-down ml-2 text-gray-500"></i>
 </div>
 <div class="block-connector"></div>
 </div>
<h3 class="font-bold text-lg mt-4 mb-3 text-purple-700">Motion</h3>
 <div class="block block-with-options" draggable="true" data-type="motion" data-block="move" onclick="showBlockSelection('move')">
 <div class="flex items-center">
 <div class="w-6 h-6 rounded-full bg-purple-500 mr-2"></div>
 <span>move steps</span>
 <i class="fas fa-chevron-down ml-2 text-gray-500"></i>
 </div>
 </div>
 <div class="block block-with-options" draggable="true" data-type="motion" data-block="turn" onclick="showBlockSelection('turn')">
 <div class="flex items-center">
 <div class="w-6 h-6 rounded-full bg-purple-500 mr-2"></div>
 <span>turn degrees</span>
 <i class="fas fa-chevron-down ml-2 text-gray-500"></i>
 </div>
 </div>
 <div class="block block-with-options" draggable="true" data-type="motion" data-block="goTo" onclick="showBlockSelection('goTo')">
 <div class="flex items-center">
 <div class="w-6 h-6 rounded-full bg-purple-500 mr-2"></div>
 <span>go to position</span>
 <i class="fas fa-chevron-down ml-2 text-gray-500"></i>
 </div>
 </div>
<h3 class="font-bold text-lg mt-4 mb-3 text-blue-600">Looks</h3>
 <div class="block block-with-options" draggable="true" data-type="looks" data-block="say" onclick="showBlockSelection('say')">
 <div class="flex items-center">
 <div class="w-6 h-6 rounded-full bg-blue-500 mr-2"></div>
 <span>say message</span>
 <i class="fas fa-chevron-down ml-2 text-gray-500"></i>
 </div>
 </div>
 <div class="block" draggable="true" data-type="looks" data-block="changeCostume">
 <div class="flex items-center">
 <div class="w-6 h-6 rounded-full bg-blue-500 mr-2"></div>
 <span>next costume</span>
 </div>
 </div>
 <div class="block block-with-options" draggable="true" data-type="looks" data-block="changeSize" onclick="showBlockSelection('changeSize')">
 <div class="flex items-center">
 <div class="w-6 h-6 rounded-full bg-blue-500 mr-2"></div>
 <span>change size by</span>
 <i class="fas fa-chevron-down ml-2 text-gray-500"></i>
 </div>
 </div>
<h3 class="font-bold text-lg mt-4 mb-3 text-yellow-600">Sound</h3>
 <div class="block block-with-options" draggable="true" data-type="sound" data-block="playSound" onclick="showBlockSelection('playSound')">
 <div class="flex items-center">
 <div class="w-6 h-6 rounded-full bg-yellow-500 mr-2"></div>
 <span>play sound</span>
 <i class="fas fa-chevron-down ml-2 text-gray-500"></i>
 </div>
 </div>
 <div class="block" draggable="true" data-type="sound" data-block="stopSound">
 <div class="flex items-center">
 <div class="w-6 h-6 rounded-full bg-yellow-500 mr-2"></div>
 <span>stop all sounds</span>
 </div>
 </div>
<h3 class="font-bold text-lg mt-4 mb-3 text-red-600">Control</h3>
 <div class="block block-with-options" draggable="true" data-type="control" data-block="wait" onclick="showBlockSelection('wait')">
 <div class="flex items-center">
 <div class="w-6 h-6 rounded-full bg-red-500 mr-2"></div>
 <span>wait seconds</span>
 <i class="fas fa-chevron-down ml-2 text-gray-500"></i>
 </div>
 </div>
 <div class="block block-with-options" draggable="true" data-type="control" data-block="repeat" onclick="showBlockSelection('repeat')">
 <div class="flex items-center">
 <div class="w-6 h-6 rounded-full bg-red-500 mr-2"></div>
 <span>repeat times</span>
 <i class="fas fa-chevron-down ml-2 text-gray-500"></i>
 </div>
 <div class="block-slot"></div>
 <div class="block-connector"></div>
 </div>
<h3 class="font-bold text-lg mt-4 mb-3 text-indigo-600">Conditionals</h3>
 <div class="block" draggable="true" data-type="control" data-block="if">
 <div class="flex items-center">
 <div class="w-6 h-6 rounded-full bg-indigo-500 mr-2"></div>
 <span>if &lt;condition&gt; then</span>
 </div>
 <div class="block-slot"></div>
 <div class="block-connector"></div>
 </div>
 </div>
<div id="costumes" class="tab-content">
 <div class="flex flex-wrap justify-center">
 <div class="costume-thumbnail m-2">
 <i class="fas fa-plus text-2xl text-gray-500"></i>
 </div>
 <div class="costume-thumbnail m-2">
 <i class="fas fa-tshirt text-3xl text-purple-500"></i>
 </div>
 <div class="costume-thumbnail m-2">
 <i class="fas fa-hat-wizard text-3xl text-blue-500"></i>
 </div>
 <div class="costume-thumbnail m-2">
 <i class="fas fa-mask text-3xl text-yellow-500"></i>
 </div>
 </div>
 </div>
<div id="sounds" class="tab-content">
 <button class="w-full bg-gray-200 hover:bg-gray-300 py-2 rounded-lg mb-4">
 <i class="fas fa-plus mr-2"></i> Add Sound
 </button>
 <div class="sound-item">
 <div>
 <i class="fas fa-music mr-2 text-purple-500"></i>
 <span>Pop Sound</span>
 </div>
 <button class="bg-purple-100 text-purple-700 px-3 py-1 rounded-lg hover:bg-purple-200">
 <i class="fas fa-play"></i>
 </button>
 </div>
 </div>
 </div>
<!-- Center - Workspace and Stage -->
 <div class="w-full lg:w-2/4 flex flex-col gap-4">
 <div class="workspace p-4" id="workspace">
 <div class="flag-btn" onclick="runScripts()">
 <i class="fas fa-flag"></i>
 </div>
 <p class="text-gray-500 text-center py-10">Drag blocks here to build your script</p>
 </div>
<div id="stage" class="w-full h-64 relative">
 <div id="currentSprite" class="draggable" style="left: 50%; top: 50%; transform: translate(-50%, -50%);">
 <i class="fas fa-cat text-4xl text-purple-600"></i>
 </div>
 <button class="absolute bottom-2 right-2 bg-white bg-opacity-80 px-3 py-1 rounded-lg hover:bg-opacity-100">
 <i class="fas fa-image mr-1"></i> Background
 </button>
 </div>
<div class="flex justify-center space-x-4">
 <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600" onclick="runScripts()">
 <i class="fas fa-play mr-2"></i> Run
 </button>
 <button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600" onclick="stopScripts()">
 <i class="fas fa-stop mr-2"></i> Stop
 </button>
 </div>
 </div>
<!-- Right Sidebar - Sprites -->
 <div class="w-full lg:w-1/4 bg-white rounded-xl shadow-md p-4">
 <div class="flex justify-between items-center mb-4">
 <h2 class="font-bold text-lg">Sprites</h2>
 <button class="bg-purple-100 text-purple-700 p-2 rounded-lg hover:bg-purple-200">
 <i class="fas fa-plus"></i>
 </button>
 </div>
<div class="grid grid-cols-3 gap-3">
 <div class="sprite bg-purple-100">
 <i class="fas fa-cat text-2xl text-purple-600"></i>
 </div>
 <div class="sprite bg-blue-100">
 <i class="fas fa-dog text-2xl text-blue-600"></i>
 </div>
 <div class="sprite bg-yellow-100">
 <i class="fas fa-user text-2xl text-yellow-600"></i>
 </div>
 </div>
<div class="mt-6">
 <div class="flex mb-4 border-b pb-2">
 <button onclick="changeRightTab('properties')" class="tab-btn active px-4 py-2 font-medium text-purple-600 border-b-2 border-purple-600">Properties</button>
 <button onclick="changeRightTab('multiplayer')" class="tab-btn px-4 py-2 font-medium text-blue-600">Multiplayer</button>
 <button onclick="changeRightTab('developers')" class="tab-btn px-4 py-2 font-medium text-yellow-600">Developers</button>
 </div>
<div id="properties" class="tab-content active">
 <div class="mb-4">
 <label class="block text-gray-700 mb-1">Sprite Name</label>
 <input type="text" value="Sprite1" class="w-full px-3 py-2 border rounded-lg">
 </div>
 <div class="mb-4">
 <label class="block text-gray-700 mb-1">Position</label>
 <div class="flex space-x-2">
 <input type="number" value="0" class="w-1/2 px-3 py-2 border rounded-lg" placeholder="X">
 <input type="number" value="0" class="w-1/2 px-3 py-2 border rounded-lg" placeholder="Y">
 </div>
 </div>
 <div class="mb-4">
 <label class="block text-gray-700 mb-1">Size</label>
 <input type="range" min="10" max="200" value="100" class="w-full">
 </div>
 <div class="mb-4">
 <label class="block text-gray-700 mb-1">Direction</label>
 <input type="range" min="0" max="360" value="90" class="w-full">
 </div>
 </div>
<div id="multiplayer" class="tab-content">
 <div class="text-center py-4">
 <i class="fas fa-users text-4xl text-blue-500 mb-3"></i>
 <h3 class="font-bold text-lg mb-2">Multiplayer VEO1</h3>
 <p class="text-gray-600 mb-4">Connect with friends to code together in real-time</p>
 <button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 w-full">
 <i class="fas fa-plug mr-2"></i> Connect
 </button>
 </div>
 </div>
<div id="developers" class="tab-content">
 <div class="text-center py-4">
 <i class="fas fa-code text-4xl text-yellow-500 mb-3"></i>
 <h3 class="font-bold text-lg mb-2">TurbONED Developers</h3>
 <div class="bg-yellow-100 p-3 rounded-lg mt-3">
 <div class="font-semibold">Diamond5diamond</div>
 <div class="text-sm text-gray-600">Lead Developer</div>
 </div>
 <p class="text-gray-600 mt-4">TurbONED is developed by a passionate team of coders who love creative programming.</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </main>
<!-- Footer -->
 <footer class="gradient-bg text-white py-4">
 <div class="container mx-auto px-4 text-center">
 <p>&copy; 2023 TurbONED - A creative coding platform</p>
 <div class="flex justify-center space-x-4 mt-2">
 <a href="#" class="hover:text-gray-200"><i class="fab fa-twitter"></i></a>
 <a href="#" class="hover:text-gray-200"><i class="fab fa-github"></i></a>
 <a href="#" class="hover:text-gray-200"><i class="fab fa-discord"></i></a>
 </div>
 </div>
 </footer>
 </div>
<!-- Block Selection Overlay -->
 <div class="block-selection-overlay" id="blockSelectionOverlay">
 <div class="block-selection-container">
 <div class="block-selection-header">
 <div class="block-selection-title" id="blockSelectionTitle">Select Block Options</div>
 <button class="block-selection-close" onclick="hideBlockSelection()">&times;</button>
 </div>
<div class="block-category-tabs" id="blockCategoryTabs">
 <div class="block-category-tab active" data-category="all">All</div>
 <div class="block-category-tab" data-category="motion">Motion</div>
 <div class="block-category-tab" data-category="looks">Looks</div>
 <div class="block-category-tab" data-category="sound">Sound</div>
 <div class="block-category-tab" data-category="control">Control</div>
 </div>
<div class="block-selection-grid" id="blockSelectionGrid">
 <!-- Blocks will be inserted here dynamically -->
 </div>
<div class="block-selection-footer">
 <button class="block-selection-btn block-selection-back" onclick="goBackInSelection()">
 <i class="fas fa-arrow-left mr-2"></i> Back
 </button>
 <button class="block-selection-btn block-selection-confirm" onclick="confirmBlockSelection()">
 Confirm Selection
 </button>
 </div>
 </div>
 </div>
<div class="creator-credit">
 Created by Google Veo Generation
 </div>
<script>
 // Global variables
 let currentUser = null;
 let isRunning = false;
 let activeScripts = [];
 let draggedBlock = null;
 let activeBlock = null;
 let blockInstances = new Set();
 let currentBlockType = null;
 let selectedBlockOption = null;
 let selectionHistory = [];
// Block options data
 const blockOptions = {
 whenFlag: [
 { name: "All Blocks", value: "all", description: "Execute all connected blocks", icon: "fa-code" },
 { name: "Motion Blocks", value: "motion", description: "Execute only motion blocks", icon: "fa-arrows-alt" },
 { name: "Looks Blocks", value: "looks", description: "Execute only looks blocks", icon: "fa-eye" },
 { name: "Sound Blocks", value: "sound", description: "Execute only sound blocks", icon: "fa-music" },
 { name: "Control Blocks", value: "control", description: "Execute only control blocks", icon: "fa-cogs" }
 ],
 whenKey: [
 { name: "Space", value: "space", description: "Trigger when space key is pressed", icon: "fa-keyboard" },
 { name: "Up Arrow", value: "up", description: "Trigger when up arrow is pressed", icon: "fa-arrow-up" },
 { name: "Down Arrow", value: "down", description: "Trigger when down arrow is pressed", icon: "fa-arrow-down" },
 { name: "Left Arrow", value: "left", description: "Trigger when left arrow is pressed", icon: "fa-arrow-left" },
 { name: "Right Arrow", value: "right", description: "Trigger when right arrow is pressed", icon: "fa-arrow-right" }
 ],
 move: [
 { name: "10 Steps", value: "10", description: "Move forward 10 steps", icon: "fa-arrow-right" },
 { name: "20 Steps", value: "20", description: "Move forward 20 steps", icon: "fa-arrow-right" },
 { name: "50 Steps", value: "50", description: "Move forward 50 steps", icon: "fa-arrow-right" },
 { name: "100 Steps", value: "100", description: "Move forward 100 steps", icon: "fa-arrow-right" },
 { name: "10 Steps Back", value: "-10", description: "Move backward 10 steps", icon: "fa-arrow-left" },
 { name: "20 Steps Back", value: "-20", description: "Move backward 20 steps", icon: "fa-arrow-left" },
 { name: "50 Steps Back", value: "-50", description: "Move backward 50 steps", icon: "fa-arrow-left" }
 ],
 turn: [
 { name: "15 Degrees Right", value: "15", description: "Turn 15 degrees to the right", icon: "fa-redo" },
 { name: "30 Degrees Right", value: "30", description: "Turn 30 degrees to the right", icon: "fa-redo" },
 { name: "45 Degrees Right", value: "45", description: "Turn 45 degrees to the right", icon: "fa-redo" },
 { name: "90 Degrees Right", value: "90", description: "Turn 90 degrees to the right", icon: "fa-redo" },
 { name: "15 Degrees Left", value: "-15", description: "Turn 15 degrees to the left", icon: "fa-undo" },
 { name: "30 Degrees Left", value: "-30", description: "Turn 30 degrees to the left", icon: "fa-undo" }
 ],
 goTo: [
 { name: "Random Position", value: "random", description: "Go to a random position on stage", icon: "fa-random" },
 { name: "Mouse Pointer", value: "mouse", description: "Go to current mouse position", icon: "fa-mouse-pointer" },
 { name: "Center", value: "center", description: "Go to center of stage", icon: "fa-crosshairs" }
 ],
 say: [
 { name: "Hello!", value: "Hello!", description: "Say 'Hello!' for 2 seconds", icon: "fa-comment" },
 { name: "Hi there!", value: "Hi there!", description: "Say 'Hi there!' for 2 seconds", icon: "fa-comment" },
 { name: "Welcome!", value: "Welcome!", description: "Say 'Welcome!' for 2 seconds", icon: "fa-comment" }
 ],
 changeSize: [
 { name: "Increase by 10", value: "10", description: "Increase size by 10%", icon: "fa-search-plus" },
 { name: "Increase by 20", value: "20", description: "Increase size by 20%", icon: "fa-search-plus" },
 { name: "Increase by 50", value: "50", description: "Increase size by 50%", icon: "fa-search-plus" },
 { name: "Decrease by 10", value: "-10", description: "Decrease size by 10%", icon: "fa-search-minus" }
 ],
 playSound: [
 { name: "Pop Sound", value: "pop", description: "Play the pop sound effect", icon: "fa-volume-up" },
 { name: "Drum Sound", value: "drum", description: "Play the drum sound effect", icon: "fa-drum" },
 { name: "Bell Sound", value: "bell", description: "Play the bell sound effect", icon: "fa-bell" }
 ],
 wait: [
 { name: "1 Second", value: "1", description: "Wait for 1 second", icon: "fa-clock" },
 { name: "2 Seconds", value: "2", description: "Wait for 2 seconds", icon: "fa-clock" },
 { name: "5 Seconds", value: "5", description: "Wait for 5 seconds", icon: "fa-clock" }
 ],
 repeat: [
 { name: "5 Times", value: "5", description: "Repeat 5 times", icon: "fa-sync" },
 { name: "10 Times", value: "10", description: "Repeat 10 times", icon: "fa-sync" },
 { name: "20 Times", value: "20", description: "Repeat 20 times", icon: "fa-sync" }
 ]
 };
 // Initialize the app
 document.addEventListener('DOMContentLoaded', function() {
 // Setup block options
 setupBlockOptions();
// Make all initial blocks draggable
 const blocks = document.querySelectorAll('[draggable="true"]');
 blocks.forEach(block => {
 setupBlockDrag(block);
 });
// Setup workspace drop zone
 const workspace = document.getElementById('workspace');
 workspace.addEventListener('dragover', function(e) {
 e.preventDefault();
 this.classList.add('bg-gray-100');
 });
workspace.addEventListener('dragleave', function() {
 this.classList.remove('bg-gray-100');
 });
workspace.addEventListener('drop', function(e) {
 e.preventDefault();
 this.classList.remove('bg-gray-100');
if (draggedBlock) {
 // Generate unique ID for the block
 const blockId = 'block-' + Date.now() + '-' + Math.floor(Math.random() * 1000);
const newBlock = draggedBlock.cloneNode(true);
 newBlock.id = blockId;
 newBlock.style.position = 'absolute';
 newBlock.style.left = (e.clientX - this.getBoundingClientRect().left - 50) + 'px';
 newBlock.style.top = (e.clientY - this.getBoundingClientRect().top - 20) + 'px';
 newBlock.style.margin = '0';
// Check if this block already exists in workspace
 if (!blockInstances.has(blockId)) {
 this.appendChild(newBlock);
 blockInstances.add(blockId);
 setupBlockDrag(newBlock);
 setupBlockConnectors(newBlock);
 setupBlockClick(newBlock);
// Remove "Drag blocks here" message if it exists
 const message = this.querySelector('p.text-center');
 if (message) {
 message.remove();
 }
 }
 }
 });
// Make sprites draggable on stage
 const sprite = document.getElementById('currentSprite');
 makeDraggable(sprite);
// Setup click events for blocks in workspace
 document.querySelectorAll('#workspace .block').forEach(block => {
 setupBlockClick(block);
 });
// Setup category tabs
 document.querySelectorAll('.block-category-tab').forEach(tab => {
 tab.addEventListener('click', function() {
 document.querySelectorAll('.block-category-tab').forEach(t => {
 t.classList.remove('active');
 });
 this.classList.add('active');
const category = this.getAttribute('data-category');
 filterBlocksByCategory(category);
 });
 });
 });
// Show block selection overlay
 function showBlockSelection(blockType) {
 currentBlockType = blockType;
 selectionHistory = [];
const overlay = document.getElementById('blockSelectionOverlay');
 const title = document.getElementById('blockSelectionTitle');
 const grid = document.getElementById('blockSelectionGrid');
// Set title based on block type
 switch(blockType) {
 case 'whenFlag':
 title.textContent = "When Flag Clicked - Select Blocks to Execute";
 break;
 case 'whenKey':
 title.textContent = "When Key Pressed - Select Key";
 break;
 case 'move':
 title.textContent = "Move Steps - Select Distance";
 break;
 case 'turn':
 title.textContent = "Turn Degrees - Select Angle";
 break;
 case 'goTo':
 title.textContent = "Go To - Select Position";
 break;
 case 'say':
 title.textContent = "Say Message - Select Text";
 break;
 case 'changeSize':
 title.textContent = "Change Size - Select Amount";
 break;
 case 'playSound':
 title.textContent = "Play Sound - Select Sound";
 break;
 case 'wait':
 title.textContent = "Wait - Select Duration";
 break;
 case 'repeat':
 title.textContent = "Repeat - Select Times";
 break;
 default:
 title.textContent = "Select Options";
 }
// Clear the grid
 grid.innerHTML = '';
// Add blocks to the grid
 if (blockOptions[blockType]) {
 blockOptions[blockType].forEach(option => {
 const blockItem = document.createElement('div');
 blockItem.className = 'block-selection-item';
 blockItem.setAttribute('data-value', option.value);
 blockItem.innerHTML = `
 <div class="block-selection-icon">
 <i class="fas ${option.icon}"></i>
 </div>
 <div class="block-selection-name">${option.name}</div>
 <div class="block-selection-description">${option.description}</div>
 `;
blockItem.addEventListener('click', function() {
 document.querySelectorAll('.block-selection-item').forEach(item => {
 item.classList.remove('active');
 });
 this.classList.add('active');
 selectedBlockOption = this.getAttribute('data-value');
 });
grid.appendChild(blockItem);
 });
 }
// Show the overlay
 overlay.style.display = 'flex';
 }
// Hide block selection overlay
 function hideBlockSelection() {
 document.getElementById('blockSelectionOverlay').style.display = 'none';
 currentBlockType = null;
 selectedBlockOption = null;
 }
// Confirm block selection
 function confirmBlockSelection() {
 if (selectedBlockOption && activeBlock) {
 const blockText = activeBlock.querySelector('span');
switch(currentBlockType) {
 case 'whenFlag':
 if (selectedBlockOption === 'all') {
 blockText.textContent = 'when flag clicked (all blocks)';
 } else {
 blockText.textContent = `when flag clicked (${selectedBlockOption} blocks)`;
 }
 break;
 case 'whenKey':
 blockText.textContent = `when ${selectedBlockOption} pressed`;
 break;
 case 'move':
 if (selectedBlockOption.startsWith('-')) {
 blockText.textContent = `move ${selectedBlockOption.substring(1)} steps back`;
 } else {
 blockText.textContent = `move ${selectedBlockOption} steps`;
 }
 break;
 case 'turn':
 if (selectedBlockOption.startsWith('-')) {
 blockText.textContent = `turn ${selectedBlockOption.substring(1)} degrees left`;
 } else {
 blockText.textContent = `turn ${selectedBlockOption} degrees right`;
 }
 break;
 case 'goTo':
 blockText.textContent = `go to ${selectedBlockOption}`;
 break;
 case 'say':
 blockText.textContent = `say ${selectedBlockOption} for 2 seconds`;
 break;
 case 'changeSize':
 blockText.textContent = `change size by ${selectedBlockOption}`;
 break;
 case 'playSound':
 blockText.textContent = `play sound ${selectedBlockOption}`;
 break;
 case 'wait':
 blockText.textContent = `wait ${selectedBlockOption} second${selectedBlockOption !== '1' ? 's' : ''}`;
 break;
 case 'repeat':
 blockText.textContent = `repeat ${selectedBlockOption} times`;
 break;
 }
 }
hideBlockSelection();
 }
// Go back in selection
 function goBackInSelection() {
 // In this simple implementation, just hide the selection
 hideBlockSelection();
 }
// Filter blocks by category
 function filterBlocksByCategory(category) {
 if (category === 'all') {
 document.querySelectorAll('.block-selection-item').forEach(item => {
 item.style.display = 'block';
 });
 return;
 }
document.querySelectorAll('.block-selection-item').forEach(item => {
 // In a real implementation, you would filter based on actual categories
 // For now, we'll just show all items
 item.style.display = 'block';
 });
 }
// Setup block options functionality
 function setupBlockOptions() {
 document.querySelectorAll('.block-with-options').forEach(block => {
 const optionsBtn = block.querySelector('.fa-chevron-down');
 const blockType = block.getAttribute('data-block');
optionsBtn.addEventListener('click', function(e) {
 e.stopPropagation();
 activeBlock = block;
 showBlockSelection(blockType);
 });
 });
 }
// Setup block drag functionality
 function setupBlockDrag(block) {
 block.addEventListener('dragstart', function(e) {
 draggedBlock = this;
 this.classList.add('dragging');
 e.dataTransfer.setData('text/plain', this.outerHTML);
 });
block.addEventListener('dragend', function() {
 this.classList.remove('dragging');
 draggedBlock = null;
 });
 }
// Setup block click functionality
 function setupBlockClick(block) {
 block.addEventListener('click', function(e) {
 // Don't activate if we're clicking on options
 if (e.target.closest('.block-options') || e.target.classList.contains('fa-chevron-down')) {
 return;
 }
// Deactivate previous active block
 if (activeBlock) {
 activeBlock.classList.remove('active');
 }
// Activate this block
 this.classList.add('active');
 activeBlock = this;
// Execute the block's action
 const blockType = this.getAttribute('data-block');
 executeBlock(blockType, this);
 });
 }
// Setup block connectors
 function setupBlockConnectors(block) {
 // Setup bottom connector
 const connector = block.querySelector('.block-connector');
 if (connector) {
 connector.addEventListener('dragover', function(e) {
 e.preventDefault();
 this.style.backgroundColor = 'rgba(110, 69, 226, 0.4)';
 });
connector.addEventListener('dragleave', function() {
 this.style.backgroundColor = 'rgba(110, 69, 226, 0.2)';
 });
connector.addEventListener('drop', function(e) {
 e.preventDefault();
 this.style.backgroundColor = 'rgba(110, 69, 226, 0.2)';
if (draggedBlock) {
 // Generate unique ID for the block
 const blockId = 'block-' + Date.now() + '-' + Math.floor(Math.random() * 1000);
const newBlock = draggedBlock.cloneNode(true);
 newBlock.id = blockId;
 newBlock.classList.add('connected-block');
 newBlock.style.position = 'relative';
 newBlock.style.left = '0';
 newBlock.style.top = '0';
 newBlock.style.margin = '0';
// Check if this block already exists in workspace
 if (!blockInstances.has(blockId)) {
 // Insert after the current block
 block.parentNode.insertBefore(newBlock, block.nextSibling);
 blockInstances.add(blockId);
// Setup drag for the new block
 setupBlockDrag(newBlock);
// Setup connectors for the new block
 setupBlockConnectors(newBlock);
// Setup click for the new block
 setupBlockClick(newBlock);
 }
 }
 });
 }
// Setup block slots (for if, repeat, etc.)
 const slots = block.querySelectorAll('.block-slot');
 slots.forEach(slot => {
 slot.addEventListener('dragover', function(e) {
 e.preventDefault();
 this.classList.add('highlight');
 });
slot.addEventListener('dragleave', function() {
 this.classList.remove('highlight');
 });
slot.addEventListener('drop', function(e) {
 e.preventDefault();
 this.classList.remove('highlight');
if (draggedBlock) {
 // Generate unique ID for the block
 const blockId = 'block-' + Date.now() + '-' + Math.floor(Math.random() * 1000);
const newBlock = draggedBlock.cloneNode(true);
 newBlock.id = blockId;
 newBlock.style.position = 'relative';
 newBlock.style.left = '0';
 newBlock.style.top = '0';
 newBlock.style.margin = '5px 0';
// Check if this block already exists in workspace
 if (!blockInstances.has(blockId)) {
 // Clear the slot and add the new block
 this.innerHTML = '';
 this.appendChild(newBlock);
 blockInstances.add(blockId);
// Setup drag for the new block
 setupBlockDrag(newBlock);
// Setup connectors for the new block
 setupBlockConnectors(newBlock);
// Setup click for the new block
 setupBlockClick(newBlock);
 }
 }
 });
 });
 }
// Make elements draggable
 function makeDraggable(element) {
 let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
element.onmousedown = dragMouseDown;
function dragMouseDown(e) {
 e = e || window.event;
 e.preventDefault();
// Get the mouse cursor position at startup
 pos3 = e.clientX;
 pos4 = e.clientY;
document.onmouseup = closeDragElement;
 document.onmousemove = elementDrag;
 }
function elementDrag(e) {
 e = e || window.event;
 e.preventDefault();
// Calculate the new cursor position
 pos1 = pos3 - e.clientX;
 pos2 = pos4 - e.clientY;
 pos3 = e.clientX;
 pos4 = e.clientY;
// Set the element's new position
 element.style.top = (element.offsetTop - pos2) + "px";
 element.style.left = (element.offsetLeft - pos1) + "px";
 }
function closeDragElement() {
 // Stop moving when mouse button is released
 document.onmouseup = null;
 document.onmousemove = null;
 }
 }
// Tab functionality
 function changeTab(tabName) {
 document.querySelectorAll('.tab-btn').forEach(btn => {
 btn.classList.remove('active');
 btn.classList.remove('border-b-2');
 btn.classList.remove('border-purple-600');
 });
document.querySelectorAll('.tab-content').forEach(content => {
 content.classList.remove('active');
 });
event.target.classList.add('active');
 event.target.classList.add('border-b-2');
 event.target.classList.add('border-purple-600');
 document.getElementById(tabName).classList.add('active');
 }
function changeRightTab(tabName) {
 document.querySelectorAll('#properties, #multiplayer, #developers').forEach(tab => {
 tab.classList.remove('active');
 });
document.querySelectorAll('.tab-btn').forEach(btn => {
 btn.classList.remove('active');
 btn.classList.remove('border-b-2');
 btn.classList.remove('border-purple-600');
 });
event.target.classList.add('active');
 event.target.classList.add('border-b-2');
 event.target.classList.add('border-purple-600');
 document.getElementById(tabName).classList.add('active');
 }
// Script execution functions
 function runScripts() {
 if (isRunning) {
 stopScripts();
 }
isRunning = true;
 activeScripts = [];
// Find all "when flag clicked" blocks in workspace
 const flagBlocks = document.querySelectorAll('#workspace [data-block="whenFlag"]');
flagBlocks.forEach(block => {
 const script = [];
 let currentBlock = block;
// Collect all connected blocks below the flag block
 while (currentBlock) {
 script.push(currentBlock);
// Check if there's a block connected below
 const nextBlock = currentBlock.nextElementSibling;
 if (nextBlock && nextBlock.classList.contains('connected-block')) {
 currentBlock = nextBlock;
 } else {
 currentBlock = null;
 }
 }
if (script.length > 0) {
 activeScripts.push(script);
 }
 });
// Execute all collected scripts
 activeScripts.forEach(script => {
 executeScript(script);
 });
 }
function stopScripts() {
 isRunning = false;
 activeScripts = [];
// Reset sprite position to center
 const sprite = document.getElementById('currentSprite');
 sprite.style.left = '50%';
 sprite.style.top = '50%';
 sprite.style.transform = 'translate(-50%, -50%)';
// Remove active state from all blocks
 document.querySelectorAll('.block.active').forEach(block => {
 block.classList.remove('active');
 });
 activeBlock = null;
 }
function executeScript(script) {
 if (!isRunning) return;
let delay = 0;
script.forEach((block, index) => {
 const blockType = block.getAttribute('data-block');
setTimeout(() => {
 if (!isRunning) return;
// Highlight the current executing block
 block.classList.add('active');
 setTimeout(() => {
 block.classList.remove('active');
 }, 500);
// Execute the block's action
 executeBlock(blockType, block);
}, delay);
// Add delay between blocks (1 second by default)
 delay += 1000;
 });
 }
function executeBlock(blockType, blockElement) {
 const sprite = document.getElementById('currentSprite');
 let value = '';
// Get the selected value from the block if it has options
 if (blockElement) {
 const blockText = blockElement.querySelector('span').textContent;
switch(blockType) {
 case 'whenFlag':
 value = blockText.match(/when flag clicked \((.*)\)/)?.[1] || 'all';
 // In a full implementation, this would filter which blocks to execute
 break;
 case 'whenKey':
 value = blockText.match(/when (.*) pressed/)[1];
 break;
 case 'move':
 const moveMatch = blockText.match(/move (.*) steps( back)?/);
 value = moveMatch[2] ? '-' + moveMatch[1] : moveMatch[1];
 break;
 case 'turn':
 const turnMatch = blockText.match(/turn (.*) degrees( left)?/);
 value = turnMatch[2] ? '-' + turnMatch[1] : turnMatch[1];
 break;
 case 'goTo':
 value = blockText.match(/go to (.*)/)[1];
 break;
 case 'say':
 value = blockText.match(/say (.*) for/)[1];
 break;
 case 'changeSize':
 value = blockText.match(/change size by (.*)/)[1];
 break;
 case 'playSound':
 value = blockText.match(/play sound (.*)/)[1];
 break;
 case 'wait':
 value = blockText.match(/wait (.*) second/)[1];
 break;
 case 'repeat':
 value = blockText.match(/repeat (.*) times/)[1];
 break;
 }
 }
switch(blockType) {
 case 'whenFlag':
 // This is just a trigger, no action needed
 break;
case 'afterThis':
 // This is just a connector, no action needed
 break;
case 'move':
 const currentLeft = parseInt(sprite.style.left || '50%');
 sprite.style.left = (currentLeft + parseInt(value)) + 'px';
 break;
case 'turn':
 const currentRotation = parseInt(sprite.style.transform.replace(/[^0-9\-]/g, '') || '0');
 sprite.style.transform = `translate(-50%, -50%) rotate(${currentRotation + parseInt(value)}deg)`;
 break;
case 'goTo':
 const stage = document.getElementById('stage');
 const stageRect = stage.getBoundingClientRect();
if (value === 'random') {
 const randomX = Math.floor(Math.random() * (stageRect.width - 50));
 const randomY = Math.floor(Math.random() * (stageRect.height - 50));
 sprite.style.left = randomX + 'px';
 sprite.style.top = randomY + 'px';
 } else if (value === 'center') {
 sprite.style.left = '50%';
 sprite.style.top = '50%';
 sprite.style.transform = 'translate(-50%, -50%)';
 }
 break;
case 'say':
 // In a real implementation, this would show a speech bubble
 alert(value);
 break;
case 'changeCostume':
 // Cycle through costumes
 const currentIcon = sprite.querySelector('i');
 if (currentIcon) {
 if (currentIcon.classList.contains('fa-cat')) {
 currentIcon.className = 'fas fa-dog text-4xl text-blue-600';
 } else if (currentIcon.classList.contains('fa-dog')) {
 currentIcon.className = 'fas fa-user text-4xl text-yellow-600';
 } else {
 currentIcon.className = 'fas fa-cat text-4xl text-purple-600';
 }
 }
 break;
case 'changeSize':
 const currentSize = parseInt(sprite.style.fontSize || '40');
 sprite.style.fontSize = (currentSize + parseInt(value)) + 'px';
 break;
case 'playSound':
 // In a real implementation, this would play the actual sound
 console.log('Playing sound:', value);
 alert(`Playing ${value} sound`);
 break;
case 'stopSound':
 // In a real implementation, this would stop all sounds
 console.log('Stopping all sounds');
 break;
case 'wait':
 // The delay is already handled by the script execution
 break;
case 'repeat':
 // In a full implementation, this would repeat the nested blocks
 break;
case 'whenKey':
 // This is just a trigger, no action needed
 break;
case 'if':
 // In a full implementation, this would check condition and execute nested blocks
 break;
 }
 }
 </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=DeepSiteOptional/turboned-developent" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>