Begun UI work...

This commit is contained in:
BurnyLlama 2021-10-30 21:39:21 +02:00
parent 007433844b
commit 37a0495da8
23 changed files with 323 additions and 5 deletions

View File

@ -6,10 +6,15 @@
import express from 'express' import express from 'express'
import dotenv from 'dotenv' import dotenv from 'dotenv'
import njk from 'nunjucks'
import sqlite2mongo from './libs/database/sqlite2mongo.js' import sqlite2mongo from './libs/database/sqlite2mongo.js'
import databaseInit from './libs/database/init.js' import databaseInit from './libs/database/init.js'
import initLog from './libs/utils/log.js' import initLog from './libs/utils/log.js'
import api from './api/api.js' import api from './api/api.js'
import routes from './routes/routes.js'
import { initWorkers } from './libs/utils/multithread.js' import { initWorkers } from './libs/utils/multithread.js'
const log = initLog("[ MAIN ]") const log = initLog("[ MAIN ]")
@ -17,15 +22,29 @@ const log = initLog("[ MAIN ]")
// Read the .env file // Read the .env file
dotenv.config() dotenv.config()
const Server = express() // await databaseInit()
Server.use('/api', api)
await databaseInit()
initWorkers(process.env.THREADS ?? 4) initWorkers(process.env.THREADS ?? 4)
if (process.env.LOAD_DB === "true") if (process.env.LOAD_DB === "true")
await sqlite2mongo() await sqlite2mongo()
const Server = express()
njk.configure(
'views',
{
autoescape: true,
express: Server,
lstripBlocks: true,
trimBlocks: true
}
)
Server.use('/', routes)
Server.use('/assets', express.static('static'))
Server.use('/api', api)
Server.listen(process.env.PORT ?? 12345, () => log(`Server started and listening on port ${process.env.PORT}.`)) Server.listen(process.env.PORT ?? 12345, () => log(`Server started and listening on port ${process.env.PORT}.`))

View File

@ -21,6 +21,7 @@
"dotenv": "^10.0.0", "dotenv": "^10.0.0",
"express": "^4.17.1", "express": "^4.17.1",
"mongoose": "^6.0.11", "mongoose": "^6.0.11",
"nunjucks": "^3.2.3",
"sqlite": "^4.0.23", "sqlite": "^4.0.23",
"sqlite3": "^4.2.0" "sqlite3": "^4.2.0"
}, },

10
routes/routes.js Normal file
View File

@ -0,0 +1,10 @@
import { Router } from 'express'
const routes = Router()
routes.get(
'/',
(req, res) => res.render('pages/landing.njk')
)
export default routes

34
src/sass/fonts.scss Normal file
View File

@ -0,0 +1,34 @@
@font-face {
font-family: 'Manrope XLight';
src: url('/assets/Manrope/Manrope-ExtraLight.ttf');
}
@font-face {
font-family: 'Manrope Light';
src: url('/assets/Manrope/Manrope-Light.ttf');
}
@font-face {
font-family: 'Manrope Regular';
src: url('/assets/Manrope/Manrope-Regular.ttf');
}
@font-face {
font-family: 'Manrope Medium';
src: url('/assets/Manrope/Manrope-Medium.ttf');
}
@font-face {
font-family: 'Manrope SemiBold';
src: url('/assets/Manrope/Manrope-SemiBold.ttf');
}
@font-face {
font-family: 'Manrope Bold';
src: url('/assets/Manrope/Manrope-Bold.ttf');
}
@font-face {
font-family: 'Manrope XBold';
src: url('/assets/Manrope/Manrope-ExtraBold.ttf');
}

View File

