Compare commits

...

6 commits

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
5 changed files with 108 additions and 32 deletions

View file

@ -1,3 +1,8 @@
:root {
--utsa-orange: #f15a22;
--utsa-blue: #0c2340;
}
* { * {
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -12,15 +17,49 @@ html, body {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: var(--utsa-orange);
} }
.navbarCont { .navbarCont {
background-color: grey; position: relative;
background-color: var(--utsa-blue);
width: 100%; width: 100%;
text-align: center; text-align: center;
margin-bottom: 10px; 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 { .canvasCont {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -36,9 +75,9 @@ html, body {
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
border-top: solid black 1px; border-top: solid black 1px;
background-color: var(--utsa-blue);
width: 100%; width: 100%;
height: 60px; height:auto;
z-index: 10;
} }
.toolbarItems { .toolbarItems {
@ -46,7 +85,7 @@ html, body {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
font-weight: 900; font-weight: 900;
color: blue; color: white;
text-align: center; text-align: center;
height: 100%; height: 100%;
width: 100px; width: 100px;
@ -64,7 +103,14 @@ html, body {
canvas { canvas {
background-color: lightblue; background-color: white;
margin: 20px; margin: 20px;
image-rendering: pixelated; image-rendering: pixelated;
} }
@media screen and (max-width: 600px) {
.navbarCont a {
/* possible hamburger menu for moblie users*/
position: absolute
}
}

View file

@ -13,12 +13,16 @@
<body> <body>
<div class="wrapper"> <div class="wrapper">
<div class="navbarCont"> <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> </div>
<!--note to self: below IS the canvas--> <!--note to self: below IS the canvas-->
<div class="canvasCont"> <!--<div class="canvasCont">-->
<canvas id="canvas" width="500" height="500" style="border:1px solid #000000;" alt="canvas"></canvas> <canvas id="canvas" width="1000" height="500" style="border:1px solid #000000;" alt="canvas"></canvas>
<div id="toolbar" class="toolbar"> <div id="toolbar" class="d-flex align-items-center toolbar">
<div class="toolbarItems"> <div class="toolbarItems">
<button id="zoomOut">-</button> <button id="zoomOut">-</button>
</div> </div>
@ -30,7 +34,7 @@
<button onclick="zoomIn"id="zoomIn">+</button> <button onclick="zoomIn"id="zoomIn">+</button>
</div> </div>
</div> </div>
</div> <!--</div>-->
<!--note to self: above IS the canvas--> <!--note to self: above IS the canvas-->
</div> </div>
<script src="./canvas.js"></script> <script src="./canvas.js"></script>

View file

@ -17,6 +17,9 @@ let image = new ImageData(DATA_SIZE, DATA_SIZE);
let bitmap = null; let bitmap = null;
window.addEventListener("load", async (e) => { 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 // Create drawable image, update it every half second
await redraw(); await redraw();
setInterval(redraw, 500); setInterval(redraw, 500);
@ -46,17 +49,28 @@ function draw() {
ctx.setTransform(1, 0, 0, 1, 0, 0); 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) => { canvas.addEventListener("wheel", async (e) => {
let mouse = mousePosition(e);
console.log(mouse);
let oldScale = scale; let oldScale = scale;
if (e.deltaY < 0) { if (e.deltaY < 0) {
scale += 0.1; scale += 0.1;
} else if (e.deltaY > 0) { } else if (e.deltaY > 0) {
scale -= 0.1; scale -= 0.1;
} }
/* let diff = (CANVAS_SIZE / oldScale) - (CANVAS_SIZE / scale);
offX += (DATA_SIZE * scale - DATA_SIZE * oldScale) / 2; let ratiox = (mouse.x - (CANVAS_SIZE / 2)) / CANVAS_SIZE;
offY += (DATA_SIZE * scale - DATA_SIZE * oldScale) / 2; let ratioy = (mouse.y - (CANVAS_SIZE / 2)) / CANVAS_SIZE;
*/ offx += diff * ratiox;
offy += diff * ratioy;
draw(image); draw(image);
}); });
@ -77,17 +91,12 @@ canvas.addEventListener("mousedown", async (e) => {
canvas.addEventListener("mouseup", async (e) => { canvas.addEventListener("mouseup", async (e) => {
if (e.button == 0 && mouseClicked) { if (e.button == 0 && mouseClicked) {
mouseClicked = false; mouseClicked = false;
clickx = e.clientX; clickx = e.clientX;
clicky = e.clientY; 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) { if (cx < 0 || cx > CANVAS_SIZE || cy < 0 || cy > CANVAS_SIZE) {
return; return;
} }

BIN
static/navbarlogo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1,020 B

View file

@ -11,10 +11,9 @@ import (
) )
const SESSION_COOKIE_NAME = "utsa-place-session" const SESSION_COOKIE_NAME = "utsa-place-session"
const SESSION_EMAIL = "email"
const SESSION_AUTH = "auth" const SESSION_AUTH = "auth"
const SESSION_STARTED = "age" const SESSION_STARTED = "age"
const SESSION_CONFIRMED = "confirmed"
const SESSION_CONFIRM_KEY = "confirm-key"
const ENCRYPTION_STRENGTH = 14 const ENCRYPTION_STRENGTH = 14
@ -23,11 +22,13 @@ type UserData struct {
Password string Password string
AccountCreated time.Time AccountCreated time.Time
LastLogin time.Time LastLogin time.Time
EmailCode string
Verified bool
} }
func validate_email(email string) (string, bool) { func validate_email(email string) (string, bool) {
email = strings.ToLower(email) 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) ok := regex.MatchString(email)
return email, ok 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") http.ServeFile(w, r, "./static/login.html")
case http.MethodPost: case http.MethodPost:
// Get data from form // Get data from form
email := r.FormValue("email") email := strings.ToLower(r.FormValue("email"))
password := r.FormValue("password") password := r.FormValue("password")
// Get user from database // Get user from database
user, ok := s.Users[email] user, ok := s.Users[email]
@ -75,9 +76,15 @@ func (s *Server) handle_login(w http.ResponseWriter, r *http.Request) {
now := time.Now() now := time.Now()
session.Values[SESSION_AUTH] = true session.Values[SESSION_AUTH] = true
session.Values[SESSION_STARTED] = now.String() session.Values[SESSION_STARTED] = now.String()
session.Values[SESSION_EMAIL] = user.Email
session.Save(r, w) session.Save(r, w)
// Update last-login on DB // Update last-login on DB
user.LastLogin = now user.LastLogin = now
// If email not verified, go to verified page
if user.Verified {
s.handle_confirmation(w, r)
return
}
s.Users[email] = user s.Users[email] = user
// Redirect to index.html // Redirect to index.html
fmt.Println("Logged in user: ", email) 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), Password: hash_password(password),
AccountCreated: now, AccountCreated: now,
LastLogin: now, LastLogin: now,
EmailCode: "123456",
Verified: false,
} }
// Make session valid // Make session valid
session.Values[SESSION_AUTH] = true session.Values[SESSION_AUTH] = true
session.Values[SESSION_STARTED] = now.String() session.Values[SESSION_STARTED] = now.String()
session.Values[SESSION_CONFIRMED] = false session.Values[SESSION_EMAIL] = email
session.Values[SESSION_CONFIRM_KEY] = "asdf"
// Send session token to browser // Send session token to browser
session.Save(r, w) session.Save(r, w)
// Redirect to index.html // 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) http.Redirect(w, r, "/register", http.StatusFound)
return return
} }
email := session.Values[SESSION_EMAIL].(string)
user, ok := s.Users[email]
if !ok {
return
}
switch r.Method { switch r.Method {
case http.MethodGet: case http.MethodGet:
confirmed := session.Values[SESSION_CONFIRMED].(bool) fmt.Println("User email confirmed: ", user.Verified)
fmt.Println("User email confirmed: ", confirmed) if user.Verified {
if confirmed {
http.Redirect(w, r, "/", http.StatusFound) http.Redirect(w, r, "/", http.StatusFound)
} else { } else {
http.ServeFile(w, r, "./static/confirmation.html") http.ServeFile(w, r, "./static/confirmation.html")
} }
case http.MethodPost: 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)
}
} }
} }