diff --git a/css/gui.css b/css/gui.css index c7e52877107ed9dddeadbf95b3846fbaac9d8a38..7ae8de45e59919e60ca0dabb74a991122eef816c 100644 --- a/css/gui.css +++ b/css/gui.css @@ -1,10 +1,13 @@ -* { - -webkit-touch-callout: none; /* iOS Safari */ - -webkit-user-select: none; /* Safari */ - -khtml-user-select: none; /* Konqueror HTML */ - -moz-user-select: none; /* Old versions of Firefox */ - -ms-user-select: none; /* Internet Explorer/Edge */ - user-select: none; /* Non-prefixed version, currently - supported by Chrome, Opera and Firefox */ +button { + position: absolute; + top: 100px; + font-size: 16px; + border-radius: 8px; + padding: 5px 12px; + border: 2px solid #ffd587; } +.disabled { + opacity: 0.5; + cursor: not-allowed; +} diff --git a/index.html b/index.html index ab892755d1ceabecb3456de57f3006164c26a23e..738e87b866e3fb5952bb9b918c15275061874e12 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ <title>TP6 Simulator</title> <link rel="stylesheet" type="text/css" href="css/style.css"/> - <!-- <link rel="stylesheet" type="text/css" href="css/gui.css"/> --> + <link rel="stylesheet" type="text/css" href="css/gui.css"/> <script src="https://preview.babylonjs.com/babylon.js"></script> diff --git a/js/initScene.js b/js/initScene.js index 6677102f0f2dbe4432091059ea80192c28ee69ba..e53e2f552ab50f2e8b25d6cf712c9673d88aaab0 100644 --- a/js/initScene.js +++ b/js/initScene.js @@ -220,7 +220,7 @@ var createRaceTrack = function () { }); } -var placeRaceTrack = function(length) { +var placeRaceTrack = function (length) { let startLinePos = -107 let x = 0 @@ -242,7 +242,7 @@ var placeRaceTrack = function(length) { }); } -var addUI = function() { +var addUI = function () { let input = document.getElementById("input"); if (!input) { @@ -257,29 +257,49 @@ var addUI = function() { } // Files input - var filesInput = new BABYLON.FilesInput(engine, null, null, null, null, null, function () { BABYLON.Tools.ClearLogCache() }, function () {}, null); + var filesInput = new BABYLON.FilesInput(engine, null, null, null, null, null, function () { BABYLON.Tools.ClearLogCache() }, function () { }, null); filesInput.onProcessFileCallback = (function (file, name, extension) { - if (filesInput._filesToLoad && filesInput._filesToLoad.length === 1 && extension) { - BABYLON.Tools.ReadFile(file, function(dataText) { - var data = JSON.parse(dataText); - setupSimulation(data); - }); - } - return false; - }).bind(this); - - input.addEventListener('change', function (event) { - var filestoLoad; - // Handling files from input files - if (event && event.target && event.target.files) { - filesToLoad = event.target.files; + if (filesInput._filesToLoad && filesInput._filesToLoad.length === 1 && extension) { + BABYLON.Tools.ReadFile(file, function (dataText) { + let simBtn = document.getElementById("simBtn") + simBtn.disabled = false + var data = JSON.parse(dataText); + setupSimulation(data); + }); + } + return false; + }).bind(this); + + input.addEventListener('change', function (event) { + isSimulationRunning = false + let simBtn = document.getElementById("simBtn") + simBtn.disabled = true + var filestoLoad; + // Handling files from input files + if (event && event.target && event.target.files) { + filesToLoad = event.target.files; + } + filesInput.loadFiles(event); + }, false); + + let simBtn = document.getElementById("simBtn") + if (!simBtn) { + simBtn = document.createElement("button"); + simBtn.id = "simBtn" + simBtn.type = "button"; + simBtn.textContent = "Simulate!" + simBtn.style.zIndex = "2" + simBtn.disabled = true + document.body.appendChild(simBtn); + simBtn.style.right = `${20 + input.getBoundingClientRect().width - simBtn.getBoundingClientRect().width}px` } - filesInput.loadFiles(event); - }, false); + simBtn.addEventListener("click", function() { + isSimulationRunning = true + }); } -var setupSimulation = function(data) { +var setupSimulation = function (data) { // Simulation let simulation = data.simulation if (simulation == null) { @@ -300,12 +320,12 @@ var setupSimulation = function(data) { return; } - if(trackLength <= 0 || isNaN(trackLength)) { + if (trackLength <= 0 || isNaN(trackLength)) { console.log("Invalid track length! >:(") return; } - if(trackLength > 200){ + if (trackLength > 200) { console.log("Track length max value is 200 >:(") return; } @@ -314,26 +334,26 @@ var setupSimulation = function(data) { // Build vehicules let vehiculesData = simulation.vehicules - if(vehiculesData == null || vehiculesData.length === 0){ + if (vehiculesData == null || vehiculesData.length === 0) { console.log("No vehicules to simulate :(") return; } - for (const vehicule of vehiculesData){ + for (const vehicule of vehiculesData) { let name = vehicule.name - if (name == null){ + if (name == null) { console.log("Vehicule has no name :(") continue; } let components = vehicule.components - if (components == null || components.length === 0){ + if (components == null || components.length === 0) { console.log(`Vehicule ${name} has no components :(`) continue; } let movements = vehicule.movements - if (movements == null || movements.length === 0){ + if (movements == null || movements.length === 0) { console.log(`No movements found for vehicule ${name} :(`) continue; } @@ -343,13 +363,18 @@ var setupSimulation = function(data) { } -var runSimulation = function() { - if(isSimulationRunning) { +var runSimulation = function () { + if (isSimulationRunning) { success = false vehicules.forEach(v => { - success = success || v.toNextState() + success = success || v.toNextState() }) isSimulationRunning = success + + if(!isSimulationRunning) { + let simBtn = document.getElementById("simBtn") + simBtn.disabled = true + } } setTimeout(runSimulation, updateTime);