index.html

<html>
<head>
  <title>Octo</title>
  <script src='lib/codemirror/codemirror.min.js'></script>
  <script src='lib/codemirror/codemirror.dialog.js'></script>
  <script src='lib/codemirror/codemirror.matchbrackets.js'></script>
  <script src='lib/codemirror/codemirror.searchcursor.js'></script>
  <script src='lib/codemirror/vim.min.js'></script>
  <script src='lib/codemirror/octomode.js'></script>
  <script src='js/emulator.js'></script>
  <script src='js/compiler.js'></script>
  <script src='js/decompiler.js'></script>
  <script src='js/shared.js'></script>
  <script src='js/util.js'></script>
  <script src='js/sharing.js'></script>
  <script src='js/input.js'></script>
  <link rel='stylesheet' href='lib/codemirror/codemirror.min.css'>
  <link rel='stylesheet' href='lib/codemirror/codemirror.dialog.css'>
  <link rel='stylesheet' href='lib/codemirror/monokai.css'>
  <link rel='shortcut icon' href='images/favicon.ico' type='image/x-icon'>
</head>

<body>
  <div id='header'>
    <a href='https://github.com/JohnEarnest/Octo'><img src='images/logo.png'/></a>
    <input type="file" id="maininput" style="display:none">
    <a id='mainlink' style='display:none'></a>
    <div class='head' id='main-run'>Run</div>
    <div class='head' id='main-open'>Open</div>
    <div class='head' id='main-save'>Share</div>
    <div class='menu' id='main-examples'>
      <div class='head'>Examples</div>
      <ul>
        <li>loading...</li>
      <ul>
    </div>
    <div class='menu' id='main-speed'>
      <div class='head'>Speed</div>
      <ul>
        <li data-value='7'>7 Cycles/Frame</li>
        <li data-value='15'>15 Cycles/Frame</li>
        <li data-value='20'>20 Cycles/Frame</li>
        <li data-value='30'>30 Cycles/Frame</li>
        <li data-value='100'>100 Cycles/Frame</li>
        <li data-value='200'>200 Cycles/Frame</li>
        <li data-value='500'>500 Cycles/Frame</li>
        <li data-value='1000'>1000 Cycles/Frame</li>
        <li data-value='20000'>Ludicrous Speed</li>
      </ul>
    </div>
    <div class='spacer'></div>
    <div id='show-manual'>Manual</div>
    <div id='show-toolbox'>Toolbox</div>
  </div>

  <div id='main'>
    <div id='editor'></div>

    <div id='manual'>
      <iframe src="https://johnearnest.github.io/Octo/docs/Manual.html"></iframe>
    </div>

    <div id='toolbox'>
      <div data-panel='sprite' class='tool-header'>Sprite Editor</div>
      <div data-panel='sprite' class='tool-body'>
        <div class='buttonbar'>
          <div id='sprite-16'>16x16 Sprite</div>
          <div id='sprite-color'>Color Sprite</div>
          <div id='sprite-left'>&lt;&lt;1</div>
          <div id='sprite-right'>&gt;&gt;1</div>
          <div id='sprite-up'>&and;</div>
          <div id='sprite-down'>&or;</div>
          <div id='sprite-clear'>Clear</div>
        </div>
        <div id='sprite-palette'>
          <span data-value='0'>Background</span>
          <span data-value='1'>Foreground 1</span>
          <span data-value='2'>Foreground 2</span>
          <span data-value='3'>Blended</span>
        </div>
        <div class='preview-container'>
          <canvas id='sprite-draw'></canvas>
        </div>
        <div id='sprite-editor'></div>
      </div>

      <div data-panel='audio' class='tool-header'>Audio Editor</div>
      <div data-panel='audio' class='tool-body'>
        <h1>Audio Pattern</h1>
        <div id='audio-error'></div>
        <div class='preview-container'>
          <canvas id='audio-pattern-view' width='256' height='32'></canvas>
        </div>
        <div id='audio-pattern-editor'></div>
        <div id='audio-tone-group'>
          <div class='pair'>Pitch: <input id='audio-pitch' value='64'></div>
          <div id='audio-left'   class='button'>&lt;&lt;</div>
          <div id='audio-right'  class='button'>&gt;&gt;</div>
          <div id='audio-random' class='button'>Randomize</div>
          <div id='audio-play'   class='button'>Play</div>
        </div>

        <h1>Tone Generator</h1>
        <div class='preview-container'>
          <canvas id='audio-tone-view' width='256' height='32'></canvas>
        </div>
        <div>Blend Mode</div>
        <div id='audio-blend-mode'>
          <span data-value='none'>None</span>
          <span data-value='or'  >OR  </span>
          <span data-value='and' >AND </span>
          <span data-value='xor' >XOR </span>
        </div>
        <div id='audio-tone-group'>
          <div class='pair'>Width: <input id='audio-width' value='16'></div>
          <div class='pair'>Pulse: <input id='audio-pulse' value='0.5'></div>
          <div class='pair'>Frequency: <input id='audio-freq' value='440'> Hz</div>
        </div>
        <div id='audio-tone-group'>
          <div id='audio-tone-preview' class='button'>Play</div>
          <div id='audio-generate'     class='button'>Generate</div>
        </div>

        <h1>Volume</h1>
        <div id='audio-tone-group'>
          <div class='pair'>Volume level: <input id='audio-gain' value='0.25'></div>
        </div>
      </div>

      <div data-panel='binary' class='tool-header'>Binary Tools</div>
      <div data-panel='binary' class='tool-body'>
        <h1>Binary Input</h1>
        <input type="file" id="fileinput" style="display:none">
        <div id='binary-editor'></div>
        <div class='buttonbar'>
          <div id='binary-open'>Open <tt>.ch8</tt>...</div>
          <div id='binary-decompile'>Decompile</div>
          <div id='binary-run'>Run</div>
        </div>
        <h1>Decompiler Mode</h1>
        <div id='decompiler-mode'>
          <span data-value='raw'>Raw</span>
          <span data-value='static'>Static Analysis</span>
        </div>
        <h1>Decompiler Numeric Format</h1>
        <div id='decompiler-numbers'>
          <span data-value='bin'>Binary</span>
          <span data-value='dec'>Decimal</span>
          <span data-value='hex'>Hexadecimal</span>
        </div>
        <h1>Linter Mode</h1>
        <div id='linter-mode'>
          <span data-value='none'>No Linting</span>
          <span data-value='pedantic'>Pedantic Linting</span>
        </div>
        <h1>File Output</h1>
        <div>
          <input id='binary-filename' value='output'>
        </div>
        <div class='buttonbar'>
          <div id='binary-save-8o'>Save <tt>.8o</tt></div>
          <div id='binary-save-ch8'>Save <tt>.ch8</tt></div>
          <div id='binary-save-cart'>Save Cartridge...</div>
          <div id='binary-save-html'>Save HTML...</div>
        </div>
      </div>

      <div data-panel='color' class='tool-header'>Appearance</div>
      <div data-panel='color' class='tool-body'>
        <h1>Palette</h1>
        <table id='color-table'>
          <tr><td>Background  </td><td><input></td><td class='swatch'></td></tr>
          <tr><td>Foreground 1</td><td><input></td><td class='swatch'></td></tr>
          <tr><td>Foreground 2</td><td><input></td><td class='swatch'></td></tr>
          <tr><td>Blended     </td><td><input></td><td class='swatch'></td></tr>
          <tr><td>Buzzer      </td><td><input></td><td class='swatch'></td></tr>
          <tr><td>Silence     </td><td><input></td><td class='swatch'></td></tr>
        </table>
        <h1>Presets</h1>
        <div id='palette-presets'>
          <span data-value='octo'>Octo Classic&#8482;</span>
          <span data-value='lcd'>LCD</span>
          <span data-value='hotdog'>Hot Dog</span>
          <span data-value='gray'>Gray</span>
          <span data-value='cga0'>CGA 0</span>
          <span data-value='cga1'>CGA 1</span>
        </div>
        <h1>Fonts</h1>
        <div id='emulator-fonts'>
          <span data-value='octo'>Octo</span>
          <span data-value='vip'>VIP</span>
          <span data-value='schip'>SCHIP</span>
          <span data-value='dream6800'>Dream</span>
          <span data-value='eti660'>ETI</span>
          <span data-value='fish'>Fish'N'Chips</span>
        </div>
        <div class='preview-container'>
          <canvas id='font-draw' width="290" height="44"></canvas>
        </div>
      </div>

      <div data-panel='options' class='tool-header'>Options</div>
      <div data-panel='options' class='tool-body'>
        <h1>Compatibility</h1>
        <div id='compat-shift'>
          <span><tt>&lt;&lt;=</tt> and <tt>&gt;&gt;=</tt> modify <tt>vx</tt> in place and ignore <tt>vy</tt>.</span>
        </div>
        <div id='compat-load'>
          <span><tt>load</tt> and <tt>store</tt> operations leave <tt>i</tt> unchanged.</span>
        </div>
        <div id='compat-jump0' style='display:none;'>
          <span>4 high bits of target address determines the offset register of <tt>jump0</tt> instead of <tt>v0</tt>.</span>
        </div>
        <div id='compat-logic'>
          <span>clear <tt>vF</tt> after <tt>vx |= vy</tt>, <tt>vx &amp;= vy</tt>, and <tt>vx ^= vy</tt>.</span>
        </div>
        <div id='compat-clip'>
          <span>clip sprites at screen edges instead of wrapping.</span>
        </div>
        <div id='compat-vblank'>
          <span>vblank after drawing sprites.</span>
        </div>
        <h1>Maximum ROM Size (bytes)</h1>
        <div id='max-size'>
          <span data-value='3232'>3232 (VIP)</span>
          <span data-value='3583'>3583 (SCHIP)</span>
          <span data-value='3584'>3584</span>
          <span data-value='65024'>65024</span>
        </div>
        <h1>Compatibility Profile</h1>
        <div id='compatibility-profile'>
          <span data-value='chip8'>VIP</span>
          <span data-value='schip'>SCHIP</span>
          <span data-value='octo'>Octo</span>
          <span data-value='xo'>XO-Chip</span>
        </div>
        <h1>Screen Rotation</h1>
        <div id='screen-rotation'>
          <span data-value='0'>0&deg;</span>
          <span data-value='90'>90&deg;</span>
          <span data-value='180'>180&deg;</span>
          <span data-value='270'>270&deg;</span>
        </div>
        <div class='buttonbar'>
          <div id='key-config-show'>Keyboard Configuration...</div>
          <div id='touch-config-show'>Touch Controls...</div>
        </div>
      </div>

    </div>
  </div>

  <div id='output'>
    <div id='output-header'>
      <span>Compiled Program<span>
      <span id='collapse-out' title='Hide compiler output'>&or;</span>
    </div>
  </div>

  <div id='status'>
    <span id='status-text'></span>
    <span id='expand-out' title='Show compiler output'>&and;</span>
  </div>

  <div class='lightbox' id='decompile-cover'>
    <img src='images/load.gif'/>
  </div>

  <div class='lightbox' id='run-cover'>
    <div id='run-overlay'>
      <div id='run-controls'>
        <img src='images/close.png'    title='close'         id='run-close'   >
        <img src='images/record.png'   title='record gif'    id='run-record'  >
        <img src='images/continue.png' title='continue'      id='run-continue'>
      </div>
      <div id='debugger'></div>
      <div id='monitor'>Monitor goes here.</div>
    </div>
    <div class='spacer'></div>
    <div id='run-container'>
      <canvas id='target' width='640' height='320'></canvas>
    </div>
    <div class='spacer'></div>
  </div>

  <div class='lightbox' id='dragon'>
    <div>Drop cartridges on the window to load and run them.</div>
  </div>

  <div id='cartridge-modal'>
    <div class='lightbox background'></div>
    <div class='lightbox foreground'>
      <div class='modal'>
        <h1>Build a Cartridge: &nbsp;&nbsp;<tt id='cartridge-filename'></tt></h1>
        <p>
          Click on the preview to choose a label image,
          or enter text that should appear on the label.
        </p>
        <p id='cartridge-err'></p>
        <canvas width='320' height='256' id='cartridge-preview'></canvas>
        <input type='file' id='cartridge-image' style='display:none'>
        <div id='cartridge-desc'></div>
        <div class='buttonbar'>
          <div id='cartridge-cancel'>Cancel</div>
          <div id='cartridge-save'>Save</div>
        </div>
      </div>
    </div>
  </div>

  <div id='html-modal'>
    <div class='lightbox background'></div>
    <div class='lightbox foreground'>
      <div class='modal'>
        <h1>Save Standalone HTML</h1>
        <p>
          Export your program and the Octo runtime as a single
          standalone HTML file suitable for hosting on your own website.
        </p>
        <h2>Display Scaling</h2>
        <div id='html-scale'>
          <span data-value='1'>1x</span>
          <span data-value='2'>2x</span>
          <span data-value='4'>4x</span>
          <span data-value='6'>6x</span>
        </div>
        <h2>Touch Input Mode</h2>
        <div id='html-input-mode'>
          <span data-value='none'     >None      </span>
          <span data-value='swipe'    >Swipe     </span>
          <span data-value='seg16'    >Seg16     </span>
          <span data-value='seg16fill'>Seg16 Fill</span>
          <span data-value='gamepad'  >Gamepad   </span>
          <span data-value='vip'      >VIP Keypad</span>
        </div>
        <div id='key-config-standalone'>
          <span>Embed local keyboard mapping.</span>
        </div>
        <div class='buttonbar'>
          <div id='html-cancel'>Cancel</div>
          <div id='html-save'>Save</div>
        </div>
      </div>
    </div>
  </div>

  <div id='key-config-modal'>
    <div class='lightbox background'></div>
    <div class='lightbox foreground'>
      <div class='modal'>
        <h1>Keyboard Configuration</h1>
        <p>
          Click on a button and then press any keyboard key to create a new mapping.
          Multiple keyboard keys may be bound to a given hex pad "button".
        </p>
        <table>
          <tr>
            <td><div class='button' data-key='1'>1</div><input data-key='1'></td>
            <td><div class='button' data-key='2'>2</div><input data-key='2'></td>
            <td><div class='button' data-key='3'>3</div><input data-key='3'></td>
            <td><div class='button' data-key='C'>C</div><input data-key='C'></td>
          </tr>
          <tr>
            <td><div class='button' data-key='4'>4</div><input data-key='4'></td>
            <td><div class='button' data-key='5'>5</div><input data-key='5'></td>
            <td><div class='button' data-key='6'>6</div><input data-key='6'></td>
            <td><div class='button' data-key='D'>D</div><input data-key='D'></td>
          </tr>
          <tr>
            <td><div class='button' data-key='7'>7</div><input data-key='7'></td>
            <td><div class='button' data-key='8'>8</div><input data-key='8'></td>
            <td><div class='button' data-key='9'>9</div><input data-key='9'></td>
            <td><div class='button' data-key='E'>E</div><input data-key='E'></td>
          </tr>
          <tr>
            <td><div class='button' data-key='A'>A</div><input data-key='A'></td>
            <td><div class='button' data-key='0'>0</div><input data-key='0'></td>
            <td><div class='button' data-key='B'>B</div><input data-key='B'></td>
            <td><div class='button' data-key='F'>F</div><input data-key='F'></td>
          </tr>
        </table>
        <div id='vim-mode'>
          <span>Use Vim keybindings for Octo's text editor. (Refresh the page to reflect changes.)</span>
        </div>
        <div class='buttonbar'>
          <div id='key-config-done'>Done</div>
        </div>
      </div>
    </div>
  </div>

  <div id='touch-config-modal'>
    <div class='lightbox background'></div>
    <div class='lightbox foreground'>
      <div class='modal'>
        <h1>Touch Input Configuration</h1>
        <p>
          Octo offers several strategies for converting touch input into VIP keypad input,
          allowing existing programs to be used on mobile devices and tablets.
          These input methods will only become active if a user touches the Octo screen.
          Choose a mode for details on how each one works.
        </p>
        <div id='touch-input-mode'>
          <span data-value='none'     >None      </span>
          <span data-value='swipe'    >Swipe     </span>
          <span data-value='seg16'    >Seg16     </span>
          <span data-value='seg16fill'>Seg16 Fill</span>
          <span data-value='gamepad'  >Gamepad   </span>
          <span data-value='vip'      >VIP Keypad</span>
        </div>
        <p id='touch-input-desc'></p>
        <div class='buttonbar'>
          <div id='touch-config-done'>Done</div>
        </div>
      </div>
    </div>
  </div>

