-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
187 lines (185 loc) · 9.88 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
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title data-lang="ui.title">Table Tennis Counter</title>
<link rel="stylesheet" href="./assets/css/styles.css" />
<link rel="shortcut icon" href="./assets/img/icon.svg" type="image/svg+xml" />
<link rel="shortcut icon" href="./assets/img/icon.png" type="image/png" />
<link rel="apple-touch-icon" href="./assets/img/icon.png" />
</head>
<body>
<s-page id="page" theme="auto">
<s-linear-progress id="top-loading" indeterminate="true"></s-linear-progress>
<s-appbar id="top-bar">
<!--标题-->
<div slot="headline" data-lang="ui.title">Table Tennis Counter</div>
<!--右侧操作按钮-->
<!-- Language -->
<s-popup-menu slot="action" id="language-menu">
<s-tooltip slot="trigger" data-lang="ui.topbar.language">
<s-icon-button slot="trigger">
<s-icon>
<svg viewBox="0 -960 960 960">
<path d="m476-80 182-480h84L924-80h-84l-43-122H603L560-80h-84ZM160-200l-56-56
202-202q-35-35-63.5-80T190-640h84q20 39 40 68t48 58q33-33
68.5-92.5T484-720H40v-80h280v-80h80v80h280v80H564q-21 72-63
148t-83 116l96 98-30 82-122-125-202 201Zm468-72h144l-72-204-72 204Z">
</path>
</svg>
</s-icon>
</s-icon-button>
</s-tooltip>
</s-popup-menu>
<!-- Theme -->
<s-tooltip slot="action" data-lang="ui.topbar.theme">
<s-icon-button slot="trigger" onclick="e_toggleTheme()">
<s-icon type="light_mode" id="theme-icon"></s-icon>
</s-icon-button>
</s-tooltip>
<!-- More -->
<s-popup-menu slot="action">
<s-tooltip slot="trigger" data-lang="ui.topbar.more">
<s-icon-button slot="trigger">
<s-icon type="more_horiz"></s-icon>
</s-icon-button>
</s-tooltip>
<!-- GitHub -->
<s-popup-menu-item data-lang="ui.topbar.reload" onclick="e_reloadPage()">
<s-icon slot="start">
<svg viewBox="0 -960 960 960">
<path d="M480-160q-134 0-227-93t-93-227q0-134 93-227t227-93q69 0 132
28.5T720-690v-110h80v280H520v-80h168q-32-56-87.5-88T480-720q-100 0-170 70t-70
170q0 100 70 170t170 70q77 0 139-44t87-116h84q-28 106-114 173t-196 67Z">
</path>
</svg>
</s-icon>
</s-popup-menu-item>
<!-- GitHub -->
<s-popup-menu-item data-lang="ui.topbar.github" onclick="e_gotoGitHub()">
<s-icon slot="start">
<svg viewBox="0 0 1024 1024">
<path d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8
946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215
726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26
5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95
48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9
70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9
2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200
212.9 23.5 23.2 38.1 55.4 38.1 91v112.5c0.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227
304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z">
</path>
</svg>
</s-icon>
</s-popup-menu-item>
</s-popup-menu>
</s-appbar>
<s-scroll-view id="main">
<div class="responsive-flexbox" id="setup">
<div id="setup-settings">
<div class="form-group">
<!-- Winning Balls -->
<s-text-field data-lang="ui.setup.winningBalls" data-lang-prop="label">
<input type="text" id="winBalls" value="5">
</s-text-field>
</div>
<div class="form-group" id="playerInputGroup">
<!-- Player Name -->
<s-text-field data-lang="ui.setup.playerName" data-lang-prop="label">
<input type="text" id="playerName" />
<!-- Add Player -->
<s-button type="text" slot="end" data-lang="ui.setup.addPlayer" onclick="addPlayer()">
<s-icon slot="start" type="add"></s-icon>
</s-button>
</s-text-field>
</div>
<div class="form-group">
<!-- Sober已经有下拉输入框力，太好力！ -->
<s-picker class="dropdown-input" id="serveRule" data-lang="ui.setup.serveRule" data-lang-prop="label">
<!-- None -->
<s-picker-item data-lang="ui.setup.serveRule.none"></s-picker-item>
<!-- In Turn -->
<s-picker-item data-lang="ui.setup.serveRule.inTurn"></s-picker-item>
</s-picker>
</div>
<div class="form-group" id="rotationalServesGroup" hidden>
<!-- Balls Each Turn -->
<s-text-field data-lang="ui.setup.rotationalServes" data-lang-prop="label">
<input type="text" id="rotationalServes" value="2">
</s-text-field>
</div>
</div>
<div id="setup-list">
<div class="player-list" id="playerListGroup">
<h2 id="playerListTitle" data-lang="ui.setup.playerListHint"></h2>
<ul id="playerList"></ul>
</div>
<!-- Start Game -->
<!-- 我也不知道为啥，这里必须手动指定data-lang-prop -->
<s-button class="start-button" id="startGameButton" data-lang="ui.setup.startGame" data-lang-prop="innerText" onclick="startGame()"></s-button>
</div>
</div>
<div id="gameBoardWrapper">
<!-- Tab控制 -->
<s-tab class="game-board" id="gameBoardSelector" onchange="e_boardSelectChange()">
<s-tab-item selected="true">
<div slot="text" data-lang="ui.gameBoard.tab.score"></div>
</s-tab-item>
<s-tab-item>
<div slot="text" data-lang="ui.gameBoard.tab.history"></div>
</s-tab-item>
<s-tab-item>
<div slot="text" data-lang="ui.gameBoard.tab.info"></div>
</s-tab-item>
</s-tab>
<div id="gameBoard">
<!-- Tab：计分 -->
<div class="responsive-flexbox active" id="board-score">
<div id="currentMatchContainer">
<!-- Current Match -->
<h2 data-lang="ui.gameBoard.currentMatch"></h2>
<div id="currentMatch"></div>
<div class="result-group">
<p id="result"></p>
</div>
</div>
<div id="playerScores">
<!-- Player Scores -->
<h2 data-lang="ui.gameBoard.playerScores"></h2>
<ul id="playerScoreList"></ul>
</div>
</div>
<!-- Tab：历史 -->
<div id="board-history">
<div id="matchHistory">
<h2 data-lang="ui.gameBoard.matchHistory"></h2>
<ul id="historyList"></ul>
</div>
</div>
<!-- Tab：信息 -->
<div id="board-info">
<div id="matchOrderContainer">
<!-- Match Order -->
<h2 data-lang="ui.gameBoard.matchOrder"></h2>
<ul id="matchOrderList"></ul>
</div>
</div>
</div>
</div>
</s-scroll-view>
<div id="tooltips">
<s-snackbar id="snackbar-snackbar">
Snackbar Message
</s-snackbar>
</div>
</s-page>
<!-- 引入Sober界面库 -->
<!-- 要让sober的引入在最前面，这样sober才能最先执行 -->
<script src="https://unpkg.com/[email protected]/dist/sober.min.js"></script>
<script defer src="./assets/js/utils.js"></script>
<script defer src="./assets/js/lang.js"></script>
<script defer src="./assets/js/script.js"></script>
<script defer src="./assets/js/ui.js"></script>
</body>
</html>