fix styles and editor bugs

Author: ReDBrother

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

@@ -385,9 +385,8 @@ a {
   height: 4px;
   background: white;
   position: relative;
-  border-top-left-radius: 0.25rem;
-  border-bottom-left-radius: 0.25rem;
-  clip-path: polygon(0 0, 92% 0, 100% 100%, 0% 100%);
+  border-radius: 0.25rem;
+  border-radius: 0.25rem;
 
   @media (max-width: $sm) {
     & {
@@ -398,14 +397,19 @@ a {
   &>.cb-asserts-progress {
     position: absolute;
     height: 100%;
-    border-top-left-radius: 0.25rem;
-    border-bottom-left-radius: 0.25rem;
+    border-radius: 0.25rem;
     background: #809b88;
   }
 
+  &.ok {
+    &>.cb-asserts-progress {
+      background: $gold;
+    }
+  }
+
   &.failure {
     &>.cb-asserts-progress {
-      background: $success;
+      background: $error;
     }
   }
 
@@ -1518,9 +1522,7 @@ a {
   height: 4px;
   background: white;
   position: relative;
-  border-top-left-radius: 0.25rem;
-  border-bottom-left-radius: 0.25rem;
-  clip-path: polygon(0 0, 92% 0, 100% 100%, 0% 100%);
+  border-radius: 0.25rem;
 
   @media (max-width: $sm) {
     & {

services/app/apps/codebattle/assets/js/socket.js

@@ -30,6 +30,7 @@ export const channelTopics = {
   chatUserBannedTopic: 'chat:user_banned',
 
   lobbyGameUpsertTopic: 'game:upsert',
+  lobbyGameEditorLangChangedTopic: 'game:editor_lang_changed',
   lobbyGameCheckStartedTopic: 'game:check_started',
   lobbyGameCheckCompletedTopic: 'game:check_completed',
   lobbyGameRemoveTopic: 'game:remove',
@@ -82,6 +83,7 @@ export const channelMethods = {
   giveUp: 'give_up',
 
   editorData: 'editor:data',
+  editorLang: 'editor:lang',
   editorCursorPosition: channelTopics.editorCursorPositionTopic,
   editorCursorSelection: channelTopics.editorCursorSelectionTopic,
 

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

@@ -1,27 +1,15 @@
-/* eslint-disable no-bitwise */
-import React, {
-  memo,
-  useState,
-  useEffect,
-  useCallback,
-  useMemo,
-} from 'react';
+import React, { memo } from 'react';
 
 import MonacoEditor, { loader } from '@monaco-editor/react';
-import cn from 'classnames';
 
 import haskellProvider from '../config/editor/haskell';
 import sassProvider from '../config/editor/sass';
 import stylusProvider from '../config/editor/stylus';
-import GameRoomModes from '../config/gameModes';
 import languages from '../config/languages';
-import sound from '../lib/sound';
-import getLanguageTabSize, { shouldReplaceTabsWithSpaces } from '../utils/editor';
-import useRemoteCursor from '../utils/useRemoteCursor';
+import useEditor from '../utils/useEditor';
 
-import Loading from './Loading';
+import EditorLoading from './EditorLoading';
 
-const editorPlaceholder = 'Please! Help me!!!';
 const monacoVersion = '0.52.0';
 
 loader.config({
@@ -41,193 +29,6 @@ loader.init().then(monaco => {
   monaco.languages.setMonarchTokensProvider('scss', sassProvider);
 });
 
-let editorClipboard = '';
-
-const useOption = ({
-  wordWrap = 'off',
-  lineNumbers = 'on',
-  syntax = 'js',
-  fontSize = 16,
-  editable = false,
-  loading = false,
-}) => {
-  const options = useMemo(() => ({
-    placeholder: editorPlaceholder,
-    wordWrap,
-    lineNumbers,
-    tabSize: getLanguageTabSize(syntax),
-    insertSpaces: shouldReplaceTabsWithSpaces(syntax),
-    lineNumbersMinChars: 3,
-    fontSize,
-    scrollBeyondLastLine: false,
-    selectOnLineNumbers: true,
-    minimap: {
-      enabled: false,
-    },
-    parameterHints: {
-      enabled: false,
-    },
-    readOnly: !editable || loading,
-    contextmenu: editable && !loading,
-    scrollbar: {
-      useShadows: false,
-      verticalHasArrows: true,
-      horizontalHasArrows: true,
-      vertical: 'visible',
-      horizontal: 'visible',
-      verticalScrollbarSize: 17,
-      horizontalScrollbarSize: 17,
-      arrowSize: 30,
-    },
-  }), [
-    wordWrap,
-    lineNumbers,
-    syntax,
-    fontSize,
-    editable,
-    loading,
-  ]);
-
-  return options;
-};
-
-const useEditor = props => {
-  const [editor, setEditor] = useState();
-  const [monaco, setMonaco] = useState();
-  // const convertRemToPixels = rem => rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
-  // this.statusBarHeight = lineHeight = current fontSize * 1.5
-  // this.statusBarHeight = convertRemToPixels(1) * 1.5;
-
-  useRemoteCursor(editor, monaco, props);
-  const options = useOption(props);
-
-  const handleResize = useCallback(() => {
-    if (editor) {
-      editor.layout();
-    }
-  }, [editor]);
-
-  // if (editor) {
-  //   const model = editor.getModel();
-  //
-  //   // fix flickering in editor
-  //   model.forceTokenization(model.getLineCount());
-  // }
-
-  useEffect(() => {
-    handleResize();
-  }, [props.locked, handleResize]);
-
-  useEffect(() => {
-    const ctrPlusS = e => {
-      if (e.key === 's' && (e.metaKey || e.ctrlKey)) e.preventDefault();
-    };
-
-    window.addEventListener('resize', handleResize);
-
-    return () => {
-      window.removeEventListener('resize', handleResize);
-      window.removeEventListener('keydown', ctrPlusS);
-    };
-  }, [handleResize]);
-
-  const handleEditorWillMount = () => {};
-
-  const handleEditorDidMount = (newEditor, newMonaco) => {
-    setEditor(newEditor);
-    setMonaco(newMonaco);
-
-    const {
-      editable,
-      gameMode,
-      checkResult,
-      toggleMuteSound,
-    } = props;
-
-    const isBuilder = gameMode === GameRoomModes.builder;
-
-    // Handle copy event
-    // editor.onDidCopyText(event => {
-    //   // Custom copy logic
-    //   const customText = `Custom copied text: ${event.text}`;
-    //   navigator.clipboard.writeText(customText);
-    //   event.preventDefault();
-    // });
-
-    newEditor.onKeyDown(e => {
-      // Custom Copy Event
-      if ((e.ctrlKey || e.metaKey) && e.keyCode === newMonaco.KeyCode.KEY_C) {
-        const selection = newEditor.getModel().getValueInRange(newEditor.getSelection());
-        editorClipboard = `___CUSTOM_COPIED_TEXT___${selection}`;
-
-        e.preventDefault();
-      }
-
-      // Custom Paste Event
-      if ((e.ctrlKey || e.metaKey) && e.keyCode === newMonaco.KeyCode.KEY_V) {
-        if (editorClipboard.startsWith('___CUSTOM_COPIED_TEXT___')) {
-          const customText = editorClipboard.replace('___CUSTOM_COPIED_TEXT___', '');
-
-          newEditor.executeEdits('custom-paste', [
-            {
-              range: newEditor.getSelection(),
-              text: customText,
-              forceMoveMarkers: true,
-            },
-          ]);
-        }
-
-        e.preventDefault();
-      }
-    });
-
-    if (editable && !isBuilder) {
-      newEditor.focus();
-    }
-
-    newEditor.addCommand(
-      newMonaco.KeyMod.CtrlCmd | newMonaco.KeyCode.Enter,
-      () => null,
-    );
-
-    newEditor.addCommand(
-      newMonaco.KeyMod.CtrlCmd | newMonaco.KeyCode.KEY_M,
-      () => null,
-    );
-
-    if (checkResult) {
-      newEditor.addAction({
-        id: 'codebattle-check-keys',
-        label: 'Codebattle check start',
-        keybindings: [newMonaco.KeyMod.CtrlCmd | newMonaco.KeyCode.Enter],
-        run: () => {
-          if (options.readOnly) {
-            checkResult();
-          }
-        },
-      });
-    }
-
-    newEditor.addAction({
-      id: 'codebattle-mute-keys',
-      label: 'Codebattle mute sound',
-      keybindings: [newMonaco.KeyMod.CtrlCmd | newMonaco.KeyCode.KEY_M],
-      run: () => {
-        const { mute } = props;
-        // eslint-disable-next-line no-unused-expressions
-        mute ? sound.toggle() : sound.toggle(0);
-        toggleMuteSound();
-      },
-    });
-  };
-
-  return {
-    options,
-    handleEditorWillMount,
-    handleEditorDidMount,
-  };
-};
-
 function Editor(props) {
     const {
       value,
@@ -236,14 +37,8 @@ function Editor(props) {
       theme,
       loading = false,
     } = props;
-    // FIXME: move here and apply mapping object
     const mappedSyntax = languages[syntax];
 
-    const loadingClassName = cn('position-absolute align-items-center justify-content-center w-100 h-100', {
-      'd-flex cb-loading-background': loading,
-      'd-none': !loading,
-    });
-
     const {
       options,
       handleEditorDidMount,
@@ -264,7 +59,7 @@ function Editor(props) {
           onChange={onChange}
           data-guide-id="Editor"
         />
-        <div className={loadingClassName}><Loading /></div>
+        <EditorLoading loading={loading} />
       </>
     );
 }

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

@@ -0,0 +1,16 @@
+import React, { memo } from 'react';
+
+import cn from 'classnames';
+
+import Loading from './Loading';
+
+function EditorLoading({ loading }) {
+    const loadingClassName = cn('position-absolute align-items-center justify-content-center w-100 h-100', {
+      'd-flex cb-loading-background': loading,
+      'd-none': !loading,
+    });
+
+    return <div className={loadingClassName}><Loading /></div>;
+}
+
+export default memo(EditorLoading);