Agrego números en mobile

index.html

@@ -66,11 +66,11 @@ function follow(e) {
    <div id="popup">
     <div id="close" onclick="hide();">✗</div>
     <div id="text">
-     <center><img src="assets/logooscuro.png" style="width: 30vh;" /></center>
+     <center><img src="assets/logooscuro.png" style="width: 25vh;" /></center>
      <h3>Simulador de Aerogeneradores y Parques Eólicos (SAPE)</h3>
      <h4>Centro de Simulación Computacional para Aplicaciones Tecnológicas (CSC) - CONICET</h4>
      <p>¡Bienvenido al SAPE! Acá vas a poder experimentar de forma simplificada el diseño de un parque eólico.</p>
-     <p>¿Cómo se juega con el simulador?</p>
+     <p><b>¿Cómo se juega con el simulador?</b></p>
      <ul>
       <li>Clickeá sobre los aerogeneradores para ubicarlos donde creas que van a funcionar mejor.</li>
       <li>Intentá que todos los aerogeneradores reciban un viento con energía evitando posicionarlos atrás de otros aerogeneradores.</li>
@@ -97,7 +97,8 @@ function follow(e) {
    </div>
    <div id="copyright">&copy;2024 Centro de Simulación Computacional para Aplicaciones Tecnológicas (CSC) - CONICET</div>
    <div id="rotate"><img src="assets/rotar_telefono.png" /><p>Rotá tu<br />dispositivo</p></div>
-   <div id="logo"><a href="http://www.csc.gob.ar"><img src="assets/logooscuro.png" /></a></div>
+   <div id="logo"><a href="http://www.csc.gob.ar" target="_blank"><img src="assets/logooscuro.png" /></a></div>
   </div>
+  <div id="numbers"></div>
  </body>
 </html>

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) + "<br />" + (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 = "<h3>Aerogenerador Nº" + (i + 1) + "</h4>" + (Math.round(this.simulationPot[i] * 100) / 100) + ' GWh<br /><div class="bar" style="background: linear-gradient(to right, ' + (perc >= 80 ? '#fff' : '#f00') + ' ' + perc + '%, #000 ' + perc + '%);"></div><br />' + 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 += '<div style="left: ' + p.x + 'px; top: ' + p.y + 'px;">' + (i + 1) + '</div>';
+            }
+            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);

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;
+}