</body>

<style>
@font-face {
  font-family: 'Poppins';
  src: url('css/poppins-regular-webfont.woff') format('woff');
  font-weight: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('css/poppins-bold-webfont.woff') format('woff');
  font-weight: bold;
}

/* reusable radio bar widget */
.radiobar {
  display: flex;
  flex-direction: row;
  border: 1px solid black;
  border-radius: 5px;
  background: #AAA;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.radiobar>span { flex-grow: 1; text-align: center; padding: 5px; cursor: pointer; }
.radiobar>span:not(:last-child) { border-right: 1px solid black; }
.radiobar>span:hover { background: #888; }
.radiobar>span:active, .radiobar .selected { background: #444; color: white; }

/* reusable horizontal bar of buttons */
.buttonbar { display: flex; flex-direction: row; margin-top: 10px; }
.buttonbar>div, .button {
  flex-grow: 1;
  text-align: center;
  padding: 5px;
  cursor: pointer;
  border: 1px solid black;
  border-radius: 5px;
  background: #AAA;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.buttonbar>div:not(:last-child) { margin-right: 10px; }
.buttonbar>div:hover, .button:hover { background: #888; }
.buttonbar>div:active, .button:active, .buttonbar .selected, .button.selected { background: #444; color: white; }

/* reusable checkbox widget */
.checkbox {
  margin-bottom: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.checkbox .check {
  min-height: 25px;
  min-width: 25px;
  display: inline-block;
  border: 1px solid black;
  border-radius: 5px;
  margin-right: 10px;
  background: #AAA;
}
.checkbox .check:hover { background: #888; }
.checkbox .check.selected { background: #444; color: white; }

/* main styles */
body {
  background: black;
  margin: 0px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: white;
  font-size: 13px;
  font-family: 'Poppins', futura;
  height: 100%;
}
input {
  font-size: 13px;
  font-family: monospace;
  background:#272822;
  color:#f8f8f2;
  padding:5px;
  border: 1px solid black;
}
input::selection { background: rgba(73, 72, 62, .99); }
input:focus { outline: none; }
.invisible { display: none!important; }

#header, #status, #output-header, #toolbox .tool-header {
  height:       30px;
  line-height:  30px;
  padding-left: 20px;
  user-select: none;
  -webkit-user-select: none;
}

#header { display:flex; flex-direction:row; }
#header .spacer { flex-grow:1; background:black!important; cursor:default; }
#header img { padding-top: 5px; cursor: pointer; width:54px; height:18px; margin-right: 20px;}
#header>div { border-left: 1px solid #222; cursor:pointer; padding: 0px 30px 0px 30px; }
#header>div:hover { background: #888; }
#header>div:active, #header>.selected { background:#444; }
#header .menu { padding: 0; }
#header .menu .head { padding: 0px 30px 0px 30px; }

.menu ul {
  visibility: hidden;
  position: relative;
  left: 0;
  top: 0;
  z-index: 1000;
  background: black;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  border-radius: 0px 0px 5px 5px;
  overflow: hidden;
}
.menu:hover { background: #222!important; }
.menu:hover > ul,
.menu ul:hover { visibility: visible; }
.menu li { padding: 0px 30px 0px 30px; }
.menu li:hover { background: #888; }
.menu li:active, .menu li.selected { background: #444; }
#main-examples ul { font-family: monospace; }

#main { flex-grow: 1; display: flex; flex-direction: row; }
#main #editor .CodeMirror { flex-grow: 1; }
#main #editor .CodeMirror-gutters { padding-right: 10px; }
#editor { flex-grow: 1; display: flex; flex-direction: column; width: 100px; }
#editor .breakpoints { width: 10px; }
#editor .breakpoint  { color: #f92672; margin-left: 5px; }

#manual { width:450px; display:flex; flex-direction:column; display:none; }
#manual iframe { flex-grow: 1; border: none; }

#toolbox { width:450px; display:flex; flex-direction:column; display:none; }
#toolbox .tool-header { flex-grow: 0; border-top: 1px solid #222; cursor: pointer; }
#toolbox .tool-header:hover { background:#202020; }
#toolbox .tool-body { background:gray; color:black; padding:0 10px 0 10px; flex-grow:1; display:none; }
#toolbox .tool-body tt { color:#202020; }
#toolbox .tool-body.selected { display:block; }
#toolbox h1 { font-size: 13px; padding-top:10px; padding-bottom:5px; margin:0; }
#toolbox canvas { border:1px solid black; }
#toolbox .CodeMirror { margin-top: 10px; border: 1px solid black; }
.preview-container { display:flex; flex-direction:row; justify-content:center; margin-top:10px; }

#sprite-palette { margin-top: 10px; display: none; }
#sprite-editor .CodeMirror { height: 115px; }
#audio-pattern-editor .CodeMirror { height: 40px; }
#audio-tone-group { display: flex; flex-direction: row; margin-top: 10px; align-items: center; }
#audio-tone-group .pair { margin-right: 15px; }
#audio-tone-group .button { margin-left: 10px; }
#audio-tone-group input { width:60px; height:30px; margin-left:5px; }
#binary-editor        .CodeMirror { height: 100px; }
#binary-filename { width: 100%; }

#color-table {
  background: #AAA;
  border: 1px solid black;
  width: 100%;
  border-collapse: collapse;
}
#color-table input { border: none; width:100px; margin:0px; }
#color-table tr { border-bottom: 1px solid black; height: 20px; }
#color-table td { color: black; font-size: 13px; padding:0px; }
#color-table td:first-child { padding: 0px 5px 0px 10px; }
#color-table td:not(:first-child) { width: 100px; }
#color-table td:not(:last-child) { border-right: 1px solid black; }

#output { display: none; }
#collapse-out, #expand-out { float: right; padding: 0px 20px 0px 20px; cursor: pointer; border-left: 1px solid #222; }
#collapse-out:hover, #expand-out:hover { background:#222; }
#output-header, #status { cursor: pointer; border-top: 1px solid #222; background:black; }
#output .CodeMirror { height: 100px; }

.lightbox {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: black;
  z-index: 100;
  justify-content: center;
}
#decompile-cover img { width: 64px; height: 64px; align-self: center; }

#run-cover { flex-direction: column; }
#run-overlay { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1001; }
#run-controls { margin: 20px; }
#run-controls img { margin-right: 10px; cursor: pointer; }
#run-controls img:active { opacity: 0.5; }
#debugger { font-family: monospace; margin-left: 20px; text-shadow: black 0 0 5px; }
#debugger .debug-context, #debugger .debug-profile { font-family: monospace; color: white; }
#debugger .debug-context tr.current { text-decoration: underline; font-weight: bold; }
#debugger .debug-context td:first-child { width: 50px; }
#debugger .debug-context td:last-child { width: 60%; }
#debugger .debug-profile { border-collapse: collapse; }
#debugger .debug-profile tr:hover { background: gray; }
#debugger .debug-profile th { border-bottom: 1px solid white; min-width: 80px; }
#debugger .debug-profile th:not(:first-child),
#debugger .debug-profile td:not(:first-child) { border-left: 1px solid white; padding:4px; }
#debugger .debug-profile-results { position: fixed; bottom: 20px; }
#debugger .debug-profile-full {
  font-size:10px;
  font-family:monospace;
  background:#272822;
  color:#f8f8f2;
  padding:5px;
  border:1px solid white;
  width: 80%;
  height: 100px;
  overflow-y: scroll;
  margin-top: 10px;
}
.debug-lint-message { font-family:'Poppins'; }
.debug-lint-message tt { color:orange; }

#run-container { display: flex; flex-direction: row; justify-content: center;}
#run-container canvas { z-index: 1000; }

#monitor { font-family: monospace; text-shadow: black 0 0 5px; display:none; position:fixed; right:10px;top:10px; max-width:420px; }
#monitor>table { border-collapse: collapse; }
#monitor tr:hover { background: gray; }
#monitor th { border-bottom: 1px solid white; min-width: 80px; }
#monitor th:not(:first-child),
#monitor td:not(:first-child) { border-left: 1px solid white; padding:4px; }

#dragon { flex-direction: column; opacity:0.5; }
#dragon>div { text-align:center; font-size: 30px; }

#cartridge-modal { color:black; display:none; }
#cartridge-modal h1 { font-size: 13px; margin:0; }
#cartridge-modal #cartridge-desc { margin-top: 10px; }
#cartridge-modal #cartridge-desc .CodeMirror { height: 100px; }
#cartridge-modal p { width: 320px; }
#cartridge-modal #cartridge-err { color:darkred; }
#cartridge-modal>.lightbox { display:flex; }
#cartridge-modal>.lightbox.background { opacity:0.5; }
#cartridge-modal>.lightbox.foreground { background:rgba(0,0,0,0); align-items:center; }
#cartridge-modal .modal { background:gray; border-radius:5px; padding:15px; image-rendering: pixelated; }
#cartridge-modal #cartridge-preview { border:8px solid black; cursor:pointer; }

#html-modal { color:black; display:none; }
#html-modal h1 { font-size: 13px; margin:0; }
#html-modal h2 { font-size: 13px; margin:0; margin-top:10px; }
#html-modal p { width: 500px; }
#html-modal>.lightbox { display:flex; }
#html-modal>.lightbox.background { opacity:0.5; }
#html-modal>.lightbox.foreground { background:rgba(0,0,0,0); align-items:center; }
#html-modal .modal { background:gray; border-radius:5px; padding:15px; image-rendering: pixelated; }
#html-modal #key-config-standalone { margin-top: 20px; }
#html-modal .buttonbar { margin-top:20px; }

#key-config-modal { color:black; display:none; }
#key-config-modal h1 { font-size: 13px; margin:0; }
#key-config-modal p { width: 500px; }
#key-config-modal>.lightbox { display:flex; }
#key-config-modal>.lightbox.background { opacity:0.5; }
#key-config-modal>.lightbox.foreground { background:rgba(0,0,0,0); align-items:center; }
#key-config-modal .modal { background:gray; border-radius:5px; padding:15px; image-rendering: pixelated; }
#key-config-modal table .button { width:30px; display:inline-block; }
#key-config-modal table input { width:150px; display:inline-block; margin-left:5px; }
#vim-mode { margin-top:20px; }

#touch-config-modal { color:black; display:none; }
#touch-config-modal h1 { font-size: 13px; margin:0; }
#touch-config-modal p { width: 500px; }
#touch-config-modal>.lightbox { display:flex; }
#touch-config-modal>.lightbox.background { opacity:0.5; }
#touch-config-modal>.lightbox.foreground { background:rgba(0,0,0,0); align-items:center; }
#touch-config-modal .modal { background:gray; border-radius:5px; padding:15px; image-rendering: pixelated; }
#touch-config-modal #touch-input-desc { min-height:100px; }

</style>

<script src='js/debugger.js'></script>
<script src='js/recording.js'></script>
<script src='js/tool-sprite.js'></script>
<script src='js/tool-audio.js'></script>
<script src='js/tool-binary.js'></script>
<script src='js/tool-color.js'></script>
<script src='js/tool-options.js'></script>
<script>

/**
* Main UI:
**/

const inVimMode = getPref('octoVimMode')
const editor = CodeMirror(document.getElementById('editor'), {
  mode:           'octo',
  theme:          'monokai',
  lineNumbers:    true,
  smartIndent:    false,
  tabSize:        2,
  indentWithTabs: true,
  dragDrop:       false,
  value:          'loading...',
  gutters:        ['breakpoints', 'CodeMirror-linenumbers'],
  extraKeys: {
    'Shift-Enter': _ => document.getElementById('main-run').click(),
  },
  viewportMargin: inVimMode?10:Infinity,
  keyMap:         inVimMode?'vim':'default',
})
editor.on('change', _ => saveLocalProgram())
editor.on('gutterClick', function(cm, n) {
  function makeMarker() {
    const marker = document.createElement('div')
    marker.classList.add('breakpoint')
    marker.dataset.line = n
    marker.innerHTML = '●'
    return marker
  }
  const info = cm.lineInfo(n)
  cm.setGutterMarker(n, 'breakpoints', info.gutterMarkers ? null : makeMarker())
})

function getVisualBreakpoints(debuginfo) {
  const r = {}
  document.querySelectorAll('#editor .breakpoint').forEach(x => {
    const line = +(x.dataset.line)
    const addr = debuginfo.getAddr(line)
    if (addr) { r[addr] = 'source line ' + (line+1) }
  })
  return r
}

const expandOut   = document.getElementById('expand-out')
const outputPanel = document.getElementById('output')
const output      = textBox(document.getElementById('output'), true, 'no output')
const statusBar   = document.getElementById('status')
const statusText  = document.getElementById('status-text')

function toggleOutput() {
  const v = outputPanel.style.display == 'block'
  setVisible(outputPanel, !v)
  setVisible(expandOut, v)
  output.refresh()
}
document.getElementById('output-header').onclick = toggleOutput
document.getElementById('status'       ).onclick = toggleOutput

function setStatusMessage(message, ok) {
  statusBar.style.backgroundColor = ok ? 'black' : 'darkred'
  statusText.innerHTML = message
}

function accordion(initial) {
  var current = null
  function open(panel) {
    current = panel
    document.querySelectorAll('.tool-body').forEach(x => {
      x.classList.toggle('selected', x.dataset.panel == panel)
    })
    const tools = {
      sprite:  updateSpriteEditor,
      audio:   updateAudio,
      binary:  updateBinary,
      color:   updateColor,
      options: updateOptions,
    }
    tools[panel]()
  }
  document.querySelectorAll('.tool-header').forEach(x => x.onclick = _ => open(x.dataset.panel))
  open(initial)
  return { setValue: open, update: _ => open(current) }
}
const toolboxAccordion = accordion('sprite')

const mainInput   = document.getElementById('maininput')
const manual      = document.getElementById('manual')
const toolbox     = document.getElementById('toolbox')
const showToolbox = document.getElementById('show-toolbox')
const showManual  = document.getElementById('show-manual')
const speedMenu   = menuChooser(document.getElementById('main-speed'), emulator.tickrate, x => {
  emulator.tickrate = +x
  saveLocalOptions()
})

document.getElementById('main-run').onclick = _ => runRom(compile())
document.getElementById('main-open').onclick = _ => mainInput.click()
document.getElementById('main-save').onclick = _ => share()

const dragon = document.getElementById('dragon')
document.body.ondragover = _ => setVisible(dragon, true, 'flex')
dragon.ondragleave       = _ => setVisible(dragon, false)
dragon.ondragover        = _ => event.preventDefault()
dragon.ondrop = event => {
  setVisible(dragon, false)
  event.preventDefault()
  if (event.dataTransfer.items && event.dataTransfer.items[0].kind === 'file') {
    openFile(event.dataTransfer.items[0].getAsFile(), true)
  }
}

function openFile(file, runCart) {
  const reader = new FileReader()
  if (file.type == 'image/gif') {
    reader.onload = _ => {
      try {
        const payload = parseCartridge(new Uint8Array(reader.result))
        if (runCart) runPayload (payload.options, payload.program)
        else         openPayload(payload.options, payload.program)
      }
      catch(error) {
        setStatusMessage('Unable to read cartridge.')
        console.log(error)
      }
    }
    reader.readAsArrayBuffer(file)
  }
  else if (file.type == 'text/html') {
    reader.onload = _ => {
      try {
        const payload = parseStandalone(reader.result)
        openPayload(payload.options, payload.program)
      }
      catch(error) {
        setStatusMessage('Unable to unpack standalone HTML project.')
        console.log(error)
      }
    }
    reader.readAsText(file)
  }
  else if (file.name.split(".").slice(-1)[0].toLowerCase() in {ch8:1,sc8:1,xo8:1}) {
    reader.onload = _ => {
      const bytes = new Uint8Array(reader.result)
      let dump = ''
      for(let z=0;z<bytes.length;z++) dump += hexFormat(bytes[z]) + ((z%16==15)?'\n\t':' ')
      editor.setValue(`: main\n\t${dump}`)
      setStatusMessage(`Imported binary file '${file.name}'.`,true);
    }
    reader.readAsArrayBuffer(file)
  }
  else {
    reader.onload = _ => editor.setValue(reader.result)
    reader.readAsText(file)
  }
}

mainInput.onchange = _ => openFile(mainInput.files[0], false)
showToolbox.onclick = _ => {
  showToolbox.classList.toggle('selected')
  setVisible(toolbox, showToolbox.classList.contains('selected'), 'flex')
  toolboxAccordion.update()
}
showManual.onclick = _ => {
  showManual.classList.toggle('selected')
  setVisible(manual, showManual.classList.contains('selected'), 'flex')
}

/**
* Run mode:
**/

document.getElementById('run-close'   ).onclick = _ => stopRom()
document.getElementById('run-continue').onclick = _ => clearBreakpoint()

window.onload = loadExamples

window.onkeydown = event => {
  if (emulator.halted) return
  if (!(event.key in emulator.keys)) {
    emulator.keys[event.key] = true
  }
  audioEnable()
  event.preventDefault()
}

window.onkeyup = event => {
  if (emulator.halted) return
  if (event.key in emulator.keys) {
    delete emulator.keys[event.key]
  }
  const kindex = keymapInverse[event.key]
  const resume = function(){if(emulator.waiting){emulator.waiting=false; emulator.v[emulator.waitReg]=kindex||0;}}
  if (kindex != undefined) { resume() }
  if (event.key == '`') { stopRom() }
  if (event.key == 'i') {
    emulator.breakpoint ? clearBreakpoint() : haltBreakpoint('user interrupt');
  }
  if (event.key == 'p') { haltProfiler('profiler') }
  if (event.key == 'm') { monitoring = !monitoring; setVisible(document.getElementById('monitor'),monitoring) }
  if (emulator.breakpoint) {
    if (event.key == 'o') { resume(); emulator.dt = emulator.st = 0; emulator.tick(); renderDisplay(emulator); haltBreakpoint('single step')}
    if (event.key == 'u') { resume(); const l = emulator.r.length; if (l>0) { emulator.stack_breakpoint = l-1; clearBreakpoint() } } // step out
    if (event.key == 'l') {
      resume()
      if ((emulator.m[emulator.pc] & 0xF0) == 0x20) { const l = emulator.r.length; if (l >= 0) { emulator.stack_breakpoint = l; clearBreakpoint(); } }
      else { emulator.tick(); renderDisplay(emulator); haltBreakpoint('stepping over') }
    }
  }
  event.preventDefault()
}

injectAdaptiveControls(
  emulator.touchInputMode,
  document.getElementById('target'),
  window.onkeyup,
  window.onkeydown
)

/**
* Central Dogma:
**/

function compile() {
  const c = new Compiler(editor.getValue())
  try {
    output.setValue('no output')
    c.go()
    writeBytes(output, null, c.rom)
    const maxRom = emulator.maxSize
    if (c.rom.length > maxRom) {
      throw 'Rom is too large- ' + (c.rom.length-maxRom) + ' bytes over!'
    }
    setStatusMessage(
      (c.rom.length + ' bytes, ' + (maxRom-c.rom.length) + ' free.') +
      (c.schip ? ' (SuperChip instructions used)' : '') +
      (c.xo    ? ' (XO-Chip instructions used)'   : ''),
      true
    )
  }
  catch (error) {
    if (c.pos != null) {
      var line = 1, ch = 0, text = editor.getValue()
      for(var x = 0; x < c.pos[1]-1; x++) {
        if (text[x] == '\n') { line++; ch = 0 }
        else { ch++ }
      }
      error = 'line '+line+': '+error
      editor.setSelection(
        {line:line-1, ch:ch},
        {line:line-1, ch:ch + (c.pos[2]-1-x)},
      )
    }
    setStatusMessage(error, false)
    return null
  }
  const visualBreakpoints = getVisualBreakpoints(c.dbginfo)
  for (var k in visualBreakpoints) { c.breakpoints[k] = visualBreakpoints[k] }
  return {
    rom:         c.rom,
    breakpoints: c.breakpoints,
    monitors:    c.monitors,
    dbginfo:     c.dbginfo,
    aliases:     c.aliases,
    labels:      c.dict,
  }
}

const runCover = document.getElementById('run-cover')
var intervalHandle = null

function runRom(rom) {
  if (rom === null) return
  if (intervalHandle != null) stopRom()
  emulator.exitVector = stopRom
  emulator.importFlags = _ => getPref('octoFlagRegisters')
  emulator.exportFlags = f => setPref('octoFlagRegisters',f)
  try { localStorage.getItem('octoFlagRegisters') }
  catch(e) {
    console.warn("Persistent flag register storage is unavailable! Flag registers will not be saved across sessions.")
    emulator.importFlags = _ => emulator.flags
    emulator.exportFlags = f => emulator.flags = f
  }
  emulator.init(rom)
  audioSetup(emulator)
  clearBreakpoint()
  setVisible(runCover, true, 'flex')
  updateMonitor()
  resetLinter()
  runCover.style.backgroundColor = emulator.quietColor
  setRenderTarget(5, 'target')

  var frameTime = 1000/60;
  var last = Date.now(), diff, origin = last+frameTime/2;
  var stepFrame = _ => {
    diff = (Date.now() - last); last += diff;
    for(var k = 0; origin < last - frameTime && k < 2; origin += frameTime, k++){
      for(var z = 0; (z < emulator.tickrate) && (!emulator.waiting); z++) {
        if (!emulator.breakpoint) {
          if (emulator.vBlankQuirks && ((emulator.m[emulator.pc] & 0xF0) == 0xD0)) { z = emulator.tickrate }
          if (emulator.linted) lint()
          emulator.tick()
          if (emulator.pc in emulator.metadata.breakpoints) { haltBreakpoint(emulator.metadata.breakpoints[emulator.pc]) }
          if (emulator.r.length == emulator.stack_breakpoint) { emulator.stack_breakpoint = -1; haltBreakpoint('step out') }
        }
      }
      if (!emulator.breakpoint) {
        emulator.dt -= emulator.dt > 0
        emulator.st -= emulator.st > 0
      }else{
        if(emulator.st>0){
          emulator.buzzTimer(emulator.st=0);
        }
      }
      recordFrame()
      XOAudio.refresh(frameTime/1000);
    }
    renderDisplay(emulator)
    if (monitoring && !emulator.halted && !emulator.breakpoint) updateMonitor()
    if (emulator.halted) return
    runCover.style.backgroundColor = (emulator.st > 0) ? emulator.buzzColor : emulator.quietColor
  }
  intervalHandle = setInterval(stepFrame,frameTime);
}

function stopRom() {
  emulator.halted = true
  setVisible(runCover, false)
  window.clearInterval(intervalHandle)
  intervalHandle = null
  clearBreakpoint()
  stopAudio()
}

</script>
</html>