Fix javascript formatting

This commit is contained in:
Tristan Daniël Maat 2020-02-29 15:20:56 +00:00
parent 0efedd91d9
commit 5e36e8bf85
Signed by: tlater
GPG key ID: 49670FD774E43268
7 changed files with 51 additions and 37 deletions

View file

@ -22,7 +22,6 @@ class Typer {
this._element.html(""); this._element.html("");
this._element.css("visibility", "visible"); this._element.css("visibility", "visible");
this._cursor = false; this._cursor = false;
this._typed = 0; this._typed = 0;
@ -50,8 +49,9 @@ class Typer {
_draw() { _draw() {
let text = this._text.slice(0, this._typed); let text = this._text.slice(0, this._typed);
if (this._cursor) if (this._cursor) {
text += "\u2588"; text += "\u2588";
}
window.requestAnimationFrame(() => this._element.html(text)); window.requestAnimationFrame(() => this._element.html(text));
} }
@ -67,8 +67,9 @@ class Typer {
if (this._typed != this._text.length) if (this._typed != this._text.length)
setTimeout(this._type.bind(this), this._type_tick()); setTimeout(this._type.bind(this), this._type_tick());
else else {
this._end = Date.now(); this._end = Date.now();
}
} }
/** /**
@ -83,11 +84,9 @@ class Typer {
// As long as we are typing, keep blinking // As long as we are typing, keep blinking
if (this._typed != this._text.length) if (this._typed != this._text.length)
setTimeout(this._blink.bind(this), this._blink_tick); setTimeout(this._blink.bind(this), this._blink_tick);
// Once typing ends, keep going for a little bit // Once typing ends, keep going for a little bit
else if (Date.now() - this._end < this._blink_timeout) else if (Date.now() - this._end < this._blink_timeout)
setTimeout(this._blink.bind(this), this._blink_tick); setTimeout(this._blink.bind(this), this._blink_tick);
// Make sure we get rid of the cursor in the end // Make sure we get rid of the cursor in the end
else { else {
this._cursor = true; this._cursor = true;
@ -107,4 +106,4 @@ class Typer {
$(document).ready(() => { $(document).ready(() => {
let typer = new Typer($(".head-line .typed").get(0), 500, 3000); let typer = new Typer($(".head-line .typed").get(0), 500, 3000);
typer.type(); typer.type();
}) });

View file

@ -43,10 +43,11 @@ class AudioManager {
let context = this._context; let context = this._context;
let volume = this._volume; let volume = this._volume;
if (this._muted) if (this._muted) {
volume.gain.setValueAtTime(1, context.currentTime); volume.gain.setValueAtTime(1, context.currentTime);
else } else {
volume.gain.setValueAtTime(0, context.currentTime); volume.gain.setValueAtTime(0, context.currentTime);
}
this._muted = !this._muted; this._muted = !this._muted;
} }

View file

@ -4,13 +4,9 @@ class Background {
throw new Error("Cannot instantiate abstract class!"); throw new Error("Cannot instantiate abstract class!");
} }
start() { start() {}
} stop() {}
stop() {
}
} }
export default Background; export default Background;

View file

@ -17,15 +17,24 @@ class Spectrum extends Background {
} }
_get_canvas_height() { _get_canvas_height() {
return this._display.parent().height() - this._display.siblings().toArray().reduce((a, b) => { return (
return a + b.clientHeight; this._display.parent().height() -
}, 0); this._display
.siblings()
.toArray()
.reduce((a, b) => {
return a + b.clientHeight;
}, 0)
);
} }
_resize() { _resize() {
this._camera.aspect = this._display.width() / this._get_canvas_height(); this._camera.aspect = this._display.width() / this._get_canvas_height();
this._camera.updateProjectionMatrix(); this._camera.updateProjectionMatrix();
this._renderer.setSize(this._display.width(), this._get_canvas_height()); this._renderer.setSize(
this._display.width(),
this._get_canvas_height()
);
} }
_init_analyser() { _init_analyser() {
@ -33,7 +42,7 @@ class Spectrum extends Background {
let analyser = audioManager.context.createAnalyser(); let analyser = audioManager.context.createAnalyser();
analyser.fftSize = 2048; analyser.fftSize = 2048;
analyser.smoothingTimeConstant = .8; analyser.smoothingTimeConstant = 0.8;
let analyser_data = new Float32Array(analyser.frequencyBinCount); let analyser_data = new Float32Array(analyser.frequencyBinCount);
@ -47,7 +56,12 @@ class Spectrum extends Background {
_init_scene() { _init_scene() {
let scene = new three.Scene(); let scene = new three.Scene();
let camera = new three.PerspectiveCamera(70, this._display.width() / this._get_canvas_height(), 0.01, 10); let camera = new three.PerspectiveCamera(
70,
this._display.width() / this._get_canvas_height(),
0.01,
10
);
camera.position.z = 1; camera.position.z = 1;
scene.add(camera); scene.add(camera);
@ -77,7 +91,7 @@ class Spectrum extends Background {
for (let freq = 0; freq < analyser.frequencyBinCount; freq++) { for (let freq = 0; freq < analyser.frequencyBinCount; freq++) {
let geometry = new three.BoxGeometry(1, 1, 1); let geometry = new three.BoxGeometry(1, 1, 1);
let material = new three.MeshBasicMaterial({color: 0x99d1ce}); let material = new three.MeshBasicMaterial({ color: 0x99d1ce });
let cube = new three.Mesh(geometry, material); let cube = new three.Mesh(geometry, material);
cube.scale.set(width, 1e-6, width); cube.scale.set(width, 1e-6, width);
@ -103,10 +117,11 @@ class Spectrum extends Background {
for (let freq = 0; freq < analyser.frequencyBinCount; freq++) { for (let freq = 0; freq < analyser.frequencyBinCount; freq++) {
let height = analyser.maxDecibels / this._analyser_data[freq]; let height = analyser.maxDecibels / this._analyser_data[freq];
if (height > .3) if (height > 0.3) {
height -= .3; height -= 0.3;
else } else {
height = 1e-6; height = 1e-6;
}
this._boxes[freq].scale.y = height; this._boxes[freq].scale.y = height;
} }

View file

@ -9,7 +9,7 @@ import $ from "jquery";
* @param {HTMLElement} div - The div of the text area. * @param {HTMLElement} div - The div of the text area.
*/ */
class _Text { class _Text {
constructor (div) { constructor(div) {
this._element = div; this._element = div;
this._text = ""; this._text = "";
@ -35,8 +35,9 @@ class _Text {
let element = this._element; let element = this._element;
let flashing = this._flashing; let flashing = this._flashing;
if (!flashing) if (!flashing) {
element.html(text); element.html(text);
}
this._text = text; this._text = text;
} }
@ -61,7 +62,7 @@ class _Button {
this._flash_timeout = null; this._flash_timeout = null;
} }
click (callback) { click(callback) {
this._element.click(callback); this._element.click(callback);
} }
@ -146,7 +147,7 @@ class Controls {
text.setText(""); text.setText("");
} }
setLoading(reason="Loading") { setLoading(reason = "Loading") {
let button = this._button; let button = this._button;
let text = this._text; let text = this._text;
@ -154,14 +155,15 @@ class Controls {
text.setText(reason); text.setText(reason);
} }
setError(reason="") { setError(reason = "") {
let button = this._button; let button = this._button;
let text = this._text; let text = this._text;
if (reason == "") if (reason == "") {
reason = "Error"; reason = "Error";
else } else {
reason = `Error: ${reason}`; reason = `Error: ${reason}`;
}
button.setIcon("fa-stop-circle"); button.setIcon("fa-stop-circle");
text.setText(reason); text.setText(reason);

View file

@ -2,7 +2,7 @@ import $ from "jquery";
import Spectrum from "./backgrounds/Spectrum.js"; import Spectrum from "./backgrounds/Spectrum.js";
let backgrounds = { let backgrounds = {
"Spectrum": Spectrum Spectrum: Spectrum
}; };
class Display { class Display {
@ -10,13 +10,14 @@ class Display {
this._audioManager = audioManager; this._audioManager = audioManager;
this._element = $("#playerContent"); this._element = $("#playerContent");
this._background = new backgrounds["Spectrum"](this._element, audioManager); this._background = new backgrounds["Spectrum"](
this._element,
audioManager
);
this._background.start(); this._background.start();
} }
set background(name) { set background(name) {}
}
} }
export default Display; export default Display;

View file

@ -4,7 +4,7 @@ import Controls from "./controls";
import Display from "./display"; import Display from "./display";
class Player { class Player {
constructor(src="https://tlater.net/assets/Mseq_-_Journey.mp3") { constructor(src = "https://tlater.net/assets/Mseq_-_Journey.mp3") {
this._ui = $("#playerUI"); this._ui = $("#playerUI");
this._audioManager = new AudioManager(src); this._audioManager = new AudioManager(src);
this._controls = new Controls(this._audioManager); this._controls = new Controls(this._audioManager);