Ajax Jquery Update for Resouces on Homepage

[alican22]

I think resources should be update without refresh the page. It can make more original the game.

[BeReal86]

Thanks for your suggestion.

[duhow]

I have the code working for this, except the part that gets the amount of resources generated per hour. Kind of complex as it requires rewriting some code in controller Resources to extract this information - and not repeat it twice copypaste.

diff --git a/src/upload/application/libraries/TemplateLib.php b/src/upload/application/libraries/TemplateLib.php
index 50aeb131..387f9d49 100755
--- a/src/upload/application/libraries/TemplateLib.php
+++ b/src/upload/application/libraries/TemplateLib.php
@@ -549,6 +549,11 @@ class TemplateLib
             );
         }
 
+        // ADD RESOURCE VALUES
+        foreach (['metal', 'crystal', 'deuterium', 'energy_used', 'energy_max'] as $resource)  {
+            $parse["value_{$resource}"] = $this->current_planet["planet_{$resource}"];
+        }
+
         // RESOURCES FORMAT
         $metal = FormatLib::prettyNumber($this->current_planet['planet_metal']);
         $crystal = FormatLib::prettyNumber($this->current_planet['planet_crystal']);
diff --git a/src/upload/application/views/general/topnav.php b/src/upload/application/views/general/topnav.php
index 41e3bfbb..180bc185 100755
--- a/src/upload/application/views/general/topnav.php
+++ b/src/upload/application/views/general/topnav.php
@@ -51,15 +51,28 @@
 
                         </tr>
                         <tr class='header'>
-                            <td align="center" class='header' width="90"><font >{re_metal}</font></td>
-                            <td align="center" class='header' width="90"><font >{re_crystal}</font></td>
-                            <td align="center" class='header' width="90"><font >{re_deuterium}</font></td>
+                            <td id="value_metal" align="center" class='header' width="90"><font >{re_metal}</font></td>
+                            <td id="value_crystal" align="center" class='header' width="90"><font >{re_crystal}</font></td>
+                            <td id="value_deuterium" align="center" class='header' width="90"><font >{re_deuterium}</font></td>
                             <td align="center" class='header' width="90"><font color="#FFFFFF">{re_darkmatter}</font></DIV></td>
 
                             <td align="center" class='header' width="90">{re_energy}</td>
 
                         </tr>
-                    </table></td>
+                   </table>
+               <script>
+               var planet_resources = {'metal': [{value_metal}, 1], 'crystal': [{value_crystal}, 1], 'deuterium': [{value_deuterium}, 1]};
+               var dateRes = Date.now();
+               function updateResources(){
+                       Object.entries(planet_resources).forEach(([res, values]) => {
+                               var element = document.getElementById('value_'+res);
+                               element.innerHTML = Math.floor(values[0] + ((Date.now() - dateRes) / 1000) * values[1]).toLocaleString();
+                       });
+                       setTimeout(updateResources, 1000);
+               }
+               setTimeout(updateResources, 1000);
+               </script>
+               </td>
                 <td class='header'>
                     <table class='header' align=left>
                         <tr class='header'>

[duhow]

Fuuuu, didn't know that the planet already contains it! :joy: Doing PR now :)

[duhow]

@LucasKovacs as #393 was closed, what's your idea on how to develop this change?

[LucasKovacs]

@duhow this is something for 4.0 with HTML 5 and jQuery