Skip to content

Commit 057fb70

Browse files
m---m---
committed
Merge branch 'viewer' into 'master'
update viewer for video and some little fix See merge request CBCTF/bullseye-web!64
2 parents a63ccc5 + 3cbe9f5 commit 057fb70

File tree

5 files changed

+150
-106
lines changed

5 files changed

+150
-106
lines changed

‎app/assets/javascripts/viewer/config.js‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,14 @@ const CONFIG = {}
22
CONFIG.OBJECTS_NUMBER = 100
33

44
switch (location.origin) {
5-
case 'https://bullseye.ctf.codeblue.jp':
6-
CONFIG.API_BASE = '/external_api/v1/viewer'
5+
case 'http://172.16.91.128:3000':
6+
CONFIG.API_BASE = 'http://172.e72e7b2cfe3d888d7a03.codeblue.ohcihsiek.jp/external_api/v1/viewer'
77
break
8-
default:
9-
CONFIG.API_BASE = 'http://e72e7b2cfe3d888d7a03f52f.codeblue.ohcihsiek.jp/external_api/v1/viewer'
8+
case 'http://192.168.246.129:3000':
9+
CONFIG.API_BASE = 'http://192.e72e7b2cfe3d888d7a03.codeblue.ohcihsiek.jp/external_api/v1/viewer'
1010
//CONFIG.API_BASE = 'http://bullseye.demo.ohcihsiek.jp/api'
1111
break
12+
default:
13+
CONFIG.API_BASE = '/external_api/v1/viewer'
14+
break
1215
}

‎app/assets/javascripts/viewer/utils.js‎

Lines changed: 1 addition & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,4 @@
11
/**
22
* bullseye viewer utils
33
*/
4-
5-
// init ajax
6-
$.ajaxSetup({xhrFields: {withCredentials: true}, async: false});
7-
8-
// util functions
9-
let _formatDate = function (start_at) {
10-
}
11-
12-
function viewer_formatRound(problem_id, round_id) {
13-
if (PROBLEMS[problem_id]['round'][round_id] === undefined) {
14-
return `R-`
15-
}
16-
17-
let start_date = new Date(Date.parse(PROBLEMS[problem_id]['round'][1]['start_at']))
18-
let date = new Date(Date.parse(PROBLEMS[problem_id]['round'][round_id]['start_at']))
19-
let day = (date.getDate() - start_date.getDate() + 1)
20-
let hour = ('0' + date.getHours()).slice(-2)
21-
let min = ('0' + date.getMinutes()).slice(-2)
22-
return `R${round_id} (${day}day ${hour}:${min})`
23-
}
24-
25-
// super globals
26-
window.PROBLEMS = {}
27-
$.getJSON(CONFIG.API_BASE + '/problems.json', (r) => {
28-
window.PROBLEMS = r
29-
for (let problem_id in r) {
30-
let round = Object.keys(r[problem_id]['round'])
31-
window.PROBLEMS[problem_id]['min_round'] = Math.min(...round)
32-
window.PROBLEMS[problem_id]['max_round'] = Math.max(...round)
33-
}
34-
})
35-
36-
// finalize
37-
$.ajaxSetup({async: true});
4+
$.ajaxSetup({xhrFields: {withCredentials: true}});

‎app/assets/stylesheets/viewer.css‎

Lines changed: 66 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,9 @@ h1, h1 a, #bullseye-logo a {
5151
.flex {
5252
display: flex;
5353
}
54+
.hide {
55+
display: none;
56+
}
5457

