Skip to content

Commit 1c977df

Browse files
ReDBrotherReDBrother
committed
fixes
1 parent 95797a5 commit 1c977df

File tree

7 files changed

+156
-70
lines changed

7 files changed

+156
-70
lines changed

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

Lines changed: 27 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2511,11 +2511,8 @@ a:hover {
25112511

25122512
.cb-stream-output-title {
25132513
background-color: #FAFF0F;
2514-
width: 151px;
2515-
height: 69px;
25162514

2517-
min-width: 151px;
2518-
padding: 10px 16px;
2515+
padding: 16px 20px;
25192516
border-radius: 25px;
25202517
}
25212518

@@ -2541,7 +2538,7 @@ a:hover {
25412538
}
25422539

25432540
.cb-stream-output {
2544-
min-width: 450px;
2541+
width: 100%;
25452542
border: 4px solid #3C4168;
25462543
border-radius: 25px;
25472544
}
@@ -2556,7 +2553,9 @@ a:hover {
25562553

25572554
.cb-stream-output-data {
25582555
color: #B6A4FF;
2556+
display: inline-block;
25592557
overflow: hidden;
2558+
white-space: nowrap;
25602559
}
25612560

25622561
.cb-stream-full-video {
@@ -2585,3 +2584,26 @@ a:hover {
25852584
font-family: 'External';
25862585
font-weight: 700;
25872586
}
2587+
2588+
.cb-stream-widget-header-img-left {
2589+
width: 20%;
2590+
background-image: url(../static/images/stream/back-stripes.svg);
2591+
fill: #FAFF0F;
2592+
}
2593+
2594+
.cb-stream-widget-header-img-right {
2595+
width: 20%;
2596+
background-image: url(../static/images/stream/stripes.svg);
2597+
fill: #FAFF0F;
2598+
}
2599+
2600+
.cb-stream-widget-header-title {
2601+
width: 60%;
2602+
background-color: #FAFF0F;
2603+
}
2604+
2605+
.cb-stream-player-number {
2606+
background-color: #FAFF0F;
2607+
padding: 20px 16px;
2608+
border-radius: 25px;
2609+
}

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ import { leftEditorSelector, rightEditorSelector } from '@/selectors';
77
import ExtendedEditor from '../../components/Editor';
88
import editorThemes from '../../config/editorThemes';
99

10-
function StreamEditorPanel({ orientation, roomMachineState, fontSize }) {
10+
function StreamEditorPanel({
11+
orientation, roomMachineState, fontSize, width = '60%',
12+
}) {
1113
const editorSelector = orientation === 'left' ? leftEditorSelector : rightEditorSelector;
1214

1315
const editor = useSelector(editorSelector(roomMachineState));
@@ -24,7 +26,10 @@ function StreamEditorPanel({ orientation, roomMachineState, fontSize }) {
2426
};
2527

2628
return (
27-
<div className={`col-8 cb-stream-editor-panel p-4 cb-stream-editor-${orientation}`}>
29+
<div
30+
className={`cb-stream-editor-panel p-4 cb-stream-editor-${orientation}`}
31+
// style={{ width, maxWidth: width, minWidth: width }}
32+
>
2833
<div className="d-flex flex-column flex-grow-1 position-relative cb-editor-height h-100">
2934
<ExtendedEditor {...editorParams} />
3035
</div>

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

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ import {
1010
import editorThemes from '../../config/editorThemes';
1111
import TaskDescriptionMarkdown from '../game/TaskDescriptionMarkdown';
1212

13-
function StreamFullPanel({ game, roomMachineState }) {
13+
function StreamFullPanel({
14+
game, roomMachineState, fontSize, codeFontSize,
15+
}) {
1416
const leftEditor = useSelector(leftEditorSelector(roomMachineState));
1517
const rightEditor = useSelector(rightEditorSelector(roomMachineState));
1618
// const leftOutput = useSelector(leftExecutionOutputSelector(roomMachineState));
@@ -23,6 +25,7 @@ function StreamFullPanel({ game, roomMachineState }) {
2325
mute: true,
2426
loading: false,
2527
value: leftEditor?.text,
28+
fontSize: codeFontSize,
2629
lineNumbers: false,
2730
wordWrap: 'on',
2831
};
@@ -33,6 +36,7 @@ function StreamFullPanel({ game, roomMachineState }) {
3336
mute: true,
3437
loading: false,
3538
value: rightEditor?.text,
39+
fontSize: codeFontSize,
3640
lineNumbers: false,
3741
wordWrap: 'on',
3842
};
@@ -41,17 +45,17 @@ function StreamFullPanel({ game, roomMachineState }) {
4145
<div className="d-flex col-12 flex-column w-100 h-100 cb-stream-full-info">
4246
<div className="d-flex w-100 justify-content-between pb-3 px-2">
4347
<div className="cb-stream-tasks-stats">
44-
<span>3/8 Задача</span>
48+
<span style={{ fontSize }}>3/8 Задача</span>
4549
</div>
46-
<div className="cb-stream-task-description h-100 w-100 px-2">
50+
<div className="cb-stream-task-description h-100 w-100 px-2" style={{ fontSize }}>
4751
<TaskDescriptionMarkdown description={game?.task?.descriptionRu} />
4852
</div>
4953
<div className="d-flex flex-column pb-4">
50-
<div className="d-flex cb-stream-output mt-2 mb-1">
54+
<div className="d-flex cb-stream-output mt-2 mb-1" style={{ fontSize }}>
5155
<div className="d-flex align-items-center cb-stream-output-title">Входные данные</div>
5256
<div />
5357
</div>
54-
<div className="d-flex cb-stream-output mt-2 mb-1">
58+
<div className="d-flex cb-stream-output mt-2 mb-1" style={{ fontSize }}>
5559
<div className="d-flex align-items-center cb-stream-output-title">Ожидаемые данные</div>
5660
<div />
5761
</div>

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

Lines changed: 14 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,7 @@ function StreamTaskInfoPanel({
1414
orientation,
1515
roomMachineState,
1616
fontSize,
17-
codeFontSize,
18-
setFontSize,
19-
setCodeFontSize,
17+
width = '40%',
2018
}) {
2119
const outputSelector = orientation === 'left' ? leftExecutionOutputSelector : rightExecutionOutputSelector;
2220
const playerSelector = orientation === 'left' ? firstPlayerSelector : secondPlayerSelector;
@@ -31,43 +29,40 @@ function StreamTaskInfoPanel({
3129
const result = assert?.result || assert?.value;
3230

3331
return (
34-
<div className="d-flex cb-stream-widget flex-column justify-content-between col-4">
32+
<div className="d-flex cb-stream-widget flex-column justify-content-between" style={{ width, maxWidth: width, minWidth: width }}>
3533
<div className="d-flex pt-4 justify-content-between">
36-
<div className="cb-stream-tasks-stats cb-stream-widget-text">
37-
<span style={{ fontSize }}>3/8 ЗАДАЧ</span>
34+
<div>
35+
<div style={{ fontSize }} className="cb-stream-tasks-stats cb-stream-widget-text">
36+
<span>3/8 ЗАДАЧ</span>
37+
</div>
38+
</div>
39+
<div>
40+
<div className="cb-stream-player-number">{player?.id || 0}</div>
3841
</div>
3942
{/* <div> */}
4043
{/* <span>3 / 8 Задача</span> */}
4144
{/* </div> */}
4245
<div className="d-flex flex-column align-items-center cb-stream-name cb-stream-widget-text">
4346
{(player?.name || 'Фамилия Имя').split(' ').map(str => (
44-
<span style={{ fontSize }}>{upperCase(str || 'Test')}</span>
47+
<div style={{ fontSize }}>{upperCase(str || 'Test')}</div>
4548
))}
4649
</div>
4750
</div>
4851
<div className="cb-stream-task-description h-100 py-5" style={{ fontSize }}>
4952
<TaskDescriptionMarkdown description={game?.task?.descriptionRu} />
5053
</div>
5154
<div className="d-flex flex-column">
52-
<div className="d-flex flex-row bg-gray">
53-
Font Sise
54-
<button type="button" className="btn btn-sm" onClick={() => setFontSize(fontSize + 1)}>+</button>
55-
<button type="button" className="btn btn-sm" onClick={() => setFontSize(fontSize - 1)}>-</button>
56-
Code Font Size
57-
<button type="button" className="btn btn-sm" onClick={() => setCodeFontSize(codeFontSize + 1)}>+</button>
58-
<button type="button" className="btn btn-sm" onClick={() => setCodeFontSize(codeFontSize - 1)}>-</button>
59-
</div>
60-
<div className="d-flex flex-column pb-4 cb-stream-widget-text" style={{ fontSize }}>
55+
<div className="d-flex flex-column pb-4" style={{ fontSize }}>
6156
<div className="d-flex cb-stream-output mt-2 mb-1">
62-
<div className="d-flex align-items-center cb-stream-output-title">Входные данные</div>
57+
<div className="d-flex align-items-center cb-stream-output-title cb-stream-widget-text">Входные данные</div>
6358
<div className="cb-stream-output-data align-content-around">{args}</div>
6459
</div>
6560
<div className="d-flex cb-stream-output mb-1">
66-
<div className="d-flex align-items-center cb-stream-output-title">Ожидаемый результат</div>
61+
<div className="d-flex align-items-center cb-stream-output-title cb-stream-widget-text">Ожидаемый результат</div>
6762
<div className="cb-stream-output-data align-content-around">{expected}</div>
6863
</div>
6964
<div className="d-flex cb-stream-output mt-1 mb-2">
70-
<div className="d-flex align-items-center cb-stream-output-title">Полученный результат</div>
65+
<div className="d-flex align-items-center cb-stream-output-title cb-stream-widget-text">Полученный результат</div>
7166
<div className="cb-stream-output-data align-content-around">{result}</div>
7267
</div>
7368
</div>

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

Lines changed: 58 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect, useState } from 'react';
1+
import React, { useEffect } from 'react';
22

33
import { useDispatch, useSelector } from 'react-redux';
44

@@ -30,8 +30,11 @@ function StreamWidget({
3030
const searchParams = useSearchParams();
3131
const orientation = searchParams.has('orientation') ? searchParams.get('orientation') : orientations.NONE;
3232

33-
const [fontSize, setFontSize] = useState(16);
34-
const [codeFontSize, setCodeFontSize] = useState(16);
33+
const fontSize = searchParams.has('fontSize') ? searchParams.get('fontSize') : 16;
34+
const codeFontSize = searchParams.has('codeFontSize') ? searchParams.get('codeFontSize') : 16;
35+
const headerFontSize = searchParams.has('headerFontSize') ? searchParams.get('headerFontSize') : 16;
36+
const widthInfoPanelPercentage = searchParams.has('widthInfoPanel') ? searchParams.get('widthInfoPanel') : 40;
37+
const widthEditorPanelPercentage = searchParams.has('widthEditorPanel') ? searchParams.get('widthEditorPanel') : 60;
3538

3639
const { mainService, waitingRoomService } = useGameRoomMachine({
3740
mainMachine,
@@ -73,44 +76,60 @@ function StreamWidget({
7376

7477
return (
7578
<div className="vh-100 p-2 cb-stream-widget">
76-
{orientations.NONE === orientation && (
77-
<StreamFullPanel
78-
game={game}
79-
roomMachineState={roomMachineState}
80-
fontSize={fontSize}
81-
codeFontSize={codeFontSize}
82-
setFontSize={setFontSize}
83-
setCodeFontSize={setCodeFontSize}
84-
/>
85-
)}
86-
{orientations.LEFT === orientation && (
87-
<div className="d-flex w-100 h-100" styles={{ fontSize }}>
88-
<StreamTaskInfoPanel
89-
game={game}
90-
orientation={orientation}
91-
roomMachineState={roomMachineState}
92-
fontSize={fontSize}
93-
codeFontSize={codeFontSize}
94-
setFontSize={setFontSize}
95-
setCodeFontSize={setCodeFontSize}
96-
/>
97-
<StreamEditorPanel orientation={orientation} roomMachineState={roomMachineState} fontSize={codeFontSize} />
79+
<div className="w-100 h-100">
80+
<div className="cb-stream-widget-header cb-stream-widget-text" style={headerFontSize}>
81+
<div className="cb-stream-widget-header-img-left" />
82+
<div className="cb-stream-widget-header-title text-center p-4">Баттл Вузов</div>
83+
<div className="cb-stream-widget-header-img-right" />
9884
</div>
99-
)}
100-
{orientations.RIGHT === orientation && (
101-
<div className="d-flex w-100 h-100" styles={{ fontSize }}>
102-
<StreamEditorPanel orientation={orientation} roomMachineState={roomMachineState} fontSize={codeFontSize} />
103-
<StreamTaskInfoPanel
104-
game={game}
105-
orientation={orientation}
106-
roomMachineState={roomMachineState}
107-
fontSize={fontSize}
108-
codeFontSize={codeFontSize}
109-
setFontSize={setFontSize}
110-
setCodeFontSize={setCodeFontSize}
111-
/>
85+
<div className="p-2">
86+
{orientations.NONE === orientation && (
87+
<StreamFullPanel
88+
game={game}
89+
roomMachineState={roomMachineState}
90+
fontSize={fontSize}
91+
codeFontSize={codeFontSize}
92+
/>
93+
)}
94+
<div className="d-flex w-100 h-100" styles={{ fontSize }}>
95+
{orientations.LEFT === orientation && (
96+
<>
97+
<StreamTaskInfoPanel
98+
game={game}
99+
orientation={orientation}
100+
roomMachineState={roomMachineState}
101+
fontSize={fontSize}
102+
width={`${widthInfoPanelPercentage}%`}
103+
/>
104+
<StreamEditorPanel
105+
orientation={orientation}
106+
roomMachineState={roomMachineState}
107+
fontSize={codeFontSize}
108+
width={`${widthEditorPanelPercentage}%`}
109+
/>
110+
111+
</>
112+
)}
113+
{orientations.RIGHT === orientation && (
114+
<>
115+
<StreamEditorPanel
116+
orientation={orientation}
117+
roomMachineState={roomMachineState}
118+
fontSize={codeFontSize}
119+
width={`${widthEditorPanelPercentage}%`}
120+
/>
121+
<StreamTaskInfoPanel
122+
game={game}
123+
orientation={orientation}
124+
roomMachineState={roomMachineState}
125+
fontSize={fontSize}
126+
width={`${widthInfoPanelPercentage}%`}
127+
/>
128+
</>
129+
)}
130+
</div>
112131
</div>
113-
)}
132+
</div>
114133
</div>
115134
);
116135
}

‎services/app/apps/codebattle/assets/static/images/stream/back-stripes.svg‎

Lines changed: 21 additions & 0 deletions
Loading

‎services/app/apps/codebattle/assets/static/images/stream/stripes.svg‎

Lines changed: 20 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)