feat: add percent complete in header (#23)

lewxdev · Aug 10, 2024 · 290d609 · 290d609
1 parent 7be312f
commit 290d609
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 6 deletions.
diff --git a/app/components/header.tsx b/app/components/header.tsx
@@ -1,24 +1,31 @@
 "use client";
 
-import { UsersIcon } from "lucide-react";
+import { Percent, UsersIcon } from "lucide-react";
 import { useSocketEvent } from "@/hooks/use-socket-event";
 
 export const HEADER_HEIGHT = 64;
 
 export function Header() {
   const [clientsCount] = useSocketEvent("clientsCount");
+  const [exposedPercent] = useSocketEvent("exposedPercent");
 
   return (
     <header
       className="w-[min(var(--field-size),100%)] bg-white"
       style={{ height: HEADER_HEIGHT }}
     >
-      <h1 className="text-4xl">mmmines</h1>
       <div className="flex justify-between">
+        <h1 className="text-4xl">mmmines</h1>
         {!!clientsCount && (
-          <div className="flex items-center justify-end gap-2">
-            <UsersIcon className="h-4 w-4" />
-            <span>{clientsCount}</span>
+          <div className="flex flex-col items-end gap-2">
+            <div className="flex items-center gap-2">
+              <span>{clientsCount}</span>
+              <UsersIcon className="h-4 w-4" />
+            </div>
+            <div className="flex items-center justify-end gap-2">
+              <span className="">{exposedPercent}</span>
+              <Percent className="h-4 w-4" />
+            </div>
           </div>
         )}
       </div>

diff --git a/app/server.ts b/app/server.ts
@@ -23,11 +23,13 @@ async function main() {
   io.on("connection", (socket) => {
     clientsCount++;
     io.emit("clientsCount", clientsCount);
+    io.emit("exposedPercent", field.exposedPercent);
     socket.emit("update", field.plots);
 
     socket.on("expose", async (index) => {
       field.exposeCell(index);
       field = await field.handleComplete();
+      io.emit("exposedPercent", field.exposedPercent);
       io.emit("update", field.plots);
     });
 

diff --git a/app/types/index.ts b/app/types/index.ts
@@ -3,6 +3,7 @@ import type { Field } from "@/utils/game";
 export type ServerToClientEvents = {
   update(state: Field["plots"]): void;
   clientsCount(count: number): void;
+  exposedPercent(count: number): void;
 };
 
 export type ClientToServerEvents = {

diff --git a/app/utils/game.ts b/app/utils/game.ts
@@ -8,6 +8,7 @@ export class Field {
     public readonly size: number,
     public readonly mineCount: number,
     private readonly data: number[],
+    private exposedCount = 0,
     public readonly plots: PlotState[] = data.map(getState),
   ) {
     const debouncedEncodeData = _.debounce(redis.encodeData, 1000);
@@ -21,6 +22,12 @@ export class Field {
     });
   }
 
+  public get exposedPercent() {
+    return Math.floor(
+      (this.exposedCount / (this.size ** 2 - this.mineCount)) * 100,
+    );
+  }
+
   public static async create(size = 10) {
     const area = size ** 2;
     const mineCount = Math.round(area * 0.15);
@@ -39,7 +46,11 @@ export class Field {
       const data = await redis.decodeData();
       const size = Math.sqrt(data.length);
       const mineCount = _.sum(data.map(isMine));
-      return new Field(size, mineCount, data);
+      const exposedCount = data.reduce(
+        (count, byte) => (isExposed(byte) && !isMine(byte) ? count + 1 : count),
+        0,
+      );
+      return new Field(size, mineCount, data, exposedCount);
     } catch {
       return Field.create();
     }
@@ -49,6 +60,9 @@ export class Field {
     if (!_.isNil(this.data[index]) && !isExposed(this.data[index])) {
       // set exposed state bit, unset the flagged state bit
       this.data[index] = (this.data[index] | (1 << 5)) & ~(1 << 4);
+      if (!isMine(this.data[index])) {
+        this.exposedCount++;
+      }
       if (getValue(this.data[index]) === 0) {
         getOffsets(this.size, index).forEach(this.exposeCell.bind(this));
       }