Started systems

ago%!(EXTRA string=10 months) · e3cd361c46
parent 9e58d2a3df
commit e3cd361c46
7 changed files with 111 additions and 6 deletions
--- a/assets/menu/systems.png
+++ b/assets/menu/systems.png
--- a/css/system.css
+++ b/css/system.css
@ -0,0 +1,15 @@
+.cont-canvas
+{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#sys-canvas
+{
+    border: 1px solid black;
+    border-radius: 10px;
+    background-color: rgba(0, 0, 0, 0.589);
+}
--- a/html/templates/system/system.html
+++ b/html/templates/system/system.html
@ -0,0 +1,3 @@
+<div class="cont-canvas">
+    <canvas id="sys-canvas"></canvas>
+</div>
--- a/index.html
+++ b/index.html
@ -15,7 +15,7 @@
    <link rel="stylesheet" href="css/ships.css">
    <link rel="stylesheet" href="css/modal-ships.css">
    <link rel="stylesheet" href="css/leaderboard.css">
-
+    <link rel="stylesheet" href="css/system.css">
  </head>
  <body>

--- a/js/controllers/menu_mod.js
+++ b/js/controllers/menu_mod.js
@ -3,30 +3,40 @@ import profile from "./profile.js";
 import contracts from "./contracts.js";
 import ships from "./ships.js";
 import leaderboard from "./leaderboard.js";
+import system from "./system.js";

 function loged_links(temp_engine, lister) {
  $("#links").html(`
-        <input type="image" alt="home" id="systems-link" src="/assets/menu/home.png"/>
+        <input type="image" alt="systems" id="systems-link" src="/assets/menu/systems.png"/>
        <input type="image" alt="contracts" id="contracts-link" src="/assets/menu/contracts.png"/>
        <input type="image" alt="ships" id="ships-link" src="/assets/menu/ships.png"/>
        <input type="image" alt="profile" id="profile-link" src="/assets/menu/info.png"/>
        <input type="image" alt="leaderboard" id="leaderboard-link" src="/assets/menu/leaderboard.png"/>
  `);
+
  temp_engine.add_event("#profile-link", "click", () => {
    profile(temp_engine);
  });
+
  temp_engine.add_event("#contracts-link", "click", () => {
    if(lister) lister.stop();
    contracts(temp_engine);
-  })
+  });
+
  temp_engine.add_event("#ships-link", "click", () => {
    if(lister) lister.stop();
    ships(temp_engine);
-  })
+  });
+
  temp_engine.add_event("#leaderboard-link", "click", () => {
    if(lister) lister.stop();
    leaderboard(temp_engine);
-  })
+  });
+
+  temp_engine.add_event("#systems-link", "click", () => {
+    if(lister) lister.stop();
+    system(temp_engine, My.agent.get_agent_system());
+  });
 }

 export default (temp_engine, lister) => {
--- a/js/controllers/profile.js
+++ b/js/controllers/profile.js
@ -20,10 +20,11 @@ export default function profile(temp_engine) {
        temp_engine.add_event('#btn-logout', 'click', () => {
            const auth = new Auth();
            auth.unload_token();
+            My.agent = null;
            login(temp_engine);
        });

-        menu_mod(temp_engine);
+        menu_mod(temp_engine, null);
    });
    temp_engine.render("/templates/profile/profile.html");
 }
--- a/js/controllers/system.js
+++ b/js/controllers/system.js
@ -0,0 +1,76 @@
+import menu_mod from "./menu_mod.js";
+import home from "./home.js";
+import { CanvasRenderer } from "../skama_code/ui/canvas_render.js";
+import { SystemBuilder } from "../skama_code/api/system.js"
+
+
+function get_img_from_type(planet)
+{
+    switch(planet.type)
+    {
+        case "PLANET":
+            return ["planetproto.png"];
+        case "GAS_GIANT": 
+            return [];
+        case "MOON":
+            return [];
+        case "ORBITAL_STATION":
+            return [];
+        case "JUMP_GATE":
+            return ["jumpgate.png"];
+        case "ASTEROID_FIELD":
+            return [];
+        case "ASTEROID":
+            return ["asteroid1.png", "asteroid2.png", "asteroid3.png", "asteroid4.png"];
+        case "ENGINEERED_ASTEROID":
+            return [];
+        case "ASTEROID_BASE":
+            return [];
+        case "NEBULA":
+            return [];
+        case "DEBRIS_FIELD":
+            return [];
+        case "GRAVITY_WELL":
+            return [];
+        case "ARTIFICIAL_GRAVITY_WELL":
+            return [];
+        case "FUEL_STATION":
+            return [];
+        case _:
+            return [];
+    }
+}
+
+export default function system(temp_engine, sys_name) {
+  temp_engine.after_render(() => {
+    $("body").css("background-image", "url('/assets/img/background.png')")
+
+    let canvas = new CanvasRenderer("sys-canvas", 1200, 700);
+    SystemBuilder.get(sys_name, (system) => {
+        system.list_all_planets((planets) => {
+            canvas.clean();
+            planets.forEach((planet) => {
+                let urls = get_img_from_type(planet);
+                if(urls.length)
+                {
+                    canvas.obj_from_img("assets/planets/" + urls[Math.floor(Math.random() * urls.length)], canvas.rel_pos(planet.position), {
+                        selectable: true,
+                        name: planet.name,
+                        update: null,
+                    });
+                }
+            });
+        });
+
+        $(window).on("resize", () => {
+            canvas.resize((window.innerWidth/10)*9, (window.innerHeight/5)*4);
+        });
+
+        canvas.start();
+        menu_mod(temp_engine, system);
+    }, (err) => {
+        home(temp_engine);
+    });
+  });
+  temp_engine.render("templates/system/system.html");
+}