HTML/Arithmetic Cipher.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1">
    <title>Arithmetic Cipher — Keep Talking and Nobody Explodes Module</title>
    <link rel="stylesheet" type="text/css" href="css/font.css">
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script src="js/ktane-utils.js"></script>
    <style>
        table {
            margin: 1em auto;
        }
        table.binary-table {
            float: right;
            margin: 0 0 .5cm .5cm;
            clear: both;
        }
            table.binary-table td, table.binary-table th {
                padding: .1em .5em 0 .5em;
            }
        .dark svg text { fill: #DDD; }
        .dark path.black { stroke: #DDD; }
        .page.strip { --strip-color: #EA4973; }
    </style>
</head>
<body>
    <div class="section">
        <div class="page page-bg-01 strip">
            <div class="page-header">
                <span class="page-header-doc-title">Keep Talking and Nobody Explodes Mod</span>
                <span class="page-header-section-title">Arithmetic Cipher</span>
            </div>
            <div class="page-content">
                <img src="img/Component/Arithmetic Cipher.svg" class="diagram">

                <table class='binary-table'>
                    <tr><th>A</th><td>00000</td></tr>
                    <tr><th>B</th><td>00001</td></tr>
                    <tr><th>C</th><td>00010</td></tr>
                    <tr><th>D</th><td>00011</td></tr>
                    <tr><th>E</th><td>00100</td></tr>
                    <tr><th>F</th><td>00101</td></tr>
                    <tr><th>G</th><td>00110</td></tr>
                    <tr><th>H</th><td>00111</td></tr>
                    <tr><th>I</th><td>01000</td></tr>
                    <tr><th>J</th><td>01001</td></tr>
                    <tr><th>K</th><td>01010</td></tr>
                    <tr><th>L</th><td>01011</td></tr>
                    <tr><th>M</th><td>01100</td></tr>
                    <tr><th>N</th><td>01101</td></tr>
                    <tr><th>O</th><td>01110</td></tr>
                    <tr><th>P</th><td>01111</td></tr>
                    <tr><th>Q</th><td>10000</td></tr>
                    <tr><th>R</th><td>10001</td></tr>
                    <tr><th>S</th><td>10010</td></tr>
                    <tr><th>T</th><td>10011</td></tr>
                    <tr><th>U</th><td>1010</td></tr>
                    <tr><th>V</th><td>1011</td></tr>
                    <tr><th>W</th><td>1100</td></tr>
                    <tr><th>X</th><td>1101</td></tr>
                    <tr><th>Y</th><td>1110</td></tr>
                    <tr><th>Z</th><td>1111</td></tr>
                </table>

                <h2>On the Subject of Arithmetic Ciphers</h2>
                <p class="flavour-text">Death to software patents!</p>
                <p>This module contains 3 screens, a keyboard, 2 arrows, and a submit button that displays the current page you’re on.</p>
                <p>Pressing the left or right arrow takes you to the previous or next page. There are 2 pages.</p>
                <p>To disarm the module, decrypt a word using the following three steps. Once you have the decrypted word, type it in using the keyboard. When you start typing, the screens go blank and the bottom screen will show what you are typing.</p>
                <p>To clear your input, click one of the arrows.</p>
                <p>Once you are satisfied with your input, press the button labeled “SUB” to submit your answer.</p>

                <h3>Step 1: Encrypted Binary Retrieval</h3>
                <p>For this step, use the letters from the top screen on page 1. Convert this encoded string to binary by replacing each letter with a binary code from the table on the right.</p>
                <p>This will be referred to as the <em>binary stream</em>. Bits are extracted and removed from it from left to right.</p>

                <h3>Step 2: Frequency Retrieval</h3>
                <p>Concatenate the letters on the middle and bottom screens on page 1 and all three screens on page 2 (ignore the number). Replace each letter with its position in the alphabet to obtain 27 numbers in the range 1–26. Label the first 26 with the letters A–Z and the last as “EOF”. These numbers are referred to as <em>frequencies</em>.</p>
                <p>Also calculate the <em>running total</em> for each entry. Label A with 0, B with the frequency of A, C with the frequency of A+B, etc., until EOF with the sum of the frequencies of all letters A to Z.</p>
                <p>Finally, you need a value called <var>total</var> which is the sum of all frequencies (or, equivalently, the running total of EOF plus its frequency). This value is provided on the last screen for confirmation.</p>
            </div>
            <div class="page-footer relative-footer">Page 1 of 2</div>
        </div>

        <div class="page page-bg-02 strip">
            <div class="page-header">
                <span class="page-header-doc-title">Keep Talking and Nobody Explodes Mod</span>
                <span class="page-header-section-title">Arithmetic Cipher</span>
            </div>
            <div class="page-content">
                <h3>Step 3: Arithmetic Decryption</h3>
                <p>Throughout the process, three 20-bit values are relevant:</p>
                <ul>
                    <li><em><var>high</var></em> — starts out as 1048575 (or 11111111111111111111 in binary).</li>
                    <li><em><var>low</var></em> — starts out as 0 (or 00000000000000000000 in binary).</li>
                    <li><em><var>code</var></em> — starts out with a value obtained by extracting and removing the first 20 bits from the binary stream.</li>
                </ul>
                <p>Perform the following steps repeatedly:</p>
                <ul>
                    <li>All divisions in the following formulas are integer division (round down).</li>
                    <li>Calculate the value of ((code - low + 1) * total - 1) / (high - low + 1).</li>
                    <li>If the running total for EOF is ≤ this value, you are done.</li>
                    <li>Otherwise, find the latest letter whose running total is ≤ to this value.</li>
                    <li>Add this letter to your solution word.</li>
                    <li>Calculate new values for <var>high</var> and <var>low</var> as follows:
                        <ul>
                            <li>high = (oldhigh - oldlow + 1) * (v + f) / total + oldlow - 1</li>
                            <li>low = (oldhigh - oldlow + 1) * v / total + oldlow</li>
                        </ul>
                        where <var>v</var> is the running total of the letter just decoded, and <var>f</var> is its frequency.</li>
                    <li>Convert <var>high</var>, <var>code</var> and <var>low</var> to 20-digit binary (with leading zeros if necessary) and modify them as follows:
                        <ul>
                            <li>Starting at the left, remove a contiguous block of bits where <var>high</var> and <var>low</var> are equal (marked in red below).</li>
                            <li>Keep the next column, then remove a contiguous block of bits where <var>high</var> is 0 and <var>low</var> is 1 (marked in blue below).</li>
                            <li>Pad <var>high</var> on the right back to 20 bits using only 1-bits.</li>
                            <li>Pad <var>low</var> on the right back to 20 bits using only 0-bits.</li>
                            <li>Pad <var>code</var> on the right back to 20 bits by extracting and removing bits from the binary stream. Use 1-bits if you exhaust the binary stream.</li>
                        </ul>
                    </li>
                </ul>
                <svg style="width: 10cm" class="centered-img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 42.2" text-anchor="middle" font-size="9">
                    <path fill="#7777ff66" d="M49.902 1.1h30v40h-30z"/>
                    <path fill="#ff777766" d="M19.902 1.1h20v40h-20z"/>
                    <text y="10" transform="translate(25 -.8)">0</text>
                    <text y="10" transform="translate(35 -.8)">1</text>
                    <text y="10" transform="translate(45 -.8)">1</text>
                    <text y="10" transform="translate(55 -.8)">0</text>
                    <text y="10" transform="translate(65 -.8)">0</text>
                    <text y="10" transform="translate(75 -.8)">0</text>
                    <text y="10" transform="translate(85 -.8)">0</text>
                    <text y="10" transform="translate(95 -.8)">0</text>
                    <text y="10" transform="translate(105 -.8)">1</text>
                    <text y="10" transform="translate(115 -.8)">1</text>
                    <path fill="none" class="black" stroke="#000" stroke-width=".2" d="M19.902 1.1h100v10h-100zM29.902 1.1v10M39.902 1.1v10M49.902 1.1v10M59.902 1.1v10M69.902 1.1v10M79.902 1.1v10M89.902 1.1v10M99.902 1.1v10M109.902 1.1v10"/>
                    <text y="10" transform="translate(25 14.18)">0</text>
                    <text y="10" transform="translate(35 14.18)">1</text>
                    <text y="10" transform="translate(45 14.18)">0</text>
                    <text y="10" transform="translate(55 14.18)">1</text>
                    <text y="10" transform="translate(65 14.18)">1</text>
                    <text y="10" transform="translate(75 14.18)">1</text>
                    <text y="10" transform="translate(85 14.18)">0</text>
                    <text y="10" transform="translate(95 14.18)">1</text>
                    <text y="10" transform="translate(105 14.18)">0</text>
                    <text y="10" transform="translate(115 14.18)">1</text>
                    <path fill="none" class="black" stroke="#000" stroke-width=".2" d="M19.902 16.1h100v10h-100zM29.902 16.1v10M39.902 16.1v10M49.902 16.1v10M59.902 16.1v10M69.902 16.1v10M79.902 16.1v10M89.902 16.1v10M99.902 16.1v10M109.902 16.1v10"/>
                    <text y="10" transform="translate(25 29.18)">0</text>
                    <text y="10" transform="translate(35 29.18)">1</text>
                    <text y="10" transform="translate(45 29.18)">0</text>
                    <text y="10" transform="translate(55 29.18)">1</text>
                    <text y="10" transform="translate(65 29.18)">1</text>
                    <text y="10" transform="translate(75 29.18)">1</text>
                    <text y="10" transform="translate(85 29.18)">1</text>
                    <text y="10" transform="translate(95 29.18)">0</text>
                    <text y="10" transform="translate(105 29.18)">0</text>
                    <text y="10" transform="translate(115 29.18)">0</text>
                    <path fill="none" class="black" stroke="#000" stroke-width=".2" d="M19.902 31.1h100v10h-100zM29.902 31.1v10M39.902 31.1v10M49.902 31.1v10M59.902 31.1v10M69.902 31.1v10M79.902 31.1v10M89.902 31.1v10M99.902 31.1v10M109.902 31.1v10"/>
                    <text x="-8.128" y="10" font-size="6" text-anchor="end" transform="translate(24.601 -1.614)">high</text>
                    <text x="-8.372" y="20" font-size="6" text-anchor="end" transform="translate(24.845 3.386)">low</text>
                    <text x="-7.738" y="40" font-size="6" text-anchor="end" transform="translate(24.211 -1.614)">code</text>
                    <text x="122" y="10" font-size="4" text-anchor="start" transform="translate(0 -1.614)">. . .</text>
                    <text x="122" y="20" font-size="4" text-anchor="start" transform="translate(0 3.386)">. . .</text>
                    <text x="122" y="40" font-size="4" text-anchor="start" transform="translate(0 -1.614)">. . .</text>
                </svg>
            </div>
            <div class="page-footer relative-footer">Page 2 of 2</div>
        </div>
    </div>
</body>
</html>