codeck/index.html at master · epeterson320/codeck · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Codeck — Encode a Message in a Deck of Cards</title>
  <meta name="theme-color" content="#db2535">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Codeck is a tool to translate a message to and from an ordered deck of cards.">
  <link rel="manifest" href="src/manifest.json">
  <link rel="shortcut icon" href="images/icon16.png" type="image/png">
</head>
<body>
  <header>
    <h1>Codeck</h1>
    <a href="https://ericp.co" rel="author">Eric Peterson</a>
  </header>
  <main>
    <form>
      <label for="message">Secret Message (Not case sensitive)</label>
      <input id="message"
        type="text"
        autofocus
        inputmode="latin-prose"
        pattern="[a-zA-Z0-9\.,\s]*"
        placeholder="Some secret message"
        />
      <p class="cleanednotification hide">
        Not all characters can be encoded. The actual encoded message is
        <samp class="cleaned"></samp>
      </p>
      <span class="label">Encoded Message (Drag cards to change)</span>
      <div id="cards">
      </div>
    </form>

    <article>
    <h3>What's going on here?</h3>
    <p>A few years ago while playing
    cards, I had an idea. More like a question, really: could you encode a
    message in a deck of cards? Is that mathematically possible?</p>
    <p>A few weeks ago, I realized <em>hey</em>, you can Google that sort of
    thing. Google lead me to a stack overflow article called
    <a href="http://stackoverflow.com/questions/1506078/fast-permutation-number-permutation-mapping-algorithms">
    Fast permutation -> number -> permutation mapping algorithms</a>.
    That introduced me to the word I was looking for: <a
    href="https://en.wikipedia.org/wiki/Factorial_number_system">Factorial
    number system</a>, and the related concept of <a
    href="https://en.wikipedia.org/wiki/Lehmer_code">Lehmer codes</a>, so I
    went straight to Wikipedia and began to figure out what I had gotten myself
    into. The good news was that mathematicians have studied this thing and
    come up with some great research.</p>
    <p>Once I figured out how it was possible to encode a message in a deck of
    cards, I made this web app to demonstrate it was possible, and that brings
    us to what you're looking at now.</p>

    <h3>How long can the messages be?</h3>
    <p>
      That depends on two things: How many cards are in a deck, and how many
      letters are in your alphabet. Since there are fifty-two cards in a deck,
      there are <code>52! ≈ 8✖️10<sup>57</sup></code> possible orders for a deck
      of cards. If your alphabet has 39 letters (26 proper letters, 10 digits,
      space, quote, and period), then you will need to be able to store
      39<sup>l</sup> messages, where <i>l</i> is the maximum length of a
      message.
    </p>
    <p>This gives us the following formula to solve for <i>l</i>:</p>
    <code>52! ≥ 39<sup>l</sup></code>
    <p>
      This equation can be solved for l by asking Siri, "What's the log of 52
      factorial divided by the log of 39?" The answer will be about 42.68, which
      rounds down to a maximum length of 42 characters, since it doesn't make
      sense to encode part of a character.
    </p>

    <h3>Why is it named Codeck?</h3>
    <p>A <b>codec</b> is a word for something that encodes and decodes messages,
      and I'm not one to pass up a good pun. Or a bad one, apparently.</p>
    <h3>How was this built?</h3>
    <p>The styles and code are my own, but I got a lot of help from a data
      visualization library called <a href="https://d3js.org/">D3.js</a> (not
      affiliated with this project). All the code I wrote is available on Github
      at <a href="https://github.com/epeterson320/codeck">Codeck</a>.</p>
    </article>
  </main>

  <script src="src/app.js" type="module"></script>
</body>
</html>