From 7d97ad12eef336669a4bdc4f004aa645cfd619c8 Mon Sep 17 00:00:00 2001
From: jkrumm <jkrumm@pm.me>
Date: Mon, 15 Jan 2024 19:36:47 +0100
Subject: [PATCH] feat(v2): room state persisted in Redis & TRPC endpoints to
 update state

This way the clients don't confuse each other with individual problems or race conditions.

Closes #65
---
 .gitignore                                    |   1 +
 src/components/room/interactions.tsx          | 135 +++++-------
 src/components/room/room-wrapper.tsx          |  53 +++--
 src/components/room/room.tsx                  |  47 ++++
 src/components/room/table.tsx                 | 169 +++++---------
 src/components/room/username-model.tsx        |   1 -
 src/components/room/websocket-receiver.tsx    | 123 -----------
 src/env.mjs                                   |   8 +
 src/hooks/use-heartbeat.hook.ts               |  40 ++++
 src/hooks/use-room-state.hook.ts              |  55 +++++
 src/hooks/use-tracking.hook.ts                |  23 +-
 src/pages/api/ably-token.ts                   |   7 +-
 src/server/api/root.ts                        |   2 +
 src/server/room-state/room-state.entity.ts    | 208 ++++++++++++++++++
 .../room-state/room-state.repository.ts       | 106 +++++++++
 src/server/room-state/room-state.router.ts    | 175 +++++++++++++++
 src/store/local-storage.store.ts              |  12 +-
 src/store/room-state.store.ts                 |  74 +++++++
 src/store/ws.store.ts                         | 150 -------------
 src/styles/globals.css                        |   6 +
 20 files changed, 889 insertions(+), 506 deletions(-)
 create mode 100644 src/components/room/room.tsx
 delete mode 100644 src/components/room/websocket-receiver.tsx
 create mode 100644 src/hooks/use-heartbeat.hook.ts
 create mode 100644 src/hooks/use-room-state.hook.ts
 create mode 100644 src/server/room-state/room-state.entity.ts
 create mode 100644 src/server/room-state/room-state.repository.ts
 create mode 100644 src/server/room-state/room-state.router.ts
 create mode 100644 src/store/room-state.store.ts
 delete mode 100644 src/store/ws.store.ts

diff --git a/.gitignore b/.gitignore
index e713fbb..e73f7a0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -34,6 +34,7 @@ yarn-error.log*
 # do not commit any .env files to git, except for the .env.example file. https://create.t3.gg/en/usage/env-variables#using-environment-variables
 .env
 .env*.local
+.envrc
 
 # vercel
 .vercel
diff --git a/src/components/room/interactions.tsx b/src/components/room/interactions.tsx
index bc52f56..630b323 100644
--- a/src/components/room/interactions.tsx
+++ b/src/components/room/interactions.tsx
@@ -1,56 +1,47 @@
 import { Button, Switch } from "@mantine/core";
 import { notifications } from "@mantine/notifications";
-import { type PresenceUpdate, useWsStore } from "fpp/store/ws.store";
-import { useEffect, useRef } from "react";
+import { useRef } from "react";
 import { useRouter } from "next/router";
-import { useLocalstorageStore } from "fpp/store/local-storage.store";
 import { fibonacciSequence } from "fpp/constants/fibonacci.constant";
 import { type Logger } from "next-axiom";
 import { logMsg, roomEvent } from "fpp/constants/logging.constant";
 import { RouteType } from "fpp/server/db/schema";
