Home Explore Help
Sign In
ptkato
/
ihistology
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Adding the level to the screen

Patrick Augusto 4 years ago
parent
ba8c3c0c13
commit
09aaa5a793
3 changed files with 27 additions and 3 deletions
Unified View Show Diff Stats
  1. 10 1
      Pixel.css
  2. 1 0
      Pixel.html
  3. 16 2
      Pixel.js

+ 10 - 1
Pixel.css
View File 

@@ -5,6 +5,15 @@ html, body {
 
     background-color: darkgreen;
 
     background-color: darkgreen;
 
 }
 
 }
 
 
 
-canvas {
 
+#canvas {
 
     background-color: palevioletred;
 
     background-color: palevioletred;
 
+}
 
+
 
+#level {
 
+    position: fixed;
 
+    left: 5px;
 
+    bottom: 5px;
 
+    font-size: 30;
 
+    color: black;
 
+    font-weight: 800;
 
 }
 
 }

+ 1 - 0
Pixel.html
View File 

@@ -7,6 +7,7 @@
 
     </head>
 
     </head>
 
     <body>
 
     <body>
 
         <canvas id="canvas" tabindex="0"></canvas>
 
         <canvas id="canvas" tabindex="0"></canvas>
 
+        <span id="level">0</span>
 
         <script>main();</script>
 
         <script>main();</script>
 
     </body>
 
     </body>
 
 </html>
 
 </html>

+ 16 - 2
Pixel.js
View File 

@@ -67,12 +67,19 @@ const draw = function(ctx, csize, isize, url, level, images, coords) {
 
 }
 
 }
 
 
 
 const draw_ = function(ctx, isize, url, level, images, id, coords) {
 
 const draw_ = function(ctx, isize, url, level, images, id, coords) {
 
+    if (level != canvas.level) {
 
+        return images;
 
+    }
 
+
 
     const decimal = parseInt(id, 2);
 
     const decimal = parseInt(id, 2);
 
+    const index = images.findIndex((i) => (url + id) == i.image.src);
 
 
 
     if (!isInsideSquare(coords, canvas.vertices, isize)) {
 
     if (!isInsideSquare(coords, canvas.vertices, isize)) {
 
+        if (index != -1) {
 
+            images.splice(index);
 
+        }
 
         return images;
 
         return images;
 
     } else {
 
     } else {
 
-        const index = images.findIndex((i) => (url + id) == i.image.src);
 
         const target = images[index];
 
         const target = images[index];
 
 
 
         if (target) {
 
         if (target) {
 
@@ -180,7 +187,14 @@ const main = function() {
 
 
 
     document.addEventListener("wheel", (e) => {
 
     document.addEventListener("wheel", (e) => {
 
         if (c === document.activeElement) {
 
         if (c === document.activeElement) {
 
-            canvas.level += e.deltaY > 0 ? 1 : -1;
 
+            if (e.deltaY > 0) {
 
+                canvas.level += 1;
 
+            } else {
 
+                if (canvas.level > 0) {
 
+                    canvas.level += -1;
 
+                }
 
+            }
 
+            document.getElementById("level").innerText = canvas.level;
 
             init(c);
 
             init(c);
 
         }
 
         }
 
     });
 
     });