change the approach to obtaining user statistics data

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

@@ -14,9 +14,25 @@ $gold: #daa520;
 @import 'gamePreview';
 @import '~react-contexify/dist/ReactContexify.css';
 
+// @font-face {
+//   font-family: 'External';
+//   src: url('https://yastatic.net/s3/lpc-ext/Young%20Con%202025/YangoHeadline-Black.ttf') format('truetype');
+//   font-weight: 900;
+//   font-style: normal;
+//   font-display: swap;
+// }
+
 @font-face {
   font-family: 'External';
-  src: url('https://yastatic.net/s3/lpc-ext/Young%20Con%202025/YangoHeadline-Black.ttf') format('truetype');
+  src: url('../static/fonts/External.ttf') format('truetype');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'ExternalPlane';
+  src: url('https://yastatic.net/s3/home/fonts/ys/4/text-geo-regular.woff') format('truetype');
   font-weight: 900;
   font-style: normal;
   font-display: swap;
@@ -2500,54 +2516,85 @@ a:hover {
   display: inline-block;
   font-size: 18px;
   color: white;
-  padding-right: 25px;
+  padding-right: 20px;
 }
 
 .cb-stream-tasks-stats {
   background-color: #FAFF0F;
-  padding: 20px 16px;
-  border-radius: 25px;
+  padding: 10px 16px;
+  border-radius: 50px;
+
+  font-weight: 900;
+
+  .winner & {
+    color: white;
+    background-color: #7642E8;
+  }
 }
 
 .cb-stream-output-title {
   background-color: #FAFF0F;
 
-  padding: 16px 20px;
+  margin: -3px;
+  padding: 10px 20px;
+
+  border: 3px solid #FAFF0F;
   border-radius: 25px;
+
+  font-weight: 700;
+
+  .winner & {
+    color: white;
+    background-color: #7642E8;
+  }
 }
 
 .cb-stream-editor-panel {
   border: 4px solid #3C4168;
 }
 
 .cb-stream-editor-left {
-  border-top-left-radius: 25px;
+  border-top-left-radius: 50px;
   border-right: 0px;
   border-bottom: 0px;
 }
 
 .cb-stream-editor-right {
-  border-top-right-radius: 25px;
+  border-top-right-radius: 50px;
   border-left: 0px;
   border-bottom: 0px;
 }
 
 .cb-stream-name {
   width: 118px;
   color: #FAFF0F;
+
+  .winner & {
+    color: #7642E8;
+  }
 }
 
 .cb-stream-output {
   width: 100%;
-  border: 4px solid #3C4168;
+  border: 3px solid #3C4168;
   border-radius: 25px;
 }
 
+.cb-stream-full-output {
+  width: 100%;
+}
+
 .cb-stream-task-description {
+  font-family: 'ExternalPlane';
   color: #B6A4FF;
 }
 
 .cb-stream-widget {
+  font-family: 'ExternalPlane';
+  background-color: #000000;
+}
+
+.cb-stream-widget .view-line {
   background-color: #000000;
 }
 
@@ -2556,56 +2603,100 @@ a:hover {
   display: inline-block;
   overflow: hidden;
   white-space: nowrap;
+  background: rgba(0, 0, 0, 0);
+
+  margin-left: 0.7em;
 }
 
 .cb-stream-full-video {
   border: 4px solid #3C4168;
-  border-radius: 25px;
+  border-radius: 50px;
 }
 
 .cb-stream-full-editor {
   border: 4px solid #3C4168;
-  border-radius: 25px;
 }
 
 .editor-left {
-  border-top-left-radius: 25px;
-  border-right: 0px;
+  border-top-right-radius: 50px;
+  border-left: 0px;
   border-bottom: 0px;
 }
 
 .editor-right {
-  border-top-right-radius: 25px;
-  border-left: 0px;
+  border-top-left-radius: 50px;
+  border-right: 0px;
   border-bottom: 0px;
 }
 
 .cb-stream-widget-text {
   font-family: 'External';
   font-weight: 700;
+
+  vertical-align: -1px;
+
+  &.italic {
+    font-style: italic;
+  }
 }
 
-.cb-stream-widget-header-img-left {
+
+.cb-stream-widget-header-title {
   background-size: cover;
-  width: 20%;
-  background-image: url(../static/images/stream/back-stripes.svg);
-  fill: #FAFF0F;
+  width: 100%;
+  font-weight: 900;
+  background-image: url(../static/images/stream/header.svg);
+
+  .winner & {
+    background-image: url(../static/images/stream/header-winner.svg);
+  }
 }
 
-.cb-stream-widget-header-img-right {
+.cb-stream-full-widget-header-title {
   background-size: cover;
-  width: 20%;
-  background-image: url(../static/images/stream/stripes.svg);
-  fill: #FAFF0F;
+  width: 100%;
+  font-weight: 900;
+  background-image: url(../static/images/stream/header-mini.svg);
+
+  .winner & {
+    background-image: url(../static/images/stream/header-mini-winner.svg);
+  }
 }
 
-.cb-stream-widget-header-title {
-  width: 60%;
+.cb-stream-player-number {
   background-color: #FAFF0F;
+  border-radius: 50%;
+
+  font-weight: 900;
+
+  .winner & {
+    color: white;
+    background-color: #7642E8;
+  }
 }
 
-.cb-stream-player-number {
+.cb-stream-number-text {
+  padding: 10px 10px;
+  border: 3px solid outline;
+}
+
+.cb-stream-player-clan {
+  border: 3px solid black;
+  border-radius: 50%;
+  margin-left: -10px;
+}
+
+.cb-stream-full-task-stats {
+  clear: both;
+  display: inline-block;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.cb-stream-full-solution-bar {
+  height: 10%;
+  width: 100%;
   background-color: #FAFF0F;
-  padding: 20px 16px;
-  border-radius: 25px;
+  bottom: 34%;
+  margin-left: -10px;
 }

services/app/apps/codebattle/assets/js/widgets/components/Editor.jsx

@@ -12,8 +12,8 @@ import EditorLoading from './EditorLoading';
 
 function Editor(props) {
   const {
- value, syntax, onChange, theme, loading = false, mode,
-} = props;
+    value, syntax, onChange, theme, loading = false, mode, showVimStatusBar,
+  } = props;
 
   // Map your custom language key to an actual Monaco recognized language
   const mappedSyntax = languages[syntax];
@@ -61,6 +61,12 @@ function Editor(props) {
     /* eslint-disable react-hooks/exhaustive-deps */
   }, [mode, editorRef.current]);
 
+  const vimStatusBarStyle = showVimStatusBar ? {
+    padding: '4px 8px',
+    fontFamily: 'monospace',
+    borderTop: '1px solid #eaeaea',
+  } : { display: 'none' };
+
   return (
     <>
       <MonacoEditor
@@ -79,11 +85,7 @@ function Editor(props) {
       {/* This is for displaying normal/insert mode status in Vim */}
       <div
         ref={vimStatusRef}
-        style={{
-          padding: '4px 8px',
-          fontFamily: 'monospace',
-          borderTop: '1px solid #eaeaea',
-        }}
+        style={vimStatusBarStyle}
       />
 
       <EditorLoading loading={loading} />
@@ -106,6 +108,12 @@ Editor.propTypes = {
   checkResult: PropTypes.func.isRequired,
   userType: PropTypes.string.isRequired,
   userId: PropTypes.number.isRequired,
+  showVimStatusBar: PropTypes.bool,
+  scrollbarStatus: PropTypes.string,
+  lineDecorationsWidth: PropTypes.number,
+  lineNumbersMinChars: PropTypes.number,
+  glyphMargin: PropTypes.bool,
+  folding: PropTypes.bool,
 };
 
 Editor.defaultProps = {
@@ -115,6 +123,12 @@ Editor.defaultProps = {
   fontSize: 16,
   editable: false,
   loading: false,
+  showVimStatusBar: true,
+  scrollbarStatus: 'visible',
+  lineDecorationsWidth: 0,
+  lineNumbersMinChars: 3,
+  glyphMargin: true,
+  folding: true,
 };
 
 export default memo(Editor);

services/app/apps/codebattle/assets/js/widgets/config/editorThemes.js

@@ -1,4 +1,5 @@
 export default {
   dark: 'vs-dark',
+  custom: 'my-theme',
   light: 'light',
 };