Refactoring
This commit is contained in:
Rampeur
@@ -1,174 +1,184 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect } from 'react';
|
||||
import React, { useEffect } from "react";
|
||||
|
||||
const TimeClock: React.FC = () => {
|
||||
useEffect(() => {
|
||||
useEffect(() => {
|
||||
const numbers = [
|
||||
[1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1], // 0
|
||||
[1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1], // 1
|
||||
[1, 0, 1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 0, 1], // 2
|
||||
[1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1], // 3
|
||||
[1, 1, 1, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 1, 1], // 4
|
||||
[1, 1, 1, 0, 1, 1, 0, 1, 0, 1, 1, 0, 1, 1, 1], // 5
|
||||
[1, 1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 0, 1, 1, 1], // 6
|
||||
[1, 0, 0, 0, 0, 1, 0, 1, 1, 1, 1, 1, 0, 0, 0], // 7
|
||||
[1, 1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1], // 8
|
||||
[1, 1, 1, 0, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1], // 9
|
||||
];
|
||||
|
||||
const numbers = [
|
||||
[1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1], // 0
|
||||
[1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1], // 1
|
||||
[1, 0, 1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 0, 1], // 2
|
||||
[1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1], // 3
|
||||
[1, 1, 1, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 1, 1], // 4
|
||||
[1, 1, 1, 0, 1, 1, 0, 1, 0, 1, 1, 0, 1, 1, 1], // 5
|
||||
[1, 1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 0, 1, 1, 1], // 6
|
||||
[1, 0, 0, 0, 0, 1, 0, 1, 1, 1, 1, 1, 0, 0, 0], // 7
|
||||
[1, 1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1], // 8
|
||||
[1, 1, 1, 0, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1] // 9
|
||||
];
|
||||
const blocks: Array<Element[]> = [];
|
||||
const digits = Array.from(document.querySelectorAll(".block"));
|
||||
|
||||
const blocks: Array<Element[]> = [];
|
||||
const digits = Array.from(document.querySelectorAll('.block'));
|
||||
for (let i = 0; i < 4; i++) {
|
||||
blocks.push(digits.slice(i * 15, i * 15 + 15));
|
||||
}
|
||||
|
||||
for (let i = 0; i < 4; i++) {
|
||||
blocks.push(digits.slice(i * 15, i * 15 + 15));
|
||||
const setNum = (block: Array<Element>, num: number) => {
|
||||
const n = numbers[num];
|
||||
for (let i = 0; i < block.length; i++) {
|
||||
block[i].classList[n[i] === 1 ? "add" : "remove"]("active");
|
||||
}
|
||||
};
|
||||
|
||||
const time = {
|
||||
s: "",
|
||||
m: "",
|
||||
h: "",
|
||||
p: 0,
|
||||
};
|
||||
|
||||
// time loop
|
||||
const animator = () => {
|
||||
const d = new Date();
|
||||
let h = d.getHours().toString(),
|
||||
m = d.getMinutes().toString(),
|
||||
s = d.getSeconds().toString();
|
||||
|
||||
s = s.length === 1 ? "0" + s : s;
|
||||
m = m.length === 1 ? "0" + m : m;
|
||||
h = h.length === 1 ? "0" + h : h;
|
||||
|
||||
if (s !== time.s) {
|
||||
for (let i = 0; i < digits.length; i++) {
|
||||
const d = digits[i];
|
||||
if (i === +s) {
|
||||
d.classList.add("second");
|
||||
if (time.p !== null) digits[time.p].classList.remove("second");
|
||||
time.p = i;
|
||||
time.s = s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const setNum = (block: Array<Element>, num: number) => {
|
||||
let n = numbers[num];
|
||||
for (let i = 0; i < block.length; i++) {
|
||||
block[i].classList[n[i] === 1 ? 'add' : 'remove']('active');
|
||||
}
|
||||
};
|
||||
if (m !== time.m) {
|
||||
setNum(blocks[2], parseInt(Array.from(m)[0]));
|
||||
setNum(blocks[3], parseInt(Array.from(m)[1]));
|
||||
time.m = m;
|
||||
}
|
||||
|
||||
const time = {
|
||||
s: '',
|
||||
m: '',
|
||||
h: '',
|
||||
p: 0
|
||||
};
|
||||
if (h !== time.h) {
|
||||
setNum(blocks[0], parseInt(Array.from(h)[0]));
|
||||
setNum(blocks[1], parseInt(Array.from(h)[1]));
|
||||
time.h = h;
|
||||
}
|
||||
window.requestAnimationFrame(animator);
|
||||
};
|
||||
|
||||
// time loop
|
||||
const animator = () => {
|
||||
let d = new Date(),
|
||||
h = d.getHours().toString(),
|
||||
m = d.getMinutes().toString(),
|
||||
s = d.getSeconds().toString();
|
||||
// init
|
||||
window.requestAnimationFrame(animator);
|
||||
|
||||
s = s.length === 1 ? '0' + s : s;
|
||||
m = m.length === 1 ? '0' + m : m;
|
||||
h = h.length === 1 ? '0' + h : h;
|
||||
// toggle button
|
||||
const d = new Date();
|
||||
const days = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"];
|
||||
const months = [
|
||||
"Janvier",
|
||||
"Février",
|
||||
"Mars",
|
||||
"Avril",
|
||||
"Mai",
|
||||
"Juin",
|
||||
"Juillet",
|
||||
"Août",
|
||||
"Septembre",
|
||||
"Octobre",
|
||||
"Novembre",
|
||||
"Décembre",
|
||||
];
|
||||
const lib_d = days[d.getDay()];
|
||||
const lib_m = months[d.getMonth()];
|
||||
const lib_n = d.getDate();
|
||||
const lib_y = d.getFullYear();
|
||||
document.getElementById("datelib")!.innerHTML = lib_d + " " + lib_n + " " + lib_m + " " + lib_y;
|
||||
}, []);
|
||||
|
||||
if (s !== time.s) {
|
||||
for (let i = 0; i < digits.length; i++) {
|
||||
let d = digits[i];
|
||||
if (i === +s) {
|
||||
d.classList.add('second');
|
||||
if (time.p !== null)
|
||||
digits[time.p].classList.remove('second');
|
||||
time.p = i;
|
||||
time.s = s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (m !== time.m) {
|
||||
setNum(blocks[2], parseInt(Array.from(m)[0]));
|
||||
setNum(blocks[3], parseInt(Array.from(m)[1]));
|
||||
time.m = m;
|
||||
}
|
||||
|
||||
if (h !== time.h) {
|
||||
setNum(blocks[0], parseInt(Array.from(h)[0]));
|
||||
setNum(blocks[1], parseInt(Array.from(h)[1]));
|
||||
time.h = h;
|
||||
}
|
||||
window.requestAnimationFrame(animator)
|
||||
}
|
||||
|
||||
// init
|
||||
window.requestAnimationFrame(animator)
|
||||
|
||||
// toggle button
|
||||
var d = new Date();
|
||||
var days = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"];
|
||||
var months = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
|
||||
var lib_d = days[d.getDay()];
|
||||
var lib_m = months[d.getMonth()];
|
||||
var lib_n = d.getDate();
|
||||
var lib_y = d.getFullYear();
|
||||
document.getElementById("datelib")!.innerHTML = lib_d + " " + lib_n + " " + lib_m + " " + lib_y;
|
||||
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="date d-flex mb-2 pt-2">
|
||||
<div className="flex-grow-1"></div>
|
||||
<div className="datelib mt-2 pt-1 ps-1 font-monospace opacity-50 fs-5">
|
||||
<span className="icon-calendar me-2" aria-hidden="true"></span>
|
||||
<span id="datelib"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="time d-flex">
|
||||
<div className="flex-grow-1"></div>
|
||||
<div className="clock position-relative d-flex flex-column flex-wrap">
|
||||
<div className="block" data-num="0"></div>
|
||||
<div className="block" data-num="1"></div>
|
||||
<div className="block" data-num="2"></div>
|
||||
<div className="block" data-num="3"></div>
|
||||
<div className="block" data-num="4"></div>
|
||||
<div className="block" data-num="5"></div>
|
||||
<div className="block" data-num="6"></div>
|
||||
<div className="block" data-num="7"></div>
|
||||
<div className="block" data-num="8"></div>
|
||||
<div className="block" data-num="9"></div>
|
||||
<div className="block" data-num="10"></div>
|
||||
<div className="block" data-num="11"></div>
|
||||
<div className="block" data-num="12"></div>
|
||||
<div className="block" data-num="13"></div>
|
||||
<div className="block" data-num="14"></div>
|
||||
<div className="block" data-num="15"></div>
|
||||
<div className="block" data-num="16"></div>
|
||||
<div className="block" data-num="17"></div>
|
||||
<div className="block" data-num="18"></div>
|
||||
<div className="block" data-num="19"></div>
|
||||
<div className="block" data-num="20"></div>
|
||||
<div className="block" data-num="21"></div>
|
||||
<div className="block" data-num="22"></div>
|
||||
<div className="block" data-num="23"></div>
|
||||
<div className="block" data-num="24"></div>
|
||||
<div className="block" data-num="25"></div>
|
||||
<div className="block" data-num="26"></div>
|
||||
<div className="block" data-num="27"></div>
|
||||
<div className="block" data-num="28"></div>
|
||||
<div className="block" data-num="29"></div>
|
||||
<div className="block" data-num="30"></div>
|
||||
<div className="block" data-num="31"></div>
|
||||
<div className="block" data-num="32"></div>
|
||||
<div className="block" data-num="33"></div>
|
||||
<div className="block" data-num="34"></div>
|
||||
<div className="block" data-num="35"></div>
|
||||
<div className="block" data-num="36"></div>
|
||||
<div className="block" data-num="37"></div>
|
||||
<div className="block" data-num="38"></div>
|
||||
<div className="block" data-num="39"></div>
|
||||
<div className="block" data-num="40"></div>
|
||||
<div className="block" data-num="41"></div>
|
||||
<div className="block" data-num="42"></div>
|
||||
<div className="block" data-num="43"></div>
|
||||
<div className="block" data-num="44"></div>
|
||||
<div className="block" data-num="45"></div>
|
||||
<div className="block" data-num="46"></div>
|
||||
<div className="block" data-num="47"></div>
|
||||
<div className="block" data-num="48"></div>
|
||||
<div className="block" data-num="49"></div>
|
||||
<div className="block" data-num="50"></div>
|
||||
<div className="block" data-num="51"></div>
|
||||
<div className="block" data-num="52"></div>
|
||||
<div className="block" data-num="53"></div>
|
||||
<div className="block" data-num="54"></div>
|
||||
<div className="block" data-num="55"></div>
|
||||
<div className="block" data-num="56"></div>
|
||||
<div className="block" data-num="57"></div>
|
||||
<div className="block" data-num="58"></div>
|
||||
<div className="block" data-num="59"></div>
|
||||
<div className="divider position-absolute"></div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<div className="date d-flex mb-2 pt-2">
|
||||
<div className="flex-grow-1"></div>
|
||||
<div className="datelib mt-2 pt-1 ps-1 font-monospace opacity-50 fs-5">
|
||||
<span className="icon-calendar me-2" aria-hidden="true"></span>
|
||||
<span id="datelib"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="time d-flex">
|
||||
<div className="flex-grow-1"></div>
|
||||
<div className="clock position-relative d-flex flex-column flex-wrap">
|
||||
<div className="block" data-num="0"></div>
|
||||
<div className="block" data-num="1"></div>
|
||||
<div className="block" data-num="2"></div>
|
||||
<div className="block" data-num="3"></div>
|
||||
<div className="block" data-num="4"></div>
|
||||
<div className="block" data-num="5"></div>
|
||||
<div className="block" data-num="6"></div>
|
||||
<div className="block" data-num="7"></div>
|
||||
<div className="block" data-num="8"></div>
|
||||
<div className="block" data-num="9"></div>
|
||||
<div className="block" data-num="10"></div>
|
||||
<div className="block" data-num="11"></div>
|
||||
<div className="block" data-num="12"></div>
|
||||
<div className="block" data-num="13"></div>
|
||||
<div className="block" data-num="14"></div>
|
||||
<div className="block" data-num="15"></div>
|
||||
<div className="block" data-num="16"></div>
|
||||
<div className="block" data-num="17"></div>
|
||||
<div className="block" data-num="18"></div>
|
||||
<div className="block" data-num="19"></div>
|
||||
<div className="block" data-num="20"></div>
|
||||
<div className="block" data-num="21"></div>
|
||||
<div className="block" data-num="22"></div>
|
||||
<div className="block" data-num="23"></div>
|
||||
<div className="block" data-num="24"></div>
|
||||
<div className="block" data-num="25"></div>
|
||||
<div className="block" data-num="26"></div>
|
||||
<div className="block" data-num="27"></div>
|
||||
<div className="block" data-num="28"></div>
|
||||
<div className="block" data-num="29"></div>
|
||||
<div className="block" data-num="30"></div>
|
||||
<div className="block" data-num="31"></div>
|
||||
<div className="block" data-num="32"></div>
|
||||
<div className="block" data-num="33"></div>
|
||||
<div className="block" data-num="34"></div>
|
||||
<div className="block" data-num="35"></div>
|
||||
<div className="block" data-num="36"></div>
|
||||
<div className="block" data-num="37"></div>
|
||||
<div className="block" data-num="38"></div>
|
||||
<div className="block" data-num="39"></div>
|
||||
<div className="block" data-num="40"></div>
|
||||
<div className="block" data-num="41"></div>
|
||||
<div className="block" data-num="42"></div>
|
||||
<div className="block" data-num="43"></div>
|
||||
<div className="block" data-num="44"></div>
|
||||
<div className="block" data-num="45"></div>
|
||||
<div className="block" data-num="46"></div>
|
||||
<div className="block" data-num="47"></div>
|
||||
<div className="block" data-num="48"></div>
|
||||
<div className="block" data-num="49"></div>
|
||||
<div className="block" data-num="50"></div>
|
||||
<div className="block" data-num="51"></div>
|
||||
<div className="block" data-num="52"></div>
|
||||
<div className="block" data-num="53"></div>
|
||||
<div className="block" data-num="54"></div>
|
||||
<div className="block" data-num="55"></div>
|
||||
<div className="block" data-num="56"></div>
|
||||
<div className="block" data-num="57"></div>
|
||||
<div className="block" data-num="58"></div>
|
||||
<div className="block" data-num="59"></div>
|
||||
<div className="divider position-absolute"></div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TimeClock;
|
||||
|
||||
Reference in New Issue
Block a user