-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
160 lines (145 loc) · 8.58 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Rounds Game 1vs1 • Score Board</title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
<style>
[x-cloak] {
display: none !important;
}
table tr:nth-child(3) {
background-color: rgba(209, 250, 229, 1);
}
table tr:nth-child(4) {
background-color: rgba(254, 243, 199, 1);
}
table tr:last-child {
background-color: rgba(254, 226, 226, 1);
}
</style>
</head>
<body class="min-h-screen bg-gray-100 font-sans">
<div class="px-10 flex-col justify-center" x-data="game()">
<section class="w-full p-8">
<header>
<h1 class="text-xl text-blue-500 text-center border-dotted border-b-2 pb-2 mb-8">Rounds Game 1vs1 •
Score Board</h1>
</header>
<div x-show="players.length >= 2" x-cloak class="mb-8 pl-4 text-center text-gray-400">
<span class="text-xs text-gray-400">Rules & options:</span><br>
<label>Rounds:</label>
<input type="number" step="1" min="1" pattern="\d+" x-model="options.roundsForWin" class="text-md w-8"
:disabled="currentRoundScore.first > 0 || currentRoundScore.second > 0"
title="How many rounds is needed to won for win the one game?">
<label>Margin:</label>
<input type="number" step="1" min="1" pattern="\d+" x-model="options.marginForWin" class="text-md w-8"
:disabled="currentRoundScore.first > 0 || currentRoundScore.second > 0"
title="The difference in the score needed to win the round">
</div>
<p x-show="players.length < 2" x-cloak class="w-full text-red-400 text-center mt-16">Create at least two
players to play the game</p>
<div class="flex w-full flex-col" x-show="players.length >= 2" x-cloak>
<div class="w-full flex">
<select @change="resetCurrentRoundScore" x-model="firstPlayer"
class="inline-block w-5/12 appearance-none bg-white border border-gray-300 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight text-3xl focus:outline-none focus:shadow-outline">
<option value="" class="text-grey-300">Select Player 1</option>
<template x-for="option in players" :key="option.id">
<option :value="option.id" x-text="option.name" :disabled="option.id == secondPlayer">
</option>
</template>
</select>
<div class="w-2/12 text-center text-2xl pt-3">VS.</div>
<select @change="resetCurrentRoundScore" x-model="secondPlayer"
class="inline-block w-5/12 appearance-none bg-white border border-gray-300 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight text-3xl focus:outline-none focus:shadow-outline">
<option value="" class="text-grey-300">Select Player 2</option>
<template x-for="option in players" :key="option.id">
<option :value="option.id" x-text="option.name" :disabled="option.id == firstPlayer">
</option>
</template>
</select>
</div>
<div class="mt-8 w-full flex" x-show="playerOne && playerTwo" x-cloak>
<input type="number" min="0" step="1" pattern="\d+" placeholder="0"
x-model="currentRoundScore.firstScore" @change="checkScores()"
class="focus:outline-none focus:ring focus:ring-green-300 focus:border-green-300 text-8xl border w-5/12 text-center">
<div class="w-2/12 text-center text-8xl"> - </div>
<input type="number" min="0" step="1" pattern="\d+" placeholder="0"
x-model="currentRoundScore.secondScore" @change="checkScores()"
class="focus:outline-none focus:ring focus:ring-green-300 focus:border-green-300 text-8xl border w-5/12 text-center">
</div>
<div x-show="playerOne && playerTwo" x-cloak>
<button class="text-white rounded bg-red-300 text-xs p-0.5 float-left"
@click="declareWinner(playerTwo, playerOne)">Surrender</button>
<button class="text-white rounded bg-red-300 text-xs p-0.5 float-right"
@click="declareWinner(playerOne, playerTwo)">Surrender</button>
</div>
</div>
</section>
<section class="w-full p-8">
<h1 x-show="players.length >= 2" x-cloak
class="text-xl text-blue-500 text-center border-dotted border-b-2 pb-2 mb-8">
Players Standings
</h1>
<table x-show="players.length >= 2" x-cloak class="w-full text-center shadow rounded">
<tr class="bg-blue-500 text-white text-lg">
<th>Player</th>
<th>Games</th>
<th>Wins</th>
<th>Loses</th>
<th>%</th>
</tr>
<template x-for="option in players">
<tr class="border-b bg-white">
<td x-text="option.name"></td>
<td x-text="option.games"></td>
<td x-text="option.wins"></td>
<td x-text="option.games - option.wins"></td>
<td x-text="option.percentage"></td>
</tr>
</template>
</table>
<div class="w-full mt-16 flex items-center justify-center">
<div class="p-2 shadow rounded flex flex-col items-center justify-center">
<p x-show="players.length > 0" x-cloak class="text-gray-400 text-xs text-center">Players management
</p>
<input @keyup.enter="addPlayer()" title="Enter player name to create new player"
class="border border-gray-200 my-4 p-2 focus:outline-none focus:ring focus:ring-blue-300 focus:border-blue-300 text-center"
placeholder="Add new player" x-model="newPlayer">
<ul>
<template x-for="player in players" :key="player.id">
<li class="w-full flex">
<input x-model="player.name" title="Edit player name (Press Enter to save)"
@keyup.enter="editComplete(player)"
class="focus:outline-none p-1 focus:ring focus:ring-1 focus:ring-blue-300 focus:border-blue-300 focus:border-blue-300 my-1 mr-1">
<button @click="deletePlayer(player)" title="Delete player"
class="w-4 h-full p-1 bg-red-100 text-white rounded text-sm mt-2">x</button>
</li>
</template>
</ul>
</div>
</div>
</section>
</div>
<!-- Flash Message -->
<div x-data="{ show: false, message: '', type: '' }"
class="p-2 fixed w-full h-100 inset-0 z-50 overflow-hidden flex justify-center items-center bg-opacity-75"
x-show.transition.opacity="show" x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100"
x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 transform scale-100"
x-transition:leave-end="opacity-0 transform scale-90"
:class="{'bg-green-700' : type == 'success', 'bg-red-700' : type == 'failure' }" @flash.window="
message = $event.detail.message.text;
type = $event.detail.message.type;
show = true;
setTimeout(() => show = false, 2000)">
<div :class="{'bg-green-900' : type == 'success', 'bg-red-900' : type == 'failure' }" class="m-4 sm:m-8"
x-show="show">
<div class="p-2 text-4xl text-white" x-text="message"></div>
</div>
</div>
<script src="scores.js"></script>
</body>
</html>