num-combiner/index.html at main · XavierCooney/num-combiner · 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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Xavier's Num Combiner</title>
    <style>
        * {
            box-sizing: border-box;
        }
        body {
            font-family: Verdana, Geneva, Tahoma, sans-serif;
        }
        #add-num-input, #add-num-input-4 {
            padding: 10px;
        }
        #num-inputs {
            margin-top: 20px;
            margin-bottom: 5px;
        }
        .num-input {
            font-size: 25px;
            width: 3em;
            border-radius: 10px;
            text-align: center;
            padding-left: 10px;
            padding-top: 10px;
            padding-bottom: 10px;
        }
        #num-inputs {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
        }
        .num-input-container {
            display: flex;
            align-items: center;
            background-color: #FFF;
            border-radius: 10px;
            padding: 10px;
            margin: 10px;
            /* border: 2px solid black; */
        }
        #num-inputs input, #num-inputs button {
            margin: 5px;
        }
        #go-btn {
            font-size: 30px;
            border-radius: 10px;
            margin-top: 15px;
        }
        #input-panel {
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #FFF;
            border: 3px solid black;
            border-radius: 20px;
            margin: 20px;
            padding: 20px;
            margin-bottom: 0px;
        }
        #target-container {
            margin: 20px;
            margin-top: 5px;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #target-container input {
            margin: 10px;
            font-size: 30px;
            width: 4em;
            border-radius: 10px;
            padding-left: 15px;
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .status-div {
            padding: 30px;
            margin: 40px;
            border-radius: 40px;
            margin-top: 20px;
        }
        .status-answer {
            background-color: #DFD;
        }
        .status-no-soln {
            background-color: #F88;
            text-align: center;
            font-weight: bold;
        }
        .status-waiting {
            background: rgb(77, 169, 255);
            text-align: center;
            color: #FFF;
        }
        .animate-disapear {
            /* height: 0px; */
            padding: 0px;
            margin-top: 0px;
            margin-bottom: 0px;
            /* transform: scaleY(0); */
            transition-property: height, padding, margin;
            transition-duration: 0.6s;
            transition-timing-function: ease;
            overflow: hidden;
        }
        .animate-appear {
            max-height: 0px;
            transform: scaleY(0);
            margin: 0px;
            padding: 0px;
            overflow: hidden;
            transition-property: max-height, transform;
            transition-duration: 0.5s;
            transition-timing-function: ease;
        }
        .status-waiting span.waiting {
            font-weight: bold;
        }
        h1 {
            text-align: center;
        }
        body > p {
            margin-left: 25px;
            margin-right: 25px;
        }
        #input-panel > hr {
            margin-left: 0px;
            margin-right: 0px;
            align-self: stretch;
            border-width: 3px;
            margin-bottom: 25px;
        }
        #presets-panel button {
            padding: 12px;
            border-radius: 10px;
        }
        #countdown-container {
            display: inline-block;
            margin-left: 20px;
            border: 2px solid black;
            border-radius: 15px;
            padding: 15px;
        }
        #countdown-nums-select {
            padding: 8px;
            border-radius: 10px;
        }
        #presets-panel {
            margin-bottom: 20px;
        }
    </style>

    <script>
        MathJax = {
          tex: {
            inlineMath: [['$$$', '$$$']],
            processEscapes: true,
          }
        }
      </script>
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</head>
<body>
    <h1>Xavier's Number Combiner Thing</h1>
    <!-- For when you're on the train and a problem is bugging you... -->

    <p>
        I decided to make this thing where you can put in numbers and it'll find an expression
        using those numbers to make another number. I haven't really though of a catchy name for this :(.

        This was originally designed for a game played on Sydney public transport where the digits of the
        ID code at the front of the carriage/bus is used to make the number 10. It also works well for the
        <a href="https://en.wikipedia.org/wiki/Four_fours">four fours puzzle</a>, and the numbers round
        of <a href="https://en.wikipedia.org/wiki/Letters_and_Numbers#Numbers_round">Letters and Numbers</a>
        (or <a href="https://en.wikipedia.org/wiki/Countdown_(game_show)#Numbers_round">Countdown</a> in the UK).

        On my machine with default settings it manages to process four and fewer numbers almost instantaneously.
        For five numbers it usually takes a couple of seconds, and for six you'll be in for a good wait. Depending
        on the settings, it may also be able to guarantee that no solution is possible given the operations
        it's allowed to perform.

        <strong>
            NEW: I've implemented most of the features that I could think of, but I've still got a few small ideas
            left. If you've got any suggestions I'd be glad to here them.
        </strong>
    </p>

    <p>
        I was and still am quite surprised at the what IMO is the nonintuitively high chance for target to be reached
        using say 4 or 5 numbers, especially for somewhat larger targets. I find there's a certain
        delight when it spits out an interesting/convoluted solution which manages to reach a difficult
        goal.
    </p>

    <div id="input-panel">
        <div id="presets-panel">
            <button id="btn-4-preset">Four digits to get to 10</button>
            <div id="countdown-container">
                <select id="countdown-nums-select">
                    <option data-num-small="6">6 small</option>
                    <option data-num-small="5">5 small, 1 large</option>
                    <option data-num-small="4" selected>4 small, 2 large</option>
                    <option data-num-small="3">3 small, 3 large</option>
                    <option data-num-small="2">2 small, 4 large</option>
                </select>
                <button id="btn-countdown-preset">Countdown/Letters and Numbers</button>
            </div>
        </div>
        <hr/>
        <div id="num-inputs">
            <button id="add-num-input">➕</button>
            <!-- <button id="add-num-input-4">➕4</button> -->
        </div>
        <hr/>
        <label id="target-container">
            Target
            <input value="10" id="target-number" type="number"></input>
        </label>
        <hr/>
        <label>
            Allow use of a number twice
            <input type="checkbox" id="check-allow-dups"></input>
        </label>
        <label>
            Require use of all numbers
            <input type="checkbox" id="check-need-all" checked></input>
        </label>
        <label>
            Allow the square root operation
            <input type="checkbox" id="check-allow-sqrt" checked></input>
        </label>
        <label>
            Allow the factorial operation
            <input type="checkbox" id="check-allow-factorial" checked></input>
        </label>
        <label>
            Allow the 'power of' operation
            <input type="checkbox" id="check-allow-power" checked></input>
        </label>
        <label>
            Allow the 'nth-root' operation
            <input type="checkbox" id="check-allow-nth-root"></input>
        </label>
        <label>
            Allow calculations to involve values which aren't integers
            <input type="checkbox" id="check-allow-non-integer"></input>
        </label>
        <label>
            Allow calculations to involve values which are negative
            <input type="checkbox" id="check-allow-negative" checked></input>
        </label>
        <label>
            Write multiplication using $$$ \times $$$
            <input type="checkbox" id="check-multiply-with-x"></input>
        </label>
        <label title="Trivial in that the result of the operation is equal to the value of one of the arguments, so for example 5 + 0">
            Allow 'trivial' operations (hover for explanation)
            <input type="checkbox" id="check-allow-trivial" checked></input>
        </label>
        <!-- <label>
            [Testing...] Sort stack before memoization
            <input type="checkbox" id="check-testing-sort"></input>
        </label> -->
        <label>
            Find closest if can't find exact target
            <input type="checkbox" id="check-find-closest" checked></input>
        </label>
        <label>
            Try to find answers for all integers from 0 to target
            <input type="checkbox" id="check-find-all"></input>
        </label>
        <br/>
        <button id="go-btn">Go!</button>
    </div>
    <div id="answers"></div>

    <script src="./thing.js"></script>
</body>
</html>