-
Notifications
You must be signed in to change notification settings - Fork 10
/
call-generator.html
134 lines (116 loc) · 3.88 KB
/
call-generator.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bingo Call Generator</title>
<style type="text/css">
label { display:block; font-weight: bold; }
.column { background:#eee; float:left; margin-right:1em; padding:0em 1em; width:20em; }
.prominent { font-size:3em; margin:1em; text-align: center; }
#currentCall { margin-bottom:.5em;}
#footer { border-top:1px solid #ccc; }
#nextCall { font-size:1em; }
#wordList { clear:both; }
</style>
<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js"></script>
<script type="text/javascript">
/*jslint browser: true, devel: true */
/* global $ */
var callGenerator = {
words: [],
build: function () {
"use strict";
var word;
$("#yetToCall").html("");
for (word in this.words) {
$("#yetToCall").append("<li>" + this.words[word] + "</li>");
}
},
reset: function () {
"use strict";
var word;
$("#currentCall").html("[no calls yet]");
$("#called").html("");
$("#yetToCall").html("");
this.words = $("#words")[0].value.split(",");
this.build();
},
call: function () {
"use strict";
var word = "";
if (this.words.length === 0) {
$("#currentCall").html("[no items left to call!]");
}
else {
word =this.words.splice(Math.floor(Math.random() * this.words.length), 1);
$("#currentCall").html(word);
$("#called").append("<li>" + word + "</li>");
this.build();
}
},
// Replace + with spaces, URL-decode &/,:+=?%
urlUnencode: function (str) {
"use strict";
return decodeURI(str).replace(/%26/g, "&").replace(/%2F/g, "/").replace(/%2C/g, ",").replace(/%3A/g, ":").replace(/\+/g, " ").replace(/%2B/g, "+").replace(/%3D/g, "=").replace(/%3F/g, "?").replace(/%25/g, "%");
},
parseQS: function () {
"use strict";
var qsArray, json, i, kv, key, val;
// Remove leading question mark ("?") and split into array of key/value pairs
qsArray = location.search.slice(1).split("&");
// Initialize object to store key/value pairs
json = {};
// Loop through key/value pairs and separate into keys and values
for (i = 0; i < qsArray.length; i += 1) {
kv = qsArray[i].split("=");
key = kv[0];
if (kv.length === 1) {
val = key;
} else {
// A key may be present without a value, so set a placeholder value
val = kv[1];
}
json[key] = val;
}
return json;
},
checkQS: function () {
"use strict";
var qs = this.parseQS();
if (!(qs.words === undefined)) {
$("#words").html(this.urlUnencode(qs.words));
}
}
}
$(document).ready(function() {
callGenerator.checkQS();
callGenerator.reset()
});
</script>
</head>
<body>
<h1>Bingo Call Generator</h1>
<div class="prominent">
<div id="currentCall">[no calls yet]</div>
<form onsubmit="callGenerator.call(); return false;">
<label><input type="submit" value="Next Call" id="nextCall"></label>
</form>
</div>
<div class="column">
<h2>Called</h2>
<ol id="called"></ol>
</div>
<div class="column">
<h2>Yet to call</h2>
<ol id="yetToCall"></ol>
</div>
<form id="wordList">
<label>Word List (separated by commas)</label>
<textarea cols="60" rows="8" name="words" id="words">B1,B2,B3,B4,B5,B6,B7,B8,B9,B10,B11,B12,B13,B14,B15,I16,I17,I18,I19,I20,I21,I22,I23,I24,I25,I26,I27,I28,I29,I30,N31,N32,N33,N34,N35,N36,N37,N38,N39,N40,N41,N42,N43,N44,N45,G46,G47,G48,G49,G50,G51,G52,G53,G54,G55,G56,G57,G58,G59,G60,O61,O62,O63,O64,O65,O66,O67,O68,O69,O70,O71,O72,O73,O74,O75</textarea>
<label><input type="button" value="Reset" onclick="callGenerator.reset()"></label>
</form>
<div id="footer">
<a href="/bingo-card-generator/faq.html">Questions?</a> Comments? Contact chris @ osric . com
</div>
</body>
</html>