style: fix consistent cell aspect ratio, add close modal on click, up…

…date cell border color (#320) Co-authored-by: Malin Wadholm <[email protected]> Co-authored-by: Malin <[email protected]>
Etimo · Sep 21, 2023 · e8a99d4 · e8a99d4
1 parent 6c9f290
commit e8a99d4
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 24 deletions.
diff --git a/packages/frontend/src/components/Board/Board.tsx b/packages/frontend/src/components/Board/Board.tsx
@@ -19,7 +19,7 @@ export const Board: FC<BoardProps> = memo((props) => {
   return (
     <div
       id="test"
-      className="items-center flex flex-col relative m-auto border-t w-full lg:w-3/4"
+      className="items-center flex flex-col relative m-auto border-t w-full lg:w-80%"
       ref={containerRef}
       style={{ maxWidth: maxWidth.maxWidth }}
     >

diff --git a/packages/frontend/src/components/Board/Cell.tsx b/packages/frontend/src/components/Board/Cell.tsx
@@ -1,11 +1,5 @@
 import { FC, memo } from 'react';
-import {
-  GameObject,
-  GameObjectType,
-  IBase,
-  IBot,
-  IDiamond,
-} from '../../hooks/useBoard';
+import { GameObject, GameObjectType, IDiamond } from '../../hooks/useBoard';
 import {
   base,
   botBase,
@@ -66,16 +60,9 @@ const getGameCharacter = (gameObject: GameObject) => {
 };
 
 const getCharacterName = (gameObject: GameObject) => {
-  if (gameObject.properties as IBase) {
-    const base = gameObject.properties as IBase;
-    if (base.name) return base.name.substring(0, 3);
-    return base.name;
-  } else if (gameObject.properties as IBot) {
-    const bot = gameObject.properties as IBot;
-    if (bot.name) return bot.name.substring(0, 3);
-    return bot.name;
-  }
-  return '';
+  const name = gameObject.properties?.name || '';
+
+  return name;
 };
 
 // TODO: Fix types in this component
@@ -85,15 +72,15 @@ export const Cell: FC<CellProps> = memo((props) => {
   return (
     <div
       key={id}
-      className={`border-l w-full aspect-square ${
+      className={`border-l w-full aspect-square relative overflow-hidden ${
         gameObject && (gameObject.type as GameObjectType)
           ? 'flex items-center justify-center'
           : 'justify-center'
       }`}
     >
       {gameObject && (gameObject.type as GameObjectType) && (
         <div className="flex flex-col w-full">
-          <p className="text-[10px] text-black dark:text-white w-100 self-center">
+          <p className="text-[6px] text-black dark:text-white max-w-[98%] self-center sm:text-[10px] overflow-hidden whitespace-nowrap truncate">
             {getCharacterName(gameObject)}
           </p>
           <img

diff --git a/packages/frontend/src/components/Modal.tsx b/packages/frontend/src/components/Modal.tsx
@@ -1,10 +1,18 @@
-export const Modal = ({ children }: React.PropsWithChildren) => {
+import React, { FC } from 'react';
+
+type ModalProps = {
+  onClose: () => void;
+  children: React.ReactNode;
+};
+
+const Modal: FC<ModalProps> = ({ onClose, children }) => {
   return (
     <div
       className="relative z-10"
       aria-labelledby="modal-title"
       role="dialog"
       aria-modal="true"
+      onClick={onClose}
     >
       <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
 
@@ -20,3 +28,5 @@ export const Modal = ({ children }: React.PropsWithChildren) => {
     </div>
   );
 };
+
+export default Modal;
diff --git a/packages/frontend/src/components/PlayerTable.tsx b/packages/frontend/src/components/PlayerTable.tsx
@@ -1,6 +1,7 @@
 import { FC, memo } from 'react';
 import { IBot } from '../hooks/useBoard';
 import { Table } from './Table';
+import { diamond } from './images';
 
 type PlayerTableProps = {
   bots: IBot[];
@@ -14,7 +15,23 @@ export const PlayerTable: FC<PlayerTableProps> = memo((props) => {
     <Table
       label={`Board ${boardId} players`}
       cols={['Name', 'Diamonds', 'Score', 'Time']}
-      data={bots}
+      data={bots.map(({ name, diamonds, score, millisecondsLeft }) => ({
+        Name: name,
+        Diamonds: (
+          <div className="flex">
+            {Array.from({ length: diamonds }, (_, index) => (
+              <img
+                className="w-[20%]"
+                key={index}
+                src={diamond}
+                alt="diamond"
+              />
+            ))}
+          </div>
+        ),
+        Score: score,
+        Time: `${millisecondsLeft}s`,
+      }))}
     />
   );
 });
diff --git a/packages/frontend/src/components/Rules.tsx b/packages/frontend/src/components/Rules.tsx
@@ -1,6 +1,6 @@
 import { FC, memo } from 'react';
 import { IRules, useBoardConfig } from '../hooks/useBoardConfig';
-import { Modal } from './Modal';
+import Modal from './Modal';
 
 type RulesProps = {
   onClose: () => void;
@@ -13,7 +13,7 @@ export const Rules: FC<RulesProps> = memo((props) => {
   const seasonRules: IRules = useBoardConfig(seasonId);
 
   return visible ? (
-    <Modal>
+    <Modal onClose={onClose}>
       <div>
         <h1 className="text-xl 3xl:text-2xl mb-3">Season rules</h1>
 

diff --git a/packages/frontend/src/index.css b/packages/frontend/src/index.css
@@ -45,6 +45,12 @@
   select {
     @apply dark:text-slate-800 dark:bg-slate-300 text-sm;
   }
+
+  *,
+  ::before,
+  ::after {
+    @apply border-gray-400 dark:border-gray-200;
+  }
 }
 
 @layer components {