@page "/Concat"
<PageTitle>Concatenator</PageTitle>
<script type="module" src="@Assets["Components/Pages/Concat.razor.js"]"></script>
<main>
    <p>A "concatenative language"</p>
    <form id="form">
        <textarea id="input" placeholder="1 2 +" rows="5"></textarea>
        <input type="submit" value="Run program">
        <label for="instant">
            Run instantly
            <input type="checkbox" id="instant">
        </label>
    </form>
    <Log/>

    <Panel Legend="Predefined operations">
        <StackOps/>

        <StackOp Name="if ... then"
                 Description="Drops the top value on the stack and tests it. If it is false, or 0, the program skips ahead past the matching 'then', otherwise the words in between are run. The 'then' itself is removed either way: it only marks the end of the branch, it never runs.">
            <StackStep Stack="[1, 2, 3]" Program="if dup then drop"/>
            <StackStep Stack="[2, 3]" Program="dup drop"/>
            <StackStep Stack="[2, 2, 3]" Program="drop"/>
            <StackStep Stack="[2, 3]"/>
            <p>Or</p>
            <StackStep Stack="[0, 2, 3]" Program="if dup then drop"/>
            <StackStep Stack="[2, 3]" Program="drop"/>
            <StackStep Stack="[3]"/>
        </StackOp>

        <StackOp Name="= <> < > <= >="
                 Description="Compares the top two values and leaves a flag in their place, true or false, which 'if' can take straight off the stack. They read in the order they are written, so '2 3 <' asks whether 2 is below 3.">
            <StackStep Stack="[]" Program="2 3 < if 10 then"/>
            <StackStep Stack="[2]" Program="3 < if 10 then"/>
            <StackStep Stack="[3, 2]" Program="< if 10 then"/>
            <StackStep Stack="[true]" Program="if 10 then"/>
            <StackStep Stack="[]" Program="10"/>
            <StackStep Stack="[10] <=="/>
        </StackOp>

        <StackOp Name="true false" Description="Puts a flag on the stack, the same one a comparison leaves behind.">
            <StackStep Stack="[3]" Program="true"/>
            <StackStep Stack="[true, 3]"/>
        </StackOp>

        <StackOp Name="and" Description="True only if both flags on top of the stack are true.">
            <StackStep Stack="[true, false]" Program="and"/>
            <StackStep Stack="[false]"/>
        </StackOp>

        <StackOp Name="or" Description="True if either of the two flags on top of the stack is true.">
            <StackStep Stack="[true, false]" Program="or"/>
            <StackStep Stack="[true]"/>
        </StackOp>

        <StackOp Name="invert" Description="Turns the flag on top of the stack into its opposite.">
            <StackStep Stack="[false]" Program="invert"/>
            <StackStep Stack="[true]"/>
        </StackOp>

        <StackOp Name=": word ... ;" Description="Creates a new definition.">
            <p>
                Example: ": double 2 * ;" defines a new word called double. Any subsequent mention of double will
                replace the word with its definition.
            </p>
            <StackStep Stack="[]" Program=": double 2 * ; 3 double"/>
            <StackStep Stack="[]" Program="3 double"/>
            <StackStep Stack="[3]" Program="double"/>
            <StackStep Stack="[3]" Program="2 *"/>
            <StackStep Stack="[2, 3]" Program="*"/>
            <StackStep Stack="[6] <=="/>
        </StackOp>

        <StackOp Name=",,"
                 Description="Unquotes the string on top of the stack: its words are put back in front of the program and run as if they had been written there.">
            <StackStep Stack="[5]" Program="&quot; 2 * &quot; ,,"/>
            <StackStep Stack="[ 2 * , 5]" Program=",,"/>
            <StackStep Stack="[5]" Program="2 *"/>
            <StackStep Stack="[2, 5]" Program="*"/>
            <StackStep Stack="[10] <=="/>
        </StackOp>
    </Panel>

    <Panel Legend="Example programs">
        <details>
            <summary>Fahrenheit to Celsius</summary>
            <NavLink href="/concat?in=FwAgZgfAxisMwCYQFoQFYQCoQE4QHoQBuAKAQEYlIog">
                Replace program
            </NavLink>
            <pre>
                : f>c   32 - 5 * 9 / ;
                212 f>c
            </pre>
        </details>

        <details>
            <summary>Countdown</summary>
            <NavLink
                href="/concat?in=FwAgxg9grgdgLgEwgdxidCoAcQEsBmIAjCALTjTxKohwAWApmgNwBQArBbIijEA">
                Replace program
            </NavLink>
            <p>A word that calls itself is the only loop there is, and 'if' is what stops it.</p>
            <pre>
                : countdown   dup if 1 - countdown then ;
                5 countdown
            </pre>
        </details>

        <details>
            <summary>Factorial</summary>
            <NavLink
                href="/concat?in=FwAghCkCYK4A4gIwgHwgJYDMSwcgtOCAFQgAuAFgKYB2IA3AFADs4QA">
                Replace program
            </NavLink>
            <pre>
                : !   dup 1 > if dup 1 - ! * then ;
                7 !
            </pre>
        </details>

        <details>
            <summary>Fibonacci</summary>
            <NavLink
                href="/concat?in=FwAgZglgRisCYFcAOICMIB8IJhIl6AtONCAM4DuAhigEwjGQwDUIALgBYCmAdiANwAoAGwkoQA">
                Replace program
            </NavLink>
            <p>
                Every number in the sequence 0, 1, 1, 2, 3, 5, 8 is the sum of the two before it, so 'fib' calls
                itself twice: once for each of them, with 'swap' digging the original number back out from under the
                first result.
            </p>
            <pre>
                : fib   dup 1 > if dup 1 - fib swap 2 - fib + then ;
                6 fib
            </pre>
        </details>

        <details>
            <summary>Quoting</summary>
            <NavLink
                href="/concat?in=FwAgJg9grgRgNgUxMgRCATCAVCNAaPEAbgChQBHKAQzACcoAHRZcaeJSWZ0gVhEpr0mCIA">
                Replace program
            </NavLink>
            <p>A string is data sitting on the stack until ',,' puts it back into the program, where it is code again.</p>
            <pre>
                : double   " 2 * " ,, ;
                : quadruple   double double ;
                5 quadruple
            </pre>
        </details>
    </Panel>
</main>