From 75385132a925a03f24be9da41311633bc3d80783 Mon Sep 17 00:00:00 2001 From: bertieb Date: Thu, 18 Feb 2021 16:05:11 +0000 Subject: [PATCH] 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 | 2 + gulpfile.js | 47 +++++++++++++ package.json | 31 +++++---- src/css/dashboard.css | 100 ++++++++++++++++++++++++++++ src/html/index.html | 34 ++++++++++ src/scss/asphotheme.scss | 1 + asphodice.ts => src/ts/asphodice.ts | 0 rollstats.ts => src/ts/rollstats.ts | 0 tsconfig.json | 2 +- 9 files changed, 203 insertions(+), 14 deletions(-) create mode 100644 gulpfile.js create mode 100644 src/css/dashboard.css create mode 100644 src/html/index.html create mode 100644 src/scss/asphotheme.scss rename asphodice.ts => src/ts/asphodice.ts (100%) rename rollstats.ts => src/ts/rollstats.ts (100%) diff --git a/.gitignore b/.gitignore index e09fd0a..67d950e 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,5 @@ *.js node_modules/ package-lock.json +dist/ +!gulpfile.js diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..356d3b5 --- /dev/null +++ b/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')); diff --git a/package.json b/package.json index e0599f7..5501c38 100644 --- a/package.json +++ b/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" + } } diff --git a/src/css/dashboard.css b/src/css/dashboard.css new file mode 100644 index 0000000..8b0fa72 --- /dev/null +++ b/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); +} diff --git a/src/html/index.html b/src/html/index.html new file mode 100644 index 0000000..b0e19e2 --- /dev/null +++ b/src/html/index.html @@ -0,0 +1,34 @@ + + + + + + Asphodel Dice Roller + + + + + + +
+ Dice Roller +
+
+ +

Asphodice Roller

+

This lets you roll an arbitrary number of Asphodice!

+ +
+
+
+ Roll + + times +
+ + + +
+
+ + diff --git a/src/scss/asphotheme.scss b/src/scss/asphotheme.scss new file mode 100644 index 0000000..01f9f68 --- /dev/null +++ b/src/scss/asphotheme.scss @@ -0,0 +1 @@ +@import "../../node_modules/bootstrap/scss/bootstrap.scss"; diff --git a/asphodice.ts b/src/ts/asphodice.ts similarity index 100% rename from asphodice.ts rename to src/ts/asphodice.ts diff --git a/rollstats.ts b/src/ts/rollstats.ts similarity index 100% rename from rollstats.ts rename to src/ts/rollstats.ts diff --git a/tsconfig.json b/tsconfig.json index ceaf862..5cf4057 100644 --- a/tsconfig.json +++ b/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" ] }