Arlo/CS-Coursework
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added usability changes

Browse Source
This commit is contained in:
Arlo Filley 2022-11-25 14:49:05 +00:00
parent 78619468b5
commit e8bec58827
4 changed files with 62 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/main.rs
View File

@ -1,3 +1,7 @@
//! src/main.rs
//! This file launches the web server which hosts the fileserver and the api
//!
pub mod sql; pub mod sql;
// relevant macros and imports for rocket.rs // relevant macros and imports for rocket.rs

25
website/index.css Normal file
View File

@ -0,0 +1,25 @@
/*
Index.css
Description: This file is the stylesheet for the html that the
user will see if they do not have javascript enabled.
Author: Arlo Filley
*/
:root {
--background-color: #dde83d;
--text-color: #000000;
--font: Verdana, Geneva, Tahoma, sans-serif;
}
body {
background-color: var(--background-color);
}
noscript {
display: block;
text-align: center;
font-family: var(--font);
color: var(--text-color);
font-size: large;
}

6
website/index.html
View File

@ -6,6 +6,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TypeFast</title> <title>TypeFast</title>
<!-- Css Files -->
<link rel="stylesheet" href="index.css">
<!-- Favicon Files --> <!-- Favicon Files -->
<link rel="apple-touch-icon" sizes="180x180" href="./assets/favicon/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="180x180" href="./assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon/favicon-32x32.png">
@ -13,7 +16,6 @@
<link rel="manifest" href="./assets/favicon/site.webmanifest"> <link rel="manifest" href="./assets/favicon/site.webmanifest">
<!-- Main Script Files --> <!-- Main Script Files -->
<!-- <script src="./lib/p5.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script> <script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
<script src="./index.js" type="text/javascript"></script> <script src="./index.js" type="text/javascript"></script>
@ -40,6 +42,6 @@
<script src="./api/user.js"></script> <script src="./api/user.js"></script>
</head> </head>
<body> <body>
<noscript>Please Enable Javascript</noscript>
</body> </body>
</html> </html>

36
website/index.js
View File

@ -1,11 +1,24 @@
/**
* @file This files is the root of the website.
* @author Arlo Filley
*/
let canvas, api, screenManager, user; let canvas, api, screenManager, user;
/**
* loads the any assets before the setup function
* this allows p5.js to acess these assets including: sprites,
* fonts, etc
*/
function preload() { function preload() {
roboto = loadFont('./assets/fonts/RobotoMono-Medium.ttf'); roboto = loadFont('./assets/fonts/RobotoMono-Medium.ttf');
} }
/**
* defines variables and sets up the p5.js canvas
* ready to be drawn with using the draw() function
*/
function setup() { function setup() {
// Creating the canvas
canvas = new Canvas(); canvas = new Canvas();
canvas.resize(); canvas.resize();
canvas.center(); canvas.center();
@ -17,25 +30,34 @@ function setup() {
screenManager.setScreen(new StartScreen()); screenManager.setScreen(new StartScreen());
user = new User(); user = new User();
// will log the user in if there details are in local storage
api.login(); api.login();
api.getTest(); api.getTest();
textFont(roboto); textFont(roboto);
} }
// this function is called once per frame and draws all other elements
/**
* called once per frame. draws all other elements onto the canvas
* mostly will just call the screenManager.draw() method to make
* sure that the correct screen is being drawn
*/
function draw() { function draw() {
screenManager.draw(); screenManager.draw();
} }
/**
// whenever a key is pressed this function is called * called whenever a key is pressed, the variable key contains the
* key that the user last pressed
*/
function keyPressed() { function keyPressed() {
screenManager.letterTyped(key); screenManager.letterTyped(key);
} }
// This ensures that the canvas is always the correct size and at the center
// of the screen, p5 calls windowResized whenever the browser size is changed. /**
* called whenever the user resizes the window. Uses methods from the canvas wrapper class
* to resize and center the canvas such that it displays correctly
*/
function windowResized() { function windowResized() {
canvas.resize(); canvas.resize();
canvas.center(); canvas.center();