@@ -226,9 +145,9 @@ function SessionPage() {
{/* Connection status */}
- {peer.session ? (
+ {remoteStreams.length !== 0 ? (
- Connected to: {peer.session.sess.other.peerId}
+ Connected to: {peer.sessions[0].sess.other.peerId}
) : (
@@ -272,19 +191,21 @@ function SessionPage() {
+
{dogImage ? (
+ // here
) : (
No dog image yet
@@ -298,20 +219,21 @@ function SessionPage() {
Their Dog
- {remoteDogImage ? (
-
- ) : (
-
- {peer.session ?
+ {remoteStreams.length === 0
+ ? (
+
"Waiting for dog image..." :
"Connect to a peer first"
- }
-
- )}
+
+ )
+ : (
+
+ )}
@@ -319,243 +241,109 @@ function SessionPage() {
);
}
-function ConnectForm() {
- const [otherPeerId, setOtherPeerId] = useState("");
- const peer = usePeerStore();
-
- return (
-
- );
-}
-
-interface ImageContainerProps {
+interface VideoContainerProps {
title: string;
- image: ImageData | null;
+ stream: MediaStream | null;
loading: boolean;
className: string;
}
-// function ImageContainer(props: ImageContainerProps) {
-// const imageRef = useRef
(null);
+function VideoContainer(props: VideoContainerProps) {
+ const videoRef = useRef(null);
-// useEffect(() => {
-// if(!props.image) return;
-// if (imageRef.current) {
-// imageRef.current.src = props.image;
-// }
-// }, [props.image]);
+ useEffect(() => {
+ if (videoRef.current) {
+ videoRef.current.srcObject = props.stream;
+ }
+ }, [props.stream]);
-// return (
-//
-// {(props.image === null || props.loading) && (
-//
-// )}
-//
-//
-//
-//
-//
-// );
-// }
+ return (
+
+ {(props.stream === null || props.loading) && (
+
+ )}
+
+
+
+
+
+ );
+}
-// function Preview({ css }: {css: string}) {
-// const iframeRef = useRef();
+// function Preview({ css }: { css: string }) {
+// const iframeRef = useRef(null);
+// const [snapshot, setSnapshot] = useState("");
+// // Generate iframe content
// useEffect(() => {
-// const blob = new Blob([`
+// if (!iframeRef.current) return;
+
+// const htmlContent = `
+//
//
-//
-//
+//
+//
+//
+//
+//
+//
//
-// `], { type: 'text/html' });
+// `;
+
+// const blob = new Blob([htmlContent], { type: 'text/html' });
+// const url = URL.createObjectURL(blob);
-// iframeRef.current.src = URL.createObjectURL(blob);
-// }, [css]);
+// iframeRef.current.src = url;
-// const capture = () => {
-// if (!iframeRef.current.contentDocument){console.error("image rendering failed"); return;}
-// return html2canvas(iframeRef.current.contentDocument.body, {
-// useCORS: true,
-// foreignObjectRendering: true
-// }).then(canvas => canvas.toDataURL());
-// };
+// // Cleanup previous blob URL
+// return () => URL.revokeObjectURL(url);
+// }, [css]);
-// return ;
-// }
-// function ImageContainer(props: ImageContainerProps) {
-// const imageRef = useRef(null);
+// // Capture mechanism
+// const capture = useCallback(async () => {
+// if (
+// !iframeRef.current ||
+// !iframeRef.current.contentDocument ||
+// !iframeRef.current.contentDocument.body
+// ) {
+// console.error("Iframe content not available");
+// return null;
+// }
-// useEffect(() => {
-// if (videoRef.current) {
-// videoRef.current.srcObject = props.stream;
+// try {
+// const canvas = await html2canvas(iframeRef.current.contentDocument.body, {
+// useCORS: true,
+// foreignObjectRendering: true,
+// allowTaint: true,
+// logging: true,
+// });
+// return canvas.toDataURL('image/jpeg', 0.8);
+// } catch (error) {
+// console.error("Capture failed:", error);
+// return null;
// }
-// }, [props.stream]);
+// }, []);
-// useEffect(() => {
-// if (!props.image || !imageRef.current) return;
-// if (imageRef.current) {
-// imageRef.current.src = props.image!;
-// }
-// imageRef.current.src = props.image;
-// }, [props.image]);
+// // // Example usage for parent component
+// // useImperativeHandle(ref, () => ({
+// // capture
+// // }));
// return (
-//
-// {(props.image === null || props.loading) && (
-//
-// )}
-// ![{props.title}]()
+//
-//
-//
-//
-//
-// );
-// }
-
-function Preview({ css }: { css: string }) {
- const iframeRef = useRef(null);
- const [snapshot, setSnapshot] = useState("");
-
- // Generate iframe content
- useEffect(() => {
- if (!iframeRef.current) return;
-
- const htmlContent = `
-
-
-
-
-
-
-
-
-
- `;
-
- const blob = new Blob([htmlContent], { type: 'text/html' });
- const url = URL.createObjectURL(blob);
-
- iframeRef.current.src = url;
-
- // Cleanup previous blob URL
- return () => URL.revokeObjectURL(url);
- }, [css]);
-
- // Capture mechanism
- const capture = useCallback(async () => {
- if (
- !iframeRef.current ||
- !iframeRef.current.contentDocument ||
- !iframeRef.current.contentDocument.body
- ) {
- console.error("Iframe content not available");
- return null;
- }
-
- try {
- const canvas = await html2canvas(iframeRef.current.contentDocument.body, {
- useCORS: true,
- foreignObjectRendering: true,
- allowTaint: true,
- logging: true,
- });
- return canvas.toDataURL('image/jpeg', 0.8);
- } catch (error) {
- console.error("Capture failed:", error);
- return null;
- }
- }, []);
-
- // // Example usage for parent component
- // useImperativeHandle(ref, () => ({
- // capture
- // }));
-
- return (
-
-
- {snapshot &&
}
-
-//
-//
-//
+// {snapshot &&
}
//
+
+
+
+
+
+
+ Target #1: Simple Circle
+
+
+
+
+
+
+ Match Percentage:
+ 0%
+
+
+ Characters:
+ 0
+
+
+
+
+