<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- saved from url=(0055)https://floooh.github.io/sokol-html5/triangle-sapp.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>AI RPG</title>
<style type="text/css">
body {
    margin: 0;
    background-color: black;
}
.game-title {
    pointer-events: none;
    position: absolute;
    bottom: 10px;
    margin-top: 0px;
    padding-left: 10px;
    color: white;
    text-decoration: none;
    z-index: 1;
    text-align: left;
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 30px;
}
.game-menu-item {
    pointer-events: auto;
    font-size: 18px;
    padding-left: 10px;
    font-family: Arial, Helvetica, sans-serif;
}
.game-menu-link {
    text-decoration: none;
    color: white;
}
.game {
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0px;
    border: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: block;
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
}
.inputdiv {
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0px;
    border: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: none; /* set to flex by javascript */
    justify-content: center;
    align-items: center;

    z-index: 10;
    background: #00000090;
}
#inputtext {
    position: absolute;
    top: 0;
    left: 0;

    background: none;
    width: 90%;
    height: 50%;
    margin-left: 5%;
    margin-right: 5%;
    border-top-style: hidden;
    border-right-style: hidden;
    border-left-style: hidden;
    border-bottom-style: hidden;
    transform: translateY(100%);
    text-align: center;
    font-size: 2em;
    font-family: Arial;
    color: white;
}

#inputtext:focus {
 outline: none;
}

#inputbutton {
 bottom: 0;
 margin-bottom: 10%;
 position: absolute;
 font-family: Arial;
 font-size: 3em;
}

</style>
<link id="sokol-app-favicon" rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAZdJREFUOE9VUzFSw0AMlGihggekwhV0eQGZ8AQggQ4chlR5CjSeAUwHOHkCZPALoEuVVHkAdCnxMVpJd8YzHt/5pNXuSsdkDxNRkHfSC8REIZB88ASSXxrBdzU+tiVmBHs6UQMAiwgK6kCy4NsPACBPcfQ4VPtSSLdSfbjEmg0kVBkKMQ7lfIXKAoTnt8okPVbjwUqCJR//mtdMpaEa09ZwCZyopfk5g5Doye7UTz0JuUovfti0EIXvAbS7ebw3BaFIwaQAAwAqxzwAUTBYrE8AokG2AIpmHnZmzkG9aLHGcrE+1VoC14a3Nh90ZsKLOSTP/2OYc9pZxReq5Vce5UnqVfdJDlIXEklzOhkFpeXnJQQ7aN4tZcCsi0w0ehtrgMm/7xemAJ2n6/mNdtBseegXykCtJsrfx0ZC3RWA9hCO5uM0r4Ho8bjwgYwWIODoZYPZj8326UCpQPXFjsnAPEvtdA9k2XvegCV6ZZeq3av6fBvUvYZKsBbZiQI4tG0kQzW6kzrE1qfW/cWk+i1w14WuGxgvBOD+AP0MuCLRb/uuAAAAAElFTkSuQmCC"></head>
<body style="background:black">
 <div id="inputdiv" class="inputdiv">
  <textarea onkeyup='on_textarea_key(event);' id="inputtext">
  </textarea>
  <button id="inputbutton" onclick="end_dialog()"> Submit </button>
 </div>
  <canvas class="game" id="canvas" oncontextmenu="event.preventDefault()" width="1504" height="864"></canvas>


  <script type="text/javascript">
    var Module = {
        preRun: [],
        postRun: [],
        print: (function() {
            return function(text) {
                text = Array.prototype.slice.call(arguments).join(' ');
                console.log(text);
            };
        })(),
        printErr: function(text) {
            text = Array.prototype.slice.call(arguments).join(' ');
            console.error(text);
        },
        canvas: (function() {
            var canvas = document.getElementById('canvas');
            canvas.addEventListener("webglcontextlost", function(e) { alert('FIXME: WebGL context lost, please reload the page'); e.preventDefault(); }, false);
            return canvas;
        })(),
        setStatus: function(text) { },
        monitorRunDependencies: function(left) { },
    };
    window.onerror = function(event) {
        console.log("onerror: " + event.message);
    };
  </script>
  <script type="text/javascript">

      function start_dialog() {
          document.getElementById("inputtext").value = "";
          setTimeout(function(){document.getElementById("inputtext").focus();},200); // for some reason focus doesn't work immediately here
          document.getElementById("inputdiv").style.display = "flex";
      }
