Merge branch 'dev' into 'staging'
Dev See merge request frontend/squzanswerer!160
This commit is contained in:
commit
3345d0aa5c
@ -78,7 +78,7 @@ export async function getData(quizId: string): Promise<{
|
||||
error?: AxiosError;
|
||||
}> {
|
||||
try {
|
||||
const { data, headers } = await axios<GetQuizDataResponse>(domain + `/answer/settings${window.location.search}`, {
|
||||
const { data, headers } = await axios<GetQuizDataResponse>(domain + `/answer/v1.0.0/settings${window.location.search}`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"X-Sessionkey": SESSIONS,
|
||||
|
||||
@ -5,10 +5,9 @@
|
||||
let domain = "https://hbpn.link";
|
||||
const currentDomain = location.hostname;
|
||||
|
||||
//туризм больше не в исключениях
|
||||
if (
|
||||
currentDomain === "s.hbpn.link" ||
|
||||
//Исключение - туризм. Он на стейджинговом квизе и на чужом для публикации домене
|
||||
currentDomain === "tourism.pena.digital" ||
|
||||
currentDomain.includes("localhost") ||
|
||||
currentDomain.includes("127.0.0.1")
|
||||
)
|
||||
|
||||
@ -7,6 +7,7 @@ import { createPortal } from "react-dom";
|
||||
import BannerIcon from "../shared/BannerIcon";
|
||||
import QuizDialog from "../shared/QuizDialog";
|
||||
import RunningStripe from "../shared/RunningStripe";
|
||||
import { colorArrayToHex, darkenColor, parseColor } from "../shared/colorUtils";
|
||||
import { useAutoOpenTimer } from "../shared/useAutoOpenTimer";
|
||||
|
||||
const PADDING = 10;
|
||||
@ -86,6 +87,12 @@ export default function QuizBanner({
|
||||
const isQuizCompleted = quizData.settings.cfg.antifraud ? quizData.recentlyCompleted : false;
|
||||
const showButtonFlash = isQuizCompleted && isFlashEnabled;
|
||||
|
||||
let hoverBackgroundColor = buttonBackgroundColor;
|
||||
if (buttonBackgroundColor) {
|
||||
const color = parseColor(buttonBackgroundColor);
|
||||
if (color) hoverBackgroundColor = colorArrayToHex(darkenColor(color, 0.7));
|
||||
}
|
||||
|
||||
return createPortal(
|
||||
<ThemeProvider theme={lightTheme}>
|
||||
<Fade in={!isQuizShown && !isWidgetHidden}>
|
||||
@ -154,6 +161,9 @@ export default function QuizBanner({
|
||||
backgroundColor: buttonBackgroundColor,
|
||||
borderRadius: rounded && !bannerFullWidth ? "8px" : 0,
|
||||
justifyContent: "start",
|
||||
":hover": {
|
||||
backgroundColor: hoverBackgroundColor,
|
||||
},
|
||||
},
|
||||
withShadow && {
|
||||
boxShadow: "0px 0px 12px 0px rgba(0, 0, 0, 0.7)",
|
||||
|
||||
@ -5,6 +5,7 @@ import { Button, ThemeProvider, useMediaQuery } from "@mui/material";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import QuizDialog from "../shared/QuizDialog";
|
||||
import RunningStripe from "../shared/RunningStripe";
|
||||
import { colorArrayToHex, darkenColor, parseColor } from "../shared/colorUtils";
|
||||
|
||||
export default function OpenQuizButton({
|
||||
quizId,
|
||||
@ -75,6 +76,12 @@ export default function OpenQuizButton({
|
||||
const isQuizCompleted = quizData.settings.cfg.antifraud ? quizData.recentlyCompleted : false;
|
||||
const showButtonFlash = isQuizCompleted && isFlashEnabled;
|
||||
|
||||
let hoverBackgroundColor = buttonBackgroundColor;
|
||||
if (buttonBackgroundColor) {
|
||||
const color = parseColor(buttonBackgroundColor);
|
||||
if (color) hoverBackgroundColor = colorArrayToHex(darkenColor(color, 0.7));
|
||||
}
|
||||
|
||||
return (
|
||||
<ThemeProvider theme={lightTheme}>
|
||||
<Button
|
||||
@ -94,6 +101,9 @@ export default function OpenQuizButton({
|
||||
? "2px 5px 20px 2px rgba(25, 6, 50, 0.4), 0 2px 10px 0 rgba(35, 17, 58, 0.1)"
|
||||
: "none",
|
||||
borderRadius: rounded ? "30px" : 0,
|
||||
":hover": {
|
||||
backgroundColor: hoverBackgroundColor,
|
||||
},
|
||||
},
|
||||
Boolean(fixedSide) && {
|
||||
position: "fixed",
|
||||
|
||||
256
src/widgets/shared/colorUtils.ts
Normal file
256
src/widgets/shared/colorUtils.ts
Normal file
@ -0,0 +1,256 @@
|
||||
export function darkenColor(
|
||||
colorArray: [number, number, number, number],
|
||||
multiplier: number
|
||||
): [number, number, number, number] {
|
||||
return [
|
||||
Math.round(colorArray[0] * multiplier),
|
||||
Math.round(colorArray[1] * multiplier),
|
||||
Math.round(colorArray[2] * multiplier),
|
||||
colorArray[3],
|
||||
];
|
||||
}
|
||||
|
||||
export function colorArrayToHex(color: [number, number, number, number]): string {
|
||||
const [r, g, b, a] = color;
|
||||
|
||||
return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}${
|
||||
a < 1
|
||||
? Math.round(a * 255)
|
||||
.toString(16)
|
||||
.padStart(2, "0")
|
||||
: ""
|
||||
}`;
|
||||
}
|
||||
|
||||
export function parseColor(color: string): [number, number, number, number] | null {
|
||||
color = color.trim().toLowerCase();
|
||||
color = colorsByName[color] || color;
|
||||
|
||||
const hex3 = color.match(/^#([0-9a-f]{3})$/i);
|
||||
if (hex3) {
|
||||
const hex3str = hex3[1];
|
||||
return [
|
||||
parseInt(hex3str.charAt(0), 16) * 0x11,
|
||||
parseInt(hex3str.charAt(1), 16) * 0x11,
|
||||
parseInt(hex3str.charAt(2), 16) * 0x11,
|
||||
1,
|
||||
];
|
||||
}
|
||||
|
||||
const hex6 = color.match(/^#([0-9a-f]{6})$/i);
|
||||
if (hex6) {
|
||||
const hex6str = hex6[1];
|
||||
return [parseInt(hex6str.slice(0, 2), 16), parseInt(hex6str.slice(2, 4), 16), parseInt(hex6str.slice(4, 6), 16), 1];
|
||||
}
|
||||
const hex8 = color.match(/^#([0-9a-f]{8})$/i);
|
||||
if (hex8) {
|
||||
const hex8str = hex8[1];
|
||||
return [
|
||||
parseInt(hex8str.slice(0, 2), 16),
|
||||
parseInt(hex8str.slice(2, 4), 16),
|
||||
parseInt(hex8str.slice(4, 6), 16),
|
||||
parseInt(hex8str.slice(6, 8), 16) / 255,
|
||||
];
|
||||
}
|
||||
|
||||
const rgba =
|
||||
color.match(/^rgba\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+.*\d*)\s*\)$/i) ||
|
||||
color.match(/^rgba\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
|
||||
if (rgba) {
|
||||
return [+rgba[1], +rgba[2], +rgba[3], rgba[4] === undefined ? 1 : +rgba[4]];
|
||||
}
|
||||
|
||||
const rgb = color.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
|
||||
if (rgb) {
|
||||
return [+rgb[1], +rgb[2], +rgb[3], 1];
|
||||
}
|
||||
|
||||
if (color.indexOf("hsl") == 0) return hslToRgb(color);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function hslToRgb(hslString: string): [number, number, number, number] | null {
|
||||
const hsl = hslString.match(/(\d+(\.\d+)?)/g);
|
||||
if (!hsl) return null;
|
||||
|
||||
const h = +hsl[0] / 360;
|
||||
const s = +hsl[1] / 100;
|
||||
const l = +hsl[2] / 100;
|
||||
const a = hsl[3] === undefined ? 1 : +hsl[3];
|
||||
let t1: number;
|
||||
let t2: number;
|
||||
let t3: number;
|
||||
let rgb: [number, number, number, number];
|
||||
let val: number;
|
||||
|
||||
if (s == 0) {
|
||||
val = Math.round(l * 255);
|
||||
rgb = [val, val, val, a];
|
||||
} else {
|
||||
if (l < 0.5) t2 = l * (1 + s);
|
||||
else t2 = l + s - l * s;
|
||||
|
||||
t1 = 2 * l - t2;
|
||||
rgb = [0, 0, 0, 1];
|
||||
|
||||
for (let i = 0; i < 3; i++) {
|
||||
t3 = h + (1 / 3) * -(i - 1);
|
||||
t3 < 0 && t3++;
|
||||
t3 > 1 && t3--;
|
||||
|
||||
if (6 * t3 < 1) val = t1 + (t2 - t1) * 6 * t3;
|
||||
else if (2 * t3 < 1) val = t2;
|
||||
else if (3 * t3 < 2) val = t1 + (t2 - t1) * (2 / 3 - t3) * 6;
|
||||
else val = t1;
|
||||
|
||||
rgb[i] = Math.round(val * 255);
|
||||
}
|
||||
}
|
||||
|
||||
rgb[3] = a;
|
||||
return rgb;
|
||||
}
|
||||
|
||||
const colorsByName: Record<string, string> = {
|
||||
aliceblue: "#f0f8ff",
|
||||
antiquewhite: "#faebd7",
|
||||
aqua: "#00ffff",
|
||||
aquamarine: "#7fffd4",
|
||||
azure: "#f0ffff",
|
||||
beige: "#f5f5dc",
|
||||
bisque: "#ffe4c4",
|
||||
black: "#000000",
|
||||
blanchedalmond: "#ffebcd",
|
||||
blue: "#0000ff",
|
||||
blueviolet: "#8a2be2",
|
||||
brown: "#a52a2a",
|
||||
burlywood: "#deb887",
|
||||
cadetblue: "#5f9ea0",
|
||||
chartreuse: "#7fff00",
|
||||
chocolate: "#d2691e",
|
||||
coral: "#ff7f50",
|
||||
cornflowerblue: "#6495ed",
|
||||
cornsilk: "#fff8dc",
|
||||
crimson: "#dc143c",
|
||||
cyan: "#00ffff",
|
||||
darkblue: "#00008b",
|
||||
darkcyan: "#008b8b",
|
||||
darkgoldenrod: "#b8860b",
|
||||
darkgray: "#a9a9a9",
|
||||
darkgreen: "#006400",
|
||||
darkkhaki: "#bdb76b",
|
||||
darkmagenta: "#8b008b",
|
||||
darkolivegreen: "#556b2f",
|
||||
darkorange: "#ff8c00",
|
||||
darkorchid: "#9932cc",
|
||||
darkred: "#8b0000",
|
||||
darksalmon: "#e9967a",
|
||||
darkseagreen: "#8fbc8f",
|
||||
darkslateblue: "#483d8b",
|
||||
darkslategray: "#2f4f4f",
|
||||
darkturquoise: "#00ced1",
|
||||
darkviolet: "#9400d3",
|
||||
deeppink: "#ff1493",
|
||||
deepskyblue: "#00bfff",
|
||||
dimgray: "#696969",
|
||||
dodgerblue: "#1e90ff",
|
||||
firebrick: "#b22222",
|
||||
floralwhite: "#fffaf0",
|
||||
forestgreen: "#228b22",
|
||||
fuchsia: "#ff00ff",
|
||||
gainsboro: "#dcdcdc",
|
||||
ghostwhite: "#f8f8ff",
|
||||
gold: "#ffd700",
|
||||
goldenrod: "#daa520",
|
||||
gray: "#808080",
|
||||
green: "#008000",
|
||||
greenyellow: "#adff2f",
|
||||
honeydew: "#f0fff0",
|
||||
hotpink: "#ff69b4",
|
||||
indianred: "#cd5c5c",
|
||||
indigo: "#4b0082",
|
||||
ivory: "#fffff0",
|
||||
khaki: "#f0e68c",
|
||||
lavender: "#e6e6fa",
|
||||
lavenderblush: "#fff0f5",
|
||||
lawngreen: "#7cfc00",
|
||||
lemonchiffon: "#fffacd",
|
||||
lightblue: "#add8e6",
|
||||
lightcoral: "#f08080",
|
||||
lightcyan: "#e0ffff",
|
||||
lightgoldenrodyellow: "#fafad2",
|
||||
lightgray: "#d3d3d3",
|
||||
lightgreen: "#90ee90",
|
||||
lightpink: "#ffb6c1",
|
||||
lightsalmon: "#ffa07a",
|
||||
lightseagreen: "#20b2aa",
|
||||
lightskyblue: "#87cefa",
|
||||
lightslategray: "#778899",
|
||||
lightsteelblue: "#b0c4de",
|
||||
lightyellow: "#ffffe0",
|
||||
lime: "#00ff00",
|
||||
limegreen: "#32cd32",
|
||||
linen: "#faf0e6",
|
||||
magenta: "#ff00ff",
|
||||
maroon: "#800000",
|
||||
mediumaquamarine: "#66cdaa",
|
||||
mediumblue: "#0000cd",
|
||||
mediumorchid: "#ba55d3",
|
||||
mediumpurple: "#9370db",
|
||||
mediumseagreen: "#3cb371",
|
||||
mediumslateblue: "#7b68ee",
|
||||
mediumspringgreen: "#00fa9a",
|
||||
mediumturquoise: "#48d1cc",
|
||||
mediumvioletred: "#c71585",
|
||||
midnightblue: "#191970",
|
||||
mintcream: "#f5fffa",
|
||||
mistyrose: "#ffe4e1",
|
||||
moccasin: "#ffe4b5",
|
||||
navajowhite: "#ffdead",
|
||||
navy: "#000080",
|
||||
oldlace: "#fdf5e6",
|
||||
olive: "#808000",
|
||||
olivedrab: "#6b8e23",
|
||||
orange: "#ffa500",
|
||||
orangered: "#ff4500",
|
||||
orchid: "#da70d6",
|
||||
palegoldenrod: "#eee8aa",
|
||||
palegreen: "#98fb98",
|
||||
paleturquoise: "#afeeee",
|
||||
palevioletred: "#db7093",
|
||||
papayawhip: "#ffefd5",
|
||||
peachpuff: "#ffdab9",
|
||||
peru: "#cd853f",
|
||||
pink: "#ffc0cb",
|
||||
plum: "#dda0dd",
|
||||
powderblue: "#b0e0e6",
|
||||
purple: "#800080",
|
||||
red: "#ff0000",
|
||||
rosybrown: "#bc8f8f",
|
||||
royalblue: "#4169e1",
|
||||
saddlebrown: "#8b4513",
|
||||
salmon: "#fa8072",
|
||||
sandybrown: "#f4a460",
|
||||
seagreen: "#2e8b57",
|
||||
seashell: "#fff5ee",
|
||||
sienna: "#a0522d",
|
||||
silver: "#c0c0c0",
|
||||
skyblue: "#87ceeb",
|
||||
slateblue: "#6a5acd",
|
||||
slategray: "#708090",
|
||||
snow: "#fffafa",
|
||||
springgreen: "#00ff7f",
|
||||
steelblue: "#4682b4",
|
||||
tan: "#d2b48c",
|
||||
teal: "#008080",
|
||||
thistle: "#d8bfd8",
|
||||
tomato: "#ff6347",
|
||||
turquoise: "#40e0d0",
|
||||
violet: "#ee82ee",
|
||||
wheat: "#f5deb3",
|
||||
white: "#ffffff",
|
||||
whitesmoke: "#f5f5f5",
|
||||
yellow: "#ffff00",
|
||||
yellowgreen: "#9acd32",
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user