Merge pull request #13 from SuperViz/develop

Develop

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+	"px-to-rem.px-per-rem": 16
+}

package.json

@@ -12,16 +12,19 @@
   },
   "dependencies": {
     "@prisma/client": "^5.18.0",
-    "@superviz/react-sdk": "1.11.0-beta.7",
+    "@superviz/react-sdk": "1.13.0-beta.1",
+    "@tanstack/react-query": "^5.53.1",
     "matter-js": "^0.20.0",
-    "next": "14.2.5",
+    "next": "14.2.7",
     "react": "^18",
+    "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18",
-    "zod": "^3.23.8",
+    "react-toastify": "^10.0.5",
     "sass": "^1.77.8",
-    "react-beautiful-dnd": "^13.1.1"
+    "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@tanstack/eslint-plugin-query": "^5.53.0",
     "@types/matter-js": "^0.19.7",
     "@types/node": "^20",
     "@types/react": "^18",

src/app/activations/discord/page.tsx

@@ -3,38 +3,38 @@
 import Input from "@/components/Input";
 import Button from "@/components/Button";
 import React from "react";
-import {addUserDiscord} from "@/app/services/addUserDiscord";
-import {IUser} from "../../../../types";
-import {useRouter} from "next/navigation";
+import { addUserDiscord } from "@/app/services/addUserDiscord";
+import { IUser } from "../../../../types";
+import { useRouter } from "next/navigation";
 
 const USERDATA_KEY = process.env.NEXT_PUBLIC_USERDATA_KEY as string;
 
 export default function DiscordPage() {
   const router = useRouter()
-  const [ discordUser, setDiscordUser ] = React.useState<string>('')
-  const [ validField, setValidField ] = React.useState<boolean>(false)
+  const [discordUser, setDiscordUser] = React.useState<string>('')
+  const [validField, setValidField] = React.useState<boolean>(false)
 
-  const handleChangeInput = (event: React.ChangeEvent<HTMLInputElement> ) => {
+  const handleChangeInput = (event: React.ChangeEvent<HTMLInputElement>) => {
     const fieldValidity = event.target.validity.valid
     const value = event.target.value
     setDiscordUser(value)
-    if(fieldValidity !== validField) {
+    if (fieldValidity !== validField) {
       setValidField(fieldValidity)
     }
   }
 
   const handleSubmit = async () => {
     const userData = JSON.parse(localStorage.getItem(USERDATA_KEY)!) as IUser
     const userEmail = userData.email
-
-    await addUserDiscord({discordUser, email: userEmail})
 
-    router.push('/activations/discord/embeded')
+    await addUserDiscord({ discordUser, email: userEmail })
+
+    router.push('https://discord.com/invite/Zb2arax9nn')
   }
-  
+
   return (
     <>
-      <form className="w-full h-full relative overflow-hidden flex flex-col justify-end">
+      <form className="w-full h-full relative overflow-hidden flex flex-col justify-end px-1">
         <div
           className={`absolute bottom-[40%] left-0 w-full transition-all duration-700 ease-in-out transform`}
         >

src/app/activations/game/onboarding.scss

@@ -0,0 +1,66 @@
+.onboarding {
+	padding: 2rem 1.5rem;
+
+	.step {
+		display: flex;
+		flex-direction: column;
+		height: calc(100vh - 56px - 6rem);
+		text-align: center;
+
+		.game-title {
+			margin-top: auto;
+			font-family: Roboto, Arial, sans-serif;
+
+			h1 {
+				font-size: 4.7608rem;
+				font-weight: 900;
+				line-height: 97%;
+				margin-bottom: 2rem;
+
+				span {
+					display: block;
+					color: #957AFF;
+				}
+			}
+		}
+
+		h2 {
+			color: #957AFF;
+			font-size: 1.5rem;
+			margin-bottom: 1.5rem;
+			font-weight: 900;
+		}
+
+		p {
+			font-size: 1.5rem;
+			font-weight: 400;
+			margin-bottom: 1rem;
+			line-height: 115%;
+		}
+
+		.step-counter {
+			margin: 2rem auto;
+			display: flex;
+			gap: 1rem;
+
+			.step-circle {
+				width: 50px;
+				height: 6px;
+				background: #4C4C4C;
+				border-radius: 3px;
+
+				&.active {
+					background-color: #957AFF;
+				}
+			}
+		}
+
+		img {
+			margin: auto;
+		}
+
+		button {
+			margin-top: auto;
+		}
+	}
+}

src/app/activations/game/page.tsx

@@ -0,0 +1,93 @@
+'use client'
+
+import { useState } from 'react'
+import './onboarding.scss'
+import Button from '@/components/Button'
+import Image from 'next/image'
+
+export default function GameOnboarding() {
+	const [currentStep, setCurrentStep] = useState(0)
+
+	const moveToGame = () => {
+		window.open('/activations/game/play', '_self')
+	}
+
+	const moveNext = () => {
+		if (localStorage.getItem('onboarding-finished'))
+			moveToGame()
+		else
+			setCurrentStep(currentStep + 1)
+
+		if (currentStep === 2)
+			localStorage.setItem('onboarding-finished', 'true')
+	}
+
+	return (
+		<div className='onboarding'>
+			{currentStep === 0 && (
+				<div className='step'>
+					<div className='game-title'>
+						<h1>Super<span>{'<Craft>'}</span></h1>
+						<p>Combine e crie elementos</p>
+						<p>🔥 💧 🍃 🌎</p>
+					</div>
+
+					<Button text={'Jogar'} type={'button'} onClick={moveNext} />
+				</div>
+			)}
+
+			{currentStep === 1 && (
+				<div className='step'>
+					<div className='step-counter'>
+						<div className='step-circle active'></div>
+						<div className='step-circle'></div>
+						<div className='step-circle'></div>
+					</div>
+
+					<div className='step-description'>
+						<h2>Como jogar</h2>
+						<p>Todos os jogadores começam com elementos básicos como Água, Vento, Terra e Fogo. Arraste os elementos e os combine para criar novos.</p>
+					</div>
+
+					<Button text={'Próximo'} type={'button'} onClick={moveNext} />
+				</div>
+			)}
+
+			{currentStep === 2 && (
+				<div className='step'>
+					<div className='step-counter'>
+						<div className='step-circle active'></div>
+						<div className='step-circle active'></div>
+						<div className='step-circle'></div>
+					</div>
+
+					<div className='step-description'>
+						<h2>Como jogar</h2>
+						<p>Ao descobrir elementos inéditos que nenhum jogador jamais encontrou, ganhe +1 ponto para concorrer ao prêmio!</p>
+					</div>
+
+					<Button text={'Próximo'} type={'button'} onClick={moveNext} />
+				</div>
+			)}
+
+			{currentStep === 3 && (
+				<div className='step'>
+					<div className='step-counter'>
+						<div className='step-circle active'></div>
+						<div className='step-circle active'></div>
+						<div className='step-circle active'></div>
+					</div>
+
+					<div className='step-description'>
+						<h2>Como jogar</h2>
+						<p>Você pode conseguir até 10 pontos e aumentar suas chances de levar o prêmio!</p>
+					</div>
+
+					<Image src={'/game-you.png'} alt={'Você'} width={101} height={141} />
+
+					<Button text={'Próximo'} type={'button'} onClick={moveToGame} />
+				</div>
+			)}
+		</div>
+	)
+}

src/app/jogo/page.tsx → src/app/activations/game/play/page.tsx

@@ -1,13 +1,17 @@
 'use client';
-import React, { useEffect, useState } from 'react';
-import { IElement } from '../../../types.game';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Element } from '@/components/Game';
 import { DragDropContext, Droppable, Draggable, resetServerContext } from 'react-beautiful-dnd';
 import './game.scss';
 import { InitialElements } from '@/data/elementsData';
+import { IElement } from '../../../../../types.game';
+import { useRealtime } from '@superviz/react-sdk';
 
 export default function Jogo() {
   const [elements, setElements] = useState<IElement[]>([]);
+  const USERDATA_KEY = process.env.NEXT_PUBLIC_USERDATA_KEY as string;
+
+  // const { subscribe } = useRealtime('game');
 
   const getSavedElements = () => {
     let existingSave = localStorage.getItem("saved_game");
@@ -20,25 +24,18 @@ export default function Jogo() {
   }
 
   const saveNewElements = (elementsToSave: IElement[]) => {
-    // TODO: salvar no localStorage
-    // localStorage.setItem("saved_game", JSON.stringify(elementsToSave));
-  }
-
-  const getEmailFromLocalStorage = () => {
-    const userData = localStorage.getItem("undefined");
-    if (userData)
-      return JSON.parse(userData).email;
+    localStorage.setItem("saved_game", JSON.stringify(elementsToSave));
   }
 
   const combineElements = (elementA: IElement, elementB: IElement) => {
     const indexB = elements.findIndex(el => el.id === elementB.id);
 
-    fetch('/api/jogo', {
+    fetch('/api/game', {
       method: 'POST',
       body: JSON.stringify({
         elementA: elementA.name,
         elementB: elementB.name,
-        email: getEmailFromLocalStorage()
+        email: JSON.parse(localStorage.getItem(USERDATA_KEY) as string),
       })
     }).then(res => res.json()).then(data => {
       const newElements = [...elements];
@@ -89,9 +86,15 @@ export default function Jogo() {
     )
   }
 
+  const handleGameUpdate = useCallback((message: any) => {
+
+  }, []);
+
   resetServerContext();
 
   useEffect(() => {
+    // subscribe("new.element", handleGameUpdate);
+
     getSavedElements();
   }, []);
 

src/app/activations/hackathon/page.tsx

@@ -1,20 +1,15 @@
 export default function HackathonPage() {
-  
-  
+
+
   return (
     <div className={`bg-[#313338] w-full h-full rounded-2xl p-4`}>
       <iframe
         src='https://47xzvrbdgjk.typeform.com/to/cqzci1gD'
         width="100%"
         height="100%"
         allowFullScreen
-      >
-        <p>
-          <a href="https://superviz.com/">
-            Oops... algo deu errado!
-          </a>
-        </p>
-      </iframe>
+        sandbox='allow-scripts allow-same-origin allow-forms'
+      ></iframe>
     </div>
   )
 }

src/app/activations/layout.tsx

@@ -1,21 +1,29 @@
+'use client'
+
 import Image from "next/image";
 import * as React from "react";
 import ActivationCall from "@/app/activations/ActivationCall";
 
 export default function ActivationLayout({
- children,
+  children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-
+
+  let isGame = false;
+  if (typeof window !== 'undefined') {
+    isGame = window?.location.pathname.includes('game') ?? false;
+  };
+
   return (
     <div className={`flex flex-col w-screen h-screen mobileBg`}>
       <a className='flex items-center w-full px-7 py-5 bg-[#C9C4D11A]' href={`/userPage`}>
-        <Image src="/arrow_to_left.svg" alt="voltar" width={18} height={0}/>
+        <Image src="/arrow_to_left.svg" alt="voltar" width={18} height={0} />
         <p className='ml-2 font-bold text-xs text-white'>voltar</p>
+        {/* TODO: adicionar logo da SuperViz */}
       </a>
       <div className='flex flex-col w-full flex-grow px-4 py-4'>
-        <ActivationCall />
+        {!isGame && <ActivationCall />}
         {children}
       </div>
     </div>

src/app/activations/newsletter/page.tsx

@@ -6,7 +6,7 @@ export default function NewsletterPage() {
         width="100%"
         height="100%"
         allowFullScreen
-        sandbox={``}
+        sandbox='allow-scripts allow-same-origin allow-forms'
       >
       </iframe>
     </div>