@ -0,0 +1,108 @@
:root {
/* COLORS */
--red: #EF5255;
--red1: #BF3638;
--red2: #D5484A;
--red3: #EF5255;
--red4: #FA7A7C;
--red5: #FA999A;
--orange: #EB801B;
--orange1: #AF6118;
--orange2: #DA7516;
--orange3: #EB801B;
--orange4: #F99434;
--orange5: #F9AE67;
--yellow: #F4C025;
--yellow1: #BD920F;
--yellow2: #DFAC11;
--yellow3: #F4C025;
--yellow4: #FFD147;
--yellow5: #FFE38F;
--pear: #AED651;
--pear1: #7D9A37;
--pear2: #96BB3E;
--pear3: #AED651;
--pear4: #C2E571;
--pear5: #DBF1A7;
--green: #72D661;
--green1: #53A545;
--green2: #61C350;
--green3: #72D661;
--green4: #93E684;
--green5: #BCF0B2;
--sea: #3DDF89;
--sea1: #2AA764;
--sea2: #2ACB75;
--sea3: #3DDF89;
--sea4: #5DEEA1;
--sea5: #A9F4CC;
--cyan: #4CDCDF;
--cyan1: #2CA3A5;
--cyan2: #2DCACD;
--cyan3: #4CDCDF;
--cyan4: #6BE8EB;
--cyan5: #B7EFF0;
--blue: #4C9CEF;
--blue1: #1C67B5;
--blue2: #2A83DF;
--blue3: #4C9CEF;
--blue4: #74B6FB;
--blue5: #A3CEFA;
--indigo: #4C6DEF;
--indigo1: #2143CA;
--indigo2: #3457E5;
--indigo3: #4C6DEF;
--indigo4: #748FFB;
--indigo5: #B1C0FC;
--purple: #967CF4;
--purple1: #613FD9;
--purple2: #7C5DE9;
--purple3: #967CF4;
--purple4: #BCAAFD;
--purple5: #CFC2FE;
--magenta: #E175DB;
--magenta1: #B63AB0;
--magenta2: #D152CB;
--magenta3: #E175DB;
--magenta4: #EC9AEF;
--magenta5: #EFB1F1;
--pink: #EE588F;
--pink1: #D0356D;
--pink2: #E2407C;
--pink3: #EE588F;
--pink4: #FA80AC;
--pink5: #FBA7C6;
--grey1: #00001F;
--grey2: #10102F;
--grey3: #20203F;
--grey4: #30304F;
--grey5: #40405F;
--grey6: #50506F;
--grey7: #60607F;
--grey8: #70708F;
--grey9: #80809F;
--grey10: #9090AF;
--grey11: #A0A0BF;
--grey12: #B0B0CF;
--grey13: #C0C0DF;
--grey14: #D0D0EF;
--grey15: #E0E0FF;
/* ALIASES */
--primary: var(--pink);
--accent: var(--pink5);
--surface: var(--grey2);
--text: var(--grey15);
}

66
src/sass/scaling.scss Normal file
View File

@ -0,0 +1,66 @@
@media screen and (min-width: 1px) {
:root {
font-size: 12px;
}
}
@media screen and (min-width: 300px) {
:root {
font-size: 13pt;
}
}
@media screen and (min-width: 400px) {
:root {
font-size: 14pt;
}
}
@media screen and (min-width: 500px) {
:root {
font-size: 15pt;
}
}
@media screen and (min-width: 600px) {
:root {
font-size: 16pt;
}
}
@media screen and (min-width: 700px) {
:root {
font-size: 17pt;
}
}
@media screen and (min-width: 802px) {
:root {
font-size: 12pt;
}
}
@media screen and (min-width: 1000px) {
:root {
font-size: 13pt;
}
}
@media screen and (min-width: 1200px) {
:root {
font-size: 14pt;
}
}
@media screen and (min-width: 1500px) {
:root {
font-size: 15pt;
}
}
@media screen and (min-width: 1800px) {
:root {
font-size: 16pt;
}
}
@media screen and (min-width: 2500px) {
:root {
font-size: 17pt;
}
}
@media screen and (min-width: 3000px) {
:root {
font-size: 19pt;
}
}

27
src/sass/theme.scss Normal file
View File

