source-circuitle/index.html at main · stateloop-connected/source-circuitle · 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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#0b1d33" />
    <meta
      name="description"
      content="A daily logic-gate puzzle: rebuild the day's truth table using the fewest gates, then share a spoiler-free score. For people who think in boolean logic."
    />
    <meta property="og:title" content="Circuitle — Match the truth table in the fewest gates" />
    <meta
      property="og:description"
      content="A daily logic-gate puzzle. Rebuild the day's truth table with the fewest gates and share a spoiler-free score."
    />
    <meta property="og:type" content="website" />
    <title>Circuitle — Match the truth table in the fewest gates</title>
    <link
      rel="icon"
      type="image/svg+xml"
      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%230b1d33'/%3E%3Cpath d='M20 9a7 7 0 1 0 0 14' stroke='%23ffb454' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='20' cy='9' r='1.6' fill='%237dd3fc'/%3E%3Ccircle cx='20' cy='23' r='1.6' fill='%237dd3fc'/%3E%3C/svg%3E"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./src/styles.css" />
  </head>
  <body>
    <div id="app">
      <header class="app-header">
        <h1 class="wordmark" aria-label="Circuitle">
          Circu<span class="wordmark-led" aria-hidden="true">i</span>tle
        </h1>
        <div class="header-controls">
          <a
            class="header-link"
            href="https://github.com/ctkrug/circuitle"
            target="_blank"
            rel="noopener"
          >GitHub</a>
          <span id="best-score" class="best-score muted" aria-live="polite"></span>
          <button id="mute-toggle" class="icon-button" type="button" aria-label="Mute sound" aria-pressed="false">
            🔊
          </button>
        </div>
      </header>
      <main class="layout">
        <section class="board-panel" aria-label="Circuit board">
          <canvas
            id="board"
            tabindex="0"
            role="group"
            aria-label="Circuit board. Use arrow keys to move between pins, Enter to select or connect a pin, and Delete to remove the focused gate."
          ></canvas>
          <p id="board-status" class="board-status" role="status" aria-live="polite"></p>
        </section>
        <aside class="rail">
          <section class="truth-table-panel" aria-label="Today's target truth table">
            <h2>Target</h2>
            <div id="truth-table"></div>
          </section>
          <section class="gate-dock" aria-label="Gate palette">
            <h2>Gates</h2>
            <div id="gate-palette" class="gate-palette"></div>
          </section>
        </aside>
      </main>
      <div id="win-overlay" class="win-overlay" hidden>
        <div class="win-card" role="dialog" aria-modal="true" aria-labelledby="win-title">
          <h2 id="win-title">Solved!</h2>
          <p class="win-stats"><span id="win-gate-count">0</span> gates <span id="win-delta" class="win-delta"></span></p>
          <p class="muted">Par: <span id="win-par">0</span></p>
          <p id="win-share-text" class="muted win-share-text"></p>
          <div class="win-actions">
            <button id="win-share" class="btn btn-accent" type="button">Share</button>
            <button id="win-dismiss" class="btn" type="button">Keep tinkering</button>
          </div>
        </div>
      </div>
      <div id="toast" class="toast" role="status" aria-live="polite" hidden></div>
    </div>
    <section class="about" aria-label="About Circuitle">
      <div class="about-inner">
        <h2>A daily logic-gate puzzle</h2>
        <p>
          Circuitle is a browser puzzle about digital logic. Each day it
          generates one truth table, a small boolean function of three
          inputs, and asks you to build a circuit that matches every row.
          You wire logic gates (AND, OR, NOT, XOR, NAND, NOR, XNOR) from the
          inputs to a single output, and the board simulates your circuit
          live against the target. The catch is efficiency: any working
          circuit solves the puzzle, but your score is the number of gates
          you used, measured against par, the smallest number of gates the
          function actually needs. Getting a solution is the warm-up.
          Getting the minimal one is the game.
        </p>
        <h3>How to play</h3>
        <p>
          Read the day's target truth table, drag gates onto the board (or
          place them from the keyboard), and connect pins by clicking a
          source pin then a target pin. Rows turn green as your circuit
          starts matching them. When every row passes you win, and Circuitle
          shows your gate count next to par along with a share line you can
          copy. The same puzzle appears for everyone on a given UTC date, so
          a score is worth comparing. Nothing is stored on a server; your
          best gate count per day lives in your browser.
        </p>
        <h3>FAQ</h3>
        <dl class="faq">
          <dt>Do I need to know electronics to play?</dt>
          <dd>
            Basic familiarity with logic gates helps, but the truth table
            tells you exactly what each combination of inputs should
            produce, so you can reason it out from the table alone. If you
            know that AND is true only when both inputs are true, you know
            enough to start.
          </dd>
          <dt>What is par, and how is it calculated?</dt>
          <dd>
            Par is the fewest gates any circuit could use to reproduce that
            day's truth table. Circuitle computes it with a shortest-path
            search over the function's possible sub-signals, so it is a real
            lower bound, not an estimate. Beating par means you found a
            smaller circuit than the reference solution.
          </dd>
          <dt>Is the puzzle the same for everyone?</dt>
          <dd>
            Yes. The day's truth table is seeded from the UTC date, so every
            player on the same day faces the identical function. That is what
            makes sharing a gate count meaningful.
          </dd>
          <dt>Can I play with only the keyboard?</dt>
          <dd>
            Yes. Placing a gate, wiring two pins, and deleting a gate all
            have keyboard equivalents, and the board announces the pin you
            are on for screen readers.
          </dd>
          <dt>Does it work on my phone?</dt>
          <dd>
            Yes. The board resizes to your screen and gates are drag-and-drop
            on touch, with the truth table and gate dock laid out for narrow
            widths.
          </dd>
        </dl>
      </div>
    </section>
    <footer class="site-footer">
      <a class="cta" href="https://github.com/ctkrug/circuitle" target="_blank" rel="noopener">View on GitHub</a>
      <a class="portfolio-link" href="https://apps.charliekrug.com">More by Charlie Krug → apps.charliekrug.com</a>
    </footer>
    <script type="module" src="./src/main.ts"></script>
  </body>
</html>