function end_dialog() {
    document.getElementById("inputdiv").style.display = "none";
    Module.ccall('end_text_input', 'void', ['string'], [document.getElementById("inputtext").value]);
}

function on_textarea_key(event) {
    let final_textarea_string = "";
    let cur_textarea_string = document.getElementById("inputtext").value;
    let should_end = false;
    for(let i = 0; i < Math.min(cur_textarea_string.length, 250); i++)
    {
        let cur = cur_textarea_string[i];
        if(cur === "\n") {
         should_end = true;
         continue;
        }
        if(cur.charCodeAt(0) >= 255) continue; // non ascii gtfo
        final_textarea_string += cur_textarea_string[i];
    }
    document.getElementById("inputtext").value = final_textarea_string;
    if(should_end) end_dialog();
    if(event.key === "Enter") end_dialog();
    if(event.key === "Escape")
    {
        document.getElementById("inputtext").value = "";
        end_dialog();
    }
}

const max_retries = 5;
let cur_id = 1; // zero is not a valid id, the zero value means no async request currently active
let generation_requests = []; // array of dictionaries with structure:
/*
   { id: number,
   request: XMLHTTPRequest,
   request_info: { url: string, body: string }
   retries_remaining: number, // on failure, retries over and over until out of retries
   }
 */

function resend_request(r) {
    r.request.open("POST", r.request_info.url, true);
    r.request.send(r.request_info.body);
}

// Returns an integer, a "handle" into the generation request. Takes in the string prompt, and api URL
// the api url must start with `http://` or https.
function make_generation_request(p, api) {
    cur_id += 1;
    let to_push = {
        "id": cur_id,
        "request": new XMLHttpRequest(),
        "retries_remaining": 5,
        "request_info": {"url": api, "body": p}
    }
    console.log("Making generation request with id " + to_push.id);
    generation_requests.push(to_push)
    resend_request(to_push)
    return cur_id;
}

// returns 0 if not done yet, 1 if succeeded, 2 if failed after too many retries (i.e server down, or no internet)
// -1 if it doesn't exist
function get_generation_request_status(id) {
    for(let i = 0; i < generation_requests.length; i++) {
        if(generation_requests[i].id == id) {
            let http_status = generation_requests[i].request.status;
            if(http_status == 200) {
                return 1;
            }
            else if(http_status == 0) { // not done yet
                return 0;
            }
            else { // errored
                if(generation_requests[i].retries_remaining > 0) {
                    generation_requests[i].retries_remaining -= 1;
                    resend_request(generation_requests[i]);
                    return 0;
                } else {
                    return 2; // too many retries, failed
                }
            }
        }
    }
    return -1;
}

function done_with_generation_request(id) {
    console.log("Removing request with id " + id);
    let new_generation_requests = [];
    for(let i = 0; i < generation_requests.length; i++) {
        if(generation_requests[i].id == id)
        {
        } else {
            new_generation_requests.push(generation_requests[i])
        }
    }
    generation_requests = new_generation_requests;
}

// doesn't fill string if not done yet, or the id doesn't exist
function get_generation_request_content(id) {
    let to_return = "";
    for(let i = 0; i < generation_requests.length; i++) {
        if(generation_requests[i].id == id) {
            to_return = generation_requests[i].request.responseText;
            break;
        }
    }
    return to_return;;
}
  </script>
  {{{ SCRIPT }}}

</body></html>