diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx index 67382ba..9c192a6 100644 --- a/src/app/dashboard/page.tsx +++ b/src/app/dashboard/page.tsx @@ -1,27 +1,28 @@ -'use client'; +"use client"; -import React, { useRef, useState } from 'react'; +import React, { useRef, useState } from "react"; import Image from "next/image"; -import fenderImg from '../../../public/fender-lego-tv.png' -import qrcode from '../../../public/qrcode_events.superviz.com.png' +import fenderImg from "../../../public/fender-lego-tv.png"; +import qrcode from "../../../public/qrcode_events.superviz.com.png"; import Activations from "@/components/Activations"; import UsersDashboard from "@/components/UsersDashboard"; import { activations } from "@/data/activationsData"; import { Realtime, SuperVizRoomProvider } from "@superviz/react-sdk"; -import { ToastContainer } from 'react-toastify'; -import { v4 as uuid } from 'uuid' -import './UserDashboard.scss' +import { ToastContainer } from "react-toastify"; +import { v4 as uuid } from "uuid"; +import "./UserDashboard.scss"; -const DEVELOPER_KEY = process.env.NEXT_PUBLIC_DEVELOPER_KEY as string -const DASHBOARD_GROUP_ID = process.env.NEXT_PUBLIC_DASHBOARD_GROUP_ID as string -const DASHBOARD_GROUP_NAME = process.env.NEXT_PUBLIC_DASHBOARD_GROUP_NAME as string -const DASHBOARD_PARTICIPANT_ID = uuid() -const DASHBOARD_PARTICIPANT_NAME = process.env.NEXT_PUBLIC_DASHBOARD_PARTICIPANT_NAME as string +const DEVELOPER_KEY = process.env.NEXT_PUBLIC_DEVELOPER_KEY as string; +const DASHBOARD_GROUP_ID = process.env.NEXT_PUBLIC_DASHBOARD_GROUP_ID as string; +const DASHBOARD_GROUP_NAME = process.env + .NEXT_PUBLIC_DASHBOARD_GROUP_NAME as string; +const DASHBOARD_PARTICIPANT_ID = uuid(); +const DASHBOARD_PARTICIPANT_NAME = process.env + .NEXT_PUBLIC_DASHBOARD_PARTICIPANT_NAME as string; -const DASHBOARD_ROOM_ID = process.env.NEXT_PUBLIC_DASHBOARD_ROOM_ID as string +const DASHBOARD_ROOM_ID = process.env.NEXT_PUBLIC_DASHBOARD_ROOM_ID as string; export default function Dashboard() { - return ( -
+
- Logo Superviz + Logo Superviz

- Ganhe um LEGO® - da Fender® + Ganhe um LEGO + + ®{" "} + + da Fender + + ® +

Participe de qualquer ativação e ganhe pontos para concorrer.

-

Quanto mais ativações, mais chances de ganhar.

+

+ Quanto mais ativações, mais chances de ganhar. +

- QR Code para ativação + QR Code para ativação
- Imagem de um Lego da Fender -
-
-

Participantes em tempo real

+ Imagem de um Lego da Fender +
+
+

+ Participantes em tempo real +

@@ -60,9 +87,23 @@ export default function Dashboard() {
- ícone de sincronização - Sincronização de dados por - Superviz + ícone de sincronização + + Sincronização de dados por{" "} + + Superviz
@@ -70,4 +111,4 @@ export default function Dashboard() { ); -}; +} diff --git a/src/components/ActivationsPages/GameActivationPlayLayout.tsx b/src/components/ActivationsPages/GameActivationPlayLayout.tsx index c05f592..5fc71ba 100644 --- a/src/components/ActivationsPages/GameActivationPlayLayout.tsx +++ b/src/components/ActivationsPages/GameActivationPlayLayout.tsx @@ -67,7 +67,6 @@ export default function GameActivationPlayLayout({ repeatedTries.current += 1; if (randomTimes.includes(repeatedTries.current)) { - console.log("includes", randomTimes, repeatedTries.current); try { const user = await getUserData( JSON.parse(localStorage.getItem(USERDATA_KEY) as string) @@ -78,21 +77,20 @@ export default function GameActivationPlayLayout({ timesRevoked: user?.timesRevoked! + 1, }); - // const response = await fetch( - // "https://codecodes-api-78be231ef650.herokuapp.com/token/partner", - // { - // method: "POST", - // headers: { - // "x-partnerApiKey": "aa7da574-3ab2-4911-b2af-73afc22df46f", - // }, - // } - // ); - - // const { - // data: { code }, - // } = await response.json(); - - const code = "123456"; + const response = await fetch( + "https://codecodes-api-78be231ef650.herokuapp.com/token/partner", + { + method: "POST", + headers: { + "x-partnerApiKey": "aa7da574-3ab2-4911-b2af-73afc22df46f", + }, + } + ); + + const { + data: { code }, + } = await response.json(); + toast(`Você descobriu um Code-Code! Anote: ${code}`, { autoClose: 15000, position: "top-center", diff --git a/src/components/UsersDashboard/index.tsx b/src/components/UsersDashboard/index.tsx index ac0924c..ecf40af 100644 --- a/src/components/UsersDashboard/index.tsx +++ b/src/components/UsersDashboard/index.tsx @@ -160,20 +160,26 @@ export default function UsersDashboard() { newBalls.push(createBall(user)); } - Matter.Events.on(engine, 'collisionStart', (event) => { + Matter.Events.on(engine, "collisionStart", (event) => { const pairs = event.pairs; for (let i = 0; i < pairs.length; i++) { const pair = pairs[i]; const randomAngle = (Math.random() - 0.5) * Math.PI; - const velocityA = Matter.Vector.rotate(pair.bodyA.velocity, randomAngle); - const velocityB = Matter.Vector.rotate(pair.bodyB.velocity, randomAngle); + const velocityA = Matter.Vector.rotate( + pair.bodyA.velocity, + randomAngle + ); + const velocityB = Matter.Vector.rotate( + pair.bodyB.velocity, + randomAngle + ); Matter.Body.setVelocity(pair.bodyA, { x: velocityA.x * -1, - y: velocityA.y * -1 + y: velocityA.y * -1, }); Matter.Body.setVelocity(pair.bodyB, { x: velocityB.x * -1, - y: velocityB.y * -1 + y: velocityB.y * -1, }); } }); @@ -208,7 +214,7 @@ export default function UsersDashboard() { Matter.Body.setVelocity(body, { x: body.velocity.x * SPEED_MULTIPLIER, - y: body.velocity.y * SPEED_MULTIPLIER + y: body.velocity.y * SPEED_MULTIPLIER, }); // Occasionally add a small random force @@ -260,12 +266,19 @@ export default function UsersDashboard() { setUsers(newUsers); }; - function completeActivation(userId: string, activationName: ActivationType, completed: boolean) { - const user = { ...users.find(user => user.id === userId) } as IUser; + function completeActivation( + userId: string, + activationName: ActivationType, + completed: boolean + ) { + const user = { ...users.find((user) => user.id === userId) } as IUser; if (!user) return; - if (!completed && !user.activations.some(activation => activation.name === activationName)) { + if ( + !completed && + !user.activations.some((activation) => activation.name === activationName) + ) { const activation: IUserActivation = { name: activationName, completed: completed, @@ -274,9 +287,10 @@ export default function UsersDashboard() { user.activations.push(activation); } else { - const activation = user.activations.find(activation => activation.name === activationName); - if (activation) - activation.completed = true; + const activation = user.activations.find( + (activation) => activation.name === activationName + ); + if (activation) activation.completed = true; } setUsersToNewState(user); @@ -286,12 +300,14 @@ export default function UsersDashboard() { const userFromMessage: IUser = message?.data?.user; const element = message.data.element; const points = message.data.points; - + const elementId = `${userFromMessage.email}-${element.name}`; - - if(!toast.isActive(elementId)) { + + if (!toast.isActive(elementId)) { toast( - `${element.emoji} ${userFromMessage?.name} acabou de descobrir ${element.name.toUpperCase()} e tem mais chance de ganhar!`, + `${element.emoji} ${ + userFromMessage?.name + } acabou de descobrir ${element.name.toUpperCase()} e tem mais chance de ganhar!`, { toastId: elementId, position: "top-right", @@ -303,10 +319,15 @@ export default function UsersDashboard() { closeButton: false, progress: undefined, theme: "dark", + style: { + transform: "scale(2)", + top: "15px", + right: "150px", + }, } - ); + ); } - + setUsers((prevUsers) => { const updatedUsers = prevUsers.map((user) => { if (user.id === userFromMessage.id) { @@ -320,7 +341,7 @@ export default function UsersDashboard() { } return user; }); - + // Update balls state and ballsRef in a single operation const updatedBalls = ballsRef.current.map((ball) => { if (ball?.user?.id === userFromMessage?.id) { @@ -329,20 +350,20 @@ export default function UsersDashboard() { } return ball; }); - + ballsRef.current = updatedBalls; setBalls(updatedBalls); - + return updatedUsers; }); }, []); // Remove dependencies function handleParticipantStatusChange(userId: string, isOnline: boolean) { setUsers((prevUsers) => { - const updatedUsers = prevUsers.map((u) => + const updatedUsers = prevUsers.map((u) => u.id === userId ? { ...u, isOnline } : u ); - + const updatedBalls = ballsRef.current.map((ball) => { if (ball?.user?.id === userId) { const updatedUser = updatedUsers.find(u => u.id === userId)!; @@ -350,10 +371,10 @@ export default function UsersDashboard() { } return ball; }); - + ballsRef.current = updatedBalls; setBalls(updatedBalls); - + return updatedUsers; }); } @@ -372,21 +393,21 @@ export default function UsersDashboard() { completeActivation(userId, activationName, true); } - const handleParticipantUpdate = useCallback((message: { data: IUser }) => { - const userExists = users.some((user) => message.data?.id === user?.id); - - if (!userExists) { - createUser({ - ...message.data, - activations: message.data?.activations ?? [], - }); + const handleParticipantUpdate = useCallback( + (message: { data: IUser }) => { + const userExists = users.some((user) => message.data?.id === user?.id); - setUsers((previous) => { - return [...previous, message.data]; - }); - } + if (!userExists) { + createUser({ + ...message.data, + activations: message.data?.activations ?? [], + }); + setUsers((previous) => { + return [...previous, message.data]; + }); + } - const user = message.data; + const user = message?.data; setUsers(prevUsers => prevUsers.map(u => u.id === user?.id ? user : u)); setBalls(prevBalls => prevBalls.map(ball => ball?.user?.id === user?.id ? { ...ball, user } : ball)); @@ -416,31 +437,31 @@ export default function UsersDashboard() { }; } ); - + return { id: user.id, name: user.name, email: user.email, discordUser: user.discordUser, activations: activations, - isOnline: false, + isOnline: false, }; }); - + return users; }) .then((users) => { return getOnlineUsersIds().then((onlineUsersIds: string[]) => { if (onlineUsersIds.length === 0) return users; - - return users.map(user => ({ + + return users.map((user) => ({ ...user, - isOnline: onlineUsersIds.includes(user.id) + isOnline: onlineUsersIds.includes(user.id), })); }); }) .then((updatedUsers) => { - setUsers(updatedUsers); + setUsers(updatedUsers); initialize(); }); }