generated from harvanchik/tailwind-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (129 loc) · 7.28 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<title>Flag Football Play Generator</title>
<link rel="icon" type="image/x-icon" href="./favicon.ico" />
<link rel="stylesheet" href="./assets/styles/styles.css" />
<!-- START: Scripts -->
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
<script src="./assets/js/football.js"></script>
<!-- END: Scripts -->
</head>
<body x-data class="relative overflow-hidden bg-black/80">
<!-- START: Background -->
<img src="./assets/img/field.webp" alt="football field" class="absolute scale-105 opacity-90 blur" />
<!-- END: Background -->
<!-- START: Title -->
<section
x-data="{ penalty: getRandom(this.penalties),
quarter: getRandom(this.quarters),
clockTime: getRandomClockTime(),
down: getRandom(this.downs),
patPoints: getRandom(this.pats)
}"
@keyup.space.window="penalty = getRandom(this.penalties);
quarter = getRandom(this.quarters);
clockTime = getRandomClockTime();
down = getRandom(this.downs);
patPoints = getRandom(this.pats);
"
@keyup.enter.window="penalty = getRandom(this.penalties);
quarter = getRandom(this.quarters);
clockTime = getRandomClockTime();
down = getRandom(this.downs);
patPoints = getRandom(this.pats);
"
class="relative flex h-screen w-full flex-col items-center justify-center space-y-7 font-semibold text-white">
<!-- START: Title and Author -->
<p class="rounded-md bg-black bg-opacity-30 p-2 px-4">
<span>Random Flag Football Play Generator</span>
<span class="text-white/70">by</span>
<a href="https://jake.harvanchik.me" target="_blank" class="font-bold underline">Jake Harvanchik</a>
</p>
<!-- END: Title and Author -->
<!-- START: Quarter, Time, Down -->
<div class="flex min-w-[47rem] flex-row items-center justify-around space-x-10 rounded-md bg-black bg-opacity-20 p-3 pb-5 text-5xl">
<div x-text="quarter" :class="quarter === 'Overtime' && 'underline'"></div>
<div
x-text="quarter === 'Overtime' ? '--:--' : clockTime"
:class="((quarter.includes('2') || quarter.includes('4')) && isUnderTwoMinutes(clockTime)) && 'text-red-600/[85] underline'"></div>
<div class="flex flex-row items-center space-x-3">
<div x-text="down" class="text-orange-600/[85]" :class="(down === '4th Down' || down === 'PAT') && 'underline'"></div>
<div :class="down !== 'PAT' && 'hidden'" x-text="down === 'PAT' && '(' + patPoints + ')'" class="mt-[0.3rem] text-3xl text-orange-500"></div>
</div>
</div>
<!-- END: Quarter, Time, Down -->
<!-- START: Penalty Information -->
<div
x-data="{
penaltyType: getRandom(penalty.types),
playType: getPlayType(penalty, quarter, down),
who: getRandomWho(penalty, quarter),
playerNumber: getRandomNum()
}"
@keyup.space.window="penaltyType = getRandom(penalty.types);
playType = getPlayType(penalty, quarter, down);
who = getRandomWho(penalty, quarter);
playerNumber = getRandomNum();
"
@keyup.enter.window="penaltyType = getRandom(penalty.types);
playType = getPlayType(penalty, quarter, down);
who = getRandomWho(penalty, quarter);
playerNumber = getRandomNum();
"
:class="!penalty?.name && 'hidden'"
class="flex min-w-[57rem] flex-col space-y-1.5 rounded-md bg-black bg-opacity-30 p-3 px-6 text-4xl">
<!-- START: Penalty Result, What, Who, When, Where -->
<div :class="penaltyType !== 'live' && 'hidden'" class="mr-auto flex w-max flex-row items-center space-x-2.5">
<p class="text-emerald-500" x-text="getResult(penalty, playType, down)"></p>
<p class="select-none text-[1.6rem] text-white/80">(result)</p>
</div>
<div class="mr-auto flex w-max flex-row items-center space-x-2.5">
<p class="text-yellow-400" x-text="penalty.name"></p>
<p class="text-yellow-600" x-text="' (' + (penaltyType === 'live' ? 'Live Ball' : 'Dead Ball') + ')'"></p>
<p class="select-none text-[1.6rem] text-white/80">(what)</p>
</div>
<div class="mr-auto flex w-max flex-row items-center space-x-2.5">
<p class="capitalize" x-text="who"></p>
<p :class="(!(getSignals(penalty, penaltyType, who).includes(27) || penalty.isDisqualification)) && 'hidden'" x-text="'#' + playerNumber" class="text-stone-300"></p>
<p class="select-none text-[1.6rem] text-white/80">(who)</p>
</div>
<div :class="penaltyType !== 'live' && 'hidden'" class="mr-auto flex w-max flex-row items-center space-x-2.5">
<p class="stroke-black stroke-1 text-red-500" x-text="playType"></p>
<p class="select-none text-[1.6rem] text-white/80">(when)</p>
</div>
<div class="mr-auto flex w-max flex-row items-center space-x-2.5">
<p class="capitalize text-purple-400" x-text="getRandom(penalty.enforcementSpots)"></p>
<p class="select-none text-[1.6rem] text-white/80">(where)</p>
</div>
<div class="mr-auto flex w-max flex-row items-center space-x-2.5">
<p class="text-sky-500" x-text="penalty.distance + ' yards'"></p>
<p :class="!(penalty.isLossOfDown && who !== 'defense' && playType !== 'After Change of Team Possession') && 'hidden'" class="text-sky-600" x-text="' (LoD)'"></p>
<p :class="!(penalty.isAutomaticFirst && who === 'defense') && 'hidden'" class="text-sky-600" x-text="' (Auto 1st)'"></p>
<p :class="!penalty.isDisqualification && 'hidden'" class="capitalize text-red-600" x-text="' (Disqualified)'"></p>
<p class="select-none text-[1.6rem] text-white/80">(enforcement)</p>
</div>
<!-- END: Penalty Result, What, Who, When, Where -->
<!-- START: Penalty Signals -->
<div class="flex flex-row items-center justify-center space-x-5 pt-8 pb-4">
<template x-for="signal in getSignals(penalty, penaltyType, playType, who)">
<img :src="'./assets/img/signal/' + signal + '.webp'" :alt="penalty.signal" class="h-48 select-none rounded-md" />
</template>
</div>
<!-- END: Penalty Signals -->
</div>
<!-- END: Penalty Information -->
<!-- START: How to Generate New Play -->
<p class="select-none rounded-md bg-black bg-opacity-30 p-3 px-6">
<span>Press</span>
<span class="cursor-pointer rounded-md bg-black/[85] p-0.5 px-1">SPACE</span>
<span>or</span>
<span class="cursor-pointer rounded-md bg-black/[85] p-0.5 px-1">ENTER</span>
<span>to Generate a New Play</span>
</p>
<!-- END: How to Generate New Play -->
</section>
</body>
</html>