<DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Eryx Playground</title>
        <meta name="description" content="Online playground for the Eryx programming language">
        <meta property="og:title" content="Eryx Playground">
        <meta property="og:description" content="Online playground for the Eryx programming language">
        <meta property="og:type" content="website">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="static/style.css">
    </head>
    <body>
        <div class="container">
            <div class="header">Eryx v{{ version }} Playground</div>
            <div id="help-button" class="help-button">?</div>
            <div id="help-modal" class="help-modal" style="display: none;">
                <h2>Eryx Playground</h2>
                <p>
                    Eryx is a decently fast simple dynamically typed programming language similar to javascript/python.
                </p>
                <h3>Basic Data Types</h3>
                <ul>
                    <li>Integer</li>
                    <li>Float</li>
                    <li>String</li>
                    <li>Boolean</li>
                    <li>Array</li>
                    <li>Dictionary</li>
                    <li>Function</li>
                    <li>Null</li>
                </ul>
                <h3>Functions</h3>
                <ul>
                    <li>Function Definition</li>
                    <li>Function Call</li>
                    <li>Return Keyword</li>
                </ul>
                <h3>Operators</h3>
                <ul>
                    <li>Arithmetic Operators</li>
                    <li>Assignment Operators</li>
                    <li>Comparison Operators</li>
                </ul>
                <h3>Control Structures</h3>
                <ul>
                    <li>If/Else Statements</li>
                <ul>
                <h3>Comments</h3>
                <ul>
                    <li>Single Line Comments</li>
                </ul>
                <h3>Example</h3>
                <pre>
const timenow = time();

func add (x, y) {
    let result = x + y;

    func sub(a, b) {
        return a - b;
    }

    let result2 = sub(y, x);

    let obj2 = {
        x,
        y
    };

    let five;
    five = 10 - 5;
    const neg_num = -1000;
    let flt = 69.420;
    const string = "Strings work!!!!";

    let obj = {
        five,
        neg_num,
        flt,
        result2,
        timenow,
        result,
        object: obj2,
        string,
        arr: [1, 2, 3, 4, 5]
    };

    return obj;
}

print(add(5, 7))

func makeAdder(offset) {
    func add(x, y) {
        return x + y + offset;
    }

    return add;
}

let adder = makeAdder(10);
print(adder(10, 5))
                </pre>
            </div>

            <div class="ide">
                <div class="dropdown">
                    <select id="mode-select">
                        <option value="run">Run</option>
                        <option value="result">Result</option>
                        <option value="tokenize">Tokenize</option>
                        <option value="ast">AST</option>
                    </select>
                    <div>
                        <input class="checkbox" type="checkbox" id="memory-enabled"> &nbsp;Keep Memory</input>
                    </div>
                    <button class="button" id="clear-memory">Clear Memory</button>
                    <button class="button" id="clear-console">Clear Output</button>
                    <button class="button" id="execute-button">Execute</button>
                </div>

                <div class="editor">
                    <textarea class="code" id="code-area"></textarea>
                </div>
            </div>

            <div class="repl">
                <div class="output" id="repl-output"></div>
            </div>
        <script src="static/main.js"></script>
    </body>
</html>
