Merge pull request #2222 from hexlet-codebattle/add_new_game_types

Add new game types

Author: ReDBrother

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

@@ -687,6 +687,14 @@ a {
   opacity: 0;
 }
 
+.cb-opacity-05 {
+  opacity: 0.05;
+}
+
+.cb-opacity-10 {
+  opacity: 0.10;
+}
+
 .cb-opacity-25 {
   opacity: 0.25;
 }
@@ -2095,12 +2103,12 @@ a.cb-text:hover {
     border-color: $cb-secondary-focus-border;
   }
 
-  &:hover {
+  &:hover:not(:disabled):not(.disabled) {
     background-color: $cb-secondary-hover-background;
     border-color: $cb-secondary-hover-border;
   }
 
-  &:focus {
+  &:focus:not(:disabled):not(.disabled) {
     background-color: $cb-secondary;
     border-color: $cb-secondary-focus-border;
   }
@@ -2140,13 +2148,13 @@ a.cb-text:hover {
     border-color: $cb-secondary-focus-border;
   }
 
-  &:hover {
+  &:hover:not(:disabled):not(.disabled) {
     color: white;
     background-color: $cb-secondary-hover-background;
     border-color: $cb-secondary-hover-border;
   }
 
-  &:focus {
+  &:focus:not(:disabled):not(.disabled) {
     color: white;
     background-color: $cb-secondary;
     border-color: $cb-secondary-focus-border;
@@ -2178,8 +2186,12 @@ a.cb-text:hover {
   background-color: $cb-success;
   border-color: $cb-success;
 
-  &:hover:not(:disabled),
-  &:hover:not(.disabled) {
+  &:hover:not(:disabled):not(.disabled) {
+    background-color: $cb-hovered-success;
+    border-color: $cb-hovered-success;
+  }
+
+  &:focus:not(:disabled):not(.disabled) {
     background-color: $cb-hovered-success;
     border-color: $cb-hovered-success;
   }
@@ -2188,8 +2200,7 @@ a.cb-text:hover {
 .cb-btn-outline-success {
   border-color: $cb-success;
 
-  &:hover:not(:disabled),
-  &:hover:not(.disabled) {
+  &:hover:not(:disabled):not(.disabled) {
     background-color: $cb-hovered-success;
     border-color: $cb-hovered-success;
   }

services/app/apps/codebattle/assets/js/__tests__/RootContainer.test.jsx

@@ -19,16 +19,18 @@ import waitingRoom from '../widgets/machines/waitingRoom';
 import RootContainer from '../widgets/pages/RoomWidget';
 import reducers from '../widgets/slices';
 
+jest.mock('pixelmatch', () => ({}));
+
 jest.mock('monaco-editor', () => ({
   editor: {
-    defineTheme: () => {},
+    defineTheme: () => { },
     create: () => ({
-      dispose: () => {},
-      onDidChangeModelContent: () => {},
-      setValue: () => {},
-      getValue: () => {},
-      getModel: () => {},
-      focus: () => {},
+      dispose: () => { },
+      onDidChangeModelContent: () => { },
+      setValue: () => { },
+      getValue: () => { },
+      getModel: () => { },
+      focus: () => { },
     }),
   },
 }));
@@ -37,7 +39,7 @@ jest.mock('monaco-vim', () => ({
   VimMode: class {
     constructor() {
       return {
-        dispose: () => {},
+        dispose: () => { },
       };
     }
   },
@@ -242,38 +244,6 @@ test('test rendering preview game component', async () => {
   expect(await findByText(/Examples:/)).toBeInTheDocument();
 });
 
-test('test game guide', async () => {
-  const store = configureStore({
-    reducer,
-    preloadedState,
-  });
-
-  const { findByRole, user } = setup(
-    <Provider store={store}>
-      <NiceModal.Provider>
-        <RootContainer
-          pageName="game"
-          mainMachine={createMachine({ predictableActionArguments: true, ...game })}
-          taskMachine={createMachine({ predictableActionArguments: true, ...task })}
-          editorMachine={createMachine({ predictableActionArguments: true, ...editor })}
-          waitingRoomMachine={createMachine({ predictableActionArguments: true, ...waitingRoom })}
-        />
-      </NiceModal.Provider>
-    </Provider>,
-  );
-
-  const showGuideButton = await findByRole('button', { name: 'Show guide' });
-
-  await user.click(showGuideButton);
-
-  const closeGuideButton = await findByRole('button', { name: 'Close' });
-  expect(closeGuideButton).toBeInTheDocument();
-
-  await user.click(closeGuideButton);
-
-  expect(closeGuideButton).not.toBeInTheDocument();
-});
-
 test('test a bot invite button', async () => {
   const store = configureStore({
     reducer,

services/app/apps/codebattle/assets/js/__tests__/UserSettings.test.jsx

@@ -76,19 +76,19 @@ describe('UserSettings test cases', () => {
       .spyOn(axios, 'patch')
       .mockResolvedValueOnce({ data: {} });
     const {
- getByRole, getByLabelText, getByTestId, user,
-} = setup(
-  <Provider store={store}>
-    <UserSettings />
-  </Provider>,
+      getByRole, getByLabelText, getByTestId, user,
+    } = setup(
+      <Provider store={store}>
+        <UserSettings />
+      </Provider>,
     );
     const submitButton = getByLabelText('SubmitForm');
     const nameInput = getByTestId('nameInput');
-    const langSelect = getByTestId('langSelect');
+    const codeLangSelect = getByTestId('code-langSelect');
 
     await user.clear(nameInput);
     await user.type(nameInput, 'Dmitry');
-    await user.selectOptions(langSelect, 'Javascript');
+    await user.selectOptions(codeLangSelect, 'Javascript');
     await user.click(submitButton);
 
     await waitFor(() => {
@@ -98,6 +98,10 @@ describe('UserSettings test cases', () => {
           clan: '',
           name: 'Dmitry',
           lang: 'js',
+          locale: undefined,
+          lang_view: 'code',
+          db_type: '',
+          style_lang: '',
           sound_settings: {
             level: 6,
             type: 'standard',
@@ -111,11 +115,11 @@ describe('UserSettings test cases', () => {
 
   test('failed user settings update', async () => {
     const {
- getByTestId, getByLabelText, findByRole, findByText, user,
-} = setup(
-  <Provider store={store}>
-    <UserSettings />
-  </Provider>,
+      getByTestId, getByLabelText, findByRole, findByText, user,
+    } = setup(
+      <Provider store={store}>
+        <UserSettings />
+      </Provider>,
     );
     const submitButton = getByLabelText('SubmitForm');
     const nameInput = getByTestId('nameInput');

services/app/apps/codebattle/assets/js/i18n/dayjs.js

@@ -1,10 +1,23 @@
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 import timezone from 'dayjs/plugin/timezone';
+import updateLocale from 'dayjs/plugin/updateLocale';
 import utc from 'dayjs/plugin/utc';
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(duration);
+dayjs.extend(updateLocale);
+
+const locale = dayjs.locale();
+
+// const locale = dayjs.locale('es');
+// dayjs.tz.setDefault('Europe/Madrid');
+console.log(`Local: ${dayjs.tz.guess()}`);
+/* eslint-disable-next-line */
+
+dayjs.updateLocale(locale, {
+  weekStart: 1,
+});
 
 export default dayjs;

services/app/apps/codebattle/assets/js/iframes/cssbattle/index.js

@@ -0,0 +1,36 @@
+import { toPng } from 'html-to-image';
+
+const messageType = 'cssbattle';
+
+// if (event.origin.startsWith('https://codebattle.hexlet.io/games/')) {
+window.addEventListener(
+  'message',
+  event => {
+    try {
+      if (event.data.type !== 'cssbattle') {
+        return;
+      }
+
+      window.parent.postMessage(
+        { type: messageType, data: event.data },
+        event.origin,
+      );
+
+      if (event.data?.userId) {
+        const { bodyStr, userId } = event.data;
+
+        document.body.innerHTML = bodyStr;
+
+        toPng(document.body).then(dataUrl => {
+          window.parent.postMessage(
+            { type: messageType, dataUrl, userId },
+            event.origin,
+          );
+        });
+      }
+    } catch (e) {
+      console.error(e.message);
+    }
+  },
+  false,
+);

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

@@ -76,13 +76,14 @@ export const channelMethods = {
   gameScore: 'game:score',
   gameCancel: 'game:cancel',
   gameCreate: 'game:create',
-  cssGameCreate: 'game:css:create',
+  experimentGameCreate: 'game:experiment:create',
   gameCreateInvite: 'game:create_invite',
   gameAcceptInvite: 'game:accept_invite',
   gameDeclineInvite: 'game:decline_invite',
   gameCancelInvite: 'game:cancel_invite',
 
   reportOnPlayer: 'game:report',
+  gameTaskChangeTarget: 'game:task:change_target',
 
   chatAddMsg: 'chat:add_msg',
   chatCommand: 'chat:command',

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

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 
 import '../initEditor';
 import languages from '../config/languages';
+import { actions } from '../slices';
 import useEditor from '../utils/useEditor';
 
 import EditorLoading from './EditorLoading';
@@ -105,6 +106,8 @@ Editor.propTypes = {
   editable: PropTypes.bool,
   roomMode: PropTypes.string.isRequired,
   checkResult: PropTypes.func.isRequired,
+  toggleMuteSound: PropTypes.func,
+  mute: PropTypes.bool,
   userType: PropTypes.string.isRequired,
   userId: PropTypes.number.isRequired,
 };
@@ -114,8 +117,10 @@ Editor.defaultProps = {
   lineNumbers: 'on',
   syntax: 'js',
   fontSize: 16,
+  mute: true,
   editable: false,
   loading: false,
+  toggleMuteSound: actions.toggleMuteSound,
 };
 
 export default memo(Editor);

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

@@ -0,0 +1,43 @@
+import React, { memo } from 'react';
+
+import cn from 'classnames';
+import { useSelector } from 'react-redux';
+
+import { getPregressbarClass, getPregressbarWidth } from '@/pages/lobby/GameProgressBar';
+
+import EditorThemeCodes from '../config/editorThemes';
+import * as selectors from '../selectors';
+
+function EditorGameBar({ userId, theme }) {
+  const checkResult = useSelector(selectors.executionOutputSelector(userId));
+
+  const panelClassName = cn('d-flex position-absolute justify-content-center w-100', {
+    'bg-white': theme === EditorThemeCodes.light,
+    'bg-dark': theme === EditorThemeCodes.dark,
+  });
+  const editorBar = cn(
+    'cb-editor-game-progress-bar rounded-bottom bg-light border-top-0',
+    'd-flex justify-content-center pb-2 pt-1 px-4',
+    {
+      'bg-light': theme === EditorThemeCodes.light,
+      'bg-dark': theme === EditorThemeCodes.dark,
+    },
+  );
+
+  return (
+    <div className={panelClassName} title={checkResult.status}>
+      <div className={editorBar}>
+        <div className={getPregressbarClass({ checkResult }, theme)}>
+          <div
+            className="cb-asserts-progress"
+            style={{
+              width: getPregressbarWidth({ checkResult, theme }),
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default memo(EditorGameBar);