style: new formatting
This commit is contained in:
parent
25929b73ec
commit
cbf4fdfb7a
42
src/app.js
42
src/app.js
|
@ -1,7 +1,6 @@
|
||||||
import { event_listener_array, calc_delta_time } from './utils';
|
import { event_listener_array, calc_delta_time } from './utils';
|
||||||
|
|
||||||
export function perspective_3d(class_name)
|
export function perspective_3d(class_name) {
|
||||||
{
|
|
||||||
const elements = document.body.getElementsByClassName(class_name);
|
const elements = document.body.getElementsByClassName(class_name);
|
||||||
|
|
||||||
let velocity_x = 0;
|
let velocity_x = 0;
|
||||||
|
@ -11,8 +10,7 @@ export function perspective_3d(class_name)
|
||||||
let target_rotation_x = 0;
|
let target_rotation_x = 0;
|
||||||
let target_rotation_y = 0;
|
let target_rotation_y = 0;
|
||||||
|
|
||||||
(function update()
|
(function update() {
|
||||||
{
|
|
||||||
let dt = calc_delta_time();
|
let dt = calc_delta_time();
|
||||||
const ss = .08;
|
const ss = .08;
|
||||||
|
|
||||||
|
@ -23,18 +21,15 @@ export function perspective_3d(class_name)
|
||||||
|
|
||||||
const style = `perspective(700px) rotateX(${rotation_y}rad) rotateY(${rotation_x}rad)`;
|
const style = `perspective(700px) rotateX(${rotation_y}rad) rotateY(${rotation_x}rad)`;
|
||||||
|
|
||||||
for (const el of elements)
|
for (const el of elements) {
|
||||||
{
|
|
||||||
el.style.transform = style;
|
el.style.transform = style;
|
||||||
}
|
}
|
||||||
|
|
||||||
requestAnimationFrame(update);
|
requestAnimationFrame(update);
|
||||||
})();
|
})();
|
||||||
|
|
||||||
event_listener_array(window, ["mousemove", "touchmove"], (e) =>
|
event_listener_array(window, ["mousemove", "touchmove"], (e) => {
|
||||||
{
|
if (e.changedTouches && e.changedTouches[0]) {
|
||||||
if (e.changedTouches && e.changedTouches[0])
|
|
||||||
{
|
|
||||||
e = e.changedTouches[0];
|
e = e.changedTouches[0];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -45,45 +40,37 @@ export function perspective_3d(class_name)
|
||||||
target_rotation_y = clamp(target_rotation_y, -0.5, 0.5);
|
target_rotation_y = clamp(target_rotation_y, -0.5, 0.5);
|
||||||
}, false);
|
}, false);
|
||||||
|
|
||||||
function spring(position, target, velocity, omega, dt)
|
function spring(position, target, velocity, omega, dt) {
|
||||||
{
|
|
||||||
let n1 = velocity - (position - target) * (Math.pow(omega, 2) * dt);
|
let n1 = velocity - (position - target) * (Math.pow(omega, 2) * dt);
|
||||||
let n2 = 1 + omega * dt;
|
let n2 = 1 + omega * dt;
|
||||||
return n1 / Math.pow(n2, 2);
|
return n1 / Math.pow(n2, 2);
|
||||||
}
|
}
|
||||||
function clamp(value, min, max)
|
function clamp(value, min, max) {
|
||||||
{
|
|
||||||
return Math.min(Math.max(value, min), max);
|
return Math.min(Math.max(value, min), max);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
(function pick_greeting()
|
(function pick_greeting() {
|
||||||
{
|
|
||||||
const hours = new Date().getHours();
|
const hours = new Date().getHours();
|
||||||
const greeing_el = document.querySelector(".greeting");
|
const greeing_el = document.querySelector(".greeting");
|
||||||
|
|
||||||
if (hours < 6)
|
if (hours < 6) {
|
||||||
{
|
|
||||||
const data = "Good night";
|
const data = "Good night";
|
||||||
greeing_el.textContent = data;
|
greeing_el.textContent = data;
|
||||||
greeing_el.innerText = data;
|
greeing_el.innerText = data;
|
||||||
} else if (hours >= 6 && hours < 12)
|
} else if (hours >= 6 && hours < 12) {
|
||||||
{
|
|
||||||
const data = "Good morning";
|
const data = "Good morning";
|
||||||
greeing_el.textContent = data;
|
greeing_el.textContent = data;
|
||||||
greeing_el.innerText = data;
|
greeing_el.innerText = data;
|
||||||
} else if (hours >= 12 && hours < 16)
|
} else if (hours >= 12 && hours < 16) {
|
||||||
{
|
|
||||||
const data = "Good afternoon";
|
const data = "Good afternoon";
|
||||||
greeing_el.textContent = data;
|
greeing_el.textContent = data;
|
||||||
greeing_el.innerText = data;
|
greeing_el.innerText = data;
|
||||||
} else if (hours >= 16 && hours <= 23)
|
} else if (hours >= 16 && hours <= 23) {
|
||||||
{
|
|
||||||
const data = "Good evening";
|
const data = "Good evening";
|
||||||
greeing_el.textContent = data;
|
greeing_el.textContent = data;
|
||||||
greeing_el.innerText = data;
|
greeing_el.innerText = data;
|
||||||
} else
|
} else {
|
||||||
{
|
|
||||||
const data = "Hello";
|
const data = "Hello";
|
||||||
greeing_el.textContent = data;
|
greeing_el.textContent = data;
|
||||||
greeing_el.innerText = data;
|
greeing_el.innerText = data;
|
||||||
|
@ -92,8 +79,7 @@ export function perspective_3d(class_name)
|
||||||
setTimeout(pick_greeting, 6e4);
|
setTimeout(pick_greeting, 6e4);
|
||||||
})();
|
})();
|
||||||
|
|
||||||
(function render_time()
|
(function render_time() {
|
||||||
{
|
|
||||||
const time = new Date();
|
const time = new Date();
|
||||||
let h = time.getHours();
|
let h = time.getHours();
|
||||||
|
|
||||||
|
|
|
@ -12,8 +12,7 @@ import { import_js_as_module } from './utils';
|
||||||
|
|
||||||
window.onload = start;
|
window.onload = start;
|
||||||
|
|
||||||
async function start()
|
async function start() {
|
||||||
{
|
|
||||||
await import_js_as_module('/fluid.js');
|
await import_js_as_module('/fluid.js');
|
||||||
perspective_3d('perspective');
|
perspective_3d('perspective');
|
||||||
}
|
}
|
21
src/utils.js
21
src/utils.js
|
@ -1,7 +1,6 @@
|
||||||
export let last_update = Date.now();
|
export let last_update = Date.now();
|
||||||
|
|
||||||
export function calc_delta_time()
|
export function calc_delta_time() {
|
||||||
{
|
|
||||||
let now = Date.now();
|
let now = Date.now();
|
||||||
let dt = (now - last_update) / 1e3;
|
let dt = (now - last_update) / 1e3;
|
||||||
dt = Math.min(dt, 0.016);
|
dt = Math.min(dt, 0.016);
|
||||||
|
@ -9,25 +8,19 @@ export function calc_delta_time()
|
||||||
return dt;
|
return dt;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function event_listener_array(whos, event_names, callback, options = null)
|
export function event_listener_array(whos, event_names, callback, options = null) {
|
||||||
{
|
if (!Array.isArray(whos)) {
|
||||||
if (!Array.isArray(whos))
|
|
||||||
{
|
|
||||||
whos = [whos];
|
whos = [whos];
|
||||||
}
|
}
|
||||||
for (const name of event_names)
|
for (const name of event_names) {
|
||||||
{
|
for (const who of whos) {
|
||||||
for (const who of whos)
|
|
||||||
{
|
|
||||||
who.addEventListener(name, callback, options);
|
who.addEventListener(name, callback, options);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function import_js_as_module(url)
|
export async function import_js_as_module(url) {
|
||||||
{
|
return new Promise((resole, reject) => {
|
||||||
return new Promise((resole, reject) =>
|
|
||||||
{
|
|
||||||
const body = document.getElementsByTagName('body')[0];
|
const body = document.getElementsByTagName('body')[0];
|
||||||
const script = document.createElement('script');
|
const script = document.createElement('script');
|
||||||
script.type = 'module';
|
script.type = 'module';
|
||||||
|
|
Loading…
Reference in New Issue