src/test.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link id="favicon" rel="shortcut icon" type="image/png" href="data:image/png;base64,....==" />
    <title>Chaos: Test</title>
    <style>
        html, body {margin: 0; padding: 0;}
        iframe {display: inline-block; width:256px; height:384px; padding: 0; margin: 0; border: 0;}
        iframe.host {display: block; width:768px; height:576px;}
    </style>
</head>
<body>
    <iframe src="index.html?websocket_url=ws://localhost:9800/&channel=test&dialogAction=create&id=host" title="Host" class="host"></iframe>

<script type="module">
setTimeout(()=>{  // allow host to join first to prevent race hazards with channel
    for (let player_name of ['one', 'two', 'thee']) {  // 'five', 'four'
        const iframe = document.createElement('iframe')
        iframe.src = `index.html?websocket_url=ws://${window.location.hostname}:9800/&channel=test&dialogAction=join&id=${player_name}&player_name=${player_name}`
        iframe.title = player_name
        document.body.appendChild(iframe)
    }
}, 500)
</script>
</body>
</html>