/*
* DS/grenier/MS-DOS/online-DOS/_js/DOS.js
*
* (c) Olivier Pirson --- http://www.opimedia.be/
* April 26, 2021
*/
/* jshint esversion: 7 */
/* jshint strict: true */
/* jshint eqeqeq: true */
/* jshint laxbreak: true */
/* jshint loopfunc: true */
window.addEventListener("load", function () {
"use strict";
const programs = [
{"name": "ascii.exe",
"background": "../../_png/ascii.png",
"zip": "_zip/ascii.zip",
"delay": 1000,
"size": "73,1 Kio",
"date": "12 novembre 2007",
"comment": "Réalisé en C avec DJGPP",
"commands": ["CWSDPMI.EXE", "ascii.exe"],
"info": "ascii.exe",
"isMine": true},
{"name": "Enre (Citations)",
"background": "../../_png/enre.png",
"zip": "_zip/citation.zip",
"delay": 40000,
"size": "367,3 Kio",
"date": "4 décembre 2002",
"comment": "Réalisé en C avec DJGPP
(version moderne)",
"commands": ["CWSDPMI.EXE", "citation\\enre.exe"],
"info": "Enre (Citations)",
"isMine": true},
{"name": "liste.exe",
"background": "_png/liste.png",
"zip": "_zip/liste.zip",
"delay": 2500,
"size": "134,5 Kio",
"date": "23 septembre 2004",
"comment": "Réalisé en C avec DJGPP",
"commands": ["CWSDPMI.EXE", "liste.exe"],
"info": "liste.exe",
"isMine": true},
{"name": "
stop",
"background": "_png/stop.png",
"isStop": true},
{"name": "M$-DOS",
"background": "_png/MS-DOS--80x100-t.png",
"zip": "_zip/dos.zip",
"delay": 1500,
"size": "4,5 Mio",
"date": "4 avril 2020",
"commands": ["echo type list.bat"],
"info": "M$-DOS"}
];
const buttonCanvasBorder = document.getElementById("button-canvas-border");
const buttonCanvasSize = document.getElementById("button-canvas-size");
const buttonHideCursor = document.getElementById("button-hide-cursor");
const buttonKeyboard = document.getElementById("button-keyboard");
const buttonMouseLock = document.getElementById("button-mouse-lock");
const dosboxContainer = document.getElementsByClassName("dosbox-container")[0];
const dosboxInfo = document.getElementById("DOSBox-info");
const infoContainer = document.getElementsByClassName("info-container")[0];
const keyboardContainer = document.getElementsByClassName("keyboard-container")[0];
const loadingContainer = document.getElementsByClassName("loading")[0];
const programsList = document.getElementById("programs-list");
const title = document.title;
let dosboxCi;
/* Border event */
function borderSwitch() {
dosboxContainer.style.border = (buttonCanvasBorder.checked
? "5px solid black"
: "none");
}
borderSwitch();
buttonCanvasBorder.addEventListener("change", borderSwitch);
/* Fullscreen event */
document.getElementById("button-fullscreen").addEventListener("click", function (item) {
if (dosboxCi) {
dosboxCi.fullscreen();
}
});
let delayTimer;
/* Clears canvas */
function canvasClear() {
if (delayTimer) clearTimeout(delayTimer);
loadingContainer.style.display = "none";
dosboxContainer.innerHTML = "
Cliquez sur une des images ci-dessous
et attendez la fin du lancement…
";
}
canvasClear();
/* Canvas size event */
function canvasSizeUpdate() {
let pieces = buttonCanvasSize.value.split("x");
dosboxContainer.style.width = `${pieces[0]}px`;
dosboxContainer.style.height = `${pieces[1]}px`;
dosboxContainer.style.lineHeight = `${pieces[1]}px`;
keyboardContainer.style.width = `${pieces[0]}px`;
}
canvasSizeUpdate();
buttonCanvasSize.addEventListener("change", canvasSizeUpdate);
/* Shows/hides cursor */
function cursorUpdate(click, progress) {
if (progress) {
dosboxContainer.style.cursor = "progress";
}
else if (dosboxCi) {
dosboxContainer.style.cursor = (buttonHideCursor.checked
? "none"
: "crosshair");
}
else if (!click || (dosboxContainer.style.cursor === "none")) {
dosboxContainer.style.cursor = "default";
}
}
buttonHideCursor.addEventListener("change", function (item) { cursorUpdate(true); });
/* Shows/hides virtual keyboard */
function virtualKeyboard() {
keyboardContainer.style.display = (buttonKeyboard.checked
? "block"
: "none");
}
virtualKeyboard();
buttonKeyboard.addEventListener("change", function (item) { virtualKeyboard(); });
/* Runs a DOS program */
function runDos(program) {
if (delayTimer) clearTimeout(delayTimer);
infoContainer.innerHTML = (program.info
? program.info
: "");
if (program.delay) {
loadingContainer.style.display = "block";
delayTimer = setTimeout(function () { loadingContainer.style.display = "none"; }, program.delay);
}
dosboxInfo.innerHTML = "Load…";
cursorUpdate(false, true);
const canvas = document.createElement("canvas");
dosboxContainer.innerHTML = "";
dosboxContainer.appendChild(canvas);
// Create DOSBox and run DOS program when ready
Dos(canvas, {
wdosboxUrl: "https://js-dos.com/6.22/current/wdosbox.js",
autolock: buttonMouseLock.checked
}).ready((fs, main) => {
fs.extract(program.zip).then(() => {
let commands = ["-conf", "./dosbox.conf"];
if (program.commands) {
for (const command of program.commands) {
commands.push("-c");
commands.push(command);
}
}
main(commands).then(function (ci) {
dosboxInfo.innerHTML = "Run…";
document.title = title;
dosboxCi = ci;
cursorUpdate();
});
});
});
}
/* Sets the "run" parameter in the URL */
function setUrlParam(program) {
const url = new URL(window.location);
const newUrl = new URL(window.location);
if (program.isStop) newUrl.searchParams.delete("run");
else newUrl.searchParams.set("run", program.name.split(" ")[0]);
if (newUrl.href !== url.href) window.history.pushState({}, "", newUrl);
}
/* Creates HTML list items and associates click event to run DOS program */
for (const program of programs) {
// Item
const li = document.createElement("li");
const figure = document.createElement("figure");
const img = document.createElement("img");
const figcaption = document.createElement("figcaption");
let targetEvent = img;
if (program.isMine) li.setAttribute("class", "mine");
if (program.background) img.setAttribute("src", program.background);
img.setAttribute("alt", `[${program.name}]`);
figcaption.innerHTML = program.name;
if (program.isStop) {
li.setAttribute("class", "stop");
targetEvent = figure;
}
else if (program.zip) {
const seq = [];
const zipName = program.zip.split("/").pop();
seq.push(`${zipName}`);
if (program.size) seq.push(`(${program.size})`);
if (program.date) { seq.push(`(${program.date})`); }
else if (program.date === "") { seq.push(""); }
if (program.comment) seq.push(`${program.comment}`);
figcaption.innerHTML = seq.join('
');
}
figure.appendChild(img);
figure.appendChild(figcaption);
li.appendChild(figure);
programsList.appendChild(li);
// Listener on the image
targetEvent.addEventListener("click", function (item) {
targetEvent.setAttribute("class", "click");
setTimeout(function () { targetEvent.removeAttribute("class", null); }, 200);
if (dosboxCi) { // kill previous DOSBox
dosboxCi.exit();
dosboxCi = null;
canvasClear();
cursorUpdate();
dosboxInfo.innerHTML = "";
}
setUrlParam(program);
// Run
infoContainer.innerHTML = "";
if (program.zip && !dosboxContainer.childElementCount.childNodes) runDos(program);
});
}
/* If URL parameter "run" specify a DOS program, then runs it */
const autoRun = (new URLSearchParams(window.location.search)).get("run");
if (autoRun) {
for (const program of programs) {
if (autoRun === program.name.split(" ")[0]) {
if (!program.isStop) {
setTimeout(function () { runDos(program); }, 200);
}
break;
}
}
}
// Initializes virtual keyboard
(function () {
const Keyboard = window.SimpleKeyboard.default;
const keyboard = new Keyboard({
onKeyPress: button => onKeyPress(button),
onKeyReleased: button => onKeyReleased(button),
layout: {
"default": [
"1 2 3 4 5 6 7 8 9 0",
"A Z E R T Y U I O P",
"Q S D F G H J K L M",
"W X C V B N / ; \\"
]
}
});
function onKeyPress(button) {
if (dosboxCi) {
dosboxCi.simulateKeyEvent(button.charCodeAt(0), true);
}
}
function onKeyReleased(button) {
if (dosboxCi) {
dosboxCi.simulateKeyEvent(button.charCodeAt(0), false);
}
}
}());
});