diff --git a/.editorconfig b/.editorconfig index 07dad77..011b4cc 100644 --- a/.editorconfig +++ b/.editorconfig @@ -10,6 +10,9 @@ trim_trailing_whitespace = true [*.js] indent_size = 4 +[*.html] +indent_size = 2 + [*.md] trim_trailing_whitespace = true diff --git a/.eslintrc.json b/.eslintrc.json index d566b2f..e433d72 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -20,7 +20,6 @@ "env": { "builtin": true, "browser": true, - "jquery": true, "es6": true }, "parserOptions": { diff --git a/apple1js.html b/apple1js.html index c2c972b..5579a74 100644 --- a/apple1js.html +++ b/apple1js.html @@ -1,4 +1,4 @@ - + diff --git a/css/apple1.css b/css/apple1.css index 8429394..134d272 100644 --- a/css/apple1.css +++ b/css/apple1.css @@ -37,7 +37,8 @@ input[type="text"] { body { margin: 16px 0px; - font-size: 10px; + font-family: sans-serif; + font-size: 14px; background-color: #114024; color: #fff; } @@ -120,7 +121,7 @@ canvas { } @media screen and (min-device-width:1120px) { -:-webkit-full-screen { +:-webkit-full-screen { background: #000; } @@ -179,6 +180,12 @@ canvas { #keyboard { border-radius: 6px; padding: 0px 0px 3px 0px; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } #keyboard .row { @@ -215,7 +222,6 @@ canvas { height: 34px; background-color: #44372C; color: white; - vertical-align: bottom; text-align: center; position: relative; border: 5px outset #66594E; @@ -331,6 +337,10 @@ canvas { font-family: Courier, fixed; } +#input-modal .controls { + padding-bottom: 10px; +} + #player { position: absolute; left: 290px; @@ -364,3 +374,110 @@ canvas { position: absolute; background: brown; } + +.modal { + display: none; +} + +.modal.is-open { + display: block; +} + +.modal__overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0,0,0,0.6); + display: flex; + justify-content: center; + align-items: center; +} + +.modal__container { + background-color: #c4c1a0; + padding: 10px; + max-height: 100vh; + border-radius: 4px; + overflow-y: auto; + box-sizing: border-box; +} + +.modal__header { + display: flex; + font-size: 14px; + justify-content: space-between; + align-items: center; + background: #44372C; + color: #fff; + padding: 5px 11px; + border: 1px outset #66594E; + border-radius: 3px; +} + +.modal__title { + margin-top: 0; + margin-bottom: 0; + font-weight: 600; + font-size: 1.25rem; + line-height: 1.25; + color: #fff; + box-sizing: border-box; +} + +.modal__close, .modal__close:active, .modal__close:hover { + background: transparent; + padding: 3px; +} + +.modal__header .modal__close:before { + content: "\2715"; +} + +.modal__content { + margin-top: 10px; + margin-bottom: 10px; + line-height: 1.5; + color: #000; +} + +.modal__footer { + text-align: right; +} + +button { + background: #44372C; + color: #fff; + padding: 2px 8px; + border: 1px outset #66594E; + border-radius: 3px; + font-size: 15px; +} + +button:hover { + background-color: #55473D; + border: 1px outset #66594E; +} + +button:active { + background-color: #22150A; + border: 1px outset #44372C; +} + +button:focus { + outline: none; +} + +#options-modal { + width: 300px; + line-height: 1.75em; +} + +#options-modal h3 { + font-size: 13px; +} + +#options-modal li { + list-style-type: none; +} diff --git a/css/custom-choc/images/ui-anim_basic_16x16.gif b/css/custom-choc/images/ui-anim_basic_16x16.gif deleted file mode 100755 index 085ccae..0000000 Binary files a/css/custom-choc/images/ui-anim_basic_16x16.gif and /dev/null differ diff --git a/css/custom-choc/images/ui-bg_flat_0_aaaaaa_40x100.png b/css/custom-choc/images/ui-bg_flat_0_aaaaaa_40x100.png deleted file mode 100755 index 5b5dab2..0000000 Binary files a/css/custom-choc/images/ui-bg_flat_0_aaaaaa_40x100.png and /dev/null differ diff --git a/css/custom-choc/images/ui-bg_glass_15_5f391b_1x400.png b/css/custom-choc/images/ui-bg_glass_15_5f391b_1x400.png deleted file mode 100755 index 04c0197..0000000 Binary files a/css/custom-choc/images/ui-bg_glass_15_5f391b_1x400.png and /dev/null differ diff --git a/css/custom-choc/images/ui-bg_gloss-wave_20_1c160d_500x100.png b/css/custom-choc/images/ui-bg_gloss-wave_20_1c160d_500x100.png deleted file mode 100755 index 814dca9..0000000 Binary files a/css/custom-choc/images/ui-bg_gloss-wave_20_1c160d_500x100.png and /dev/null differ diff --git a/css/custom-choc/images/ui-bg_gloss-wave_25_453326_500x100.png b/css/custom-choc/images/ui-bg_gloss-wave_25_453326_500x100.png deleted file mode 100755 index c790d09..0000000 Binary files a/css/custom-choc/images/ui-bg_gloss-wave_25_453326_500x100.png and /dev/null differ diff --git a/css/custom-choc/images/ui-bg_gloss-wave_30_44372c_500x100.png b/css/custom-choc/images/ui-bg_gloss-wave_30_44372c_500x100.png deleted file mode 100755 index 8decbc7..0000000 Binary files a/css/custom-choc/images/ui-bg_gloss-wave_30_44372c_500x100.png and /dev/null differ diff --git a/css/custom-choc/images/ui-bg_highlight-soft_20_201913_1x100.png b/css/custom-choc/images/ui-bg_highlight-soft_20_201913_1x100.png deleted file mode 100755 index 63e7609..0000000 Binary files a/css/custom-choc/images/ui-bg_highlight-soft_20_201913_1x100.png and /dev/null differ diff --git a/css/custom-choc/images/ui-bg_highlight-soft_20_9c947c_1x100.png b/css/custom-choc/images/ui-bg_highlight-soft_20_9c947c_1x100.png deleted file mode 100755 index f27c552..0000000 Binary files a/css/custom-choc/images/ui-bg_highlight-soft_20_9c947c_1x100.png and /dev/null differ diff --git a/css/custom-choc/images/ui-bg_inset-soft_10_201913_1x100.png b/css/custom-choc/images/ui-bg_inset-soft_10_201913_1x100.png deleted file mode 100755 index 7003624..0000000 Binary files a/css/custom-choc/images/ui-bg_inset-soft_10_201913_1x100.png and /dev/null differ diff --git a/css/custom-choc/images/ui-icons_222222_256x240.png b/css/custom-choc/images/ui-icons_222222_256x240.png deleted file mode 100755 index b273ff1..0000000 Binary files a/css/custom-choc/images/ui-icons_222222_256x240.png and /dev/null differ diff --git a/css/custom-choc/images/ui-icons_e3ddc9_256x240.png b/css/custom-choc/images/ui-icons_e3ddc9_256x240.png deleted file mode 100755 index 51308e2..0000000 Binary files a/css/custom-choc/images/ui-icons_e3ddc9_256x240.png and /dev/null differ diff --git a/css/custom-choc/images/ui-icons_f1fd86_256x240.png b/css/custom-choc/images/ui-icons_f1fd86_256x240.png deleted file mode 100755 index 06ce08f..0000000 Binary files a/css/custom-choc/images/ui-icons_f1fd86_256x240.png and /dev/null differ diff --git a/css/custom-choc/images/ui-icons_ffffff_256x240.png b/css/custom-choc/images/ui-icons_ffffff_256x240.png deleted file mode 100755 index 42f8f99..0000000 Binary files a/css/custom-choc/images/ui-icons_ffffff_256x240.png and /dev/null differ diff --git a/css/custom-choc/jquery-ui-1.8.all.css b/css/custom-choc/jquery-ui-1.8.all.css deleted file mode 100755 index 592a528..0000000 --- a/css/custom-choc/jquery-ui-1.8.all.css +++ /dev/null @@ -1,489 +0,0 @@ -/* -* jQuery UI CSS Framework -* Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about) -* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses. -*/ - -/* Layout helpers -----------------------------------*/ -.ui-helper-hidden { display: none; } -.ui-helper-hidden-accessible { position: absolute; left: -99999999px; } -.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; } -.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } -.ui-helper-clearfix { display: inline-block; } -/* required comment for clearfix to work in Opera \*/ -* html .ui-helper-clearfix { height:1%; } -.ui-helper-clearfix { display:block; } -/* end clearfix */ -.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); } - - -/* Interaction Cues -----------------------------------*/ -.ui-state-disabled { cursor: default !important; } - - -/* Icons -----------------------------------*/ - -/* states and images */ -.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; } - - -/* Misc visuals -----------------------------------*/ - -/* Overlays */ -.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } - - -/* -* jQuery UI CSS Framework -* Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about) -* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses. -* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Segoe%20UI,%20Helvetica,%20Arial,%20sans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=453326&bgTextureHeader=12_gloss_wave.png&bgImgOpacityHeader=25&borderColorHeader=695649&fcHeader=e3ddc9&iconColorHeader=e3ddc9&bgColorContent=201913&bgTextureContent=05_inset_soft.png&bgImgOpacityContent=10&borderColorContent=9c947c&fcContent=ffffff&iconColorContent=222222&bgColorDefault=1c160d&bgTextureDefault=12_gloss_wave.png&bgImgOpacityDefault=20&borderColorDefault=695444&fcDefault=e3ddc9&iconColorDefault=e3ddc9&bgColorHover=44372c&bgTextureHover=12_gloss_wave.png&bgImgOpacityHover=30&borderColorHover=9c947c&fcHover=ffffff&iconColorHover=ffffff&bgColorActive=201913&bgTextureActive=03_highlight_soft.png&bgImgOpacityActive=20&borderColorActive=9c947c&fcActive=e3ddc9&iconColorActive=e3ddc9&bgColorHighlight=9c947c&bgTextureHighlight=03_highlight_soft.png&bgImgOpacityHighlight=20&borderColorHighlight=d0cdc3&fcHighlight=ffffff&iconColorHighlight=ffffff&bgColorError=5f391b&bgTextureError=02_glass.png&bgImgOpacityError=15&borderColorError=5f391b&fcError=ffffff&iconColorError=f1fd86&bgColorOverlay=aaaaaa&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=01_flat.png&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px -*/ - - -/* Component containers -----------------------------------*/ -.ui-widget { font-family: Segoe UI, Helvetica, Arial, sans-serif; font-size: 1.1em; } -.ui-widget .ui-widget { font-size: 1em; } -.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Segoe UI, Helvetica, Arial, sans-serif; font-size: 1em; } -.ui-widget-content { border: 1px solid #9c947c; background: #201913 url(images/ui-bg_inset-soft_10_201913_1x100.png) 50% bottom repeat-x; color: #ffffff; } -.ui-widget-content a { color: #ffffff; } -.ui-widget-header { border: 1px solid #695649; background: #453326 url(images/ui-bg_gloss-wave_25_453326_500x100.png) 50% 50% repeat-x; color: #e3ddc9; font-weight: bold; } -.ui-widget-header a { color: #e3ddc9; } - -/* Interaction states -----------------------------------*/ -.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #695444; background: #1c160d url(images/ui-bg_gloss-wave_20_1c160d_500x100.png) 50% 50% repeat-x; font-weight: bold; color: #e3ddc9; } -.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #e3ddc9; text-decoration: none; } -.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #9c947c; background: #44372c url(images/ui-bg_gloss-wave_30_44372c_500x100.png) 50% 50% repeat-x; font-weight: bold; color: #ffffff; } -.ui-state-hover a, .ui-state-hover a:hover { color: #ffffff; text-decoration: none; } -.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #9c947c; background: #201913 url(images/ui-bg_highlight-soft_20_201913_1x100.png) 50% 50% repeat-x; font-weight: bold; color: #e3ddc9; } -.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #e3ddc9; text-decoration: none; } -.ui-widget :active { outline: none; } - -/* Interaction Cues -----------------------------------*/ -.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {border: 1px solid #d0cdc3; background: #9c947c url(images/ui-bg_highlight-soft_20_9c947c_1x100.png) 50% top repeat-x; color: #ffffff; } -.ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #ffffff; } -.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #5f391b; background: #5f391b url(images/ui-bg_glass_15_5f391b_1x400.png) 50% 50% repeat-x; color: #ffffff; } -.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #ffffff; } -.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #ffffff; } -.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; } -.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; } -.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; } - -/* Icons -----------------------------------*/ - -/* states and images */ -.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png); } -.ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); } -.ui-widget-header .ui-icon {background-image: url(images/ui-icons_e3ddc9_256x240.png); } -.ui-state-default .ui-icon { background-image: url(images/ui-icons_e3ddc9_256x240.png); } -.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_ffffff_256x240.png); } -.ui-state-active .ui-icon {background-image: url(images/ui-icons_e3ddc9_256x240.png); } -.ui-state-highlight .ui-icon {background-image: url(images/ui-icons_ffffff_256x240.png); } -.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_f1fd86_256x240.png); } - -/* positioning */ -.ui-icon-carat-1-n { background-position: 0 0; } -.ui-icon-carat-1-ne { background-position: -16px 0; } -.ui-icon-carat-1-e { background-position: -32px 0; } -.ui-icon-carat-1-se { background-position: -48px 0; } -.ui-icon-carat-1-s { background-position: -64px 0; } -.ui-icon-carat-1-sw { background-position: -80px 0; } -.ui-icon-carat-1-w { background-position: -96px 0; } -.ui-icon-carat-1-nw { background-position: -112px 0; } -.ui-icon-carat-2-n-s { background-position: -128px 0; } -.ui-icon-carat-2-e-w { background-position: -144px 0; } -.ui-icon-triangle-1-n { background-position: 0 -16px; } -.ui-icon-triangle-1-ne { background-position: -16px -16px; } -.ui-icon-triangle-1-e { background-position: -32px -16px; } -.ui-icon-triangle-1-se { background-position: -48px -16px; } -.ui-icon-triangle-1-s { background-position: -64px -16px; } -.ui-icon-triangle-1-sw { background-position: -80px -16px; } -.ui-icon-triangle-1-w { background-position: -96px -16px; } -.ui-icon-triangle-1-nw { background-position: -112px -16px; } -.ui-icon-triangle-2-n-s { background-position: -128px -16px; } -.ui-icon-triangle-2-e-w { background-position: -144px -16px; } -.ui-icon-arrow-1-n { background-position: 0 -32px; } -.ui-icon-arrow-1-ne { background-position: -16px -32px; } -.ui-icon-arrow-1-e { background-position: -32px -32px; } -.ui-icon-arrow-1-se { background-position: -48px -32px; } -.ui-icon-arrow-1-s { background-position: -64px -32px; } -.ui-icon-arrow-1-sw { background-position: -80px -32px; } -.ui-icon-arrow-1-w { background-position: -96px -32px; } -.ui-icon-arrow-1-nw { background-position: -112px -32px; } -.ui-icon-arrow-2-n-s { background-position: -128px -32px; } -.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; } -.ui-icon-arrow-2-e-w { background-position: -160px -32px; } -.ui-icon-arrow-2-se-nw { background-position: -176px -32px; } -.ui-icon-arrowstop-1-n { background-position: -192px -32px; } -.ui-icon-arrowstop-1-e { background-position: -208px -32px; } -.ui-icon-arrowstop-1-s { background-position: -224px -32px; } -.ui-icon-arrowstop-1-w { background-position: -240px -32px; } -.ui-icon-arrowthick-1-n { background-position: 0 -48px; } -.ui-icon-arrowthick-1-ne { background-position: -16px -48px; } -.ui-icon-arrowthick-1-e { background-position: -32px -48px; } -.ui-icon-arrowthick-1-se { background-position: -48px -48px; } -.ui-icon-arrowthick-1-s { background-position: -64px -48px; } -.ui-icon-arrowthick-1-sw { background-position: -80px -48px; } -.ui-icon-arrowthick-1-w { background-position: -96px -48px; } -.ui-icon-arrowthick-1-nw { background-position: -112px -48px; } -.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; } -.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; } -.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; } -.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; } -.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; } -.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; } -.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; } -.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; } -.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; } -.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; } -.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; } -.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; } -.ui-icon-arrowreturn-1-w { background-position: -64px -64px; } -.ui-icon-arrowreturn-1-n { background-position: -80px -64px; } -.ui-icon-arrowreturn-1-e { background-position: -96px -64px; } -.ui-icon-arrowreturn-1-s { background-position: -112px -64px; } -.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; } -.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; } -.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; } -.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; } -.ui-icon-arrow-4 { background-position: 0 -80px; } -.ui-icon-arrow-4-diag { background-position: -16px -80px; } -.ui-icon-extlink { background-position: -32px -80px; } -.ui-icon-newwin { background-position: -48px -80px; } -.ui-icon-refresh { background-position: -64px -80px; } -.ui-icon-shuffle { background-position: -80px -80px; } -.ui-icon-transfer-e-w { background-position: -96px -80px; } -.ui-icon-transferthick-e-w { background-position: -112px -80px; } -.ui-icon-folder-collapsed { background-position: 0 -96px; } -.ui-icon-folder-open { background-position: -16px -96px; } -.ui-icon-document { background-position: -32px -96px; } -.ui-icon-document-b { background-position: -48px -96px; } -.ui-icon-note { background-position: -64px -96px; } -.ui-icon-mail-closed { background-position: -80px -96px; } -.ui-icon-mail-open { background-position: -96px -96px; } -.ui-icon-suitcase { background-position: -112px -96px; } -.ui-icon-comment { background-position: -128px -96px; } -.ui-icon-person { background-position: -144px -96px; } -.ui-icon-print { background-position: -160px -96px; } -.ui-icon-trash { background-position: -176px -96px; } -.ui-icon-locked { background-position: -192px -96px; } -.ui-icon-unlocked { background-position: -208px -96px; } -.ui-icon-bookmark { background-position: -224px -96px; } -.ui-icon-tag { background-position: -240px -96px; } -.ui-icon-home { background-position: 0 -112px; } -.ui-icon-flag { background-position: -16px -112px; } -.ui-icon-calendar { background-position: -32px -112px; } -.ui-icon-cart { background-position: -48px -112px; } -.ui-icon-pencil { background-position: -64px -112px; } -.ui-icon-clock { background-position: -80px -112px; } -.ui-icon-disk { background-position: -96px -112px; } -.ui-icon-calculator { background-position: -112px -112px; } -.ui-icon-zoomin { background-position: -128px -112px; } -.ui-icon-zoomout { background-position: -144px -112px; } -.ui-icon-search { background-position: -160px -112px; } -.ui-icon-wrench { background-position: -176px -112px; } -.ui-icon-gear { background-position: -192px -112px; } -.ui-icon-heart { background-position: -208px -112px; } -.ui-icon-star { background-position: -224px -112px; } -.ui-icon-link { background-position: -240px -112px; } -.ui-icon-cancel { background-position: 0 -128px; } -.ui-icon-plus { background-position: -16px -128px; } -.ui-icon-plusthick { background-position: -32px -128px; } -.ui-icon-minus { background-position: -48px -128px; } -.ui-icon-minusthick { background-position: -64px -128px; } -.ui-icon-close { background-position: -80px -128px; } -.ui-icon-closethick { background-position: -96px -128px; } -.ui-icon-key { background-position: -112px -128px; } -.ui-icon-lightbulb { background-position: -128px -128px; } -.ui-icon-scissors { background-position: -144px -128px; } -.ui-icon-clipboard { background-position: -160px -128px; } -.ui-icon-copy { background-position: -176px -128px; } -.ui-icon-contact { background-position: -192px -128px; } -.ui-icon-image { background-position: -208px -128px; } -.ui-icon-video { background-position: -224px -128px; } -.ui-icon-script { background-position: -240px -128px; } -.ui-icon-alert { background-position: 0 -144px; } -.ui-icon-info { background-position: -16px -144px; } -.ui-icon-notice { background-position: -32px -144px; } -.ui-icon-help { background-position: -48px -144px; } -.ui-icon-check { background-position: -64px -144px; } -.ui-icon-bullet { background-position: -80px -144px; } -.ui-icon-radio-off { background-position: -96px -144px; } -.ui-icon-radio-on { background-position: -112px -144px; } -.ui-icon-pin-w { background-position: -128px -144px; } -.ui-icon-pin-s { background-position: -144px -144px; } -.ui-icon-play { background-position: 0 -160px; } -.ui-icon-pause { background-position: -16px -160px; } -.ui-icon-seek-next { background-position: -32px -160px; } -.ui-icon-seek-prev { background-position: -48px -160px; } -.ui-icon-seek-end { background-position: -64px -160px; } -.ui-icon-seek-start { background-position: -80px -160px; } -/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */ -.ui-icon-seek-first { background-position: -80px -160px; } -.ui-icon-stop { background-position: -96px -160px; } -.ui-icon-eject { background-position: -112px -160px; } -.ui-icon-volume-off { background-position: -128px -160px; } -.ui-icon-volume-on { background-position: -144px -160px; } -.ui-icon-power { background-position: 0 -176px; } -.ui-icon-signal-diag { background-position: -16px -176px; } -.ui-icon-signal { background-position: -32px -176px; } -.ui-icon-battery-0 { background-position: -48px -176px; } -.ui-icon-battery-1 { background-position: -64px -176px; } -.ui-icon-battery-2 { background-position: -80px -176px; } -.ui-icon-battery-3 { background-position: -96px -176px; } -.ui-icon-circle-plus { background-position: 0 -192px; } -.ui-icon-circle-minus { background-position: -16px -192px; } -.ui-icon-circle-close { background-position: -32px -192px; } -.ui-icon-circle-triangle-e { background-position: -48px -192px; } -.ui-icon-circle-triangle-s { background-position: -64px -192px; } -.ui-icon-circle-triangle-w { background-position: -80px -192px; } -.ui-icon-circle-triangle-n { background-position: -96px -192px; } -.ui-icon-circle-arrow-e { background-position: -112px -192px; } -.ui-icon-circle-arrow-s { background-position: -128px -192px; } -.ui-icon-circle-arrow-w { background-position: -144px -192px; } -.ui-icon-circle-arrow-n { background-position: -160px -192px; } -.ui-icon-circle-zoomin { background-position: -176px -192px; } -.ui-icon-circle-zoomout { background-position: -192px -192px; } -.ui-icon-circle-check { background-position: -208px -192px; } -.ui-icon-circlesmall-plus { background-position: 0 -208px; } -.ui-icon-circlesmall-minus { background-position: -16px -208px; } -.ui-icon-circlesmall-close { background-position: -32px -208px; } -.ui-icon-squaresmall-plus { background-position: -48px -208px; } -.ui-icon-squaresmall-minus { background-position: -64px -208px; } -.ui-icon-squaresmall-close { background-position: -80px -208px; } -.ui-icon-grip-dotted-vertical { background-position: 0 -224px; } -.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; } -.ui-icon-grip-solid-vertical { background-position: -32px -224px; } -.ui-icon-grip-solid-horizontal { background-position: -48px -224px; } -.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; } -.ui-icon-grip-diagonal-se { background-position: -80px -224px; } - - -/* Misc visuals -----------------------------------*/ - -/* Corner radius */ -.ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; } -.ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; } -.ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; } -.ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } -.ui-corner-top { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; } -.ui-corner-bottom { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } -.ui-corner-right { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } -.ui-corner-left { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; } -.ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } - -/* Overlays */ -.ui-widget-overlay { background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); } -.ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }/* Resizable -----------------------------------*/ -.ui-resizable { position: relative;} -.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;} -.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; } -.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; } -.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; } -.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; } -.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; } -.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; } -.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; } -.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; } -.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}/* Selectable -----------------------------------*/ -.ui-selectable-helper { border:1px dotted black } -/* Accordion -----------------------------------*/ -.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; } -.ui-accordion .ui-accordion-li-fix { display: inline; } -.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; } -.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; } -/* IE7-/Win - Fix extra vertical space in lists */ -.ui-accordion a { zoom: 1; } -.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; } -.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; } -.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; } -.ui-accordion .ui-accordion-content-active { display: block; }/* Autocomplete -----------------------------------*/ -.ui-autocomplete { position: absolute; cursor: default; } -.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } - -/* workarounds */ -* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */ - -/* Menu -----------------------------------*/ -.ui-menu { - list-style:none; - padding: 2px; - margin: 0; - display:block; -} -.ui-menu .ui-menu { - margin-top: -3px; -} -.ui-menu .ui-menu-item { - margin:0; - padding: 0; - zoom: 1; - float: left; - clear: left; - width: 100%; -} -.ui-menu .ui-menu-item a { - text-decoration:none; - display:block; - padding:.2em .4em; - line-height:1.5; - zoom:1; -} -.ui-menu .ui-menu-item a.ui-state-hover, -.ui-menu .ui-menu-item a.ui-state-active { - font-weight: normal; - margin: -1px; -} -/* Button -----------------------------------*/ - -.ui-button { display: inline-block; position: relative; padding: 0; margin-right: .1em; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */ -.ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */ -button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */ -.ui-button-icons-only { width: 3.4em; } -button.ui-button-icons-only { width: 3.7em; } - -/*button text element */ -.ui-button .ui-button-text { display: block; line-height: 1.4; } -.ui-button-text-only .ui-button-text { padding: .4em 1em; } -.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; } -.ui-button-text-icon .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; } -.ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; } -/* no icon support for input elements, provide padding by default */ -input.ui-button { padding: .4em 1em; } - -/*button icon element(s) */ -.ui-button-icon-only .ui-icon, .ui-button-text-icon .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; } -.ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; } -.ui-button-text-icon .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; } -.ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; } - -/*button sets*/ -.ui-buttonset { margin-right: 7px; } -.ui-buttonset .ui-button { margin-left: 0; margin-right: -.3em; } - -/* workarounds */ -button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra padding in Firefox */ - - - - - -/* Dialog -----------------------------------*/ -.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; } -.ui-dialog .ui-dialog-titlebar { padding: .5em 1em .3em; position: relative; } -.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .2em 0; } -.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; } -.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; } -.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; } -.ui-dialog .ui-dialog-content { border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; } -.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; } -.ui-dialog .ui-dialog-buttonpane button { float: right; margin: .5em .4em .5em 0; cursor: pointer; padding: .2em .6em .3em .6em; line-height: 1.4em; width:auto; overflow:visible; } -.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; } -.ui-draggable .ui-dialog-titlebar { cursor: move; } -/* Slider -----------------------------------*/ -.ui-slider { position: relative; text-align: left; } -.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; } -.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; } - -.ui-slider-horizontal { height: .8em; } -.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; } -.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } -.ui-slider-horizontal .ui-slider-range-min { left: 0; } -.ui-slider-horizontal .ui-slider-range-max { right: 0; } - -.ui-slider-vertical { width: .8em; height: 100px; } -.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; } -.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; } -.ui-slider-vertical .ui-slider-range-min { bottom: 0; } -.ui-slider-vertical .ui-slider-range-max { top: 0; }/* Tabs -----------------------------------*/ -.ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */ -.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; } -.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; } -.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; } -.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; } -.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; } -.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */ -.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; } -.ui-tabs .ui-tabs-hide { display: none !important; } -/* Datepicker -----------------------------------*/ -.ui-datepicker { width: 17em; padding: .2em .2em 0; } -.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; } -.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; } -.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; } -.ui-datepicker .ui-datepicker-prev { left:2px; } -.ui-datepicker .ui-datepicker-next { right:2px; } -.ui-datepicker .ui-datepicker-prev-hover { left:1px; } -.ui-datepicker .ui-datepicker-next-hover { right:1px; } -.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; } -.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; } -.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; } -.ui-datepicker select.ui-datepicker-month-year {width: 100%;} -.ui-datepicker select.ui-datepicker-month, -.ui-datepicker select.ui-datepicker-year { width: 49%;} -.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; } -.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; } -.ui-datepicker td { border: 0; padding: 1px; } -.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; } -.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; } -.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; } -.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; } - -/* with multiple calendars */ -.ui-datepicker.ui-datepicker-multi { width:auto; } -.ui-datepicker-multi .ui-datepicker-group { float:left; } -.ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; } -.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; } -.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; } -.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; } -.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; } -.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; } -.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; } -.ui-datepicker-row-break { clear:both; width:100%; } - -/* RTL support */ -.ui-datepicker-rtl { direction: rtl; } -.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; } -.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; } -.ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; } -.ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; } -.ui-datepicker-rtl .ui-datepicker-buttonpane { clear:right; } -.ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; } -.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float:right; } -.ui-datepicker-rtl .ui-datepicker-group { float:right; } -.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width:0; border-left-width:1px; } -.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width:0; border-left-width:1px; } - -/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */ -.ui-datepicker-cover { - display: none; /*sorry for IE5*/ - display/**/: block; /*sorry for IE5*/ - position: absolute; /*must have*/ - z-index: -1; /*must have*/ - filter: mask(); /*must have*/ - top: -4px; /*must have*/ - left: -4px; /*must have*/ - width: 200px; /*must have*/ - height: 200px; /*must have*/ -}/* Progressbar -----------------------------------*/ -.ui-progressbar { height:2em; text-align: left; } -.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; } \ No newline at end of file diff --git a/js/apple1.js b/js/apple1.js index de1ee67..fc17635 100644 --- a/js/apple1.js +++ b/js/apple1.js @@ -1,3 +1,5 @@ +import MicroModal from 'micromodal'; + import Apple1IO from './apple1io'; import CPU6502 from './cpu6502'; import Prefs from './prefs'; @@ -38,9 +40,7 @@ text = new TextPage(); text.init(); aci = new ACI(cpu, { progress: function(val) { - //$("#takeup").css("width", val * 75); - //$("#supply").css("width", 75 - val * 75); - $('#tape').css('width', val * 100); + document.querySelector('#tape').style.width = val * 100 + 'px'; }}); io = new Apple1IO(text); @@ -52,7 +52,7 @@ if (krusader) { ramh = new Basic(); rom = new Bios(); } -keyboard = new KeyBoard(cpu, io, text); +keyboard = new KeyBoard('#keyboard', cpu, io, text); cpu.addPageHandler(raml); if (ramh) { @@ -74,42 +74,47 @@ aci.setData(window.tapes['Microchess'].tracks); // Audio Buffer Source var context; -if (typeof window.webkitAudioContext != 'undefined') { - context = new window.webkitAudioContext(); +if (typeof window.webkitAudioContext !== 'undefined') { + context = window.webkitAudioContext; +} else if (typeof window.AudioContext !== 'undefined') { + context = new window.AudioContext(); } -function doLoadLocal() { - var files = $('#local_file').prop('files'); +export function doLoadLocal() { + context.resume(); + var files = document.querySelector('#local_file').files; if (files.length == 1) { var file = files[0]; var fileReader = new FileReader(); fileReader.onload = function(ev) { - context.decodeAudioData(ev.target.result, function(buffer) { - var buf = []; - var data = buffer.getChannelData(0); - var old = (data[0] > 0.25); - var last = 0; - for (var idx = 1; idx < data.length; idx++) { - var current = (data[idx] > 0.25); - if (current != old) { - var delta = idx - last; - buf.push(parseInt(delta / buffer.sampleRate * 1023000)); - old = current; - last = idx; + context.decodeAudioData( + ev.target.result, + function(buffer) { + var buf = []; + var data = buffer.getChannelData(0); + var old = (data[0] > 0.25); + var last = 0; + for (var idx = 1; idx < data.length; idx++) { + var current = (data[idx] > 0.25); + if (current != old) { + var delta = idx - last; + buf.push(parseInt(delta / buffer.sampleRate * 1023000)); + old = current; + last = idx; + } } + aci.buffer = buf; + MicroModal.close('local-modal'); + }, + function(error) { + window.alert(error.message); } - aci.buffer = buf; - $('#local').dialog('close'); - }); + ); }; fileReader.readAsArrayBuffer(file); } } -export function openLoadLocal() { - $('#local').dialog('open'); -} - function updateKHz() { var now = Date.now(); var ms = now - startTime; @@ -119,11 +124,11 @@ function updateKHz() { if (showFPS) { delta = renderedFrames - lastFrames; var fps = parseInt(delta/(ms/1000)); - $('#khz').text( fps + 'fps'); + document.querySelector('#khz').innerHTML = fps + 'fps'; } else { delta = cycles - lastCycles; var khz = parseInt(delta/ms); - $('#khz').text( khz + 'KHz'); + document.querySelector('#khz').innerHTML = khz + 'KHz'; } startTime = now; @@ -141,12 +146,16 @@ export function toggleFPS() { export function toggleSpeed() { - throttling = $('#speed_toggle').prop('checked'); + throttling = document.querySelector('#speed_toggle').checked; if (runTimer) { run(); } } +export function setKeyBuffer(text) { + io.setKeyBuffer(text); +} + export function setTurboTape(val) { turbotape = val; } @@ -247,9 +256,9 @@ function _keydown(evt) { var elem = document.getElementById('display'); elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); } - } else if (evt.keyCode == $.ui.keyCode.SHIFT) { + } else if (evt.key === 'Shift') { keyboard.shiftKey(true); - } else if (evt.keyCode == $.ui.keyCode.CONTROL) { + } else if (evt.key == 'Control') { keyboard.controlKey(true); } else if (!focused && (!evt.metaKey || evt.ctrlKey)) { evt.preventDefault(); @@ -266,9 +275,9 @@ function _keydown(evt) { function _keyup(evt) { _key = 0xff; - if (evt.keyCode == $.ui.keyCode.SHIFT) { + if (evt.key === 'Shift') { keyboard.shiftKey(false); - } else if (evt.keyCode == $.ui.keyCode.CONTROL) { + } else if (evt.key === 'Control') { keyboard.controlKey(false); } else { if (!focused) { @@ -280,8 +289,8 @@ function _keyup(evt) { var _updateScreenTimer = null; export function updateScreen() { - var green = $('#green_screen').prop('checked'); - var scanlines = $('#show_scanlines').prop('checked'); + var green = document.querySelector('#green_screen').checked; + var scanlines = document.querySelector('#show_scanlines').checked; text.green(green); text.scanlines(scanlines); @@ -307,20 +316,23 @@ export function pauseRun(b) { paused = !paused; } +export function openOptions() { + MicroModal.show('options-modal'); +} + export function openLoadText(event) { - if (event.altKey) { - $('#local').dialog('open'); + if (event && event.altKey) { + MicroModal.show('local-modal'); } else { - $('#input_text').dialog('open'); - $('#text_input').focus(); + MicroModal.show('input-modal'); } } -function doLoadText() { - var text = $('#text_input').val(); +export function doLoadText() { + var text = document.querySelector('#text_input').value; if (!text.indexOf('//Binary')) { var lines = text.split('\n'); - $.each(lines, function(_, line) { + lines.forEach(function(line) { var parts = line.split(': '); if (parts.length == 2) { var addr; @@ -337,13 +349,13 @@ function doLoadText() { } else { io.paste(text); } - $('#input_text').dialog('close'); + MicroModal.close('input-modal'); } -$(function() { - hashtag = document.location.hash; +MicroModal.init(); - $('button,input[type=button],a.button').button(); +document.addEventListener('DOMContentLoaded', function() { + hashtag = document.location.hash; /* * Input Handling @@ -354,45 +366,52 @@ $(function() { text.setContext(context); - $(window).keydown(_keydown); - $(window).keyup(_keyup); + window.addEventListener('keydown', _keydown); + window.addEventListener('keyup', _keyup); - $('.overscan').bind('paste', function(event) { + document.querySelector('.overscan').addEventListener('paste', function(event) { io.paste(event.originalEvent.clipboardData().getData('text/plain')); event.preventDefault(); }); - $('input,textarea').focus(function() { focused = true; }); - $('input,textarea').blur(function() { focused = false; }); - - keyboard.create($('#keyboard')); + document.querySelectorAll('input,textarea').forEach(function(el) { + el.addEventListener('focus', function() { focused = true; }); + }); + document.querySelectorAll('input,textarea').forEach(function(el) { + el.addEventListener('blur', function() { focused = false; }); + }); + keyboard.create(); if (prefs.havePrefs()) { - $('input[type=checkbox]').each(function() { - var val = prefs.readPref(this.id); + document.querySelectorAll('input[type=checkbox]').forEach(function(el) { + var val = prefs.readPref(el.id); if (val != null) - this.checked = JSON.parse(val); + el.checked = JSON.parse(val); }); - $('input[type=checkbox]').change(function() { - prefs.writePref(this.id, JSON.stringify(this.checked)); + document.querySelectorAll('input[type=checkbox]').forEach(function(el) { + prefs.writePref(el.id, JSON.stringify(el.checked)); }); } - turbotape = $('#turbo_tape').prop('checked'); + turbotape = document.querySelector('#turbo_tape').checked; - $.each(window.tapes, function(key) { - $('#tape_select').append( - '');}); + Object.keys(window.tapes).sort().forEach(function(key) { + var option = document.createElement('option'); + option.value = key; + option.text = key; + document.querySelector('#tape_select').append(option); + }); - $('#tape_select').change(function(event) { - var tape = window.tapes[event.target.value]; + function doTapeSelect() { + var tapeId = document.querySelector('#tape_select').value; + var tape = window.tapes[tapeId]; if (!tape) { - $('#text_input').val(''); + document.querySelector('#text_input').value = ''; return; } - window.location.hash = event.target.value; + debug('Loading', tapeId); + + window.location.hash = tapeId; reset(); if (turbotape) { var trackIdx = 0, script = ''; @@ -418,45 +437,24 @@ $(function() { script += parts[idx] + '\n'; } } - $('#text_input').val(script); - $('#tape').css('width', 100); + document.querySelector('#text_input').value = script; + document.querySelector('#tape').css('width', 100); } else { aci.setData(tape.tracks); - $('#text_input').val(tape.script); + document.querySelector('#text_input').value = tape.script; + doLoadText(); } - }); + } + document.querySelector('#tape_select').addEventListener('change', doTapeSelect); - // reset(); run(); setInterval(updateKHz, 1000); updateScreen(); - var cancel = function() { $(this).dialog('close'); }; - $('#options').dialog({ autoOpen: false, - modal: true, - width: 320, - height: 400, - buttons: {'Close': cancel }}); - $('#input_text').dialog({ autoOpen: false, - modal: true, - width: 530, - buttons: [ - { - text: 'Cancel', - click: cancel - }, - { - text: 'OK', - click: doLoadText - }]}); - $('#local').dialog({ autoOpen: false, - modal: true, - width: 530, - buttons: {'Cancel': cancel, 'OK': doLoadLocal }}); - var tape = hup(); if (tape) { - $('#tape_select').val(tape).change(); - doLoadText(); + openLoadText(); + document.querySelector('#tape_select').value = tape; + doTapeSelect(); } }); diff --git a/js/ui/keyboard.js b/js/ui/keyboard.js index 5e19cbc..62403d2 100644 --- a/js/ui/keyboard.js +++ b/js/ui/keyboard.js @@ -1,4 +1,4 @@ -/* Copyright 2010-2019 Will Scullin +/* Copyright 2010-2019 Will Scullin * * Permission to use, copy, modify, distribute, and sell this software and its * documentation for any purpose is hereby granted without fee, provided that @@ -145,7 +145,7 @@ export function mapKeyEvent(evt) { return 0xFF; } -export function KeyBoard(cpu, io, text) { +export function KeyBoard(id, cpu, io, text) { var keys = [[['1','2','3','4','5','6','7','8','9','0',':','-','RESET'], ['ESC','Q','W','E','R','T','Y','U','I','O','P','FEED','RETURN'], @@ -160,45 +160,50 @@ export function KeyBoard(cpu, io, text) { var shifted = false; var controlled = false; + var kb = document.querySelector(id); return { shiftKey: function keyboard_shiftKey(down) { shifted = down; - if (down) { - $('#keyboard .key-SHIFT').addClass('active'); - } else { - $('#keyboard .key-SHIFT').removeClass('active'); - } + kb.querySelectorAll('.key-SHIFT').forEach(function(el) { + if (down) { + el.classList.add('active'); + } else { + el.classList.remove('active'); + } + }); }, controlKey: function keyboard_controlKey(down) { controlled = down; - if (down) { - $('#keyboard .key-CTRL').addClass('active'); - } else { - $('#keyboard .key-CTRL').removeClass('active'); - } + kb.querySelectorAll('.key-CTRL').forEach(function(el) { + if (down) { + el.classList.add('active'); + } else { + el.classList.remove('active'); + } + }); }, - create: function keyboard_create(kb) { + create: function keyboard_create() { var x, y, row, key, key1, key2, label, label1, label2; - kb.disableSelection(); - function buildLabel(k) { - var span = $('' + k + ''); - if (k.length > 1 && k.substr(0,1) != '&') - span.addClass('small'); + var span = document.createElement('span'); + span.innerHTML = k; + if (k.length > 1 && k.substr(0,1) != '&') { + span.classList.add('small'); + } return span; } - function _mouseup() { - $(this).removeClass('pressed'); + function _mouseup(event) { + event.currentTarget.classList.remove('pressed'); } - function _mousedown(ev) { - $(this).addClass('pressed'); - var key = $(ev.currentTarget).data(shifted ? 'key2' : 'key1'); + function _mousedown(event) { + event.currentTarget.classList.add('pressed'); + var key = event.currentTarget.dataSet[shifted ? 'key2' : 'key1']; switch (key) { case 'BELL': key = 'G'; @@ -228,11 +233,15 @@ export function KeyBoard(cpu, io, text) { switch (key) { case 'SHIFT': shifted = !shifted; - $('#keyboard .key-SHIFT').toggleClass('active'); + kb.querySelectorAll('.key-SHIFT').forEach(function(el) { + el.classList.toggle('active'); + }); break; case 'CTRL': controlled = !controlled; - $('#keyboard .key-CTRL').toggleClass('active'); + kb.querySelectorAll('.key-CTRL').forEach(function(el) { + el.classList.toggle('active'); + }); break; case 'RESET': cpu.reset(); @@ -253,42 +262,45 @@ export function KeyBoard(cpu, io, text) { } for (y = 0; y < 5; y++) { - row = $('
'); + row = document.createElement('div'); + row.classList.add('row', 'row' + y); kb.append(row); for (x = 0; x < keys[0][y].length; x++) { key1 = keys[0][y][x]; key2 = keys[1][y][x]; - label = $('
'); + label = document.createElement('div'); label1 = buildLabel(key1); label2 = buildLabel(key2); - key = $('
'); - key.addClass('key-' + key1.replace(/[&;]/g,'')); + key = document.createElement('div'); + key.classList.add('key', 'key-' + key1.replace(/[&;]/g,'')); if (key1.length > 1) { if (key1 != key2) { - key.addClass('vcenter2'); + key.classList.add('vcenter2'); } else { - key.addClass('vcenter'); + key.classList.add('vcenter'); } } if (key1 != key2) { - key.addClass('key-' + key2.replace(/[&;]/g,'')); + key.classList.add('key-' + key2.replace(/[&;]/g,'')); label.append(label2); - label.append('
'); + label.append(document.createElement('br')); } label.append(label1); key.append(label); - key.data({'key1': key1, 'key2': key2}); + key.dataSet = {'key1': key1, 'key2': key2}; if (window.ontouchstart === undefined) { - key.bind('mousedown', _mousedown); - key.bind('mouseup mouseout', _mouseup); + key.addEventListener('mousedown', _mousedown); + key.addEventListener('mouseup', _mouseup); + key.addEventListener('mouseout', _mouseup); } else { - key.bind('touchstart', _mousedown); - key.bind('touchend touchleave', _mouseup); + key.addEventListener('touchstart', _mousedown); + key.addEventListener('touchend', _mouseup); + key.addEventListener('touchleave', _mouseup); } row.append(key); diff --git a/js/util.js b/js/util.js index 5193741..99fa91a 100644 --- a/js/util.js +++ b/js/util.js @@ -75,5 +75,5 @@ export function hup() { if ( !results ) return ''; else - return results[1]; + return decodeURIComponent(results[1]); }