Fix javascript formatting
This commit is contained in:
parent
0efedd91d9
commit
5e36e8bf85
11
src/index.js
11
src/index.js
|
@ -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();
|
||||||
})
|
});
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
16
src/music/player/controls.js
vendored
16
src/music/player/controls.js
vendored
|
@ -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);
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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);
|
||||||
|
|
Reference in a new issue