webash-logo/WeBashLogoWeb/WeBashLogoWeb.js
2021-10-03 12:16:30 +02:00

404 lines
11 KiB
JavaScript

/* JS de WeBash. */
var sortie = document.getElementById("terminal");
sortieInit = sortie.innerHTML;//Entrée initiale sauvée.
const TEMPS_L = 500;//Temps long.
const TEMPS_C = 250;//Temps court.
/* Sortie pour la console. */
function sortie_log(sortie)
{
log_format_begin = "color: red; font-style: italic; background-color: default;padding: 2px";
warn_format_begin = "color: yellow; font-style: italic; background-color: default;padding: 2px";
log_format_end = "color: default; font-style: default; background-color: default;padding: default";
if((typeof sortie) !== 'string')
{
console.warn("%cAttention ! :%c\n%s", log_format_begin, log_format_end,
"sortie_log : l'argument n'est pas une chaîne.");
exit;
}
console.log("%cSortie :%c\n%s", log_format_begin, log_format_end, sortie);
}
/* La collection de symboles et caractères en art ASCII. */
var logo0 = ["",//ligne 0
" _______________________________ ",
" /._____________________. ._. ._.\\ ",
" / |_____________________| |_| |_| \\ ",
"/___________________________________\\",
"| | ",
"| | ",
"| | ",
"| | ",
"| | ",
"| | ",
"| | ",
"| | ",
"| | ",
"| | ",
"| | ",
"| | ",
"| | ",
"\\ </pre><pre class=\"red blink\">#############################</pre><pre> /",
" \\_________________________________/ ",
""];// ligne 20
var logo1 = ["",
" _______________________________ ",
" /._____________________. ._. ._.\\ ",
" / |_____________________| |_| |_| \\ ",
"/___________________________________\\",
"| | ",
"|</pre><pre class=\"red\"> _____ _____ </pre><pre>| ",
"|</pre><pre class=\"red\"> / / / / </pre><pre>| ",
"|</pre><pre class=\"red\"> _____/ /____/ /____ </pre><pre>| ",
"|</pre><pre class=\"red\"> / / </pre><pre>| ",
"|</pre><pre class=\"red\"> /____ _____ _____/ </pre><pre>| ",
"|</pre><pre class=\"red\"> / / / / </pre><pre>| ",
"|</pre><pre class=\"red\"> _____/ /____/ /____ </pre><pre>| ",
"|</pre><pre class=\"red\"> / / </pre><pre>| ",
"|</pre><pre class=\"red\"> /____ _____ _____/ </pre><pre>| ",
"|</pre><pre class=\"red\"> / / / / </pre><pre>| ",
"|</pre><pre class=\"red\"> /____/ /____/ </pre><pre>| ",
"| | ",
"\\ /",
" \\_________________________________/ ",
""];
var logo2 = ["",
"",
"",
"",
"",
"",
"",
"",
"__ __ __",
"\\ \\ / / / /",
" \\ \\ / / / / ",
" \\ \\ / / / / ",
" \\ \\ / /\\ / / ",
" \\ \\/ /\\ \\/ / ",
" \\_\\/ \\_\\/ ",
"",
"",
"",
"",
"",
""];
var logo3 = ["",
"",
"",
"",
"",
"",
"",
"",
"__ __ __ ",
"\\ \\ / / / / ",
" \\ \\ / / / / ",
" \\ \\ / / / / ___ ",
" \\ \\ / /\\ / / /___\\ ",
" \\ \\/ /\\ \\/ / | ",
" \\_\\/ \\_\\/ \\___/ ",
"",
"",
"",
"",
"",
""];
var logo4 = ["",
"",
"",
"",
"",
"",
"",
"",
" _ ___ ",
"| | \\\\ ",
"| | || ",
"| |__// ",
"| | \\\\ ",
"| | || ",
"|_|__// ",
"",
"",
"",
"",
"",
""];
var logo5 = ["",
"",
"",
"",
"",
"",
"",
"",
" ",
" ",
" ",
" ___ ",
" ___\\ ",
"/ | ",
"\\___| ",
"",
"",
"",
"",
"",
""];
var logo6 = ["",
"",
"",
"",
"",
"",
"",
"",
" ",
" ",
" ",
" ___ ",
"/ ",
"`--, ",
"___/ ",
"",
"",
"",
"",
"",
""];
var logo7 = ["",
"",
"",
"",
"",
"",
"",
"",
" ",
" ",
"| ",
"|__ ",
"| \\ ",
"| | ",
"| | ",
"",
"",
"",
"",
"",
""];
/* Liste des différents états du curseur clignotant. */
var curseur1 = ["","","","","","","","","","","","","","","","",
" \
</pre><pre class=\"blink\">######</pre><pre>\n",
"","","",""];
var curseur2 = ["","","","","","","","","","","","","","","","",
" \
</pre><pre class=\"blink\">######</pre><pre>\n",
"","","",""];
var curseur3 = ["","","","","","","","","","","","","","","","",
" \
</pre><pre class=\"blink\">######</pre><pre>\n",
"","","",""];
var curseur4 = ["","","","","","","","","","","","","","","","",
" \
</pre><pre class=\"blink\">######</pre><pre>\n",
"","","",""];
var curseur5 = ["","","","","","","","","","","","","","","","",
" \
</pre><pre class=\"blink\">######</pre><pre>\n",
"","","",""];
var curseur6 = ["","","","","","","","","","","","","","","","",
" \
</pre><pre class=\"blink\">######</pre><pre>\n",
"","","",""];
var curseur7 = ["","","","","","","","","","","","","","","","",
" \
</pre><pre class=\"blink\">######</pre><pre>\n",
"","","",""];
/* Pour l'effet clignotant du curseur. */
/* Changement de style CSS pour clignoter. */
/* CASSÉ!
* DÉBUT *
allume = true;//Curseur visible.
function clignotant()
{
var elemCligno = document.getElementsByClassName('cligno');
if(allume)//Si visible.
{
textColor = 'opacity:0;';
a = "Oui";
}
else//Si caché.
{
textColor = 'opacity:1;';
a = "Non";
}
for(let i=0; i<elemCligno.lenght; i++)
{
elem = elemCligno[i];
elem.setAttribute('style', textColor);//Nouvelle couleur.
console.log("%cVisibilité%c\n%s", log_format_begin, log_format_end, a);
allume = !allume;//État alterné.
}
}
window.setInterval(clignotant, 250);//Alternance d'état tous les 1/4 de seconde.
* FIN */
/* La fenêtre sans croisillon. */
function sortieAffiche0()
{
sGroupe = "";
sGroupe = sGroupe.concat("<pre>"+"\n");
for(let i=0;i<logo0.length;i++)
{
/* Mieux vaut concaténer qu'user l'opératuer '+' surchargé. */
sGroupe = sGroupe.concat(logo0[i]+"\n");
}
sGroupe = sGroupe.concat("</pre>"+"\n");
sortie.innerHTML = sortieInit + sGroupe ;
sortie_log(sortie.innerHTML);
}
/* La fenêtre avec croisillon. */
function sortieAffiche1()
{
sGroupe = "";
sGroupe = sGroupe.concat("<pre>"+"\n");
for(let i=0;i<logo0.length;i++)
{
sGroupe = sGroupe.concat(logo1[i]);
sGroupe = sGroupe.concat(curseur1[i]+"\n");
}
sGroupe = sGroupe.concat("</pre>"+"\n");
sortie.innerHTML = sortieInit + sGroupe ;
sortie_log(sortie.innerHTML);
}
/* Ajout de 'W'. */
function sortieAffiche2()
{
sGroupe = "";
sGroupe = sGroupe.concat("<pre>"+"\n");
for(let i=0;i<logo0.length;i++)
{
sGroupe = sGroupe.concat(logo1[i]+logo2[i]);
sGroupe = sGroupe.concat(curseur2[i]+"\n");
}
sGroupe = sGroupe.concat("</pre>"+"\n");
sortie.innerHTML = sortieInit + sGroupe ;
sortie_log(sortie.innerHTML);
}
/* Ajout de 'e'. */
function sortieAffiche3()
{
sGroupe = "";
sGroupe = sGroupe.concat("<pre>"+"\n");
for(let i=0;i<logo0.length;i++)
{
sGroupe = sGroupe.concat(logo1[i]+logo3[i]);
sGroupe = sGroupe.concat(curseur3[i]+"\n");
}
sGroupe = sGroupe.concat("</pre>"+"\n");
sortie.innerHTML = sortieInit + sGroupe ;
sortie_log(sortie.innerHTML);
}
/* Ajout de 'B'. */
function sortieAffiche4()
{
sGroupe = "";
sGroupe = sGroupe.concat("<pre>"+"\n");
for(let i=0;i<logo0.length;i++)
{
sGroupe = sGroupe.concat(logo1[i]+logo3[i]+logo4[i]);
sGroupe = sGroupe.concat(curseur4[i]+"\n");
}
sGroupe = sGroupe.concat("</pre>"+"\n");
sortie.innerHTML = sortieInit + sGroupe ;
sortie_log(sortie.innerHTML);
}
/* Ajout de 'a'. */
function sortieAffiche5()
{
sGroupe = "";
sGroupe = sGroupe.concat("<pre>"+"\n");
for(let i=0;i<logo0.length;i++)
{
sGroupe = sGroupe.concat(logo1[i]+logo3[i]);
sGroupe = sGroupe.concat(logo4[i]+logo5[i]);
sGroupe = sGroupe.concat(curseur5[i]+"\n");
}
sGroupe = sGroupe.concat("</pre>"+"\n");
sortie.innerHTML = sortieInit + sGroupe ;
sortie_log(sortie.innerHTML);
}
/* Ajout de 's'. */
function sortieAffiche6()
{
sGroupe = "";
sGroupe = sGroupe.concat("<pre>"+"\n");
for(let i=0;i<logo0.length;i++)
{
sGroupe = sGroupe.concat(logo1[i]+logo3[i]);
sGroupe = sGroupe.concat(logo4[i]+logo5[i]+logo6[i]);
sGroupe = sGroupe.concat(curseur6[i]+"\n");
}
sGroupe = sGroupe.concat("</pre>"+"\n");
sortie.innerHTML = sortieInit + sGroupe ;
sortie_log(sortie.innerHTML);
}
/* Ajout de 'h'. */
function sortieAffiche7()
{
sGroupe = "";
sGroupe = sGroupe.concat("<pre>"+"\n");
for(let i=0;i<logo0.length;i++)
{
sGroupe = sGroupe.concat(logo1[i]+logo3[i]);
sGroupe = sGroupe.concat(logo4[i]+logo5[i]);
sGroupe = sGroupe.concat(logo6[i]+logo7[i]);
sGroupe = sGroupe.concat(curseur7[i]+"\n");
}
sGroupe = sGroupe.concat("</pre>"+"\n");
sortie.innerHTML = sortieInit + sGroupe ;
sortie_log(sortie.innerHTML);
}
/* Suppression du curseur. */
function sortieAffiche8()
{
sGroupe = "";
sGroupe = sGroupe.concat("<pre>"+"\n");
for(let i=0;i<logo0.length;i++)
{
sGroupe = sGroupe.concat(logo1[i]+logo3[i]);
sGroupe = sGroupe.concat(logo4[i]+logo5[i]);
sGroupe = sGroupe.concat(logo6[i]+logo7[i]+"\n");
}
sGroupe = sGroupe.concat("</pre>"+"\n");
sortie.innerHTML = sortieInit + sGroupe ;
sortie_log(sortie.innerHTML);
sortie_log("Fini !");
}
/* Suite de séquences d'affichage.
* On contrôle les temps absolus entre les calques.
*/
function webashBoot()
{
window.setTimeout(sortieAffiche0, TEMPS_L);
window.setTimeout(sortieAffiche1, 2*TEMPS_L);
window.setTimeout(sortieAffiche2, 4*TEMPS_L);
window.setTimeout(sortieAffiche3, 4*TEMPS_L + TEMPS_C);
window.setTimeout(sortieAffiche4, 5*TEMPS_L + 2*TEMPS_C);
window.setTimeout(sortieAffiche5, 5*TEMPS_L + 3*TEMPS_C);
window.setTimeout(sortieAffiche6, 5*TEMPS_L + 4*TEMPS_C);
window.setTimeout(sortieAffiche7, 5*TEMPS_L + 5*TEMPS_C);
window.setTimeout(sortieAffiche8, 10*TEMPS_L + 5*TEMPS_C);
}
/* Le logo de WeBash commence à partir du bouton BOOT. */
boutton = document.getElementById('boot');
function auBoulot()
{
boutton.disabled = true;
webashBoot();
boutton.innerText = "RE-".concat(boutton.innerText);
window.setTimeout(()=>{boutton.disabled = false;}, 10*TEMPS_L + 5*TEMPS_C);
}
boutton.addEventListener('click', auBoulot);