Skip to content

Commit d9252a7

Browse files
CodinGameCommunityCodinGameCommunity
committed
Merge branch 'improve-stub-viewer' into 'master'
feat(sdk/stub): improve stub viewer See merge request codingame/game-engine!240
2 parents 77bec42 + 50ddde9 commit d9252a7

File tree

3 files changed

+179
-157
lines changed

3 files changed

+179
-157
lines changed

‎runner/src/main/resources/view/stub.css‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
html,
2+
body {
3+
height: 100%
4+
}
5+
6+
body {
7+
display: flex;
8+
padding: 10px;
9+
color: white;
10+
font-family: 'Open Sans', Lato, sans-serif;
11+
font-weight: 400;
12+
background-color: #363e48;
13+
}
14+
15+
textarea {
16+
color: white;
17+
background-color: #29323c;
18+
border: solid 1px #363e48;
19+
outline: none;
20+
}
21+
22+
button {
23+
border: none;
24+
font: inherit;
25+
cursor: pointer;
26+
margin: 0;
27+
padding: 0;
28+
}
29+
30+
*,
31+
:after,
32+
:before {
33+
box-sizing: border-box;
34+
-moz-box-sizing: border-box;
35+
-webkit-box-sizing: border-box;
36+
margin: 0;
37+
padding: 0;
38+
}
39+
40+
#stubInput {
41+
width: 600px;
42+
height: 230px;
43+
padding: 3px;
44+
}
45+
46+
#save {
47+
display: block;
48+
width: 300px;
49+
background-color: #f2bb13;
50+
color: #252e38;
51+
margin-top: 10px;
52+
text-transform: uppercase;
53+
font-size: 14px;
54+
font-weight: 600;
55+
min-height: 42px;
56+
}
57+
58+
#save:hover {
59+
opacity: 0.8;
60+
transition: 0.2s;
61+
}
62+
63+
#save:disabled {
64+
opacity: 0.8;
65+
cursor: default;
66+
}
67+
68+
.edit {
69+
flex: none;
70+
}
71+
72+
.preview {
73+
flex: 1;
74+
}
75+
76+
.edit,
77+
.preview {
78+
margin: 10px;
79+
background: #252e38;
80+
padding: 20px;
81+
}
82+
83+
.edit-title,
84+
.preview-title {
85+
font-size: 13px;
86+
font-weight: 600;
87+
color: #f2bb13;
88+
text-transform: uppercase;
89+
margin-bottom: 9px;
90+
}
91+
92+
#error,
93+
#result {
94+
font-size: 13px;
95+
}
96+
97+
#error {
98+
color: red;
99+
margin: 10px 0;
100+
}

‎runner/src/main/resources/view/stub.html‎

Lines changed: 13 additions & 157 deletions
Original file line numberDiff line numberDiff line change
@@ -1,167 +1,21 @@
1+
<!doctype html>
12
<html>
2-
<head>
3-
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism-tomorrow.css" rel="stylesheet" />
4-
<script src="./lib/cginput.js"></script>
5-
<script>
6-
function getPrismJsLanguage (language) {
7-
switch (language) {
8-
case 'C#':
9-
return 'csharp'
10-
case 'C++':
11-
return 'cpp'
12-
case 'F#':
13-
return 'fsharp'
14-
case 'VB.NET':
15-
return 'vbnet'
16-
case 'Python':
17-
case 'Python3':
18-
return 'python'
19-
default:
20-
return language.toLowerCase()
21-
}
22-
}
233

24-
function getStubInput () {
25-
return document.getElementById("stubInput").value
26-
}
4+
<head>
5+
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism-tomorrow.css" rel="stylesheet" />
6+
<link rel="stylesheet" type="text/css" href="stub.css">
277

