index.html

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="mobile-web-app-capable" content="yes">
<style>
  html, body { margin: 0; padding: 0; border: none; }
  
  .editor {
    border-radius: 6px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
    font-family: 'Source Code Pro', monospace;
    font-size: 14px;
    font-weight: 400;
    height: 340px;
    letter-spacing: normal;
    line-height: 20px;
    padding: 10px;
    tab-size: 4;
  }

  .actions {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    color: white;
    font-family: 'Source Code Pro', monospace;
  }

  .actions-buttons {
    display: flex;
    flex-direction: row;
  }

  .actions-buttons > button, .actions-buttons > input::file-selector-button {
    width: 16mm;
    height: 13mm;
  }

  .actions-buttons > input::file-selector-button {
    content: "Open";
  }
  
  .errors_outer {
    position: relative;
    top: 13mm;
  }
  
  .errors {
    position: absolute;
    z-index: 10;
    background-color: rgba(255, 221, 255, 0.9);
    font-family: 'Source Code Pro', monospace;
    font-size: 0.65em;
  }

  .hide {
    display: none;
  }

  .render_container {
    text-align: center;
  }
</style>

<div class="editor"></div>

<div class="actions">
  <div class="actions-buttons">
    <button onclick="save()">Save</button>
    <input type="file" onchange="openFile(event)">
  </div>

  <div class="actions-buttons">
    <button onclick="render3D()">Render</button>
  </div>
</div>

<div class="errors_outer hide">
  <div class="errors"></div>
</div>

<div class="render_container">
  <img alt="" class="hide" id="render" src="" width="100%"/>
</div>

<script type="module">
  import { CodeJar } from 'https://medv.io/codejar/codejar.js';
  import { withLineNumbers } from 'https://medv.io/codejar/linenumbers.js';
  
  var editor = document.querySelector('.editor');
  var rendererContainer = document.querySelector('.render_container');
  var renderer = document.querySelector('#render');
  var errorsOuterEl = document.querySelector('.errors_outer');
  var errorsEl = document.querySelector('.errors');
  
  let jar = CodeJar(
    document.querySelector('.editor'),
    withLineNumbers(function() {}),
    {
      tab: '  '
    }
  );

  jar.updateCode(`let
circle d = let
  r = d / 2;
  in
  make_shape {
    dist[x,y,z,t] = mag[x,y] - r;
    colour [x,y,z,t] = let
      c = mag[x,y] - r;
      in
      [c, c, c];
    bbox = [[-r,-r,0],[r,r,0]];
    is_2d = true;
  };
in
circle 1
  `);

  const anchor = document.createElement('a');
  window.save = async function() {
    const message = editor.innerText;
    
    const encoder = new TextEncoder();
    const data = encoder.encode(message);
    const hashBuffer = await crypto.subtle.digest('SHA-256', data);
    const hashArray = Array.from(new Uint8Array(hashBuffer));
    const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
    
    const blob = new Blob([message], { type: 'text/plain' });
    anchor.download = hashHex + ".curv";
    anchor.href = (window.webkitURL || window.URL).createObjectURL(blob);
    anchor.dataset.downloadurl = ['text/plain', anchor.download, anchor.href].join(':');
    anchor.click();
  };
  
  window.openFile = function(e) {
    var file = e.target.files[0];
    if (!file) { return; }
    var reader = new FileReader();
    reader.addEventListener("load", function() {
      jar.updateCode(reader.result);
    });
    reader.readAsText(file);
  }
  window.render3D = function() {
    const text = editor.innerText;
    errorsOuterEl.classList.add('hide');
    fetch('/render', {
      method: 'POST',
      body: text
    })
    .then((r) => r.ok ? r : Promise.reject(r))
    .then((r) => r.blob())
    .then((b) => {
        const f = new FileReader();
        f.onload = function(e) {
          renderer.src = e.target.result;
          setTimeout(() => onWindowResize());
        };
        f.readAsDataURL(b);
        renderer.classList.remove('hide');
    })
    .catch((r) => {
      r
      .text()
      .then((t) => {
         errorsEl.innerText = t;
         errorsOuterEl.classList.remove('hide');
      });
    });
  }
    

  window.addEventListener('resize', onWindowResize, false);
  
  function onWindowResize() {
    const renderHeight = window.innerHeight - editor.offsetHeight;
    const renderWidth = window.innerWidth;

    errorsEl.style.width = window.innerWidth;
    errorsEl.style.height = `calc(${renderHeight}px - 13mm)`;
  
    rendererContainer.style.width = window.innerWidth + 'px';
    rendererContainer.style.height = `calc(${renderHeight}px - 13mm)`;

    const ratio = rendererContainer.offsetHeight / renderer.naturalHeight;
    renderer.width = (renderer.naturalWidth * ratio);
    renderer.height = (rendererContainer.offsetHeight);

    rendererContainer.style.width = window.innerWidth + 'px';
    rendererContainer.style.height = `calc(${renderHeight}px - 13mm)`;
  }

  onWindowResize();
</script>