├── src ├── app │ ├── favicon.ico │ ├── about │ │ └── page.tsx │ ├── auth │ │ ├── login │ │ │ └── page.tsx │ │ ├── sign-up │ │ │ └── page.tsx │ │ ├── forgot-password │ │ │ └── page.tsx │ │ ├── update-password │ │ │ └── page.tsx │ │ ├── sign-up-success │ │ │ └── page.tsx │ │ ├── error │ │ │ └── page.tsx │ │ ├── confirm │ │ │ └── route.ts │ │ └── oauth │ │ │ └── route.ts │ ├── profile │ │ └── page.tsx │ ├── layout.tsx │ ├── cafe │ │ └── page.tsx │ ├── globals.css │ └── page.tsx ├── lib │ ├── utils.ts │ ├── supabase │ │ ├── client.ts │ │ ├── server.ts │ │ └── middleware.ts │ └── store-messages.ts ├── components │ ├── ui │ │ ├── skeleton.tsx │ │ ├── label.tsx │ │ ├── separator.tsx │ │ ├── input.tsx │ │ ├── avatar.tsx │ │ ├── radio-group.tsx │ │ ├── tooltip.tsx │ │ ├── card.tsx │ │ ├── button.tsx │ │ ├── form.tsx │ │ ├── dialog.tsx │ │ ├── sheet.tsx │ │ ├── dropdown-menu.tsx │ │ └── sidebar.tsx │ ├── logout-button.tsx │ ├── sidebar-features │ │ ├── emotes.tsx │ │ ├── online-users.tsx │ │ ├── general-chat.tsx │ │ ├── pomodoro.tsx │ │ └── music-player.tsx │ ├── chat-join.tsx │ ├── navbar.tsx │ ├── login-button.tsx │ ├── chat-message.tsx │ ├── login-form.tsx │ ├── update-password-form.tsx │ ├── forgot-password-form.tsx │ ├── sign-up-form.tsx │ ├── realtime-chat.tsx │ ├── profile-form.tsx │ ├── loading-screen.tsx │ ├── app-menu.tsx │ └── game.tsx ├── hooks │ ├── use-chat-scroll.tsx │ ├── use-mobile.ts │ ├── use-realtime-chat.tsx │ └── use-realtime-players.ts ├── context │ ├── emote-context.tsx │ └── online-users-context.tsx ├── middleware.ts └── data │ ├── animations.ts │ └── contribuyentes.ts ├── public ├── assets │ ├── mapa.png │ ├── atlas_48x.png │ ├── Cafescript.png │ ├── Interiors_free_48x48.png │ ├── characters │ │ ├── luis │ │ │ ├── dance.png │ │ │ └── walk.png │ │ └── sofia │ │ │ ├── dance.png │ │ │ └── walk.png │ ├── Room_Builder_free_48x48.png │ └── characters-preview │ │ ├── luis.png │ │ └── sofia.png ├── tiled │ ├── atlas_48x.png │ ├── Interiors_free_48x48.png │ └── Room_Builder_free_48x48.png ├── music │ ├── Pixel-Dreams.mp3 │ ├── notification.wav │ └── Pixel-Dreams-Remix.mp3 ├── vercel.svg ├── window.svg ├── file.svg ├── globe.svg └── next.svg ├── postcss.config.mjs ├── next.config.ts ├── eslint.config.mjs ├── components.json ├── .gitignore ├── tsconfig.json ├── package.json ├── README.md └── doc ├── menu-implementacion.md └── pruebas_locales.md /src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CondorCoders/cafe/HEAD/src/app/favicon.ico -------------------------------------------------------------------------------- /public/assets/mapa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CondorCoders/cafe/HEAD/public/assets/mapa.png -------------------------------------------------------------------------------- /public/assets/atlas_48x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CondorCoders/cafe/HEAD/public/assets/atlas_48x.png -------------------------------------------------------------------------------- /public/tiled/atlas_48x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CondorCoders/cafe/HEAD/public/tiled/atlas_48x.png -------------------------------------------------------------------------------- /src/app/about/page.tsx: -------------------------------------------------------------------------------- 1 | export default function AboutaPage() { 2 | return
About Us
; 3 | } 4 | -------------------------------------------------------------------------------- /public/assets/Cafescript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CondorCoders/cafe/HEAD/public/assets/Cafescript.png -------------------------------------------------------------------------------- /public/music/Pixel-Dreams.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CondorCoders/cafe/HEAD/public/music/Pixel-Dreams.mp3 -------------------------------------------------------------------------------- /public/music/notification.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CondorCoders/cafe/HEAD/public/music/notification.wav -------------------------------------------------------------------------------- /postcss.config.mjs: -------------------------------------------------------------------------------- 1 | const config = { 2 | plugins: ["@tailwindcss/postcss"], 3 | }; 4 | 5 | export default config; 6 | -------------------------------------------------------------------------------- /public/music/Pixel-Dreams-Remix.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CondorCoders/cafe/HEAD/public/music/Pixel-Dreams-Remix.mp3 -------------------------------------------------------------------------------- /public/tiled/Interiors_free_48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CondorCoders/cafe/HEAD/public/tiled/Interiors_free_48x48.png -------------------------------------------------------------------------------- /public/assets/Interiors_free_48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CondorCoders/cafe/HEAD/public/assets/Interiors_free_48x48.png -------------------------------------------------------------------------------- /public/assets/characters/luis/dance.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CondorCoders/cafe/HEAD/public/assets/characters/luis/dance.png -------------------------------------------------------------------------------- /public/assets/characters/luis/walk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CondorCoders/cafe/HEAD/public/assets/characters/luis/walk.png -------------------------------------------------------------------------------- /public/assets/characters/sofia/dance.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CondorCoders/cafe/HEAD/public/assets/characters/sofia/dance.png -------------------------------------------------------------------------------- /public/assets/characters/sofia/walk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CondorCoders/cafe/HEAD/public/assets/characters/sofia/walk.png -------------------------------------------------------------------------------- /public/tiled/Room_Builder_free_48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CondorCoders/cafe/HEAD/public/tiled/Room_Builder_free_48x48.png -------------------------------------------------------------------------------- /public/assets/Room_Builder_free_48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CondorCoders/cafe/HEAD/public/assets/Room_Builder_free_48x48.png -------------------------------------------------------------------------------- /public/assets/characters-preview/luis.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CondorCoders/cafe/HEAD/public/assets/characters-preview/luis.png -------------------------------------------------------------------------------- /public/assets/characters-preview/sofia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CondorCoders/cafe/HEAD/public/assets/characters-preview/sofia.png -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /next.config.ts: -------------------------------------------------------------------------------- 1 | import type { NextConfig } from "next"; 2 | 3 | const nextConfig: NextConfig = { 4 | /* config options here */ 5 | }; 6 | 7 | export default nextConfig; 8 | -------------------------------------------------------------------------------- /src/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { clsx, type ClassValue } from "clsx" 2 | import { twMerge } from "tailwind-merge" 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)) 6 | } 7 | -------------------------------------------------------------------------------- /src/lib/supabase/client.ts: -------------------------------------------------------------------------------- 1 | import { createBrowserClient } from '@supabase/ssr' 2 | 3 | export function createClient() { 4 | return createBrowserClient( 5 | process.env.NEXT_PUBLIC_SUPABASE_URL!, 6 | process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY! 7 | ) 8 | } 9 | -------------------------------------------------------------------------------- /src/app/auth/login/page.tsx: -------------------------------------------------------------------------------- 1 | import { LoginForm } from '@/components/login-form' 2 | 3 | export default function Page() { 4 | return ( 5 |
6 |
7 | 8 |
9 |
10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /src/app/auth/sign-up/page.tsx: -------------------------------------------------------------------------------- 1 | import { SignUpForm } from '@/components/sign-up-form' 2 | 3 | export default function Page() { 4 | return ( 5 |
6 |
7 | 8 |
9 |
10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /src/components/ui/skeleton.tsx: -------------------------------------------------------------------------------- 1 | import { cn } from "@/lib/utils" 2 | 3 | function Skeleton({ className, ...props }: React.ComponentProps<"div">) { 4 | return ( 5 |
10 | ) 11 | } 12 | 13 | export { Skeleton } 14 | -------------------------------------------------------------------------------- /src/app/auth/forgot-password/page.tsx: -------------------------------------------------------------------------------- 1 | import { ForgotPasswordForm } from '@/components/forgot-password-form' 2 | 3 | export default function Page() { 4 | return ( 5 |
6 |
7 | 8 |
9 |
10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /src/app/auth/update-password/page.tsx: -------------------------------------------------------------------------------- 1 | import { UpdatePasswordForm } from '@/components/update-password-form' 2 | 3 | export default function Page() { 4 | return ( 5 |
6 |
7 | 8 |
9 |
10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /public/window.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/file.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /eslint.config.mjs: -------------------------------------------------------------------------------- 1 | import { dirname } from "path"; 2 | import { fileURLToPath } from "url"; 3 | import { FlatCompat } from "@eslint/eslintrc"; 4 | 5 | const __filename = fileURLToPath(import.meta.url); 6 | const __dirname = dirname(__filename); 7 | 8 | const compat = new FlatCompat({ 9 | baseDirectory: __dirname, 10 | }); 11 | 12 | const eslintConfig = [ 13 | ...compat.extends("next/core-web-vitals", "next/typescript"), 14 | ]; 15 | 16 | export default eslintConfig; 17 | -------------------------------------------------------------------------------- /src/hooks/use-chat-scroll.tsx: -------------------------------------------------------------------------------- 1 | import { useCallback, useRef } from 'react' 2 | 3 | export function useChatScroll() { 4 | const containerRef = useRef(null) 5 | 6 | const scrollToBottom = useCallback(() => { 7 | if (!containerRef.current) return 8 | 9 | const container = containerRef.current 10 | container.scrollTo({ 11 | top: container.scrollHeight, 12 | behavior: 'smooth', 13 | }) 14 | }, []) 15 | 16 | return { containerRef, scrollToBottom } 17 | } 18 | -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "new-york", 4 | "rsc": true, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "", 8 | "css": "src/app/globals.css", 9 | "baseColor": "neutral", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils", 16 | "ui": "@/components/ui", 17 | "lib": "@/lib", 18 | "hooks": "@/hooks" 19 | }, 20 | "iconLibrary": "lucide" 21 | } -------------------------------------------------------------------------------- /src/context/emote-context.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { createContext, useContext, useState } from "react"; 4 | 5 | const EmoteContext = createContext<{ 6 | emote: string | null; 7 | setEmote: (emote: string | null) => void; 8 | }>({ 9 | emote: null, 10 | setEmote: () => {}, 11 | }); 12 | 13 | export const EmoteProvider = ({ children }: React.PropsWithChildren) => { 14 | const [emote, setEmote] = useState(null); 15 | 16 | return ( 17 | 18 | {children} 19 | 20 | ); 21 | }; 22 | 23 | export const useEmote = () => useContext(EmoteContext); 24 | -------------------------------------------------------------------------------- /src/hooks/use-mobile.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | const MOBILE_BREAKPOINT = 768 4 | 5 | export function useIsMobile() { 6 | const [isMobile, setIsMobile] = React.useState(undefined) 7 | 8 | React.useEffect(() => { 9 | const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`) 10 | const onChange = () => { 11 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) 12 | } 13 | mql.addEventListener("change", onChange) 14 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) 15 | return () => mql.removeEventListener("change", onChange) 16 | }, []) 17 | 18 | return !!isMobile 19 | } 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.* 7 | .yarn/* 8 | !.yarn/patches 9 | !.yarn/plugins 10 | !.yarn/releases 11 | !.yarn/versions 12 | 13 | # testing 14 | /coverage 15 | 16 | # next.js 17 | /.next/ 18 | /out/ 19 | 20 | # production 21 | /build 22 | 23 | # misc 24 | .DS_Store 25 | *.pem 26 | 27 | # debug 28 | npm-debug.log* 29 | yarn-debug.log* 30 | yarn-error.log* 31 | .pnpm-debug.log* 32 | 33 | # env files (can opt-in for committing if needed) 34 | .env* 35 | 36 | # vercel 37 | .vercel 38 | 39 | # typescript 40 | *.tsbuildinfo 41 | next-env.d.ts 42 | -------------------------------------------------------------------------------- /src/components/logout-button.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { createClient } from "@/lib/supabase/client"; 4 | import { Button } from "@/components/ui/button"; 5 | import { useRouter } from "next/navigation"; 6 | 7 | interface LogoutButtonProps { 8 | className?: string; 9 | } 10 | 11 | export function LogoutButton({ className }: LogoutButtonProps) { 12 | const router = useRouter(); 13 | 14 | const logout = async () => { 15 | const supabase = createClient(); 16 | await supabase.auth.signOut(); 17 | router.push("/auth/login"); 18 | }; 19 | 20 | return ( 21 | 24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /src/middleware.ts: -------------------------------------------------------------------------------- 1 | import { updateSession } from '@/lib/supabase/middleware' 2 | import { type NextRequest } from 'next/server' 3 | 4 | export async function middleware(request: NextRequest) { 5 | return await updateSession(request) 6 | } 7 | 8 | export const config = { 9 | matcher: [ 10 | /* 11 | * Match all request paths except for the ones starting with: 12 | * - _next/static (static files) 13 | * - _next/image (image optimization files) 14 | * - favicon.ico (favicon file) 15 | * Feel free to modify this pattern to include more paths. 16 | */ 17 | '/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)', 18 | ], 19 | } 20 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2017", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noEmit": true, 9 | "esModuleInterop": true, 10 | "module": "esnext", 11 | "moduleResolution": "bundler", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "plugins": [ 17 | { 18 | "name": "next" 19 | } 20 | ], 21 | "paths": { 22 | "@/*": ["./src/*"] 23 | } 24 | }, 25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 26 | "exclude": ["node_modules"] 27 | } 28 | -------------------------------------------------------------------------------- /src/components/ui/label.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as LabelPrimitive from "@radix-ui/react-label" 5 | 6 | import { cn } from "@/lib/utils" 7 | 8 | function Label({ 9 | className, 10 | ...props 11 | }: React.ComponentProps) { 12 | return ( 13 | 21 | ) 22 | } 23 | 24 | export { Label } 25 | -------------------------------------------------------------------------------- /src/components/sidebar-features/emotes.tsx: -------------------------------------------------------------------------------- 1 | import { animationsConfig } from "@/data/animations"; 2 | import { Button } from "../ui/button"; 3 | import { useEmote } from "@/context/emote-context"; 4 | 5 | const emotes = Object.keys(animationsConfig).filter( 6 | (animation) => animation !== "walk" 7 | ); 8 | 9 | export const Emotes = () => { 10 | const { emote, setEmote } = useEmote(); 11 | 12 | return ( 13 |
14 | {emotes.map((e) => ( 15 | 23 | ))} 24 |
25 | ); 26 | }; 27 | -------------------------------------------------------------------------------- /src/data/animations.ts: -------------------------------------------------------------------------------- 1 | // Animaciones del jugador - Configuración optimizada 2 | export const animationsConfig = { 3 | walk: [ 4 | { key: "up", start: 0, end: 8 }, 5 | { key: "left", start: 9, end: 17 }, 6 | { key: "down", start: 18, end: 26 }, 7 | { key: "right", start: 27, end: 35 }, 8 | { key: "idle-up", idleFrame: 5 }, 9 | { key: "idle-left", idleFrame: 9 }, 10 | { key: "idle-down", idleFrame: 19 }, 11 | { key: "idle-right", idleFrame: 27 }, 12 | ], 13 | dance: [ 14 | { key: "dance-up", start: 0, end: 5, repeat: 3 }, 15 | { key: "dance-left", start: 6, end: 11, repeat: 3 }, 16 | { key: "dance-down", start: 12, end: 17, repeat: 3 }, 17 | { key: "dance-right", start: 18, end: 23, repeat: 3 }, 18 | ], 19 | }; 20 | -------------------------------------------------------------------------------- /src/components/chat-join.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { RealtimeChat } from "./realtime-chat"; 4 | import { ChatMessage } from "@/hooks/use-realtime-chat"; 5 | import { storeMessages } from "@/lib/store-messages"; 6 | import { ProfileType } from "./profile-form"; 7 | 8 | export const ChatJoin = ({ 9 | roomId, 10 | messages, 11 | user, 12 | }: { 13 | roomId: string; 14 | messages?: ChatMessage[]; 15 | user: ProfileType; 16 | }) => { 17 | const handleOnMessage = async (messages: ChatMessage[]) => { 18 | await storeMessages(roomId, user.id, messages); 19 | }; 20 | 21 | return ( 22 | 28 | ); 29 | }; 30 | -------------------------------------------------------------------------------- /src/components/ui/separator.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as SeparatorPrimitive from "@radix-ui/react-separator" 5 | 6 | import { cn } from "@/lib/utils" 7 | 8 | function Separator({ 9 | className, 10 | orientation = "horizontal", 11 | decorative = true, 12 | ...props 13 | }: React.ComponentProps) { 14 | return ( 15 | 25 | ) 26 | } 27 | 28 | export { Separator } 29 | -------------------------------------------------------------------------------- /src/lib/store-messages.ts: -------------------------------------------------------------------------------- 1 | import { ChatMessage } from "@/hooks/use-realtime-chat"; 2 | import { createClient } from "./supabase/client"; 3 | 4 | export const storeMessages = async ( 5 | roomId: string, 6 | userId: string, 7 | messages: ChatMessage[] 8 | ) => { 9 | const supabase = createClient(); 10 | 11 | if (!messages.length) { 12 | return; 13 | } 14 | 15 | const { error } = await supabase.from("messages").upsert( 16 | messages.map((message) => ({ 17 | id: message.id, 18 | content: message.content, 19 | username: message.user.name, 20 | created_at: message.createdAt, 21 | user_id: userId, 22 | room: roomId, 23 | })), 24 | { onConflict: "id" } 25 | ); 26 | 27 | if (error) { 28 | console.error("Error storing messages:", error); 29 | } else { 30 | console.log("Messages stored successfully"); 31 | } 32 | }; 33 | -------------------------------------------------------------------------------- /src/context/online-users-context.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { PresenceState } from "@/hooks/use-realtime-players"; 3 | import { createContext, useContext, useState } from "react"; 4 | 5 | const OnlineUsersContext = createContext<{ 6 | onlineUsers: Record; 7 | setOnlineUsers: React.Dispatch< 8 | React.SetStateAction> 9 | >; 10 | }>({ 11 | onlineUsers: {}, 12 | setOnlineUsers: () => {}, 13 | }); 14 | 15 | export const OnlineUsersProvider = ({ children }: React.PropsWithChildren) => { 16 | const [onlineUsers, setOnlineUsers] = useState>( 17 | {} 18 | ); 19 | 20 | return ( 21 | 22 | {children} 23 | 24 | ); 25 | }; 26 | 27 | export const useOnlineUsers = () => useContext(OnlineUsersContext); 28 | -------------------------------------------------------------------------------- /src/lib/supabase/server.ts: -------------------------------------------------------------------------------- 1 | import { createServerClient } from "@supabase/ssr"; 2 | import { cookies } from "next/headers"; 3 | 4 | export async function createClient() { 5 | const cookieStore = await cookies(); 6 | 7 | return createServerClient( 8 | process.env.NEXT_PUBLIC_SUPABASE_URL!, 9 | process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, 10 | { 11 | cookies: { 12 | getAll() { 13 | return cookieStore.getAll(); 14 | }, 15 | setAll(cookiesToSet) { 16 | try { 17 | cookiesToSet.forEach(({ name, value, options }) => 18 | cookieStore.set(name, value, options) 19 | ); 20 | } catch { 21 | // The `setAll` method was called from a Server Component. 22 | // This can be ignored if you have middleware refreshing 23 | // user sessions. 24 | } 25 | }, 26 | }, 27 | } 28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /src/components/navbar.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import { LogoutButton } from "./logout-button"; 3 | import { ProfileType } from "./profile-form"; 4 | 5 | interface NavbarProps { 6 | user?: ProfileType; 7 | } 8 | 9 | export const Navbar = ({ user }: NavbarProps) => { 10 | return ( 11 |
12 | 30 |
31 | ); 32 | }; 33 | -------------------------------------------------------------------------------- /public/globe.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/profile/page.tsx: -------------------------------------------------------------------------------- 1 | import { ProfileForm, ProfileType } from "@/components/profile-form"; 2 | import { createClient } from "@/lib/supabase/server"; 3 | import { redirect } from "next/navigation"; 4 | 5 | export default async function ProfilePage() { 6 | const supabase = await createClient(); 7 | 8 | const { 9 | data: { user }, 10 | } = await supabase.auth.getUser(); 11 | 12 | if (!user) { 13 | redirect("/auth/login"); 14 | } 15 | 16 | const { data: profile, error } = await supabase 17 | .from("profiles") 18 | .select("*") 19 | .eq("id", user.id) 20 | .single(); 21 | 22 | if (!profile || error) { 23 | redirect("/auth/login"); 24 | } 25 | 26 | return ( 27 |
28 |

Personaliza tu perfil

29 | 30 |
31 | ); 32 | } 33 | -------------------------------------------------------------------------------- /src/app/auth/sign-up-success/page.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Card, 3 | CardContent, 4 | CardDescription, 5 | CardHeader, 6 | CardTitle, 7 | } from '@/components/ui/card' 8 | 9 | export default function Page() { 10 | return ( 11 |
12 |
13 |
14 | 15 | 16 | Thank you for signing up! 17 | Check your email to confirm 18 | 19 | 20 |

21 | You've successfully signed up. Please check your email to confirm your account 22 | before signing in. 23 |

24 | 25 | 26 |
27 |
28 |
29 | ) 30 | } 31 | -------------------------------------------------------------------------------- /src/components/sidebar-features/online-users.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useOnlineUsers } from "@/context/online-users-context"; 4 | import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar"; 5 | 6 | export const OnlineUsers = () => { 7 | const { onlineUsers } = useOnlineUsers(); 8 | 9 | return ( 10 |
11 |
    12 | {Object.values(onlineUsers).map((presence) => ( 13 |
  • 14 | 15 | 16 | 17 | {presence.username.charAt(0)} 18 | 19 | 20 | {presence.username} 21 |
    • 22 | ))} 23 |
24 |
25 | ); 26 | }; 27 | -------------------------------------------------------------------------------- /src/app/auth/error/page.tsx: -------------------------------------------------------------------------------- 1 | import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' 2 | 3 | export default async function Page({ searchParams }: { searchParams: Promise<{ error: string }> }) { 4 | const params = await searchParams 5 | 6 | return ( 7 |
8 |
9 |
10 | 11 | 12 | Sorry, something went wrong. 13 | 14 | 15 | {params?.error ? ( 16 |

Code error: {params.error}

17 | ) : ( 18 |

An unspecified error occurred.

19 | )} 20 | 21 | 22 |
23 |
24 |
25 | ) 26 | } 27 | -------------------------------------------------------------------------------- /src/components/ui/input.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "@/lib/utils" 4 | 5 | function Input({ className, type, ...props }: React.ComponentProps<"input">) { 6 | return ( 7 | 18 | ) 19 | } 20 | 21 | export { Input } 22 | -------------------------------------------------------------------------------- /src/data/contribuyentes.ts: -------------------------------------------------------------------------------- 1 | export const contribuyentes = [ 2 | { 3 | name: "Sofía Grijalva", 4 | github: "https://github.com/condorcoders", 5 | avatar: "https://avatars.githubusercontent.com/u/123217980?v=4", 6 | }, 7 | { 8 | name: "ElSantana", 9 | github: "https://github.com/ElSantanax", 10 | avatar: "https://avatars.githubusercontent.com/u/75258412?v=4", 11 | }, 12 | { 13 | name: "EduardoMC", 14 | github: "https://github.com/condorcoders", 15 | avatar: "https://avatars.githubusercontent.com/u/123217980?v=4", 16 | }, 17 | { 18 | name: "El Escarabajo", 19 | github: "https://github.com/condorcoders", 20 | avatar: "https://avatars.githubusercontent.com/u/123217980?v=4", 21 | }, 22 | { 23 | name: "EduJafet", 24 | github: "https://github.com/condorcoders", 25 | avatar: "https://avatars.githubusercontent.com/u/123217980?v=4", 26 | }, 27 | { 28 | name: "Mitch", 29 | github: "https://github.com/condorcoders", 30 | avatar: "https://avatars.githubusercontent.com/u/123217980?v=4", 31 | }, 32 | ]; 33 | -------------------------------------------------------------------------------- /src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Geist, Geist_Mono, Jersey_10 } from "next/font/google"; 3 | import "./globals.css"; 4 | 5 | const geistSans = Geist({ 6 | variable: "--font-geist-sans", 7 | subsets: ["latin", "latin-ext"], 8 | }); 9 | 10 | const geistMono = Geist_Mono({ 11 | variable: "--font-geist-mono", 12 | subsets: ["latin", "latin-ext"], 13 | }); 14 | 15 | const jersey = Jersey_10({ 16 | variable: "--font-jersey", 17 | weight: ["400"], 18 | subsets: ["latin", "latin-ext"], 19 | }); 20 | 21 | export const metadata: Metadata = { 22 | title: "CondorCoders Café Virtual", 23 | description: "Virtual café experience with real-time chat and gaming", 24 | }; 25 | 26 | export default function RootLayout({ 27 | children, 28 | }: Readonly<{ 29 | children: React.ReactNode; 30 | }>) { 31 | return ( 32 | 33 | 36 | {children} 37 | 38 | 39 | ); 40 | } 41 | -------------------------------------------------------------------------------- /src/app/auth/confirm/route.ts: -------------------------------------------------------------------------------- 1 | import { createClient } from '@/lib/supabase/server' 2 | import { type EmailOtpType } from '@supabase/supabase-js' 3 | import { redirect } from 'next/navigation' 4 | import { type NextRequest } from 'next/server' 5 | 6 | export async function GET(request: NextRequest) { 7 | const { searchParams } = new URL(request.url) 8 | const token_hash = searchParams.get('token_hash') 9 | const type = searchParams.get('type') as EmailOtpType | null 10 | const next = searchParams.get('next') ?? '/' 11 | 12 | if (token_hash && type) { 13 | const supabase = await createClient() 14 | 15 | const { error } = await supabase.auth.verifyOtp({ 16 | type, 17 | token_hash, 18 | }) 19 | if (!error) { 20 | // redirect user to specified redirect URL or root of app 21 | redirect(next) 22 | } else { 23 | // redirect the user to an error page with some instructions 24 | redirect(`/auth/error?error=${error?.message}`) 25 | } 26 | } 27 | 28 | // redirect the user to an error page with some instructions 29 | redirect(`/auth/error?error=No token hash or type`) 30 | } 31 | -------------------------------------------------------------------------------- /src/components/login-button.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { createClient } from "@/lib/supabase/client"; 4 | import { useState } from "react"; 5 | import { Button } from "./ui/button"; 6 | 7 | export const LoginButton = () => { 8 | const [error, setError] = useState(null); 9 | const [isLoading, setIsLoading] = useState(false); 10 | 11 | const handleSocialLogin = async () => { 12 | const supabase = createClient(); 13 | setIsLoading(true); 14 | setError(null); 15 | 16 | try { 17 | const { error } = await supabase.auth.signInWithOAuth({ 18 | provider: "twitch", 19 | options: { 20 | redirectTo: `${window.location.origin}/auth/oauth?next=/cafe`, 21 | }, 22 | }); 23 | 24 | if (error) throw error; 25 | } catch (error: unknown) { 26 | setError(error instanceof Error ? error.message : "An error occurred"); 27 | setIsLoading(false); 28 | } 29 | }; 30 | return ( 31 | 35 | ); 36 | }; 37 | -------------------------------------------------------------------------------- /src/components/sidebar-features/general-chat.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { createClient } from "@/lib/supabase/client"; 4 | import { useEffect, useState } from "react"; 5 | import { ChatJoin } from "../chat-join"; 6 | import { ProfileType } from "../profile-form"; 7 | 8 | interface MessageType { 9 | id: string; 10 | content: string; 11 | username: string; 12 | created_at: string; 13 | } 14 | 15 | const ROOM_NAME = "general-chat"; 16 | 17 | interface GeneralChatProps { 18 | user: ProfileType; 19 | } 20 | 21 | export const GeneralChat = ({ user }: GeneralChatProps) => { 22 | const supabase = createClient(); 23 | const [messages, setMessages] = useState(null); 24 | 25 | useEffect(() => { 26 | const fetchMessages = async () => { 27 | const { data } = await supabase 28 | .from("messages") 29 | .select("*") 30 | .eq("room", ROOM_NAME); 31 | setMessages(data); 32 | }; 33 | fetchMessages(); 34 | }, [supabase]); 35 | 36 | return ( 37 | ({ 41 | id: message.id, 42 | content: message.content, 43 | user: { name: message.username }, 44 | createdAt: message.created_at, 45 | }))} 46 | /> 47 | ); 48 | }; 49 | -------------------------------------------------------------------------------- /public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/ui/avatar.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as AvatarPrimitive from "@radix-ui/react-avatar" 5 | 6 | import { cn } from "@/lib/utils" 7 | 8 | function Avatar({ 9 | className, 10 | ...props 11 | }: React.ComponentProps) { 12 | return ( 13 | 21 | ) 22 | } 23 | 24 | function AvatarImage({ 25 | className, 26 | ...props 27 | }: React.ComponentProps) { 28 | return ( 29 | 34 | ) 35 | } 36 | 37 | function AvatarFallback({ 38 | className, 39 | ...props 40 | }: React.ComponentProps) { 41 | return ( 42 | 50 | ) 51 | } 52 | 53 | export { Avatar, AvatarImage, AvatarFallback } 54 | -------------------------------------------------------------------------------- /src/app/auth/oauth/route.ts: -------------------------------------------------------------------------------- 1 | import { NextResponse } from "next/server"; 2 | // The client you created from the Server-Side Auth instructions 3 | import { createClient } from "@/lib/supabase/server"; 4 | 5 | export async function GET(request: Request) { 6 | const { searchParams, origin } = new URL(request.url); 7 | const code = searchParams.get("code"); 8 | // if "next" is in param, use it as the redirect URL 9 | let next = searchParams.get("next") ?? "/"; 10 | if (!next.startsWith("/")) { 11 | // if "next" is not a relative URL, use the default 12 | next = "/"; 13 | } 14 | 15 | if (code) { 16 | const supabase = await createClient(); 17 | const { error } = await supabase.auth.exchangeCodeForSession(code); 18 | if (!error) { 19 | const forwardedHost = request.headers.get("x-forwarded-host"); // original origin before load balancer 20 | const isLocalEnv = process.env.NODE_ENV === "development"; 21 | if (isLocalEnv) { 22 | // we can be sure that there is no load balancer in between, so no need to watch for X-Forwarded-Host 23 | return NextResponse.redirect(`${origin}${next}`); 24 | } else if (forwardedHost) { 25 | return NextResponse.redirect(`https://${forwardedHost}${next}`); 26 | } else { 27 | return NextResponse.redirect(`${origin}${next}`); 28 | } 29 | } 30 | } 31 | 32 | // return the user to an error page with instructions 33 | return NextResponse.redirect(`${origin}/auth/error`); 34 | } 35 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cafe", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@hookform/resolvers": "^5.1.1", 13 | "@radix-ui/react-avatar": "^1.1.10", 14 | "@radix-ui/react-dialog": "^1.1.14", 15 | "@radix-ui/react-dropdown-menu": "^2.1.15", 16 | "@radix-ui/react-label": "^2.1.3", 17 | "@radix-ui/react-radio-group": "^1.3.7", 18 | "@radix-ui/react-separator": "^1.1.7", 19 | "@radix-ui/react-slot": "^1.2.0", 20 | "@radix-ui/react-tooltip": "^1.2.7", 21 | "@supabase/ssr": "^0.6.1", 22 | "@supabase/supabase-js": "^2.49.8", 23 | "class-variance-authority": "^0.7.1", 24 | "clsx": "^2.1.1", 25 | "install": "^0.13.0", 26 | "lucide-react": "^0.487.0", 27 | "matter-js": "^0.20.0", 28 | "next": "15.3.0", 29 | "phaser": "^3.90.0", 30 | "pnpm": "^10.15.0", 31 | "react": "^19.0.0", 32 | "react-dom": "^19.0.0", 33 | "react-hook-form": "^7.60.0", 34 | "tailwind-merge": "^3.2.0", 35 | "tw-animate-css": "^1.2.5", 36 | "zod": "^3.25.74" 37 | }, 38 | "devDependencies": { 39 | "@eslint/eslintrc": "^3", 40 | "@tailwindcss/postcss": "^4", 41 | "@types/matter-js": "^0.19.8", 42 | "@types/node": "^20", 43 | "@types/react": "^19", 44 | "@types/react-dom": "^19", 45 | "eslint": "^9", 46 | "eslint-config-next": "15.3.0", 47 | "tailwindcss": "^4", 48 | "typescript": "^5" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/components/chat-message.tsx: -------------------------------------------------------------------------------- 1 | import { cn } from '@/lib/utils' 2 | import type { ChatMessage } from '@/hooks/use-realtime-chat' 3 | 4 | interface ChatMessageItemProps { 5 | message: ChatMessage 6 | isOwnMessage: boolean 7 | showHeader: boolean 8 | } 9 | 10 | export const ChatMessageItem = ({ message, isOwnMessage, showHeader }: ChatMessageItemProps) => { 11 | return ( 12 |
13 |
18 | {showHeader && ( 19 |
24 | {message.user.name} 25 | 26 | {new Date(message.createdAt).toLocaleTimeString('en-US', { 27 | hour: '2-digit', 28 | minute: '2-digit', 29 | hour12: true, 30 | })} 31 | 32 |
33 | )} 34 |
40 | {message.content} 41 |
42 |
43 |
44 | ) 45 | } 46 | -------------------------------------------------------------------------------- /src/app/cafe/page.tsx: -------------------------------------------------------------------------------- 1 | import { AppMenu } from "@/components/app-menu"; 2 | import { Game } from "@/components/game"; 3 | import { EmoteProvider } from "@/context/emote-context"; 4 | import { OnlineUsersProvider } from "@/context/online-users-context"; 5 | import { createClient } from "@/lib/supabase/server"; 6 | import { redirect } from "next/navigation"; 7 | 8 | export default async function CafePage() { 9 | const supabase = await createClient(); 10 | 11 | const userId = await supabase.auth 12 | .getUser() 13 | .then(({ data }) => data.user?.id); 14 | 15 | // COMENTADO: Verificacion de perfil deshabilitada para pruebas locales 16 | const { data: profile, error } = await supabase 17 | .from("profiles") 18 | .select("*") 19 | .eq("id", userId) 20 | .single(); 21 | 22 | if (error) { 23 | console.error("Error fetching profile:", error); 24 | redirect("/auth/login"); 25 | } 26 | 27 | return ( 28 | 29 | 30 |
31 |
32 | 33 |
34 | 42 |
43 |
44 |
45 | 46 | 47 | ); 48 | } 49 | -------------------------------------------------------------------------------- /src/components/ui/radio-group.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as RadioGroupPrimitive from "@radix-ui/react-radio-group" 5 | import { CircleIcon } from "lucide-react" 6 | 7 | import { cn } from "@/lib/utils" 8 | 9 | function RadioGroup({ 10 | className, 11 | ...props 12 | }: React.ComponentProps) { 13 | return ( 14 | 19 | ) 20 | } 21 | 22 | function RadioGroupItem({ 23 | className, 24 | ...props 25 | }: React.ComponentProps) { 26 | return ( 27 | 35 | 39 | 40 | 41 | 42 | ) 43 | } 44 | 45 | export { RadioGroup, RadioGroupItem } 46 | -------------------------------------------------------------------------------- /src/components/login-form.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { cn } from "@/lib/utils"; 4 | import { createClient } from "@/lib/supabase/client"; 5 | import { Button } from "@/components/ui/button"; 6 | import { 7 | Card, 8 | CardContent, 9 | CardDescription, 10 | CardHeader, 11 | CardTitle, 12 | } from "@/components/ui/card"; 13 | import { useState } from "react"; 14 | 15 | export function LoginForm({ 16 | className, 17 | ...props 18 | }: React.ComponentPropsWithoutRef<"div">) { 19 | const [error, setError] = useState(null); 20 | const [isLoading, setIsLoading] = useState(false); 21 | 22 | const handleSocialLogin = async (e: React.FormEvent) => { 23 | e.preventDefault(); 24 | const supabase = createClient(); 25 | setIsLoading(true); 26 | setError(null); 27 | 28 | try { 29 | const { error } = await supabase.auth.signInWithOAuth({ 30 | provider: "twitch", 31 | options: { 32 | redirectTo: `${window.location.origin}/auth/oauth?next=/cafe`, 33 | }, 34 | }); 35 | 36 | if (error) throw error; 37 | } catch (error: unknown) { 38 | setError(error instanceof Error ? error.message : "An error occurred"); 39 | setIsLoading(false); 40 | } 41 | }; 42 | 43 | return ( 44 |
45 | 46 | 47 | Welcome! 48 | Sign in to your account to continue 49 | 50 | 51 |
52 |
53 | {error &&

{error}

} 54 | 57 |
58 |
59 | 60 | 61 |
62 | ); 63 | } 64 | -------------------------------------------------------------------------------- /src/components/ui/tooltip.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as TooltipPrimitive from "@radix-ui/react-tooltip" 5 | 6 | import { cn } from "@/lib/utils" 7 | 8 | function TooltipProvider({ 9 | delayDuration = 0, 10 | ...props 11 | }: React.ComponentProps) { 12 | return ( 13 | 18 | ) 19 | } 20 | 21 | function Tooltip({ 22 | ...props 23 | }: React.ComponentProps) { 24 | return ( 25 | 26 | 27 | 28 | ) 29 | } 30 | 31 | function TooltipTrigger({ 32 | ...props 33 | }: React.ComponentProps) { 34 | return 35 | } 36 | 37 | function TooltipContent({ 38 | className, 39 | sideOffset = 0, 40 | children, 41 | ...props 42 | }: React.ComponentProps) { 43 | return ( 44 | 45 | 54 | {children} 55 | 56 | 57 | 58 | ) 59 | } 60 | 61 | export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } 62 | -------------------------------------------------------------------------------- /src/hooks/use-realtime-chat.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { createClient } from "@/lib/supabase/client"; 4 | import { useCallback, useEffect, useState } from "react"; 5 | 6 | interface UseRealtimeChatProps { 7 | roomName: string; 8 | username: string; 9 | } 10 | 11 | export interface ChatMessage { 12 | id: string; 13 | content: string; 14 | user: { 15 | name: string; 16 | }; 17 | createdAt: string; 18 | } 19 | 20 | const EVENT_MESSAGE_TYPE = "message"; 21 | 22 | export function useRealtimeChat({ roomName, username }: UseRealtimeChatProps) { 23 | const supabase = createClient(); 24 | const [messages, setMessages] = useState([]); 25 | const [channel, setChannel] = useState | null>(null); 28 | const [isConnected, setIsConnected] = useState(false); 29 | 30 | // Se renderiza la pagina, y se conecta al channale de supabase 31 | useEffect(() => { 32 | const newChannel = supabase.channel(roomName); 33 | 34 | newChannel 35 | .on("broadcast", { event: EVENT_MESSAGE_TYPE }, (payload) => { 36 | setMessages((current) => [...current, payload.payload as ChatMessage]); 37 | }) 38 | .subscribe(async (status) => { 39 | if (status === "SUBSCRIBED") { 40 | setIsConnected(true); 41 | } 42 | }); 43 | 44 | setChannel(newChannel); 45 | 46 | return () => { 47 | supabase.removeChannel(newChannel); 48 | }; 49 | }, [roomName, username, supabase]); 50 | 51 | const sendMessage = useCallback( 52 | async (content: string) => { 53 | if (!channel || !isConnected) return; 54 | 55 | const message: ChatMessage = { 56 | id: crypto.randomUUID(), 57 | content, 58 | user: { 59 | name: username, 60 | }, 61 | createdAt: new Date().toISOString(), 62 | }; 63 | 64 | // Update local state immediately for the sender 65 | setMessages((current) => [...current, message]); 66 | 67 | await channel.send({ 68 | type: "broadcast", 69 | event: EVENT_MESSAGE_TYPE, 70 | payload: message, 71 | }); 72 | }, 73 | [channel, isConnected, username] 74 | ); 75 | 76 | return { messages, sendMessage, isConnected }; 77 | } 78 | -------------------------------------------------------------------------------- /src/components/sidebar-features/pomodoro.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useEffect, useState } from "react"; 4 | import { Button } from "../ui/button"; 5 | 6 | const POMODORO_TIME = 25 * 60; 7 | const SHORT_BREAK_TIME = 10 * 60; 8 | 9 | const formatTime = (seconds: number) => { 10 | const minutes = Math.floor(seconds / 60); 11 | const secs = seconds % 60; 12 | // Ejemplo: 05:09 13 | return `${minutes.toString().padStart(2, "0")}:${secs 14 | .toString() 15 | .padStart(2, "0")}`; 16 | }; 17 | 18 | export const Pomodoro = () => { 19 | const [time, setTime] = useState(POMODORO_TIME); 20 | const [isRunning, setIsRunning] = useState(false); 21 | const [isBreak, setIsBreak] = useState(false); 22 | 23 | useEffect(() => { 24 | if (!isRunning) return; 25 | 26 | const audio = new Audio("/music/notification.wav"); 27 | 28 | if (time === 0) { 29 | if (isBreak) { 30 | setIsBreak(false); 31 | setTime(POMODORO_TIME); 32 | } else { 33 | setIsBreak(true); 34 | setTime(SHORT_BREAK_TIME); 35 | } 36 | } 37 | 38 | // play notification sound 39 | if (time === 1) { 40 | audio.play().catch(console.error); 41 | } 42 | 43 | const interval = setInterval(() => { 44 | setTime((prev) => prev - 1); 45 | }, 1000); 46 | return () => clearInterval(interval); 47 | }, [isRunning, time, isBreak]); 48 | 49 | return ( 50 |
51 |

{isBreak ? "Descanso ☕" : "Hora de Trabajar ⏳"}

52 | 53 |
54 | 61 | 72 |
73 |
74 | ); 75 | }; 76 | -------------------------------------------------------------------------------- /src/components/sidebar-features/music-player.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { SkipBack, SkipForward } from "lucide-react"; 4 | import { useEffect, useRef, useState } from "react"; 5 | import { Button } from "../ui/button"; 6 | 7 | const playlist = [ 8 | { id: 1, title: "Pixel Dreams", url: "/music/Pixel-Dreams.mp3" }, 9 | { id: 2, title: "Pixel Dreams Remix", url: "/music/Pixel-Dreams-Remix.mp3" }, 10 | ]; 11 | 12 | export const MusicPlayer = () => { 13 | const [currentTrack, setCurrentTrack] = useState(0); 14 | const [isPlaying, setIsPlaying] = useState(false); 15 | const audioRef = useRef(null); 16 | 17 | // Handle track changes 18 | useEffect(() => { 19 | const audio = audioRef.current; 20 | if (!audio) return; 21 | 22 | // Update the audio source 23 | audio.src = playlist[currentTrack].url; 24 | audio.load(); // Reload the audio element with new source 25 | 26 | // If music was playing, start the new track from beginning 27 | if (isPlaying) { 28 | audio.currentTime = 0; 29 | audio.play().catch(console.error); 30 | } 31 | }, [currentTrack, isPlaying]); 32 | 33 | const handlePrevious = () => { 34 | setCurrentTrack((prev) => (prev > 0 ? prev - 1 : playlist.length - 1)); 35 | }; 36 | 37 | const handleNext = () => { 38 | setCurrentTrack((prev) => (prev < playlist.length - 1 ? prev + 1 : 0)); 39 | }; 40 | 41 | const handlePlay = () => { 42 | setIsPlaying(true); 43 | }; 44 | 45 | const handlePause = () => { 46 | setIsPlaying(false); 47 | }; 48 | 49 | return ( 50 |
51 |

{playlist[currentTrack].title}

52 | 63 |
64 | 67 | 70 |
71 |
72 | ); 73 | }; 74 | -------------------------------------------------------------------------------- /src/components/ui/card.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "@/lib/utils" 4 | 5 | function Card({ className, ...props }: React.ComponentProps<"div">) { 6 | return ( 7 |
15 | ) 16 | } 17 | 18 | function CardHeader({ className, ...props }: React.ComponentProps<"div">) { 19 | return ( 20 |
28 | ) 29 | } 30 | 31 | function CardTitle({ className, ...props }: React.ComponentProps<"div">) { 32 | return ( 33 |
38 | ) 39 | } 40 | 41 | function CardDescription({ className, ...props }: React.ComponentProps<"div">) { 42 | return ( 43 |
48 | ) 49 | } 50 | 51 | function CardAction({ className, ...props }: React.ComponentProps<"div">) { 52 | return ( 53 |
61 | ) 62 | } 63 | 64 | function CardContent({ className, ...props }: React.ComponentProps<"div">) { 65 | return ( 66 |
71 | ) 72 | } 73 | 74 | function CardFooter({ className, ...props }: React.ComponentProps<"div">) { 75 | return ( 76 |
81 | ) 82 | } 83 | 84 | export { 85 | Card, 86 | CardHeader, 87 | CardFooter, 88 | CardTitle, 89 | CardAction, 90 | CardDescription, 91 | CardContent, 92 | } 93 | -------------------------------------------------------------------------------- /src/components/ui/button.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Slot } from "@radix-ui/react-slot"; 3 | import { cva, type VariantProps } from "class-variance-authority"; 4 | 5 | import { cn } from "@/lib/utils"; 6 | 7 | const buttonVariants = cva( 8 | "inline-flex hover:cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", 9 | { 10 | variants: { 11 | variant: { 12 | default: 13 | "bg-purple text-primary-foreground shadow-xs hover:bg-primary/90", 14 | destructive: 15 | "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", 16 | outline: 17 | "border shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50", 18 | secondary: 19 | "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80", 20 | ghost: 21 | "hover:bg-accent hover:cursor-pointer hover:text-accent-foreground dark:hover:bg-accent/50", 22 | link: "text-primary underline-offset-4 hover:underline", 23 | }, 24 | size: { 25 | default: "h-9 px-4 py-2 has-[>svg]:px-3", 26 | sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5", 27 | lg: "h-10 rounded-md px-6 has-[>svg]:px-4", 28 | icon: "size-9", 29 | }, 30 | }, 31 | defaultVariants: { 32 | variant: "default", 33 | size: "default", 34 | }, 35 | } 36 | ); 37 | 38 | function Button({ 39 | className, 40 | variant, 41 | size, 42 | asChild = false, 43 | ...props 44 | }: React.ComponentProps<"button"> & 45 | VariantProps & { 46 | asChild?: boolean; 47 | }) { 48 | const Comp = asChild ? Slot : "button"; 49 | 50 | return ( 51 | 56 | ); 57 | } 58 | 59 | export { Button, buttonVariants }; 60 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ☕ CondorCoders Café Virtual 2 | 3 | **Café Virtual** busca convertirse en un espacio de networking virtual, similar a [Gather Town](https://www.gather.town/), donde los miembros de la comunidad puedan interactuar a través de avatares, trabajar juntos en tiempo real y chatear. 4 | 5 | --- 6 | 7 | ## Para trabajar en el proyecto 8 | 9 | Crea un proyecto en Supabase y agrega lo siguiente en un archivo `.env` 10 | 11 | ```.env 12 | NEXT_PUBLIC_SUPABASE_URL= 13 | NEXT_PUBLIC_SUPABASE_ANON_KEY= 14 | ``` 15 | 16 | ## Funcionalidades Implementadas 17 | 18 | ### Autenticación 19 | 20 | 🔗 [https://supabase.com/docs/guides/auth/social-login/auth-twitch](https://supabase.com/docs/guides/auth/social-login/auth-twitch) 21 | 22 | - Inicio de sesión con Twitch 23 | - Persistencia de sesión. 24 | 25 | ## Phaser 26 | 27 | ### Tutorial 28 | 29 | Empezamos instalando y haciendo el tutorial de phaser para familiarizarnos con el software. 30 | 🔗 [https://docs.phaser.io/phaser/getting-started/installation](https://docs.phaser.io/phaser/getting-started/installation) 31 | 🔗 [https://docs.phaser.io/phaser/getting-started/making-your-first-phaser-game](https://docs.phaser.io/phaser/getting-started/making-your-first-phaser-game) 32 | 33 | ### Creación de Mapa 34 | 35 | Creamos un mapa con Tiled y recursos gratuitos para los assets. 36 | 🔗 [Tiled - Software para dibujar mapa](https://www.mapeditor.org/) 37 | 🔗 [Assets](https://itch.io/game-assets/tag-top-down) 38 | 🔗 [Los Assets que usamos](https://gif-superretroworld.itch.io/interior-pack) 39 | 40 | ### Añadimos colisiones 41 | 42 | Seguimos la siguiente documentación para agregar colisiones 43 | 🔗 [Buscar "Tileset Editor"](https://medium.com/@michaelwesthadley/modular-game-worlds-in-phaser-3-tilemaps-1-958fc7e6bbd6) 44 | 45 | ### Creamos y añadimos un nuevo personaje 46 | 47 | 🔗 [Generador de Personaje](https://liberatedpixelcup.github.io/Universal-LPC-Spritesheet-Character-Generator/#?body=Body_color_light&head=Human_male_light) 48 | 49 | ### Usuarios en Tiempo Real 50 | 51 | - implementamos `use-realtime-player` para cargar mas jugadores en tiempo real 52 | 53 | ### Onboarding 54 | 55 | - `profile-form` con react hook y zod para actualizar indormación de perfil en la base de datos 56 | 57 | ### Youtube 58 | 59 | 🎥 NextJS + Supabase UI Authentication -> [https://youtu.be/EvMYKrBaAJQ?si=bQwNfA0J9979Ilkr](https://youtu.be/EvMYKrBaAJQ?si=bQwNfA0J9979Ilkr) 60 | 🎥 NextJS + Supabase Realtime -> [https://youtu.be/iJf1mjYBy8k?si=-Gnh4BgUoQiMW97K](https://youtu.be/iJf1mjYBy8k?si=-Gnh4BgUoQiMW97K) 61 | 🎥 Chat en tiempo real con Supabase UI -> [https://youtu.be/CIseskgH6tY?si=0mPEiJW1sESO19gs](https://youtu.be/CIseskgH6tY?si=0mPEiJW1sESO19gs) 62 | -------------------------------------------------------------------------------- /src/components/update-password-form.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { cn } from '@/lib/utils' 4 | import { createClient } from '@/lib/supabase/client' 5 | import { Button } from '@/components/ui/button' 6 | import { 7 | Card, 8 | CardContent, 9 | CardDescription, 10 | CardHeader, 11 | CardTitle, 12 | } from '@/components/ui/card' 13 | import { Input } from '@/components/ui/input' 14 | import { Label } from '@/components/ui/label' 15 | import { useRouter } from 'next/navigation' 16 | import { useState } from 'react' 17 | 18 | export function UpdatePasswordForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) { 19 | const [password, setPassword] = useState('') 20 | const [error, setError] = useState(null) 21 | const [isLoading, setIsLoading] = useState(false) 22 | const router = useRouter() 23 | 24 | const handleForgotPassword = async (e: React.FormEvent) => { 25 | e.preventDefault() 26 | const supabase = createClient() 27 | setIsLoading(true) 28 | setError(null) 29 | 30 | try { 31 | const { error } = await supabase.auth.updateUser({ password }) 32 | if (error) throw error 33 | // Update this route to redirect to an authenticated route. The user already has an active session. 34 | router.push('/protected') 35 | } catch (error: unknown) { 36 | setError(error instanceof Error ? error.message : 'An error occurred') 37 | } finally { 38 | setIsLoading(false) 39 | } 40 | } 41 | 42 | return ( 43 |
44 | 45 | 46 | Reset Your Password 47 | Please enter your new password below. 48 | 49 | 50 |
51 |
52 |
53 | 54 | setPassword(e.target.value)} 61 | /> 62 |
63 | {error &&

{error}

} 64 | 67 |
68 |
69 | 70 | 71 |
72 | ) 73 | } 74 | -------------------------------------------------------------------------------- /src/components/forgot-password-form.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { cn } from '@/lib/utils' 4 | import { createClient } from '@/lib/supabase/client' 5 | import { Button } from '@/components/ui/button' 6 | import { 7 | Card, 8 | CardContent, 9 | CardDescription, 10 | CardHeader, 11 | CardTitle, 12 | } from '@/components/ui/card' 13 | import { Input } from '@/components/ui/input' 14 | import { Label } from '@/components/ui/label' 15 | import Link from 'next/link' 16 | import { useState } from 'react' 17 | 18 | export function ForgotPasswordForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) { 19 | const [email, setEmail] = useState('') 20 | const [error, setError] = useState(null) 21 | const [success, setSuccess] = useState(false) 22 | const [isLoading, setIsLoading] = useState(false) 23 | 24 | const handleForgotPassword = async (e: React.FormEvent) => { 25 | e.preventDefault() 26 | const supabase = createClient() 27 | setIsLoading(true) 28 | setError(null) 29 | 30 | try { 31 | // The url which will be included in the email. This URL needs to be configured in your redirect URLs in the Supabase dashboard at https://supabase.com/dashboard/project/_/auth/url-configuration 32 | const { error } = await supabase.auth.resetPasswordForEmail(email, { 33 | redirectTo: `${window.location.origin}/auth/update-password`, 34 | }) 35 | if (error) throw error 36 | setSuccess(true) 37 | } catch (error: unknown) { 38 | setError(error instanceof Error ? error.message : 'An error occurred') 39 | } finally { 40 | setIsLoading(false) 41 | } 42 | } 43 | 44 | return ( 45 |
46 | {success ? ( 47 | 48 | 49 | Check Your Email 50 | Password reset instructions sent 51 | 52 | 53 |

54 | If you registered using your email and password, you will receive a password reset 55 | email. 56 |

57 | 58 | 59 | ) : ( 60 | 61 | 62 | Reset Your Password 63 | 64 | Type in your email and we'll send you a link to reset your password 65 | 66 | 67 | 68 |
69 |
70 |
71 | 72 | setEmail(e.target.value)} 79 | /> 80 |
81 | {error &&

{error}

} 82 | 85 |
86 |
87 | Already have an account?{' '} 88 | 89 | Login 90 | 91 |
92 |
93 | 94 | 95 | )} 96 |
97 | ) 98 | } 99 | -------------------------------------------------------------------------------- /doc/menu-implementacion.md: -------------------------------------------------------------------------------- 1 | # Implementación del Menú Desplegable 2 | 3 | ## Visión General 4 | 5 | El componente `AppMenu` implementa un menú desplegable y barra principal ajustada a distintos dispositivos, logrando tanto sincronización precisa de dimensiones como adaptación visual responsive. 6 | 7 | ## Estructura del Componente 8 | 9 | ### Estado y Referencias 10 | ```typescript 11 | const [menuWidth, setMenuWidth] = useState(0); 12 | const menuRef = useRef(null); 13 | ``` 14 | 15 | ### Flujo de Funcionamiento 16 | 1. **Inicialización**: 17 | - Se crea una referencia `menuRef` para acceder al nodo del DOM del menú principal. 18 | - Se inicializa `menuWidth` en 0. 19 | 2. **Observación de Cambios**: 20 | - Se configura un `ResizeObserver` que monitorea cambios en el ancho del menú principal. 21 | - Cuando ocurre un cambio de tamaño, actualiza `menuWidth` con el nuevo valor. 22 | 3. **Aplicación del Ancho**: 23 | - El valor de `menuWidth` se aplica al menú desplegable mediante un estilo en línea. 24 | - Se utiliza `overflow-hidden` para contener el contenido dentro del ancho establecido. 25 | 26 | ## Implementación Técnica 27 | 28 | ### Código Clave 29 | ```tsx 30 | // 1. Configuración inicial 31 | const [menuWidth, setMenuWidth] = useState(0); 32 | const menuRef = useRef(null); 33 | 34 | // 2. Observación de cambios de tamaño 35 | useEffect(() => { 36 | const menuNode = menuRef.current; 37 | if (!menuNode) return; 38 | 39 | const observer = new ResizeObserver(entries => { 40 | for (let entry of entries) { 41 | setMenuWidth(entry.contentRect.width); 42 | } 43 | }); 44 | observer.observe(menuNode); 45 | return () => observer.disconnect(); 46 | }, []); 47 | 48 | // 3. Uso en el JSX 49 |
53 | {activeMenuItem && ( 54 |
58 | {/* Contenido del menú desplegable */} 59 |
60 | )} 61 |
62 | ``` 63 | 64 | ## Adaptación Visual Responsive 65 | 66 | - **Menú principal (barra inferior)**: 67 | - **En dispositivos móviles:** 68 | - Ocupa el 100% del ancho (`w-full`). 69 | - No tiene bordes redondeados (`rounded-none`), para lucir pegado al borde del dispositivo. 70 | - **En escritorio** (`sm:`): 71 | - Presenta bordes redondeados completos (`rounded-2xl`). 72 | - Ancho automático y posición centrada o alineada según corresponda. 73 | 74 | - **Ventanas emergentes (modales del menú, chat, online, perfil, etc):** 75 | - **En dispositivos móviles:** 76 | - Solo las esquinas superiores son redondeadas (`rounded-t-2xl rounded-b-none`). 77 | - Las esquinas inferiores quedan cuadradas. 78 | - **En escritorio** (`sm:`): 79 | - Todas las esquinas redondeadas (`rounded-2xl`). 80 | 81 | Esto se logra mediante las utilidades responsivas de Tailwind CSS directamente en los componentes principales. 82 | 83 | ## Ventajas de la Implementación 84 | 85 | 1. **Respuesta en Tiempo Real**: El menú se ajusta automáticamente a los cambios de tamaño. 86 | 2. **Precisión**: Usa las medidas reales del DOM para garantizar una alineación perfecta. 87 | 3. **Eficiencia**: `ResizeObserver` es más eficiente que escuchar eventos de redimensión de ventana. 88 | 4. **Mantenibilidad**: La lógica y el estilo están encapsulados y son fáciles de modificar. 89 | 90 | ## Consideraciones de Uso 91 | 92 | - El menú desplegable se posiciona de forma absoluta respecto a su contenedor y utiliza `z-index` adecuado. 93 | - El `ResizeObserver` se limpia automáticamente al desmontar el componente. 94 | - El uso de clases responsivas de Tailwind facilita la adaptación a cualquier dispositivo y mejora la experiencia móvil. 95 | 96 | ## Posibles Mejoras en las que los views pueden participar. 97 | 98 | 1. **Transiciones Suaves**: Agregar transiciones CSS para animar los cambios de tamaño. 99 | 2. **Posicionamiento Personalizable**: Permitir diferentes posiciones (arriba, abajo, izquierda, derecha). 100 | 3. **Control de Desbordamiento**: Manejo mejorado para contenido que exceda la altura máxima. -------------------------------------------------------------------------------- /src/components/sign-up-form.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { cn } from "@/lib/utils"; 4 | import { createClient } from "@/lib/supabase/client"; 5 | import { Button } from "@/components/ui/button"; 6 | import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; 7 | import { Input } from "@/components/ui/input"; 8 | import { Label } from "@/components/ui/label"; 9 | import Link from "next/link"; 10 | import { useRouter } from "next/navigation"; 11 | import { useState } from "react"; 12 | 13 | export function SignUpForm({ 14 | className, 15 | ...props 16 | }: React.ComponentPropsWithoutRef<"div">) { 17 | const [email, setEmail] = useState(""); 18 | const [password, setPassword] = useState(""); 19 | const [repeatPassword, setRepeatPassword] = useState(""); 20 | const [error, setError] = useState(null); 21 | const [isLoading, setIsLoading] = useState(false); 22 | const router = useRouter(); 23 | 24 | const handleSignUp = async (e: React.FormEvent) => { 25 | e.preventDefault(); 26 | const supabase = createClient(); 27 | setIsLoading(true); 28 | setError(null); 29 | 30 | if (password !== repeatPassword) { 31 | setError("Passwords do not match"); 32 | setIsLoading(false); 33 | return; 34 | } 35 | 36 | try { 37 | const { error } = await supabase.auth.signUp({ 38 | email, 39 | password, 40 | options: { 41 | emailRedirectTo: `${window.location.origin}/protected`, 42 | }, 43 | }); 44 | if (error) throw error; 45 | router.push("/auth/sign-up-success"); 46 | } catch (error: unknown) { 47 | setError(error instanceof Error ? error.message : "An error occurred"); 48 | } finally { 49 | setIsLoading(false); 50 | } 51 | }; 52 | 53 | return ( 54 |
55 | 56 | 57 | Crea una cuenta 58 | 59 | 60 |
61 |
62 |
63 | 64 | setEmail(e.target.value)} 71 | /> 72 |
73 |
74 |
75 | 76 |
77 | setPassword(e.target.value)} 83 | /> 84 |
85 |
86 |
87 | 88 |
89 | setRepeatPassword(e.target.value)} 95 | /> 96 |
97 | {error &&

{error}

} 98 | 101 |
102 |
103 | Already have an account?{" "} 104 | 105 | Login 106 | 107 |
108 |
109 | 110 | 111 |
112 | ); 113 | } 114 | -------------------------------------------------------------------------------- /src/components/ui/form.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as LabelPrimitive from "@radix-ui/react-label" 5 | import { Slot } from "@radix-ui/react-slot" 6 | import { 7 | Controller, 8 | FormProvider, 9 | useFormContext, 10 | useFormState, 11 | type ControllerProps, 12 | type FieldPath, 13 | type FieldValues, 14 | } from "react-hook-form" 15 | 16 | import { cn } from "@/lib/utils" 17 | import { Label } from "@/components/ui/label" 18 | 19 | const Form = FormProvider 20 | 21 | type FormFieldContextValue< 22 | TFieldValues extends FieldValues = FieldValues, 23 | TName extends FieldPath = FieldPath, 24 | > = { 25 | name: TName 26 | } 27 | 28 | const FormFieldContext = React.createContext( 29 | {} as FormFieldContextValue 30 | ) 31 | 32 | const FormField = < 33 | TFieldValues extends FieldValues = FieldValues, 34 | TName extends FieldPath = FieldPath, 35 | >({ 36 | ...props 37 | }: ControllerProps) => { 38 | return ( 39 | 40 | 41 | 42 | ) 43 | } 44 | 45 | const useFormField = () => { 46 | const fieldContext = React.useContext(FormFieldContext) 47 | const itemContext = React.useContext(FormItemContext) 48 | const { getFieldState } = useFormContext() 49 | const formState = useFormState({ name: fieldContext.name }) 50 | const fieldState = getFieldState(fieldContext.name, formState) 51 | 52 | if (!fieldContext) { 53 | throw new Error("useFormField should be used within ") 54 | } 55 | 56 | const { id } = itemContext 57 | 58 | return { 59 | id, 60 | name: fieldContext.name, 61 | formItemId: `${id}-form-item`, 62 | formDescriptionId: `${id}-form-item-description`, 63 | formMessageId: `${id}-form-item-message`, 64 | ...fieldState, 65 | } 66 | } 67 | 68 | type FormItemContextValue = { 69 | id: string 70 | } 71 | 72 | const FormItemContext = React.createContext( 73 | {} as FormItemContextValue 74 | ) 75 | 76 | function FormItem({ className, ...props }: React.ComponentProps<"div">) { 77 | const id = React.useId() 78 | 79 | return ( 80 | 81 |
86 | 87 | ) 88 | } 89 | 90 | function FormLabel({ 91 | className, 92 | ...props 93 | }: React.ComponentProps) { 94 | const { error, formItemId } = useFormField() 95 | 96 | return ( 97 |