-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
176 lines (163 loc) · 13.1 KB
/
index.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
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
<!DOCTYPE html>
<html>
<head>
<title>CheetahTS, The Youth Soccer Sub Planner</title>
<style>
body {
font-family: serif;
font-size: 1.2em;
}
.container {
max-width: 640px;
margin: auto;
}
table {
margin-bottom: 20px;
width: 100%;
}
td.label {
width: 35%;
}
td {
padding: 10px 0;
}
textarea#players {
height: 5em;
}
input#minutes {
width: 3em;
}
</style>
<script src="out/soccer.js"></script>
<script>
window.onload = function () {
const form = document.getElementById('myForm');
form.onsubmit = function (e) {
e.preventDefault(); // prevent form submission
const form = document.getElementById('myForm');
// log the values of each field
console.log("Name: " + form.elements['name'].value);
console.log("Minutes in game: " + form.elements['minutes'].value);
console.log("Sub periods: " + form.elements['periods'].value);
console.log("Formation: " + form.elements['formation'].value);
console.log("Players: " + form.elements['players'].value);
let playerListStr = form.elements['players'].value;
let periods = parseInt(form.elements['periods'].value ?? '8');
let minutes = parseInt(form.elements['minutes'].value ?? '52');
let timePerPeriod = minutes / periods;
let currTime = 0;
theTimePeriods = []
// theTimePeriods override
let theTimePeriodsStr = form.elements['timePeriodJSON'].value;
if (theTimePeriodsStr) {
theTimePeriods = JSON.parse(theTimePeriodsStr);
} else if (playerListStr) {
for (p = 0; p < periods; p++) {
theTimePeriods.push({ "time": currTime, "subs": extractWords(playerListStr) })
currTime += timePerPeriod;
}
} else {
for (p = 0; p < periods; p++) {
theTimePeriods.push({ "time": currTime, "subs": ["Puma", "Lynx", "Leopard", "Bobcat", "Margay", "Lion", "Jaguar", "Tiger", "Caracal", "Ocelot"] })
currTime += timePerPeriod;
}
}
game = {
name: form.elements['name'].value,
period: 1, // start at first period
formation: parseInt(form.elements['formation'].value ?? '322'),
timePeriods: theTimePeriods
}
let hackUrl = mkUrl(game);
if (hackUrl.includes("index.html")) {
hackUrl = hackUrl.replace('index', 'cheetahts');
} else {
hackUrl = hackUrl.replace('/?', '/cheetahts.html?');
}
// navigate to 'cheetahts.html'
window.location.href = hackUrl;
};
};
/*
Fizz, Binx, Remy, Fluff, Puff, Wooly, Fuzzy, Snug, Tufty, Whisk, Plush, Fleece, Nuzzle, Peach, Strawberry, Hairball, Screwy
*/
</script>
</head>
<body>
<div class="container">
<h1><em>CheetahTS</em></h1>
<h2>The Youth Soccer Sub Planner</h2>
<p>Welcome to CheetahTS, The Youth Soccer Sub Planner.</p>
<p>
This is an small, open source, web app that anyone can use to plan their soccer team's substitution schedule.
</p>
<p>The app was made to work well in a browser and on a phone at game-time. Every change is stored in the URL so all you have to do to save the game is bookmark the (very long) url!</p>
<p>
You can create a game and start using the tool with the form below, or click
<a href="https://github.com/bballant/cheetahts/blob/main/README.md">here</a> to find
the documentation and the source code.
</p>
<h2>Get started with a new game</h2>
<form id="myForm">
<table>
<tr>
<td class="label">Name It:</td>
<td><input type="text" name="name" placeholder="Wildcats Vs. Rabbits"></input></td>
</tr>
<tr>
<td class="label">Minutes in game:</td>
<td>
<input class="minutes" id="minutes" name="minutes" type="number" value="52"/>
</td>
</tr>
<tr>
<td class="label">Sub periods:</td>
<td>
<select name="periods">
<option>8</option>
<option>4</option>
<option>3</option>
<option>2</option>
<option>1</option>
</select>
</td>
</tr>
<tr>
<td class="label">Formation:</td>
<td>
<select name="formation">
<option value="322">3-2-2 (8)</option>
<option value="331">3-3-1 (8)</option>
<option value="442">4-4-2 (11)</option>
<option value="433">4-3-3 (11)</option>
</select>
</td>
</tr>
<tr>
<td class="label">Players:</td>
<td><textarea id="players" name="players" placeholder="Puma,Cheetah,Leopard,Margay..."></textarea></td>
</tr>
<tr><td colspan="2"><input type="submit" value="Click to Start Planning"></td></tr>
<tr><td colspan="2"> </td></tr>
<tr><td colspan="2">~~~ debugging ~~~</td></tr>
<tr>
<td colspan="2">
<a href="cheetahts.html?period=2&formation=322&timePeriods=%255B%257B%2522time%2522%253A0%252C%2522subs%2522%253A%255B%2522Margay%2522%252C%2522Caracal%2522%255D%252C%2522GK%2522%253A%2522Bobcat%2522%252C%2522LB%2522%253A%2522Leopard%2522%252C%2522CB%2522%253A%2522Jaguar%2522%252C%2522RB%2522%253A%2522Puma%2522%252C%2522LM%2522%253A%2522Tiger%2522%252C%2522RM%2522%253A%2522Lynx%2522%252C%2522LF%2522%253A%2522Lion%2522%252C%2522RF%2522%253A%2522Ocelot%2522%257D%252C%257B%2522time%2522%253A6.5%252C%2522subs%2522%253A%255B%2522Lion%2522%252C%2522Leopard%2522%255D%252C%2522GK%2522%253A%2522Bobcat%2522%252C%2522LB%2522%253A%2522Caracal%2522%252C%2522CB%2522%253A%2522Jaguar%2522%252C%2522RB%2522%253A%2522Puma%2522%252C%2522LM%2522%253A%2522Tiger%2522%252C%2522RM%2522%253A%2522Lynx%2522%252C%2522LF%2522%253A%2522Margay%2522%252C%2522RF%2522%253A%2522Ocelot%2522%257D%252C%257B%2522time%2522%253A13%252C%2522subs%2522%253A%255B%2522Puma%2522%252C%2522Tiger%2522%255D%252C%2522GK%2522%253A%2522Bobcat%2522%252C%2522LB%2522%253A%2522Caracal%2522%252C%2522CB%2522%253A%2522Jaguar%2522%252C%2522RB%2522%253A%2522Leopard%2522%252C%2522LM%2522%253A%2522Lion%2522%252C%2522RM%2522%253A%2522Lynx%2522%252C%2522LF%2522%253A%2522Margay%2522%252C%2522RF%2522%253A%2522Ocelot%2522%257D%252C%257B%2522time%2522%253A19.5%252C%2522subs%2522%253A%255B%2522Jaguar%2522%252C%2522Ocelot%2522%255D%252C%2522GK%2522%253A%2522Bobcat%2522%252C%2522LB%2522%253A%2522Caracal%2522%252C%2522CB%2522%253A%2522Puma%2522%252C%2522RB%2522%253A%2522Leopard%2522%252C%2522LM%2522%253A%2522Lion%2522%252C%2522RM%2522%253A%2522Lynx%2522%252C%2522LF%2522%253A%2522Margay%2522%252C%2522RF%2522%253A%2522Tiger%2522%257D%252C%257B%2522time%2522%253A26%252C%2522subs%2522%253A%255B%2522Lynx%2522%252C%2522Caracal%2522%255D%252C%2522GK%2522%253A%2522Tiger%2522%252C%2522LB%2522%253A%2522Ocelot%2522%252C%2522CB%2522%253A%2522Margay%2522%252C%2522RB%2522%253A%2522Lion%2522%252C%2522LM%2522%253A%2522Bobcat%2522%252C%2522RM%2522%253A%2522Leopard%2522%252C%2522LF%2522%253A%2522Puma%2522%252C%2522RF%2522%253A%2522Jaguar%2522%257D%252C%257B%2522time%2522%253A32.5%252C%2522subs%2522%253A%255B%2522Puma%2522%252C%2522Margay%2522%255D%252C%2522GK%2522%253A%2522Tiger%2522%252C%2522LB%2522%253A%2522Ocelot%2522%252C%2522CB%2522%253A%2522Lynx%2522%252C%2522RB%2522%253A%2522Lion%2522%252C%2522LM%2522%253A%2522Bobcat%2522%252C%2522RM%2522%253A%2522Leopard%2522%252C%2522LF%2522%253A%2522Caracal%2522%252C%2522RF%2522%253A%2522Jaguar%2522%257D%252C%257B%2522time%2522%253A39%252C%2522subs%2522%253A%255B%2522Jaguar%2522%252C%2522Ocelot%2522%255D%252C%2522GK%2522%253A%2522Tiger%2522%252C%2522LB%2522%253A%2522Margay%2522%252C%2522CB%2522%253A%2522Lynx%2522%252C%2522RB%2522%253A%2522Lion%2522%252C%2522LM%2522%253A%2522Bobcat%2522%252C%2522RM%2522%253A%2522Leopard%2522%252C%2522LF%2522%253A%2522Caracal%2522%252C%2522RF%2522%253A%2522Puma%2522%257D%252C%257B%2522time%2522%253A45.5%252C%2522subs%2522%253A%255B%2522Lion%2522%252C%2522Leopard%2522%255D%252C%2522GK%2522%253A%2522Tiger%2522%252C%2522LB%2522%253A%2522Margay%2522%252C%2522CB%2522%253A%2522Lynx%2522%252C%2522RB%2522%253A%2522Ocelot%2522%252C%2522LM%2522%253A%2522Bobcat%2522%252C%2522RM%2522%253A%2522Jaguar%2522%252C%2522LF%2522%253A%2522Caracal%2522%252C%2522RF%2522%253A%2522Puma%2522%257D%255D&name=Wildcats+Vs+Rabbits">
8v8 Sample</a>
<div> </div>
<a
href="cheetahts.html?name=Dwarfs+VS+Lemmings&period=1&formation=433&timePeriods=%255B%257B%2522time%2522%253A0%252C%2522subs%2522%253A%255B%2522Biff%2522%252C%2522Grub%2522%252C%2522Flint%2522%252C%2522Nugget%2522%252C%2522Digg%2522%252C%2522Spark%2522%252C%2522Grit%2522%252C%2522Bolt%2522%252C%2522Muck%2522%252C%2522Slag%2522%252C%2522Clink%2522%252C%2522Fizz%2522%252C%2522Smelt%2522%252C%2522Chunk%2522%252C%2522Spade%2522%252C%2522Pebble%2522%252C%2522Gleam%2522%255D%257D%252C%257B%2522time%2522%253A11.25%252C%2522subs%2522%253A%255B%2522Biff%2522%252C%2522Grub%2522%252C%2522Flint%2522%252C%2522Nugget%2522%252C%2522Digg%2522%252C%2522Spark%2522%252C%2522Grit%2522%252C%2522Bolt%2522%252C%2522Muck%2522%252C%2522Slag%2522%252C%2522Clink%2522%252C%2522Fizz%2522%252C%2522Smelt%2522%252C%2522Chunk%2522%252C%2522Spade%2522%252C%2522Pebble%2522%252C%2522Gleam%2522%255D%257D%252C%257B%2522time%2522%253A22.5%252C%2522subs%2522%253A%255B%2522Biff%2522%252C%2522Grub%2522%252C%2522Flint%2522%252C%2522Nugget%2522%252C%2522Digg%2522%252C%2522Spark%2522%252C%2522Grit%2522%252C%2522Bolt%2522%252C%2522Muck%2522%252C%2522Slag%2522%252C%2522Clink%2522%252C%2522Fizz%2522%252C%2522Smelt%2522%252C%2522Chunk%2522%252C%2522Spade%2522%252C%2522Pebble%2522%252C%2522Gleam%2522%255D%257D%252C%257B%2522time%2522%253A33.75%252C%2522subs%2522%253A%255B%2522Biff%2522%252C%2522Grub%2522%252C%2522Flint%2522%252C%2522Nugget%2522%252C%2522Digg%2522%252C%2522Spark%2522%252C%2522Grit%2522%252C%2522Bolt%2522%252C%2522Muck%2522%252C%2522Slag%2522%252C%2522Clink%2522%252C%2522Fizz%2522%252C%2522Smelt%2522%252C%2522Chunk%2522%252C%2522Spade%2522%252C%2522Pebble%2522%252C%2522Gleam%2522%255D%257D%252C%257B%2522time%2522%253A45%252C%2522subs%2522%253A%255B%2522Biff%2522%252C%2522Grub%2522%252C%2522Flint%2522%252C%2522Nugget%2522%252C%2522Digg%2522%252C%2522Spark%2522%252C%2522Grit%2522%252C%2522Bolt%2522%252C%2522Muck%2522%252C%2522Slag%2522%252C%2522Clink%2522%252C%2522Fizz%2522%252C%2522Smelt%2522%252C%2522Chunk%2522%252C%2522Spade%2522%252C%2522Pebble%2522%252C%2522Gleam%2522%255D%257D%252C%257B%2522time%2522%253A56.25%252C%2522subs%2522%253A%255B%2522Biff%2522%252C%2522Grub%2522%252C%2522Flint%2522%252C%2522Nugget%2522%252C%2522Digg%2522%252C%2522Spark%2522%252C%2522Grit%2522%252C%2522Bolt%2522%252C%2522Muck%2522%252C%2522Slag%2522%252C%2522Clink%2522%252C%2522Fizz%2522%252C%2522Smelt%2522%252C%2522Chunk%2522%252C%2522Spade%2522%252C%2522Pebble%2522%252C%2522Gleam%2522%255D%257D%252C%257B%2522time%2522%253A67.5%252C%2522subs%2522%253A%255B%2522Biff%2522%252C%2522Grub%2522%252C%2522Flint%2522%252C%2522Nugget%2522%252C%2522Digg%2522%252C%2522Spark%2522%252C%2522Grit%2522%252C%2522Bolt%2522%252C%2522Muck%2522%252C%2522Slag%2522%252C%2522Clink%2522%252C%2522Fizz%2522%252C%2522Smelt%2522%252C%2522Chunk%2522%252C%2522Spade%2522%252C%2522Pebble%2522%252C%2522Gleam%2522%255D%257D%252C%257B%2522time%2522%253A78.75%252C%2522subs%2522%253A%255B%2522Biff%2522%252C%2522Grub%2522%252C%2522Flint%2522%252C%2522Nugget%2522%252C%2522Digg%2522%252C%2522Spark%2522%252C%2522Grit%2522%252C%2522Bolt%2522%252C%2522Muck%2522%252C%2522Slag%2522%252C%2522Clink%2522%252C%2522Fizz%2522%252C%2522Smelt%2522%252C%2522Chunk%2522%252C%2522Spade%2522%252C%2522Pebble%2522%252C%2522Gleam%2522%255D%257D%255D">
11v11 Sample</a>
<div> </div>
</td>
</tr>
<tr>
<td class="label">Time Period JSON:</td>
<td><textarea name="timePeriodJSON" placeholder="[{'time': 0.0, 'subs': [], ...}]"></textarea>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>