Some updates

.gitignore

@@ -22,6 +22,9 @@ Thumbs.db
 # NPM packages folder.
 node_modules/
 
+package-lock.json
+npm-debug.log
+
 # Gulp output folder.
 dist/
 

gulpfile.js

@@ -142,15 +142,11 @@ function serve() {
 		return Promise.resolve(); // Instead we return a resolved Promise
 	}
 
-	const WATCH_OPTS = {
-		cwd: SRC
-	};
-
-	gulp.watch(JS_DIR, WATCH_OPTS, gulp.series(js, reload));
-	gulp.watch(SCSS_DIR, WATCH_OPTS, css); // We stream css directly into browserSync
-	gulp.watch(HTML_DIR, WATCH_OPTS, gulp.series(html, reload));
-	gulp.watch(ASSETS_DIR, WATCH_OPTS, gulp.series(assets, reload));
-	gulp.watch(LOCALES_DIR, WATCH_OPTS, gulp.series(locales, reload));
+	gulp.watch(JS_DIR, gulp.series(js, reload));
+	gulp.watch(SCSS_DIR, css); // We stream css directly into browserSync
+	gulp.watch(HTML_DIR, gulp.series(html, reload));
+	gulp.watch(ASSETS_DIR, gulp.series(assets, reload));
+	gulp.watch(LOCALES_DIR, gulp.series(locales, reload));
 }
 
-exports.serve = gulp.series(build, serve);
+exports.serve = gulp.series(build, serve);

package.json

@@ -14,14 +14,16 @@
 		"babel-polyfill": "^6.26.0",
 		"fluent-langneg": "^0.1.1",
 		"gulp-sass": "^4.0.2",
-		"howler": "^2.1.1"
+		"howler": "^2.1.1",
+		"js-yaml": "^3.12.2",
+		"whatwg-fetch": "^3.0.0"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.0.0",
 		"@babel/preset-env": "^7.3.1",
 		"autoprefixer": "^9.4.7",
 		"browser-sync": "^2.26.3",
-		"del": "^3.0.0",
+		"del": "^4.0.0",
 		"gulp": "^4.0.0",
 		"gulp-babel": "^8.0.0",
 		"gulp-concat": "^2.6.1",

src/index.html

@@ -124,42 +124,42 @@
 				<h1 i18n="name" id="logo">Satania</h1>
 				<p lang="ja">胡桃沢=サタニキア=マクドウェル</p>
 				<h2 i18n="best-waifu-ever">The best Waifu. <b>Ever.</b></h2>
-	
+
 				<div class="button-container">
 					<span>
 						<a i18n="join-discord" class="button discord" href="https://discord.gg/rC9ebp7"><i class="fab fa-discord"></i>Join the Discord</a><br />
 						<span id="discord-count" i18n="discord-count">
 							<span id="discord-number"></span> members
 						</span>
 					</span>
-					
+
 					<span>
 						<a i18n="join-reddit" class="button reddit" href="https://reddit.com/r/satania"><i class="fab fa-reddit-alien"></i>Join the Subreddit</a><br />
 						<span id="reddit-count" i18n="reddit-count">
 							<span id="reddit-number"></span> subscribers
 						</span>
 					</span>
-	
+
 					<br />
-					
+
 					<span i18n="language-warning" class="small translate-only">(These communities use English as their primary language)</span>
 				</div>
-	
+
 				<span i18n="scroll-notice" class="scroll-notice"><i class="fas fa-arrow-down"></i>Scroll to learn more!</span>
-	
+
 				<p i18n="mobile-disclaimer" class="mobile disclaimer">
 					I am really sorry, but the mobile version of this website was kinda rushed and <b>it's really shit</b>, I didn't think anyone would visit it on a phone tbh.
 				</p>
 			</div>
-	
+
 			<div class="language-select">
 				<div id="language-protip" i18n-skip>
 					<span id="language-protip-text" i18n="language-protip">
 						<!-- Note for translators, change "English" to the name of your language of course -->
 						Would you like to view this website in <b>English</b>?<br />
 						Use this drop-down to select a language!
 					</span>
-					
+
 					<i id="close-language-protip" class="fas fa-times"></i>
 				</div>
 				<div class="select-wrapper">
@@ -190,23 +190,23 @@ <h2 i18n="best-waifu-ever">The best Waifu. <b>Ever.</b></h2>
 					</select>
 				</div>
 			</div>
-	
+
 			<div id="translator-mode">
 				<button id="download">Download</button>
-				<button id="upload">Browse…</button>
-				<select disabled id="format">
+				<select id="format">
 					<option id="yaml" value="yaml">YAML</option>
 					<option value="json">JSON</option>
 				</select>
+				<button id="upload" style="margin-left: 10px;">Browse…</button>
 			</div>
-	
+
 			<div i18n="credits" class="footer">
 				A glorious shitpost by some pizza named <b title="Kenyérlángos">Pizzacus</b>
 			</div>
