client-html.html

<v-app>
    <ConnectionStatus />
    <v-layout row>
        <SVGGraph class="w-1/2 h-screen" :player="player" :graph="graph"
        @nodeClick="(node, e) => log('node click', node, e)" @edgeClick="(edge, e) => log('edge click', edge, e)"
        @edgeLabelClick="(edge, e) => log('edge label click', edge, e)"
        :nodeBorderWidth="node => node.isEgo ? 2 : 1"
        :nodeRadius="node => node.isEgo ? 30 : 20">
        <template v-slot:node-content="{ node }">
            <text text-anchor="middle" fill="black">{{node.id}}</text>
            <!-- centered label inside the node-content slot -->
        </template>
        <template v-slot:edge-label="{ edge }">
            <!-- simple centered edge label -->
        </template>
    </SVGGraph>
    <v-flex class="w-1/2 h-screen">
        <v-container style="background: #ebebeb" class="h-full">
            <v-layout column>
                <PlayerTimers :player="player"></PlayerTimers>
                <PlayerText :player="player"></PlayerText>
                <PlayerChoices :player="player"></PlayerChoices>
                <Form :player="player"></Form>
            </v-layout>
        </v-container>
    </v-flex>
</v-layout>
</v-app>