+
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/stream/StreamFullPanel.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/stream/StreamFullPanel.jsx
index 9965f50be..1c3161261 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/stream/StreamFullPanel.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/stream/StreamFullPanel.jsx
@@ -1,91 +1,223 @@
import React from 'react';
+import upperCase from 'lodash/upperCase';
import { useSelector } from 'react-redux';
import ExtendedEditor from '@/components/Editor';
import {
- leftEditorSelector, rightEditorSelector,
+ gamePlayerSelector,
+ leftEditorSelector,
+ leftExecutionOutputSelector,
+ rightEditorSelector,
+ rightExecutionOutputSelector,
} from '@/selectors';
import editorThemes from '../../config/editorThemes';
import TaskDescriptionMarkdown from '../game/TaskDescriptionMarkdown';
+const renderPlayerId = (id, verticalAlign) => (
+ {id}
+);
+
+const renderImg = (_id, imgStyle) => (
+ 
+);
+
function StreamFullPanel({
- game, roomMachineState, fontSize, codeFontSize,
+ game,
+ roomMachineState,
+ codeFontSize,
+ imgStyle,
+ taskHeaderFontSize,
+ descriptionFontSize,
+ outputTitleFontSize,
+ outputDataFontSize,
+ nameLineHeight,
+ headerVerticalAlign,
}) {
const leftEditor = useSelector(leftEditorSelector(roomMachineState));
const rightEditor = useSelector(rightEditorSelector(roomMachineState));
- // const leftOutput = useSelector(leftExecutionOutputSelector(roomMachineState));
- // const rightOutput = useSelector(rightExecutionOutputSelector(roomMachineState));
+ const leftPlayer = useSelector(gamePlayerSelector(leftEditor?.playerId));
+ const rightPlayer = useSelector(gamePlayerSelector(rightEditor?.playerId));
+ const leftOutput = useSelector(leftExecutionOutputSelector(roomMachineState));
+ const rightOutput = useSelector(rightExecutionOutputSelector(roomMachineState));
const editorLeftParams = {
editable: false,
syntax: leftEditor?.currentLangSlug,
- theme: editorThemes.dark,
+ theme: editorThemes.custom,
mute: true,
loading: false,
value: leftEditor?.text || '',
fontSize: codeFontSize,
lineNumbers: false,
wordWrap: 'on',
+ showVimStatusBar: false,
+ scrollbarStatus: 'hidden',
+ lineDecorationsWidth: 0,
+ lineNumbersMinChars: 0,
+ glyphMargin: false,
+ folding: false,
// Add required props
- onChange: () => {},
+ onChange: () => { },
mode: 'default',
roomMode: 'spectator',
- checkResult: () => {},
+ checkResult: () => { },
userType: 'spectator',
- userId: 0,
+ userId: leftEditor?.playerId,
};
const editorRightParams = {
editable: false,
syntax: rightEditor?.currentLangSlug,
- theme: editorThemes.dark,
+ theme: editorThemes.custom,
mute: true,
loading: false,
value: rightEditor?.text || '',
fontSize: codeFontSize,
lineNumbers: false,
wordWrap: 'on',
+ showVimStatusBar: false,
+ scrollbarStatus: 'hidden',
+ lineDecorationsWidth: 0,
+ lineNumbersMinChars: 0,
+ glyphMargin: false,
+ folding: false,
// Add required props
- onChange: () => {},
+ onChange: () => { },
mode: 'default',
roomMode: 'spectator',
- checkResult: () => {},
+ checkResult: () => { },
userType: 'spectator',
- userId: 0,
+ userId: rightEditor?.playerId,
};
+ const assert = (game?.task?.asserts || [])[0];
+ const args = assert ? JSON.stringify(assert.arguments) : '';
+ const expected = assert ? JSON.stringify(assert.expected) : '';
+
+ console.log(leftOutput, rightOutput);
+
return (
-
-
-
- 3/8 Задача
+
+
+
+
-
+ 3/8 Задача
+
+
-
-
Входные данные
-
+
+
+
-
+ Входные
+ данные
+
+
+ {args}
+
-
Ожидаемые данные
-
+
+
+ Ожидаемые
+ данные
+
+
+ {expected}
+
-
-
+
+);
+
+const renderPlayerId = (id, verticalAlign) => (
+ {id}
+);
+
function StreamTaskInfoPanel({
game,
orientation,
roomMachineState,
- fontSize,
+ nameLineHeight,
+ taskHeaderFontSize,
+ descriptionFontSize,
+ outputTitleFontSize,
+ outputDataFontSize,
+ imgStyle = { width: '16px', height: '16px' },
width = '40%',
+ outputTitleWidth = '24%',
+ headerVerticalAlign = '-1px',
}) {
const outputSelector = orientation === 'left' ? leftExecutionOutputSelector : rightExecutionOutputSelector;
const playerSelector = orientation === 'left' ? firstPlayerSelector : secondPlayerSelector;
@@ -24,46 +39,90 @@ function StreamTaskInfoPanel({
const assert = output?.asserts ? output.asserts[0] : {};
- const args = assert?.arguments;
- const expected = assert?.expected;
- const result = assert?.result || assert?.value;
+ const defaultData = '';
+
+ const args = assert?.arguments || defaultData;
+ const expected = assert?.expected || defaultData;
+ const result = assert?.result || assert?.value || defaultData;
+
+ const id = player?.id || 0;
return (
-
+
-
+
+
+ {renderPlayerId(leftEditor?.playerId, headerVerticalAlign)}
+
+
+ {/* {player?.clanId && ( */}
+ {renderImg(leftPlayer?.clanId, imgStyle)}
+ {/* )} */}
+
+
+ {('Фамилия Имя').split(' ').map(str => (
+
+
+ {upperCase(str || 'Test')}
+
+ ))}
+
+
+ )}
+
+
+
+ {`${leftOutput.successCount}/${leftOutput.assertsCount || 100}`}
+
+ stream
-
-
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/stream/StreamTaskInfoPanel.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/stream/StreamTaskInfoPanel.jsx
index 31d14a020..c1affd6cc 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/stream/StreamTaskInfoPanel.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/stream/StreamTaskInfoPanel.jsx
@@ -9,12 +9,27 @@ import {
import TaskDescriptionMarkdown from '../game/TaskDescriptionMarkdown';
+const renderImg = (_id, imgStyle) => (
+
+
+
+
+
+
+ {renderPlayerId(rightEditor?.playerId, headerVerticalAlign)}
+
+
+ {/* {player?.clanId && ( */}
+ {renderImg(rightPlayer?.clanId, imgStyle)}
+ {/* )} */}
+
+
+ {('Фамилия Имя').split(' ').map(str => (
+
+
+ {upperCase(str || 'Test')}
+
+ ))}
+
+
+ )}
+
+
+
+ {`${rightOutput.successCount}/${rightOutput.assertsCount || 100}`}
+
+
+);
+
+const renderPlayerId = (id, verticalAlign) => (
+ {id}
+);
+
function StreamTaskInfoPanel({
game,
orientation,
roomMachineState,
- fontSize,
+ nameLineHeight,
+ taskHeaderFontSize,
+ descriptionFontSize,
+ outputTitleFontSize,
+ outputDataFontSize,
+ imgStyle = { width: '16px', height: '16px' },
width = '40%',
+ outputTitleWidth = '24%',
+ headerVerticalAlign = '-1px',
}) {
const outputSelector = orientation === 'left' ? leftExecutionOutputSelector : rightExecutionOutputSelector;
const playerSelector = orientation === 'left' ? firstPlayerSelector : secondPlayerSelector;
@@ -24,46 +39,90 @@ function StreamTaskInfoPanel({
const assert = output?.asserts ? output.asserts[0] : {};
- const args = assert?.arguments;
- const expected = assert?.expected;
- const result = assert?.result || assert?.value;
+ const defaultData = '';
+
+ const args = assert?.arguments || defaultData;
+ const expected = assert?.expected || defaultData;
+ const result = assert?.result || assert?.value || defaultData;
+
+ const id = player?.id || 0;
return (
-
-
+
+
-
- 3/8 ЗАДАЧ
+
+ 3/8 ЗАДАЧ
-
{/* {player?.id || 0}
+
+
+ {renderPlayerId(id, headerVerticalAlign)}
+
+
+ {/* {player?.clanId && ( */}
+ {renderImg(id, imgStyle)}
+ {/* )} */}
+
+ */}
{/* 3 / 8 Задача */}
{/*
*/}
-
- {(player?.name || 'Фамилия Имя').split(' ').map((str, index) => (
-
- {upperCase(str || 'Test')}
+
+ {('Фамилия Имя').split(' ').map(str => (
+
+ {upperCase(str || 'Test')}
+
))}
+
-
-
-
Входные данные
- {args}
+
+
+
-
+
+ Входные
+ данные
+ {args}
-
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/stream/StreamWidget.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/stream/StreamWidget.jsx
index 7fe39c42e..7f14cd095 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/stream/StreamWidget.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/stream/StreamWidget.jsx
@@ -20,6 +20,9 @@ const orientations = {
RIGHT: 'right',
};
+const toPxlStr = number => `${number}px`;
+const toPrcStr = number => `${number}%`;
+
function StreamWidget({
mainMachine,
waitingRoomMachine,
@@ -30,11 +33,21 @@ function StreamWidget({
const searchParams = useSearchParams();
const orientation = searchParams.has('orientation') ? searchParams.get('orientation') : orientations.NONE;
- const fontSize = searchParams.has('fontSize') ? searchParams.get('fontSize') : 16;
- const codeFontSize = searchParams.has('codeFontSize') ? searchParams.get('codeFontSize') : 16;
- const headerFontSize = searchParams.has('headerFontSize') ? searchParams.get('headerFontSize') : 16;
- const widthInfoPanelPercentage = searchParams.has('widthInfoPanel') ? searchParams.get('widthInfoPanel') : 40;
- const widthEditorPanelPercentage = searchParams.has('widthEditorPanel') ? searchParams.get('widthEditorPanel') : 60;
+ const headerVerticalAlign = toPxlStr(searchParams.has('headerVerticalAlign') ? searchParams.get('headerVerticalAlign') : -1);
+ const statusVerticalAlign = toPxlStr(searchParams.has('statusVerticalAlign') ? searchParams.get('statusVerticalAlign') : -1);
+ const taskHeaderFontSize = toPxlStr(searchParams.has('taskHeaderFontSize') ? searchParams.get('taskHeaderFontSize') : 16);
+ const descriptionFontSize = toPxlStr(searchParams.has('descriptionFontSize') ? searchParams.get('descriptionFontSize') : 16);
+ const outputTitleFontSize = toPxlStr(searchParams.has('outputTitleFontSize') ? searchParams.get('outputTitleFontSize') : 16);
+ const outputDataFontSize = toPxlStr(searchParams.has('outputDataFontSize') ? searchParams.get('outputDataFontSize') : 16);
+ const codeFontSize = toPxlStr(searchParams.has('codeFontSize') ? searchParams.get('codeFontSize') : 16);
+ const headerFontSize = toPxlStr(searchParams.has('headerFontSize') ? searchParams.get('headerFontSize') : 16);
+ const testBarFontSize = toPxlStr(searchParams.has('testBarFontSize') ? searchParams.get('testBarFontSize') : 16);
+ const testBarHeight = toPrcStr(searchParams.has('testBarHeight') ? searchParams.get('testBarHeight') : 25);
+ const nameLineHeight = toPxlStr(searchParams.has('nameLineHeight') ? searchParams.get('nameLineHeight') : 10);
+ const imgSize = toPxlStr(searchParams.has('imgSize') ? searchParams.get('imgSize') : 10);
+ const widthInfoPanelPercentage = toPrcStr(searchParams.has('widthInfoPanel') ? searchParams.get('widthInfoPanel') : 40);
+ const widthEditorPanelPercentage = toPrcStr(searchParams.has('widthEditorPanel') ? searchParams.get('widthEditorPanel') : 60);
+ const outputTitleWidth = toPrcStr(searchParams.has('outputTitleWidth') ? searchParams.get('outputTitleWidth') : 25);
const { mainService, waitingRoomService } = useGameRoomMachine({
mainMachine,
@@ -74,40 +87,59 @@ function StreamWidget({
return ;
}
+ const headerTitleClassName = orientation === orientations.NONE ? 'cb-stream-full-widget-header-title' : 'cb-stream-widget-header-title';
+
return (
Ожидаемый результат
- {expected}
+
+
-
+
+ Ожидаемый
+ результат
+ {expected}
-
Полученный результат
- {result}
+
+
+
+ Полученный
+ результат
+ {result}
-
-
-
Баттл Вузов
-
+
+
+ Баттл Вузов
+
{orientations.NONE === orientation && (
+
{orientations.LEFT === orientation && (
<>