Merge branch 'main' of https://github.com/adanrsantos/ThePlaceHolders

static/canvas.css

@@ -18,24 +18,26 @@ html, body {
     display: flex;
     flex-direction: column;
     justify-content: center;
-    align-items: center;
     background-color: var(--utsa-orange);
+    height: 100vh;
 }
 
 .navbarCont {
-    position: relative;
     background-color: var(--utsa-blue);
     width: 100%;
     text-align: center;
-    margin-bottom: 10px;
+    position: fixed;
+    top: 0;
 }
 
 .navbarCont a {
+    display: flex;
+    flex-direction: row;
     float: left;
-    text-align: center;
+    justify-content: space-around;
     padding: 12px;
     text-decoration: none;
-    color: #e67e22;
+    color: var(--utsa-orange);
 }
 
 .navbarCont a.icon {
@@ -48,7 +50,6 @@ html, body {
 
 .navbarCont a.rightB {
     float: right;
-    display: inline-block;
     padding: 20px;
     margin: 0;
     color: #ecf0f1;
@@ -80,7 +81,9 @@ html, body {
     border-top: solid black 1px;
     background-color: gray;
     width: 100%;
-    height:100%;
+    height: auto;
+    position: fixed;
+    bottom: 0;
 }
 
 .toolbarItems {
@@ -108,12 +111,42 @@ html, body {
 canvas {
     background-color: white;
     margin: 20px;
+    align-self: center;
+    height: 500px;
+    width: 500px;
     image-rendering: pixelated;
 }
 
 @media screen and (max-width: 600px) {
+    .navbarCont a.title {
+        font-size: 18.5px;
+        padding-left: 0px;
+    }
+
+    .navbarCont img {
+        width: 80%;
+    }
+
+    .navbarCont {
+        background-color: var(--utsa-blue);
+        width: 100%;
+        text-align: center;
+    }
+    
     .navbarCont a {
       /* possible hamburger menu for moblie users*/
-      position: absolute
+      font-size: 10px;
+    }
+
+    canvas {
+        background-color: white;
+        margin: 20px;
+        align-self: center;
+        height: 500px;
+        width: 500px;
+    }
+    
+    .toolbar {
+        font-size: 80%;
     }
 }

static/canvas.html

@@ -16,11 +16,25 @@
         <a class="icon" href="./index.html"><img src="navbarlogo.png"></img></a>
         <a class="title" href="./index.html">ThePlaceHolders</a>
         <a class="rightB" href="./contact.html">Contact</a>
-        <a class="rightB">Login</a>
+        <a class="rightB" href="./login.html">Login</a>
-        <a class="rightB">Settings</a>
+        <a class="rightB" href="./register.html">Register</a>
       </div>
       <!--note to self: below IS the canvas-->
-      <canvas id="canvas" width="1000" height="550" style="border:1px solid #000000;" alt="canvas"></canvas>
+      <!--<div class="canvasCont">-->
+        <canvas id="canvas" width="500" height="500" style="border:1px solid #000000;" alt="canvas"></canvas>
+        <div id="toolbar" class="d-flex align-items-center toolbar">
+          <div class="toolbarItems">
+            <!--extra space for toolbar-->
+          </div>
+          <div class="toolbarItems">
+            <label for="stroke">Strokes</label>
+            <input id="stroke" name="stroke" type="color" class="strokePicker">
+          </div>
+          <div class="toolbarItems">
+            <!--extra space for toolbar-->
+          </div>
+        </div>
+      <!--</div>-->
         <!--note to self: above IS the canvas-->
     </div>
     <div id="toolbar" class="d-flex toolbar flex-wrap">
@@ -67,4 +81,4 @@
     </div>
     <script src="./canvas.js"></script>   
   </body>
-</html>
+</html>

static/canvas.js

@@ -20,6 +20,7 @@ window.addEventListener("load", async (e) => {
     for (let x = 0; x < DATA_SIZE * DATA_SIZE * 4; x++) {
         image.data[x] = 255;
     }
+    ctx.imageSmoothingEnabled = false;
     // Create drawable image, update it every half second
     await redraw();
     setInterval(redraw, 500);
@@ -41,9 +42,8 @@ function setPixel(data, x, y, color) {
 
 function draw() {
     ctx.fillStyle = "rgb(0 0 0 255)";
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
     let drawScale = CANVAS_SIZE / DATA_SIZE * scale;
-    ctx.imageSmoothingEnabled = false;
     ctx.scale(drawScale, drawScale);
     ctx.drawImage(bitmap, offx, offy);
     ctx.setTransform(1, 0, 0, 1, 0, 0);
@@ -57,20 +57,24 @@ function mousePosition(e) {
     return {x: cx, y: cy};
 }
 
+function moveOffset(x, y) {
+    offx = Math.min(Math.max(x, -10 - DATA_SIZE / 2), DATA_SIZE + 10);
+    offy = Math.min(Math.max(y, -10 - DATA_SIZE / 2), DATA_SIZE + 10);
+}
+
 canvas.addEventListener("wheel", async (e) => {
     let mouse = mousePosition(e);
-    console.log(mouse);
     let oldScale = scale;
     if (e.deltaY < 0) {
         scale += 0.1;
     } else if (e.deltaY > 0) {
         scale -= 0.1;
     }
+    scale = Math.min(Math.max(scale, 0.5), 10);
     let diff = (CANVAS_SIZE / oldScale) - (CANVAS_SIZE / scale);
     let ratiox = (mouse.x - (CANVAS_SIZE / 2)) / CANVAS_SIZE;
     let ratioy = (mouse.y - (CANVAS_SIZE / 2)) / CANVAS_SIZE;
-    offx += diff * ratiox;
+    moveOffset(diff * ratiox, diff*  ratioy);
-    offy += diff * ratioy;
     draw(image);
 });
 
@@ -111,6 +115,10 @@ canvas.addEventListener("mousemove", async (e) => {
     if (e.buttons & 1) {
         offx += e.movementX * (1.0 / scale) * 0.45;
         offy += e.movementY * (1.0 / scale) * 0.45;
+        moveOffset(
+            offx + e.movementX * (1.0 / scale) * 0.45,
+            offy + e.movementY * (1.0 / scale) * 0.45
+        );
         draw(image);
     } 
 });

static/contact.css

@@ -1,3 +1,7 @@
+:root {
+    --utsa-orange: #f15a22;
+    --utsa-blue: #0c2340;
+}
 body {
     margin: 0;
   }