-	
+
 			<canvas class="snow full canvas-background"></canvas>
 		</div>
-		
+
 		<div class="music-player-container" id="music-player-container" i18n-group="music-player">
 			<div class="music-player display-intro" id="music-player">
 				<div class="play-controller">
@@ -228,7 +228,7 @@ <h2 i18n="best-waifu-ever">The best Waifu. <b>Ever.</b></h2>
 					</div>
 
 					<div class="countdown small hidden" i18n="countdown">Satania sings in <span id="time-until-satania"></span> seconds.</div>
-					
+
 					<div class="time-controller">
 						<div class="time-bar">
 							<div class="elapsed">
@@ -247,14 +247,14 @@ <h2 i18n="best-waifu-ever">The best Waifu. <b>Ever.</b></h2>
 								</div>
 							</div>
 						</div>
-	
+
 						<div class="time-progression"></div>
 					</div>
 
 				</div>
 
 			</div>
-	
+
 			<p i18n="footer">
 				You can also listen on <a href="https://www.youtube.com/watch?v=4NDCOxnHb8o">YouTube</a> and <a href="https://soundcloud.com/limiteddays/satania-drop-free-flp-come-to-my-youtube">SoundCloud</a>.
 			</p>
@@ -264,7 +264,7 @@ <h2 i18n="best-waifu-ever">The best Waifu. <b>Ever.</b></h2>
 			<canvas id="sound-visualizer"></canvas>
 		</div>
 	</div>
-	
+
 	<div class="scroll">
 		<div i18n-group="become-a-satania-follower" class="section">
 			<div class="left image">
@@ -661,7 +661,7 @@ <h2 i18n="large-text">She replaces all the other waifus in the show</h2>
 							</div>
 						</label>
 					</span>
-					
+
 					<span>
 						<input type="checkbox" id="vigne-toogle" class="card-toogle" />
 						<label for="vigne-toogle" i18n-group="vigne" class="card vigne">
@@ -673,7 +673,7 @@ <h2 i18n="large-text">She replaces all the other waifus in the show</h2>
 							</div>
 						</label>
 					</span>
-					
+
 					<span>
 						<input type="checkbox" id="raphiel-toogle" class="card-toogle" />
 						<label for="raphiel-toogle" i18n-group="raphiel" class="card raphiel">
@@ -685,7 +685,7 @@ <h2 i18n="large-text">She replaces all the other waifus in the show</h2>
 							</div>
 						</label>
 					</span>
-					
+
 					<span>
 						<input type="checkbox" id="satania-toogle" class="card-toogle" />
 						<label for="satania-toogle" i18n-group="satania" class="card satania">

src/js/music-player.js

@@ -130,7 +130,7 @@ function mouseDown(event) {
 	playState.wasPlaying = song.playing();
 
 	song.pause();
-	
+
 	mouseUpdate(event);
 }
 
@@ -255,4 +255,4 @@ if (Howler.usingWebAudio) {
 	}
 
 	window.requestAnimationFrame(visualizer);
-}
+}

src/js/script.js

@@ -1,4 +1,5 @@
 require('babel-polyfill');