+import { useRoomStateStore } from "fpp/store/room-state.store";
+import { useLocalstorageStore } from "fpp/store/local-storage.store";
+import { api } from "fpp/utils/api";
 
 export const Interactions = ({
   roomId,
   roomReadable,
-  username,
+  userId,
   logger,
 }: {
   roomId: number;
   roomReadable: string;
-  username: string;
+  userId: string;
   logger: Logger;
 }) => {
   const router = useRouter();
 
-  const clientId = useWsStore((store) => store.clientId);
-  const channel = useWsStore((store) => store.channel);
-
-  const userId = useLocalstorageStore((state) => state.userId);
-  const voting = useLocalstorageStore((store) => store.voting);
-  const setVoting = useLocalstorageStore((store) => store.setVoting);
-  const setSpectator = useLocalstorageStore((store) => store.setSpectator);
   const setRoomId = useLocalstorageStore((store) => store.setRoomId);
   const setRoomReadable = useLocalstorageStore(
     (store) => store.setRoomReadable,
   );
 
-  const votes = useWsStore((store) => store.votes);
-  const spectators = useWsStore((store) => store.spectators);
-  const presences = useWsStore((store) => store.presences);
-  const flipped = useWsStore((store) => store.flipped);
-  const autoShow = useWsStore((store) => store.autoShow);
+  // User state
+  const estimation = useRoomStateStore((store) => store.estimation);
+  const estimateMutation = api.roomState.estimate.useMutation();
+  const isSpectator = useRoomStateStore((store) => store.isSpectator);
+  const setIsSpectator = useLocalstorageStore((store) => store.setIsSpectator);
+  const spectatorMutation = api.roomState.spectator.useMutation();
+  const leaveMutation = api.roomState.leave.useMutation();
 
-  useEffect(() => {
-    if (!channel || !clientId) return;
-    const presenceUpdate: PresenceUpdate = {
-      username,
-      voting,
-      spectator: spectators.includes(clientId),
-      presencesLength: presences.length,
-    };
-    logger.debug("SEND OWN PRESENCE ON INIT", presenceUpdate);
-    channel.presence.update(presenceUpdate);
-  }, [channel]);
+  // Room state
+  const isFlipped = useRoomStateStore((store) => store.isFlipped);
+  const resetMutation = api.roomState.reset.useMutation();
+  const isAutoFlip = useRoomStateStore((store) => store.isAutoFlip);
+  const autoFlipMutation = api.roomState.autoFlip.useMutation();
+  const resetRoomState = useRoomStateStore((store) => store.reset);
 
   const roomRef = useRef(null);
 
@@ -67,16 +58,15 @@ export const Interactions = ({
             <h2
               className="uppercase"
               ref={roomRef}
-              onKeyPress={() => ({})}
-              // eslint-disable-next-line @typescript-eslint/no-misused-promises
-              onClick={async () => {
+              onClick={() => {
                 if (!window.location) {
                   return;
                 }
                 if ("clipboard" in navigator) {
-                  await navigator.clipboard.writeText(
-                    window.location.toString(),
-                  );
+                  navigator.clipboard
+                    .writeText(window.location.toString())
+                    .then(() => ({}))
+                    .catch(() => ({}));
                 } else {
                   document.execCommand(
                     "copy",
@@ -102,15 +92,16 @@ export const Interactions = ({
           </Button>
           <div>
             <Button
-              variant={flipped ? "default" : "filled"}
-              disabled={flipped}
+              variant={isFlipped ? "filled" : "default"}
               className={"mr-5"}
               onClick={() => {
-                if (!channel) return;
-                channel.publish("reset", {});
+                resetMutation.mutate({
+                  roomId,
+                  userId,
+                });
               }}
             >
-              New Round
+              {isFlipped ? "New Round" : "Reset"}
             </Button>
             <Button
               variant={"default"}
@@ -123,7 +114,11 @@ export const Interactions = ({
                 });
                 setRoomId(null);
                 setRoomReadable(null);
-                setVoting(null);
+                leaveMutation.mutate({
+                  roomId,
+                  userId,
+                });
+                resetRoomState();
                 router
                   .push(`/`)
                   .then(() => ({}))
@@ -138,31 +133,17 @@ export const Interactions = ({
           <Button.Group className="w-full">
             {fibonacciSequence.map((number) => (
               <Button
-                disabled={
-                  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                  (clientId && spectators.includes(clientId)) || !flipped
-                }
-                variant={
-                  votes.some(
-                    (item) =>
-                      item.clientId === clientId && item.number === number,
-                  )
-                    ? "filled"
-                    : "default"
-                }
+                disabled={isSpectator || isFlipped}
+                variant={estimation === number ? "filled" : "default"}
                 size={"lg"}
                 fullWidth
                 key={number}
                 onClick={() => {
-                  if (!channel || !clientId) return;
-                  setVoting(number);
-                  const presenceUpdate: PresenceUpdate = {
-                    username,
-                    voting: number,
-                    spectator: spectators.includes(clientId),
-                    presencesLength: presences.length,
-                  };
-                  channel.presence.update(presenceUpdate);
+                  estimateMutation.mutate({
+                    roomId,
+                    userId,
+                    estimation: estimation === number ? null : number,
+                  });
                 }}
               >
                 {number}
@@ -174,31 +155,27 @@ export const Interactions = ({
       <div className="switch-bar">
         <Switch
           className="mb-2 cursor-pointer"
-          disabled={!flipped}
+          disabled={isFlipped}
           label="Spectator"
-          checked={clientId ? spectators.includes(clientId) : false}
+          checked={isSpectator}
           onChange={(event) => {
-            if (!channel) return;
-            setSpectator(event.currentTarget.checked);
-            setVoting(null);
-            const presenceUpdate: Partial<PresenceUpdate> = {
-              username,
-              voting: null,
-              spectator: event.currentTarget.checked,
-              presencesLength: presences.length,
-            };
-            channel.presence.update(presenceUpdate);
+            setIsSpectator(event.currentTarget.checked);
+            spectatorMutation.mutate({
+              roomId,
+              userId,
+              isSpectator: event.currentTarget.checked,
+            });
           }}
         />
         <Switch
-          label="Auto Show"
-          disabled={true}
+          label="Auto Flip"
           className="cursor-pointer"
-          checked={autoShow}
+          checked={isAutoFlip}
           onChange={(event) => {
-            if (!channel) return;
-            channel.publish("auto-show", {
-              autoShow: event.currentTarget.checked,
+            autoFlipMutation.mutate({
+              roomId,
+              userId,
+              isAutoFlip: event.currentTarget.checked,
             });
           }}
         />
diff --git a/src/components/room/room-wrapper.tsx b/src/components/room/room-wrapper.tsx
index e941e2b..10f7800 100644
--- a/src/components/room/room-wrapper.tsx
+++ b/src/components/room/room-wrapper.tsx
@@ -3,9 +3,6 @@
 import React, { useEffect } from "react";
 import { useRouter } from "next/router";
 import { UsernameModel } from "fpp/components/room/username-model";
-import { Table } from "fpp/components/room/table";
-import { WebsocketReceiver } from "fpp/components/room/websocket-receiver";
-import { Interactions } from "fpp/components/room/interactions";
 import { useLocalstorageStore } from "fpp/store/local-storage.store";
 import { sendTrackPageView } from "fpp/hooks/use-tracking.hook";
 import { useLogger } from "next-axiom";
@@ -13,9 +10,12 @@ import { logMsg, roomEvent } from "fpp/constants/logging.constant";
 import { type ClientLog } from "fpp/constants/error.constant";
 import { api } from "fpp/utils/api";
 import { RouteType } from "fpp/server/db/schema";
-import { configureAbly } from "@ably-labs/react-hooks";
 import { env } from "fpp/env.mjs";
 import { Loader } from "@mantine/core";
+import * as Ably from "ably";
+import { AblyProvider } from "ably/react";
+import { Room } from "fpp/components/room/room";
+import { useRoomStateStore } from "fpp/store/room-state.store";
 
 const RoomWrapper = () => {
   const router = useRouter();
@@ -23,10 +23,18 @@ const RoomWrapper = () => {
 
   const username = useLocalstorageStore((store) => store.username);
   const userId = useLocalstorageStore((state) => state.userId);
-  const setUserId = useLocalstorageStore((state) => state.setUserId);
+  const setUserIdLocalStorage = useLocalstorageStore(
+    (state) => state.setUserId,
+  );
 
+  const setUserIdRoomState = useRoomStateStore((state) => state.setUserId);
   if (userId) {
-    configureAbly({
+    setUserIdRoomState(userId);
+  }
+
+  let ablyClient;
+  if (userId) {
+    ablyClient = new Ably.Realtime.Promise({
       authUrl: `${env.NEXT_PUBLIC_API_ROOT}api/ably-token`,
       clientId: userId,
     });
@@ -42,9 +50,6 @@ const RoomWrapper = () => {
   );
   const setRecentRoom = useLocalstorageStore((store) => store.setRecentRoom);
 
-  const setVoting = useLocalstorageStore((store) => store.setVoting);
-  const setSpectator = useLocalstorageStore((store) => store.setSpectator);
-
   const [firstLoad, setFirstLoad] = React.useState(true);
   const [modelOpen, setModelOpen] = React.useState(false);
 
@@ -105,17 +110,16 @@ const RoomWrapper = () => {
       joinRoomMutation.mutate(
         { roomReadable: queryRoom },
         {
-          onSuccess: (data) => {
-            setRoomId(data.roomId);
-            setRoomReadable(data.roomReadable);
-            setRecentRoom(data.roomReadable);
-            setVoting(null);
-            setSpectator(false);
+          onSuccess: ({ roomId, roomReadable }) => {
+            setRoomId(roomId);
+            setRoomReadable(roomReadable);
+            setRecentRoom(roomReadable);
             sendTrackPageView({
               userId,
               route: RouteType.ROOM,
-              roomId: data.roomId,
-              setUserId,
+              roomId,
+              setUserIdLocalStorage,
+              setUserIdRoomState,
               logger,
             });
           },
@@ -143,22 +147,17 @@ const RoomWrapper = () => {
             />
           );
         }
-        if (roomId && roomReadable) {
+        if (roomId && userId && ablyClient && roomReadable) {
           return (
-            <>
-              <WebsocketReceiver
-                username={username}
-                roomId={roomId}
-                logger={logger}
-              />
-              <Table roomId={roomId} username={username} logger={logger} />
-              <Interactions
+            <AblyProvider client={ablyClient}>
+              <Room
                 roomId={roomId}
                 roomReadable={roomReadable}
+                userId={userId}
                 username={username}
                 logger={logger}
               />
-            </>
+            </AblyProvider>
           );
         }
         return <Loader variant="bars" />;
diff --git a/src/components/room/room.tsx b/src/components/room/room.tsx
new file mode 100644
index 0000000..93a7085
--- /dev/null
+++ b/src/components/room/room.tsx
@@ -0,0 +1,47 @@
+import { type Logger } from "next-axiom";
+import { Table } from "fpp/components/room/table";
+import { Interactions } from "fpp/components/room/interactions";
+import React from "react";
+import { useHeartbeat } from "fpp/hooks/use-heartbeat.hook";
+import { useRoomState } from "fpp/hooks/use-room-state.hook";
+
+export const Room = ({
+  roomId,
+  roomReadable,
+  userId,
+  username,
+  logger,
+}: {
+  roomId: number;
+  roomReadable: string;
+  userId: string;
+  username: string;
+  logger: Logger;
+}) => {
+  // Listen to room state updates
+  useRoomState({
+    roomId,
+    userId,
+    username,
+    logger,
+  });
+
+  // Send heartbeats every 10 seconds
+  useHeartbeat({
+    roomId,
+    userId,
+    logger,
+  });
+
+  return (
+    <>
+      <Table roomId={roomId} userId={userId} logger={logger} />
+      <Interactions
+        roomId={roomId}
+        roomReadable={roomReadable}
+        userId={userId}
+        logger={logger}
+      />
+    </>
+  );
+};
diff --git a/src/components/room/table.tsx b/src/components/room/table.tsx
index 6b929c3..ed4d156 100644
--- a/src/components/room/table.tsx
+++ b/src/components/room/table.tsx
@@ -1,138 +1,83 @@
 "use client";
 
-import { useWsStore } from "fpp/store/ws.store";
-import { Button } from "@mantine/core";
 import React from "react";
 import { api } from "fpp/utils/api";
 import { type Logger } from "next-axiom";
+import { useRoomStateStore } from "fpp/store/room-state.store";
+import { Button } from "@mantine/core";
 
 export const Table = ({
   roomId,
-  username,
+  userId,
   logger,
 }: {
   roomId: number;
-  username: string;
+  userId: string;
   logger: Logger;
 }) => {
-  const channel = useWsStore((store) => store.channel);
-
-  const votes = useWsStore((store) => store.votes);
-  const flipped = useWsStore((store) => store.flipped);
-  const spectators = useWsStore((store) => store.spectators);
-  const presences = useWsStore((store) => store.presences);
-  const presencesMap = useWsStore((store) => store.presencesMap);
-
-  const sendVote = api.vote.vote.useMutation();
-
-  function flip() {
-    sendVote.mutate({
-      roomId,
-      estimations: votes
-        .filter((vote) => vote !== null)
-        .map((vote) => vote.number!),
-      duration: 0,
-      amountOfSpectators: spectators.length,
-    });
-    if (channel) {
-      logger.debug("FLIPPED", {});
-      channel.publish("flip", {});
-    }
-  }
-
-  const players = presences.map((item) => {
-    const vote = votes.find((vote) => vote.clientId === item);
-    let status = "pending";
-    if (spectators.includes(item)) {
-      status = "spectator";
-    } else if (vote) {
-      status = "voted";
-    }
-    return {
-      name: presencesMap.get(item),
-      card: vote?.number ?? null,
-      status,
-    };
-  });
-
-  let voting: { number: number; amount: number }[] = [];
-  votes.forEach((item) => {
-    if (!item.number) return;
-    const index = voting.findIndex((v) => v.number === item.number);
-    if (index === -1) {
-      voting.push({ number: item.number, amount: 1 });
-    } else if (index > -1) {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      voting[index].amount++;
-    }
-  });
-  voting = voting.filter((item) => item.number != null);
-
-  const average =
-    Math.round(
-      (voting.reduce((acc, item) => {
-        return acc + item.number * item.amount;
-      }, 0) /
-        voting.reduce((acc, item) => acc + item.amount, 0)) *
-        10,
-    ) / 10 || null;
+  const users = useRoomStateStore((store) => store.users);
+  const isFlipped = useRoomStateStore((store) => store.isFlipped);
+  const isFlippable = useRoomStateStore((store) => store.isFlippable);
+  const averageEstimation = useRoomStateStore(
+    (store) => store.averageEstimation,
+  );
+  const stackedEstimations = useRoomStateStore(
+    (store) => store.stackedEstimations,
+  );
 
-  voting = voting.sort((a, b) => b.amount - a.amount).slice(0, 4);
-  if (average && average > 10) {
-    voting = voting.slice(0, 3);
-  }
+  const flipMutation = api.roomState.flip.useMutation();
 
   return (
     <div className="table">
       <div className="card-place">
-        {!flipped &&
-          voting.map((item, index) => (
-            <div key={index} className={`card-wrapper amount-${item.amount}`}>
-              {(function () {
-                const cards = [];
-                for (let i = 0; i < item.amount; i++) {
-                  cards.push(
-                    <div className="card" key={i}>
-                      {item.number}
-                    </div>,
-                  );
-                }
-                return cards;
-              })()}
-            </div>
-          ))}
-        {!flipped && <div className="average">{average}</div>}
-        {(function () {
-          if (flipped) {
-            if (
-              players.some((item) => item.status !== "spectator") &&
-              players
-                .filter((item) => item.status !== "spectator")
-                .every((item) => item.status === "voted")
-            ) {
-              return (
-                <div className="relative flex h-full w-full items-center justify-center">
-                  <Button size="lg" className="center" onClick={flip}>
-                    Show Votes
-                  </Button>
-                </div>
-              );
-            }
-            return <div className="vote">VOTE</div>;
-          }
-        })()}
+        {isFlipped && (
+          <>
+            {stackedEstimations.slice(0, 4).map((item, index) => (
+              <div key={index} className={`card-wrapper amount-${item.amount}`}>
+                {(function () {
+                  const cards = [];
+                  for (let i = 0; i < item.amount; i++) {
+                    cards.push(
+                      <div className="card" key={i}>
+                        {item.number}
+                      </div>,
+                    );
+                  }
+                  return cards;
+                })()}
+              </div>
+            ))}
+            <div className="average">{averageEstimation}</div>
+          </>
+        )}
+        {!isFlipped && !isFlippable && <div className="vote">VOTE</div>}
+        {!isFlipped && isFlippable && (
+          <div className="relative flex h-full w-full items-center justify-center">
+            <Button
+              size="lg"
+              className="center"
+              onClick={() => {
+                flipMutation.mutate({
+                  roomId,
+                  userId,
+                });
+              }}
+            >
+              Show Votes
+            </Button>
+          </div>
+        )}
       </div>
 
       <div className="players">
-        {players.map(({ name, card, status }, index) => (
+        {users.map((user, index) => (
           <div key={index} className={`player player-${index + 1}`}>
-            <div className={`avatar bg-gray-800 ${status}`} />
-            <div className={`name ${name === username && "font-bold"}`}>
-              {name}
+            <div className={`avatar bg-gray-800 ${user.status}`} />
+            <div className={`name ${user.id === userId && "font-bold"}`}>
+              {user.name}
             </div>
-            <div className={`card ${flipped && "flipped"} ${status}`}>
-              {card}
+            <div className={`card ${isFlipped && "flipped"} ${user.status}`}>
+              {user.estimation}
             </div>
           </div>
         ))}
diff --git a/src/components/room/username-model.tsx b/src/components/room/username-model.tsx
index 58050c1..8538f1f 100644
--- a/src/components/room/username-model.tsx
+++ b/src/components/room/username-model.tsx
@@ -12,7 +12,6 @@ export const UsernameModel = ({
   room: string | undefined;
 }) => {
   const [error, setError] = useState(false);
-
   const [inputUsername, setInputUsername] = useState("");
 
   const setUsername = useLocalstorageStore((store) => store.setUsername);
diff --git a/src/components/room/websocket-receiver.tsx b/src/components/room/websocket-receiver.tsx
deleted file mode 100644
index 52d1c94..0000000
--- a/src/components/room/websocket-receiver.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-"use client";
-
-import { useChannel, usePresence } from "@ably-labs/react-hooks";
-import { type PresenceUpdate, useWsStore } from "fpp/store/ws.store";
-import { useEffect } from "react";
-import * as process from "process";
-import { useLocalstorageStore } from "fpp/store/local-storage.store";
-import { sendTrackEstimation } from "fpp/utils/send-track-estimation.util";
-import { type Logger } from "next-axiom";
-import { Types } from "ably";
-import PresenceMessage = Types.PresenceMessage;
-
-export const WebsocketReceiver = ({
-  roomId,
-  username,
-  logger,
-}: {
-  roomId: number;
-  username: string;
-  logger: Logger;
-}) => {
-  const voting = useLocalstorageStore((store) => store.voting);
-  const setVoting = useLocalstorageStore((store) => store.setVoting);
-  const spectator = useLocalstorageStore((store) => store.spectator);
-  const userId = useLocalstorageStore((store) => store.userId);
-
-  const wsChannel = useWsStore((store) => store.channel);
-  const setChannel = useWsStore((store) => store.setChannel);
-  const clientId = useWsStore((store) => store.clientId);
-
-  const presences = useWsStore((store) => store.presences);
-
-  const handleMessage = useWsStore((store) => store.handleMessage);
-  const updatePresences = useWsStore((store) => store.updatePresences);
-
-  const [channel] = useChannel(`room:${roomId}`, (message) => {
-    logger.debug("RECEIVED MESSAGE", message);
-    if (message.name === "flip") {
-      const localVoting = localStorage.getItem("vote");
-      const localSpectator = localStorage.getItem("spectator");
-      sendTrackEstimation({
-        userId,
-        roomId,
-        estimation: localVoting ? parseInt(localVoting) : null,
-        spectator: localSpectator === "true",
-        logger,
-      });
-    }
-    if (["flip", "reset"].includes(message.name)) {
-      setVoting(null);
-    }
-    handleMessage(message);
-  });
-
-  if (!wsChannel && channel) {
-    setChannel(channel);
-  }
-
-  useEffect(() => {
-    channel.presence.get((err, presenceUpdates) => {
-      if (!presenceUpdates?.length) {
-        return;
-      }
-      presenceUpdates.forEach((presenceUpdate) => {
-        logger.debug("FETCHED PRESENCE", {
-          userId,
-          action: presenceUpdate.action,
-          username,
-          voting,
-          spectator,
-          // presenceLength: presenceUpdate.presencesLength,
-        });
-        updatePresences(presenceUpdate);
-      });
-    });
-  }, [clientId]);
-
-  usePresence(`room:${roomId}`, { username }, (presenceUpdate) => {
-    const presenceUpdateBody: PresenceUpdate = {
-      username,
-      voting,
-      spectator,
-      presencesLength: presences.length,
-    };
-    if (presenceUpdate.action === "enter") {
-      logger.debug("SEND OWN PRESENCE ON ENTER", {
-        username,
-        voting,
-        spectator,
-      });
-      channel.presence.update(presenceUpdateBody);
-    }
-    logger.debug("RECEIVED PRESENCE", {
-      userId,
-      action: presenceUpdate.action,
-      username,
-      voting,
-      spectator,
-      // presenceLength: presenceUpdate.presencesLength,
-    });
-    updatePresences(presenceUpdate as PresenceMessage);
-    // everyone resends presence if presencesLength is not the same as the one it received
-    const presencesLength = (
-      presenceUpdate.data as unknown as {
-        data: { presencesLength: number | undefined } | undefined;
-      }
-    )?.data?.presencesLength;
-    if (presencesLength && presences.length !== presencesLength) {
-      channel.presence.update(presenceUpdateBody);
-    }
-  });
-
-  if (process.browser) {
-    window.onbeforeunload = () => {
-      channel.presence.leave({}, () => {
-        logger.debug("LEFT CHANNEL", { action: "left", clientId });
-        return;
-      });
-    };
-  }
-
-  return <div>test</div>;
-};
diff --git a/src/env.mjs b/src/env.mjs
index eb1e17e..6515325 100644
--- a/src/env.mjs
+++ b/src/env.mjs
@@ -19,7 +19,10 @@ export const env = createEnv({
     NEXT_PUBLIC_SENTRY_DSN: z.string().url(),
     UPSTASH_REDIS_REST_URL: z.string().url(),
     UPSTASH_REDIS_REST_TOKEN: z.string(),
+    UPSTASH_REDIS_REST_URL_ROOM_STATE: z.string().url(),
+    UPSTASH_REDIS_REST_TOKEN_ROOM_STATE: z.string(),
     ABLY_API_KEY: z.string(),
+    ABLY_API_KEY_BASE64: z.string(),
     TARGET_EMAIL: z.string().email(),
     SEND_EMAIL: z.string().email(),
     SEND_EMAIL_PASSWORD: z.string(),
@@ -44,7 +47,12 @@ export const env = createEnv({
     NEXT_PUBLIC_NODE_ENV: process.env.NODE_ENV,
     UPSTASH_REDIS_REST_URL: process.env.UPSTASH_REDIS_REST_URL,
     UPSTASH_REDIS_REST_TOKEN: process.env.UPSTASH_REDIS_REST_TOKEN,
+    UPSTASH_REDIS_REST_URL_ROOM_STATE:
+      process.env.UPSTASH_REDIS_REST_URL_ROOM_STATE,
+    UPSTASH_REDIS_REST_TOKEN_ROOM_STATE:
+      process.env.UPSTASH_REDIS_REST_TOKEN_ROOM_STATE,
     ABLY_API_KEY: process.env.ABLY_API_KEY,
+    ABLY_API_KEY_BASE64: btoa(process.env.ABLY_API_KEY || ""),
     TARGET_EMAIL: process.env.TARGET_EMAIL,
     SEND_EMAIL: process.env.SEND_EMAIL,
     SEND_EMAIL_PASSWORD: process.env.SEND_EMAIL_PASSWORD,
diff --git a/src/hooks/use-heartbeat.hook.ts b/src/hooks/use-heartbeat.hook.ts
new file mode 100644
index 0000000..902ef00
--- /dev/null
+++ b/src/hooks/use-heartbeat.hook.ts
@@ -0,0 +1,40 @@
+import { api } from "fpp/utils/api";
+import { useEffect, useRef } from "react";
+import { type Logger } from "next-axiom";
+import { useRoomStateStore } from "fpp/store/room-state.store";
+
+export const useHeartbeat = ({
+  roomId,
+  userId,
+  logger,
+}: {
+  roomId: number;
+  userId: string;
+  logger: Logger;
+}) => {
+  const heartbeatMutation = api.roomState.heartbeat.useMutation();
+  const heartbeat = useRef(Date.now());
+
+  const isConnecting = useRoomStateStore((store) => store.isConnecting);
+
+  // TODO: respect own room state updates and don't send heartbeat
+
+  useEffect(() => {
+    if (isConnecting) return;
+    const interval = setInterval(() => {
+      if (Date.now() - heartbeat.current > 1000 * 12) {
+        const conservativeHeartbeat = Date.now();
+        heartbeatMutation.mutate(
+          { roomId, userId },
+          {
+            onSuccess: () => {
+              heartbeat.current = conservativeHeartbeat;
+            },
+          },
+        );
+      }
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [isConnecting]);
+};
diff --git a/src/hooks/use-room-state.hook.ts b/src/hooks/use-room-state.hook.ts
new file mode 100644
index 0000000..7b74770
--- /dev/null
+++ b/src/hooks/use-room-state.hook.ts
@@ -0,0 +1,55 @@
+import { type Logger } from "next-axiom";
+import { useChannel } from "ably/react";
+import { useRoomStateStore } from "fpp/store/room-state.store";
+import {
+  RoomStateClient,
+  type RoomStateDto,
+} from "fpp/server/room-state/room-state.entity";
+import { useEffect } from "react";
+import { api } from "fpp/utils/api";
+import { useLocalstorageStore } from "fpp/store/local-storage.store";
+
+export const useRoomState = ({
+  roomId,
+  userId,
+  username,
+  logger,
+}: {
+  roomId: number;
+  userId: string;
+  username: string;
+  logger: Logger;
+}) => {
+  const isSpectator = useLocalstorageStore((store) => store.isSpectator);
+
+  const updateRoomState = useRoomStateStore((store) => store.update);
+  const setIsConnecting = useRoomStateStore((store) => store.setIsConnecting);
+  const isConnecting = useRoomStateStore((store) => store.isConnecting);
+
+  const enterRoomMutation = api.roomState.enter.useMutation();
+
+  useEffect(() => {
+    if (!isConnecting) return;
+    enterRoomMutation.mutate(
+      {
+        roomId,
+        userId,
+        username,
+        isSpectator,
+      },
+      {
+        onSuccess: (roomStateJson) => {
+          updateRoomState(
+            RoomStateClient.fromJson(roomStateJson as RoomStateDto),
+          );
+          setIsConnecting(false);
+        },
+      },
+    );
+  }, []);
+
+  useChannel(`room:${roomId}`, "room-state", (message) => {
+    logger.debug("RECEIVED ROOM-STATE MESSAGE", message);
+    updateRoomState(RoomStateClient.fromJson(message.data as RoomStateDto));
+  });
+};
diff --git a/src/hooks/use-tracking.hook.ts b/src/hooks/use-tracking.hook.ts
index 1ef5c1e..6deb9e6 100644
--- a/src/hooks/use-tracking.hook.ts
+++ b/src/hooks/use-tracking.hook.ts
@@ -12,10 +12,20 @@ export const useTrackPageView = (
   roomId?: number,
 ) => {
   const userId = useLocalstorageStore((state) => state.userId);
-  const setUserId = useLocalstorageStore((state) => state.setUserId);
+  const setUserIdLocalStorage = useLocalstorageStore(
+    (state) => state.setUserId,
+  );
+  const setUserIdRoomState = useLocalstorageStore((state) => state.setUserId);
 
   useEffect(() => {
-    sendTrackPageView({ userId, route, roomId, setUserId, logger });
+    sendTrackPageView({
+      userId,
+      route,
+      roomId,
+      setUserIdLocalStorage,
+      setUserIdRoomState,
+      logger,
+    });
   }, [route, roomId]);
 };
 
@@ -23,13 +33,15 @@ export const sendTrackPageView = ({
   userId,
   route,
   roomId,
-  setUserId,
+  setUserIdLocalStorage,
+  setUserIdRoomState,
   logger,
 }: {
   userId: string | null;
   route: keyof typeof RouteType;
   roomId?: number;
-  setUserId: (userId: string) => void;
+  setUserIdLocalStorage: (userId: string) => void;
+  setUserIdRoomState: (userId: string) => void;
   logger: Logger;
 }) => {
   logger.with({ userId, route, roomId });
@@ -51,7 +63,8 @@ export const sendTrackPageView = ({
       fetch(url, { body, method: "POST", keepalive: true })
         .then((res) => res.json() as Promise<{ userId: string }>)
         .then(({ userId }) => {
-          setUserId(userId);
+          setUserIdLocalStorage(userId);
+          setUserIdRoomState(userId);
           logger.debug(logEndpoint.TRACK_PAGE_VIEW, {
             withBeacon: false,
           });
diff --git a/src/pages/api/ably-token.ts b/src/pages/api/ably-token.ts
index f3647f0..51b9b87 100644
--- a/src/pages/api/ably-token.ts
+++ b/src/pages/api/ably-token.ts
@@ -33,7 +33,7 @@ const AblyToken = withLogger(async (request: AxiomRequest) => {
     const body = {
       keyName: keyName,
       ttl: 60 * 60 * 1000,
-      capability: '{"room:*":["subscribe","publish","presence","history"]}',
+      capability: '{"room:*":["subscribe"]}',
       clientId,
       timestamp: Date.now(),
       nonce: crypto.randomUUID(),
@@ -68,9 +68,10 @@ const AblyToken = withLogger(async (request: AxiomRequest) => {
         method: "POST",
       },
     );
-    const tokenRequest = (await tokenRequestReq.json()) as object;
 
-    return NextResponse.json(tokenRequest);
+    const tokenRequest = (await tokenRequestReq.json()) as { token: string };
+
+    return NextResponse.json(tokenRequest.token);
   } catch (e) {
     throw e;
   }
diff --git a/src/server/api/root.ts b/src/server/api/root.ts
index f7dd1c8..d4eecf0 100644
--- a/src/server/api/root.ts
+++ b/src/server/api/root.ts
@@ -5,8 +5,10 @@ import { trackingRouter } from "fpp/server/api/routers/tracking.router";
 import { voteRouter } from "fpp/server/api/routers/vote.router";
 import { roadmapRouter } from "fpp/server/api/routers/roadmap.router";
 import { featureFlagRouter } from "fpp/server/api/routers/feature-flag.router";
+import { roomStateRouter } from "fpp/server/room-state/room-state.router";
 
 export const appRouter = createTRPCRouter({
+  roomState: roomStateRouter,
   contact: contactRouter,
   featureFlag: featureFlagRouter,
   room: roomRouter,
diff --git a/src/server/room-state/room-state.entity.ts b/src/server/room-state/room-state.entity.ts
new file mode 100644
index 0000000..bf2eec5
--- /dev/null
+++ b/src/server/room-state/room-state.entity.ts
@@ -0,0 +1,208 @@
+export interface CreateUserDto {
+  id: string;
+  name: string;
+  estimation: number | null;
+  isSpectator: boolean;
+}
+
+export interface RoomStateDto {
+  id: number;
+  lastUpdated: number;
+  users: CreateUserDto[];
+  isFlipped: boolean;
+  isAutoFlip: boolean;
+}
+
+export class User {
+  readonly id: string;
+  readonly name: string;
+  estimation: number | null = null;
+  isSpectator: boolean;
+
+  get status(): "spectator" | "voted" | "pending" {
+    if (this.isSpectator) {
+      return "spectator";
+    }
+    if (this.estimation) {
+      return "voted";
+    }
+    return "pending";
+  }
+
+  constructor({ id, name, estimation, isSpectator }: CreateUserDto) {
+    this.id = id;
+    this.name = name;
+    this.estimation = estimation;
+    this.isSpectator = isSpectator;
+  }
+}
+
+class RoomStateBase {
+  readonly id: number;
+  lastUpdated: number;
+
+  users: User[] = [];
+  isFlipped = false;
+  isAutoFlip = false;
+
+  static fromJson<T extends RoomStateBase>(
+    this: new (id: number) => T,
+    roomStateJson: RoomStateDto,
+  ) {
+    const roomState = new this(roomStateJson.id);
+    roomState.lastUpdated = roomStateJson.lastUpdated;
+    roomState.users = roomStateJson.users.map((user) => new User(user));
+    roomState.isFlipped = roomStateJson.isFlipped;
+    roomState.isAutoFlip = roomStateJson.isAutoFlip;
+    return roomState;
+  }
+
+  get isFlippable() {
+    return (
+      this.users.every(
+        (user) => user.estimation !== null || user.isSpectator,
+      ) && this.users.some((user) => !user.isSpectator)
+    );
+  }
+
+  getUser(userId: string | null) {
+    if (!userId) {
+      throw new Error(`User not found - userId not given`);
+    }
+    const user = this.users.find((user) => user.id === userId);
+    if (!user) {
+      throw new Error(`User not found - userId ${userId} not found`);
+    }
+    return user;
+  }
+
+  constructor(id: number) {
+    this.id = id;
+    this.lastUpdated = Date.now();
+  }
+
+  toJson() {
+    return {
+      users: this.users,
+      isFlipped: this.isFlipped,
+      isAutoFlip: this.isAutoFlip,
+      isFlippable: this.isFlippable,
+    };
+  }
+}
+
+export class RoomStateClient extends RoomStateBase {
+  calculateAverage(): number {
+    const estimations = this.users
+      .filter((user) => user.estimation !== null)
+      .map((user) => user.estimation) as number[];
+    if (estimations.length === 0) {
+      throw new Error("Cannot calculate average when no estimations");
+    }
+    return (
+      estimations.reduce((sum, estimation) => sum + estimation, 0) /
+      estimations.length
+    );
+  }
+
+  stackEstimations(): { number: number; amount: number }[] {
+    const voting: { number: number; amount: number }[] = [];
+    this.users.forEach((item) => {
+      if (!item.estimation) return;
+      const index = voting.findIndex((v) => v.number === item.estimation);
+      if (index === -1) {
+        voting.push({ number: item.estimation, amount: 1 });
+      } else {
+        voting[index]!.amount++;
+      }
+    });
+    return voting.slice(0, this.calculateAverage() > 9 ? 3 : 4);
+  }
+}
+
+export class RoomStateServer extends RoomStateBase {
+  hasChanged = false;
+
+  /**
+  /* USER MANAGEMENT
+  */
+  addUser(user: CreateUserDto) {
+    if (!this.users.some((u) => u.id === user.id)) {
+      this.users.push(new User(user));
+      this.hasChanged = true;
+    }
+  }
+
+  getUserIds() {
+    return this.users.map((user) => user.id);
+  }
+
+  removeUser(userId: string) {
+    if (this.users.some((user) => user.id === userId)) {
+      this.users = this.users.filter((user) => user.id !== userId);
+      this.hasChanged = true;
+    }
+  }
+
+  /**
+   * INTERACTIONS
+   */
+  setEstimation(userId: string, estimation: number | null) {
+    this.users = this.users.map((user) => {
+      if (user.id === userId) {
+        user.estimation = estimation;
+        this.hasChanged = true;
+      }
+      return user;
+    });
+    this.autoFlip();
+  }
+
+  setSpectator(userId: string, isSpectator: boolean) {
+    this.users = this.users.map((user) => {
+      if (user.id === userId) {
+        user.isSpectator = isSpectator;
+        this.hasChanged = true;
+      }
+      return user;
+    });
+    this.autoFlip();
+  }
+
+  flip() {
+    if (!this.isFlippable) {
+      throw new Error("Cannot flip when not flippable");
+    }
+    this.isFlipped = true;
+    this.hasChanged = true;
+  }
+
+  private autoFlip() {
+    if (this.isFlippable && this.isAutoFlip) {
+      this.flip();
+    }
+  }
+
+  setAutoFlip(isAutoFlip: boolean) {
+    this.isAutoFlip = isAutoFlip;
+    this.hasChanged = true;
+    this.autoFlip();
+  }
+
+  reset() {
+    this.users = this.users.map((user) => {
+      user.estimation = null;
+      return user;
+    });
+    this.isFlipped = false;
+    this.isAutoFlip = false;
+    this.hasChanged = true;
+  }
+
+  fullReset() {
+    this.users = [];
+    this.isFlipped = false;
+    this.isAutoFlip = false;
+    this.hasChanged = true;
+  }
+}
diff --git a/src/server/room-state/room-state.repository.ts b/src/server/room-state/room-state.repository.ts
new file mode 100644
index 0000000..ab9b8f8
--- /dev/null
+++ b/src/server/room-state/room-state.repository.ts
@@ -0,0 +1,106 @@
+import { env } from "fpp/env.mjs";
+import { RoomStateServer } from "fpp/server/room-state/room-state.entity";
+import { Redis } from "@upstash/redis";
+
+const redis = new Redis({
+  url: env.UPSTASH_REDIS_REST_URL_ROOM_STATE,
+  token: env.UPSTASH_REDIS_REST_TOKEN_ROOM_STATE,
+});
+
+export async function getRoomStateOrFail(
+  roomId: number,
+): Promise<RoomStateServer> {
+  const roomState = await redis.get<RoomStateServer>(`room:${roomId}`);
+
+  if (!roomState) {
+    throw new Error(`Room ${roomId} not found`);
+  }
+
+  return RoomStateServer.fromJson(roomState);
+}
+
+export async function getRoomStateOrCreate(
+  roomId: number,
+): Promise<RoomStateServer> {
+  const roomState = await redis.get<RoomStateServer>(`room:${roomId}`);
+
+  if (!roomState) {
+    return new RoomStateServer(roomId);
+  }
+
+  return RoomStateServer.fromJson(roomState);
+}
+
+export async function getRoomStateOrNull(
+  roomId: number,
+): Promise<RoomStateServer | null> {
+  return (await redis.get<RoomStateServer>(`room:${roomId}`)) ?? null;
+}
+
+export async function setRoomState({
+  roomId,
+  userId,
+  roomState,
+}: {
+  roomId: number;
+  userId: string;
+  roomState: RoomStateServer;
+}): Promise<void> {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const promises: Promise<any>[] = [setHeartbeat(userId, Date.now())];
+
+  // If the room state has changed, we update Redis and publish it to it's WebSocket channel
+  if (roomState.hasChanged) {
+    roomState.lastUpdated = Date.now();
+    promises.push(
+      redis.set(`room:${roomId}`, roomState, { ex: 60 * 5 }),
+      fetch(`https://rest.ably.io/channels/room:${roomId}/messages`, {
+        method: "POST",
+        headers: {
+          Authorization: `Basic ${env.ABLY_API_KEY_BASE64}`,
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          name: "room-state",
+          clientId: userId,
+          data: roomState.toJson(),
+        }),
+      }).then((res) => {
+        if (!res.ok) {
+          throw new Error(`Failed to publish message to Ably: ${res.status}`);
+        }
+      }),
+    );
+
+    await Promise.all(promises);
+    return;
+  }
+
+  // If the room state hasn't changed in the last 5 minutes minus 20 seconds, we extend the expiration time
+  // TODO: close the room after 5 minutes of inactivity
+  if (roomState.lastUpdated > Date.now() - 1000 * 60 * 5 - 1000 * 20) {
+    promises.push(redis.expire(`room:${roomId}`, 60 * 5));
+  }
+
+  await Promise.all(promises);
+}
+
+export async function getActiveUserIds(userIds: string[]): Promise<string[]> {
+  const heartbeats = await redis.mget<(number | null)[]>(
+    userIds.map((userId) => `heartbeat:${userId}`),
+  );
+  return userIds.map((userId, i) => {
+    if (heartbeats[i] != null) {
+      return userId;
+    }
+  }) as string[];
+}
+
+export async function setHeartbeat(
+  userId: string,
+  heartbeat: number,
+): Promise<void> {
+  await redis.set(`heartbeat:${userId}`, heartbeat, {
+    ex: 15,
+  });
+}
diff --git a/src/server/room-state/room-state.router.ts b/src/server/room-state/room-state.router.ts
new file mode 100644
index 0000000..f5e8b21
--- /dev/null
+++ b/src/server/room-state/room-state.router.ts
@@ -0,0 +1,175 @@
+import { createTRPCRouter, publicProcedure } from "fpp/server/api/trpc";
+import { z } from "zod";
+import {
+  getActiveUserIds,
+  getRoomStateOrCreate,
+  getRoomStateOrFail,
+  setRoomState,
+} from "fpp/server/room-state/room-state.repository";
+
+export const roomStateRouter = createTRPCRouter({
+  enter: publicProcedure
+    .input(
+      z.object({
+        roomId: z.number(),
+        userId: z
+          .string()
+          .regex(/^[A-Za-z0-9_~]{21}$/, "userId regex mismatch"),
+        username: z
+          .string()
+          .min(3)
+          .max(15)
+          .regex(/^[A-Za-z]+$/),
+        isSpectator: z.boolean(),
+      }),
+    )
+    .mutation(
+      async ({
+        ctx: { db },
+        input: { roomId, userId, username, isSpectator },
+      }) => {
+        const roomState = await getRoomStateOrCreate(roomId);
+
+        roomState.addUser({
+          id: userId,
+          name: username,
+          estimation: null,
+          isSpectator,
+        });
+
+        await setRoomState({
+          roomId,
+          userId,
+          roomState,
+        });
+
+        return roomState;
+      },
+    ),
+  get: publicProcedure
+    .input(z.object({ roomId: z.number() }))
+    .query(async ({ ctx, input: { roomId } }) => {
+      return await getRoomStateOrFail(roomId);
+    }),
+  heartbeat: publicProcedure
+    .input(z.object({ roomId: z.number(), userId: z.string() }))
+    .mutation(async ({ ctx, input: { roomId, userId } }) => {
+      const roomState = await getRoomStateOrFail(roomId);
+      const userIds = roomState.getUserIds();
+
+      const activeUserIds = await getActiveUserIds(userIds);
+      if (!activeUserIds.includes(userId)) {
+        activeUserIds.push(userId);
+      }
+
+      if (activeUserIds.length !== userIds.length) {
+        for (const userId of roomState.getUserIds()) {
+          if (!activeUserIds.includes(userId)) {
+            roomState.removeUser(userId);
+          }
+        }
+      }
+
+      await setRoomState({
+        roomId,
+        userId,
+        roomState,
+      });
+    }),
+  flip: publicProcedure
+    .input(z.object({ roomId: z.number(), userId: z.string() }))
+    .mutation(async ({ ctx, input: { roomId, userId } }) => {
+      const roomState = await getRoomStateOrFail(roomId);
+
+      roomState.flip();
+
+      await setRoomState({
+        roomId,
+        userId,
+        roomState,
+      });
+    }),
+  estimate: publicProcedure
+    .input(
+      z.object({
+        roomId: z.number(),
+        userId: z.string(),
+        estimation: z.number().nullable(),
+      }),
+    )
+    .mutation(async ({ ctx, input: { roomId, userId, estimation } }) => {
+      const roomState = await getRoomStateOrFail(roomId);
+
+      roomState.setEstimation(userId, estimation);
+
+      await setRoomState({
+        roomId,
+        userId,
+        roomState,
+      });
+    }),
+  spectator: publicProcedure
+    .input(
+      z.object({
+        roomId: z.number(),
+        userId: z.string(),
+        isSpectator: z.boolean(),
+      }),
+    )
+    .mutation(async ({ ctx, input: { roomId, userId, isSpectator } }) => {
+      const roomState = await getRoomStateOrFail(roomId);
+
+      roomState.setSpectator(userId, isSpectator);
+
+      await setRoomState({
+        roomId,
+        userId,
+        roomState,
+      });
+    }),
+  autoFlip: publicProcedure
+    .input(
+      z.object({
+        roomId: z.number(),
+        userId: z.string(),
+        isAutoFlip: z.boolean(),
+      }),
+    )
+    .mutation(async ({ ctx, input: { roomId, userId, isAutoFlip } }) => {
+      const roomState = await getRoomStateOrFail(roomId);
+
+      roomState.setAutoFlip(isAutoFlip);
+
+      await setRoomState({
+        roomId,
+        userId,
+        roomState,
+      });
+    }),
+  reset: publicProcedure
+    .input(z.object({ roomId: z.number(), userId: z.string() }))
+    .mutation(async ({ ctx, input: { roomId, userId } }) => {
+      const roomState = await getRoomStateOrFail(roomId);
+
+      roomState.reset();
+
+      await setRoomState({
+        roomId,
+        userId,
+        roomState,
+      });
+    }),
+  leave: publicProcedure
+    .input(z.object({ roomId: z.number(), userId: z.string() }))
+    .mutation(async ({ ctx, input: { roomId, userId } }) => {
+      const roomState = await getRoomStateOrFail(roomId);
+
+      roomState.removeUser(userId);
+
+      await setRoomState({
+        roomId,
+        userId,
+        roomState,
+      });
+    }),
+});
diff --git a/src/store/local-storage.store.ts b/src/store/local-storage.store.ts
index 8cb9f22..ddd9748 100644
--- a/src/store/local-storage.store.ts
+++ b/src/store/local-storage.store.ts
@@ -28,14 +28,14 @@ function getIntFromLocalstorage(key: string): number | null {
 interface LocalstorageStore {
   username: string | null;
   voting: number | null;
-  spectator: boolean;
+  isSpectator: boolean;
   roomId: number | null;
   roomReadable: string | null;
   recentRoom: string | null;
   userId: string | null;
   setUsername: (username: string) => void;
   setVoting: (voting: number | null) => void;
-  setSpectator: (spectator: boolean) => void;
+  setIsSpectator: (spectator: boolean) => void;
   setRoomId: (room: number | null) => void;
   setRoomReadable: (room: string | null) => void;
   setRecentRoom: (room: string | null) => void;
@@ -47,7 +47,7 @@ export const useLocalstorageStore = create<LocalstorageStore>((set, get) => ({
   voting: getFromLocalstorage("vote")
     ? Number(getFromLocalstorage("vote"))
     : null,
-  spectator: getFromLocalstorage("spectator") === "true",
+  isSpectator: getFromLocalstorage("isSpectator") === "true",
   roomId: getIntFromLocalstorage("roomId"),
   roomReadable: getFromLocalstorage("roomReadableId"),
   recentRoom: getFromLocalstorage("recentRoom"),
@@ -84,9 +84,9 @@ export const useLocalstorageStore = create<LocalstorageStore>((set, get) => ({
     }
     set({ voting });
   },
-  setSpectator: (spectator: boolean) => {
-    localStorage.setItem("spectator", spectator.toString());
-    set({ spectator });
+  setIsSpectator: (isSpectator: boolean) => {
+    localStorage.setItem("isSpectator", isSpectator.toString());
+    set({ isSpectator });
   },
   setRoomId: (roomId: number | null) => {
     if (!roomId) {
diff --git a/src/store/room-state.store.ts b/src/store/room-state.store.ts
new file mode 100644
index 0000000..c4d9d7e
--- /dev/null
+++ b/src/store/room-state.store.ts
@@ -0,0 +1,74 @@
+import { create } from "zustand";
+import {
+  type RoomStateClient,
+  type User,
+} from "fpp/server/room-state/room-state.entity";
+
+type RoomStateStore = {
+  // User
+  userId: string | null;
+  setUserId: (clientId: string) => void;
+  estimation: number | null;
+  isSpectator: boolean;
+  // Game State
+  users: User[];
+  isFlipped: boolean;
+  isFlippable: boolean;
+  isAutoFlip: boolean;
+  stackedEstimations: { number: number; amount: number }[];
+  averageEstimation: number | null;
+  // Interactions
+  isConnecting: boolean;
+  setIsConnecting: (isConnecting: boolean) => void;
+  update: (roomState: RoomStateClient) => void;
+  reset: () => void;
+};
+
+export const useRoomStateStore = create<RoomStateStore>((set, get) => ({
+  // User
+  userId: null,
+  setUserId: (userId) => set({ userId }),
+  estimation: null,
+  isSpectator: false,
+  // Game State
+  users: [],
+  isFlipped: false,
+  isFlippable: false,
+  isAutoFlip: false,
+  stackedEstimations: [],
+  averageEstimation: null,
+  // Initial Connection
+  isConnecting: true,
+  setIsConnecting: (isConnecting) => set({ isConnecting }),
+  // Interactions
+  update: (roomStateClient: RoomStateClient) => {
+    const user = roomStateClient.getUser(get().userId);
+    set({
+      // User
+      estimation: user.estimation,
+      isSpectator: user.isSpectator,
+      // Game State
+      users: roomStateClient.users,
+      isFlipped: roomStateClient.isFlipped,
+      isFlippable: roomStateClient.isFlippable,
+      isAutoFlip: roomStateClient.isAutoFlip,
+    });
+    if (roomStateClient.isFlipped) {
+      set({
+        stackedEstimations: roomStateClient.stackEstimations(),
+        averageEstimation: roomStateClient.calculateAverage(),
+      });
+    }
+  },
+  reset: () => {
+    set({
+      // User
+      estimation: null,
+      isSpectator: false,
+      // Game State
+      users: [],
+      isFlipped: false,
+      isAutoFlip: false,
+    });
+  },
+}));
diff --git a/src/store/ws.store.ts b/src/store/ws.store.ts
deleted file mode 100644
index f284abe..0000000
--- a/src/store/ws.store.ts
+++ /dev/null
@@ -1,150 +0,0 @@
-import { create } from "zustand";
-import { Types } from "ably";
-import PresenceMessage = Types.PresenceMessage;
-import Message = Types.Message;
-import RealtimeChannelCallbacks = Types.RealtimeChannelCallbacks;
-
-export type Voting = {
-  clientId: string;
-  number: number | null;
-};
-
-export interface PresenceUpdate {
-  username: string;
-  voting: number | null;
-  spectator: boolean;
-  presencesLength: number | undefined;
-}
-
-type WsStore = {
-  clientId: string | null;
-  setClientId: (clientId: string) => void;
-  channel: RealtimeChannelCallbacks | null;
-  setChannel: (client: RealtimeChannelCallbacks) => void;
-  autoShow: boolean;
-  flipped: boolean;
-  spectators: string[];
-  votes: Voting[];
-  presences: string[];
-  presencesMap: Map<string, string>;
-  fullReset: () => void;
-  handleMessage: (message: Message) => void;
-  updatePresences: (presenceMessage: PresenceMessage) => void;
-};
-
-export const useWsStore = create<WsStore>((set, get) => ({
-  clientId: null,
-  setClientId: (clientId) => set({ clientId }),
-  channel: null,
-  setChannel: (channel) => {
-    set({ channel });
-  },
-  autoShow: false,
-  flipped: true,
-  spectators: [],
-  votes: [],
-  presences: [],
-  presencesMap: new Map(),
-  fullReset: () => {
-    set({ votes: [], flipped: true, presences: [], presencesMap: new Map() });
-  },
-  handleMessage: (message: Types.Message) => {
-    switch (message.name) {
-      case "auto-show":
-        set({
-          autoShow: (message.data as { autoShow: boolean }).autoShow || false,
-        });
-        break;
-      case "flip":
-        set({ flipped: false });
-        break;
-      case "reset":
-        set({ votes: [], flipped: true });
-        break;
-    }
-  },
-  updatePresences: (presenceMessage) => {
-    const {
-      action,
-      clientId,
-      data: { username, voting, spectator },
-    } = presenceMessage as {
-      action: Types.PresenceAction;
-      clientId: string;
-      data: PresenceUpdate;
-    };
-    if (!get().clientId) {
-      for (const [key, value] of get().presencesMap.entries()) {
-        if (value === username) set({ clientId: key });
-      }
-    }
-    switch (action) {
-      case "enter":
-        set((state) => ({
-          presencesMap: state.presencesMap.set(clientId, username),
-          presences: [
-            ...new Set([...state.presences, clientId].filter(Boolean)),
-          ],
-        }));
-        break;
-      case "update":
-        set((state) => ({
-          presencesMap: state.presencesMap.set(clientId, username),
-          presences: [
-            ...new Set([...state.presences, clientId].filter(Boolean)),
-          ],
-          votes: [
-            ...state.votes.filter((voting) => voting.clientId !== clientId),
-            {
-              clientId,
-              number: voting ? Number(voting) : null,
-            },
-          ].filter((voting) => voting.number != null),
-        }));
-        if (spectator) {
-          set((state) => ({
-            spectators: [
-              ...new Set([...state.spectators, clientId].filter(Boolean)),
-            ],
-            votes: [
-              ...state.votes.filter((voting) => voting.clientId !== clientId),
-            ],
-          }));
-        } else {
-          set((state) => ({
-            spectators: [
-              ...state.spectators.filter((spectator) => spectator !== clientId),
-            ],
-          }));
-        }
-        break;
-      case "leave":
-        set((state) => ({
-          presences: [
-            ...state.presences.filter((presence) => presence !== clientId),
-          ],
-          votes: [
-            ...state.votes.filter((voting) => voting.clientId !== clientId),
-          ],
-        }));
-        break;
-    }
-    // if (presencesLength > get().presences.length) {
-    //   notifications.show({
-    //     color: "red",
-    //     autoClose: 3000,
-    //     withCloseButton: true,
-    //     title: "Someone left the room",
-    //     message: `${username} left the room`,
-    //   });
-    // } else if (presencesLength < get().presences.length) {
-    //   notifications.show({
-    //     color: "green",
-    //     autoClose: 3000,
-    //     withCloseButton: true,
-    //     title: "Someone joined the room",
-    //     message: `${username} joined the room`,
-    //   });
-    // }
-  },
-}));
diff --git a/src/styles/globals.css b/src/styles/globals.css
index b39871b..e9f5c8a 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -93,6 +93,12 @@ article h3 {
   margin-bottom: 10px !important;
 }
 
+article h4 {
+  text-align: center;
+  margin-top: 20px !important;
+  margin-bottom: 5px !important;
+}
+
 article p {
   line-height: 1.8 !important;
 }