add roulette widget template, redesign inputs on configuration page

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@glidejs/glide": "^3.6.0",
     "@google-cloud/text-to-speech": "^5.0.0",
     "@stomp/stompjs": "^7.0.0",
     "@testing-library/jest-dom": "^5.17.0",

src/components/ConfigurationPage/ConfigurationPage.tsx

@@ -38,14 +38,15 @@ const types = [
   { name: "player-control", description: "Music Player Remote Control" },
   { name: "donation-timer", description: "Donation Timer" },
   { name: "player-popup", description: "Video Popup" },
+  { name: "roulette", description: "Roulette" },
 ];
 
 export default function ConfigurationPage({}: {}) {
   const [config, setConfig] = useState(new Map());
 
-  function updateConfig(id: string, key: string, value) {
+  function updateConfig(id: string, key: string, value: any) {
     setConfig((oldConfig) => {
-      let updatedProperties = oldConfig.get(id)?.properties.map((it) => {
+      let updatedProperties = oldConfig.get(id)?.properties.map((it: any) => {
         if (it.name === key) {
           it.value = value;
         }

src/components/ConfigurationPage/WidgetConfiguration.tsx

@@ -28,7 +28,7 @@ function getSettingsWidget(id: string, type: string, onChange: Function) {
     case "donaters-top-list":
       return <DonatersTopListSettings id={id} onChange={onChange} />;
     case "donation-timer":
-      return <DonationTimerSettings id={id} onChange={onChange} />;
+      return <BaseSettings id={id} onChange={onChange} />;
     default:
       return <BaseSettings id={id} onChange={onChange} />;
   }

src/components/ConfigurationPage/WidgetSettings.ts

@@ -97,7 +97,7 @@ const defaultSettings = {
     properties: [
       {
         name: "resetOnLoad",
-        type: "custom",
+        type: "boolean",
         value: true,
         displayName: "Обнулять таймер при открытии",
       },
@@ -153,7 +153,7 @@ const defaultSettings = {
         type: "boolean",
         value: false,
         displayName: "Воспроизводить только звук",
-      }
+      },
     ],
   },
   payments: {
@@ -178,7 +178,7 @@ const defaultSettings = {
         name: "useGreenscreen",
         type: "boolean",
         value: false,
-        displayName: "Использовать greenscreen"
+        displayName: "Использовать greenscreen",
       },
     ],
     alerts: [],
@@ -204,6 +204,27 @@ const defaultSettings = {
       },
     ],
   },
+  roulette: {
+    properties: [
+      {
+        name: "font",
+        type: "fontselect",
+        value: "Roboto",
+        displayName: "Шрифт",
+      },
+      {
+        name: "fontSize",
+        value: "24",
+        displayName: "Размер шрифта",
+      },
+      {
+        name: "color",
+        type: "color",
+        value: "#000000",
+        displayName: "Цвет",
+      },
+    ],
+  },
 };
 
 interface WidgetProperties {
@@ -216,19 +237,21 @@ interface WidgetProperties {
 
 class WidgetSettings {
   properties: WidgetProperties[];
-	type: string;
+  type: string;
 
-  constructor(type:string, properties: WidgetProperties[]) {
+  constructor(type: string, properties: WidgetProperties[]) {
     this.properties = properties;
-		this.type = type;
+    this.type = type;
   }
 
   findSetting(key: string) {
     const setting = this.properties.find((prop) => key === prop.name);
     if (setting) {
       return setting.value;
     }
-    return defaultSettings[this.type].properties.find((prop: WidgetProperties) => key === prop.name);
+    return defaultSettings[this.type].properties.find(
+      (prop: WidgetProperties) => key === prop.name,
+    );
   }
 }
 

src/components/ConfigurationPage/css/Widget.css

@@ -98,10 +98,6 @@
   cursor: pointer;
 }
 
-.widget-button.widget-button-more {
-  border-radius: 4px;
-}
-
 .widget-button-menu {
   color: #6b7bbc;
   background-color: #151a33;

src/components/ConfigurationPage/css/WidgetButton.css

@@ -1,42 +1,69 @@
+.widget-button-url .material-symbols-sharp {
+  margin-left: -2px;
+  vertical-align: bottom;
+}
+
+.widget-button-list {
+  min-width: 100px;
+  margin-top: 20px;
+  position: relative;
+  text-align: right;
+  right: 0;
+  display: inline-block;
+}
+
+/* CSS */
 .widget-button {
   border: 1px solid #151a33;
+  margin-left: 10px;
   background-color: #151a33;
   color: #6b7bbc;
-  margin-left: 3px;
+  border-radius: 4px;
+  box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px 0;
+  box-sizing: border-box;
+  color: #fff;
+  cursor: pointer;
+  font-family:
+    "Akzidenz Grotesk BQ Medium",
+    -apple-system,
+    BlinkMacSystemFont,
+    sans-serif;
+  font-size: 16px;
+  font-weight: 400;
   height: 40px;
   width: 40px;
-  border-radius: 40px;
-	border: 1px solid #151a33;
+  outline: none;
+  outline: 0;
+  text-align: center;
+  transform: translateY(0);
+  transition:
+    transform 150ms,
+    box-shadow 150ms;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  padding: 5px 5px;
+}
+
+.widget-button span {
+  line-height: 0;
+  vertical-align: middle;
 }
 
 .widget-button:hover {
-	color: #674afd;
-	border: 1px solid #674afd;
+  box-shadow: rgba(0, 0, 0, 0.15) 0 3px 9px 0;
+  transform: translateY(-2px);
+  color: #674afd;
 }
 
 .widget-button.widget-button-accept {
-	background-color: #45d3c2;
-	color: black;
+  border: 1px solid #13aa52;
+  background-color: #13aa52;
+  color: white;
 }
 
 .widget-button.widget-button-decline {
-	background-color: #45d3c2;
-	color: black;
-}
-
-.widget-button .material-symbols-sharp {
-  vertical-align: bottom;
-}
-
-.widget-button-url .material-symbols-sharp {
-  margin-left: -2px;
-}
-
-.widget-button-list {
-	min-width: 100px;
-	margin-top: 20px;
-  position: relative;
-	text-align: right;
-  right: 0;
-  display: inline-block;
+  border: 1px solid red;
+  background: #e62143;
+  color: white;
 }