diff --git a/site/src/App.vue b/site/src/App.vue
index 5ea7efc..851f672 100644
--- a/site/src/App.vue
+++ b/site/src/App.vue
@@ -7,7 +7,13 @@
 			</template>
 		</v-app-bar>
 		<v-main>
-			<v-container v-if="!playing && !loading">
+			<Game v-if="playing" :game="data" :dealer="true" @action="action" />
+			<v-container v-else-if="loading" class="fill-height">
+				<v-row class="d-flex justify-center">
+					<v-progress-circular class="pa-8" indeterminate size="128"></v-progress-circular>
+				</v-row>
+			</v-container>
+			<v-container v-else>
 				<TheLanding />
 				<v-row v-if="!loadingMe && !me" class="d-flex justify-center">
 					<TheLogin />
@@ -17,34 +23,44 @@
 					<v-btn class="mx-4">Log Out</v-btn>
 				</v-row>
 			</v-container>
-			<v-container v-else-if="loading" class="fill-height">
-				<v-row class="d-flex justify-center">
-					<v-progress-circular class="pa-8" indeterminate size="128"></v-progress-circular>
-				</v-row>
-			</v-container>
-			<Game v-else :game="testGame" :dealer="true" @action="(evt: Action) => action(evt)" />
 		</v-main>
 	</v-app>
 </template>
 
 <script setup lang="ts">
-import { useDark, useToggle } from '@vueuse/core';
-import { computed, onMounted, ref } from 'vue';
-import type { Action, Game } from '@/lib/game';
+import { useDark, useToggle, useWebSocket } from '@vueuse/core';
+import { computed, onMounted, ref, watchEffect } from 'vue';
+import type { Action, Game, GameStart } from '@/lib/game';
 
 const dark = useDark();
 const toggleDark = useToggle(dark);
 const theme = computed(() => dark.value ? 'dark' : 'light');
 const themeIcon = computed(() => dark.value ? 'mdi-moon-waxing-crescent' : 'mdi-white-balance-sunny');
 
-const playing = ref(false);
-const loading = ref(false);
+const { status, data, send, open } = useWebSocket<Game | GameStart>(`wss://${window.location.host}/queue`, { immediate: false });
+const game = ref<Game | null>(null);
+const dealer = ref<boolean | null>(null);
+watchEffect(() => {
+	if (data.value == null) {
+		game.value = null;
+		dealer.value = null;
+		return;
+	}
+	if ('id' in data.value) {
+		// Game start.
+		dealer.value = data.value.dealer;
+		history.replaceState(null, '', `${window.origin}/game/${data.value.id}`);
+		return;
+	}
+	// Game state update.
+	game.value = data.value as Game;
+});
+
+const playing = computed(() => game.value != null);
+const loading = computed(() => status.value === 'CONNECTING' || status.value === 'OPEN' && !playing.value);
+
 function clickPlay() {
-	loading.value = true;
-	setTimeout(() => {
-		playing.value = true;
-		loading.value = false;
-	}, 1000);
+	open();
 }
 
 const testGame = ref<Game>({
@@ -61,7 +77,8 @@ const testGame = ref<Game>({
 });
 
 function action(evt: Action) {
-	console.log(evt);
+	console.log('send action', evt);
+	send(JSON.stringify(action));
 }
 
 const loadingMe = ref(true);
@@ -84,6 +101,5 @@ onMounted(async () => {
 	} catch {
 		me.value = null;
 	}
-	me.value = 'a';
 });
 </script>