add reel widget:

src/auth.ts

@@ -2,6 +2,8 @@ import axios from "axios";
 import { log } from "./logging";
 
 export default async function auth() {
+  // const token = localStorage.getItem('access-token');
+  // const headers = token ? { Authorization: `Bearer ${token}`} : {};
   const sessionInfo = await axios
     .get(`${process.env.REACT_APP_RECIPIENT_API_ENDPOINT}/session`)
     .then((json) => {

src/components/ConfigurationPage/ConfigurationPage.tsx

@@ -38,7 +38,7 @@ 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" },
+  { name: "reel", description: "Roulette" },
 ];
 
 export default function ConfigurationPage({}: {}) {
@@ -76,8 +76,11 @@ export default function ConfigurationPage({}: {}) {
 
     widgets.forEach((it) => {
       const settings = defaultSettings[it.type];
+      if (!settings) {
+        return;
+      }
       log.debug(`default settings for ${it.type} are ${JSON.stringify(settings)}`);
-      const mergedSettings = settings.properties.map((prop) => {
+        const mergedSettings = settings.properties.map((prop) => {
 				const value = it.config?.properties?.find((sameprop) => sameprop.name === prop.name)?.value;
         const updatedProp = structuredClone(prop);
 				if (value != null){

src/components/ConfigurationPage/WidgetConfiguration.tsx

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

src/components/ConfigurationPage/WidgetSettings.ts

@@ -204,7 +204,7 @@ const defaultSettings = {
       },
     ],
   },
-  roulette: {
+  reel: {
     properties: [
       {
         name: "font",
@@ -223,6 +223,18 @@ const defaultSettings = {
         value: "#000000",
         displayName: "Цвет",
       },
+      {
+        name: "type",
+        type: "custom",
+        value: "eachpayment",
+        displayName: "Условие",
+      },
+      {
+        name: "requiredAmount",
+        type: "number",
+        value: "100",
+        displayName: "Требуемая сумма",
+      },
       {
         name: "optionList",
         type: "custom",

src/components/Login/Login.tsx

@@ -12,7 +12,6 @@ async function loader({ params }) {
 }
 
 function tokenRequest(login: string, password: string): Promise<String> {
-  console.log(`loging with login: ${login}, password: ${password}`);
   return axios
     .post(
       "https://auth.oda.digital/realms/ODA/protocol/openid-connect/token",

src/index.css

@@ -82,3 +82,15 @@ code {
 input[type="file"] {
   display: none;
 }
+
+.hidden {
+  visibility: hidden;
+}
+
+.glide__slides {
+  align-items: center;
+}
+
+.glide {
+  overflow-wrap: break-word;
+}

src/index.tsx

@@ -112,7 +112,7 @@ const router = createBrowserRouter([
     loader: widgetSettingsLoader,
   },
   {
-    path: "/roulette/:widgetId",
+    path: "/reel/:widgetId",
     element: <ReelWidget />,
     loader: widgetSettingsLoader,
   },

src/pages/Reel/ReelWidget.module.css

@@ -0,0 +1,20 @@
+.reelitem {
+  border: 1px solid red;
+  text-align: center;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  font-size: 30px;
+  border-radius: 20px;
+}
+
+.active {
+  background-color: green;
+  color: white;
+  animation: blinker 1s linear infinite;
+}
+
+@keyframes blinker {
+  50% {
+    opacity: 0;
+  }
+}

src/pages/Reel/ReelWidget.tsx

@@ -1,17 +1,35 @@
-import Glide from '@glidejs/glide';
+import Glide from "@glidejs/glide";
 import "@glidejs/glide/dist/css/glide.core.min.css";
 import "@glidejs/glide/dist/css/glide.theme.min.css";
 
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useLoaderData, useNavigate } from "react-router-dom";
-import { setupCommandListener } from "../../socket";
+import { setupCommandListener, subscribe } from "../../socket";
+import classes from "./ReelWidget.module.css";
+import { log } from "../../logging";
+import { findSetting } from "../../components/utils";
 
 export default function ReelWidget({}) {
   const { recipientId, settings, conf, widgetId } = useLoaderData();
   const navigate = useNavigate();
   const glideRef = useRef<HTMLDivElement | null>(null);
+  const glide = useRef<Glide | null>(null);
+  const [active, setActive] = useState<string | null>(null);
+  const [highlight, setHighlight] = useState<boolean>(false);
 
   useEffect(() => {
+    subscribe(widgetId, conf.topic.reel, (message) => {
+      log.info(`Received reel command: ${message.body}`);
+      let json = JSON.parse(message.body);
+      setActive(json.selection);
+      setTimeout(() => {
+        log.debug(`clear active and highlight`);
+        setActive(null);
+        setHighlight(false);
+        glideRef.current?.classList.add('hidden');
+      }, 20000);
+      message.ack();
+    });
     setupCommandListener(widgetId, () => navigate(0));
   }, [widgetId]);
 
@@ -20,40 +38,82 @@ export default function ReelWidget({}) {
       return;
     }
 
-    const glide = new Glide('.glide',{ type: 'carousel',perView: 3, rewind: true, animationDuration: 140 }).mount();
-    setupScroll(glide, 20);
+    glide.current = new Glide(".glide", {
+      type: "carousel",
+      perView: 5,
+      rewind: true,
+      animationDuration: 140,
+      focusAt: "center",
+    }).mount();
   }, [glideRef]);
 
-  function setupScroll(glide:any, iteration: number){
-    if (iteration < 1){
+  useEffect(() => {
+    if (!active) {
+      return;
+    }
+    glideRef.current?.classList.remove('hidden');
+    log.debug(`selecting ${active} for reel`);
+    setupScroll(glide.current, 40, () => {
+      const index = options.findIndex((option) => option === active);
+      glide.current.go(`=${index}`);
+      log.debug('highlight selection');
+      setHighlight(true);
+    });
+  }, [active]);
+
+  function setupScroll(glide: any, iteration: number, result: Function) {
+    if (iteration < 1) {
+      result();
       return;
     }
-    const scroll = () => glide.go(`=${getRndInteger(0,3)}`);
+    const selected = getRndInteger(0, 3);
+    const scroll = () => glide.go(`=${selected}`);
+    console.log(`selected: ${selected}`);
+    if (iteration === 1) {
+      console.log(`setActive to ${selected}`);
+    }
     setTimeout(() => {
       scroll();
-      setupScroll(glide, iteration - 1);
+      setupScroll(glide, iteration - 1, result);
     }, 140);
   }
 
   function getRndInteger(min: number, max: number): number {
     return Math.floor(Math.random() * (max - min)) + min;
   }
 
+  const fontSize = findSetting(settings, "fontSize", "24px");
+  const font = findSetting(settings, "font", "Roboto");
+  const color = findSetting(settings, "color", "white");
+  const textStyle = {
+    fontSize: fontSize ? fontSize + "px" : "unset",
+    fontFamily: font ? font : "unset",
+    color: color,
+  };
+  const options = findSetting(settings, "optionList", []);
+  console.log(options);
+
   return (
     <>
       <style
         dangerouslySetInnerHTML={{
           __html: `html, body {height: 100%; background-color: "rgba(0,0,0,0)";}`,
         }}
       />
-      <div>
-        <div className="glide" ref={glideRef}>
+      <div style={textStyle}>
+        <div className={`glide hidden`} ref={glideRef}>
           <div className="glide__track" data-glide-el="track">
             <ul className="glide__slides">
-              <li className="glide__slide">0</li>
-              <li className="glide__slide">1</li>
-              <li className="glide__slide">2</li>
-              <li className="glide__slide">3</li>
+              {options.map((option) => (
+                <li
+                  key={option}
+                  className={`glide__slide ${classes.reelitem} ${
+                    highlight && active === option ? classes.active : ""
+                  }`}
+                >
+                  {option}
+                </li>
+              ))}
             </ul>
           </div>
         </div>