devbuild/index.html at master · vc64web/devbuild · GitHub

1
<!doctypehtml><html lang=en-us><head><meta charset=utf-8><meta content="text/html; charset=utf-8"http-equiv=Content-Type><meta content="cycle exact c64 emulator in html5 / javascript with scene-browser csdb interface. This c64 emulator is compatible to the progressive-web-app (PWA) standard."name=description><title>vc64web</title><link href=img/favicon.ico rel=icon><meta content="width=device-width,initial-scale=1,user-scalable=no"name=viewport><link href=manifest.json rel=manifest><link href=img/icon-96x96.png rel=apple-touch-icon><meta content=#FFE1C4 name=apple-mobile-web-app-status-bar><meta content=#BBBBBB name=theme-color><link href=css/bootstrap.min.css rel=stylesheet><link href=css/vc64.css rel=stylesheet><script src=js/jquery-3.5.0.min.js></script><script src=js/bootstrap.bundle.min.js></script><script src=js/vc64_browser.js></script><script src=js/vc64_ui.js></script><script src=js/vc64_storage.js></script><script src=js/vc64_keyboard.js></script><script src=js/vc64_action_script.js></script><script src=js/virtualjoystick.js></script><script src=js/jszip.min.js></script><style>.emscripten{padding-right:0;margin-left:auto;margin-right:auto;display:block}textarea.emscripten{font-family:monospace;width:80%}div.emscripten{text-align:center}div.emscripten_border{border:0 solid #000}canvas.emscripten{border:0 none}.spinner{height:50px;width:50px;margin:0 auto;-webkit-animation:rotation .8s linear infinite;-moz-animation:rotation .8s linear infinite;-o-animation:rotation .8s linear infinite;animation:rotation .8s linear infinite;border-left:10px solid #0096f0;border-right:10px solid #0096f0;border-bottom:10px solid #0096f0;border-top:10px solid #6400c8;border-radius:100%;background-color:#c864fa}@-webkit-keyframes rotation{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(360deg)}}@-moz-keyframes rotation{from{-moz-transform:rotate(0)}to{-moz-transform:rotate(360deg)}}@-o-keyframes rotation{from{-o-transform:rotate(0)}to{-o-transform:rotate(360deg)}}@keyframes rotation{from{transform:rotate(0)}to{transform:rotate(360deg)}}</style></head><body data-theme=dark><figure id=spinner style=overflow:visible><div class=spinner></div><center style=margin-top:.5em><strong>booting into Virtual C64 WebEdition...</strong></center></figure><div class=emscripten id=status>Downloading...</div><div class=emscripten><progress hidden id=progress max=100 value=0></progress></div><div class=emscripten_border id=div_canvas><canvas class=emscripten height=205 id=canvas oncontextmenu=event.preventDefault() tabindex=-1 width=326></canvas></div><div class=collapse id=virtual_keyboard><div class=justify-content-center style=display:flex;flex-wrap:nowrap;overflow-x:auto><div style="flex:0 0 auto;padding-right:15px;padding-left:15px;position:relative;min-width:0;max-width:100%"><div id=divKeyboardRows style=width:750px></div></div></div></div><button type=button class="btn btn-sm icon mt-2"id=button_show_menu data-toggle=collapse aria-expanded=false aria-controls=navbar data-target=#navbar style=position:fixed;top:0;left:0;z-index:200><svg class="bi bi-list"fill=currentColor height=auto viewBox="0 -1 16 17"width=1.6em xmlns=http://www.w3.org/2000/svg><path d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"fill-rule=evenodd /></svg></button><div class="collapse container-fluid"id=navbar><div class="row mt-2 mb-1"><div class=col-8 style=padding-left:0><span style=width:40px;display:inline-block></span><button type=button class="btn btn-sm icon"id=button_reset data-toggle=tooltip data-placement=top title=reset><svg class="bi bi-skip-start-fill"fill=currentColor height=auto viewBox="0 0 16 16"width=1.6em xmlns=http://www.w3.org/2000/svg><path d="M4.5 3.5A.5.5 0 0 0 4 4v8a.5.5 0 0 0 1 0V4a.5.5 0 0 0-.5-.5z"fill-rule=evenodd /><path d="M4.903 8.697l6.364 3.692c.54.313 1.232-.066 1.232-.697V4.308c0-.63-.692-1.01-1.232-.696L4.903 7.304a.802.802 0 0 0 0 1.393z"/></svg></button><span class=d-inline-block data-placement=top data-toggle=tooltip title=pause><button type=button class="btn btn-sm icon"id=button_run><svg class="bi bi-pause-fill"fill=currentColor height=auto viewBox="0 0 16 16"width=1.6em xmlns=http://www.w3.org/2000/svg><path d="M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5zm5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5z"/></svg></button></span><button type=button class="btn btn-sm icon"id=button_take_snapshot data-toggle=tooltip data-placement=top title="take snapshot"><svg class="bi bi-box-arrow-in-down"fill=currentColor height=auto viewBox="0 0 16 16"width=1.6em xmlns=http://www.w3.org/2000/svg><path d="M4.646 8.146a.5.5 0 0 1 .708 0L8 10.793l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z"fill-rule=evenodd /><path d="M8 1a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-1 0v-9A.5.5 0 0 1 8 1z"fill-rule=evenodd /><path d="M1.5 13.5A1.5 1.5 0 0 0 3 15h10a1.5 1.5 0 0 0 1.5-1.5v-8A1.5 1.5 0 0 0 13 4h-1.5a.5.5 0 0 0 0 1H13a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5v-8A.5.5 0 0 1 3 5h1.5a.5.5 0 0 0 0-1H3a1.5 1.5 0 0 0-1.5 1.5v8z"fill-rule=evenodd /></svg></button><span data-toggle=modal data-target=#snapshotModal><button type=button class="btn btn-sm icon"id=button_snapshots data-toggle=tooltip data-placement=top title="snapshot / scene browser"><svg class="bi bi-collection-fill"fill=currentColor height=auto viewBox="0 0 16 16"width=1.6em xmlns=http://www.w3.org/2000/svg><rect height=10 rx=1.5 transform="matrix(1 0 0 -1 0 14.5)"width=16 /><path d="M2 3a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 0-1h-11A.5.5 0 0 0 2 3zm2-2a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 0-1h-7A.5.5 0 0 0 4 1z"fill-rule=evenodd /></svg></button></span><span data-toggle=collapse data-target=#virtual_keyboard aria-controls=virtual_keyboard aria-expanded=false><button type=button class="btn btn-sm icon mr-0"id=button_keyboard data-toggle=tooltip data-placement=top title="virtual keyboard"><svg class="bi bi-type"fill=currentColor height=auto viewBox="0 0 16 16"width=1.6em xmlns=http://www.w3.org/2000/svg><path d="M2.244 13.081l.943-2.803H6.66l.944 2.803H8.86L5.54 3.75H4.322L1 13.081h1.244zm2.7-7.923L6.34 9.314H3.51l1.4-4.156h.034zm9.146 7.027h.035v.896h1.128V8.125c0-1.51-1.114-2.345-2.646-2.345-1.736 0-2.59.916-2.666 2.174h1.108c.068-.718.595-1.19 1.517-1.19.971 0 1.518.52 1.518 1.464v.731H12.19c-1.647.007-2.522.8-2.522 2.058 0 1.319.957 2.18 2.345 2.18 1.06 0 1.716-.43 2.078-1.011zm-1.763.035c-.752 0-1.456-.397-1.456-1.244 0-.65.424-1.115 1.408-1.115h1.805v.834c0 .896-.752 1.525-1.757 1.525z"/></svg></button></span><button type=button class="btn btn-sm icon ml-0 pl-0"id=button_custom_key data-toggle=tooltip data-placement=top title="action buttons"><svg class="bi bi-plus"fill=currentColor height=auto viewBox="0 0 16 16"width=1.6em xmlns=http://www.w3.org/2000/svg><path d="M8 3.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5H4a.5.5 0 0 1 0-1h3.5V4a.5.5 0 0 1 .5-.5z"fill-rule=evenodd /><path d="M7.5 8a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0V8z"fill-rule=evenodd /></svg></button><form id=theFileInput style=display:inline-block><div class="px-1 mr-1 u-full-width"id=drop_zone data-placement=bottom data-toggle=tooltip title="drop .g64 .d64 .t64 .crt .prg .tap or .zip files or links from CSDb.dk into here, or just click into the drop zone">file slot</div><input id=filedialog type=file name=theFileDialog style=display:none></form><button type=button class="btn btn-sm icon"id=button_settings data-toggle=modal data-target=#modal_settings><svg class="bi bi-gear-fill"fill=currentColor height=auto viewBox="0 0 16 16"width=1.6em xmlns=http://www.w3.org/2000/svg data-placement=top data-toggle=tooltip title=settings><path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 0 0-5.86 2.929 2.929 0 0 0 0 5.858z"fill-rule=evenodd /></svg></button></div><div class=col-4><select class="custom-select mr-1"data-placement=left data-toggle=tooltip id=port1 title="game port 1"><option value=none>none</option><option value=keys>cursor keys, space to fire</option><option value=touch>touch</option></select><select class=custom-select data-placement=left data-toggle=tooltip id=port2 title="game port 2"><option value=none>none</option><option value=keys>cursor keys, space to fire</option><option value=touch>touch</option></select></div></div><div class="mt-1 row"id=output_row><div class=col-12><textarea id=output rows=20></textarea></div></div></div><div class="alert alert-darkest"id=alert_reset role=alert style=display:none><span class=ml-4>resetting machine, please wait ...</span></div><div class="alert alert-darkest"id=alert_wait role=alert style=display:none><span>loading please wait ...</span><div class=progress><div class="progress-bar progress-bar-animated progress-bar-striped"style=width:100% role=progressbar aria-valuemax=100 aria-valuemin=0 aria-valuenow=100></div></div></div><div class="fade modal"id=snapshotModal role=dialog aria-hidden=true tabindex=-1><div id=view_detail style=display:none tabindex=-1><button type=button id=detail_back><svg class="bi bi-arrow-left"fill=currentColor height=1.6em viewBox="0 0 16 16"width=1.6em xmlns=http://www.w3.org/2000/svg><path d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"fill-rule=evenodd /></svg></button><div id=detail_content></div></div><div class="modal-dialog modal-xl"role=document><div class=modal-content><div class=modal-header><div class=row style=width:100%><div class="mt-2 col-sm btn-group btn-group-toggle"data-toggle=buttons><label class="btn btn-primary active"><input id=sel_browser_snapshots type=radio name=options checked> snapshots</label><label class="btn btn-secondary"><input id=sel_browser_csdb type=radio name=options> CSDb.dk</label></div><div class="mt-2 col-sm input-group"><div class=input-group-prepend><span class=input-group-text id=search_symbol><svg class="bi bi-search"fill=currentColor height=1.2em viewBox="0 0 16 16"width=1.2em xmlns=http://www.w3.org/2000/svg><path d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"fill-rule=evenodd /><path d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"fill-rule=evenodd /></svg></span></div><input id=search class=form-control placeholder="search snapshots (local browser storage)"aria-label=search></div></div><div class="mt-2 mr-1"id=div_like></div><button type=button class="close px-1 py-0"data-dismiss=modal aria-label=Close><span aria-hidden=true>×</span></button></div><div class=modal-body><div class="container scrollx-group"id=container_snapshots></div></div><div class=modal-footer><button type=button class="btn btn-secondary"data-dismiss=modal>Close</button></div></div></div></div><div class="fade modal"id=modal_roms aria-labelledby=snapshotModalLabel aria-hidden=true role=dialog tabindex=-1><div class="modal-dialog modal-lg"role=document><div class=modal-content><div class=modal-header><h5 class=modal-title id=snapshotModalLabel><img src=img/vc64web.png style=height:50px> SYSTEM ROMS</h5><button type=button class=close data-dismiss=modal aria-label=Close><span aria-hidden=true>×</span></button></div><div class=modal-body>The emulator needs system ROM files. Please drag the missing files into the empty chip sockets. Or just touch or click the sockets.<br><br><div class="container mt-4"><div class="row my-2"><div class="col mx-2"><div class="container card mb-3"style=max-width:540px><div class="row no-gutters"><div class=col-md-8><div class=card-body><h5 class=card-title>basic rom</h5><p class=card-text>(required)</p><button type=button class="btn btn-sm icon"id=button_delete_basic><svg class="bi bi-trash-fill"fill=currentColor height=auto viewBox="0 0 16 16"width=1.6em xmlns=http://www.w3.org/2000/svg><path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5a.5.5 0 0 0-1 0v7a.5.5 0 0 0 1 0v-7z"fill-rule=evenodd /></svg></button></div></div><div class=col-md-4><img src=img/rom_empty.png alt=... class=card-img id=rom_basic></div></div></div></div><div class="col mx-2"id=kernal_basic><div class="container card mb-3"style=max-width:540px><div class="row no-gutters"><div class=col-md-4><img src=img/rom_empty.png alt=... class=card-img id=rom_kernal></div><div class=col-md-8><div class=card-body><h5 class=card-title>kernal rom</h5><p class=card-text>(required)</p><button type=button class="btn btn-sm icon"id=button_delete_kernal><svg class="bi bi-trash-fill"fill=currentColor height=auto viewBox="0 0 16 16"width=1.6em xmlns=http://www.w3.org/2000/svg><path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5a.5.5 0 0 0-1 0v7a.5.5 0 0 0 1 0v-7z"fill-rule=evenodd /></svg></button></div></div></div></div></div></div><div class="row my-2"><div class="col mx-2"><div class="container card mb-3"style=max-width:540px><div class="row no-gutters"><div class=col-md-8><div class=card-body><h5 class=card-title>charset rom</h5><p class=card-text>(required)</p><button type=button class="btn btn-sm icon"id=button_delete_char_rom><svg class="bi bi-trash-fill"fill=currentColor height=auto viewBox="0 0 16 16"width=1.6em xmlns=http://www.w3.org/2000/svg><path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5a.5.5 0 0 0-1 0v7a.5.5 0 0 0 1 0v-7z"fill-rule=evenodd /></svg></button></div></div><div class=col-md-4><img src=img/rom_empty.png alt=... class=card-img id=rom_charset></div></div></div></div><div class="col mx-2"><div class="container card mb-3"style=max-width:540px><div class="row no-gutters"><div class=col-md-4><img src=img/rom_empty.png alt=... class=card-img id=rom_disk_drive></div><div class=col-md-8><div class=card-body><h5 class=card-title>disk drive rom</h5><p class=card-text>(optional)<br><small class=text-muted>only .t64 .prg .crt .tap files will work without</small></p><button type=button class="btn btn-sm icon"id=button_delete_disk_drive_rom><svg class="bi bi-trash-fill"fill=currentColor height=auto viewBox="0 0 16 16"width=1.6em xmlns=http://www.w3.org/2000/svg><path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5a.5.5 0 0 0-1 0v7a.5.5 0 0 0 1 0v-7z"fill-rule=evenodd /></svg></button></div></div></div></div></div></div><br>Once loaded VirtualC64web will try to store these files to your browsers local storage. Then on subsequent starts it will take the rom files from your browsers local storage instead of asking you again for them.</div></div><div class=modal-footer><div class=justify-start><button type=button class="btn btn-primary"id=button_fetch_open_roms><img src=img/mega.png> install open roms</button><a href=https://github.com/MEGA65/open-roms/tree/master/bin target=_blank> learn more...</a></div><button type=button class="btn btn-secondary"data-dismiss=modal>Close</button></div></div></div></div><div class="fade modal"id=modal_settings aria-labelledby=settingsModalLabel aria-hidden=true role=dialog tabindex=-1><div class="modal-dialog modal-lg"role=document><div class=modal-content><div class=modal-header><h5 class=modal-title id=settingsModalLabel><img src=img/vc64web.png style=height:50px>Settings</h5><button type=button class=close data-dismiss=modal aria-label=Close><span aria-hidden=true>×</span></button></div><div class=modal-body><p>most settings are permanent and will be saved to your local browser storage</p><div class="custom-control custom-switch mt-1"><input id=cb_debug_output class=custom-control-input type=checkbox><label class=custom-control-label for=cb_debug_output>show live debug output</label></div><div class="custom-control custom-switch mt-1"><input id=dark_switch class=custom-control-input type=checkbox><label class=custom-control-label for=dark_switch>dark mode</label></div><div class="custom-control custom-switch mt-1"><input id=pixel_art_switch class=custom-control-input type=checkbox><label class=custom-control-label for=pixel_art_switch data-placement=right data-toggle=tooltip title="on safari webgl must be deactivated for pixel art">pixel art</label></div><div class="custom-control custom-switch mt-1"><input id=webgl_switch class=custom-control-input type=checkbox><label class=custom-control-label for=webgl_switch>on next start use accelerated WebGL</label></div><div class="custom-control custom-switch mt-1"><input id=warp_switch class=custom-control-input type=checkbox><label class=custom-control-label for=warp_switch>warp during disk load</label></div><div class="custom-control custom-switch mt-1"><input id=borderless_switch class=custom-control-input type=checkbox><label class=custom-control-label for=borderless_switch>borderless</label></div><div class="custom-control custom-switch mt-1"><input id=wide_screen_switch class=custom-control-input type=checkbox><label class=custom-control-label for=wide_screen_switch>cinematic wide screen</label></div><div class="custom-control custom-switch mt-1"><input id=auto_snapshot_switch class=custom-control-input type=checkbox><label class=custom-control-label for=auto_snapshot_switch data-placement=top data-toggle=tooltip title="you find auto snapshots in the first row of the snapshot browser">save auto snapshots</label></div><div class="custom-control custom-switch mt-1"><input id=symbolic_mapping_switch class=custom-control-input type=checkbox><label class=custom-control-label for=symbolic_mapping_switch>use symbolic keyboard mapping (instead of positional)</label></div><div class="custom-control custom-switch mt-1"><input id=lock_action_button_switch class=custom-control-input type=checkbox><label class=custom-control-label for=lock_action_button_switch data-placement=top data-toggle=tooltip title="only when locked no gestures detection is done and therefore events like touchstart/end mousedown/up are processed correctly.">lock action buttons (prevent dragging and long press)</label></div><div class="row container justify-content-start mt-2"><div class="mt-1 dropdown mr-1"><button type=button class="btn btn-primary dropdown-toggle text-right"id=button_sid_model data-toggle=dropdown aria-expanded=false aria-haspopup=true>sid model 6581</button><div class="dropdown-menu dropdown-menu-right"id=choose_sid_model aria-labelledby=dropdownMenuButton><a href=# class=dropdown-item>6581</a><a href=# class=dropdown-item>8580</a></div></div><div class="mt-1 dropdown mr-1"><button type=button class="btn btn-primary dropdown-toggle text-right"id=button_2nd_sid data-toggle=dropdown aria-expanded=false aria-haspopup=true>2nd sid disabled</button><div class="dropdown-menu dropdown-menu-right"id=choose_2nd_sid_addr aria-labelledby=dropdownMenuButton><a href=# class=dropdown-item>disabled</a><a href=# class=dropdown-item>enabled at $d420</a><a href=# class=dropdown-item>enabled at $d440</a><a href=# class=dropdown-item>enabled at $d460</a><a href=# class=dropdown-item>enabled at $d500</a></div></div><div class="mt-1 dropdown mr-1"><button type=button class="btn btn-primary dropdown-toggle text-right"id=button_sid_engine data-toggle=dropdown aria-expanded=false aria-haspopup=true>ReSID fast</button><div class="dropdown-menu dropdown-menu-right"id=choose_sid_engine aria-labelledby=dropdownMenuButton><a href=# class=dropdown-item>ReSID fast</a><a href=# class=dropdown-item>ReSID interpolate</a><a href=# class=dropdown-item>ReSID resample</a></div></div></div><label class=mt-4>cut out sprite layers (stencil)</label><div class="row container"><div class="custom-control custom-checkbox custom-control-lg col"><input id=sprite0 class="custom-control-input layer"type=checkbox value=""><label class="custom-control-label text-muted"for=sprite0>0</label></div><div class="custom-control custom-checkbox custom-control-lg col"><input id=sprite1 class="custom-control-input layer"type=checkbox value=""><label class="custom-control-label text-muted"for=sprite1>1</label></div><div class="custom-control custom-checkbox custom-control-lg col"><input id=sprite2 class="custom-control-input layer"type=checkbox value=""><label class="custom-control-label text-muted"for=sprite2>2</label></div><div class="custom-control custom-checkbox custom-control-lg col"><input id=sprite3 class="custom-control-input layer"type=checkbox value=""><label class="custom-control-label text-muted"for=sprite3>3</label></div><div class="custom-control custom-checkbox custom-control-lg col"><input id=sprite4 class="custom-control-input layer"type=checkbox value=""><label class="custom-control-label text-muted"for=sprite4>4</label></div><div class="custom-control custom-checkbox custom-control-lg col"><input id=sprite5 class="custom-control-input layer"type=checkbox value=""><label class="custom-control-label text-muted"for=sprite5>5</label></div><div class="custom-control custom-checkbox custom-control-lg col"><input id=sprite6 class="custom-control-input layer"type=checkbox value=""><label class="custom-control-label text-muted"for=sprite6>6</label></div><div class="custom-control custom-checkbox custom-control-lg col"><input id=sprite7 class="custom-control-input layer"type=checkbox value=""><label class="custom-control-label text-muted"for=sprite7>7</label></div></div><div class="dropdown mr-1 mt-4"><button type=button class="btn btn-primary dropdown-toggle text-right"id=button_color_palette data-toggle=dropdown aria-expanded=false aria-haspopup=true>color</button><div class="dropdown-menu dropdown-menu-right"id=choose_color_palette aria-labelledby=dropdownMenuButton><a href=# class=dropdown-item>color</a><a href=# class=dropdown-item>black white</a><a href=# class=dropdown-item>paper white</a><a href=# class=dropdown-item>green</a><a href=# class=dropdown-item>amber</a><a href=# class=dropdown-item>sepia</a></div></div><button type=button class="btn btn-primary mt-5"id=button_rom_dialog>system roms ...</button><hr><div class=mt-3 style=font-size:small><p>VirtualC64web emulates a cycle-acurate Commodore 64 on the web.<br><br><a href=https://vc64web.github.io/doc/about.html style=font-size:x-large>learn more about vc64web ...</a><br><br></p><br><button type=button class="btn btn-primary"id=button_update data-toggle=tooltip data-placement=top title="normally vC64web should update automatically. iOS does often not...">update installation manually</button><br><br><br><small>DISCLAIMER: In 2021 the Demoscene was<a href=https://www.unesco.de/en/culture-and-nature/intangible-cultural-heritage/demoscene-culture-digital-real-time-animations class=mx-2 style=font-size:larger>accepted as UNESCO cultural heritage</a>. Following this spirit, vc64web wants to connect people to those amazing artwork and culture. It therefore links to demo content of the biggest external Demoscene website for the c64.<a href=http://csdb.dk class=mx-2 style=font-size:larger>Csdb.dk</a>is the biggest Demoscene site for the C64. The amount of demos is countless and every day new demos are added. Due to this nature we can not check the legal condition of every single demo from their site. The operators or creators of external web resources are soley responsible for their content.</small></div></div><div class=modal-footer><button type=button class="btn btn-secondary"data-dismiss=modal>Close</button></div></div></div></div><div class="fade modal"id=modal_take_snapshot aria-labelledby=take_snapshot_ModalLabel aria-hidden=true role=dialog tabindex=-1><div class=modal-dialog role=document><div class=modal-content><div class=modal-header><h5 class=modal-title id=take_snapshot_ModalLabel>save a snapshot to local browser space</h5><button type=button class=close data-dismiss=modal aria-label=Close><span aria-hidden=true>×</span></button></div><div class=modal-body><div class="mb-3 input-group"><div class=input-group-prepend><span class=input-group-text id=inputGroup-sizing-default>app title</span></div><input id=input_app_title class=form-control aria-label="Sizing example input"aria-describedby=inputGroup-sizing-default data-toggle=tooltip data-placement=right title="store in a snapshot browser row dedicated for this app title"></div></div><div class=modal-footer><div class=justify-start><button type=button class="btn btn-success ml-2"id=button_export_disk data-toggle=tooltip data-placement=top title="export the current state of disk in drive8"><svg class=mr-2 class="bi bi-box-arrow-up"fill=currentColor height=1.2em viewBox="0 0 16 16"width=1.2em xmlns=http://www.w3.org/2000/svg style=margin-top:-7px><path d="M3.5 6a.5.5 0 0 0-.5.5v8a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-2a.5.5 0 0 1 0-1h2A1.5 1.5 0 0 1 14 6.5v8a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 14.5v-8A1.5 1.5 0 0 1 3.5 5h2a.5.5 0 0 1 0 1h-2z"fill-rule=evenodd /><path d="M7.646.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 1.707V10.5a.5.5 0 0 1-1 0V1.707L5.354 3.854a.5.5 0 1 1-.708-.708l3-3z"fill-rule=evenodd /></svg>disk in drive 8</button></div><button type=button class="btn btn-primary"id=button_save_snapshot>save <svg class="bi bi-arrow-return-left"fill=currentColor height=1em viewBox="0 0 16 16"width=1em xmlns=http://www.w3.org/2000/svg><path d="M14.5 1.5a.5.5 0 0 1 .5.5v4.8a2.5 2.5 0 0 1-2.5 2.5H2.707l3.347 3.346a.5.5 0 0 1-.708.708l-4.2-4.2a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 8.3H12.5A1.5 1.5 0 0 0 14 6.8V2a.5.5 0 0 1 .5-.5z"fill-rule=evenodd /></svg></button><button type=button class="btn btn-secondary"data-dismiss=modal>cancel</button></div></div></div></div><div class="fade modal"id=modal_custom_key aria-labelledby=custom_key_ModalLabel aria-hidden=true role=dialog tabindex=-1><div class="modal-dialog modal-lg"role=document><div class=modal-content><div class=modal-header><h5 class=modal-title id=custom_key_ModalLabel>define an action button</h5><button type=button class=close data-dismiss=modal aria-label=Close><span aria-hidden=true>×</span></button></div><div class=modal-body>This is the place where you can create app or game specific customized overlay buttons with free positioning ...<div class=mt-3 style=display:flex;justify-content:space-between;width:100%><div class=w-75>label of the action button<br><input id=input_button_text class=form-control required pattern=^.+$ placeholder="try to use emojis 😊 as icons"aria-label="action script"aria-describedby=inputGroup-sizing-default><div class=invalid-feedback id=input_button_text_error>you are missing text here</div></div><div class=ml-2>shortcut key<br><input id=input_button_shortcut class="form-control ml-1"required pattern=^.{0,1}$ placeholder=(optional) style=width:6em;margin-left:0!important aria-label="action script"aria-describedby=inputGroup-sizing-default><div class=invalid-feedback id=input_button_shortcut_error>please specify only one shortcut key</div></div></div><div class=mt-3 style=display:flex;justify-content:flex-start;width:100%><div class=dropdown><button type=button class="btn btn-primary dropdown-toggle text-right"id=button_padding data-toggle=dropdown aria-expanded=false aria-haspopup=true>size = default</button><div class="dropdown-menu dropdown-menu-right"id=choose_padding aria-labelledby=dropdownMenuButton><a href=# class=dropdown-item>default</a><a href=# class=dropdown-item>0.4</a><a href=# class=dropdown-item>0.6</a><a href=# class=dropdown-item>0.9</a><a href=# class=dropdown-item>1.1</a><a href=# class=dropdown-item>1.3</a><a href=# class=dropdown-item>1.8</a><a href=# class=dropdown-item>2.5</a><a href=# class=dropdown-item>3</a><a href=# class=dropdown-item>4</a><a href=# class=dropdown-item>6</a></div></div><div class=dropdown><button type=button class="btn btn-primary dropdown-toggle text-right ml-4"id=button_opacity data-toggle=dropdown aria-expanded=false aria-haspopup=true>opacity = default</button><div class="dropdown-menu dropdown-menu-right"id=choose_opacity aria-labelledby=dropdownMenuButton><a href=# class=dropdown-item>default</a><a href=# class=dropdown-item>0.1</a><a href=# class=dropdown-item>0.2</a><a href=# class=dropdown-item>0.3</a><a href=# class=dropdown-item>0.4</a><a href=# class=dropdown-item>0.5</a><a href=# class=dropdown-item>0.6</a><a href=# class=dropdown-item>0.7</a><a href=# class=dropdown-item>0.8</a><a href=# class=dropdown-item>0.9</a><a href=# class=dropdown-item>1.0</a></div></div></div><br>app scope<div class="custom-control custom-checkbox custom-control-lg"><input id=check_app_scope class=custom-control-input type=checkbox value=""><label class="custom-control-label text-muted"for=check_app_scope id=check_app_scope_label></label></div><br>compose an action sequence, for example<br><ul><li><b><i>loop5{j2fire1=>120ms=>j2fire0=>90ms}</i></b> which will shoot 5 times</li><li>or a literal action enclosed in single quotes e.g.<b>'load"$",8'</b></li><li>or key combos e.g. CTRL+W  <b>pressControlLeft=>W=>releaseControlLeft</b></li><li>or <b>A=>await_action_button_released=>B</b></li>for A on button down and B on button up in locked mode (see settings)<li>for more complex tasks you can also choose to add a javascript ...</li></ul><div class="mt-2 input-group mb-3"><div class=dropdown style=display:flex;justify-content:space-between;width:100%><div style=display:flex><button type=button class="btn btn-primary dropdown-toggle text-right"id=button_script_language data-toggle=dropdown aria-expanded=false aria-haspopup=true>actionscript</button><div class="dropdown-menu dropdown-menu-right"id=choose_script_language aria-labelledby=dropdownMenuButton><a href=# class=dropdown-item>actionscript</a><a href=# class=dropdown-item>javascript</a></div><div class="custom-control custom-checkbox custom-control-lg ml-3 mt-2"id=check_autocomplete><input id=check_livecomplete class=custom-control-input type=checkbox value=""><label class="custom-control-label text-muted"for=check_livecomplete id=check_livecomplete_label>live complete</label></div></div><div class=dropdown><button type=button class="btn btn-primary dropdown-toggle"id=button_script_add data-toggle=collapse aria-expanded=false aria-controls=predefined_actions data-target=#predefined_actions style=height:100% aria-label="predefined actions">add</button></div><div class=collapse id=predefined_actions style=position:absolute;z-index:2000;right:0;top:39px><div><div class=dropdown><button type=button class="btn btn-primary dropdown-toggle text-right"data-toggle=dropdown aria-expanded=false aria-haspopup=true style=width:100%>javascript</button><div class="dropdown-menu dropdown-menu-right"id=add_javascript aria-labelledby=dropdownMenuButton></div></div><div class=dropdown><button type=button class="btn btn-primary dropdown-toggle text-right"data-toggle=dropdown aria-expanded=false aria-haspopup=true style=width:100%>special key</button><div class="dropdown-menu dropdown-menu-right"id=add_special_key aria-labelledby=dropdownMenuButton></div></div><div class=dropdown><button type=button class="btn btn-primary dropdown-toggle text-right"data-toggle=dropdown aria-expanded=false aria-haspopup=true style=width:100%>joyport1 action</button><div class="dropdown-menu dropdown-menu-right"id=add_joystick1_action aria-labelledby=dropdownMenuButton></div></div><div class=dropdown><button type=button class="btn btn-primary dropdown-toggle text-right"data-toggle=dropdown aria-expanded=false aria-haspopup=true style=width:100%>joyport2 action</button><div class="dropdown-menu dropdown-menu-right"id=add_joystick2_action aria-labelledby=dropdownMenuButton></div></div><div class=dropdown><button type=button class="btn btn-primary dropdown-toggle text-right"data-toggle=dropdown aria-expanded=false aria-haspopup=true style=width:100%>timer action</button><div class="dropdown-menu dropdown-menu-right"id=add_timer_action aria-labelledby=dropdownMenuButton></div></div><div class=dropdown><button type=button class="btn btn-primary dropdown-toggle text-right"data-toggle=dropdown aria-expanded=false aria-haspopup=true style=width:100%>system action</button><div class="dropdown-menu dropdown-menu-right"id=add_system_action aria-labelledby=dropdownMenuButton></div></div></div></div></div><div class=mt-1 style=width:100%><textarea id=input_action_script aria-describedby=inputGroup-sizing-default aria-label="action script"class=form-control placeholder=""style=width:100%></textarea><div class=invalid-feedback id=action_button_syntax_error></div></div></div>... after created you can change the position of the action button by dragging ... when clicking the action button with a long press it goes into edit mode which takes you right back to here ...</div><div class=modal-footer><button type=button class="btn btn-danger justify-start"id=button_delete_custom_button>delete</button><button type=button class="btn btn-primary"id=button_save_custom_button>save</button><button type=button class="btn btn-secondary"data-dismiss=modal>cancel</button></div></div></div></div><div class="fade modal"id=modal_file_slot aria-labelledby=file_slot_ModalLabel aria-hidden=true role=dialog tabindex=-1><div class=modal-dialog role=document><div class=modal-content><div class=modal-header><h5 class=modal-title id=file_slot_ModalLabel><span id=file_slot_dialog_label></span></h5><button type=button class=close data-dismiss=modal aria-label=Close><span aria-hidden=true>×</span></button></div><div class=modal-body><div class="custom-control custom-switch mt-1"id=div_auto_load><input id=auto_load class=custom-control-input type=checkbox><label class=custom-control-label for=auto_load>auto load</label></div><div class="custom-control custom-switch mt-1"id=div_auto_press_play><input id=auto_press_play class=custom-control-input type=checkbox><label class=custom-control-label for=auto_press_play>auto press play on tape</label></div><div class="custom-control custom-switch mt-1"id=div_auto_run><input id=auto_run class=custom-control-input type=checkbox><label class=custom-control-label for=auto_run>auto run</label></div><div id=div_zip_content></div><div class="my-2 px-2 py-2 rounded"id=no_disk_rom_msg style=display:none>Warning: no rom-chip in floppy drive installed. D64 and G64 files are floppy images ... loading of files with these extensions will require a floppy rom. Head over to roms setting and provide the rom first. Or try to load a file with a different extension.</div></div><div class=modal-footer><div class=justify-start><button type=button class="btn btn-secondary"data-dismiss=modal>cancel</button><button type=button class="btn btn-success ml-2"id=button_eject_zip>eject zip</button></div><button type=button class="btn btn-primary"id=button_insert_file>insert</button></div></div></div></div><script>let light_mode=!1;if(window.location.href.indexOf("#dark=false")>=0)light_mode=!0;else if(window.location.href.indexOf("#")>0){let e=decodeURIComponent(window.location.href.substring(window.location.href.indexOf("#")));if(0==e.indexOf("#{")&&e.endsWith("}"))try{let t=JSON.parse(e.substring(1)).dark;light_mode=void 0!==t&&0==t}catch(t){console.error(`error in JSON preconfig parameter: ${e}`),console.error(t),alert(`error in JSON preconfig parameter: \n${t}`)}}light_mode&&($("#canvas").css("background-color","var(--lighterbg)"),$("body").removeAttr("data-theme").css("background-color","var(--lighterbg) !important"));var db,statusElement=document.getElementById("status"),progressElement=document.getElementById("progress"),spinnerElement=document.getElementById("spinner"),Module={preRun:[function(){ENV.SDL_EMSCRIPTEN_KEYBOARD_ELEMENT="#canvas"}],postRun:[InitWrappers],print:function(){var e=document.getElementById("output");return e&&(e.value=""),function(t){console.log(t),"undefined"!=typeof live_debug_output&&live_debug_output&&(arguments.length>1&&(t=Array.prototype.slice.call(arguments).join(" ")),e&&(e.value+=t+"\n",e.scrollTop=e.scrollHeight))}}(),printErr:function(e){arguments.length>1&&(e=Array.prototype.slice.call(arguments).join(" ")),console.error(e)},canvas:function(){var e=document.getElementById("canvas");return e.addEventListener("webglcontextlost",(function(e){alert("WebGL context lost. You will need to reload the page."),e.preventDefault()}),!1),e}(),setStatus:function(e){if(Module.setStatus.last||(Module.setStatus.last={time:Date.now(),text:""}),e!==Module.setStatus.last.text){var t=e.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/),n=Date.now();t&&n-Module.setStatus.last.time<30||(Module.setStatus.last.time=n,Module.setStatus.last.text=e,t?(e=t[1],progressElement.value=100*parseInt(t[2]),progressElement.max=100*parseInt(t[4]),progressElement.hidden=!1,spinnerElement.hidden=!1):(progressElement.value=null,progressElement.max=null,progressElement.hidden=!0,e||(spinnerElement.hidden=!0)),statusElement.innerHTML=e)}},totalDependencies:0,monitorRunDependencies:function(e){this.totalDependencies=Math.max(this.totalDependencies,e),Module.setStatus(e?"Preparing... ("+(this.totalDependencies-e)+"/"+this.totalDependencies+")":"All downloads complete.")}};Module.setStatus("Downloading..."),window.onerror=function(e,t,n,o,r){var s=["Error-Message: "+e,"URL: "+t,"Line: "+n,"Column: "+o,"Error object: "+JSON.stringify(r)].join(" - ");alert(s+" -- go to settings open live debug console ..."),document.getElementById("output").value+="\n"+s+"\n",Module.setStatus("Exception thrown, see JavaScript console"),spinnerElement.style.display="none",Module.setStatus=function(e){e&&Module.printErr("[post-exception status] "+e)}},"serviceWorker"in navigator&&navigator.serviceWorker.register("sw.js").then(e=>{console.log("service worker registered")}).catch(e=>console.log("service worker not registered",e)),$((function(){$('[data-toggle="popover"]').popover(),$("body").tooltip({selector:'[data-toggle="tooltip"]'}),initDB()}))</script><script src=vC64.js async></script></body></html>