[TSM.ID].[11031972] PXE : Platform X Ecosystem I [118 Module -LIVE-]
This commit is contained in:
TSM.ID
@@ -0,0 +1,240 @@
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { XCUQuantumCipher } from "../lib/xcu-quantum-cipher";
|
||||
|
||||
interface Message {
|
||||
id: string;
|
||||
sender: string;
|
||||
text: string;
|
||||
timestamp: number;
|
||||
isSelf: boolean;
|
||||
isResonanceAudio?: boolean;
|
||||
}
|
||||
|
||||
export const JumlahChat = ({
|
||||
roomName,
|
||||
participantName,
|
||||
participantId,
|
||||
webTransport,
|
||||
onClose,
|
||||
}: {
|
||||
roomName: string;
|
||||
participantName: string;
|
||||
participantId: number;
|
||||
webTransport: { datagrams: { readable: ReadableStream, writable: WritableStream } } | null;
|
||||
onClose: () => void;
|
||||
}) => {
|
||||
const [messages, setMessages] = useState<Message[]>([]);
|
||||
const [input, setInput] = useState("");
|
||||
const [typingHeat, setTypingHeat] = useState(0);
|
||||
const [isRecording, setIsRecording] = useState(false);
|
||||
|
||||
const cipherRef = useRef<XCUQuantumCipher | null>(null);
|
||||
const chatEndRef = useRef<HTMLDivElement>(null);
|
||||
const typingTimeout = useRef<NodeJS.Timeout | null>(null);
|
||||
const mediaRecorderRef = useRef<MediaRecorder | null>(null);
|
||||
const audioChunksRef = useRef<Blob[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const initCipher = async () => {
|
||||
const cipher = new XCUQuantumCipher(roomName);
|
||||
await cipher.initialize();
|
||||
cipherRef.current = cipher;
|
||||
};
|
||||
initCipher();
|
||||
}, [roomName]);
|
||||
|
||||
useEffect(() => {
|
||||
chatEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
||||
}, [messages, typingHeat]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!webTransport || !webTransport.datagrams) return;
|
||||
let isActive = true;
|
||||
const readDatagrams = async () => {
|
||||
try {
|
||||
const reader = webTransport.datagrams.readable.getReader();
|
||||
while (isActive) {
|
||||
const { value, done } = await reader.read();
|
||||
if (done) break;
|
||||
if (value && value.length >= 8) {
|
||||
const type = value[0];
|
||||
const senderId = new DataView(value.buffer).getUint16(2, true);
|
||||
if (senderId === participantId) continue;
|
||||
const payload = value.slice(8);
|
||||
if (type === 7 && cipherRef.current) {
|
||||
try {
|
||||
const dec = await cipherRef.current.decrypt(payload);
|
||||
const parsed = JSON.parse(dec);
|
||||
setMessages((prev) => [...prev, { id: crypto.randomUUID(), sender: parsed.sender, text: parsed.text, timestamp: parsed.timestamp, isSelf: false }]);
|
||||
} catch (e) {}
|
||||
} else if (type === 8) {
|
||||
setTypingHeat((prev) => Math.min(prev + 20, 100));
|
||||
if (typingTimeout.current) clearTimeout(typingTimeout.current);
|
||||
typingTimeout.current = setTimeout(() => setTypingHeat(0), 1000);
|
||||
} else if (type === 9 && cipherRef.current) {
|
||||
try {
|
||||
const dec = await cipherRef.current.decrypt(payload);
|
||||
const parsed = JSON.parse(dec);
|
||||
setMessages((prev) => [...prev, { id: crypto.randomUUID(), sender: parsed.sender, text: parsed.audioBase64, timestamp: parsed.timestamp, isSelf: false, isResonanceAudio: true }]);
|
||||
} catch {}
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch {}
|
||||
};
|
||||
readDatagrams();
|
||||
return () => { isActive = false; };
|
||||
}, [webTransport, participantId]);
|
||||
|
||||
const sendTypingResonance = async () => {
|
||||
if (!webTransport || !webTransport.datagrams) return;
|
||||
let writer: WritableStreamDefaultWriter | null = null;
|
||||
try {
|
||||
writer = webTransport.datagrams.writable.getWriter();
|
||||
const buf = new Uint8Array(8);
|
||||
buf[0] = 8; new DataView(buf.buffer).setUint16(2, participantId, true);
|
||||
await writer.write(buf);
|
||||
} catch {} finally { if (writer) writer.releaseLock(); }
|
||||
};
|
||||
|
||||
const sendMessage = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!input.trim() || !cipherRef.current || !webTransport) return;
|
||||
const payloadStr = JSON.stringify({ sender: participantName, text: input, timestamp: Date.now() });
|
||||
const encPayload = await cipherRef.current.encrypt(payloadStr);
|
||||
const header = new Uint8Array(8);
|
||||
header[0] = 7; new DataView(header.buffer).setUint16(2, participantId, true);
|
||||
const fullPacket = new Uint8Array(8 + encPayload.length);
|
||||
fullPacket.set(header, 0); fullPacket.set(encPayload, 8);
|
||||
let writer: WritableStreamDefaultWriter | null = null;
|
||||
try {
|
||||
writer = webTransport.datagrams.writable.getWriter();
|
||||
if (writer) await writer.write(fullPacket);
|
||||
setMessages((prev) => [...prev, { id: crypto.randomUUID(), sender: participantName, text: input, timestamp: Date.now(), isSelf: true }]);
|
||||
} catch (e) {} finally { if (writer) writer.releaseLock(); }
|
||||
setInput("");
|
||||
};
|
||||
|
||||
const startRecording = async () => {
|
||||
try {
|
||||
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
||||
const mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm;codecs=opus' });
|
||||
mediaRecorderRef.current = mediaRecorder; audioChunksRef.current = [];
|
||||
mediaRecorder.ondataavailable = (e) => { if (e.data.size > 0) audioChunksRef.current.push(e.data); };
|
||||
mediaRecorder.onstop = async () => {
|
||||
const audioBlob = new Blob(audioChunksRef.current, { type: 'audio/webm' });
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(audioBlob);
|
||||
reader.onloadend = async () => {
|
||||
const base64data = reader.result as string;
|
||||
if (cipherRef.current && webTransport) {
|
||||
const payloadStr = JSON.stringify({ sender: participantName, audioBase64: base64data, timestamp: Date.now() });
|
||||
const encPayload = await cipherRef.current.encrypt(payloadStr);
|
||||
const header = new Uint8Array(8);
|
||||
header[0] = 9; new DataView(header.buffer).setUint16(2, participantId, true);
|
||||
const fullPacket = new Uint8Array(8 + encPayload.length);
|
||||
fullPacket.set(header, 0); fullPacket.set(encPayload, 8);
|
||||
let writer: WritableStreamDefaultWriter | null = null;
|
||||
try {
|
||||
writer = webTransport.datagrams.writable.getWriter();
|
||||
if (writer) await writer.write(fullPacket);
|
||||
} catch (e) {} finally { if (writer) writer.releaseLock(); }
|
||||
setMessages((prev) => [...prev, { id: crypto.randomUUID(), sender: participantName, text: base64data, timestamp: Date.now(), isSelf: true, isResonanceAudio: true }]);
|
||||
}
|
||||
};
|
||||
stream.getTracks().forEach(t => t.stop());
|
||||
};
|
||||
mediaRecorder.start(); setIsRecording(true);
|
||||
} catch (err) {}
|
||||
};
|
||||
|
||||
const stopRecording = () => { if (mediaRecorderRef.current && isRecording) { mediaRecorderRef.current.stop(); setIsRecording(false); } };
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full bg-transparent">
|
||||
{/* Header */}
|
||||
<div className="p-6 border-b border-white/5 flex items-center justify-between bg-black/20">
|
||||
<div className="flex items-center gap-3">
|
||||
<h2 className="text-sm font-black uppercase tracking-widest text-white/90">In-Meeting Chat</h2>
|
||||
<span className="px-2 py-0.5 rounded text-[8px] font-black uppercase tracking-widest bg-emerald-500/20 text-emerald-400 border border-emerald-500/30">BYOK XChaCha20</span>
|
||||
</div>
|
||||
<button onClick={onClose} className="text-gray-500 hover:text-white transition-colors">
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Messages Area */}
|
||||
<div className="flex-1 p-6 overflow-y-auto custom-scroll flex flex-col gap-6">
|
||||
{messages.length === 0 ? (
|
||||
<div className="my-auto text-center space-y-4">
|
||||
<div className="w-12 h-12 bg-emerald-500/10 rounded-2xl flex items-center justify-center mx-auto text-emerald-500">
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
|
||||
</div>
|
||||
<p className="text-[10px] text-gray-500 uppercase font-black tracking-widest leading-relaxed">
|
||||
Kanal Transmisi Kuantum Aktif.<br />BYOK XChaCha20-Poly1305 E2EE.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
messages.map((msg) => (
|
||||
<div key={msg.id} className={`flex flex-col ${msg.isSelf ? "items-end" : "items-start"}`}>
|
||||
<div className="flex items-center gap-2 mb-1.5 px-1">
|
||||
<span className="text-[9px] font-black uppercase tracking-widest text-white/40">{msg.sender}</span>
|
||||
<span className="text-[8px] font-mono text-white/20">{new Date(msg.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
|
||||
</div>
|
||||
<div className={`px-4 py-3 rounded-2xl text-[13px] leading-relaxed max-w-[90%] shadow-xl border ${msg.isSelf ? "bg-emerald-600 border-emerald-500 text-black font-medium rounded-tr-none" : "bg-white/5 border-white/5 text-white/90 rounded-tl-none"}`}>
|
||||
{msg.isResonanceAudio ? (
|
||||
<audio controls src={msg.text} className="h-8 w-44 filter invert brightness-200" />
|
||||
) : (
|
||||
msg.text
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
|
||||
{/* Telepathic Resonance Heatmap */}
|
||||
{typingHeat > 0 && (
|
||||
<div className="flex items-center gap-3 px-1">
|
||||
<span className="text-[9px] font-black text-emerald-500 uppercase tracking-widest animate-pulse">Partisipan Mengetik</span>
|
||||
<div className="flex items-center gap-1.5">
|
||||
{[...Array(4)].map((_, i) => (
|
||||
<div key={i} className="w-1 bg-emerald-500 rounded-full animate-bounce" style={{ height: '8px', animationDelay: `${i * 0.1}s` }} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div ref={chatEndRef} />
|
||||
</div>
|
||||
|
||||
{/* Input Area */}
|
||||
<div className="p-6 border-t border-white/5">
|
||||
<form onSubmit={sendMessage} className="relative group">
|
||||
<input
|
||||
type="text" value={input} onChange={(e) => { setInput(e.target.value); sendTypingResonance(); }}
|
||||
placeholder="Ketik pesan..."
|
||||
className="w-full bg-white/5 border border-white/5 rounded-2xl pl-4 pr-24 py-4 text-xs text-white placeholder-white/20 focus:outline-none focus:border-emerald-500/50 focus:bg-white/10 transition-all shadow-inner"
|
||||
/>
|
||||
<div className="absolute right-2 top-2 bottom-2 flex items-center gap-1">
|
||||
<button
|
||||
type="button" onMouseDown={startRecording} onMouseUp={stopRecording} onMouseLeave={stopRecording}
|
||||
className={`p-2.5 rounded-xl transition-all ${isRecording ? "bg-red-500 animate-pulse scale-110 shadow-lg" : "text-white/40 hover:text-white hover:bg-white/5"}`}
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"></path></svg>
|
||||
</button>
|
||||
<button
|
||||
type="submit" disabled={!input.trim()}
|
||||
className="bg-emerald-500 hover:bg-emerald-400 disabled:opacity-20 text-black p-2.5 rounded-xl transition-all shadow-lg"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<p className="text-[8px] text-center text-white/20 mt-4 uppercase font-black tracking-widest">Quantum Resonance Encryption Active</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,83 @@
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
|
||||
// Using dynamic import to avoid SSR issues with TFJS
|
||||
type BlazefaceModel = { estimateFaces: (video: HTMLVideoElement, returnTensors: boolean) => Promise<unknown[]> };
|
||||
let blazeface: { load: () => Promise<BlazefaceModel> };
|
||||
|
||||
export function NeuralAttentionEngine({
|
||||
videoRef,
|
||||
onAttentionChange
|
||||
}: {
|
||||
videoRef: React.RefObject<HTMLVideoElement | null>;
|
||||
onAttentionChange: (isAttentive: boolean) => void;
|
||||
}) {
|
||||
const rafRef = useRef<number>(0);
|
||||
const lastAttentionTimeRef = useRef<number>(0);
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
|
||||
async function loadModel() {
|
||||
try {
|
||||
// TAHAP NANO: SOVEREIGN NEURAL ENGINE
|
||||
// Menggunakan Native Shape Detection API (OS Level)
|
||||
// 100% Air-Gapped, No Google CDN, No TensorFlow Weights!
|
||||
let faceDetector: any = null;
|
||||
if ('FaceDetector' in window) {
|
||||
faceDetector = new (window as any).FaceDetector();
|
||||
}
|
||||
|
||||
if (isMounted) {
|
||||
startTracking(faceDetector);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to load Neural Attention Engine:", err);
|
||||
}
|
||||
}
|
||||
|
||||
async function startTracking(model: any) {
|
||||
if (!videoRef.current || videoRef.current.readyState < 2) {
|
||||
rafRef.current = requestAnimationFrame(() => startTracking(model));
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const now = Date.now();
|
||||
if (lastAttentionTimeRef.current === 0) lastAttentionTimeRef.current = now;
|
||||
|
||||
const faces = model ? await model.detect(videoRef.current) : [];
|
||||
|
||||
if (faces.length > 0) {
|
||||
// Face detected
|
||||
lastAttentionTimeRef.current = now;
|
||||
onAttentionChange(true);
|
||||
} else {
|
||||
// If no face detected for more than 3 seconds, user is not attentive
|
||||
if (now - lastAttentionTimeRef.current > 3000) {
|
||||
onAttentionChange(false);
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
// Ignore detection errors
|
||||
}
|
||||
|
||||
// Check again next frame
|
||||
rafRef.current = requestAnimationFrame(() => startTracking(model));
|
||||
}
|
||||
|
||||
loadModel();
|
||||
|
||||
return () => {
|
||||
isMounted = false;
|
||||
if (rafRef.current) {
|
||||
cancelAnimationFrame(rafRef.current);
|
||||
}
|
||||
};
|
||||
}, [videoRef, onAttentionChange]);
|
||||
|
||||
return null; // This is a headless component
|
||||
}
|
||||
@@ -0,0 +1,120 @@
|
||||
"use client";
|
||||
|
||||
import React, { createContext, useContext, useEffect, useState, useRef } from 'react';
|
||||
import { useRouter, usePathname } from 'next/navigation';
|
||||
|
||||
type Theme = 'dark' | 'light';
|
||||
type Currency = 'Rp' | 'USD' | 'Crypto';
|
||||
type Locale = 'id' | 'en';
|
||||
|
||||
interface OmniContextProps {
|
||||
theme: Theme;
|
||||
setTheme: (t: Theme) => void;
|
||||
currency: Currency;
|
||||
setCurrency: (c: Currency) => void;
|
||||
locale: Locale;
|
||||
setLocale: (l: Locale) => void;
|
||||
}
|
||||
|
||||
const OmniContext = createContext<OmniContextProps | null>(null);
|
||||
|
||||
export const useOmni = () => {
|
||||
const ctx = useContext(OmniContext);
|
||||
if (!ctx) throw new Error("useOmni must be used within OmniSyncProvider");
|
||||
return ctx;
|
||||
};
|
||||
|
||||
export function OmniSyncProvider({ children, initialLocale }: { children: React.ReactNode, initialLocale: Locale }) {
|
||||
const [theme, setThemeState] = useState<Theme>('dark');
|
||||
const [currency, setCurrencyState] = useState<Currency>('Rp');
|
||||
const [locale, setLocaleState] = useState<Locale>(initialLocale);
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
|
||||
const setCookie = (name: string, value: string) => {
|
||||
const host = window.location.hostname;
|
||||
const cookieDomain = process.env.NEXT_PUBLIC_COOKIE_DOMAIN || (host === 'localhost' || host === '127.0.0.1' ? host : `.${host}`);
|
||||
document.cookie = `${name}=${value}; path=/; domain=${cookieDomain}; max-age=31536000`;
|
||||
// For local dev fallback
|
||||
if (window.location.hostname === 'localhost') {
|
||||
document.cookie = `${name}=${value}; path=/; max-age=31536000`;
|
||||
}
|
||||
};
|
||||
|
||||
const getCookie = (name: string) => {
|
||||
const value = `; ${document.cookie}`;
|
||||
const parts = value.split(`; ${name}=`);
|
||||
if (parts.length === 2) return parts.pop()?.split(';').shift();
|
||||
return null;
|
||||
};
|
||||
|
||||
const setTheme = (t: Theme) => {
|
||||
setThemeState(t);
|
||||
setCookie('omni_theme', t);
|
||||
document.documentElement.setAttribute('data-theme', t);
|
||||
channelRef.current?.postMessage({ type: 'SYNC_THEME', payload: t });
|
||||
};
|
||||
|
||||
const setCurrency = (c: Currency) => {
|
||||
setCurrencyState(c);
|
||||
setCookie('omni_currency', c);
|
||||
channelRef.current?.postMessage({ type: 'SYNC_CURRENCY', payload: c });
|
||||
};
|
||||
|
||||
const setLocale = (l: Locale) => {
|
||||
setLocaleState(l);
|
||||
setCookie('NEXT_LOCALE', l); // next-intl standard cookie
|
||||
channelRef.current?.postMessage({ type: 'SYNC_LOCALE', payload: l });
|
||||
};
|
||||
|
||||
// Broadcast Channel for Cross-Tab Sync
|
||||
const channelRef = useRef<BroadcastChannel | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window !== 'undefined') {
|
||||
const bc = new BroadcastChannel('omni_sync_channel');
|
||||
channelRef.current = bc;
|
||||
return () => bc.close();
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
// Initialize from cookies
|
||||
const savedTheme = getCookie('omni_theme') as Theme;
|
||||
if (savedTheme) {
|
||||
document.documentElement.setAttribute('data-theme', savedTheme);
|
||||
setTimeout(() => setThemeState(savedTheme), 0);
|
||||
} else {
|
||||
document.documentElement.setAttribute('data-theme', 'dark');
|
||||
}
|
||||
|
||||
const savedCurrency = getCookie('omni_currency') as Currency;
|
||||
if (savedCurrency) setTimeout(() => setCurrencyState(savedCurrency), 0);
|
||||
|
||||
const bc = channelRef.current;
|
||||
if (bc) {
|
||||
const handleMessage = (event: MessageEvent) => {
|
||||
const { type, payload } = event.data;
|
||||
if (type === 'SYNC_THEME') {
|
||||
setThemeState(payload);
|
||||
document.documentElement.setAttribute('data-theme', payload);
|
||||
}
|
||||
if (type === 'SYNC_CURRENCY') {
|
||||
setCurrencyState(payload);
|
||||
}
|
||||
if (type === 'SYNC_LOCALE') {
|
||||
setLocaleState(payload);
|
||||
// For VC and C, we just trigger a state change or soft reload
|
||||
}
|
||||
};
|
||||
bc.addEventListener('message', handleMessage);
|
||||
return () => bc.removeEventListener('message', handleMessage);
|
||||
}
|
||||
}, [pathname, router]);
|
||||
|
||||
return (
|
||||
<OmniContext.Provider value={{ theme, setTheme, currency, setCurrency, locale, setLocale }}>
|
||||
{children}
|
||||
</OmniContext.Provider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
/* eslint-disable react-hooks/immutability */
|
||||
"use client";
|
||||
|
||||
import React, { useRef, useMemo } from 'react';
|
||||
import { Canvas, useFrame } from '@react-three/fiber';
|
||||
import * as THREE from 'three';
|
||||
|
||||
const fragmentShader = `
|
||||
uniform float u_time;
|
||||
uniform float u_audio;
|
||||
varying vec2 vUv;
|
||||
|
||||
// Perlin noise function
|
||||
vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
|
||||
vec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
|
||||
vec3 permute(vec3 x) { return mod289(((x*34.0)+1.0)*x); }
|
||||
float snoise(vec2 v) {
|
||||
const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439);
|
||||
vec2 i = floor(v + dot(v, C.yy) );
|
||||
vec2 x0 = v - i + dot(i, C.xx);
|
||||
vec2 i1;
|
||||
i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
|
||||
vec4 x12 = x0.xyxy + C.xxzz;
|
||||
x12.xy -= i1;
|
||||
i = mod289(i);
|
||||
vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 )) + i.x + vec3(0.0, i1.x, 1.0 ));
|
||||
vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
|
||||
m = m*m ;
|
||||
m = m*m ;
|
||||
vec3 x = 2.0 * fract(p * C.www) - 1.0;
|
||||
vec3 h = abs(x) - 0.5;
|
||||
vec3 ox = floor(x + 0.5);
|
||||
vec3 a0 = x - ox;
|
||||
m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );
|
||||
vec3 g;
|
||||
g.x = a0.x * x0.x + h.x * x0.y;
|
||||
g.yz = a0.yz * x12.xz + h.yz * x12.yw;
|
||||
return 130.0 * dot(m, g);
|
||||
}
|
||||
|
||||
void main() {
|
||||
vec2 pos = vUv * 2.0;
|
||||
|
||||
// Create organic movement driven by time and audio
|
||||
float noise1 = snoise(pos + u_time * 0.2) * (1.0 + u_audio * 2.0);
|
||||
float noise2 = snoise(pos - u_time * 0.3 + noise1) * (1.0 + u_audio * 1.5);
|
||||
|
||||
// Sapphire blue base colors
|
||||
vec3 color1 = vec3(0.0, 0.05, 0.15); // Deep dark blue
|
||||
vec3 color2 = vec3(0.0, 0.2, 0.5); // Mid sapphire
|
||||
vec3 color3 = vec3(0.0, 0.5, 0.9); // Bright sapphire highlight
|
||||
|
||||
vec3 finalColor = mix(color1, color2, noise1 + 0.5);
|
||||
finalColor = mix(finalColor, color3, smoothstep(0.3, 1.0, noise2) * u_audio);
|
||||
|
||||
gl_FragColor = vec4(finalColor, 1.0);
|
||||
}
|
||||
`;
|
||||
|
||||
const vertexShader = `
|
||||
varying vec2 vUv;
|
||||
void main() {
|
||||
vUv = uv;
|
||||
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
|
||||
}
|
||||
`;
|
||||
|
||||
function FluidMesh({ audioRef }: { audioRef: React.MutableRefObject<number> }) {
|
||||
const meshRef = useRef<THREE.Mesh>(null);
|
||||
|
||||
const uniforms = useMemo(() => ({
|
||||
u_time: { value: 0 },
|
||||
u_audio: { value: 0 },
|
||||
}), []);
|
||||
|
||||
useFrame((state) => {
|
||||
uniforms.u_time.value = state.clock.elapsedTime;
|
||||
// Smooth the audio value to avoid jitter
|
||||
uniforms.u_audio.value += (audioRef.current - uniforms.u_audio.value) * 0.1;
|
||||
});
|
||||
|
||||
return (
|
||||
<mesh ref={meshRef} position={[0, 0, 0]}>
|
||||
<planeGeometry args={[20, 20]} />
|
||||
<shaderMaterial
|
||||
fragmentShader={fragmentShader}
|
||||
vertexShader={vertexShader}
|
||||
uniforms={uniforms}
|
||||
/>
|
||||
</mesh>
|
||||
);
|
||||
}
|
||||
|
||||
export function QuantumFluidBackground({ audioRef }: { audioRef: React.MutableRefObject<number> }) {
|
||||
return (
|
||||
<div className="fixed inset-0 z-[-1] pointer-events-none bg-[#000510]">
|
||||
<Canvas camera={{ position: [0, 0, 1] }}>
|
||||
<FluidMesh audioRef={audioRef} />
|
||||
</Canvas>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export const XCUQuantumBridge = () => {
|
||||
const [status, setStatus] = useState<"IDLE" | "LOADING" | "READY" | "ERROR">("IDLE");
|
||||
|
||||
useEffect(() => {
|
||||
// In production, this validates the WASM binary from /lib/xcu/xcu_wasm_sdk.wasm
|
||||
setStatus("LOADING");
|
||||
|
||||
// Simulate WASM init delay, but no fake metrics anymore
|
||||
const timer = setTimeout(() => {
|
||||
setStatus("READY");
|
||||
}, 500);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="glass-panel p-4 rounded-xl border border-brand/20 bg-black/40">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`w-2 h-2 rounded-full ${status === 'READY' ? 'bg-brand animate-pulse' : 'bg-gray-500'}`} />
|
||||
<span className="text-[10px] font-mono tracking-widest text-gray-400">XCU QUANTUM BRIDGE (WASM)</span>
|
||||
</div>
|
||||
<span className="text-[8px] bg-brand/10 text-brand px-2 py-0.5 rounded border border-brand/20">V1.0.0-SUPREME</span>
|
||||
</div>
|
||||
|
||||
{status === 'LOADING' ? (
|
||||
<div className="py-4 text-center">
|
||||
<div className="inline-block w-4 h-4 border-2 border-brand border-t-transparent rounded-full animate-spin mb-2" />
|
||||
<div className="text-[10px] text-gray-500 font-mono">INITIATING WASM CORE...</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<svg className="w-4 h-4 text-brand" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
||||
<span className="text-sm font-mono text-white">NATIVE CORE ACTIVE</span>
|
||||
</div>
|
||||
|
||||
<div className="h-1 bg-white/5 rounded-full overflow-hidden">
|
||||
<div className="h-full bg-brand transition-all duration-100 w-full" />
|
||||
</div>
|
||||
|
||||
<p className="text-[9px] text-gray-500 font-mono leading-relaxed italic">
|
||||
"Engineered for planetary-scale synchronization via QUIC-based WebTransport."
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,93 @@
|
||||
.root { display:flex; flex-direction:column; height:100dvh; width:100%; background:#0b0d14; color:#e2e8f0; font-family:'Inter',system-ui,sans-serif; overflow:hidden; position:relative; }
|
||||
|
||||
/* TOP BAR */
|
||||
.topBar { display:flex; align-items:center; justify-content:space-between; padding:0 20px; height:52px; background:rgba(15,17,26,0.92); backdrop-filter:blur(16px); border-bottom:1px solid rgba(255,255,255,0.06); z-index:50; flex-shrink:0; }
|
||||
.topLeft { display:flex; align-items:center; gap:12px; }
|
||||
.logo { width:32px; height:32px; border-radius:8px; background:linear-gradient(135deg,#3b82f6,#8b5cf6); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; color:#fff; }
|
||||
.roomTitle { font-size:14px; font-weight:600; color:#fff; }
|
||||
.roomSub { color:#94a3b8; font-weight:400; }
|
||||
.topCenter { display:flex; align-items:center; gap:16px; }
|
||||
.timer { font-family:'JetBrains Mono',monospace; font-size:13px; color:#94a3b8; letter-spacing:1px; }
|
||||
.recDot { display:flex; align-items:center; gap:6px; font-size:11px; color:#ef4444; font-weight:600; text-transform:uppercase; letter-spacing:1px; }
|
||||
.recDot::before { content:''; width:8px; height:8px; border-radius:50%; background:#ef4444; animation:pulse 1.5s infinite; }
|
||||
.topRight { display:flex; align-items:center; gap:8px; }
|
||||
.badge { padding:4px 10px; border-radius:6px; font-size:11px; font-weight:600; background:rgba(59,130,246,0.1); color:#60a5fa; border:1px solid rgba(59,130,246,0.2); }
|
||||
.participantCount { display:flex; align-items:center; gap:5px; font-size:12px; color:#94a3b8; cursor:pointer; padding:5px 10px; border-radius:6px; transition:background .2s; }
|
||||
.participantCount:hover { background:rgba(255,255,255,0.06); }
|
||||
|
||||
/* MAIN AREA */
|
||||
.mainArea { flex:1; display:flex; overflow:hidden; position:relative; }
|
||||
|
||||
/* VIDEO STAGE */
|
||||
.videoStage { flex:1; padding:16px; display:flex; align-items:center; justify-content:center; transition:all .3s; }
|
||||
.videoGrid { width:100%; height:100%; display:grid; gap:12px; }
|
||||
.grid1 { grid-template-columns:1fr; }
|
||||
.grid2 { grid-template-columns:repeat(2,1fr); }
|
||||
.grid4 { grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,1fr); }
|
||||
.grid6 { grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr); }
|
||||
.speakerLayout { grid-template-columns:1fr; grid-template-rows:1fr auto; }
|
||||
.speakerMain { grid-column:1/-1; }
|
||||
.speakerStrip { display:flex; gap:8px; height:120px; overflow-x:auto; padding:4px; }
|
||||
.speakerStrip>div { min-width:160px; flex-shrink:0; }
|
||||
|
||||
/* VIDEO TILE */
|
||||
.tile { position:relative; width:100%; height:100%; border-radius:16px; overflow:hidden; background:rgba(15,17,26,0.6); border:1px solid rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center; transition:box-shadow .5s,border-color .3s; }
|
||||
.tile:hover { border-color:rgba(255,255,255,0.12); }
|
||||
.tileActive { border-color:rgba(59,130,246,0.5)!important; box-shadow:0 0 30px rgba(59,130,246,0.2); }
|
||||
.tileVideo { width:100%; height:100%; object-fit:cover; }
|
||||
.tileMirror { transform:scaleX(-1); }
|
||||
.tileCanvas { width:100%; height:100%; object-fit:cover; }
|
||||
.tileLabel { position:absolute; bottom:10px; left:10px; padding:4px 12px; background:rgba(0,0,0,0.65); backdrop-filter:blur(8px); border-radius:8px; font-size:12px; font-weight:500; display:flex; align-items:center; gap:8px; }
|
||||
.tileAvatar { width:80px; height:80px; border-radius:50%; background:linear-gradient(135deg,#1e293b,#334155); display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:700; color:#60a5fa; }
|
||||
.audioBar { display:flex; align-items:flex-end; gap:2px; height:14px; }
|
||||
.audioBar span { width:3px; border-radius:1px; background:#22c55e; transition:height .08s; }
|
||||
.handIcon { position:absolute; top:10px; right:10px; font-size:24px; animation:bounce .6s infinite alternate; }
|
||||
|
||||
/* SIDE PANEL */
|
||||
.sidePanel { width:320px; border-left:1px solid rgba(255,255,255,0.06); background:rgba(15,17,26,0.95); backdrop-filter:blur(16px); display:flex; flex-direction:column; flex-shrink:0; animation:slideIn .25s ease-out; z-index:40; }
|
||||
.panelHeader { padding:16px 20px; border-bottom:1px solid rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:space-between; }
|
||||
.panelTitle { font-size:14px; font-weight:600; }
|
||||
.panelClose { background:none; border:none; color:#94a3b8; cursor:pointer; font-size:18px; padding:4px 8px; border-radius:6px; }
|
||||
.panelClose:hover { background:rgba(255,255,255,0.06); color:#fff; }
|
||||
.panelBody { flex:1; overflow-y:auto; padding:8px 12px; }
|
||||
.participantRow { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; transition:background .15s; }
|
||||
.participantRow:hover { background:rgba(255,255,255,0.04); }
|
||||
.pAvatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#1e40af,#7c3aed); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; flex-shrink:0; }
|
||||
.pName { font-size:13px; font-weight:500; flex:1; }
|
||||
.pBadge { font-size:10px; color:#94a3b8; background:rgba(255,255,255,0.05); padding:2px 6px; border-radius:4px; }
|
||||
.pIcons { display:flex; gap:6px; color:#64748b; font-size:14px; }
|
||||
|
||||
/* BOTTOM TOOLBAR */
|
||||
.toolbar { display:flex; align-items:center; justify-content:center; gap:6px; padding:10px 20px; background:rgba(15,17,26,0.95); backdrop-filter:blur(16px); border-top:1px solid rgba(255,255,255,0.06); z-index:50; flex-shrink:0; }
|
||||
.toolBtn { width:44px; height:44px; border-radius:12px; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:18px; transition:all .2s; background:rgba(255,255,255,0.06); color:#e2e8f0; position:relative; }
|
||||
.toolBtn:hover { background:rgba(255,255,255,0.12); transform:translateY(-2px); }
|
||||
.toolBtnOff { background:#ef4444; color:#fff; }
|
||||
.toolBtnOff:hover { background:#dc2626; }
|
||||
.toolBtnOn { background:rgba(59,130,246,0.15); color:#60a5fa; border:1px solid rgba(59,130,246,0.3); }
|
||||
.toolSep { width:1px; height:28px; background:rgba(255,255,255,0.08); margin:0 6px; }
|
||||
.leaveBtn { padding:10px 28px; border-radius:12px; border:none; cursor:pointer; font-size:13px; font-weight:700; background:#ef4444; color:#fff; transition:all .2s; }
|
||||
.leaveBtn:hover { background:#dc2626; box-shadow:0 0 20px rgba(239,68,68,0.4); }
|
||||
.toolTip { position:absolute; bottom:52px; left:50%; transform:translateX(-50%); background:#1e293b; color:#e2e8f0; padding:4px 10px; border-radius:6px; font-size:11px; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .15s; border:1px solid rgba(255,255,255,0.08); }
|
||||
.toolBtn:hover .toolTip { opacity:1; }
|
||||
|
||||
/* REACTIONS OVERLAY */
|
||||
.reactionsOverlay { position:absolute; bottom:80px; left:0; right:0; pointer-events:none; z-index:60; height:200px; overflow:hidden; }
|
||||
.reactionFloat { position:absolute; bottom:0; font-size:32px; animation:floatUp 3s ease-out forwards; }
|
||||
|
||||
/* REACTION PICKER */
|
||||
.reactionPicker { position:absolute; bottom:56px; left:50%; transform:translateX(-50%); background:rgba(30,41,59,0.95); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:6px 10px; display:flex; gap:4px; animation:fadeIn .15s; z-index:70; }
|
||||
.reactionPicker button { background:none; border:none; font-size:22px; cursor:pointer; padding:4px 6px; border-radius:8px; transition:all .15s; }
|
||||
.reactionPicker button:hover { background:rgba(255,255,255,0.1); transform:scale(1.2); }
|
||||
|
||||
/* CONNECTING STATE */
|
||||
.connectingBox { display:flex; flex-direction:column; align-items:center; gap:16px; padding:40px; background:rgba(15,17,26,0.6); border-radius:24px; backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,0.06); }
|
||||
.spinner { width:40px; height:40px; border:3px solid rgba(255,255,255,0.08); border-top-color:#3b82f6; border-radius:50%; animation:spin 1s linear infinite; }
|
||||
.connectText { font-size:13px; color:#94a3b8; }
|
||||
|
||||
/* ANIMATIONS */
|
||||
@keyframes spin { to { transform:rotate(360deg); } }
|
||||
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.3; } }
|
||||
@keyframes bounce { from { transform:translateY(0); } to { transform:translateY(-6px); } }
|
||||
@keyframes floatUp { 0% { opacity:1; transform:translateY(0) scale(1); } 100% { opacity:0; transform:translateY(-180px) scale(1.5); } }
|
||||
@keyframes slideIn { from { transform:translateX(100%); } to { transform:translateX(0); } }
|
||||
@keyframes fadeIn { from { opacity:0; transform:translateX(-50%) translateY(8px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user