Combined canvas styling.

changes to navbar
Merge branch 'main' of https://github.com/adanrsantos/ThePlaceHolders
2024-12-16 05:50:39 -06:00 · 2024-11-06 18:19:39 -06:00 · 2024-11-06 18:16:21 -06:00 · 2024-11-06 18:16:13 -06:00 · 2024-11-06 18:15:24 -06:00 · 2024-11-06 18:04:31 -06:00
5 changed files with 108 additions and 32 deletions
--- a/static/canvas.css
+++ b/static/canvas.css
@ -1,3 +1,8 @@
+:root {
+    --utsa-orange: #f15a22;
+    --utsa-blue: #0c2340;
+}
+
 * {
    padding: 0;
    margin: 0;
@ -12,15 +17,49 @@ html, body {
    flex-direction: column;
    justify-content: center;
    align-items: center;
+    background-color: var(--utsa-orange);
 }

 .navbarCont {
-    background-color: grey;
+    position: relative;
+    background-color: var(--utsa-blue);
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
 }

+.navbarCont a {
+    float: left;
+    text-align: center;
+    padding: 12px;
+    text-decoration: none;
+    color: #e67e22;
+}
+
+.navbarCont a.icon {
+    padding: 0px;
+}
+
+.navbarCont a.title {
+    font-size: 26.5px;
+}
+
+.navbarCont a.rightB {
+    float: right;
+    display: inline-block;
+    padding: 20px;
+    margin: 0;
+    color: #ecf0f1;
+}
+
+.navbarCont a.rightB:hover {
+    background-color: #34495e
+}
+
+.navbarCont img {
+    float: left;
+}
+
 .canvasCont {
    display: flex;
    flex-direction: column;
@ -36,9 +75,9 @@ html, body {
    justify-content: space-around;
    align-items: center;
    border-top: solid black 1px;
+    background-color: var(--utsa-blue);
    width: 100%;
-    height: 60px;
-    z-index: 10;
+    height:auto;
 }

 .toolbarItems {
@ -46,7 +85,7 @@ html, body {
    flex-direction: column;
    justify-content: center;
    font-weight: 900;
-    color: blue;
+    color: white;
    text-align: center;
    height: 100%;
    width: 100px;
@ -64,7 +103,14 @@ html, body {


 canvas {
-    background-color: lightblue;
+    background-color: white;
    margin: 20px;
    image-rendering: pixelated;
 }
+
+@media screen and (max-width: 600px) {
+    .navbarCont a {
+      /* possible hamburger menu for moblie users*/
+      position: absolute
+    }
+  }
--- a/static/canvas.html
+++ b/static/canvas.html
@ -13,12 +13,16 @@
  <body>
    <div class="wrapper">
      <div class="navbarCont">
-        <h1>ThePlaceHolders</h1>
+        <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">Settings</a>
      </div>
      <!--note to self: below IS the canvas-->
-      <div class="canvasCont">
-        <canvas id="canvas" width="500" height="500" style="border:1px solid #000000;" alt="canvas"></canvas>
-        <div id="toolbar" class="toolbar">
+      <!--<div class="canvasCont">-->
+        <canvas id="canvas" width="1000" height="500" style="border:1px solid #000000;" alt="canvas"></canvas>
+        <div id="toolbar" class="d-flex align-items-center toolbar">
          <div class="toolbarItems">
            <button id="zoomOut">-</button>
          </div>
@ -30,7 +34,7 @@
            <button onclick="zoomIn"id="zoomIn">+</button>
          </div>
        </div>
-      </div>
+      <!--</div>-->
        <!--note to self: above IS the canvas-->
    </div>
    <script src="./canvas.js"></script>   
--- a/static/canvas.js
+++ b/static/canvas.js
@ -17,6 +17,9 @@ let image = new ImageData(DATA_SIZE, DATA_SIZE);
 let bitmap = null;

 window.addEventListener("load", async (e) => {
+    for (let x = 0; x < DATA_SIZE * DATA_SIZE * 4; x++) {
+        image.data[x] = 255;
+    }
    // Create drawable image, update it every half second
    await redraw();
    setInterval(redraw, 500);
@ -46,17 +49,28 @@ function draw() {
    ctx.setTransform(1, 0, 0, 1, 0, 0);
 }

+function mousePosition(e) {
+    let x = e.clientX - canvas.getBoundingClientRect().left;
+    let y = e.clientY - canvas.getBoundingClientRect().top;
+    let cx = Math.round(x / (CANVAS_SIZE * scale) * DATA_SIZE - offx - 0.5);
+    let cy = Math.round(y / (CANVAS_SIZE * scale) * DATA_SIZE - offy - 0.5);
+    return {x: cx, y: cy};
+}
+
 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;
    }
-    /*
-    offX += (DATA_SIZE * scale - DATA_SIZE * oldScale) / 2;
-    offY += (DATA_SIZE * scale - DATA_SIZE * oldScale) / 2;
-    */
+    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;
+    offy += diff * ratioy;
    draw(image);
 });

@ -77,17 +91,12 @@ canvas.addEventListener("mousedown", async (e) => {
 canvas.addEventListener("mouseup", async (e) => {
    if (e.button == 0 && mouseClicked) {
        mouseClicked = false;
-
        clickx = e.clientX;
        clicky = e.clientY;
+        let mouse = mousePosition(e);
+        let cx = mouse.x;
+        let cy = mouse.y;
        
-        let x = e.clientX - canvas.getBoundingClientRect().left;
-        let y = e.clientY - canvas.getBoundingClientRect().top;
-
-        let cx = Math.round(x / (CANVAS_SIZE * scale) * DATA_SIZE - offx);
-        let cy = Math.round(y / (CANVAS_SIZE * scale) * DATA_SIZE - offy);
-        
-        console.log(cx, cy);
        if (cx < 0 || cx > CANVAS_SIZE || cy < 0 || cy > CANVAS_SIZE) {
            return;
        }
--- a/static/navbarlogo.png
+++ b/static/navbarlogo.png
--- a/users.go
+++ b/users.go
@ -11,10 +11,9 @@ import (
 )

 const SESSION_COOKIE_NAME = "utsa-place-session"
+const SESSION_EMAIL = "email"
 const SESSION_AUTH = "auth"
 const SESSION_STARTED = "age"
-const SESSION_CONFIRMED = "confirmed"
-const SESSION_CONFIRM_KEY = "confirm-key"

 const ENCRYPTION_STRENGTH = 14

@ -23,11 +22,13 @@ type UserData struct {
 	Password       string
 	AccountCreated time.Time
 	LastLogin      time.Time
+	EmailCode      string
+	Verified       bool
 }

 func validate_email(email string) (string, bool) {
 	email = strings.ToLower(email)
-	regex := regexp.MustCompile("^[a-z]+.[a-z]+@(my.)?utsa.edu")
+	regex := regexp.MustCompile("^[a-z0-9]+.[a-z0-9]+@(my.)?utsa.edu")
 	ok := regex.MatchString(email)
 	return email, ok
 }
@ -51,7 +52,7 @@ func (s *Server) handle_login(w http.ResponseWriter, r *http.Request) {
 		http.ServeFile(w, r, "./static/login.html")
 	case http.MethodPost:
 		// Get data from form
-		email := r.FormValue("email")
+		email := strings.ToLower(r.FormValue("email"))
 		password := r.FormValue("password")
 		// Get user from database
 		user, ok := s.Users[email]
@ -75,9 +76,15 @@ func (s *Server) handle_login(w http.ResponseWriter, r *http.Request) {
 		now := time.Now()
 		session.Values[SESSION_AUTH] = true
 		session.Values[SESSION_STARTED] = now.String()
+		session.Values[SESSION_EMAIL] = user.Email
 		session.Save(r, w)
 		// Update last-login on DB
 		user.LastLogin = now
+		// If email not verified, go to verified page
+		if user.Verified {
+			s.handle_confirmation(w, r)
+			return
+		}
 		s.Users[email] = user
 		// Redirect to index.html
 		fmt.Println("Logged in user: ", email)
@ -124,12 +131,13 @@ func (s *Server) handle_register(w http.ResponseWriter, r *http.Request) {
 			Password:       hash_password(password),
 			AccountCreated: now,
 			LastLogin:      now,
+			EmailCode:      "123456",
+			Verified:       false,
 		}
 		// Make session valid
 		session.Values[SESSION_AUTH] = true
 		session.Values[SESSION_STARTED] = now.String()
-		session.Values[SESSION_CONFIRMED] = false
-		session.Values[SESSION_CONFIRM_KEY] = "asdf"
+		session.Values[SESSION_EMAIL] = email
 		// Send session token to browser
 		session.Save(r, w)
 		// Redirect to index.html
@ -147,17 +155,26 @@ func (s *Server) handle_confirmation(w http.ResponseWriter, r *http.Request) {
 		http.Redirect(w, r, "/register", http.StatusFound)
 		return
 	}
+	email := session.Values[SESSION_EMAIL].(string)
+	user, ok := s.Users[email]
+	if !ok {
+		return
+	}
 	switch r.Method {
 	case http.MethodGet:
-		confirmed := session.Values[SESSION_CONFIRMED].(bool)
-		fmt.Println("User email confirmed: ", confirmed)
-		if confirmed {
+		fmt.Println("User email confirmed: ", user.Verified)
+		if user.Verified {
 			http.Redirect(w, r, "/", http.StatusFound)
 		} else {
 			http.ServeFile(w, r, "./static/confirmation.html")
 		}
 	case http.MethodPost:
-	default:
+		code := r.FormValue("code")
+		if user.EmailCode == code {
+			http.Redirect(w, r, "/", http.StatusAccepted)
+		} else {
+			http.Redirect(w, r, "/confirm-email", http.StatusForbidden)
+		}
 	}
 }
Author	SHA1	Message	Date
reddishquill371	34544c8bdf	Combined canvas styling.	2024-11-06 18:19:39 -06:00
th3keyboard	86746df59b	changes to navbar	2024-11-06 18:16:21 -06:00
reddishquill371	73866b79f4	Merge branch 'main' of https://github.com/adanrsantos/ThePlaceHolders	2024-11-06 18:16:13 -06:00
reddishquill371	5966c70b1a	Tweaked canvas css and html.	2024-11-06 18:15:24 -06:00
Logan Gatlin	32461b6fb6	Merge branch 'main' of github.com:adanrsantos/ThePlaceHolders	2024-11-06 18:04:31 -06:00
Logan Gatlin	eca6cf8b7f	Fixed canvas zooming and clicking	2024-11-06 18:02:08 -06:00