5558
#bullseye-menu a {
5659
display: inline-block;
@@ -191,22 +194,24 @@ h1, h1 a, #bullseye-logo a {
191194
#bullseye-nowexploiting .message {
192195
margin-top: 240px;
193196
}
194-
#bullseye-nowexploiting input {
195-
background: none;
196-
border: none;
197-
198-
font-size: 128px;
199-
font-weight: bold;
200-
color: #fff;
201-
font-family: Orbitron;
202-
text-shadow:
203-
0px 0px 0.5em rgba(0,188,255,0.5),
204-
0px 0px 0.3em rgba(0,188,255,0.5),
205-
0px 0px 0.2em rgba(0,188,255,1);
206-
letter-spacing: 2px;
207-
text-align: center;
208-
}
209-
197+
#bullseye-nowexploiting .message input {
198+
background: none;
199+
border: none;
200+
201+
font-size: 128px;
202+
font-weight: bold;
203+
color: #fff;
204+
font-family: Orbitron;
205+
text-shadow:
206+
0px 0px 0.5em rgba(0,188,255,0.5),
207+
0px 0px 0.3em rgba(0,188,255,0.5),
208+
0px 0px 0.2em rgba(0,188,255,1);
209+
letter-spacing: 2px;
210+
text-align: center;
211+
}
212+
#bullseye-nowexploiting .message input.text {
213+
width: 100%;
214+
}
210215

211216
/* play */
212217
.bullseye-status-panel {
@@ -306,29 +311,56 @@ h1, h1 a, #bullseye-logo a {
306311
#bullseye-result {
307312
background: rgba(0,64,128,0.5);
308313
}
309-
#bullseye-result.perfect {
310-
background: rgba(12,180,12,0.3);
311-
}
312-
#bullseye-result .flex {
313-
margin-top: 180px;
314-
justify-content: center;
315-
align-items: center;
314+
#bullseye-result.perfect {
315+
background: rgba(12,180,12,0.3);
316+
}
317+
#bullseye-result .flex {
318+
margin-top: 180px;
319+
justify-content: center;
320+
align-items: center;
321+
cursor: pointer;
322+
}
323+
#bullseye-result .team .name {
324+
font-size: 64px;
325+
}
326+
#bullseye-result .problem {
327+
padding: 48px 0 0 48px;
328+
font-size: 48px;
329+
}
330+
#bullseye-result .problem .name {
331+
margin-bottom: 24px;
332+
}
333+
#bullseye-result .problem .count {
334+
line-height: 64px;
335+
}
336+
#bullseye-result.perfect .problem .count {
337+
font-size: 64px;
338+
line-height: 96px;
339+
}
340+
341+
#bullseye-x11-menu {
342+
font-size: 24px;
316343
}
317-
#bullseye-result .problem {
318-
padding: 48px 0 0 48px;
319-
font-size: 48px;
344+
#bullseye-x11-menu span {
345+
text-decoration: underline;
346+
cursor: pointer;
347+
color: #fff;
320348
}
321-
#bullseye-result .problem .name {
322-
margin-bottom: 24px;
349+
#bullseye-x11-video-close {
350+
color: #ccc;
323351
}
324-
#bullseye-result .problem .count {
325-
line-height: 64px;
352+
#bullseye-x11-video {
353+
position: absolute;
354+
left: 50%;
355+
margin-top: 120px;
356+
margin-left: -400px;
357+
width: 800px;
326358
}
327-
#bullseye-result.perfect .problem .count {
328-
font-size: 64px;
329-
line-height: 96px;
359+
#bullseye-x11-video video {
360+
width: 800px;
330361
}
331362

363+
/*
332364
@media screen and (min-width: 1900px) {
333365
#bullseye-team {
334366
padding: 18px;
@@ -373,6 +405,7 @@ h1, h1 a, #bullseye-logo a {
373405
line-height: 144px;
374406
}
375407
}
408+
*/
376409

