// Game state
       let gameState = {
           budget: 500000,
           usedBudget: 0,
           selectedMaterial: null,
           bridgeParts: {
               'foundation-left': null,
               'foundation-right': null,
               'deck': null,
               'cables': null
           },
           isBuilt: false,
           testLoad: 3,
           isCollapsed: false
       };

       // Material properties
       const materials = {
           kayu: { name: 'Kayu', cost: 50000, strength: 3, flexibility: 4, waterResistance: 2, color: '#D2691E', emoji: '🪵' },
           beton: { name: 'Beton', cost: 100000, strength: 5, flexibility: 2, waterResistance: 5, color: '#696969', emoji: '🧱' },
           baja: { name: 'Baja', cost: 150000, strength: 5, flexibility: 5, waterResistance: 3, color: '#708090', emoji: '🔩' },
           bambu: { name: 'Bambu', cost: 30000, strength: 2, flexibility: 5, waterResistance: 2, color: '#228B22', emoji: '🎋' }
       };

       // Initialize the game
       function initGame() {
           updateDisplay();
           setupEventListeners();
           updateLoadValue(); // Initialize load slider display
       }

       function updateDisplay() {
           document.getElementById('budget').textContent = `Rp ${gameState.budget.toLocaleString('id-ID')}`;
           document.getElementById('usedBudget').textContent = `Rp ${gameState.usedBudget.toLocaleString('id-ID')}`;
           
           // Update test button state
           const testButton = document.getElementById('testButton');
           const allPartsBuilt = Object.values(gameState.bridgeParts).every(part => part !== null);
           testButton.disabled = !allPartsBuilt;
           testButton.classList.toggle('opacity-50', !allPartsBuilt);
       }

       function setupEventListeners() {
           // Material selection
           document.querySelectorAll('.material-card').forEach(card => {
               card.addEventListener('click', () => selectMaterial(card.dataset.material));
           });

           // Bridge part selection
           document.querySelectorAll('.bridge-part').forEach(part => {
               part.addEventListener('click', () => buildPart(part.dataset.part));
           });

           // Load slider
           document.getElementById('loadSlider').addEventListener('input', updateLoadValue);

           // Control buttons
           document.getElementById('buildButton').addEventListener('click', buildBridge);
           document.getElementById('testButton').addEventListener('click', testBridge);
           document.getElementById('resetButton').addEventListener('click', resetGame);
       }

       function updateLoadValue() {
           const slider = document.getElementById('loadSlider');
           const loadValue = document.getElementById('loadValue');
           const loadDescription = document.getElementById('loadDescription');
           
           gameState.testLoad = parseInt(slider.value);
           loadValue.textContent = `${gameState.testLoad} ton`;
           
           const descriptions = {
               1: "Beban Sangat Ringan - Sepeda motor",
               2: "Beban Ringan - Mobil kecil", 
               3: "Beban Sedang - Mobil sedan",
               4: "Beban Menengah - SUV",
               5: "Beban Berat - Truk kecil",
               6: "Beban Sangat Berat - Truk sedang",
               7: "Beban Ekstrem - Truk besar",
               8: "Beban Berbahaya - Truk trailer",
               9: "Beban Kritis - Truk kontainer",
               10: "Beban Maksimal - Truk gandeng"
           };
           
           loadDescription.textContent = descriptions[gameState.testLoad];
       }

       function selectMaterial(materialType) {
           gameState.selectedMaterial = materialType;
           
           // Update UI
           document.querySelectorAll('.material-card').forEach(card => {
               card.classList.remove('selected');
           });
           document.querySelector(`[data-material="${materialType}"]`).classList.add('selected');
           
           updateInfoPanel(`Material ${materials[materialType].name} dipilih! Klik bagian jembatan untuk membangunnya.`);
       }

       function buildPart(partName) {
           if (!gameState.selectedMaterial) {
               updateInfoPanel('Pilih material terlebih dahulu!', 'warning');
               return;
           }

           const material = materials[gameState.selectedMaterial];
           const cost = material.cost;

           if (gameState.usedBudget + cost > gameState.budget) {
               updateInfoPanel('Anggaran tidak cukup! Pilih material yang lebih murah.', 'error');
               return;
           }

           // Update game state
           gameState.bridgeParts[partName] = gameState.selectedMaterial;
           gameState.usedBudget += cost;

           // Update visual
           const partElement = document.getElementById(partName);
           partElement.style.backgroundColor = material.color;
           partElement.style.borderColor = material.color;
           
           // Add material emoji
           const existingEmoji = partElement.querySelector('.material-emoji');
           if (existingEmoji) existingEmoji.remove();
           
           const emojiSpan = document.createElement('span');
           emojiSpan.className = 'material-emoji absolute top-0 right-0 text-lg';
           emojiSpan.textContent = material.emoji;
           partElement.appendChild(emojiSpan);

           updateDisplay();
           updateInfoPanel(`${material.name} dipasang pada ${getPartDisplayName(partName)}! Biaya: Rp ${cost.toLocaleString('id-ID')}`);
       }

       function buildBridge() {
           const allPartsBuilt = Object.values(gameState.bridgeParts).every(part => part !== null);
           
           if (!allPartsBuilt) {
               updateInfoPanel('Lengkapi semua bagian jembatan terlebih dahulu!', 'warning');
               return;
           }

           gameState.isBuilt = true;
           updateInfoPanel('Jembatan selesai dibangun! Sekarang Anda bisa mengujinya.', 'success');
           
           // Enable test button
           document.getElementById('testButton').disabled = false;
           document.getElementById('testButton').classList.remove('opacity-50');
       }

       function testBridge() {
           if (!gameState.isBuilt || gameState.isCollapsed) return;

           // Calculate bridge strength
           let totalStrength = 0;
           let totalFlexibility = 0;
           let totalWaterResistance = 0;

           Object.values(gameState.bridgeParts).forEach(materialType => {
               const material = materials[materialType];
               totalStrength += material.strength;
               totalFlexibility += material.flexibility;
               totalWaterResistance += material.waterResistance;
           });

           const averageStrength = totalStrength / 4;
           const averageFlexibility = totalFlexibility / 4;
           const averageWaterResistance = totalWaterResistance / 4;

           // Calculate load capacity vs test load
           const bridgeCapacity = averageStrength * 2; // Each strength point = 2 ton capacity
           const loadStress = gameState.testLoad / bridgeCapacity;
           
           // Animate truck crossing
           const truck = document.getElementById('testTruck');
           truck.classList.remove('hidden');
           truck.style.left = '-100px';
           
           // Update truck size based on load
           const truckEmoji = truck.querySelector('div');
           if (gameState.testLoad <= 3) {
               truckEmoji.textContent = '🚗';
           } else if (gameState.testLoad <= 6) {
               truckEmoji.textContent = '🚛';
           } else {
               truckEmoji.textContent = '🚚';
           }
           
           setTimeout(() => {
               truck.style.left = 'calc(100% + 50px)';
           }, 100);

           // Add bridge animation based on load stress
           document.querySelectorAll('.bridge-part').forEach(part => {
               if (loadStress > 1.2) {
                   // Overloaded - show cracks first
                   part.classList.add('crack-effect');
               } else {
                   part.classList.add('test-animation');
               }
           });

           // Determine test result
           setTimeout(() => {
               const success = loadStress <= 1.0;
               const catastrophicFailure = loadStress > 1.5;
               
               if (catastrophicFailure) {
                   // Bridge collapses
                   gameState.isCollapsed = true;
                   document.querySelectorAll('.bridge-part').forEach(part => {
                       part.classList.remove('test-animation', 'crack-effect');
                       part.classList.add('collapse-animation');
                   });
                   showTestResult(false, averageStrength, averageFlexibility, averageWaterResistance, true, loadStress);
               } else {
                   showTestResult(success, averageStrength, averageFlexibility, averageWaterResistance, false, loadStress);
                   
                   // Reset animations
                   document.querySelectorAll('.bridge-part').forEach(part => {
                       part.classList.remove('test-animation', 'crack-effect');
                       if (success) {
                           part.classList.add('success-glow');
                       } else {
                           part.classList.add('failure-shake');
                       }
                   });
               }

               setTimeout(() => {
                   truck.classList.add('hidden');
                   if (!gameState.isCollapsed) {
                       document.querySelectorAll('.bridge-part').forEach(part => {
                           part.classList.remove('success-glow', 'failure-shake');
                       });
                   }
               }, 2000);
           }, 3000);
       }

       function showTestResult(success, strength, flexibility, waterResistance, collapsed, loadStress) {
           const resultDisplay = document.getElementById('resultDisplay');
           const resultMessage = document.getElementById('resultMessage');
           const capacity = strength * 2;
           
           if (collapsed) {
               resultMessage.className = 'inline-block px-6 py-3 rounded-lg font-bold text-lg bg-red-100 text-red-800 border border-red-300';
               resultMessage.innerHTML = `
                   💥 JEMBATAN RUNTUH! 💥<br>
                   <span class="text-sm">Beban ${gameState.testLoad} ton terlalu berat untuk kapasitas ${capacity.toFixed(1)} ton!<br>
                   Stress: ${(loadStress * 100).toFixed(0)}% | Kekuatan: ${strength.toFixed(1)} | Fleksibilitas: ${flexibility.toFixed(1)}</span>
               `;
           } else if (success) {
               resultMessage.className = 'inline-block px-6 py-3 rounded-lg font-bold text-lg bg-green-100 text-green-800 border border-green-300';
               resultMessage.innerHTML = `
                   🎉 JEMBATAN AMAN! 🎉<br>
                   <span class="text-sm">Beban ${gameState.testLoad} ton berhasil dilalui!<br>
                   Kapasitas: ${capacity.toFixed(1)} ton | Stress: ${(loadStress * 100).toFixed(0)}% | Kekuatan: ${strength.toFixed(1)}</span>
               `;
           } else {
               resultMessage.className = 'inline-block px-6 py-3 rounded-lg font-bold text-lg bg-yellow-100 text-yellow-800 border border-yellow-300';
               resultMessage.innerHTML = `
                   ⚠️ JEMBATAN RETAK! ⚠️<br>
                   <span class="text-sm">Beban ${gameState.testLoad} ton menyebabkan kerusakan!<br>
                   Kapasitas: ${capacity.toFixed(1)} ton | Stress: ${(loadStress * 100).toFixed(0)}% | Berbahaya!</span>
               `;
           }
           
           resultDisplay.classList.remove('hidden');
           
           setTimeout(() => {
               resultDisplay.classList.add('hidden');
           }, 5000);
       }

       function resetGame() {
           gameState = {
               budget: 500000,
               usedBudget: 0,
               selectedMaterial: null,
               bridgeParts: {
                   'foundation-left': null,
                   'foundation-right': null,
                   'deck': null,
                   'cables': null
               },
               isBuilt: false,
               testLoad: 3,
               isCollapsed: false
           };

           // Reset visual elements
           document.querySelectorAll('.bridge-part').forEach(part => {
               part.style.backgroundColor = '#9CA3AF';
               part.style.borderColor = '#6B7280';
               part.style.transform = '';
               part.style.opacity = '';
               part.classList.remove('collapse-animation', 'crack-effect', 'success-glow', 'failure-shake', 'test-animation');
               const emoji = part.querySelector('.material-emoji');
               if (emoji) emoji.remove();
           });

           document.querySelectorAll('.material-card').forEach(card => {
               card.classList.remove('selected');
           });

           // Reset load slider
           document.getElementById('loadSlider').value = 3;
           updateLoadValue();

           updateDisplay();
           updateInfoPanel('Game direset! Mulai membangun jembatan baru.');
       }

       function updateInfoPanel(message, type = 'info') {
           const infoPanel = document.getElementById('infoPanel');
           const colors = {
               info: 'bg-blue-50 border-blue-200 text-blue-700',
               success: 'bg-green-50 border-green-200 text-green-700',
               warning: 'bg-yellow-50 border-yellow-200 text-yellow-700',
               error: 'bg-red-50 border-red-200 text-red-700'
           };
           
           infoPanel.className = `mt-6 p-4 border rounded-lg ${colors[type]}`;
           infoPanel.innerHTML = `<h3 class="font-bold mb-2">💡 Info:</h3><p class="text-sm">${message}</p>`;
       }

       function getPartDisplayName(partName) {
           const names = {
               'foundation-left': 'Pondasi Kiri',
               'foundation-right': 'Pondasi Kanan',
               'deck': 'Lantai Jembatan',
               'cables': 'Kabel Penyangga'
           };
           return names[partName] || partName;
       }

       // Element SDK implementation
       async function onConfigChange(config) {
           document.getElementById('gameTitle').textContent = config.game_title || defaultConfig.game_title;
           document.getElementById('budgetLabel').textContent = config.budget_label || defaultConfig.budget_label;
           document.getElementById('materialsHeader').textContent = config.materials_header || defaultConfig.materials_header;
           document.getElementById('buildButton').innerHTML = `${config.build_button || defaultConfig.build_button}`;
           document.getElementById('testButton').innerHTML = `${config.test_button || defaultConfig.test_button}`;
       }

       function mapToCapabilities(config) {
           return {
               recolorables: [],
               borderables: [],
               fontEditable: undefined,
               fontSizeable: undefined
           };
       }

       function mapToEditPanelValues(config) {
           return new Map([
               ["game_title", config.game_title || defaultConfig.game_title],
               ["budget_label", config.budget_label || defaultConfig.budget_label],
               ["materials_header", config.materials_header || defaultConfig.materials_header],
               ["build_button", config.build_button || defaultConfig.build_button],
               ["test_button", config.test_button || defaultConfig.test_button]
           ]);
       }

       // Initialize Element SDK
       if (window.elementSdk) {
           window.elementSdk.init({
               defaultConfig,
               onConfigChange,
               mapToCapabilities,
               mapToEditPanelValues
           });
       }

       // Start the game
       initGame();
   </script>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'99dd500fa600229b',t:'MTc2MzAyNjg4MC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>