+require('whatwg-fetch');
 
 window.javascriptLocales = {
 	copyMessage: "Just wanted to let you know that Satania is always with you! Even inside your clipboard! We are everywhere and you should really join us!\n" +
@@ -171,7 +172,7 @@ searchbar.onclick = event => {
 		case "search-by-voice":
 			span.innerText = javascriptLocales.searchByVoice;
 			break;
-		
+
 		case "search-button":
 			span.innerText = javascriptLocales.searchButton;
 			break;
@@ -253,25 +254,9 @@ document.body.onkeyup = event => {
 }
 
 function getContent(url) {
-	return new Promise((resolve, reject) => {
-		let req = new XMLHttpRequest();
-		req.open("GET", url, true);
-		req.onreadystatechange = function () {
-			if (req.readyState !== 4) return;
-
-			const contentType = req.getResponseHeader("content-type") || '';
-
-			let res = contentType.startsWith("application/json") ? JSON.parse(req.responseText) : req.responseText;
-
-			if (req.status.toString().startsWith(2)) {
-				resolve(res);
-			} else {
-				reject(res);
-			}
-		};
-		req.onerror = reject;
-		req.send();
-	});
+	return fetch(url, { cache: "no-store" })
+		.then(response => response.json())
+		.catch(err => console.warn(err))
 }
 
 function discordInfo(invite) {
@@ -305,7 +290,7 @@ function updateCounts() {
 		document.getElementById("reddit-count").style.display = "inline-block";
 	}
 
-	document.getElementById('last-updated').innerText = 
+	document.getElementById('last-updated').innerText =
 		(new Date(1519743162656))
 			.toLocaleDateString(document.body.parentElement.lang, {
 				year: 'numeric',

src/js/snow.js

@@ -41,7 +41,7 @@ function bindSnow(canvas) {
 			ctx.beginPath();
 			ctx.arc(snowflake.x * canvas.width, snowflake.y, minmax(snowflake.size, snowflakeSize), 0, Math.PI * 2);
 			ctx.fill();
-	
+
 			snowflake.x += wind * minmax(1 - snowflake.size, windStrength) * (tickTime / 1000);
 		}
 
@@ -93,4 +93,4 @@ function bindFull(canvas) {
 const fullCanvas = [...document.querySelectorAll("canvas.full")];
 fullCanvas.map(bindFull);
 
-module.exports = startSnow;
+module.exports = startSnow;

src/js/translate.js

@@ -2,6 +2,8 @@
 
 const {negotiateLanguages} = require('fluent-langneg');
 
+const jsyaml = require('js-yaml');
+
 const defaultLocale = document.documentElement.lang;
 
 var localeSelect = document.getElementById("locale-select"),
@@ -108,7 +110,7 @@ function changeLocale(localeName, skipReset) {
 	handleObject(locales[localeName], document.body);
 	window.javascriptLocales = locales[localeName]._javascriptLocales;
 	document.documentElement.lang = localeName;
-	
+
 	if (!skipReset) {
 		if (localeName === defaultLocale) {
 			window.history.pushState('', '', window.location.pathname)
@@ -136,20 +138,15 @@ for (const option of options) {
 	}
 
 	if (option.value !== defaultLocale) {
-		const xhr = new XMLHttpRequest();
-		xhr.open("GET", "locales/" + option.value + ".json", true);
-		xhr.onreadystatechange = function() {
-			if (xhr.readyState === 4 && xhr.status === 200) {
-				var translation = JSON.parse(xhr.responseText);
+		fetch("locales/" + option.value + ".json", { cache: "no-store" })
+			.then(response => response.json())
+			.then(translation => {
 				locales[option.value] = translation;
 				option.disabled = false;
 
 				postDownload();
-			}
-		};
-
-		xhr.send();
-
+			})
+			.catch(err => console.warn(err))
 	} else {
 		setTimeout(postDownload);
 	}
@@ -187,7 +184,7 @@ document.getElementById("download").onclick = () => {
 	let download = document.createElement("A"),
 		isYAML = formatSelect.value === "yaml";
 	download.href = URL.createObjectURL(new Blob(
-		[isYAML ? prettyYAML(jsyaml.safeDump(locales[defaultLocale])) : JSON.stringify(locales[defaultLocale], null, "\t")], 
+		[isYAML ? prettyYAML(jsyaml.safeDump(locales[defaultLocale])) : JSON.stringify(locales[defaultLocale], null, "\t")],
 		{
 			type : isYAML ? " application/x-yaml" : "application/json"
 		}
@@ -207,12 +204,12 @@ function selectFile(options = {}) {
 		upload.accept = options.accept || "";
 		upload.multiple = options.multiple || false;
 		upload.webkitdirectory = options.directory || false;
-		upload.setAttribute("style", 
+		upload.setAttribute("style",
 			"position:absolute !important;" +
-			"top:-9999vh !important;" + 
-			"opacity:0 !important;" + 
-			"height:0 !important;" + 
-			"width:0 !important; " + 
+			"top:-9999vh !important;" +
+			"opacity:0 !important;" +
+			"height:0 !important;" +
+			"width:0 !important; " +
 			"z-index:-9999 !important;");
 
 		document.body.appendChild(upload);
@@ -241,17 +238,6 @@ function blobToString(blob) {
 	});
 }
 
-function loadScript(url) {
-	return new Promise((resolve, reject) => {
-		const script = document.createElement("script");
-		script.src = url;
-		script.onload = resolve;
-		script.onerror = reject;
-
-		document.head.appendChild(script);
-	})
-}
-
 const formatSelect = document.getElementById("format");
 
 document.getElementById("upload").onclick = () => {
@@ -266,15 +252,3 @@ document.getElementById("upload").onclick = () => {
 		})
 	})
 }
-
-if (window.location.hash === "#translator-mode") {
-	loadScript("https://cdn.rawgit.com/nodeca/js-yaml/bee7e998/dist/js-yaml.min.js")
-		.then(() => {
-			formatSelect.disabled = false;
-		})
-		.catch(() => {
-			formatSelect.disabled = false;
-			formatSelect.value = "json";
-			document.getElementById("yaml").disabled = true;
-		});
-}

src/locales/de.json

@@ -14,7 +14,7 @@
 		"credits": "Ein gloriöser Shitpost von einer Pizza namens <b title=\"Kenyérlángos\">Pizzacus</b><br />(Schlecht) Übersetzt von moëns ☆",
 		"music-player": {
 			"intro": {
-				"bold-text": "Möchtest du einen teuflisch guten Song hören, während du hier bist?", 
+				"bold-text": "Möchtest du einen teuflisch guten Song hören, während du hier bist?",
 				"small-text": "Drücke den Play-Button auf der linken Seite!"
 			},
 			"metadata": {