28-
function refreshStub () {
29-
const resultNode = document.getElementById("result")
30-
const errorNode = document.getElementById("error")
31-
const languageId = document.getElementById("language").value
32-
const prismLanguage = getPrismJsLanguage(languageId)
8+
<script src="./lib/cginput.js"></script>
9+
<script src="stub.js"></script>
10+
</head>
3311

34-
try {
35-
resultNode.innerText = cginput.generateStub({ stubInput: getStubInput(), languageId: languageId })
36-
37-
resultNode.innerHTML = resultNode.innerHTML.replace(/[<]br[/]?[>]/gi,"\n");
38-
39-
resultNode.className = 'language-' + prismLanguage
40-
Prism.highlightElement(resultNode)
41-
42-
errorNode.innerText = ''
43-
resultNode.style.opacity = 1
44-
} catch (e) {
45-
errorNode.innerText = e.message
46-
resultNode.style.opacity = 0.2
47-
}
48-
}
49-
50-
async function load () {
51-
const response = await fetch('/services/stub')
52-
stub = await response.text()
53-
document.getElementById("stubInput").value = stub
54-
55-
refreshStub('java')
56-
}
57-
58-
async function save () {
59-
document.getElementById("save").disabled = true
60-
await fetch('/services/stub', {
61-
body: getStubInput(),
62-
method: 'PUT'
63-
})
64-
document.getElementById("save").innerText = 'Saved'
65-
}
66-
67-
function handleChangeStubInput () {
68-
document.getElementById("save").disabled = false
69-
document.getElementById("save").innerText = 'Save'
70-
refreshStub()
71-
}
72-
</script>
73-
<style>
74-
html, body {
75-
height: 100%
76-
}
77-
78-
body {
79-
color: white;
80-
font-family: 'Open Sans', Lato, sans-serif;
81-
font-weight: 400;
82-
background-color: #363e48;
83-
}
84-
85-
textarea {
86-
color: white;
87-
background-color: #29323c;
88-
border: solid 1px #363e48;
89-
outline: none;
90-
}
91-
92-
button {
93-
border: none;
94-
font: inherit;
95-
cursor: pointer;
96-
margin: 0;
97-
padding: 0;
98-
}
99-
100-
*, :after, :before {
101-
box-sizing: border-box;
102-
-moz-box-sizing: border-box;
103-
-webkit-box-sizing: border-box;
104-
margin: 0;
105-
padding: 0;
106-
}
107-
108-
#stubInput {
109-
width: 600px;
110-
height: 200px;
111-
}
112-
113-
#save {
114-
display: block;
115-
width: 300px;
116-
background-color: #f2bb13;
117-
color:#252e38;
118-
margin-top: 10px;
119-
text-transform: uppercase;
120-
font-size: 14px;
121-
font-weight: 600;
122-
min-height: 42px;
123-
}
124-
125-
#save:hover {
126-
opacity: 0.8;
127-
transition: 0.2s;
128-
}
129-
130-
#save:disabled {
131-
opacity: 0.8;
132-
cursor: default;
133-
}
134-
135-
.edit, .preview {
136-
margin: 10px;
137-
background: #252e38;
138-
padding: 20px;
139-
}
140-
141-
.edit-title, .preview-title {
142-
font-size: 13px;
143-
font-weight: 600;
144-
color: #f2bb13;
145-
text-transform: uppercase;
146-
margin-bottom: 9px;
147-
}
148-
149-
#error, #result {
150-
font-size: 13px;
151-
}
152-
153-
#error {
154-
color: red;
155-
margin: 10px 0;
156-
}
157-
</style>
158-
</head>
15912
<body onload="load()">
16013
<div class="edit">
161-
<div class="edit-title">Edit</div>
162-
<textarea id="stubInput" onkeyup="handleChangeStubInput()"></textarea>
14+
<div class="edit-title">Edit stub</div>
15+
<textarea id="stubInput" onkeyup="handleChangeStubInput()" spellcheck="false"></textarea>
16316
<button id="save" onclick="save()" disabled>Saved</button>
16417
</div>
18+
16519
<div class="preview">
16620
<div class="preview-title">Preview</div>
16721
<select id="language" onchange="refreshStub()">
@@ -198,6 +52,8 @@
19852
</div>
19953

20054
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-core.js"></script>
201-
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/plugins/autoloader/prism-autoloader.js" data-autoloader-path="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/"></script>
55+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/plugins/autoloader/prism-autoloader.js"
56+
data-autoloader-path="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/"></script>
20257
</body>
58+
20359
</html>

‎runner/src/main/resources/view/stub.js‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
function getPrismJsLanguage(language) {
2+
switch (language) {
3+
case 'C#':
4+
return 'csharp'
5+
case 'C++':
6+
return 'cpp'
7+
case 'F#':
8+
return 'fsharp'
9+
case 'VB.NET':
10+
return 'vbnet'
11+
case 'Python':
12+
case 'Python3':
13+
return 'python'
14+
default:
15+
return language.toLowerCase()
16+
}
17+
}
18+
19+
function getStubInput() {
20+
return document.getElementById('stubInput').value
21+
}
22+
23+
function refreshStub() {
24+
const resultNode = document.getElementById('result')
25+
const errorNode = document.getElementById('error')
26+
const languageId = document.getElementById('language').value
27+
const prismLanguage = getPrismJsLanguage(languageId)
28+
29+
try {
30+
resultNode.innerText = cginput.generateStub({ stubInput: getStubInput(), languageId: languageId })
31+
32+
resultNode.innerHTML = resultNode.innerHTML.replace(/[<]br[/]?[>]/gi, '\n')
33+
34+
resultNode.className = 'language-' + prismLanguage
35+
Prism.highlightElement(resultNode)
36+
37+
errorNode.innerText = ''
38+
resultNode.style.opacity = 1
39+
} catch (error) {
40+
errorNode.innerText = error.message
41+
resultNode.style.opacity = 0.2
42+
}
43+
}
44+
45+
async function load() {
46+
const response = await fetch('/services/stub')
47+
stub = await response.text()
48+
document.getElementById('stubInput').value = stub
49+
50+
refreshStub()
51+
}
52+
53+
async function save() {
54+
document.getElementById('save').disabled = true
55+
await fetch('/services/stub', {
56+
method: 'PUT',
57+
body: getStubInput()
58+
})
59+
document.getElementById('save').innerText = 'Saved'
60+
}
61+
62+
function handleChangeStubInput() {
63+
document.getElementById('save').disabled = false
64+
document.getElementById('save').innerText = 'Save'
65+
refreshStub()
66+
}

0 commit comments

Comments
 (0)