Skip to content

Commit 570c4f5

Browse files
ReDBrotherReDBrother
committed
improves
1 parent 46a1523 commit 570c4f5

File tree

18 files changed

+456
-146
lines changed

18 files changed

+456
-146
lines changed

‎services/app/apps/codebattle/assets/css/style.scss‎

Lines changed: 55 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,25 @@ $gold: #daa520;
1414
@import 'gamePreview';
1515
@import '~react-contexify/dist/ReactContexify.css';
1616

17+
// @font-face {
18+
// font-family: 'External';
19+
// src: url('https://yastatic.net/s3/lpc-ext/Young%20Con%202025/YangoHeadline-Black.ttf') format('truetype');
20+
// font-weight: 900;
21+
// font-style: normal;
22+
// font-display: swap;
23+
// }
24+
1725
@font-face {
1826
font-family: 'External';
19-
src: url('https://yastatic.net/s3/lpc-ext/Young%20Con%202025/YangoHeadline-Black.ttf') format('truetype');
27+
src: url('../static/fonts/External.ttf') format('truetype');
28+
font-weight: 900;
29+
font-style: normal;
30+
font-display: swap;
31+
}
32+
33+
@font-face {
34+
font-family: 'ExternalPlane';
35+
src: url('https://yastatic.net/s3/home/fonts/ys/4/text-geo-regular.woff') format('truetype');
2036
font-weight: 900;
2137
font-style: normal;
2238
font-display: swap;
@@ -2564,11 +2580,21 @@ a:hover {
25642580
border-radius: 25px;
25652581
}
25662582

2583+
.cb-stream-full-output {
2584+
width: 100%;
2585+
}
2586+
25672587
.cb-stream-task-description {
2588+
font-family: 'ExternalPlane';
25682589
color: #B6A4FF;
25692590
}
25702591

25712592
.cb-stream-widget {
2593+
font-family: 'ExternalPlane';
2594+
background-color: #000000;
2595+
}
2596+
2597+
.cb-stream-widget .view-line {
25722598
background-color: #000000;
25732599
}
25742600

@@ -2589,18 +2615,17 @@ a:hover {
25892615

25902616
.cb-stream-full-editor {
25912617
border: 4px solid #3C4168;
2592-
border-radius: 50px;
25932618
}
25942619

25952620
.editor-left {
2596-
border-top-left-radius: 50px;
2597-
border-right: 0px;
2621+
border-top-right-radius: 50px;
2622+
border-left: 0px;
25982623
border-bottom: 0px;
25992624
}
26002625

26012626
.editor-right {
2602-
border-top-right-radius: 50px;
2603-
border-left: 0px;
2627+
border-top-left-radius: 50px;
2628+
border-right: 0px;
26042629
border-bottom: 0px;
26052630
}
26062631

@@ -2616,36 +2641,25 @@ a:hover {
26162641
}
26172642

26182643

2619-
.cb-stream-widget-header-img-left {
2644+
.cb-stream-widget-header-title {
26202645
background-size: cover;
2621-
width: 20%;
2622-
background-image: url(../static/images/stream/back-stripes.svg);
2646+
width: 100%;
2647+
font-weight: 900;
2648+
background-image: url(../static/images/stream/header.svg);
26232649

26242650
.winner & {
2625-
background-image: url(../static/images/stream/back-stripes-winner.svg);
2651+
background-image: url(../static/images/stream/header-winner.svg);
26262652
}
26272653
}
26282654

2629-
.cb-stream-widget-header-img-right {
2655+
.cb-stream-full-widget-header-title {
26302656
background-size: cover;
2631-
width: 20%;
2632-
background-image: url(../static/images/stream/stripes.svg);
2633-
2634-
.winner & {
2635-
background-image: url(../static/images/stream/stripes-winner.svg);
2636-
}
2637-
}
2638-
2639-
.cb-stream-widget-header-title {
2640-
width: 60%;
2641-
max-width: 60%;
2642-
min-width: 60%;
2643-
2644-
background-color: #FAFF0F;
2657+
width: 100%;
26452658
font-weight: 900;
2659+
background-image: url(../static/images/stream/header-mini.svg);
26462660

26472661
.winner & {
2648-
background-color: #7642E8;
2662+
background-image: url(../static/images/stream/header-mini-winner.svg);
26492663
}
26502664
}
26512665

@@ -2671,3 +2685,18 @@ a:hover {
26712685
border-radius: 50%;
26722686
margin-left: -10px;
26732687
}
2688+
2689+
.cb-stream-full-task-stats {
2690+
clear: both;
2691+
display: inline-block;
2692+
overflow: hidden;
2693+
white-space: nowrap;
2694+
}
2695+
2696+
.cb-stream-full-solution-bar {
2697+
height: 10%;
2698+
width: 100%;
2699+
background-color: #FAFF0F;
2700+
bottom: 34%;
2701+
margin-left: -10px;
2702+
}

‎services/app/apps/codebattle/assets/js/widgets/components/Editor.jsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,10 @@ Editor.propTypes = {
110110
userId: PropTypes.number.isRequired,
111111
showVimStatusBar: PropTypes.bool,
112112
scrollbarStatus: PropTypes.string,
113+
lineDecorationsWidth: PropTypes.number,
114+
lineNumbersMinChars: PropTypes.number,
115+
glyphMargin: PropTypes.bool,
116+
folding: PropTypes.bool,
113117
};
114118

115119
Editor.defaultProps = {
@@ -121,6 +125,10 @@ Editor.defaultProps = {
121125
loading: false,
122126
showVimStatusBar: true,
123127
scrollbarStatus: 'visible',
128+
lineDecorationsWidth: 0,
129+
lineNumbersMinChars: 3,
130+
glyphMargin: true,
131+
folding: true,
124132
};
125133

126134
export default memo(Editor);

‎services/app/apps/codebattle/assets/js/widgets/pages/stream/StreamEditorPanel.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ function StreamEditorPanel({
3939
className={`cb-stream-editor-panel p-2 mt-4 cb-stream-editor-${orientation}`}
4040
style={{ width, maxWidth: width, minWidth: width }}
4141
>
42-
<div className="d-flex flex-column flex-grow-1 position-relative cb-editor-height h-100">
42+
<div className="d-flex flex-column flex-grow-1 position-relative cb-editor-height h-100 px-2 pt-2">
4343
<ExtendedEditor {...editorParams} />
4444
</div>
4545
</div>

‎services/app/apps/codebattle/assets/js/widgets/pages/stream/StreamFullPanel.jsx‎

Lines changed: 149 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,46 @@
11
import React from 'react';
22

3+
import upperCase from 'lodash/upperCase';
34
import { useSelector } from 'react-redux';
45

56
import ExtendedEditor from '@/components/Editor';
67
import {
7-
leftEditorSelector, rightEditorSelector,
8+
gamePlayerSelector,
9+
leftEditorSelector,
10+
leftExecutionOutputSelector,
11+
rightEditorSelector,
12+
rightExecutionOutputSelector,
813
} from '@/selectors';
914

1015
import editorThemes from '../../config/editorThemes';
1116
import TaskDescriptionMarkdown from '../game/TaskDescriptionMarkdown';
1217

18+
const renderPlayerId = (id, verticalAlign) => (
19+
<span style={{ marginLeft: '-0.2em', verticalAlign }}>{id}</span>
20+
);
21+
22+
const renderImg = (_id, imgStyle) => (
23+
<img style={imgStyle} src="/assets/images/clans/1.png" alt="И" />
24+
);
25+
1326
function StreamFullPanel({
14-
game, roomMachineState, fontSize, codeFontSize,
27+
game,
28+
roomMachineState,
29+
codeFontSize,
30+
imgStyle,
31+
taskHeaderFontSize,
32+
descriptionFontSize,
33+
outputTitleFontSize,
34+
outputDataFontSize,
35+
nameLineHeight,
36+
headerVerticalAlign,
1537
}) {
1638
const leftEditor = useSelector(leftEditorSelector(roomMachineState));
1739
const rightEditor = useSelector(rightEditorSelector(roomMachineState));
18-
// const leftOutput = useSelector(leftExecutionOutputSelector(roomMachineState));
19-
// const rightOutput = useSelector(rightExecutionOutputSelector(roomMachineState));
40+
const leftPlayer = useSelector(gamePlayerSelector(leftEditor?.playerId));
41+
const rightPlayer = useSelector(gamePlayerSelector(rightEditor?.playerId));
42+
const leftOutput = useSelector(leftExecutionOutputSelector(roomMachineState));
43+
const rightOutput = useSelector(rightExecutionOutputSelector(roomMachineState));
2044

2145
const editorLeftParams = {
2246
editable: false,
@@ -30,6 +54,10 @@ function StreamFullPanel({
3054
wordWrap: 'on',
3155
showVimStatusBar: false,
3256
scrollbarStatus: 'hidden',
57+
lineDecorationsWidth: 0,
58+
lineNumbersMinChars: 0,
59+
glyphMargin: false,
60+
folding: false,
3361
// Add required props
3462
onChange: () => { },
3563
mode: 'default',
@@ -50,6 +78,10 @@ function StreamFullPanel({
5078
wordWrap: 'on',
5179
showVimStatusBar: false,
5280
scrollbarStatus: 'hidden',
81+
lineDecorationsWidth: 0,
82+
lineNumbersMinChars: 0,
83+
glyphMargin: false,
84+
folding: false,
5385
// Add required props
5486
onChange: () => { },
5587
mode: 'default',
@@ -59,37 +91,133 @@ function StreamFullPanel({
5991
userId: rightEditor?.playerId,
6092
};
6193

94+
const assert = (game?.task?.asserts || [])[0];
95+
const args = assert ? JSON.stringify(assert.arguments) : '';
96+
const expected = assert ? JSON.stringify(assert.expected) : '';
97+
98+
console.log(leftOutput, rightOutput);
99+
62100
return (
63-
<div className="d-flex col-12 flex-column w-100 h-100 cb-stream-full-info">
64-
<div className="d-flex w-100 justify-content-between pb-3 px-2">
65-
<div className="cb-stream-tasks-stats">
66-
<span style={{ fontSize }}>3/8 Задача</span>
101+
<div className="d-flexflex-column w-100 h-100 cb-stream-full-info">
102+
<div className="d-flex w-100 justify-content-between py-3 px-4" style={{ height: '25%', minHeight: '25%', maxHeight: '25%' }}>
103+
<div>
104+
<div className="cb-stream-tasks-stats cb-stream-full-task-stats cb-stream-widget-text italic">
105+
<span style={{ verticalAlign: headerVerticalAlign, fontSize: taskHeaderFontSize }}>3/8 Задача</span>
106+
</div>
67107
</div>
68-
<div className="cb-stream-task-description h-100 w-100 px-2" style={{ fontSize }}>
108+
<div style={{ fontSize: descriptionFontSize }} className="cb-stream-task-description h-100 w-100 px-4">
69109
<TaskDescriptionMarkdown description={game?.task?.descriptionRu} />
70110
</div>
71-
<div className="d-flex flex-column pb-4">
72-
<div className="d-flex cb-stream-output mt-2 mb-1" style={{ fontSize }}>
73-
<div className="d-flex align-items-center cb-stream-output-title">Входные данные</div>
74-
<div />
111+
<div className="d-flex flex-column pb-4 pl-3" style={{ width: '35%', minWidth: '35%', maxWidth: '35%' }}>
112+
<div className="d-flex cb-stream-full-output mt-2 mb-1">
113+
<div className="d-flex flex-column cb-stream-output-title" style={{ width: '33%', fontSize: outputTitleFontSize }}>
114+
<span>Входные</span>
115+
<span>данные</span>
116+
</div>
117+
<div className="d-flex align-items-center pl-2 cb-stream-output-data" style={{ fontSize: outputDataFontSize }}>
118+
{args}
119+
</div>
75120
</div>
76-
<div className="d-flex cb-stream-output mt-2 mb-1" style={{ fontSize }}>
77-
<div className="d-flex align-items-center cb-stream-output-title">Ожидаемые данные</div>
78-
<div />
121+
<div className="d-flex cb-stream-full-output mt-2 mb-1">
122+
<div className="d-flex flex-column cb-stream-output-title" style={{ width: '33%', fontSize: outputTitleFontSize }}>
123+
<span>Ожидаемые</span>
124+
<span>данные</span>
125+
</div>
126+
<div className="d-flex align-items-center pl-2 cb-stream-output-data" style={{ fontSize: outputDataFontSize }}>
127+
{expected}
128+
</div>
79129
</div>
80130
</div>
81131
</div>
82132
<div className="d-flex w-100 h-100 cb-stream-full-editors">
83-
<div className="col-4 cb-stream-full-editor editor-right">
84-
<div className="d-flex flex-column flex-grow-1 position-relative cb-editor-height h-100">
133+
<div className="cb-stream-full-editor position-relative editor-left p-2" style={{ width: '35%' }}>
134+
<div className="d-flex align-items-center p-2" style={{ fontSize: taskHeaderFontSize }}>
135+
<div
136+
className="d-flex position-relative align-items-center justify-content-center cb-stream-player-number cb-stream-widget-text italic"
137+
style={imgStyle}
138+
>
139+
{renderPlayerId(leftEditor?.playerId, headerVerticalAlign)}
140+
</div>
141+
<div className="cb-stream-player-clan h-100 position-relative mr-3">
142+
{/* {player?.clanId && ( */}
143+
{renderImg(leftPlayer?.clanId, imgStyle)}
144+
{/* )} */}
145+
</div>
146+
<div
147+
className="d-flex flex-column cb-stream-name cb-stream-widget-text"
148+
style={{ verticalAlign: headerVerticalAlign }}
149+
>
150+
{('Фамилия Имя').split(' ').map(str => (
151+
<div
152+
key={str}
153+
style={{ lineHeight: nameLineHeight }}
154+
>
155+
{upperCase(str || 'Test')}
156+
</div>
157+
))}
158+
</div>
159+
</div>
160+
<div className="d-flex flex-column flex-grow-1 position-relative cb-editor-height h-100 px-2">
85161
<ExtendedEditor {...editorLeftParams} />
86162
</div>
163+
{leftOutput && (
164+
<div style={{ marginRight: '-10px' }} className="d-flex cb-stream-full-solution-bar position-absolute">
165+
<div className="d-flex w-100 justify-content-between">
166+
<div />
167+
<div
168+
style={{ fontSize: taskHeaderFontSize }}
169+
className="d-flex align-items-center cb-stream-widget-text italic mr-2"
170+
>
171+
{`${leftOutput.successCount}/${leftOutput.assertsCount || 100}`}
172+
</div>
173+
</div>
174+
</div>
175+
)}
87176
</div>
88-
<div className="col-4 w-100 px-2">stream</div>
89-
<div className="col-4 cb-stream-full-editor editor-right">
90-
<div className="d-flex flex-column flex-grow-1 position-relative cb-editor-height h-100">
177+
<div className="px-2" style={{ width: '30%' }} />
178+
<div className="cb-stream-full-editor position-relative editor-right p-2" style={{ width: '35%' }}>
179+
<div className="d-flex align-items-center p-2" style={{ fontSize: taskHeaderFontSize }}>
180+
<div
181+
className="d-flex position-relative align-items-center justify-content-center cb-stream-player-number cb-stream-widget-text italic"
182+
style={imgStyle}
183+
>
184+
{renderPlayerId(rightEditor?.playerId, headerVerticalAlign)}
185+
</div>
186+
<div className="cb-stream-player-clan h-100 position-relative mr-3">
187+
{/* {player?.clanId && ( */}
188+
{renderImg(rightPlayer?.clanId, imgStyle)}
189+
{/* )} */}
190+
</div>
191+
<div
192+
className="d-flex flex-column cb-stream-name cb-stream-widget-text"
193+
style={{ verticalAlign: headerVerticalAlign }}
194+
>
195+
{('Фамилия Имя').split(' ').map(str => (
196+
<div
197+
key={str}
198+
style={{ lineHeight: nameLineHeight }}
199+
>
200+
{upperCase(str || 'Test')}
201+
</div>
202+
))}
203+
</div>
204+
</div>
205+
<div className="d-flex flex-column flex-grow-1 position-relative cb-editor-height h-100 px-2">
91206
<ExtendedEditor {...editorRightParams} />
92207
</div>
208+
{rightOutput && (
209+
<div style={{ marginLeft: '-10px' }} className="d-flex cb-stream-full-solution-bar position-absolute">
210+
<div className="d-flex w-100 justify-content-between">
211+
<div />
212+
<div
213+
style={{ fontSize: taskHeaderFontSize }}
214+
className="d-flex align-items-center cb-stream-widget-text italic mr-2"
215+
>
216+
{`${rightOutput.successCount}/${rightOutput.assertsCount || 100}`}
217+
</div>
218+
</div>
219+
</div>
220+
)}
93221
</div>
94222
</div>
95223
</div>

0 commit comments

Comments
 (0)