48 lines
1.3 KiB
JavaScript
48 lines
1.3 KiB
JavaScript
|
import React, { useEffect, useRef } from 'react';
|
||
|
|
|
||
|
|
function AvatarCreator({ onAvatarExport }) {
|
||
|
|
const frameRef = useRef();
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const iframe = document.createElement('iframe');
|
||
|
|
iframe.src = 'https://readyplayer.me/avatar?frameApi';
|
||
|
|
iframe.style.position = 'absolute';
|
||
|
|
iframe.style.top = '0';
|
||
|
|
iframe.style.left = '0';
|
||
|
|
iframe.style.width = '100vw';
|
||
|
|
iframe.style.height = '100vh';
|
||
|
|
iframe.style.border = 'none';
|
||
|
|
|
||
|
|
frameRef.current.appendChild(iframe);
|
||
|
|
|
||
|
|
const subscribe = (event) => {
|
||
|
|
if (event.data?.source !== 'readyplayerme') return;
|
||
|
|
|
||
|
|
// готово к работе
|
||
|
|
if (event.data.eventName === 'v1.frame.ready') {
|
||
|
|
iframe.contentWindow.postMessage(
|
||
|
|
{
|
||
|
|
target: 'readyplayerme',
|
||
|
|
type: 'subscribe',
|
||
|
|
eventName: 'v1.avatar.exported',
|
||
|
|
},
|
||
|
|
'*'
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// аватар создан
|
||
|
|
if (event.data.eventName === 'v1.avatar.exported') {
|
||
|
|
const avatarUrl = event.data.data.url;
|
||
|
|
onAvatarExport(avatarUrl); // переход в игру
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
window.addEventListener('message', subscribe);
|
||
|
|
return () => window.removeEventListener('message', subscribe);
|
||
|
|
}, [onAvatarExport]);
|
||
|
|
|
||
|
|
return <div ref={frameRef}></div>;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default AvatarCreator;
|