diff --git a/index.html b/index.html index 75ae38b..e90122e 100644 --- a/index.html +++ b/index.html @@ -66,11 +66,11 @@ function follow(e) { +
diff --git a/js/main.js b/js/main.js index 9efff21..35191b6 100644 --- a/js/main.js +++ b/js/main.js @@ -138,7 +138,8 @@ class WindSimulation { if(this.simulation) { var i = this.wms.indexOf(wm); var follower = document.getElementById("follower"); - follower.innerHTML = "Aerogenerador Nº" + (i + 1) + "
" + (Math.round(this.simulationPot[i] * 100) / 100) + " GWh (" + Math.round(this.simulationPot[i] * 100 / 14.95) + "%)"; + var perc = Math.round(this.simulationPot[i] * 100 / 14.95); + follower.innerHTML = "

Aerogenerador Nº" + (i + 1) + "

" + (Math.round(this.simulationPot[i] * 100) / 100) + ' GWh

' + perc + '% ' + (perc < 50 ? '⚠️' : ''); follower.style.display = "block"; } } @@ -178,6 +179,7 @@ class WindSimulation { this.wms[i].lowPower(false); document.getElementById("follower").style.display = "none"; document.getElementById("results").style.display = "none"; + document.getElementById("numbers").innerHTML = ""; } setRotation(dir) { @@ -230,7 +232,6 @@ class WindSimulation { if(this.xhr != xhr) return; if (xhr.readyState === 4 && xhr.status === 200) { var json = JSON.parse(xhr.responseText); - console.log(json.pot) this.add_simulation(json.ws, json.pot); this.xhr = null; } @@ -265,6 +266,18 @@ class WindSimulation { results.innerHTML = innerHTML; results.style.display = "block"; + if(Screen.isMobile) { + var numbers = ""; + for(let i = 0; i < pot.length; i++) { + var p = new THREE.Vector3(this.wms[i].position.x, this.wms[i].position.y, 1); + p.project(screen.camera); + p.x = (p.x + 1) / 2 * window.innerWidth; + p.y = -(p.y - 1) / 2 * window.innerHeight; + numbers += '
' + (i + 1) + '
'; + } + document.getElementById("numbers").innerHTML = numbers; + } + var geometry = new THREE.PlaneGeometry(this.width, this.height, 10 * this.width, 10 * this.height); var colors = new three.BufferAttribute(new Float32Array(geometry.attributes.position.count * 4), 4); geometry.setAttribute('color', colors); diff --git a/style.css b/style.css index faaf438..8899005 100644 --- a/style.css +++ b/style.css @@ -37,14 +37,20 @@ h3, h4 { max-width: 70vw; max-height: 70vh; overflow-x: hidden; - overflow-y: scroll; + overflow-y: auto; width: auto; border: solid #fff .5vh; height: auto; background: #00000088; - padding: 4vh; + /* padding: 4vh;*/ text-align: left; font-size: .7em; + scrollbar-color: #fff #555; + scrollbar-width: thin; +} + +#text { + padding: 2vh; } #popup p + p { @@ -62,19 +68,25 @@ h3, h4 { #popup .b { display: inline-block; font-weight: 800; + font-size: .8em; border: solid white .4vh; border-radius: 1vh; - width: 1em; + width: 1.2em; + height: 1.2em; text-align: center; margin: 0 .2vh; } #close { + text-align: right; font-weight: 900; float: right; font-size: 1.5em; - margin-top: -5vh; - margin-right: -3.5vh; + position: sticky; + top: 0; + right: 1vh; + height: calc(100% - 1px); + cursor: pointer; } #close:hover { @@ -133,6 +145,10 @@ h3, h4 { left: 1vh; } +#follower { + text-align: center; +} + .bar { border: solid white 1px; display: inline-block; @@ -186,3 +202,16 @@ tr.last { #logo img:hover { opacity: 100%; } + +#numbers { + position: absolute; + +} + +#numbers div { + position: absolute; + text-shadow: 0 0 1px #000; + -webkit-text-stroke: 0.5px black; + font-size: .7em; + font-weight: 600; +}