@@ -9,15 +9,23 @@ import {
99
1010import TaskDescriptionMarkdown from '../game/TaskDescriptionMarkdown' ;
1111
12+ const renderPlayerId = id => (
13+ < span style = { { marginLeft : '-0.2em' } } > { id } </ span >
14+ ) ;
15+
1216function StreamTaskInfoPanel ( {
1317 game,
1418 orientation,
1519 roomMachineState,
1620 nameLineHeight,
17- fontSize,
21+ taskHeaderFontSize,
22+ descriptionFontSize,
23+ outputTitleFontSize,
1824 outputDataFontSize,
1925 imgStyle = { width : '16px' , height : '16px' } ,
2026 width = '40%' ,
27+ outputTitleWidth = '24%' ,
28+ headerVerticalAlign = '-1px' ,
2129} ) {
2230 const outputSelector = orientation === 'left' ? leftExecutionOutputSelector : rightExecutionOutputSelector ;
2331 const playerSelector = orientation === 'left' ? firstPlayerSelector : secondPlayerSelector ;
@@ -27,28 +35,33 @@ function StreamTaskInfoPanel({
2735
2836 const assert = output ?. asserts ? output . asserts [ 0 ] : { } ;
2937
30- const defaultData = '[sdfdsfsdfsdfdsfsdfsdfsdfsdf] ' ;
38+ const defaultData = '' ;
3139
3240 const args = assert ?. arguments || defaultData ;
3341 const expected = assert ?. expected || defaultData ;
3442 const result = assert ?. result || assert ?. value || defaultData ;
3543
44+ const id = player ?. id || 0 ;
45+
3646 return (
3747 < 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" >
48+ < div className = "d-flex pt-4" style = { { fontSize : taskHeaderFontSize } } >
3949 < div >
40- < div style = { { fontSize } } className = "cb-stream-tasks-stats cb-stream-widget-text italic" >
41- < span > 3/8 ЗАДАЧ</ span >
50+ < div
51+ className = "cb-stream-tasks-stats cb-stream-widget-text italic"
52+ >
53+ < span style = { { verticalAlign : headerVerticalAlign } } > 3/8 ЗАДАЧ</ span >
4254 </ div >
4355 </ div >
4456 < 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 >
57+ < div className = "d-flex flex-row align-items-center w-auto h-100 px-3" >
58+ < div
59+ className = "d-flex position-relative align-items-center justify-content-center cb-stream-player-number cb-stream-widget-text italic"
60+ style = { imgStyle }
61+ >
62+ { renderPlayerId ( id ) }
5063 </ div >
51- < div className = "cb-stream-player-clan" >
64+ < div className = "cb-stream-player-clan h-100 position-relative " >
5265 { /* {player?.clanId && ( */ }
5366 < img style = { imgStyle } src = "/assets/images/clans/1.png" alt = "И" />
5467 { /* )} */ }
@@ -64,29 +77,47 @@ function StreamTaskInfoPanel({
6477 { ( 'Фамилия Имя' ) . split ( ' ' ) . map ( str => (
6578 < div
6679 key = { str }
67- style = { { fontSize , lineHeight : ` ${ nameLineHeight } px` } }
80+ style = { { lineHeight : nameLineHeight } }
6881 >
6982 { upperCase ( str || 'Test' ) }
7083 </ div >
7184 ) ) }
7285 </ div >
7386 </ div >
74- < div className = "cb-stream-task-description h-100 py-5" style = { { fontSize } } >
87+ < div className = "cb-stream-task-description h-100 py-5" style = { { fontSize : descriptionFontSize } } >
7588 < TaskDescriptionMarkdown description = { game ?. task ?. descriptionRu } />
7689 </ div >
7790 < div className = "d-flex flex-column" >
78- < div className = "d-flex flex-column pb-4" style = { { fontSize } } >
91+ < div className = "d-flex flex-column pb-4" style = { { fontSize : outputTitleFontSize } } >
7992 < div className = "d-flex cb-stream-output mt-2 mb-1" >
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 } } } > { args } </ div >
93+ < div
94+ className = "d-flex flex-column cb-stream-output-title"
95+ style = { { width : outputTitleWidth , minWidth : outputTitleWidth , maxWidth : outputTitleWidth } }
96+ >
97+ < div > Входные</ div >
98+ < div > данные</ div >
99+ </ div >
100+ < div className = "cb-stream-output-data align-content-around" style = { { fontSize : outputDataFontSize } } > { args } </ div >
82101 </ div >
83102 < div className = "d-flex cb-stream-output mb-1" >
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 } } } > { expected } </ div >
103+ < div
104+ className = "d-flex flex-column cb-stream-output-title"
105+ style = { { width : outputTitleWidth , minWidth : outputTitleWidth , maxWidth : outputTitleWidth } }
106+ >
107+ < div > Ожидаемый</ div >
108+ < div > результат</ div >
109+ </ div >
110+ < div className = "cb-stream-output-data align-content-around" style = { { fontSize : outputDataFontSize } } > { expected } </ div >
86111 </ div >
87112 < div className = "d-flex cb-stream-output mt-1 mb-2" >
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 } } } > { result } </ div >
113+ < div
114+ className = "d-flex flex-column cb-stream-output-title"
115+ style = { { width : outputTitleWidth , minWidth : outputTitleWidth , maxWidth : outputTitleWidth } }
116+ >
117+ < div > Полученный</ div >
118+ < div > результат</ div >
119+ </ div >
120+ < div className = "cb-stream-output-data align-content-around" style = { { fontSize : outputDataFontSize } } > { result } </ div >
90121 </ div >
91122 </ div >
92123 </ div >
0 commit comments