gawk sacha home

css/global.css

@@ -59,7 +59,18 @@ input{
     }
 }
 
+.home-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    text-shadow: 4px 2px black;
+}
+
 .languettes {
+    z-index: 1;
     right: -30px;
     top: 25%;
     width: 80px;

css/system.css

@@ -5,10 +5,12 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    z-index: -1;
 }
 
 #sys-canvas
 {
+    z-index: -1;
     border: 1px solid black;
     border-radius: 10px;
     background-color: rgba(11, 1, 37, 0.842);

html/templates/home.html

@@ -1,3 +1,6 @@
-<div>
-    <p class="Title">HOME</p>
-</div>
+<p class="Title">HOME</p>
+<div class="home-container">
+    <h1>WELCOME TO</h1>
+    <img src="/assets/logo/spacetradertitle.png" alt="" width="60%">
+    <p>Skamkraft is based on the SpaceTraders API</p>
+</div>

js/controllers/menu_mod.js

@@ -1,4 +1,5 @@
 import { My } from "../skama_code/commun/my.js";
+import home from "./home.js";
 import profile from "./profile.js";
 import contracts from "./contracts.js";
 import ships from "./ships.js";
@@ -7,6 +8,7 @@ import system from "./system.js";
 
 function loged_links(temp_engine, lister) {
   $("#links").html(`
+        <input type="image" alt="home" id="home-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"/>
@@ -14,7 +16,13 @@ function loged_links(temp_engine, lister) {
         <input type="image" alt="leaderboard" id="leaderboard-link" src="/assets/menu/leaderboard.png"/>
   `);
 
+  temp_engine.add_event("#home-link", "click", () => {
+    if(lister) lister.stop();
+    home(temp_engine);
+  });
+
   temp_engine.add_event("#profile-link", "click", () => {
+    if(lister) lister.stop();
     profile(temp_engine);
   });
 

js/controllers/system.js

@@ -46,7 +46,7 @@ export default function system(temp_engine, sys_name) {
     temp_engine.after_render(() => {
             $("body").css("background-image", "url('/assets/planets/backgroundcanvas.png')")
             let canvas = new CanvasRenderer("sys-canvas", 1200, 700);
-            canvas.resize((window.innerWidth/13)*12, (window.innerHeight/13)*12);
+            canvas.resize(window.innerWidth, window.innerHeight);
             SystemBuilder.get(sys_name, (system) => {
                 system.list_all_planets((planets) => {
                     canvas.clean();
@@ -64,20 +64,33 @@ export default function system(temp_engine, sys_name) {
                             });
                         }
                     });
-                    canvas.zoom(new Position(0, 0), 0.5);
-                }, true);
-
+                });
+                canvas.zoom(new Position(0, 0), 0.5);
+                let zoom = 0;
                 canvas.on("mouse:wheel", (opt) => {
-                    if (opt.e.deltaY < 0)
+                    if (opt.e.deltaY < 0 && zoom < 30)
                     {
+                        zoom += 1;
                         canvas.zoom(canvas.rel_pos(new Position(opt.e.clientX, opt.e.clientY)), 1.1)
-                    } else {
+                        canvas.offset(new Position(2, 2))
+                    } else if (opt.e.deltaY > 0 && zoom > -5) {
+                        zoom -= 1;
                         canvas.zoom(canvas.rel_pos(new Position(opt.e.clientX, opt.e.clientY)), 0.9090)
+                        canvas.offset(new Position(0.5, 0.5))
                     }
                 });
 
+                canvas.on("mouse:over", (e) => {
+                    e.target.shadow.blur = 100;
+                });
+
+                
+                canvas.on("mouse:out", (e) => {
+                    e.target.shadow.blur = 1;
+                });
+
                 $(window).on("resize", () => {
-                    canvas.resize((window.innerWidth/10)*9, (window.innerHeight/5)*4);
+                    canvas.resize(window.innerWidth, window.innerHeight);
                 });
 
                 canvas.start();

js/index.js

@@ -16,7 +16,9 @@ if(auth.relog())
   AgentBuilder.get(localStorage.getItem('token'), (agent) => {
     My.agent = agent;
     home(temp_engine);
-  })
+  }, (err) => {
+    register(temp_engine);
+  });
 }
 else 
 {