import { DosInstance } from "emulators-ui/dist/types/js-dos" ; import { useState } from "preact/hooks" ; import { html } from "../dom" ; import { Icons } from "../icons" ; import { Props } from "../player-app" ; import { downloadFile } from "../dom" ; interface ClientProps extends Props { class ? : string ; } export function Client ( props ) { const [ clientRequested , setClientRequested ] = useState < boolean > ( false ) ; if ( props . requestClientId === undefined && props . clientId === null ) { return null ; } if ( props . clientId === null ) { const requestLogin = ( ) => { if ( props . requestClientId === undefined ) { return ; } setClientRequested ( true ) ; props . requestClientId ( true ) . then ( ( clientId ) => { setClientRequested ( false ) ; props . setClientId ( clientId ) ; } ) . catch ( ( e ) => { setClientRequested ( false ) ; console . error ( e ) ; } ) ; } ; return html `
            <div class="flex flex-row justify-center items-center ${ props . class }">
                <div class="h-6 w-6 text-red-800 animate-pulse mr-2">
                    <${ Icons . UserCircle } class="h-6 w-6" />
                </div>
                <div class="border-2 rounded px-4
                    ${ clientRequested ? " text-gray-400 border-gray-400" : "text-blue-400 border-blue-400" } 
                    cursor-pointer" onClick=${ requestLogin }>
                    Login
                </div>
            </div>
        ` ; } const name = props . clientId . id ; async function onDownload ( ) { props . closeSideBar ( ) ; const dos = props . player ( ) ; try { await downloadChanges ( dos ) ; } catch ( e ) { dos . layers . notyf . error ( "Unexpected error" ) ; console . error ( e ) ; } } return html `
        <div class="flex flex-row justify-center ${ props . class }">
            <div class="h-6 w-6 text-green-400 mr-2">
                <${ Icons . UserCircle } class="h-6 w-6" />
            </div>
            <div class="flex-shrink overflow-hidden overflow-ellipsis">${ name }</div>
            <div class="h-6 w-6 ml-2 cursor-pointer" onClick=${ onDownload }>
                <${ Icons . Download } class="h-6 w-6" />
            </div>
        </div>
    ` ; } async function downloadChanges ( dos ) { if ( ! dos . ciPromise ) { return ; } const ci = await dos . ciPromise ; const changes = await ci . persist ( ) ; downloadFile ( changes , "saves.zip" , "application/zip" ) ; }