Add gulp for automated builds & Boostrap for FE

Can now build all with 'gulp' (if gulp-cli installed)

Big commit. Breakdown:
 - .gitignore includes gulpfile.js (otehrwise excluded)
 - gulpfile sets up build steps + browsersync
 - src/ files for FE (stub for now)
 - moved ts to src/ for consistency
 - update tsconfig with new paths
 - package.json lists new reqs

.gitignore

@@ -1,3 +1,5 @@
 *.js
 node_modules/
 package-lock.json
+dist/
+!gulpfile.js

gulpfile.js

@@ -0,0 +1,47 @@
+let gulp = require("gulp");
+let browserSync = require("browser-sync").create();
+let sass = require("gulp-sass");
+
+var ts = require("gulp-typescript");
+var tsProject = ts.createProject("tsconfig.json");
+
+var paths = { 
+	pages: ["src/html/*.html"],
+	css: ["src/css/*.css"],
+};
+
+// Compile sass into CSS & auto-inject into browsers
+gulp.task('sass', function() {
+    return gulp.src("src/scss/*.scss")
+        .pipe(sass())
+        .pipe(gulp.dest("dist/css"))
+        .pipe(browserSync.stream());
+});
+
+gulp.task("copy-html", function () {
+  return gulp.src(paths.pages).pipe(gulp.dest("dist"));
+});
+
+gulp.task("copy-css", function () {
+  return gulp.src(paths.css).pipe(gulp.dest("dist/css"));
+});
+
+gulp.task("compile-ts", function () {
+	return tsProject.src().pipe(tsProject()).js.pipe(gulp.dest("dist"));
+});
+
+// Static Server + compile ts + watch scss/html/css files
+gulp.task('serve', gulp.series("compile-ts", 'sass', "copy-html", "copy-css", function() {
+
+    browserSync.init({
+        server: "./dist/"
+    });
+
+    gulp.watch("src/scss/*.scss", gulp.series('sass'));
+    gulp.watch("src/css/*.css").on('change', gulp.series("copy-css"));
+    gulp.watch("src/html/*.html").on('change', gulp.series("copy-html"));
+    gulp.watch("dist/*.html").on('change', browserSync.reload);
+}));
+
+
+gulp.task('default', gulp.series('serve'));

package.json

@@ -2,17 +2,22 @@
 	"name": "asphodice",
 	"version": "0.1.0",
 	"description": "Dice roller for Asphodel. Includes statistical information",
-  "devDependencies": {
-    "@types/chai": "^4.2.14",
-    "@types/mocha": "^8.2.0",
-    "@types/node": "^14.14.22"
-  },
-  "dependencies": {
-    "chai": "^4.3.0",
-    "mocha": "^8.2.1",
-    "ts-node": "^9.1.1"
-  },
-  "scripts": {
-    "test": "mocha -r ts-node/register ./**/*.spec.ts"
-  }
+	"devDependencies": {
+		"@types/chai": "^4.2.14",
+		"@types/mocha": "^8.2.0",
+		"@types/node": "^14.14.22",
+		"browser-sync": "^2.26.14",
+		"gulp": "^4.0.2",
+		"gulp-sass": "^4.1.0",
+		"gulp-typescript": "^6.0.0-alpha.1"
+	},
+	"dependencies": {
+		"bootstrap": "^5.0.0-beta2",
+		"chai": "^4.3.0",
+		"mocha": "^8.2.1",
+		"ts-node": "^9.1.1"
+	},
+	"scripts": {
+		"test": "mocha -r ts-node/register ./**/*.spec.ts"
+	}
 }

src/css/dashboard.css

@@ -0,0 +1,100 @@
+body {
+  font-size: .875rem;
+}
+
+.feather {
+  width: 16px;
+  height: 16px;
+  vertical-align: text-bottom;
+}
+
+/*
+ * Sidebar
+ */
+
+.sidebar {
+  position: fixed;
+  top: 0;
+  /* rtl:raw:
+  right: 0;
+  */
+  bottom: 0;
+  /* rtl:remove */
+  left: 0;
+  z-index: 100; /* Behind the navbar */
+  padding: 48px 0 0; /* Height of navbar */
+  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
+}
+
+@media (max-width: 767.98px) {
+  .sidebar {
+    top: 5rem;
+  }
+}
+
+.sidebar-sticky {
+  position: relative;
+  top: 0;
+  height: calc(100vh - 48px);
+  padding-top: .5rem;
+  overflow-x: hidden;
+  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
+}
+
+.sidebar .nav-link {
+  font-weight: 500;
+  color: #333;
+}
+
+.sidebar .nav-link .feather {
+  margin-right: 4px;
+  color: #727272;
+}
+
+.sidebar .nav-link.active {
+  color: #007bff;
+}
+
+.sidebar .nav-link:hover .feather,
+.sidebar .nav-link.active .feather {
+  color: inherit;
+}
+
+.sidebar-heading {
+  font-size: .75rem;
+  text-transform: uppercase;
+}
+
+/*
+ * Navbar
+ */
+
+.navbar-brand {
+  padding-top: .75rem;
+  padding-bottom: .75rem;
+  font-size: 1rem;
+  background-color: rgba(0, 0, 0, .25);
+  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
+}
+
+.navbar .navbar-toggler {
+  top: .25rem;
+  right: 1rem;
+}
+
+.navbar .form-control {
+  padding: .75rem 1rem;
+  border-width: 0;
+  border-radius: 0;
+}
+
+.form-control-dark {
+  color: #fff;
+  background-color: rgba(255, 255, 255, .1);
+  border-color: rgba(255, 255, 255, .1);
+}
+
+.form-control-dark:focus {
+  border-color: transparent;
+  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
+}

src/html/index.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title>Asphodel Dice Roller</title>
+		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
+		<link rel="stylesheet" href="css/asphotheme.css">
+		<link rel="stylesheet" href="css/dashboard.css">
+		<script src="rollstats.js" type="text/javascript"></script>
+	</head>
+	<body>
+			<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
+				<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">Dice Roller</a>
+			</header>
+		<div class="container">
+		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
+		<h1>Asphodice Roller</h1>
+		<p>This lets you roll an arbitrary number of Asphodice!</p>
+
+		<form>
+			<label for="numRolls">Number of Rolls</label><br />
+			<div class="input-group mb-3">
+				<span class="input-group-text" id="basic-addon-3">Roll</span>
+				<input type="number" class="form-control" id="numRolls" placeholder="100000" aria-describedby="basic-addon3">
+				<span class="input-group-text">times</span>
+			</div>
+			<label for="numDice" class="form-label">Number of Dice</label>
+			<input type="range" class="form-range" id="numDice" min="1" max="20">
+			<button class="btn btn-primary">Roll!</button>
+		</form>
+		</div>
+	</body>
+</html>

src/scss/asphotheme.scss

@@ -0,0 +1 @@
+@import "../../node_modules/bootstrap/scss/bootstrap.scss";

tsconfig.json

@@ -67,5 +67,5 @@
     "skipLibCheck": true,                     /* Skip type checking of declaration files. */
     "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
   },
-    "include": [ "dice.ts", "rollstats.ts" ]
+    "include": [ "./src/ts/dice.ts", "./src/ts/rollstats.ts" ]
 }