Update to node 14

README.md

@@ -11,7 +11,7 @@ To discuss licensing, contact `[email protected]`.
 
 ## Prerequisites
 
-* [Node.js](https://nodejs.org/download/release/v12.22.12) (version 12)
+* [Node.js](https://nodejs.org/download/release/v14.21.3) (version 14)
 * gulp `npm install -g gulp`
 * MongoDB: [download link](https://www.mongodb.com/download-center/community) and [installation instructions](https://docs.mongodb.com/manual/administration/install-community/)
 * [ImageMagick](https://imagemagick.org/script/download.php#windows) (optional, required for generating preview gifs in animation tool)

gulpfile.js

@@ -6,7 +6,8 @@ const gulp = require('gulp');
 const _ = require('lodash');
 const gulpif = require('gulp-if');
 const rev = require('gulp-rev');
-const sass = require('gulp-sass');
+const gulpSass = require('gulp-sass');
+const dartSass = require('sass');
 const shell = require('gulp-shell');
 const cssnano = require('gulp-cssnano');
 const imagemin = require('gulp-imagemin');
@@ -26,6 +27,8 @@ const HASH = _.range(0, 10).map(() => chars[Math.floor(Math.random() * chars.len
 
 let development = true;
 
+const sass = gulpSass(dartSass);
+
 function swallowError(e) {
 	console.log(e.message);
 	this.emit('end');

package.json

@@ -109,8 +109,8 @@
     "base64-js": "^1.3.1",
     "bluebird": "^3.5.5",
     "body-parser": "^1.19.0",
-    "bootstrap": "^4.3.1",
+    "bootstrap": "^4.6.2",
-    "canvas": "^2.6.0",
+    "canvas": "^3.2.1",
     "canvas-toBlob": "^1.0.0",
     "chai": "^4.2.0",
     "chai-as-promised": "^7.1.1",
@@ -145,7 +145,7 @@
     "gulp-live-server": "0.0.31",
     "gulp-plumber": "^1.2.1",
     "gulp-rev": "^9.0.0",
-    "gulp-sass": "^4.0.2",
+    "gulp-sass": "^5.1.0",
     "gulp-shell": "^0.7.1",
     "gulp-sizereport": "^1.2.1",
     "gulp-sourcemaps": "^2.6.5",
@@ -164,7 +164,6 @@
     "morgan": "^1.9.1",
     "ngx-bootstrap": "^5.1.1",
     "node-ipc": "^9.1.1",
-    "node-sass": "^4.12.0",
     "parallel-webpack": "^2.4.0",
     "passport": "^0.4.0",
     "passport-deviantart": "0.0.5",
@@ -186,6 +185,7 @@
     "request-promise": "^4.2.4",
     "rollbar": "^2.12.2",
     "rxjs": "^6.5.2",
+    "sass": "^1.58.3",
     "sass-loader": "^7.3.1",
     "serve-favicon": "^2.5.0",
     "sinon": "^7.4.1",

src/styles/partials/_chat.scss

@@ -20,7 +20,7 @@ $chat-line-indent: 10px;
 }
 
 @each $key, $value in $chat-colors {
-	&.chat-line-#{$key} {
+	.chat-line-#{$key} {
 		color: $value;
 
 		> .chat-line-name {

src/styles/partials/_controls.scss

@@ -19,7 +19,7 @@ kbd {
 }
 
 @each $color, $value in $gamepad-colors {
-	.gamepad-#{$color} > kbd, kbd.gamepad-#{$color} {
+	.gamepad-#{"" + $color} > kbd, kbd.gamepad-#{"" + $color} {
 		background: $value;
 	}
 }

src/ts/components/shared/chat-log/chat-log.ts

@@ -240,8 +240,8 @@ export class ChatLog implements AfterViewInit, OnDestroy, DoCheck {
 	private indexes = new Map<string, IndexEntry>();
 	private messageCounter = 0;
 	private lastOpacity = 0;
-	private autoClear?: NodeJS.Timeout;
+	private autoClear?: number;
-	private autoUnfocus?: NodeJS.Timeout;
+	private autoUnfocus?: number;
 	constructor(
 		private game: PonyTownGame,
 		private settingsService: SettingsService,
@@ -466,13 +466,13 @@ export class ChatLog implements AfterViewInit, OnDestroy, DoCheck {
 			this.filterColor = this.bg;
 		}
 
-		this.autoClear = setTimeout(() => {
+		this.autoClear = window.setTimeout(() => {
 			this.filterInput.nativeElement.value = '';
 			this.filterChat();
 			this.unFocus();
 		}, SECOND * 30);
 
-		this.autoUnfocus = setTimeout(() => {
+		this.autoUnfocus = window.setTimeout(() => {
 			this.unFocus();
 		}, SECOND * 3);