Skip to content

Commit d7e6eb3

Browse files
ReDBrotherReDBrother
committed
improves
1 parent 570c4f5 commit d7e6eb3

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+307
-117
lines changed

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

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2546,6 +2546,7 @@ a:hover {
25462546
.winner & {
25472547
color: white;
25482548
background-color: #7642E8;
2549+
border-color: #7642E8;
25492550
}
25502551
}
25512552

@@ -2697,6 +2698,31 @@ a:hover {
26972698
height: 10%;
26982699
width: 100%;
26992700
background-color: #FAFF0F;
2700-
bottom: 34%;
2701-
margin-left: -10px;
2701+
bottom: 0%;
2702+
2703+
.winner & {
2704+
background-color: #7642E8;
2705+
}
2706+
}
2707+
2708+
2709+
.inverted-bar::before,
2710+
.inverted-bar::after {
2711+
/* Двойник! */
2712+
content: "";
2713+
position: absolute;
2714+
top: 0;
2715+
left: 0;
2716+
}
2717+
2718+
.inverted-bar::before {
2719+
/* Светлый оттенок текста */
2720+
mix-blend-mode: screen;
2721+
/* для светлых фонов */
2722+
}
2723+
2724+
.inverted-bar::after {
2725+
/* Темный оттенок текста */
2726+
mix-blend-mode: difference;
2727+
/* для темных фонов */
27022728
}

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

Lines changed: 39 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,28 @@
11
import React from 'react';
22

3+
import cn from 'classnames';
34
import { useSelector } from 'react-redux';
45

5-
import { leftEditorSelector, rightEditorSelector } from '@/selectors';
6+
import { executionOutputSelector, leftEditorSelector, rightEditorSelector } from '@/selectors';
67

78
import ExtendedEditor from '../../components/Editor';
89
import editorThemes from '../../config/editorThemes';
910

