Begun UI work...
This commit is contained in:
parent
007433844b
commit
37a0495da8
29
index.js
29
index.js
|
@ -6,10 +6,15 @@
|
|||
|
||||
import express from 'express'
|
||||
import dotenv from 'dotenv'
|
||||
import njk from 'nunjucks'
|
||||
|
||||
import sqlite2mongo from './libs/database/sqlite2mongo.js'
|
||||
import databaseInit from './libs/database/init.js'
|
||||
import initLog from './libs/utils/log.js'
|
||||
|
||||
import api from './api/api.js'
|
||||
import routes from './routes/routes.js'
|
||||
|
||||
import { initWorkers } from './libs/utils/multithread.js'
|
||||
|
||||
const log = initLog("[ MAIN ]")
|
||||
|
@ -17,15 +22,29 @@ const log = initLog("[ MAIN ]")
|
|||
// Read the .env file
|
||||
dotenv.config()
|
||||
|
||||
const Server = express()
|
||||
|
||||
Server.use('/api', api)
|
||||
|
||||
await databaseInit()
|
||||
// await databaseInit()
|
||||
|
||||
initWorkers(process.env.THREADS ?? 4)
|
||||
|
||||
if (process.env.LOAD_DB === "true")
|
||||
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}.`))
|
|
@ -21,6 +21,7 @@
|
|||
"dotenv": "^10.0.0",
|
||||
"express": "^4.17.1",
|
||||
"mongoose": "^6.0.11",
|
||||
"nunjucks": "^3.2.3",
|
||||
"sqlite": "^4.0.23",
|
||||
"sqlite3": "^4.2.0"
|
||||
},
|
||||
|
|
10
routes/routes.js
Normal file
10
routes/routes.js
Normal 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
34
src/sass/fonts.scss
Normal 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');
|
||||
}
|
108
src/sass/partials/_palette.scss
Normal file
108
src/sass/partials/_palette.scss
Normal 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
66
src/sass/scaling.scss
Normal 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
27
src/sass/theme.scss
Normal 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);
|
||||
}
|
BIN
static/Manrope/Manrope-Bold.ttf
Normal file
BIN
static/Manrope/Manrope-Bold.ttf
Normal file
Binary file not shown.
BIN
static/Manrope/Manrope-ExtraBold.ttf
Normal file
BIN
static/Manrope/Manrope-ExtraBold.ttf
Normal file
Binary file not shown.
BIN
static/Manrope/Manrope-ExtraLight.ttf
Normal file
BIN
static/Manrope/Manrope-ExtraLight.ttf
Normal file
Binary file not shown.
BIN
static/Manrope/Manrope-Light.ttf
Normal file
BIN
static/Manrope/Manrope-Light.ttf
Normal file
Binary file not shown.
BIN
static/Manrope/Manrope-Medium.ttf
Normal file
BIN
static/Manrope/Manrope-Medium.ttf
Normal file
Binary file not shown.
BIN
static/Manrope/Manrope-Regular.ttf
Normal file
BIN
static/Manrope/Manrope-Regular.ttf
Normal file
Binary file not shown.
BIN
static/Manrope/Manrope-SemiBold.ttf
Normal file
BIN
static/Manrope/Manrope-SemiBold.ttf
Normal file
Binary file not shown.
0
static/css/colors.css
Normal file
0
static/css/colors.css
Normal file
1
static/css/fonts.css
Normal file
1
static/css/fonts.css
Normal 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
1
static/css/scaling.css
Normal 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
1
static/css/theme.css
Normal 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
3
tools/nodemon.sh
Normal file
|
@ -0,0 +1,3 @@
|
|||
#!/bin/bash
|
||||
|
||||
nodemon -e js,json,njk index.js
|
3
tools/sassc.sh
Normal file
3
tools/sassc.sh
Normal file
|
@ -0,0 +1,3 @@
|
|||
#!/bin/bash
|
||||
|
||||
sass --style=compressed --error-css --update --no-source-map --watch --color src/sass:static/css
|
7
views/components/_navbar.njk
Normal file
7
views/components/_navbar.njk
Normal 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
16
views/pages/landing.njk
Normal 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
21
views/templates/basic.njk
Normal 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>
|
Loading…
Reference in New Issue
Block a user