feat: Backgrounds

lib/components/ViewPublicationPage/Question.tsx

@@ -20,7 +20,20 @@ import { NameplateLogoFQ } from "@icons/NameplateLogoFQ";
 import { NameplateLogoFQDark } from "@icons/NameplateLogoFQDark";
 import { notReachable } from "@utils/notReachable";
 import { quizThemes } from "@utils/themes/Publication/themePublication";
-import { ReactNode } from "react";
+
+import Desgin1 from "@icons/designs/design1.jpg";
+import Desgin2 from "@icons/designs/design2.jpg";
+import Desgin3 from "@icons/designs/design3.jpg";
+import Desgin4 from "@icons/designs/design4.jpg";
+import Desgin5 from "@icons/designs/design5.jpg";
+import Desgin6 from "@icons/designs/design6.jpg";
+import Desgin7 from "@icons/designs/design7.jpg";
+import Desgin8 from "@icons/designs/design8.jpg";
+import Desgin9 from "@icons/designs/design9.jpg";
+import Desgin10 from "@icons/designs/design10.jpg";
+
+import type { ReactNode } from "react";
+import type { Design } from "@model/settingsData";
 
 type Props = {
   currentQuestion: RealTypedQuizQuestion;
@@ -29,6 +42,20 @@ type Props = {
   prevButton: ReactNode;
 };
 
+export const DESIGN_LIST: Record<Design, string> = {
+  "": "",
+  design1: Desgin1,
+  design2: Desgin2,
+  design3: Desgin3,
+  design4: Desgin4,
+  design5: Desgin5,
+  design6: Desgin6,
+  design7: Desgin7,
+  design8: Desgin8,
+  design9: Desgin9,
+  design10: Desgin10,
+};
+
 export const Question = ({
   currentQuestion,
   currentQuestionStepNumber,
@@ -37,52 +64,62 @@ export const Question = ({
 }: Props) => {
   const theme = useTheme();
   const { settings } = useQuizData();
-  console.log(currentQuestionStepNumber);
+  const design = DESIGN_LIST[settings.cfg.design];
+
   return (
     <Box
       sx={{
-        backgroundColor: theme.palette.background.default,
+        backgroundPosition: "center",
-        height: "100%",
+        backgroundSize: "cover",
+        backgroundImage: `url(${design})`,
       }}
     >
       <Box
         sx={{
-          height: "calc(100% - 75px)",
+          background: design
-          width: "100%",
+            ? "linear-gradient(90deg,#272626, transparent)"
-          minHeight: "calc(100vh - 75px)",
+            : theme.palette.background.default,
-          maxWidth: "1440px",
-          padding: "40px 25px 20px",
-          margin: "0 auto",
-          overflow: "auto",
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "space-between",
         }}
       >
-        <QuestionByType
+        <Box
-          key={currentQuestion.id}
+          sx={{
-          question={currentQuestion}
+            height: "calc(100% - 75px)",
+            width: "100%",
+            minHeight: "calc(100vh - 75px)",
+            maxWidth: "1440px",
+            padding: "40px 25px 20px",
+            margin: "0 auto",
+            overflow: "auto",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "space-between",
+          }}
+        >
+          <QuestionByType
+            key={currentQuestion.id}
+            question={currentQuestion}
+            stepNumber={currentQuestionStepNumber}
+          />
+          {quizThemes[settings.cfg.theme].isLight ? (
+            <Link target={"_blank"} href={"https://quiz.pena.digital"}>
+              <NameplateLogoFQ
+                style={{ fontSize: "34px", width: "200px", height: "auto" }}
+              />
+            </Link>
+          ) : (
+            <Link target={"_blank"} href={"https://quiz.pena.digital"}>
+              <NameplateLogoFQDark
+                style={{ fontSize: "34px", width: "200px", height: "auto" }}
+              />
+            </Link>
+          )}
+        </Box>
+        <Footer
           stepNumber={currentQuestionStepNumber}
+          prevButton={prevButton}
+          nextButton={nextButton}
         />
-        {quizThemes[settings.cfg.theme].isLight ? (
-          <Link target={"_blank"} href={"https://quiz.pena.digital"}>
-            <NameplateLogoFQ
-              style={{ fontSize: "34px", width: "200px", height: "auto" }}
-            />
-          </Link>
-        ) : (
-          <Link target={"_blank"} href={"https://quiz.pena.digital"}>
-            <NameplateLogoFQDark
-              style={{ fontSize: "34px", width: "200px", height: "auto" }}
-            />
-          </Link>
-        )}
       </Box>
-      <Footer
-        stepNumber={currentQuestionStepNumber}
-        prevButton={prevButton}
-        nextButton={nextButton}
-      />
     </Box>
   );
 };

lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx

@@ -18,6 +18,8 @@ import { setCurrentQuizStep } from "@stores/quizView";
 import { useUADevice } from "@utils/hooks/useUADevice";
 import { quizThemes } from "@utils/themes/Publication/themePublication";
 
+import { DESIGN_LIST } from "../Question";
+
 import { NameplateLogo } from "@icons/NameplateLogo";
 import PenaLogo from "@icons/PenaLogo.png";
 
@@ -36,7 +38,10 @@ export const StartPageViewPublication = () => {
     settings.cfg.startpage.background.type === "image" ? (
       settings.cfg.startpage.background.desktop ? (
         <img
-          src={settings.cfg.startpage.background.desktop}
+          src={
+            DESIGN_LIST[settings.cfg.design] ||
+            settings.cfg.startpage.background.desktop
+          }
           alt=""
           style={{
             width:

lib/model/settingsData.ts

@@ -11,114 +11,128 @@ export type QuizResultsType = true | null;
 export type QuizStep = "startpage" | "question" | "contactform";
 
 export type QuizTheme =
-    | "StandardTheme"
+  | "StandardTheme"
-    | "StandardDarkTheme"
+  | "StandardDarkTheme"
-    | "PinkTheme"
+  | "PinkTheme"
-    | "PinkDarkTheme"
+  | "PinkDarkTheme"
-    | "BlackWhiteTheme"
+  | "BlackWhiteTheme"
-    | "OliveTheme"
+  | "OliveTheme"
-    | "YellowTheme"
+  | "YellowTheme"
-    | "GoldDarkTheme"
+  | "GoldDarkTheme"
-    | "PurpleTheme"
+  | "PurpleTheme"
-    | "BlueTheme"
+  | "BlueTheme"
-    | "BlueDarkTheme";
+  | "BlueDarkTheme";
 
 export type FCField = {
-    text: string;
+  text: string;
-    innerText: string;
+  innerText: string;
-    key: string;
+  key: string;
-    required: boolean;
+  required: boolean;
-    used: boolean;
+  used: boolean;
 };
 
 export type QuizSettings = {
-    questions: AnyTypedQuizQuestion[];
+  questions: AnyTypedQuizQuestion[];
-    settings: {
+  settings: {
-        fp: boolean;
+    fp: boolean;
-        rep: boolean;
+    rep: boolean;
-        name: string;
+    name: string;
-        lim: number;
+    lim: number;
-        due: number;
+    due: number;
-        delay: number;
+    delay: number;
-        pausable: boolean;
+    pausable: boolean;
-        cfg: QuizConfig;
+    cfg: QuizConfig;
-    };
+  };
-    cnt: number;
+  cnt: number;
-    recentlyCompleted: boolean;
+  recentlyCompleted: boolean;
 };
 
+export type Design =
+  | ""
+  | "design1"
+  | "design2"
+  | "design3"
+  | "design4"
+  | "design5"
+  | "design6"
+  | "design7"
+  | "design8"
+  | "design9"
+  | "design10";
+
 export interface QuizConfig {
-    spec: undefined | true,
+  spec: undefined | true;
-    type: QuizType;
+  type: QuizType;
-    noStartPage: boolean;
+  noStartPage: boolean;
-    startpageType: QuizStartpageType;
+  startpageType: QuizStartpageType;
-    score?: boolean;
+  score?: boolean;
-    results: QuizResultsType;
+  results: QuizResultsType;
-    haveRoot: string | null;
+  haveRoot: string | null;
-    theme: QuizTheme;
+  theme: QuizTheme;
-    resultInfo: {
+  design: Design;
-        when: "email" | "";
+  resultInfo: {
-        share: boolean;
+    when: "email" | "";
-        replay: boolean;
+    share: boolean;
-        theme: string;
+    replay: boolean;
-        reply: string;
+    theme: string;
-        replname: string;
+    reply: string;
-        showResultForm: "before" | "after";
+    replname: string;
+    showResultForm: "before" | "after";
+  };
+  startpage: {
+    description: string;
+    button: string;
+    position: QuizStartpageAlignType;
+    favIcon: string | null;
+    logo: string | null;
+    originalLogo: string | null;
+    background: {
+      type: null | "image" | "video";
+      desktop: string | null;
+      originalDesktop: string | null;
+      mobile: string | null;
+      originalMobile: string | null;
+      video: string | null;
+      cycle: boolean;
     };
-    startpage: {
+  };
-        description: string;
+  formContact: {
-        button: string;
+    title: string;
-        position: QuizStartpageAlignType;
+    desc: string;
-        favIcon: string | null;
+    fields: Record<FormContactFieldName, FormContactFieldData>;
-        logo: string | null;
+    button: string;
-        originalLogo: string | null;
+  };
-        background: {
+  info: {
-            type: null | "image" | "video";
+    phonenumber: string;
-            desktop: string | null;
+    clickable: boolean;
-            originalDesktop: string | null;
+    orgname: string;
-            mobile: string | null;
+    site: string;
-            originalMobile: string | null;
+    law?: string;
-            video: string | null;
+  };
-            cycle: boolean;
+  meta: string;
-        };
-    };
-    formContact: {
-        title: string;
-        desc: string;
-        fields: Record<FormContactFieldName, FormContactFieldData>;
-        button: string;
-    };
-    info: {
-        phonenumber: string;
-        clickable: boolean;
-        orgname: string;
-        site: string;
-        law?: string;
-    };
-    meta: string;
 }
 
 export type FormContactFieldName =
-    | "name"
+  | "name"
-    | "email"
+  | "email"
-    | "phone"
+  | "phone"
-    | "text"
+  | "text"
-    | "address";
+  | "address";
 
 type FormContactFieldData = {
-    text: string;
+  text: string;
-    innerText: string;
+  innerText: string;
-    key: string;
+  key: string;
-    required: boolean;
+  required: boolean;
-    used: boolean;
+  used: boolean;
 };
 
 export interface QuizItems {
-    description: string;
+  description: string;
-    id: number;
+  id: number;
-    page: number;
+  page: number;
-    required: boolean;
+  required: boolean;
-    title: string;
+  title: string;
-    type: string;
+  type: string;
-    content: unknown;
+  content: unknown;
-} 
+}