Completo sin desafío

12 months ago · 4e281de747
parent 10375e1faf
commit 4e281de747
4 changed files with 74 additions and 12 deletions
--- a/assets/exclamacion.stl
+++ b/assets/exclamacion.stl
--- a/index.html
+++ b/index.html
@ -31,7 +31,11 @@ function hide() {

 function help() {
    show('<h4>Simulador de Aerogeneradores y Parques Eólicos (SAPE)</h4>' +
-        '<div class="l s"><p>Desarrollado por:</p><ul><li>Dimas Barile (CSC-CONICET)</li><li>José Alberto Martínez Trespalacios (Universidad Tecnológica de Bolívar)</li><li>Sebastián Santisi (CSC-CONICET)</li></ul></div>');
+        '<p>Desarrollado por:</p><ul><li>Dimas Alejandro Barile (CSC-CONICET),</li><li>José Alberto Martínez Trespalacios (Universidad Tecnológica de Bolívar),</li><li>Sebastián Santisi (CSC-CONICET).</li></ul>' +
+        '<p>Monumento a la Bandera modelado por <a href="https://www.thingiverse.com/rfrosch/" target="_blank">rfrosch</a> bajo licencia CC BY-NC-SA.</p>' +
+        '<br /><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>      <li>Elegí la dirección de viento con los botones <div class="b">⬅</div><div class="b">⬉</div><div class="b">⬆</div><div class="b">⬈</div> y presiona ¡SIMULAR!</li>      <li>Los aerogeneradores que reciban un viento poco energético se marcarán con un signo de exclamación ⚠️.</li>      <li>El objetivo es que tu parque supere el 80% de eficiencia para cada uno de los vientos.</li>      <li>Si ya cumpliste el objetivo para todos los vientos agregá más aerogeneradores con los botones <div class="b">+</div><div class="b">-</div>.</li>     </ul>'
+	);
+
 }

 /*function up() { light.shadow.camera.top += 1; light.shadow.camera.updateProjectionMatrix(); helper.update()}
@ -58,13 +62,23 @@ function follow(e) {
 <body>
  <div id="container">
   <div id="follower"></div>
-   <div id="results">Resultados</div>
+   <div id="results"></div>
   <div id="popup">
    <div id="close" onclick="hide();">✗</div>
    <div id="text">
-     <img src="assets/logooscuro.png" style="width: 30vh;" /><br />
-     <p>Simulador de Aerogeneradores y Parques Eólicos (SAPE)</p>
-     <p>Centro de Simulación Computacional para Aplicaciones Tecnológicas - CONICET</p>
+     <center><img src="assets/logooscuro.png" style="width: 30vh;" /></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>
+     <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>
+      <li>Elegí la dirección de viento con los botones <div class="b">⬅</div><div class="b">⬉</div><div class="b">⬆</div><div class="b">⬈</div> y presiona ¡SIMULAR!</li>
+      <li>Los aerogeneradores que reciban un viento poco energético se marcarán con un signo de exclamación ⚠️.</li>
+      <li>El objetivo es que tu parque supere el 80% de eficiencia para cada uno de los vientos.</li>
+      <li>Si ya cumpliste el objetivo para todos los vientos agregá más aerogeneradores con los botones <div class="b">+</div><div class="b">-</div>.</li>
+     </ul>
    </div>
   </div>
   <div id="right">
--- a/js/main.js
+++ b/js/main.js
@ -174,6 +174,8 @@ class WindSimulation {
        scene.remove(this.simulation);
        this.simulation = null;
        this.simulationPot = null;
+        for(var i = 0; i < this.mills; i++)
+            this.wms[i].lowPower(false);
        document.getElementById("follower").style.display = "none";
        document.getElementById("results").style.display = "none";
    }
@ -243,12 +245,24 @@ class WindSimulation {
    add_simulation(ws, pot) {
        var sum = 0;
        for(let i = 0; i < pot.length; i++) {
-            this.wms[i].lowPower(pot[i] < 2.75/*14.95 * 0.8*/)
+            this.wms[i].lowPower(pot[i] < 14.95 * 0.5);
            sum += pot[i];
        }
+        var pasa = Math.round(sum / 14.95 / pot.length * 100) >= 80;

        var results = document.getElementById("results")
-        results.innerHTML = (Math.round(sum * 100) / 100) + " GWh (" + Math.round(sum * 100 / 14.95 / pot.length) + "%)";
+        var innerHTML = '<h3>Resultados de la simulación</h3>' + (pasa ? 
+            '<p style="max-width: 16em">🥳🥳🥳 ¡Tu simulación <b>está bien</b>! ¿Probaste otros vientos? Si sí agregá más aerogeneradores.</p>' :
+            '<p style="max-width: 16em">⚠️⚠️⚠️ ¡Tu simulación <b>no</b> funciona! Probá otras configuraciones.</p>') + '<table>';
+
+        for(let i = 0; i < pot.length; i++) {
+            var perc = Math.round(pot[i] / 14.95 * 100);
+            innerHTML += '<tr><td><b>Nº' + (i + 1) + ':</b></td><td>' + Math.round(pot[i] * 100) / 100 + ' GWh</td><td><div class="bar" style="background: linear-gradient(to right, ' + (perc >= 50 ? '#fff' : '#f00') + ' ' + perc + '%, #000 ' + perc + '%);"></div> ' + perc + '% ' + (perc < 50 ? '⚠️' : '')  + '</td></tr>'
+        }
+        var perc = Math.round(sum / 14.95 / pot.length * 100);
+        innerHTML += '<tr class="last"><td>TOTAL:</td><td>' + Math.round(sum * 100) / 100 + ' GWh</td><td><div class="bar" style="background: linear-gradient(to right, ' + (perc >= 80 ? '#fff' : '#f00') + ' ' + perc + '%, #000 ' + perc + '%);"></div> ' + perc + '% ' + (perc < 80 ? '⚠️' : '') + '</td></tr></table>';
+
+        results.innerHTML = innerHTML;
        results.style.display = "block";

        var geometry = new THREE.PlaneGeometry(this.width, this.height, 10 * this.width, 10 * this.height);
--- a/style.css
+++ b/style.css
@ -11,6 +11,14 @@ body {
    color: #fff;
 }

+a {
+    color: #fff;
+}
+
+h3, h4 {
+    text-align: center;
+}
+
 #container {
    position: absolute;
    top: 0;
@ -35,19 +43,30 @@ body {
    height: auto;
    background: #00000088;
    padding: 4vh;
-    text-align: center;
+    text-align: left;
+    font-size: .7em;
 }

 #popup p + p {
    margin-top: 1vh;
 }

-.l {
-    text-align: left;
+#popup h4 {
+    margin-bottom: 1vh;
 }

-.s {
-    font-size: .7em;
+#popup li {
+    margin-left: 5vh;
+}
+
+#popup .b {
+    display: inline-block;
+    font-weight: 800;
+    border: solid white .4vh;
+    border-radius: 1vh;
+    width: 1em;
+    text-align: center;
+    margin: 0 .2vh;
 }

 #close {
@ -114,6 +133,21 @@ body {
    left: 1vh;
 }

+.bar {
+    border: solid white 1px;
+    display: inline-block;
+    width: 4em;
+    height: .7em;
+}
+
+tr.last {
+    font-weight: bold;
+}
+
+.last td {
+        border-top: solid white 1px;
+}
+
 #copyright {
    z-index: 2;
    font-size: 0.4em;