fixes

Author: ReDBrother

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

@@ -46,6 +46,14 @@ $gold: #daa520;
   font-display: swap;
 }
 
+@font-face {
+  font-family: 'ExternalPlaneHugh';
+  src: url('../static/fonts/ygh.ttf') format('truetype');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
 $fa-font-path: '/fonts';
 
 @import 'fonts';
@@ -2541,6 +2549,7 @@ a:hover {
 }
 
 .cb-stream-output-title {
+  font-family: 'ExternalPlaneHugh';
   background-color: #FAFF0F;
 
   margin: -3px;
@@ -2549,8 +2558,6 @@ a:hover {
   border: 3px solid #FAFF0F;
   border-radius: 25px;
 
-  font-weight: 700;
-
   .winner & {
     color: white;
     background-color: #7642E8;
@@ -2634,14 +2641,14 @@ a:hover {
 }
 
 .cb-stream-output-data {
-  font-family: 'ExternalPlane';
   color: #B6A4FF;
   display: inline-block;
   overflow: hidden;
   white-space: nowrap;
   background: rgba(0, 0, 0, 0);
 
   margin-left: 0.7em;
+  font-family: 'ExternalPlaneBold';
 }
 
 .cb-stream-full-video {

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

@@ -66,7 +66,7 @@ function StreamEditorPanel({
             <div className="d-flex w-100 justify-content-end">
               <div
                 style={{ fontSize: testBarFontSize }}
-                className="d-flex align-items-center cb-stream-widget-text italic mr-2"
+                className="d-flex align-items-center cb-stream-widget-text italic mr-2 pr-2"
               >
                 {`${Math.round(((output.successCount || 0) * 100) / (output.assertsCount || 1))}/100`}
               </div>

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

@@ -20,8 +20,8 @@ const getUrl = (id, isWinner) => (
   isWinner ? `/${id}-win.png` : `/${id}.png`
 );
 
-const renderPlayerId = (id, verticalAlign) => (
-  <span style={{ marginLeft: '-0.2em', verticalAlign }}>{id}</span>
+const renderPlayerId = (id, verticalAlign, marginBottom) => (
+  <span style={{ marginLeft: '-0.2em', verticalAlign, marginBottom }}>{id}</span>
 );
 
 const renderImg = (id, imgStyle, isWinner = false) => (
@@ -45,6 +45,7 @@ function StreamFullPanel({
   testBarHeight,
   testBarWinGifTop,
   testBarProgressGifTop,
+  numberMarginBottom,
   progressGifSize,
   winGifSize,
 }) {
@@ -116,7 +117,7 @@ function StreamFullPanel({
       <div className="d-flex w-100 justify-content-between py-3 px-4" style={{ height: '25%', minHeight: '25%', maxHeight: '25%' }}>
         <div>
           <div className="cb-stream-tasks-stats cb-stream-full-task-stats cb-stream-widget-text">
-            <span style={{ verticalAlign: statusVerticalAlign, fontSize: taskHeaderFontSize }}>
+            <span style={{ verticalAlign: statusVerticalAlign, fontSize: taskHeaderFontSize, marginBottom: numberMarginBottom }}>
               {`${(game?.task?.id || 1) % 21}/21 ЗАДАЧ`}
             </span>
           </div>
@@ -165,7 +166,7 @@ function StreamFullPanel({
               }
               style={imgStyle}
             >
-              {renderPlayerId(leftEditor?.playerId, statusVerticalAlign)}
+              {renderPlayerId(leftEditor?.playerId, statusVerticalAlign, numberMarginBottom)}
             </div>
             {leftPlayer?.clanId && (
               <div className="cb-stream-player-clan h-100 position-relative mr-3">
@@ -238,7 +239,7 @@ function StreamFullPanel({
               }
               style={imgStyle}
             >
-              {renderPlayerId(rightEditor?.playerId, statusVerticalAlign)}
+              {renderPlayerId(rightEditor?.playerId, statusVerticalAlign, numberMarginBottom)}
             </div>
             {rightPlayer?.clanId && (
               <div className="cb-stream-player-clan h-100 position-relative mr-3">

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

@@ -18,8 +18,8 @@ const renderImg = (id, imgStyle, isWinner) => (
   id ? <img style={imgStyle} src={getUrl(id, isWinner)} alt="" /> : <></>
 );
 
-const renderPlayerId = (id, verticalAlign) => (
-  <span style={{ marginLeft: '-0.2em', verticalAlign }}>{id}</span>
+const renderPlayerId = (id, verticalAlign, marginBottom) => (
+  <span style={{ marginLeft: '-0.2em', verticalAlign, marginBottom }}>{id}</span>
 );
 
 function StreamTaskInfoPanel({
@@ -35,6 +35,7 @@ function StreamTaskInfoPanel({
   width = '40%',
   outputTitleWidth = '24%',
   headerVerticalAlign = '-1px',
+  numberMarginBottom,
 }) {
   const outputSelector = orientation === 'left' ? leftExecutionOutputSelector : rightExecutionOutputSelector;
   const playerSelector = orientation === 'left' ? firstPlayerSelector : secondPlayerSelector;
@@ -73,7 +74,7 @@ function StreamTaskInfoPanel({
               )
             }
           >
-            <span style={{ verticalAlign: headerVerticalAlign }}>
+            <span style={{ verticalAlign: headerVerticalAlign, numberMargin: numberMarginBottom }}>
               {`${(game?.task?.id || 1) % 21}/21 ЗАДАЧ`}
             </span>
           </div>
@@ -87,7 +88,7 @@ function StreamTaskInfoPanel({
               )}
               style={imgStyle}
             >
-              {renderPlayerId(id, headerVerticalAlign)}
+              {renderPlayerId(id, headerVerticalAlign, numberMarginBottom)}
             </div>
             <div
               className={

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

@@ -25,6 +25,7 @@ const orientations = {
 
 const toPxlStr = number => `${number}px`;
 const toPrcStr = number => `${number}%`;
+const toEmStr = number => `${number}em`;
 
 const useWinnerHeader = (orientation, roomMachineState) => {
   const editorSelector = orientation === 'left' ? leftEditorSelector : rightEditorSelector;
@@ -69,6 +70,7 @@ function StreamWidget({
   const outputTitleWidth = toPrcStr(searchParams.has('outputTitleWidth') ? searchParams.get('outputTitleWidth') : 25);
   const progressGifSize = toPxlStr(searchParams.has('progressGifSize') ? searchParams.get('progressGifSize') : 100);
   const winGifSize = toPxlStr(searchParams.has('winGifSize') ? searchParams.get('winGifSize') : 100);
+  const numberMarginBottom = toEmStr(searchParams.has('numberMarginBottom') ? searchParams.get('numberMarginBottom') : -0.09);
 
   const { mainService, waitingRoomService } = useGameRoomMachine({
     mainMachine,
@@ -157,6 +159,7 @@ function StreamWidget({
               testBarProgressGifTop={testBarProgressGifTop}
               progressGifSize={progressGifSize}
               winGifSize={winGifSize}
+              numberMarginBottom={numberMarginBottom}
             />
           )}
           {orientations.LEFT === orientation && (
@@ -174,6 +177,7 @@ function StreamWidget({
                 outputTitleWidth={outputTitleWidth}
                 imgStyle={{ width: imgSize, height: imgSize }}
                 width={widthInfoPanelPercentage}
+                numberMarginBottom={numberMarginBottom}
               />
               <StreamEditorPanel
                 orientation={orientation}
@@ -218,6 +222,7 @@ function StreamWidget({
                 outputTitleWidth={outputTitleWidth}
                 imgStyle={{ width: imgSize, height: imgSize }}
                 width={widthInfoPanelPercentage}
+                numberMarginBottom={numberMarginBottom}
               />
             </div>
           )}