js-dos 7.2.6 → 7.3.2

package/README.md

@@ -1,13 +1,81 @@
 # js-dos 7.xx
 [![Build](https://github.com/caiiiycuk/js-dos/actions/workflows/yarn-gulp.yml/badge.svg)](https://github.com/caiiiycuk/js-dos/actions/workflows/yarn-gulp.yml)
 
-js-dos is a javascript library that allows you to run DOS programs in browser. js-dos provides nice and easy to use javascript api over dosbox.
+js-dos is a javascript library that allows you to run DOS programs in browser. It was designed from the ground up to be easily installed and used to get your DOS program up and running in browser quickly.
 
-[Documentation](https://js-dos.com/).
+```js
+    Dos(element).run("game.jsdos")
+```
+
+[Documentation](https://js-dos.com/)
+
+## Quick start with create-dosbox
+
+Create js-dos web page with no build configuration.
+
+```sh
+npx create-dosbox my-app
+cd my-app
+npm install
+npm start
+---
+Open localhost:8080 in browser
+```
+
+You will be prompted to select game that you want bootstrap.
+
+If you've previously installed `create-dosbox` globally via `npm install -g create-dosbox`, we recommend you uninstall the package using `npm uninstall -g create-dosbox` or `yarn global remove create-dosbox` to ensure that npx always uses the latest version.
+
+_([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))_
+
+Then open [http://localhost:8080/](http://localhost:8080/) to see your app.<br>
+
+<p align='center'>
+<img src='https://github.com/js-dos/create-dosbox/raw/master/npx-create-dosbox.gif' width='600' alt='npm start'>
+</p>
+
+It will create a directory called `my-app` inside the current folder.<br>
+Inside that directory, it will generate the initial project structure:
+
+```
+my-app
+├── package.json
+└── _site
+    ├── js-dos
+    ├── bundle.jsdos
+    └── index.html
+```
 
-Subscribe our [twitter](https://twitter.com/doszone_db/) channel for updates. 
+No configuration or complicated folder structures, only the files you need to build your app.<br>
 
-Join our [discord](https://discord.com/invite/hMVYEbG) community.
+* **js-dos** - contains last release version of js-dos that you can download from [Releases](https://github.com/caiiiycuk/js-dos/releases) page
+* **bundle.jsdos** - is a bundle with game to start [read more](https://js-dos.com/v7/build/docs/jsdos-bundle)
+* **index.html** - is a web page template
+
+So, you can host `_site `on static web server no other dependincies is needed.
+
+Once the installation is done, you can open your project folder:
+
+```sh
+cd my-app
+```
+
+Inside the newly created project, you can run some built-in commands:
+
+```sh
+npm install
+npm start
+```
+
+Open [http://localhost:8080](http://localhost:8080) to view it in the browser.
+
+## Community
+
+Ask a technical question in [Q&A](https://talks.dos.zone/c/questions-answers/).
+
+* [Discord](https://discord.com/invite/hMVYEbG)
+* [Twitter](https://twitter.com/intent/user?screen_name=doszone_db)
+* [Telegram](https://t.me/doszone)
 
 ## Building
 
@@ -33,13 +101,7 @@ hs .
 firefox examples/digger/index.html
 ```
 
+# Older releases
 
-# Legacy js-dos
-
-## js-dos 6.22
-
-[Documentation](https://js-dos.com/index_6.22.html) of previous version js-dos.
-
-## js-dos 3.xx
-
-[Documentation](https://js-dos.com/index_v3.html) of js-dos v3.
+* [js-dos 6.22](https://js-dos.com/index_6.22.html)
+* [js-dos 3.xx](https://js-dos.com/index_v3.html)

package/dist/js-dos.css

@@ -244,7 +244,7 @@
 /* simple-keyboard */
 .hg-theme-default{width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;overflow:hidden;touch-action:manipulation}.hg-theme-default .hg-button span{pointer-events:none}.hg-theme-default button.hg-button{border-width:0;outline:0;font-size:inherit}.hg-theme-default{font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;background-color:#ececec;padding:5px;border-radius:5px}.hg-theme-default .hg-button{display:inline-block;flex-grow:1}.hg-theme-default .hg-row{display:flex}.hg-theme-default .hg-row:not(:last-child){margin-bottom:5px}.hg-theme-default .hg-row .hg-button-container,.hg-theme-default .hg-row .hg-button:not(:last-child){margin-right:5px}.hg-theme-default .hg-row>div:last-child{margin-right:0}.hg-theme-default .hg-row .hg-button-container{display:flex}.hg-theme-default .hg-button{box-shadow:0 0 3px -1px rgba(0,0,0,.3);height:40px;border-radius:5px;box-sizing:border-box;padding:5px;background:#fff;border-bottom:1px solid #b5b5b5;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:rgba(0,0,0,0)}.hg-theme-default .hg-button.hg-activeButton{background:#efefef}.hg-theme-default.hg-layout-numeric .hg-button{width:33.3%;height:60px;align-items:center;display:flex;justify-content:center}.hg-theme-default .hg-button.hg-button-numpadadd,.hg-theme-default .hg-button.hg-button-numpadenter{height:85px}.hg-theme-default .hg-button.hg-button-numpad0{width:105px}.hg-theme-default .hg-button.hg-button-com{max-width:85px}.hg-theme-default .hg-button.hg-standardBtn.hg-button-at{max-width:45px}.hg-theme-default .hg-button.hg-selectedButton{background:rgba(5,25,70,.53);color:#fff}.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"]{max-width:82px}.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"]{max-width:60px}
 
-/*! tailwindcss v2.2.17 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v2.2.19 | MIT License | https://tailwindcss.com */
 
 /*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
 
@@ -469,6 +469,11 @@ button,
 Remove the inner border and padding in Firefox.
 */
 
+::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
 /**
 Restore the focus styles unset by the previous rule.
 */
@@ -498,6 +503,11 @@ progress {
 Correct the cursor style of increment and decrement buttons in Safari.
 */
 
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
 /**
 1. Correct the odd appearance in Chrome and Safari.
 2. Correct the outline style in Safari.
@@ -507,11 +517,22 @@ Correct the cursor style of increment and decrement buttons in Safari.
 Remove the inner padding in Chrome and Safari on macOS.
 */
 
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
 /**
 1. Correct the inability to style clickable types in iOS and Safari.
 2. Change font properties to 'inherit' in Safari.
 */
 
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
 /*
 Interactive
 ===========
@@ -866,6 +887,16 @@ video {
   margin-right: 0.5rem;
 }
 
+.-mx-6 {
+  margin-left: -1.5rem;
+  margin-right: -1.5rem;
+}
+
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
 .my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;
@@ -879,6 +910,10 @@ video {
   margin-top: 0.5rem;
 }
 
+.mt-4 {
+  margin-top: 1rem;
+}
+
 .-mt-1 {
   margin-top: -0.25rem;
 }
@@ -935,6 +970,10 @@ video {
   height: 1rem;
 }
 
+.h-5 {
+  height: 1.25rem;
+}
+
 .h-6 {
   height: 1.5rem;
 }
@@ -975,6 +1014,10 @@ video {
   width: 2.5rem;
 }
 
+.w-14 {
+  width: 3.5rem;
+}
+
 .w-24 {
   width: 6rem;
 }
@@ -1095,10 +1138,6 @@ video {
   cursor: pointer;
 }
 
-.cursor-not-allowed {
-  cursor: not-allowed;
-}
-
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -1139,10 +1178,6 @@ video {
   gap: 1rem;
 }
 
-.self-center {
-  align-self: center;
-}
-
 .overflow-auto {
   overflow: auto;
 }
@@ -1171,6 +1206,10 @@ video {
   overflow-wrap: break-word;
 }
 
+.break-all {
+  word-break: break-all;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -1193,6 +1232,10 @@ video {
   border-width: 2px;
 }
 
+.border {
+  border-width: 1px;
+}
+
 .border-t-2 {
   border-top-width: 2px;
 }
@@ -1219,6 +1262,11 @@ video {
   border-color: rgba(31, 41, 55, var(--tw-border-opacity));
 }
 
+.border-red-600 {
+  --tw-border-opacity: 1;
+  border-color: rgba(220, 38, 38, var(--tw-border-opacity));
+}
+
 .border-green-200 {
   --tw-border-opacity: 1;
   border-color: rgba(167, 243, 208, var(--tw-border-opacity));
@@ -1239,6 +1287,11 @@ video {
   background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
 }
 
+.bg-gray-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
+}
+
 .bg-red-200 {
   --tw-bg-opacity: 1;
   background-color: rgba(254, 202, 202, var(--tw-bg-opacity));
@@ -1301,6 +1354,10 @@ video {
   text-align: right;
 }
 
+.font-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
 .text-xs {
   font-size: 0.75rem;
   line-height: 1rem;
@@ -1316,6 +1373,11 @@ video {
   line-height: 1.75rem;
 }
 
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -1359,6 +1421,11 @@ video {
   color: rgba(52, 211, 153, var(--tw-text-opacity));
 }
 
+.text-green-600 {
+  --tw-text-opacity: 1;
+  color: rgba(5, 150, 105, var(--tw-text-opacity));
+}
+
 .text-blue-400 {
   --tw-text-opacity: 1;
   color: rgba(96, 165, 250, var(--tw-text-opacity));
@@ -1369,11 +1436,21 @@ video {
   color: rgba(37, 99, 235, var(--tw-text-opacity));
 }
 
+.text-pink-400 {
+  --tw-text-opacity: 1;
+  color: rgba(244, 114, 182, var(--tw-text-opacity));
+}
+
 .hover\:text-gray-800:hover {
   --tw-text-opacity: 1;
   color: rgba(31, 41, 55, var(--tw-text-opacity));
 }
 
+.hover\:text-green-600:hover {
+  --tw-text-opacity: 1;
+  color: rgba(5, 150, 105, var(--tw-text-opacity));
+}
+
 .underline {
   text-decoration: underline;
 }
@@ -1382,6 +1459,10 @@ video {
   opacity: 0.8;
 }
 
+.opacity-95 {
+  opacity: 0.95;
+}
+
 *, ::before, ::after {
   --tw-shadow: 0 0 #0000;
 }
@@ -1445,6 +1526,27 @@ video {
   color: rgba(75, 85, 99, var(--tw-text-opacity));
 }
 
+input:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+select {
+  border-radius: 0.25rem;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgba(167, 243, 208, var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+select:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
 @media (min-width: 640px) {
   .sm\:w-80 {
     width: 20rem;