377410
/* table */
378411
table.table {

‎app/views/viewer/index.html.erb‎

Lines changed: 31 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@
2020
<div id="bullseye-teams"></div>
2121
<div id="bullseye-nowexploiting">
2222
<div class="message">
23-
<input type="text" style="width:100%;"><br>
24-
<input type="time">
23+
<input type="text" value="Now evaluation" class="text">
24+
<!--<input type="time">-->
2525
</div>
2626
</div>
2727

@@ -77,6 +77,8 @@
7777

7878
<script>
7979
$(() => {
80+
let PROBLEMS = {}
81+
8082
let setPlayed = (schedule_team_id, schedule_id, problem_id, current_round) => {
8183
let played = JSON.parse(localStorage.played || '{}')
8284

@@ -99,13 +101,26 @@ $(() => {
99101
let selectRound = (problem_id, round) => {
100102
localStorage.currentRound = round
101103
$('#bullseye-problems-round-selected').data('round', round)
102-
$('#bullseye-problems-round-selected').text(viewer_formatRound(problem_id, round))
104+
$('#bullseye-problems-round-selected').text(formatRound(problem_id, round))
103105
}
104106

105107
let getRound = () => {
106108
return $('#bullseye-problems-round-selected').data('round')
107109
}
108110

111+
let formatRound = (problem_id, round_id) => {
112+
if (PROBLEMS[problem_id]['round'][round_id] === undefined) {
113+
return `R-`
114+
}
115+
116+
let start_date = new Date(Date.parse(PROBLEMS[problem_id]['round'][1]['start_at']))
117+
let date = new Date(Date.parse(PROBLEMS[problem_id]['round'][round_id]['start_at']))
118+
let day = (date.getDate() - start_date.getDate() + 1)
119+
let hour = ('0' + date.getHours()).slice(-2)
120+
let min = ('0' + date.getMinutes()).slice(-2)
121+
return `R${round_id} (${day}day ${hour}:${min})`
122+
}
123+
109124
let selectProblem = (problem_id, current_round) => {
110125
if (problem_id === -1) {
111126
$('#bullseye-problems-selected')
@@ -123,7 +138,10 @@ $(() => {
123138
// set round panel
124139
let _rounds = {}
125140
for (let i = PROBLEMS[problem_id]['min_round']; i <= PROBLEMS[problem_id]['max_round']; i++) {
126-
_rounds[i] = viewer_formatRound(problem_id, i)
141+
if (PROBLEMS[problem_id]['round'][i] === undefined) {
142+
continue
143+
}
144+
_rounds[i] = formatRound(problem_id, i)
127145
}
128146
$('#bullseye-problems-round').html($('#bullseye-template-problems-round').render({'rounds': _rounds}))
129147
selectRound(problem_id, current_round || PROBLEMS[problem_id]['max_round'])
@@ -281,6 +299,15 @@ $(() => {
281299

282300
$.getJSON(CONFIG.API_BASE + '/teams.json', (r) => {
283301
loadTeams(r)
302+
})
303+
304+
$.getJSON(CONFIG.API_BASE + '/problems.json', (r) => {
305+
PROBLEMS = r
306+
for (let problem_id in r) {
307+
let round = Object.keys(r[problem_id]['round'])
308+
PROBLEMS[problem_id]['min_round'] = Math.min(...round)
309+
PROBLEMS[problem_id]['max_round'] = Math.max(...round)
310+
}
284311
loadProblems()
285312
})
286313

‎app/views/viewer/play.html.erb‎

Lines changed: 45 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -40,21 +40,19 @@
4040
</script>
4141

4242
<script type="text/x-jsrender" id="bullseye-template-result-x11">
43+
<div id="bullseye-x11-video" class="hide"><video controls></div>
44+
<div id="bullseye-x11-menu" class="hide">
45+
Play capture |
46+
<span id="bullseye-x11-video-close">close</span>
47+
</div>
4348
<div class="flex">
44-
<div class="items team">
45-
<div class="menu">
46-
play capture
47-
<a href="#">success</a>
48-
<a href="#">failed</a>
49-
</div>
50-
</div>
5149
<div class="items team">
5250
<div class="name">{{>team_name}}</div>
5351
</div>
5452
<div class="items problem">
5553
<div class="name">{{>problem_name}}</div>
5654
<div class="score">
57-
<div class="count">{{>count}}</div>
55+
<div class="count">{{:count}}</div>
5856
<div class="point">+{{>score}}pt</div>
5957
</div>
6058
</div>
@@ -136,6 +134,24 @@ $(() => {
136134
})
137135
}
138136

137+
let x11play = (type) => {
138+
$.getJSON(`${CONFIG.API_BASE}/capture_id/${ID}/${type}.json`, (r) => {
139+
if (r.id === null) {
140+
alert('Not found caputre')
141+
}
142+
$('#bullseye-x11-video').removeClass('hide')
143+
$('#bullseye-x11-video video').attr('src', `<%= url_for :action => 'capture' %>?id=${r.id}`)
144+
})
145+
}
146+
147+
let formatTime = (start_at) => {
148+
let date = new Date(Date.parse(start_at))
149+
//let day = date.getDate()
150+
let hour = ('0' + date.getHours()).slice(-2)
151+
let min = ('0' + date.getMinutes()).slice(-2)
152+
return `${hour}:${min}`
153+
}
154+
139155
let action = (r) => {
140156
let rate = Math.floor(r.problem.succeeded / r.problem.ntrials * 100)
141157
let exploitCountId = 0
@@ -212,9 +228,10 @@ $(() => {
212228
'count': (perfect ? "Bull's Eye<br>" : '') + r.problem.succeeded + ' / ' + r.problem.ntrials,
213229
'score': r.problem.score,
214230
}
231+
let element = (r.problem.x11_required) ? '#bullseye-template-result-x11' : '#bullseye-template-result'
215232
$('#bullseye-result')
216233
.addClass(perfect ? 'perfect' : '')
217-
.append($('#bullseye-template-result').render(param))
234+
.append($(element).render(param))
218235
.fadeIn(200)
219236
$('#bullseye-problem-succeeded').text(r.problem.succeeded)
220237

@@ -228,31 +245,28 @@ $(() => {
228245
}
229246
}
230247

231-
//if (r.problem.x11_required) {
232-
// $('#bullseye-result').click(finalize)
233-
//} else {
234-
// $('#bullseye-result').click(finalize)
235-
// setTimeout(finalize, 5000)
236-
//}
237-
$('#bullseye-result').click(finalize)
238-
setTimeout(finalize, 5000)
248+
if (r.problem.x11_required) {
249+
// video
250+
$('#bullseye-x11-video-close').click(() => { $('#bullseye-x11-video').addClass('hide') })
251+
$('#bullseye-x11-video video').error(() => { alert('Broken video X(') })
252+
$.getJSON(`${CONFIG.API_BASE}/capture_type/${ID}.json`, (r) => {
253+
types = r['types']
254+
if (types.length > 0) {
255+
$('#bullseye-x11-menu').removeClass('hide')
256+
}
257+
$.each(types, (index, value) => {
258+
let menu = $(`<span>${value}</span>`).click(() => { x11play(value) })
259+
$('#bullseye-x11-menu').append(menu)
260+
})
261+
})
262+
} else {
263+
setTimeout(finalize, 5000)
264+
}
265+
$('#bullseye-result .flex').click(finalize)
239266
})
240267
}
241268

242269
let test = (r) => {
243-
let perfect = r.problem.succeeded === r.problem.ntrials
244-
let param = {
245-
'team_name': r.team.name,
246-
'team_id': r.team.team_id,
247-
'problem_name': r.problem.name,
248-
'round': r.problem.round_id,
249-
'count': (perfect ? "Bull's Eye<br>" : '') + r.problem.succeeded + ' / ' + r.problem.ntrials,
250-
'score': r.problem.score,
251-
}
252-
$('#bullseye-result')
253-
.addClass(perfect ? 'perfect' : '')
254-
.append($('#bullseye-template-result-x11').render(param))
255-
.fadeIn(200)
256270
}
257271

258272
// dispatch
@@ -261,7 +275,7 @@ $(() => {
261275
$('#bullseye-team').append($('#bullseye-template-team').render(r.team))
262276
$('#bullseye-problem').append($('#bullseye-template-problem').render(r.problem))
263277

264-
let round = {'round': parseInt(r.problem.round_id), 'time': viewer_formatRound(r.problem.problem_id, r.problem.round_id)}
278+
let round = {'round': parseInt(r.problem.round_id), 'time': formatTime(r.problem.round_start_at)}
265279
$('#bullseye-problem-round').append($('#bullseye-template-problem-round').render(round))
266280

267281
action(r)

0 commit comments

Comments
 (0)