Begun UI work...

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}.`))

package.json

@@ -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"
   },

routes/routes.js

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

src/sass/fonts.scss

@@ -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');
+}

src/sass/partials/_palette.scss

@@ -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);
+}

src/sass/scaling.scss

@@ -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;
+    }
+}

src/sass/theme.scss

@@ -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);
+}

static/css/fonts.css

@@ -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")}

static/css/scaling.css

@@ -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}}

static/css/theme.css

@@ -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)}

tools/nodemon.sh

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

tools/sassc.sh

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

views/components/_navbar.njk

@@ -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>

views/pages/landing.njk

@@ -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 %}

views/templates/basic.njk

@@ -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>