Skip to content

Commit dd4e7e5

Browse files
author
Jay Ng
committed
feature(statement preview): add preview for statement
just like the stub
1 parent 876c280 commit dd4e7e5

16 files changed

+450
-8
lines changed

‎runner/src/main/java/com/codingame/gameengine/runner/Renderer.java

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -682,8 +682,7 @@ public void handleRequest(HttpServerExchange exchange) throws Exception {
682682
}
683683

684684
exchange.setStatusCode(StatusCodes.OK);
685-
}
686-
if (exchange.getRelativePath().equals("/stub")) {
685+
} else if (exchange.getRelativePath().equals("/stub")) {
687686
File stubFile = sourceFolderPath.resolve("config/stub.txt").toFile();
688687
if (exchange.getRequestMethod().equalToString("GET")) {
689688
String stub = FileUtils.readFileToString(stubFile, StandardCharsets.UTF_8);
@@ -700,6 +699,23 @@ public void handleRequest(HttpServerExchange exchange) throws Exception {
700699
} else {
701700
exchange.setStatusCode(StatusCodes.NOT_FOUND);
702701
}
702+
} else if (exchange.getRelativePath().equals("/statement")) {
703+
File statementFile = sourceFolderPath.resolve("config/statement_en.html").toFile();
704+
if (exchange.getRequestMethod().equalToString("GET")) {
705+
String statement = FileUtils.readFileToString(statementFile, StandardCharsets.UTF_8);
706+
exchange.getResponseSender().send(statement);
707+
} else if (exchange.getRequestMethod().equalToString("PUT")) {
708+
exchange.getRequestReceiver().receiveFullString((e, data) -> {
709+
try {
710+
FileUtils.write(statementFile, data, StandardCharsets.UTF_8);
711+
exchange.setStatusCode(StatusCodes.CREATED);
712+
} catch (IOException ex) {
713+
sendException(e, ex, StatusCodes.BAD_REQUEST);
714+
}
715+
});
716+
} else {
717+
exchange.setStatusCode(StatusCodes.NOT_FOUND);
718+
}
703719
}
704720
} catch (MissingConfigException e) {
705721
sendException(exchange, e, StatusCodes.UNPROCESSABLE_ENTITY);

‎runner/src/main/resources/view/images/statement/icon_statement_download.png

479 Bytes
Loading

‎runner/src/main/resources/view/images/statement/icon_statement_examples.png

341 Bytes
Loading

‎runner/src/main/resources/view/images/statement/icon_statement_expert_rules.png

592 Bytes
Loading

‎runner/src/main/resources/view/images/statement/icon_statement_goal.png

624 Bytes
Loading

‎runner/src/main/resources/view/images/statement/icon_statement_hint.png

395 Bytes
Loading

‎runner/src/main/resources/view/images/statement/icon_statement_lose_conditions.png

816 Bytes
Loading

‎runner/src/main/resources/view/images/statement/icon_statement_protocol.png

340 Bytes
Loading

‎runner/src/main/resources/view/images/statement/icon_statement_pseudo_code_algorithm.png

512 Bytes
Loading

‎runner/src/main/resources/view/images/statement/icon_statement_rules.png

478 Bytes
Loading

‎runner/src/main/resources/view/images/statement/icon_statement_victory_conditions.png

915 Bytes
Loading

‎runner/src/main/resources/view/images/statement/icon_statement_warning.png

552 Bytes
Loading

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

Lines changed: 356 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,356 @@
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+
line-height: 1.6
14+
}
15+
16+
textarea {
17+
color: white;
18+
background-color: #29323c;
19+
border: solid 1px #363e48;
20+
outline: none;
21+
}
22+
23+
button {
24+
border: none;
25+
font: inherit;
26+
cursor: pointer;
27+
margin: 0;
28+
padding: 0;
29+
}
30+
31+
*,
32+
:after,
33+
:before {
34+
box-sizing: border-box;
35+
-moz-box-sizing: border-box;
36+
-webkit-box-sizing: border-box;
37+
margin: 0;
38+
padding: 0;
39+
}
40+
41+
#statementInput {
42+
width: 600px;
43+
height: 600px;
44+
padding: 3px;
45+
}
46+
47+
#save {
48+
display: block;
49+
width: 300px;
50+
background-color: #f2bb13;
51+
color: #252e38;
52+
margin-top: 10px;
53+
text-transform: uppercase;
54+
font-size: 14px;
55+
font-weight: 600;
56+
min-height: 42px;
57+
}
58+
59+
#save:hover {
60+
opacity: 0.8;
61+
transition: 0.2s;
62+
}
63+
64+
#save:disabled {
65+
opacity: 0.8;
66+
cursor: default;
67+
}
68+
69+
.edit {
70+
flex: none;
71+
background: #252e38;
72+
margin: 10px;
73+
padding: 20px;
74+
}
75+
76+
.edit-title,
77+
.preview-title {
78+
font-size: 13px;
79+
font-weight: 600;
80+
color: #f2bb13;
81+
text-transform: uppercase;
82+
margin-bottom: 9px;
83+
}
84+
85+
#error,
86+
#result {
87+
font-size: 13px;
88+
}
89+
90+
#error {
91+
color: red;
92+
margin: 10px 0;
93+
}
94+
95+
.edit-title,
96+
.preview-title {
97+
font-size: 13px;
98+
font-weight: 600;
99+
color: #f2bb13;
100+
text-transform: uppercase;
101+
margin-bottom: 9px;
102+
}
103+
104+
/* statement css */
105+
106+
.code {
107+
border: 1px solid #f2bb13;
108+
padding: 1px 2px;
109+
line-height: 21px;
110+
font-size: 13px;
111+
}
112+
113+
.statement-section {
114+
padding-bottom: 30px;
115+
}
116+
117+
.statement-body {
118+
color: #20252a;
119+
background-color: white;
120+
padding-top: 15px;
121+
font-weight: 400;
122+
font-size: 14px;
123+
line-height: 19px;
124+
overflow: scroll;
125+
width: 100%;
126+
padding: 20px;
127+
}
128+
129+
.statement-body ol, ul {
130+
padding-left: 20px;
131+
margin-top: 10px;
132+
margin-bottom: 10px;
133+
}
134+
135+
.statement-body action {
136+
display: inline-block;
137+
font-family: Inconsolata,consolas,monospace;
138+
padding: 0 4px;
139+
background-color: #18a1ea;
140+
white-space: nowrap;
141+
margin: 0px;
142+
color: white;
143+
font-weight: normal;
144+
border-radius: 3px;
145+
}
146+
147+
.statement-body span.const,
148+
.statement-body const {
149+
color: #18a1ea;
150+
padding-left: 2px;
151+
padding-right: 2px;
152+
padding-top: 2px;
153+
font-size: 12px;
154+
font-weight: 700;
155+
}
156+
157+
.statement-body span.var,
158+
.statement-body var {
159+
font-size: 12px;
160+
padding-left: 4px;
161+
padding-right: 4px;
162+
padding-top: 1px;
163+
padding-bottom: 1px;
164+
background-color: #f2bb13;
165+
color: #20252a;
166+
font-style: normal;
167+
font-weight: 400;
168+
display: inline-block;
169+
border-radius: 3px;
170+
}
171+
172+
.statement-body h1,
173+
.statement-body h2 {
174+
color: #838891;
175+
font-size: 14px;
176+
font-weight: bold;
177+
margin-bottom: 15px;
178+
margin-top: 0;
179+
}
180+
181+
.statement-body h3 {
182+
font-size: 1.2em;
183+
margin: .83em 0;
184+
}
185+
.statement-body h4 {
186+
margin: 1.12em 0;
187+
}
188+
.statement-body blockquote {
189+
padding: 10px 20px;
190+
margin: 0 0 20px 0;
191+
border-left: 5px solid #e7e9eb;
192+
}
193+
.statement-body blockquote p {
194+
color: #989898;
195+
margin-bottom: 0;
196+
}
197+
.statement-body a,
198+
.statement-body a:visited,
199+
.statement-body a:active,
200+
.statement-body a:hover {
201+
transition: color .2s ease-in-out;
202+
border-bottom: none;
203+
}
204+
.statement-body a,
205+
.statement-body a:visited,
206+
.statement-body a:active {
207+
color: #1a99aa;
208+
}
209+
.statement-body table {
210+
border-collapse: collapse;
211+
background: #f9f9f9;
212+
width: 100%;
213+
}
214+
.statement-body table, th, td {
215+
border: 1px solid #dadada;
216+
}
217+
.statement-body th, td {
218+
padding: 5px;
219+
}
220+
.statement-body pre {
221+
margin-bottom: 20px;
222+
}
223+
224+
.statement-body .statement-section .icon {
225+
margin-left: 2px;
226+
display: inline-block;
227+
vertical-align: middle;
228+
}
229+
.statement-body .statement-section.statement-goal .icon.icon-goal {
230+
background-image: url("/images/statement/icon_statement_goal.png");
231+
width: 20px;
232+
height: 20px;
233+
}
234+
.statement-body .statement-section.statement-rules .icon.icon-rules {
235+
background-image: url("/images/statement/icon_statement_rules.png");
236+
width: 20px;
237+
height: 20px;
238+
}
239+
.statement-body .statement-section.statement-expertrules .icon.icon-expertrules {
240+
background-image: url("/images/statement/icon_statement_expert_rules.png");
241+
width: 20px;
242+
height: 20px;
243+
}
244+
.statement-body .statement-section.statement-warning .icon.icon-warning {
245+
background-image: url("/images/statement/icon_statement_warning.png");
246+
width: 20px;
247+
height: 20px;
248+
}
249+
.statement-body .statement-section.statement-protocol .icon.icon-protocol {
250+
background-image: url("/images/statement/icon_statement_protocol.png");
251+
width: 20px;
252+
height: 20px;
253+
}
254+
.statement-body .statement-section.statement-examples .icon.icon-example {
255+
background-image: url("/images/statement/icon_statement_examples.png");
256+
width: 20px;
257+
height: 20px;
258+
}
259+
260+
.statement-victory-conditions {
261+
color: #1a99aa;
262+
background-color: rgba(26, 153, 170, 0.1);
263+
padding: 20px;
264+
margin-top: 10px;
265+
display: flex;
266+
align-items: center;
267+
}
268+
.statement-victory-conditions .icon {
269+
vertical-align: middle;
270+
text-align: center;
271+
margin-left: 8px;
272+
margin-right: 25px;
273+
min-width: 25px;
274+
background-image: url(images/icon_statement_victory_conditions.png);
275+
width: 25px;
276+
height: 25px;
277+
}
278+
.statement-victory-conditions .blk {
279+
vertical-align: middle;
280+
}
281+
.statement-victory-conditions .title {
282+
font-weight: 700;
283+
margin-bottom: 10px;
284+
}
285+
286+
.statement-lose-conditions {
287+
color: #f85338;
288+
background-color: rgba(248, 83, 56, 0.1);
289+
padding: 20px;
290+
margin-top: 10px;
291+
display: flex;
292+
align-items: center;
293+
}
294+
.statement-lose-conditions .icon {
295+
vertical-align: middle;
296+
text-align: center;
297+
margin-left: 8px;
298+
margin-right: 25px;
299+
min-width: 25px;
300+
background-image: url(images/icon_statement_lose_conditions.png);
301+
width: 25px;
302+
height: 25px;
303+
}
304+
.statement-lose-conditions .blk {
305+
vertical-align: middle;
306+
}
307+
.statement-lose-conditions .title {
308+
font-weight: 700;
309+
margin-bottom: 10px;
310+
}
311+
312+
.statement-protocol {
313+
color: black;
314+
padding-left: 15px;
315+
padding-right: 15px;
316+
padding-top: 30px;
317+
padding-bottom: 30px;
318+
border-top: 1px solid #dadada;
319+
background-color: #e7e9eb;
320+
}
321+
.statement-protocol .title {
322+
font-size: 14px;
323+
font-weight: 700;
324+
padding-top: 5px;
325+
padding-bottom: 15px;
326+
}
327+
.statement-protocol .blk {
328+
border-bottom: 1px solid #dadada;
329+
padding-top: 15px;
330+
padding-bottom: 15px;
331+
}
332+
.statement-protocol .blk:last-child {
333+
border-bottom: none !important;
334+
padding-bottom: 0px;
335+
}
336+
.statement-protocol .blk:nth-of-type(1) {
337+
padding-top: 0px;
338+
}
339+
.statement-body .statement-story-background {
340+
position: relative;
341+
background-color: #000000;
342+
width: 100%;
343+
344+
}
345+
.statement-body .statement-story-background img {
346+
width: 100%;
347+
display: block;
348+
}
349+
.statement-body .statement-story-background .statement-story-cover {
350+
background-size: cover;
351+
opacity: 0.7;
352+
}
353+
.statement-body .statement-story-background .statement-story-cover .statement-story {
354+
margin: 20px;
355+
padding-top: 20px;
356+
}

0 commit comments

Comments
 (0)