import { AzureMember , IAzureAudience } from "@fluidframework/azure-client" ; import { ICustomUserDetails } from "./app" ; import { IDiceRollerController } from "./controller" ; function makeDiceRollerView ( diceRoller ) { const wrapperDiv = document . createElement ( "div" ) ; wrapperDiv . style . textAlign = "center" ; const diceCharDiv = document . createElement ( "div" ) ; diceCharDiv . style . fontSize = "200px" ; const rollButton = document . createElement ( "button" ) ; rollButton . style . fontSize = "50px" ; rollButton . textContent = "Roll" ; rollButton . addEventListener ( "click" , diceRoller . roll ) ; wrapperDiv . append ( diceCharDiv , rollButton ) ; const updateDiceChar = ( ) => { diceCharDiv . textContent = String . fromCodePoint ( 0x267F + diceRoller . value ) ; diceCharDiv . style . color = `hsl(${ diceRoller . value * 60 }, 70%, 50%)` ; } ; updateDiceChar ( ) ; diceRoller . on ( "diceRolled" , updateDiceChar ) ; return wrapperDiv ; } function makeAudienceView ( audience ? ) { if ( audience === undefined ) { const noAudienceDiv = document . createElement ( "div" ) ; noAudienceDiv . textContent = "No audience provided" ; return noAudienceDiv ; } const wrapperDiv = document . createElement ( "div" ) ; wrapperDiv . style . textAlign = "center" ; wrapperDiv . style . margin = "70px" ; const audienceDiv = document . createElement ( "div" ) ; audienceDiv . style . fontSize = "20px" ; const onAudienceChanged = ( ) => { const members = audience . getMembers ( ) ; const self = audience . getMyself ( ) ; const memberStrings = [ ] ; const useAzure = process . env . FLUID_CLIENT === "azure" ; members . forEach ( ( member ) => { if ( member . userId !== self ?. userId ) { if ( useAzure ) { const memberString = `${ member . userName }: {Gender: ${ member . additionalDetails ?. gender },
                        Email: ${ member . additionalDetails ?. email }}` ; memberStrings . push ( memberString ) ; } else { memberStrings . push ( member . userName ) ; } } } ) ; audienceDiv . innerHTML = `
            Current User: ${ self ?. userName } <br />
            Other Users: ${ memberStrings . join ( ", " ) }
        ` ; } ; onAudienceChanged ( ) ; audience . on ( "membersChanged" , onAudienceChanged ) ; wrapperDiv . appendChild ( audienceDiv ) ; return wrapperDiv ; } export function makeAppView ( diceRollerControllers , audience ? ) { const diceRollerViews = diceRollerControllers . map ( makeDiceRollerView ) ; const audienceView = makeAudienceView ( audience ) ; const wrapperDiv = document . createElement ( "div" ) ; wrapperDiv . append ( ... diceRollerViews , audienceView ) ; return wrapperDiv ; }