1011
function StreamEditorPanel({
11-
orientation, roomMachineState, fontSize, width = '60%',
12+
orientation,
13+
roomMachineState,
14+
fontSize,
15+
width = '60%',
16+
taskHeaderFontSize,
17+
testBarHeight,
18+
testBarWinGifTop,
19+
testBarProgressGifTop,
1220
}) {
1321
const editorSelector = orientation === 'left' ? leftEditorSelector : rightEditorSelector;
1422

1523
const editor = useSelector(editorSelector(roomMachineState));
24+
const output = useSelector(executionOutputSelector(editor?.playerId, roomMachineState));
25+
1626
const editorParams = {
1727
editable: false,
1828
syntax: editor?.currentLangSlug,
@@ -34,14 +44,40 @@ function StreamEditorPanel({
3444
userId: editor?.playerId,
3545
};
3646

47+
const isWinner = output?.status === 'ok';
48+
3749
return (
3850
<div
39-
className={`cb-stream-editor-panel p-2 mt-4 cb-stream-editor-${orientation}`}
51+
className={cn(
52+
`position-relative cb-stream-editor-panel p-2 mt-4 cb-stream-editor-${orientation}`,
53+
{ winner: isWinner },
54+
)}
4055
style={{ width, maxWidth: width, minWidth: width }}
4156
>
57+
4258
<div className="d-flex flex-column flex-grow-1 position-relative cb-editor-height h-100 px-2 pt-2">
4359
<ExtendedEditor {...editorParams} />
4460
</div>
61+
{output && (
62+
<div style={{ marginLeft: '-10px', height: testBarHeight }} className="d-flex cb-stream-full-solution-bar position-absolute">
63+
<div className="d-flex w-100">
64+
<div className="d-flex w-100 justify-content-end">
65+
<div
66+
style={{ fontSize: taskHeaderFontSize }}
67+
className="d-flex align-items-center cb-stream-widget-text italic mr-2"
68+
>
69+
{`${Math.round(output.successCount / output.assertsCount)}/100`}
70+
</div>
71+
</div>
72+
<img
73+
alt="И"
74+
src={isWinner ? '/assets/images/stream/win_bv.png' : '/assets/images/stream/progress.png'}
75+
className="position-absolute"
76+
style={{ top: (isWinner ? testBarWinGifTop : testBarProgressGifTop) }}
77+
/>
78+
</div>
79+
</div>
80+
)}
4581
</div>
4682
);
4783
}

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

Lines changed: 92 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22

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

@@ -19,8 +20,8 @@ const renderPlayerId = (id, verticalAlign) => (
1920
<span style={{ marginLeft: '-0.2em', verticalAlign }}>{id}</span>
2021
);
2122

22-
const renderImg = (_id, imgStyle) => (
23-
<img style={imgStyle} src="/assets/images/clans/1.png" alt="И" />
23+
const renderImg = (id, imgStyle) => (
24+
id ? <img style={imgStyle} src={`/assets/images/clans/${id || 1}.png`} alt="И" /> : <></>
2425
);
2526

2627
function StreamFullPanel({
@@ -34,6 +35,11 @@ function StreamFullPanel({
3435
outputDataFontSize,
3536
nameLineHeight,
3637
headerVerticalAlign,
38+
testBarMarginBottom,
39+
testBarFontSize,
40+
testBarHeight,
41+
testBarWinGifTop,
42+
testBarProgressGifTop,
3743
}) {
3844
const leftEditor = useSelector(leftEditorSelector(roomMachineState));
3945
const rightEditor = useSelector(rightEditorSelector(roomMachineState));
@@ -95,14 +101,17 @@ function StreamFullPanel({
95101
const args = assert ? JSON.stringify(assert.arguments) : '';
96102
const expected = assert ? JSON.stringify(assert.expected) : '';
97103

98-
console.log(leftOutput, rightOutput);
104+
const isWinnerLeft = leftOutput?.status === 'ok';
105+
const isWinnerRight = rightOutput?.status === 'ok';
99106

100107
return (
101108
<div className="d-flexflex-column w-100 h-100 cb-stream-full-info">
102109
<div className="d-flex w-100 justify-content-between py-3 px-4" style={{ height: '25%', minHeight: '25%', maxHeight: '25%' }}>
103110
<div>
104111
<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>
112+
<span style={{ verticalAlign: headerVerticalAlign, fontSize: taskHeaderFontSize }}>
113+
{`${(game?.task?.id || 1) % 21}/21 ЗАДАЧ`}
114+
</span>
106115
</div>
107116
</div>
108117
<div style={{ fontSize: descriptionFontSize }} className="cb-stream-task-description h-100 w-100 px-4">
@@ -114,7 +123,7 @@ function StreamFullPanel({
114123
<span>Входные</span>
115124
<span>данные</span>
116125
</div>
117-
<div className="d-flex align-items-center pl-2 cb-stream-output-data" style={{ fontSize: outputDataFontSize }}>
126+
<div className="d-flex align-items-center pl-3 cb-stream-output-data" style={{ fontSize: outputDataFontSize }}>
118127
{args}
119128
</div>
120129
</div>
@@ -123,31 +132,46 @@ function StreamFullPanel({
123132
<span>Ожидаемые</span>
124133
<span>данные</span>
125134
</div>
126-
<div className="d-flex align-items-center pl-2 cb-stream-output-data" style={{ fontSize: outputDataFontSize }}>
135+
<div className="d-flex align-items-center pl-3 cb-stream-output-data" style={{ fontSize: outputDataFontSize }}>
127136
{expected}
128137
</div>
129138
</div>
130139
</div>
131140
</div>
132-
<div className="d-flex w-100 h-100 cb-stream-full-editors">
133-
<div className="cb-stream-full-editor position-relative editor-left p-2" style={{ width: '35%' }}>
141+
<div className="d-flex w-100 cb-stream-full-editors" style={{ height: '75%', minHeight: '75%', maxHeight: '75%' }}>
142+
<div
143+
className={
144+
cn(
145+
'cb-stream-full-editor position-relative editor-left p-2',
146+
{ winner: isWinnerLeft },
147+
)
148+
}
149+
style={{ width: '35%' }}
150+
>
134151
<div className="d-flex align-items-center p-2" style={{ fontSize: taskHeaderFontSize }}>
135152
<div
136-
className="d-flex position-relative align-items-center justify-content-center cb-stream-player-number cb-stream-widget-text italic"
153+
className={
154+
cn(
155+
'd-flex position-relative align-items-center justify-content-center',
156+
'cb-stream-player-number cb-stream-widget-text italic',
157+
)
158+
}
137159
style={imgStyle}
138160
>
139161
{renderPlayerId(leftEditor?.playerId, headerVerticalAlign)}
140162
</div>
141163
<div className="cb-stream-player-clan h-100 position-relative mr-3">
142164
{/* {player?.clanId && ( */}
143-
{renderImg(leftPlayer?.clanId, imgStyle)}
165+
{renderImg(leftPlayer?.clanId, imgStyle, isWinnerLeft)}
144166
{/* )} */}
145167
</div>
146168
<div
147-
className="d-flex flex-column cb-stream-name cb-stream-widget-text"
169+
className={cn(
170+
'd-flex flex-column cb-stream-name cb-stream-widget-text',
171+
)}
148172
style={{ verticalAlign: headerVerticalAlign }}
149173
>
150-
{('Фамилия Имя').split(' ').map(str => (
174+
{(leftPlayer?.name || 'Фамилия Имя').split(' ').map(str => (
151175
<div
152176
key={str}
153177
style={{ lineHeight: nameLineHeight }}
@@ -161,38 +185,63 @@ function StreamFullPanel({
161185
<ExtendedEditor {...editorLeftParams} />
162186
</div>
163187
{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}`}
188+
<div
189+
style={{ bottom: '12%', marginLeft: '-0.3em', height: testBarHeight }}
190+
className={cn('d-flex cb-stream-full-solution-bar position-absolute')}
191+
>
192+
<div className="d-flex w-100 position-relative">
193+
<div className="d-flex w-100 justify-content-end">
194+
<div
195+
style={{ fontSize: testBarFontSize }}
196+
className="d-flex align-items-center cb-stream-widget-text italic mr-2 inverted-bar"
197+
>
198+
{`${Math.round((leftOutput.successCount || 0) / (leftOutput.assertsCount / 1))}/100`}
199+
</div>
172200
</div>
201+
<img
202+
alt="И"
203+
src={isWinnerLeft ? '/assets/images/stream/win_bv.png' : '/assets/images/stream/progress.png'}
204+
className="position-absolute"
205+
style={{ top: (isWinnerLeft ? testBarWinGifTop : testBarProgressGifTop), left: '-30px' }}
206+
/>
173207
</div>
174208
</div>
175209
)}
176210
</div>
177211
<div className="px-2" style={{ width: '30%' }} />
178-
<div className="cb-stream-full-editor position-relative editor-right p-2" style={{ width: '35%' }}>
212+
<div
213+
className={cn(
214+
'cb-stream-full-editor position-relative editor-right p-2',
215+
{ winner: isWinnerRight },
216+
)}
217+
style={{ width: '35%' }}
218+
>
179219
<div className="d-flex align-items-center p-2" style={{ fontSize: taskHeaderFontSize }}>
180220
<div
181-
className="d-flex position-relative align-items-center justify-content-center cb-stream-player-number cb-stream-widget-text italic"
221+
className={
222+
cn(
223+
'd-flex position-relative align-items-center justify-content-center',
224+
'cb-stream-player-number cb-stream-widget-text italic',
225+
)
226+
}
182227
style={imgStyle}
183228
>
184229
{renderPlayerId(rightEditor?.playerId, headerVerticalAlign)}
185230
</div>
186231
<div className="cb-stream-player-clan h-100 position-relative mr-3">
187232
{/* {player?.clanId && ( */}
188-
{renderImg(rightPlayer?.clanId, imgStyle)}
233+
{renderImg(rightPlayer?.clanId, imgStyle, isWinnerRight)}
189234
{/* )} */}
190235
</div>
191236
<div
192-
className="d-flex flex-column cb-stream-name cb-stream-widget-text"
237+
className={
238+
cn(
239+
'd-flex flex-column cb-stream-name cb-stream-widget-text',
240+
)
241+
}
193242
style={{ verticalAlign: headerVerticalAlign }}
194243
>
195-
{('Фамилия Имя').split(' ').map(str => (
244+
{(rightPlayer?.name || 'Фамилия Имя').split(' ').map(str => (
196245
<div
197246
key={str}
198247
style={{ lineHeight: nameLineHeight }}
@@ -206,15 +255,25 @@ function StreamFullPanel({
206255
<ExtendedEditor {...editorRightParams} />
207256
</div>
208257
{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}`}
258+
<div
259+
style={{ bottom: '12%', marginLeft: '-0.7em', height: testBarHeight }}
260+
className={cn('d-flex cb-stream-full-solution-bar position-absolute')}
261+
>
262+
<div className="d-flex w-100 position-relative">
263+
<div className="d-flex w-100 justify-content-end">
264+
<div
265+
style={{ fontSize: testBarFontSize }}
266+
className="d-flex align-items-center cb-stream-widget-text italic inverted-bar mr-2"
267+
>
268+
{`${Math.round((rightOutput.successCount || 0) / (rightOutput.assertsCount || 1))}/100`}
269+
</div>
217270
</div>
271+
<img
272+
alt="И"
273+
src={isWinnerRight ? '/assets/images/stream/win_bv.png' : '/assets/images/stream/progress.png'}
274+
className="position-absolute"
275+
style={{ top: (isWinnerRight ? testBarWinGifTop : testBarProgressGifTop), left: '-30px' }}
276+
/>
218277
</div>
219278
</div>
220279
)}

0 commit comments

Comments
 (0)