add more color options

frontend/src/views/reel/Reel.vue

@@ -19,6 +19,7 @@ import MainContainer from "../../components/MainContainer.vue";
 import ImageInput from "../../components/inputs/ImageInput.vue";
 import LongTextInput from "../../components/inputs/text/LongTextInput.vue";
 import ShortTextInput from "../../components/inputs/text/ShortTextInput.vue";
+import MultipleColorPicker from "../../components/inputs/colors/MultipleColorPicker.vue";
 import ReloadButton from "../../components/reload/ReloadButton.vue";
 import AutoReloadCheckbox from "../../components/reload/AutoReloadCheckbox.vue";
 </script>
@@ -38,8 +39,8 @@ export default {
   },
   data() {
     const predefinedColors = {
-      blackBackground: {
-        name: "Černý boxík, bílý text",
+      whiteText: {
+        name: "Bílý text",
         colors: {
           background: COLORS.black,
           mainText: COLORS.white,
@@ -47,6 +48,15 @@ export default {
           contractedByText: COLORS.white
         },
       },
+      blackText: {
+        name: "Černý text",
+        colors: {
+          background: COLORS.white,
+          mainText: COLORS.black,
+          highlightedText: COLORS.yellow1,
+          contractedByText: COLORS.black
+        },
+      },
     };
 
     return {
@@ -59,7 +69,7 @@ export default {
         background: "Pozadí",
       },
       predefinedColors: predefinedColors,
-      colors: predefinedColors.blackBackground.colors,
+      colors: predefinedColors.whiteText.colors,
       autoRedraw: false,
     };
   },
@@ -162,6 +172,16 @@ export default {
           :important="false"
           zIndex="4"
         />
+
+        <MultipleColorPicker
+          name="Barvy"
+          v-model="colors"
+          :important="false"
+          :colorLabels="colorLabels"
+          :predefinedColors="predefinedColors"
+          :defaultPredefinedColors="predefinedColors.base"
+          zIndex="5"
+        ></MultipleColorPicker>
       </template>
     </MainContainer>
   </main>

frontend/src/views/reel/canvas.js

@@ -8,11 +8,13 @@ import {
 import COLORS from "../../colors";
 import { PaddedHighlightingTextbox } from "../../components/canvas/textbox";
 
-import logoImageSource from "../../assets/logos/default-light.png";
+import lightLogoImageSource from "../../assets/logos/default-light.png";
+import darkLogoImageSource from "../../assets/logos/default-dark.png";
 
 let mainImage = null;
 let logoImage = null;
 let mainImageSource = null;
+let previousLogoImageSource = null;
 let contractedByTextbox = null;
 let mainTextBox = null;
 let nameText = null;
@@ -86,7 +88,7 @@ const redraw = async (canvas, options) => {
       top: nameTextMarginTop,
       fontFamily: "Bebas Neue",
       fontSize: nameTextSize,
-      fill: "#fff",
+      fill: options.colors.mainText.value,
       selectable: false,
       zIndex: 40,
     });
@@ -131,7 +133,20 @@ const redraw = async (canvas, options) => {
 
   /* BEGIN Logo render */
 
-  if (logoImage === null) {
+  let logoImageSource = null;
+
+  if (options.colors.mainText.value == COLORS.black.value) {
+    logoImageSource = darkLogoImageSource;
+  } else {
+    logoImageSource = lightLogoImageSource;
+  }
+
+  if (
+    logoImage === null
+    || previousLogoImageSource != logoImageSource
+  ) {
+    previousLogoImageSource = logoImageSource;
+
     if (logoImage !== null) {
       canvas.remove(logoImage);
     }