pages/doswasmx/start.html

442 lines
No EOL
26 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<title>DOS Wasm X</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="DOS Emulator, DOS JavaScript Emulator, WebAssembly, HTML5">
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/rivets/0.9.6/rivets.bundled.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.2/dist/FileSaver.min.js"></script>
<!-- when developing offline -->
<!-- <script src="jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="font-awesome.min.css">
<script src="rivets.bundled.min.js"></script>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="popper.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="toastr.min.js"></script>
<link rel="stylesheet" href="toastr.min.css">
<script src="FileSaver.min.js"></script>
<script src="zip.min.js"></script> -->
</head>
<style>
input[type="file"] {
display: none;
}
.progress {
height: 2rem;
font-size: 1rem;
}
.settingsTitle {
vertical-align: top;
padding-top: 10px;
}
</style>
<body>
<div id="maindiv" class="container text-center">
<h1 id="header">
DOS Wasm X
</h1>
<div id="topPanel" style="display: none;">
<!-- BEFORE LOAD -->
<div rv-if="data.beforeEmulatorStarted">
<div class="mt-2 mb-2" rv-if="data.message">
<div rv-html="data.message">
</div>
</div>
<div class="mt-2 mb-2" rv-if="data.loading">
<i class="fa fa-refresh fa-spin" style="font-size:14px;margin-right:0.5em;"></i>
Loading...
</div>
<div class="progress mt-4" id="progressOuter" rv-if="data.showProgress">
<div class="progress-bar bg-info" role="progressbar" id="myProgress">1%</div>
</div>
<button class="btn btn-primary mt-4" onclick="myApp.loadRom();" id="btnLoad"
rv-if="data.loggedIn | ev '==true'"
rv-disabled="data.moduleInitializing">Play Game</button>
<span rv-if="data.dblistDisks | ev_string '.length > 0'">
<button class="btn btn-primary mt-4" onclick="myApp.loadRom(true);" id="btnStart"
rv-disabled="data.moduleInitializing"
rv-if="data.loggedIn | ev '==false'">Start Computer</button>
</span>
<span rv-if="data.dblistDisks | ev_string '.length == 0'">
<span rv-if="data.settings.DEFAULTIMG">
<button class="btn btn-primary mt-4" onclick="myApp.loadRom(true);" id="btnStart"
rv-disabled="data.moduleInitializing"
rv-if="data.loggedIn | ev '==false'">Start Computer</button>
</span>
</span>
<button id="btnUploadRom" class="btn btn-primary mt-4" onclick="myApp.uploadBrowse()"
rv-disabled="data.moduleInitializing">Browse</button>
<button id="btnUploadRom" class="btn btn-primary mt-4" onclick="myApp.settingsModal()"
rv-disabled="data.moduleInitializing">Settings</button>
<span rv-if="data.hasCloud">
<button class="btn btn-primary mt-4" rv-if="data.loggedIn | ev '==false'"
onclick="myApp.loginModal()">Login</button>
<button class="btn btn-primary mt-4" rv-if="data.loggedIn | ev '==true'"
onclick="myApp.logout()">Logout</button>
</span>
<input id="file-upload" type="file" multiple />
<!-- ROM LIST -->
<div class="form-group mt-2 mb-4" rv-if="data.loggedIn | ev '==true'"
style="width: 300px;margin-left: auto; margin-right:auto;">
<select class="form-control" id="romselect">
<option rv-each-rom="data.romList" rv-skipiso="rom.skipiso"
rv-ram="rom.ram" rv-value="rom.url">{rom.title}</option>
</select>
</div>
</div>
<!-- DRAG AND DROP -->
<div style="margin-top:40px;" rv-if="data.beforeEmulatorStarted">
<div>
<div id="dropArea" rv-hide="data.moduleInitializing"
style="width: 150px; height: 150px; border: gray 1px solid;margin-left: auto;
color: darkgrey;margin-right: auto; border-style: dashed;">
<br>
<br>
<span>Drag/Drop Files</span>
<br>
<span>ZIP,ISO,BIN,CUE</span>
<br>
</div>
</div>
<div rv-hide="data.settings.DEFAULTIMG">
<div rv-hide="data.moduleInitializing" style="width: 70%; margin-left: auto; margin-right: auto;">
<div rv-hide="data.loggedIn | ev '==true'">
<div class="alert alert-info mt-4" role="alert" rv-if="data.dblistDisks | ev_string '.length == 0'">
Start by dragging any DOS based application/game files onto the page. <br>
If you want to run Windows simply drag a Windows 95/98 ISO and proceed with the installation.
</div>
</div>
</div>
</div>
</div>
<!-- AFTER LOAD -->
<div style="display: inline;" rv-hide="data.beforeEmulatorStarted" id="afterLoadDiv">
<div class="mt-2 mb-2" rv-if="data.message">
<div rv-html="data.message">
</div>
</div>
<button class="btn btn-primary mt-2 mb-2" onclick="myApp.newRom()" >Exit</button>
<button class="btn btn-primary mt-2 mb-2" onclick="myApp.zoomOut()" id="btnZoomOut" >Zoom Out</button>
<button class="btn btn-primary mt-2 mb-2" onclick="myApp.zoomIn()" id="btnZoomIn" >Zoom In</button>
<button class="btn btn-primary mt-2 mb-2" onclick="myApp.fullscreen()">Fullscreen</button>
<button class="btn btn-primary mt-2 mb-2" onclick="myApp.saveDrive()" rv-if="data.loggedIn | ev '==false'">Save Drive</button>
<div style="display: inline;">
<button type="button" class="btn btn-primary dropdown-toggle" onkeydown="myApp.dropdownKeyDown(event)"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
CPU: { data.cpu }
</button>
<div class="dropdown-menu">
<a class="dropdown-item" onclick="myApp.updateCPU('auto')" style="cursor: pointer;">Auto</a>
<a class="dropdown-item" onclick="myApp.updateCPU('max')" style="cursor: pointer;">Max</a>
<a class="dropdown-item" onclick="myApp.updateCPU('1320')" style="cursor: pointer;">1320 - 286, 6 MHz from 1982</a>
<a class="dropdown-item" onclick="myApp.updateCPU('2750')" style="cursor: pointer;">2750 - 286, 12.5 MHz from 1985</a>
<a class="dropdown-item" onclick="myApp.updateCPU('4720')" style="cursor: pointer;">4720 - 386, 20 MHz from 1987</a>
<a class="dropdown-item" onclick="myApp.updateCPU('7800')" style="cursor: pointer;">7800 - 386DX, 33 MHz from 1989</a>
<a class="dropdown-item" onclick="myApp.updateCPU('10000')" style="cursor: pointer;">10000 - 386DX, 33 MHz from 1990</a>
<a class="dropdown-item" onclick="myApp.updateCPU('13400')" style="cursor: pointer;">13400 - 486DX, 40 MHz from 1991</a>
<a class="dropdown-item" onclick="myApp.updateCPU('18000')" style="cursor: pointer;">18000 - 486DX, 45 MHz from 1992</a>
<a class="dropdown-item" onclick="myApp.updateCPU('22000')" style="cursor: pointer;">22000 - 486DX, 50 MHz from 1993</a>
<a class="dropdown-item" onclick="myApp.updateCPU('26800')" style="cursor: pointer;">26800 - 486DX2, 60 MHz from 1994</a>
<a class="dropdown-item" onclick="myApp.updateCPU('30000')" style="cursor: pointer;">30000 - 486DX2, 70 MHz from 1995</a>
<a class="dropdown-item" onclick="myApp.updateCPU('40000')" style="cursor: pointer;">40000 - 486DX2, 80 MHz from 1996</a>
<a class="dropdown-item" onclick="myApp.updateCPU('50000')" style="cursor: pointer;">50000 - 486DX2, 90 MHz from 1996</a>
<a class="dropdown-item" onclick="myApp.updateCPU('77000')" style="cursor: pointer;">77000 - Pentium, 150 MHz from 1997</a>
<a class="dropdown-item" onclick="myApp.updateCPU('100000')" style="cursor: pointer;">100000 - Pentium, 200 MHz from 1997</a>
<a class="dropdown-item" onclick="myApp.updateCPU('200000')" style="cursor: pointer;">200000 - Pentium II, 300 MHz from 1998</a>
<a class="dropdown-item" onclick="myApp.updateCPU('500000')" style="cursor: pointer;">500000 - Pentium III, 600 MHz from 1999</a>
<a class="dropdown-item" onclick="myApp.updateCPU('1000000')" style="cursor: pointer;">1000000 - AMD Athlon, 1.2 GHz from 2000</a>
</div>
</div>
<div style="display: inline;">
<button type="button" class="btn btn-primary dropdown-toggle" onkeydown="myApp.dropdownKeyDown(event)"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Advanced
</button>
<div class="dropdown-menu">
<a class="dropdown-item" onclick="myApp.saveHardDriveDiffs()" rv-if="data.loggedIn | ev '==true'" style="cursor: pointer;">Save Cloud Drive</a>
<a class="dropdown-item" onclick="myApp.toggleFPS()" style="cursor: pointer;">Performance Stats</a>
<!-- <a class="dropdown-item" onclick="myApp.saveStateLocal()" rv-if="data.loggedIn | ev '==false'" style="cursor: pointer;">Save State (Experimental)</a>
<a class="dropdown-item" onclick="myApp.loadStateLocal()" rv-if="data.loggedIn | ev '==false'" rv-hide="data.noLocalSave" style="cursor: pointer;">Load State (Experimental)</a>
<a class="dropdown-item" onclick="myApp.saveCloud()" rv-if="data.loggedIn | ev '==true'" style="cursor: pointer;">Save Cloud State (Experimental)</a>
<a class="dropdown-item" onclick="myApp.loadCloud()" rv-if="data.loggedIn | ev '==true'" rv-hide="data.noCloudSave" style="cursor: pointer;">Load Cloud State (Experimental)</a> -->
<a class="dropdown-item" onclick="myApp.cacheIsoAndBaseImage()" rv-if="data.loggedIn | ev '==true'" style="cursor: pointer;">Cache ISO and Base Image</a>
<a class="dropdown-item" onclick="myApp.importModal()" style="cursor: pointer;">Import Files</a>
<a class="dropdown-item" onclick="myApp.importModal('noCopy')" rv-if="data.loggedIn | ev '==true'" style="cursor: pointer;">Import Files Without Copy</a>
<a class="dropdown-item" onclick="myApp.exportModal()" style="cursor: pointer;">Export Files</a>
<a class="dropdown-item" onclick="myApp.importModal('loadCD')" rv-hide="data.isoMounted" style="cursor: pointer;">Load CD</a>
<a class="dropdown-item" onclick="myApp.importModal('changeCD')" rv-if="data.isoMounted" style="cursor: pointer;">Change CD</a>
<span rv-if="data.isDosMode"><a class="dropdown-item" onclick="myApp.importModal('loadFloppy')" rv-hide="data.floppyMounted" style="cursor: pointer;">Load Floppy</a></span>
<a class="dropdown-item" onclick="myApp.importModal('changeFloppy')" rv-if="data.floppyMounted" style="cursor: pointer;">Change Floppy</a>
<a class="dropdown-item" onclick="myApp.exportHardDrive()" style="cursor: pointer;">Export Hard Drive</a>
<a class="dropdown-item" onclick="myApp.toggle16BitColorFix()" style="cursor: pointer;">16 Bit Color Fix</a>
<a class="dropdown-item" onclick="myApp.sendCtrlAltDel()" style="cursor: pointer;">Send Ctrl+Alt+Del</a>
<a class="dropdown-item" onclick="myApp.togglePause()" style="cursor: pointer;">Pause/Unpause</a>
<a class="dropdown-item" onclick="myApp.toggleAutoKeybaord()" rv-if="data.loggedIn | ev '==true'" style="cursor: pointer;">Auto Keyboard Presses</a>
<a class="dropdown-item" onclick="myApp.exitToDos()" style="cursor: pointer;">Exit to DOS</a>
</div>
</div>
</div>
</div>
<div style="display: none;" id="errorOuter">
<div rv-if="data.lblError"
class="alert alert-danger mt-4" id="lblError" role="alert"
rv-html="data.lblError">
</div>
</div>
<input id="file-import" type="file" multiple />
</div>
<div id="canvasDiv" class="mt-2 mb-4"
style="height:480px;text-align: center;margin-left: auto;margin-right: auto;display: none;">
<!-- ID has to be canvas it's hardcoded in the EM generated .js -->
<canvas id="canvas" style="height: 100%;" ></canvas>
</div>
<div id="divInstructions" class="container text-center" style="display: none;">
<div class="alert alert-secondary mt-4" role="alert" rv-if="data.initialInstallation">
Remember to always click the Save Drive button before exiting the page. That will commit your hard disk changes to the browser.<br>
If you installed Windows then remember to shut down the OS before exiting the page.
</div>
</div>
<h6 id="githubDiv" class="card-title mt-4 text-center" style="display: none;">
<a href="https://github.com/nbarkhina/doswasmx" target="_blank" style="color: black;">
View source on GitHub
<img src="github_logo.png" style="height: 25px; padding-bottom: 5px; padding-left: 10px;">
</a>
</h6>
<!-- Settings Modal -->
<div class="modal fade" id="settingsModal" tabindex="-1" role="dialog" aria-labelledby="settingsModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="settingsModalLabel">Settings</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="mb-4">
<div class="mt-2">
<table cellpadding="5">
<tbody>
<tr>
<td style="width: 100px;" class="settingsTitle">
Delete HD
</td>
<td>
<button type="button" class="btn btn-primary" onclick="myApp.clearHardDrive()">Clear Hard Drive</button>
<div style="font-size: 8pt;margin-top: 5px;">Note: this will delete your current hard drive from the browser</div>
</td>
</tr>
<tr>
<td class="settingsTitle">RAM</td>
<td>
<div>
<select class="form-control" rv-value="data.ramTemp" id="ddlRam">
<option value="32">32 MB (Default)</option>
<option value="64">64 MB</option>
<option value="128">128 MB</option>
</select>
</div>
</td>
</tr>
<tr>
<td class="settingsTitle">Initial HD</td>
<td>
<div>
<select class="form-control" rv-value="data.initialHardDriveTemp" id="ddlInitialHD">
<option value="hd -size 25">25 MB</option>
<option value="hd -size 50">50 MB</option>
<option value="hd -size 100">100 MB</option>
<option value="hd_250">250 MB</option>
<option value="hd_520">512 MB (Default)</option>
<option value="hd_1gig">1 GB</option>
<option value="hd_2gig">2 GB</option>
</select>
<div style="font-size: 8pt;margin-top: 5px;">This is the initial size of your in-browser hard drive. If you already have a hard drive you will need to delete it first (above) before setting a new size.</div>
</div>
</td>
</tr>
<tr>
<td class="settingsTitle">DOS Version</td>
<td>
<div>
<select class="form-control" rv-value="data.dosVersionTemp" id="ddlDosVersion">
<option value="3.4">3.4</option>
<option value="4.0">4.0</option>
<option value="5.0">5.0</option>
<option value="7.0">7.0</option>
<option value="7.1">7.1 (Default)</option>
</select>
<div style="font-size: 8pt;margin-top: 5px;">This is the reported DOS version by the emulator. <br />In order to install some older operating systems such as Windows 1.x-3.x you will need to set this to a lower version.</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer" style="padding-top: 0;" rv-hide="data.remapWait">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="myApp.settingsSubmit()">Save Changes</button>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<!-- Export Modal -->
<div class="modal fade" id="exportModal" tabindex="-1" role="dialog" aria-labelledby="exportModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exportModalLabel">Confirm</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<b>WARNING</b> It is recommended to shutdown Windows before running this otherwise it will be shut down automatically.
When you are ready, copy all the files you want to export to the folder C:\EXPORT and press Submit.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="myApp.exportFiles()">Submit</button>
</div>
</div>
</div>
</div>
<!-- IMPORT Modal -->
<div class="modal fade" id="importModal" tabindex="-1" role="dialog" aria-labelledby="importModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="importModalLabel">Confirm</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div rv-if="data.loadCD">
Select ISO/CUE/BIN files to load into the CD drive.
</div>
<div rv-if="data.loadCD">
<b>NOTE</b> This will restart your computer
</div>
<div rv-if="data.changeCD">
Select ISO/CUE/BIN files to swap into the CD drive.
</div>
<div rv-if="data.changeFloppy">
Select file to swap into the floppy drive.
</div>
<div rv-if="data.loadFloppy">
Select file to load into the floppy drive.
</div>
<div rv-hide="data.loadCD">
<div rv-hide="data.loadFloppy">
<div rv-hide="data.changeFloppy">
<div rv-hide="data.changeCD">
<b>WARNING</b> It is recommended to shutdown Windows before running this otherwise it will be shut down automatically.
Click browse and select all the files to import when ready.
<div rv-hide="data.noCopyImport">
After Windows reboots your files will be in C:\IMPORT
</div>
<div rv-if="data.noCopyImport">
Windows will exit to DOS. To access them run "MOUNT E ." followed by "E:"
</div>
</div>
</div>
</div>
</div>
</div>
<div style="text-align: center;margin-bottom: 20px;">
<button id="btnImport" class="btn btn-primary mt-4" onclick="myApp.importBrowse()">Browse</button>
</div>
<div rv-if="data.importStatus" class="mb-2 mt-2 text-center">
{ data.importStatus }
</div>
</div>
</div>
</div>
<!-- Login Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="loginModalLabel">Login</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" id="txtPassword" autocomplete="off"
rv-value="data.password" onkeydown="" placeholder="Enter Password">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="myApp.loginSubmit()">Submit</button>
</div>
</div>
</div>
</div>
<script src="romlist.js"></script>
<script type="text/javascript">
var rando = Math.floor(Math.random() * Math.floor(100000));
var script = document.createElement('script');
script.src = 'settings.js?v=' + rando;
document.getElementsByTagName('head')[0].appendChild(script);
</script>
</body>
</html>