@ -0,0 +1,27 @@
* {
margin: 0;
padding: 0;
border: 0 none transparent;
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Manrope Regular', sans-serif;
font-size: .85rem;
line-height: 1.5;
color: var(--text);
}
html, body {
color: var(--text);
background-color: var(--surface);
}
nav {
background-color: var(--grey3);
}
header, h1, h2, h3, h4, h5, h6 {
color: var(--primary);
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

0
static/css/colors.css Normal file
View File

1
static/css/fonts.css Normal file
View File

@ -0,0 +1 @@
@font-face{font-family:"Manrope XLight";src:url("/assets/Manrope/Manrope-ExtraLight.ttf")}@font-face{font-family:"Manrope Light";src:url("/assets/Manrope/Manrope-Light.ttf")}@font-face{font-family:"Manrope Regular";src:url("/assets/Manrope/Manrope-Regular.ttf")}@font-face{font-family:"Manrope Medium";src:url("/assets/Manrope/Manrope-Medium.ttf")}@font-face{font-family:"Manrope SemiBold";src:url("/assets/Manrope/Manrope-SemiBold.ttf")}@font-face{font-family:"Manrope Bold";src:url("/assets/Manrope/Manrope-Bold.ttf")}@font-face{font-family:"Manrope XBold";src:url("/assets/Manrope/Manrope-ExtraBold.ttf")}

1
static/css/scaling.css Normal file
View File

@ -0,0 +1 @@
@media screen and (min-width: 1px){:root{font-size:12px}}@media screen and (min-width: 300px){:root{font-size:13pt}}@media screen and (min-width: 400px){:root{font-size:14pt}}@media screen and (min-width: 500px){:root{font-size:15pt}}@media screen and (min-width: 600px){:root{font-size:16pt}}@media screen and (min-width: 700px){:root{font-size:17pt}}@media screen and (min-width: 802px){:root{font-size:12pt}}@media screen and (min-width: 1000px){:root{font-size:13pt}}@media screen and (min-width: 1200px){:root{font-size:14pt}}@media screen and (min-width: 1500px){:root{font-size:15pt}}@media screen and (min-width: 1800px){:root{font-size:16pt}}@media screen and (min-width: 2500px){:root{font-size:17pt}}@media screen and (min-width: 3000px){:root{font-size:19pt}}

1
static/css/theme.css Normal file
View File

@ -0,0 +1 @@
*{margin:0;padding:0;border:0 none transparent;box-sizing:border-box;scroll-behavior:smooth;font-family:"Manrope Regular",sans-serif;font-size:.85rem;line-height:1.5;color:var(--text)}html,body{color:var(--text);background-color:var(--surface)}nav{background-color:var(--grey3)}header,h1,h2,h3,h4,h5,h6{color:var(--primary)}

3
tools/nodemon.sh Normal file
View File

@ -0,0 +1,3 @@
#!/bin/bash
nodemon -e js,json,njk index.js

3
tools/sassc.sh Normal file
View File

@ -0,0 +1,3 @@
#!/bin/bash
sass --style=compressed --error-css --update --no-source-map --watch --color src/sass:static/css

View File

@ -0,0 +1,7 @@
<nav>
<div class="logo"></div>
<a href="/maps">Maps</a>
<a href="/maps">Leaderboards</a>
<a href="/maps">Tournaments</a>
</nav>

16
views/pages/landing.njk Normal file
View File

@ -0,0 +1,16 @@
{% extends "../templates/basic.njk" %}
{% block head %}
<title>DDStats - Welcome!</title>
{% endblock %}
{% block body %}
<header>
Welcome to DDStats!
</header>
<form action="/search" method="get">
<h1>Search for a player or map...</h1>
<input type="text" name="q">
</form>
{% endblock %}

21
views/templates/basic.njk Normal file
View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/assets/css/theme.css">
<link rel="stylesheet" href="/assets/css/fonts.css">
<link rel="stylesheet" href="/assets/css/colors.css">
<link rel="stylesheet" href="/assets/css/theme.css">
{% block head %}
<title>DDStats</title>
{% endblock %}
</head>
<body>
{% include "../components/_navbar.njk" %}
{% block body %}
<p>This sure looks very empty...</p>
{% endblock %}
</body>
</html>