Skip to content

Commit b404b50

Browse files
ReDBrotherReDBrother
committed
improves
1 parent 7d4c564 commit b404b50

File tree

12 files changed

+394
-241
lines changed

12 files changed

+394
-241
lines changed

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

Lines changed: 64 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2505,15 +2505,32 @@ a:hover {
25052505

25062506
.cb-stream-tasks-stats {
25072507
background-color: #FAFF0F;
2508-
padding: 20px 16px;
2508+
padding: 10px 16px;
25092509
border-radius: 25px;
2510+
2511+
font-weight: 900;
2512+
2513+
.winner & {
2514+
color: white;
2515+
background-color: #7642E8;
2516+
}
25102517
}
25112518

25122519
.cb-stream-output-title {
25132520
background-color: #FAFF0F;
25142521

2515-
padding: 16px 20px;
2522+
padding: 10px 20px;
25162523
border-radius: 25px;
2524+
2525+
width: 35%;
2526+
min-width: 35%;
2527+
2528+
font-weight: 700;
2529+
2530+
.winner & {
2531+
color: white;
2532+
background-color: #7642E8;
2533+
}
25172534
}
25182535

25192536
.cb-stream-editor-panel {
@@ -2535,6 +2552,10 @@ a:hover {
25352552
.cb-stream-name {
25362553
width: 118px;
25372554
color: #FAFF0F;
2555+
2556+
.winner & {
2557+
color: #7642E8;
2558+
}
25382559
}
25392560

25402561
.cb-stream-output {
@@ -2583,29 +2604,66 @@ a:hover {
25832604
.cb-stream-widget-text {
25842605
font-family: 'External';
25852606
font-weight: 700;
2607+
2608+
&.italic {
2609+
font-style: italic;
2610+
}
25862611
}
25872612

2613+
25882614
.cb-stream-widget-header-img-left {
25892615
background-size: cover;
25902616
width: 20%;
25912617
background-image: url(../static/images/stream/back-stripes.svg);
2592-
fill: #FAFF0F;
2618+
2619+
.winner & {
2620+
background-image: url(../static/images/stream/back-stripes-winner.svg);
2621+
}
25932622
}
25942623

25952624
.cb-stream-widget-header-img-right {
25962625
background-size: cover;
25972626
width: 20%;
25982627
background-image: url(../static/images/stream/stripes.svg);
2599-
fill: #FAFF0F;
2628+
2629+
.winner & {
2630+
background-image: url(../static/images/stream/stripes-winner.svg);
2631+
}
26002632
}
26012633

26022634
.cb-stream-widget-header-title {
26032635
width: 60%;
2636+
max-width: 60%;
2637+
min-width: 60%;
2638+
26042639
background-color: #FAFF0F;
2640+
font-weight: 900;
2641+
2642+
.winner & {
2643+
background-color: #7642E8;
2644+
}
26052645
}
26062646

26072647
.cb-stream-player-number {
26082648
background-color: #FAFF0F;
2609-
padding: 20px 16px;
2610-
border-radius: 25px;
2649+
padding: 10px 16px;
2650+
border: 3px solid outline;
2651+
border-radius: 50px;
2652+
2653+
font-weight: 900;
2654+
2655+
.winner & {
2656+
color: white;
2657+
background-color: #7642E8;
2658+
}
2659+
}
2660+
2661+
.cb-stream-number-text {
2662+
margin-left: -6px;
2663+
}
2664+
2665+
.cb-stream-player-clan {
2666+
border: 3px solid black;
2667+
border-radius: 50%;
2668+
margin-left: -10px;
26112669
}

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

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ import EditorLoading from './EditorLoading';
1212

1313
function Editor(props) {
1414
const {
15-
value, syntax, onChange, theme, loading = false, mode,
16-
} = props;
15+
value, syntax, onChange, theme, loading = false, mode, showVimStatusBar,
16+
} = props;
1717

1818
// Map your custom language key to an actual Monaco recognized language
1919
const mappedSyntax = languages[syntax];
@@ -61,6 +61,12 @@ function Editor(props) {
6161
/* eslint-disable react-hooks/exhaustive-deps */
6262
}, [mode, editorRef.current]);
6363

64+
const vimStatusBarStyle = showVimStatusBar ? {
65+
padding: '4px 8px',
66+
fontFamily: 'monospace',
67+
borderTop: '1px solid #eaeaea',
68+
} : { display: 'none' };
69+
6470
return (
6571
<>
6672
<MonacoEditor
@@ -79,11 +85,7 @@ function Editor(props) {
7985
{/* This is for displaying normal/insert mode status in Vim */}
8086
<div
8187
ref={vimStatusRef}
82-
style={{
83-
padding: '4px 8px',
84-
fontFamily: 'monospace',
85-
borderTop: '1px solid #eaeaea',
86-
}}
88+
style={vimStatusBarStyle}
8789
/>
8890

8991
<EditorLoading loading={loading} />
@@ -106,6 +108,7 @@ Editor.propTypes = {
106108
checkResult: PropTypes.func.isRequired,
107109
userType: PropTypes.string.isRequired,
108110
userId: PropTypes.number.isRequired,
111+
showVimStatusBar: PropTypes.bool,
109112
};
110113

111114
Editor.defaultProps = {
@@ -115,6 +118,7 @@ Editor.defaultProps = {
115118
fontSize: 16,
116119
editable: false,
117120
loading: false,
121+
showVimStatusBar: true,
118122
};
119123

120124
export default memo(Editor);

‎services/app/apps/codebattle/assets/js/widgets/config/editorThemes.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export default {
22
dark: 'vs-dark',
3+
custom: 'my-theme',
34
light: 'light',
45
};

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,25 +16,26 @@ function StreamEditorPanel({
1616
const editorParams = {
1717
editable: false,
1818
syntax: editor?.currentLangSlug,
19-
theme: editorThemes.dark,
19+
theme: editorThemes.custom,
2020
mute: true,
2121
loading: false,
2222
value: editor?.text || '',
2323
fontSize,
2424
lineNumbers: 'off',
2525
wordWrap: 'on',
26+
showVimStatusBar: false,
2627
// Add required props
27-
onChange: () => {},
28+
onChange: () => { },
2829
mode: 'default',
2930
roomMode: 'spectator',
30-
checkResult: () => {},
31+
checkResult: () => { },
3132
userType: 'spectator',
32-
userId: 0,
33+
userId: editor?.playerId,
3334
};
3435

3536
return (
3637
<div
37-
className={`cb-stream-editor-panel p-4 cb-stream-editor-${orientation}`}
38+
className={`cb-stream-editor-panel p-2 mt-4 cb-stream-editor-${orientation}`}
3839
style={{ width, maxWidth: width, minWidth: width }}
3940
>
4041
<div className="d-flex flex-column flex-grow-1 position-relative cb-editor-height h-100">

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

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,38 +21,40 @@ function StreamFullPanel({
2121
const editorLeftParams = {
2222
editable: false,
2323
syntax: leftEditor?.currentLangSlug,
24-
theme: editorThemes.dark,
24+
theme: editorThemes.custom,
2525
mute: true,
2626
loading: false,
2727
value: leftEditor?.text || '',
2828
fontSize: codeFontSize,
2929
lineNumbers: false,
3030
wordWrap: 'on',
31+
showVimStatusBar: false,
3132
// Add required props
32-
onChange: () => {},
33+
onChange: () => { },
3334
mode: 'default',
3435
roomMode: 'spectator',
35-
checkResult: () => {},
36+
checkResult: () => { },
3637
userType: 'spectator',
37-
userId: 0,
38+
userId: leftEditor?.playerId,
3839
};
3940
const editorRightParams = {
4041
editable: false,
4142
syntax: rightEditor?.currentLangSlug,
42-
theme: editorThemes.dark,
43+
theme: editorThemes.custom,
4344
mute: true,
4445
loading: false,
4546
value: rightEditor?.text || '',
4647
fontSize: codeFontSize,
4748
lineNumbers: false,
4849
wordWrap: 'on',
50+
showVimStatusBar: false,
4951
// Add required props
50-
onChange: () => {},
52+
onChange: () => { },
5153
mode: 'default',
5254
roomMode: 'spectator',
53-
checkResult: () => {},
55+
checkResult: () => { },
5456
userType: 'spectator',
55-
userId: 0,
57+
userId: rightEditor?.playerId,
5658
};
5759

5860
return (

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

Lines changed: 39 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,10 @@ function StreamTaskInfoPanel({
1313
game,
1414
orientation,
1515
roomMachineState,
16+
nameLineHeight,
1617
fontSize,
18+
outputDataFontSize,
19+
imgStyle = { width: '16px', height: '16px' },
1720
width = '40%',
1821
}) {
1922
const outputSelector = orientation === 'left' ? leftExecutionOutputSelector : rightExecutionOutputSelector;
@@ -24,27 +27,47 @@ function StreamTaskInfoPanel({
2427

2528
const assert = output?.asserts ? output.asserts[0] : {};
2629

27-
const args = assert?.arguments;
28-
const expected = assert?.expected;
29-
const result = assert?.result || assert?.value;
30+
const defaultData = '[sdfdsfsdfsdfdsfsdfsdfsdfsdf]';
31+
32+
const args = assert?.arguments || defaultData;
33+
const expected = assert?.expected || defaultData;
34+
const result = assert?.result || assert?.value || defaultData;
3035

3136
return (
32-
<div className="d-flex cb-stream-widget flex-column justify-content-between" style={{ width, maxWidth: width, minWidth: width }}>
33-
<div className="d-flex pt-4 justify-content-between">
37+
<div className="d-flex cb-stream-widget flex-column justify-content-between px-3" style={{ width, maxWidth: width, minWidth: width }}>
38+
<div className="d-flex pt-4">
3439
<div>
35-
<div style={{ fontSize }} className="cb-stream-tasks-stats cb-stream-widget-text">
40+
<div style={{ fontSize }} className="cb-stream-tasks-stats cb-stream-widget-text italic">
3641
<span>3/8 ЗАДАЧ</span>
3742
</div>
3843
</div>
3944
<div>
40-
<div className="cb-stream-player-number">{player?.id || 0}</div>
45+
<div className="d-flex flex-row px-3">
46+
<div>
47+
<div className="d-flex align-items-center cb-stream-player-number cb-stream-widget-text italic">
48+
<span className="cb-stream-number-text">{player?.id || 0}</span>
49+
</div>
50+
</div>
51+
<div className="cb-stream-player-clan">
52+
{/* {player?.clanId && ( */}
53+
<img style={imgStyle} src="/assets/images/clans/1.png" alt="И" />
54+
{/* )} */}
55+
</div>
56+
</div>
4157
</div>
4258
{/* <div> */}
4359
{/* <span>3 / 8 Задача</span> */}
4460
{/* </div> */}
45-
<div className="d-flex flex-column align-items-center cb-stream-name cb-stream-widget-text">
46-
{(player?.name || 'Фамилия Имя').split(' ').map((str, index) => (
47-
<div key={index} style={{ fontSize }}>{upperCase(str || 'Test')}</div>
61+
<div
62+
className="d-flex flex-column cb-stream-name cb-stream-widget-text"
63+
>
64+
{('Фамилия Имя').split(' ').map(str => (
65+
<div
66+
key={str}
67+
style={{ fontSize, lineHeight: `${nameLineHeight}px` }}
68+
>
69+
{upperCase(str || 'Test')}
70+
</div>
4871
))}
4972
</div>
5073
</div>
@@ -54,16 +77,16 @@ function StreamTaskInfoPanel({
5477
<div className="d-flex flex-column">
5578
<div className="d-flex flex-column pb-4" style={{ fontSize }}>
5679
<div className="d-flex cb-stream-output mt-2 mb-1">
57-
<div className="d-flex align-items-center cb-stream-output-title cb-stream-widget-text">Входные данные</div>
58-
<div className="cb-stream-output-data align-content-around">{args}</div>
80+
<div className="d-flex align-items-center cb-stream-output-title">Входные данные</div>
81+
<div className="cb-stream-output-data align-content-around" style={{ fontSize: `${outputDataFontSize}px` }}>{args}</div>
5982
</div>
6083
<div className="d-flex cb-stream-output mb-1">
61-
<div className="d-flex align-items-center cb-stream-output-title cb-stream-widget-text">Ожидаемый результат</div>
62-
<div className="cb-stream-output-data align-content-around">{expected}</div>
84+
<div className="d-flex align-items-center cb-stream-output-title">Ожидаемый результат</div>
85+
<div className="cb-stream-output-data align-content-around" style={{ fontSize: `${outputDataFontSize}px` }}>{expected}</div>
6386
</div>
6487
<div className="d-flex cb-stream-output mt-1 mb-2">
65-
<div className="d-flex align-items-center cb-stream-output-title cb-stream-widget-text">Полученный результат</div>
66-
<div className="cb-stream-output-data align-content-around">{result}</div>
88+
<div className="d-flex align-items-center cb-stream-output-title">Полученный результат</div>
89+
<div className="cb-stream-output-data align-content-around" style={{ fontSize: `${outputDataFontSize}px` }}>{result}</div>
6790
</div>
6891
</div>
6992
</div>

0 commit comments

Comments
 (0)