Merge branch 'staging' into 'main'

Staging

See merge request frontend/squzanswerer!183

lib/components/QuizAnswerer.tsx

@@ -24,9 +24,6 @@ import "moment/dist/locale/ru";
 moment.locale("ru");
 const localeText = ruRU.components.MuiLocalizationProvider.defaultProps.localeText;
 
-console.log(localeText);
-console.log(moment);
-
 type Props = {
   quizSettings?: QuizSettings;
   quizId: string;
@@ -128,7 +125,6 @@ function QuizAnswererInner({
     </QuizViewContext.Provider>
   );
 }
-
 export default function QuizAnswerer(props: Props) {
   return (
     <HelmetProvider>
@@ -142,6 +138,19 @@ export default function QuizAnswerer(props: Props) {
             preventDuplicate={true}
             style={{ backgroundColor: lightTheme.palette.brightPurple.main }}
           >
+            <Box
+              id="hideoverlay"
+              sx={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: "100%",
+                background: "black",
+                zIndex: 999,
+                opacity: 0,
+              }}
+            />
             <QuizAnswererInner {...props} />
           </SnackbarProvider>
         </ThemeProvider>

lib/components/ViewPublicationPage/Question.tsx

@@ -42,7 +42,7 @@ export const Question = ({
 }: Props) => {
   const theme = useTheme();
   const { settings, show_badge, quizId } = useQuizSettings();
-  console.log(theme);
+
   return (
     <Box
       sx={{

lib/components/ViewPublicationPage/ResultForm.tsx

@@ -183,6 +183,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
                   display: "flex",
                   justifyContent: "center",
                 }}
+                onClick={(event) => event.preventDefault()}
               >
                 <img
                   alt="resultImage"

lib/components/ViewPublicationPage/StartPageViewPublication/StartPageDesktop.tsx

@@ -87,6 +87,7 @@ const StandartLayout = ({ alignType, quizHeaderBlock, quizMainBlock, backgroundB
                 justifyContent: "center",
                 "& > img": { width: "100%", borderRadius: "12px" },
               }}
+              onClick={(event) => event.preventDefault()}
             >
               {backgroundBlock}
             </Box>
@@ -204,6 +205,7 @@ const CenteredLayout = ({ quizHeaderBlock, quizMainBlock, backgroundBlock }: Lay
             justifyContent: "center",
             "& > img": { width: "100%", borderRadius: "12px" },
           }}
+          onClick={(event) => event.preventDefault()}
         >
           {backgroundBlock}
         </Box>

lib/components/ViewPublicationPage/StartPageViewPublication/StartPageMobile.tsx

@@ -73,6 +73,7 @@ const StandartMobileLayout = ({ quizHeaderBlock, quizMainBlock, backgroundBlock
                   borderRadius: "12px",
                 },
               }}
+              onClick={(event) => event.preventDefault()}
             >
               {backgroundBlock}
             </Box>
@@ -154,6 +155,7 @@ const ExpandedMobileLayout = ({ quizHeaderBlock, quizMainBlock, backgroundBlock
           minHeight: "100%",
         },
       }}
+      onClick={(event) => event.preventDefault()}
     >
       {backgroundBlock}
     </Box>
@@ -205,6 +207,7 @@ const CenteredMobileLayout = ({ quizHeaderBlock, quizMainBlock, backgroundBlock
               overflow: "hidden",
               "& > img": { width: "100%", borderRadius: "12px" },
             }}
+            onClick={(event) => event.preventDefault()}
           >
             {backgroundBlock}
           </Box>

lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx

@@ -105,6 +105,7 @@ export const StartPageViewPublication = () => {
               ? "center"
               : undefined,
         }}
+        onClick={(event) => event.preventDefault()}
       >
         {settings.cfg.startpage.logo && (
           <img
@@ -220,6 +221,7 @@ export const StartPageViewPublication = () => {
 
         color: settings.cfg.startpageType === "expanded" ? "white" : "black",
       }}
+      onClick={(event) => event.preventDefault()}
     >
       <QuizPreviewLayoutByType
         quizHeaderBlock={quizHeaderBlock}

lib/components/ViewPublicationPage/ViewPublicationPage.tsx

@@ -18,6 +18,7 @@ import { ResultForm } from "./ResultForm";
 import { StartPageViewPublication } from "./StartPageViewPublication";
 import NextButton from "./tools/NextButton";
 import PrevButton from "./tools/PrevButton";
+import unscreen from "@/ui_kit/unscreen";
 
 export default function ViewPublicationPage() {
   const { settings, recentlyCompleted, quizId, preview, changeFaviconAndTitle, questions } = useQuizSettings();
@@ -38,6 +39,16 @@ export default function ViewPublicationPage() {
   useYandexMetrics(settings?.cfg?.yandexMetricsNumber, preview);
   useVKMetrics(settings?.cfg?.vkMetricsNumber, preview);
 
+  useEffect(() => {
+    const root = document.getElementById("root");
+    const overlay = document.getElementById("hideoverlay");
+
+    if (root !== null && overlay !== null && settings.cfg?.isUnSc) {
+      overlay.style.cssText = "pointerEvents = auto;";
+      unscreen(overlay, root);
+    }
+  }, []);
+
   useEffect(
     function setFaviconAndTitle() {
       if (!changeFaviconAndTitle) return;

lib/components/ViewPublicationPage/questions/Date/DateRange.tsx

@@ -11,7 +11,7 @@ import { useRootContainerSize } from "@/contexts/RootContainerWidthContext";
 type DateProps = {
   currentQuestion: QuizQuestionDate;
 };
-console.log(moment.locale());
+
 export default ({ currentQuestion }: DateProps) => {
   const theme = useTheme();
   const isMobile = useRootContainerSize() < 690;

lib/components/ViewPublicationPage/questions/Emoji/EmojiVariant.tsx

@@ -187,25 +187,25 @@ export const EmojiVariant = ({
       <FormControlLabel
         key={variant.id}
         sx={{
+          textAlign: "center",
+          color: theme.palette.text.primary,
           margin: 0,
           padding: "15px",
-          color: theme.palette.text.primary,
           display: "flex",
-          gap: "10px",
           alignItems: variant.answer.length <= 60 ? "center" : "flex-start",
           position: "relative",
           height: "80px",
-          overflow: "auto",
           justifyContent: "center",
           "& .MuiFormControlLabel-label": {
             wordBreak: "break-word",
-            height: variant.answer.length <= 60 ? undefined : "60px",
+            height: variant.answer.length <= 60 ? "100%" : "60px",
             overflow: "auto",
             "&::-webkit-scrollbar": { width: "4px" },
             "&::-webkit-scrollbar-thumb": {
               backgroundColor: theme.palette.primary.main,
             },
             scrollbarColor: theme.palette.primary.main,
+            width: "100%",
           },
           "& .MuiFormControlLabel-label.Mui-disabled": {
             color: theme.palette.text.primary,

lib/components/ViewPublicationPage/questions/File/index.tsx

@@ -28,7 +28,11 @@ export const File = ({ currentQuestion }: FileProps) => {
 
   return (
     <Box>
-      <Typography variant="h5" color={theme.palette.text.primary} sx={{ wordBreak: "break-word" }}>
+      <Typography
+        variant="h5"
+        color={theme.palette.text.primary}
+        sx={{ wordBreak: "break-word" }}
+      >
         {currentQuestion.title}
       </Typography>
       <Box
@@ -39,9 +43,13 @@ export const File = ({ currentQuestion }: FileProps) => {
           marginTop: "20px",
           maxWidth: answer?.split("|")[0] ? "640px" : "600px",
         }}
+        onClick={(event) => event.preventDefault()}
       >
         {answer?.split("|")[0] ? (
-          <UploadedFile currentQuestion={currentQuestion} setIsSending={setIsSending} />
+          <UploadedFile
+            currentQuestion={currentQuestion}
+            setIsSending={setIsSending}
+          />
         ) : (
           <UploadFile
             currentQuestion={currentQuestion}
@@ -51,7 +59,11 @@ export const File = ({ currentQuestion }: FileProps) => {
           />
         )}
         {answer && currentQuestion.content.type === "picture" && (
-          <img src={answer.split("|")[1]} style={{ marginTop: "15px", maxWidth: "300px", maxHeight: "300px" }} alt="" />
+          <img
+            src={answer.split("|")[1]}
+            style={{ marginTop: "15px", maxWidth: "300px", maxHeight: "300px" }}
+            alt=""
+          />
         )}
         {answer && currentQuestion.content.type === "video" && (
           <video
@@ -65,7 +77,10 @@ export const File = ({ currentQuestion }: FileProps) => {
           />
         )}
       </Box>
-      <Modal open={modalWarningType !== null} onClose={() => setModalWarningType(null)}>
+      <Modal
+        open={modalWarningType !== null}
+        onClose={() => setModalWarningType(null)}
+      >
         <Box
           sx={{
             position: "absolute",

lib/components/ViewPublicationPage/questions/Images/ImageVariant.tsx

@@ -6,7 +6,7 @@ import { useQuizViewStore } from "@stores/quizView";
 import RadioCheck from "@ui_kit/RadioCheck";
 import RadioIcon from "@ui_kit/RadioIcon";
 import { quizThemes } from "@utils/themes/Publication/themePublication";
-import { useMemo, type MouseEvent } from "react";
+import { useMemo, type MouseEvent, useRef, useEffect } from "react";
 import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
 
 type ImagesProps = {
@@ -99,6 +99,9 @@ export const ImageVariant = ({
   const isMobile = useRootContainerSize() < 450;
   const isTablet = useRootContainerSize() < 850;
 
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const containerCanvasRef = useRef<HTMLDivElement | null>(null);
+
   const onVariantClick = async (event: MouseEvent<HTMLDivElement>) => {
     event.preventDefault();
 
@@ -130,6 +133,23 @@ export const ImageVariant = ({
     }
   }, []);
 
+  useEffect(() => {
+    if (canvasRef.current !== null) {
+      const canvas = canvasRef.current;
+      const ctx = canvas.getContext("2d");
+      if (ctx !== null) {
+        const img = new Image();
+        img.src = choiceImgUrl;
+
+        img.onload = () => {
+          canvas.width = img.width;
+          canvas.height = img.height;
+          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+        };
+      }
+    }
+  }, []);
+
   return (
     <Box
       sx={{
@@ -151,9 +171,8 @@ export const ImageVariant = ({
       <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
         <Box sx={{ width: "100%", height: "300px" }}>
           {variant.extendedText && (
-            <img
+            <canvas
-              src={choiceImgUrl}
+              ref={canvasRef}
-              alt=""
               style={{
                 display: "block",
                 width: "100%",
@@ -162,6 +181,18 @@ export const ImageVariant = ({
                 borderRadius: "12px 12px 0 0",
               }}
             />
+
+            // <img
+            //   src={choiceImgUrl}
+            //   alt=""
+            //   style={{
+            //     display: "block",
+            //     width: "100%",
+            //     height: "100%",
+            //     objectFit: "cover",
+            //     borderRadius: "12px 12px 0 0",
+            //   }}
+            // />
           )}
         </Box>
       </Box>
@@ -209,7 +240,6 @@ export const ImageVariant = ({
         control={
           isMulti ? (
             <Checkbox
-              id="cock"
               checked={!!answer?.includes(variant.id)}
               checkedIcon={<RadioCheck color={theme.palette.primary.main} />}
               icon={<RadioIcon />}

lib/components/ViewPublicationPage/questions/Page/index.tsx

@@ -21,7 +21,10 @@ export const Page = ({ currentQuestion }: PageProps) => {
       >
         {currentQuestion.title}
       </Typography>
-      <Typography color={theme.palette.text.primary} sx={{ wordBreak: "break-word" }}>
+      <Typography
+        color={theme.palette.text.primary}
+        sx={{ wordBreak: "break-word" }}
+      >
         {currentQuestion.content.text}
       </Typography>
       <Box
@@ -40,6 +43,7 @@ export const Page = ({ currentQuestion }: PageProps) => {
                 border: "1px solid #9A9AAF",
                 overflow: "hidden",
               }}
+              onClick={(event) => event.preventDefault()}
             >
               <img
                 key={currentQuestion.id}

lib/components/ViewPublicationPage/questions/Text/TextNormal.tsx

@@ -37,6 +37,7 @@ export const TextNormal = ({ currentQuestion, answer }: TextNormalProps) => {
       return currentQuestion.content.back;
     }
   }, [currentQuestion]);
+  let isCrutch23022025 = window.location.pathname === "/bf8cae3a-e150-479d-befa-7f264087b223";
   return (
     <Box>
       <Typography
@@ -51,7 +52,7 @@ export const TextNormal = ({ currentQuestion, answer }: TextNormalProps) => {
           display: "flex",
           width: "100%",
           marginTop: "20px",
-          flexDirection: isMobile ? "column-reverse" : undefined,
+          flexDirection: isCrutch23022025 ? "column" : isMobile ? "column-reverse" : undefined,
           alignItems: "center",
         }}
       >
@@ -74,11 +75,12 @@ export const TextNormal = ({ currentQuestion, answer }: TextNormalProps) => {
         {choiceImgUrlQuestion && choiceImgUrlQuestion !== " " && choiceImgUrlQuestion !== null && (
           <Box
             sx={{
-              maxWidth: "400px",
+              maxWidth: isCrutch23022025 ? undefined : "400px",
-              width: "100%",
+              width: isCrutch23022025 ? "auto" : "100%",
-              height: "300px",
+              height: isCrutch23022025 ? "auto" : "300px",
               margin: "15px",
             }}
+            onClick={(event) => event.preventDefault()}
           >
             <img
               key={currentQuestion.id}

lib/components/ViewPublicationPage/questions/Text/TextSpecial.tsx

@@ -81,7 +81,10 @@ export const TextSpecial = ({ currentQuestion, answer, stepNumber }: TextSpecial
           {currentQuestion.title}
         </Typography>
         {isHorizontal && currentQuestion.content.back && currentQuestion.content.back !== " " && (
-          <Box sx={{ margin: "30px", width: "50vw", maxHeight: "550px" }}>
+          <Box
+            sx={{ margin: "30px", width: "50vw", maxHeight: "550px" }}
+            onClick={(event) => event.preventDefault()}
+          >
             <img
               key={currentQuestion.id}
               src={currentQuestion.content.back}
@@ -119,7 +122,10 @@ export const TextSpecial = ({ currentQuestion, answer, stepNumber }: TextSpecial
         }
       </Box>
       {!isHorizontal && currentQuestion.content.back && currentQuestion.content.back !== " " && (
-        <Box sx={{ margin: "15px", width: "40vw" }}>
+        <Box
+          sx={{ margin: "15px", width: "40vw" }}
+          onClick={(event) => event.preventDefault()}
+        >
           <img
             key={currentQuestion.id}
             src={currentQuestion.content.back}

lib/components/ViewPublicationPage/questions/Variant/VariantItem.tsx

@@ -32,7 +32,7 @@ const OwnInput = ({ questionId, variant, largeCheck, ownPlaceholder }: OwnInputP
   const { updateOwnVariant } = useQuizViewStore((state) => state);
 
   const ownAnswer = ownVariants[ownVariants.findIndex((v) => v.id === variant.id)]?.variant.answer || "";
-  console.log(theme);
+
   return largeCheck ? (
     <TextareaAutosize
       placeholder={ownPlaceholder || "|"}

lib/components/ViewPublicationPage/questions/Variant/index.tsx

@@ -13,6 +13,35 @@ type VariantProps = {
   currentQuestion: QuizQuestionVariant;
 };
 
+// 23.02.2025
+const crutchlist = {
+  115048: { x: 629, y: 491 },
+  115101: { x: 979, y: 980 },
+  115109: { x: 746, y: 745 },
+  115122: { x: 959, y: 960 },
+  115132: { x: 541, y: 541 },
+  115142: { x: 834, y: 544 },
+  115178: { x: 1127, y: 1127 },
+  115191: { x: 1106, y: 1106 },
+  115207: { x: 905, y: 906 },
+  115254: { x: 637, y: 637 },
+  115270: { x: 702, y: 703 },
+  115287: { x: 714, y: 715 },
+  115329: { x: 915, y: 916 },
+  115348: { x: 700, y: 701 },
+  115368: { x: 400, y: 300 },
+  115389: { x: 839, y: 840 },
+  115411: { x: 612, y: 610 },
+  115434: { x: 474, y: 473 },
+  115462: { x: 385, y: 385 },
+  115487: { x: 676, y: 677 },
+  115515: { x: 341, y: 341 },
+  115547: { x: 402, y: 403 },
+  115575: { x: 502, y: 503 },
+  115612: { x: 400, y: 300 },
+  115642: { x: 603, y: 603 },
+};
+
 export const Variant = ({ currentQuestion }: VariantProps) => {
   const theme = useTheme();
   const isMobile = useRootContainerSize() < 650;
@@ -26,6 +55,8 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
 
   const Group = currentQuestion.content.multi ? FormGroup : RadioGroup;
 
+  //let isCrutch23022025Question = isCrutch23022025 && crutchlist.hasOwnProperty(currentQuestion.id)
+
   useEffect(() => {
     if (!ownVariant) {
       updateOwnVariant(currentQuestion.id, "");
@@ -55,6 +86,7 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
         {currentQuestion.title}
       </Typography>
       <Box
+        id="batya"
         sx={{
           display: "flex",
           gap: "20px",
@@ -105,7 +137,14 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
           </Box>
         </Group>
         {choiceImgUrlQuestion && choiceImgUrlQuestion !== " " && choiceImgUrlQuestion !== null && (
-          <Box sx={{ maxWidth: "400px", width: "100%", height: "300px" }}>
+          <Box
+            sx={{
+              maxWidth: "400px",
+              width: "100%",
+              height: "300px",
+            }}
+            onClick={(event) => event.preventDefault()}
+          >
             <img
               key={currentQuestion.id}
               src={choiceImgUrlQuestion}

lib/components/ViewPublicationPage/questions/Varimg/index.tsx

@@ -134,6 +134,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
             color: theme.palette.text.primary,
             textAlign: "center",
           }}
+          onClick={(event) => event.preventDefault()}
         >
           {answer ? (
             choiceImgUrlAnswer ? (

lib/model/settingsData.ts

@@ -61,6 +61,7 @@ export type QuizSettings = {
 };
 
 export interface QuizConfig {
+  isUnSc?: boolean;
   spec: undefined | true;
   type: QuizType;
   noStartPage: boolean;

lib/model/widget/side.ts

@@ -6,6 +6,7 @@ export interface SideWidgetComponentProps {
   dialogDimensions?: { width: string; height: string };
   fullScreen?: boolean;
   buttonFlash?: boolean;
+  buttonText?: string;
   /**
    * Показывать виджет через X секунд
    */

lib/ui_kit/unscreen.ts

@@ -0,0 +1,79 @@
+function addOverlay(overlay: HTMLElement) {
+  // const overlay = document.getElementById('overlay');
+  overlay.style.opacity = "1"; // Затемнено
+  overlay.style.pointerEvents = "auto"; // Включить клики
+}
+function removeOverlay(overlay: HTMLElement) {
+  overlay.style.opacity = "0"; // Вернуть в исходное состояние
+  overlay.style.pointerEvents = "none"; // Игнорировать клики
+}
+function addRemoveOverlayTimer(overlay: HTMLElement, time = 1000) {
+  addOverlay(overlay);
+  setTimeout(() => {
+    removeOverlay(overlay);
+  }, time); // 1 секунда затемнения
+}
+
+// Флаги для отслеживания состояния
+let isMouseInside = true;
+let isWindowFocused = true;
+
+export default function unscreen(overlay: HTMLElement, root: HTMLElement) {
+  let focusTimeout: NodeJS.Timeout | undefined;
+  // Проверка состояния и выполнение нужного действия
+  function checkFocusAndMouse() {
+    if (!isWindowFocused || !isMouseInside) {
+      // ИЛИ
+      addOverlay(overlay);
+    } else if (isWindowFocused && isMouseInside) {
+      // И
+      removeOverlay(overlay);
+    }
+  }
+
+  // Добавляем обработчики событий
+  window.addEventListener("blur", () => {
+    console.log("blur");
+    isWindowFocused = false;
+    checkFocusAndMouse(); // Проверяем состояние
+  }); // Когда окно теряет фокус
+
+  window.addEventListener("focus", () => {
+    console.log("focus");
+    isWindowFocused = true;
+    checkFocusAndMouse(); // Проверяем состояние
+  }); // Когда окно получает фокус
+
+  window.addEventListener("mouseleave", () => {
+    console.log("mouseleave");
+    isMouseInside = false;
+    checkFocusAndMouse(); // Проверяем состояние
+  }); // Когда мышка покидает окно
+
+  window.addEventListener("mouseenter", () => {
+    console.log("mouseenter");
+    isMouseInside = true;
+    checkFocusAndMouse(); // Проверяем состояние
+  }); // Когда мышка возвращается в окно
+
+  root.addEventListener("contextmenu", (event) => event.preventDefault());
+
+  window.addEventListener("keydown", function (event) {
+    event.preventDefault();
+    if (event.key === "PrintScreen" || (event.ctrlKey && event.key === "p")) {
+      addRemoveOverlayTimer(overlay);
+    }
+  });
+
+  // Проверка для мобильных устройств
+  root.addEventListener("touchstart", function (event) {
+    // Пример: если есть более чем один жест
+    if (event.touches.length > 1) {
+      addRemoveOverlayTimer(overlay);
+    }
+  });
+
+  window.addEventListener("beforeprint", function () {
+    addRemoveOverlayTimer(overlay);
+  });
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frontend/squzanswerer",
-  "version": "1.0.56",
+  "version": "1.0.57",
   "type": "module",
   "main": "./dist-package/index.js",
   "module": "./dist-package/index.js",

src/widgets/side/QuizSideButton.tsx

@@ -19,6 +19,7 @@ export default function QuizSideButton({
   buttonTextColor,
   dialogDimensions,
   fullScreen = false,
+  buttonText,
   buttonFlash = false,
   autoShowWidgetTime = 0,
   autoShowQuizTime = null,
@@ -89,7 +90,10 @@ export default function QuizSideButton({
               },
         ]}
       />
-      <Fade in={!isWidgetHidden} timeout={400}>
+      <Fade
+        in={!isWidgetHidden}
+        timeout={400}
+      >
         <Button
           className="pena-quiz-widget-button"
           variant="contained"
@@ -116,7 +120,7 @@ export default function QuizSideButton({
             },
           ]}
         >
-          Пройти квиз
+          {buttonText || "Пройти квиз"}
           {showButtonFlash && <RunningStripe />}
         </Button>
       </Fade>