tooltips and scorecard touchups

src/components/Chat/Chat.tsx

@@ -104,12 +104,14 @@ const SocialMediaFeed = () => {
       }
     } else {
       // Handle the error case here
-      throw new Error(result.error.toString());
+      // throw new Error(result.error.toString());
+      console.error("chat error", result.error.toString());
+      return "";
     }
   };
 
   const sendCast = async (newPost: string, encryptedSigner: NobleEd25519Signer) => {
-    console.log('sendingCast', newPost);
+    // console.log('sendingCast', newPost);
     const castBody = newPost;
     const hub = getHubRpcClient(hubAddress); // works with open hub
     const request = JSON.parse(localStorage.getItem("farsign-signer-" + CLIENT_NAME)!).signerRequest;
@@ -121,15 +123,15 @@ const SocialMediaFeed = () => {
       mentions: [],
       mentionsPositions: [],
     }, { fid: request.fid, network: FarcasterNetwork.MAINNET }, (encryptedSigner as NobleEd25519Signer)))._unsafeUnwrap();
-    console.log('here we go', cast);
+    // console.log('here we go', cast);
     hub.submitMessage(cast); // w open hub this works
     setShouldScrollToBottom(true);
     setHasUserScrolled(false);
     setNewPost("");
   }
 
   const fetchCastersDetails = async () => {
-    console.log('you are fetching caster details');
+    // console.log('you are fetching caster details');
     const client = getHubRpcClient(hubAddress);
     const updatedData = casts
       .filter((cast) => cast.data !== undefined) // Remove rows where data is undefined
@@ -189,7 +191,8 @@ const SocialMediaFeed = () => {
       <div className="bg-black border border-pink-700 rounded-lg w-125">
         <div className="flex items-center justify-between px-4 py-2 bg-pink-700">
           <div className="text-md text-white font-medium">
-            Experimental Chat Feature - Connected as {casterFname.userResult[0]}
+            Chat (experimental)
+            {/* Chat (experimental) - Connected as {casterFname.userResult[0]} */}
           </div>
           <div className="px-4 py-2 text-black">
             {/* <input
@@ -277,7 +280,7 @@ const SocialMediaFeed = () => {
               onBlur={handleTextareaBlur}
             ></textarea>
 
-            <p className="text-pink-500 text-sm">{remainingChars} characters remaining because I ran out of time to put all the validations in place.</p>
+            <p className="text-pink-500 text-sm">{remainingChars} characters remaining.</p>
 
             <button
               className="bg-pink-700 text-white font-medium py-2 px-4 rounded-md mt-2"

src/components/Game/GameDashboard/GameContainer/PlayContent/MintPhase/MintActions.tsx

@@ -11,6 +11,9 @@ import { toastSuccess } from "utils/toast";
 import { useAccount } from "wagmi";
 import { TierSelection } from "./useMintSelection";
 import { PhaseTimer } from "../PhaseTimer";
+import { Tooltip } from "antd";
+import Link from "next/link";
+import { QuestionMarkCircleIcon } from "@heroicons/react/24/outline";
 
 export function MintActions({
   selectedTiers,
@@ -137,7 +140,14 @@ export function MintActions({
             checked={claimVotes}
             onChange={(e) => setClaimVotes(e.target.checked)}
           />
-          <label htmlFor="claimVotes">Claim votes</label>
+          <label htmlFor="claimVotes">Claim voting power</label>
+          <Tooltip title="The game is self-reported. Claim voting power to have a say in how the pot is split. Unchecking will delegate your say to an account of the game deployers choosing.">
+            <span>
+              <Link href="/about" className="text-lime-500">
+                <QuestionMarkCircleIcon className="h-5 w-5" />
+              </Link>
+            </span>
+          </Tooltip>
         </div>
       </div>
       <Button

src/components/Game/GameDashboard/GameContainer/PlayContent/QueueNextPhaseBanner/QueueNextPhaseBanner.tsx

@@ -1,5 +1,7 @@
 import { useNextPhaseNeedsQueueing } from "hooks/read/PhaseNeedQueueing";
 import { QueueNextPhaseButton } from "./QueueNextPhaseButton";
+import { Tooltip } from "antd";
+import { QuestionMarkCircleIcon } from "@heroicons/react/24/outline";
 
 export function QueueNextPhaseBanner() {
   const {
@@ -10,7 +12,13 @@ export function QueueNextPhaseBanner() {
   return nextPhaseNeedsQueueing && !nextPhaseNeedsQueueingLoading ? (
     <div className="bg-slate-900 border border-slate-800 p-4 rounded-lg mb-7">
       <div className="flex justify-between items-start mb-2">
-        Next phase needs queueing
+        <Tooltip title="In every game, each phase plays a vital role in advancing the gameplay.
+        To transition from one phase to the next, a blockchain transaction is required. The 
+        phases encompass minting, refunding, scoring, and redeeming. It is important to queue
+        the next phase to ensure the progression of the game.">
+          Next phase needs queueing
+          <QuestionMarkCircleIcon className="h-4 w-4 inline" />
+        </Tooltip>
         {/* <Button category="tertiary" className="bg-transparent min-w-0 text-gray-50">
             <XMarkIcon className="h-5 w-5 inline" />
           </Button> */}

src/components/Game/GameDashboard/GameContainer/PlayContent/ScoringPhase/CustomScorecardContent/CustomScorecardActions.tsx

@@ -8,6 +8,7 @@ import {
   DefifaTierRedemptionWeight,
   DefifaTierRedemptionWeightParams,
 } from "types/defifa";
+import { useState } from "react";
 
 function useTierRedemptionWeights(
   scorecardPercentages: ScorecardPercentages
@@ -30,10 +31,15 @@ function useTierRedemptionWeights(
 
 export function CustomScorecardActions({
   scorecardPercentages,
+  resetScorecardPercentages,
+  onSubmit,
 }: {
   scorecardPercentages: ScorecardPercentages;
+  resetScorecardPercentages: () => void;
+  onSubmit: () => void;
 }) {
   const { governor, gameId } = useGameContext();
+  const [submitted, setSubmitted] = useState(false);
 
   const tierRedemptionWeights = useTierRedemptionWeights(scorecardPercentages);
 
@@ -49,6 +55,12 @@ export function CustomScorecardActions({
       0
     ) ?? 0;
 
+  const handleButtonClick = () => {
+    write?.();
+    resetScorecardPercentages();
+    onSubmit();
+  };
+
   return (
     <div>
       <div className="flex gap-2 items-center">
@@ -61,13 +73,13 @@ export function CustomScorecardActions({
         <span className="text-red-500">Can't allocate more than 100%</span>
       ) : null}
       <Button
-        onClick={() => write?.()}
+        onClick={handleButtonClick}
         loading={isLoading}
         disabled={totalScorePercentage !== 100}
         className="w-full mt-5"
       >
         Submit scores
       </Button>
-    </div>
+    </div >
   );
 }

src/components/Game/GameDashboard/GameContainer/PlayContent/ScoringPhase/CustomScorecardContent/CustomScorecardContent.tsx

@@ -1,9 +1,11 @@
+import React, { useState } from "react";
 import { ActionContainer } from "components/Game/GameDashboard/GameContainer/ActionContainer/ActionContainer";
 import { Input } from "components/UI/Input";
 import { useGameContext } from "contexts/GameContext";
 import Image from "next/image";
-import { useState } from "react";
 import { CustomScorecardActions } from "./CustomScorecardActions";
+import { QuestionMarkCircleIcon } from "@heroicons/react/24/outline";
+import { Tooltip } from "antd";
 
 export interface ScorecardPercentages {
   [key: string]: number | undefined; // tier_id: score_percentage
@@ -12,6 +14,7 @@ export interface ScorecardPercentages {
 export function CustomScorecardContent() {
   const [scorecardPercentages, setScorecardPercentages] =
     useState<ScorecardPercentages>({});
+  const [submitted, setSubmitted] = useState(false);
 
   const {
     nfts: { tiers },
@@ -21,6 +24,10 @@ export function CustomScorecardContent() {
     },
   } = useGameContext();
 
+  function resetScorecardPercentages() {
+    setScorecardPercentages({});
+  }
+
   function onInput(tierId: number, scorePercentage: number | undefined) {
     const newScorecardMap = {
       ...scorecardPercentages,
@@ -29,20 +36,36 @@ export function CustomScorecardContent() {
     setScorecardPercentages(newScorecardMap);
   }
 
+  function handleScorecardSubmit() {
+    // Process the scorecard submission
+    // ...
+
+    // Reset the scorecard percentages and set submitted to true
+    setScorecardPercentages({});
+    setSubmitted(true);
+  }
+
   return (
     <ActionContainer
       renderActions={() => (
-        <CustomScorecardActions scorecardPercentages={scorecardPercentages} />
+        <CustomScorecardActions
+          scorecardPercentages={scorecardPercentages}
+          resetScorecardPercentages={resetScorecardPercentages} // Make sure this prop is passed correctly
+          onSubmit={handleScorecardSubmit}
+
+        />
       )}
     >
       {tiersLoading || currentFundingCycleLoading ? (
         <span>...</span>
       ) : (
         <>
-          <p className="mb-5 text-sm text-neutral-300">
-            Give points to each team and submit your scores. Points
-            determine how much of the pot goes to each team.
-          </p>
+          <Tooltip title=" Allocate a percentage to each team and submit the score.
+            The percentages determine how much of the pot goes to each team.
+            Only one scorecard needs to be proposed per game.">
+            <QuestionMarkCircleIcon className="h-4 w-4 inline" />
+          </Tooltip>
+
           <div className="grid grid-cols-2 md:grid-cols-3 gap-3 md:gap-6">
             {tiers?.map((t) => (
               <div
@@ -61,7 +84,7 @@ export function CustomScorecardContent() {
                   <label htmlFor="">Pot split %</label>
                   <Input
                     type="text"
-                    value={scorecardPercentages[t.id]}
+                    value={submitted ? "" : scorecardPercentages[t.id]}
                     onChange={(e) => {
                       const value = e.target.value;
                       onInput(t.id, value ? parseInt(value) : undefined);

src/components/Game/GameDashboard/GameContainer/PlayContent/ScoringPhase/ScorecardsContent/ScorecardsContent.tsx

@@ -175,49 +175,56 @@ export function ScorecardsContent() {
   }
 
   return (
-    <ActionContainer
-      renderActions={
-        selectedScorecard
-          ? () => <ScorecardActions selectedScorecard={selectedScorecard} />
-          : undefined
-      }
-    >
-      <div className="flex gap-8">
-        <div className="mb-3 flex flex-col">
-          <span className="uppercase text-xs">Your Votes</span>
-          <span className="text-lg">
-            {formatNumber(votes?.toNumber())} votes
-          </span>
-        </div>
-        <div className="mb-3 flex flex-col">
-          <span className="uppercase text-xs">Quorum</span>
-          <span className="text-lg">
-            {formatNumber(quorum?.toNumber())} votes
-          </span>
-        </div>
-      </div>
-
-      {!scorecards || scorecards.length === 0 ? (
-        <div className="mt-5 text-neutral-300">
-          <p>No scorecards submitted yet.</p> Anyone can submit a scorecard.
-          <div className="text-xs mb-5 mt-1">
-            (or, some scorecards haven't been indexed yet)
+    <>
+      <Tooltip title="Select a scorecard that best suits your needs and objectives, while keeping
+        in mind the stated rules and the implicit agreement you embraced upon
+        entering the game.">
+        <QuestionMarkCircleIcon className="h-4 w-4 inline" />
+      </Tooltip>
+      <ActionContainer
+        renderActions={
+          selectedScorecard
+            ? () => <ScorecardActions selectedScorecard={selectedScorecard} />
+            : undefined
+        }
+      >
+        <div className="flex gap-8">
+          <div className="mb-3 flex flex-col">
+            <span className="uppercase text-xs">Your Votes</span>
+            <span className="text-lg">
+              {formatNumber(votes?.toNumber())} votes
+            </span>
+          </div>
+          <div className="mb-3 flex flex-col">
+            <span className="uppercase text-xs">Quorum</span>
+            <span className="text-lg">
+              {formatNumber(quorum?.toNumber())} votes
+            </span>
           </div>
         </div>
-      ) : (
-        <>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-            {scorecards?.map((scorecard) => (
-              <ScorecardRow
-                key={scorecard.id.toString()}
-                scorecard={scorecard}
-                onClick={() => setSelectedScorecard(scorecard)}
-                gameQuroum={quorum}
-              />
-            ))}
+
+        {!scorecards || scorecards.length === 0 ? (
+          <div className="mt-5 text-neutral-300">
+            <p>No scorecards submitted yet.</p> Anyone may submit a scorecard.
+            <div className="text-xs mb-5 mt-1">
+              (or, some scorecards haven't been indexed yet)
+            </div>
           </div>
-        </>
-      )}
-    </ActionContainer>
+        ) : (
+          <>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+              {scorecards?.map((scorecard) => (
+                <ScorecardRow
+                  key={scorecard.id.toString()}
+                  scorecard={scorecard}
+                  onClick={() => setSelectedScorecard(scorecard)}
+                  gameQuroum={quorum}
+                />
+              ))}
+            </div>
+          </>
+        )}
+      </ActionContainer>
+    </>
   );
 }

src/components/Game/GameDashboard/GameContainer/PlayContent/ScoringPhase/ScoringPhaseContent.tsx

@@ -62,4 +62,4 @@ export function ScoringPhaseContent() {
       )}
     </div>
   );
-live}
+}

src/components/Game/GameHome/GameHome.tsx

@@ -81,6 +81,22 @@ export function GameHome() {
           <Container>
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
               <div className="col-span-2 rounded-lg">
+                <div className="border-2 border-pink-700 rounded-lg">
+                  <div className="bg-pink-700 text-white text-md font-medium px-4 py-2 flex flex-col">
+                    <span className="order-1">Game rules</span>
+                  </div>
+                  <div className="min-height overflow-y-auto p-4">
+                    <p className="text-sm mb-4">{metadata?.description}</p>
+                    <p className="text-lime-300 text-sm">
+                      <Link href="/about">
+                        <a className="flex items-start">
+                          This game operates on a self-reporting basis, meaning that you are dependent on
+                          the honesty and integrity of the other players to adhere to the rules. It is based
+                          on a social contract rather than strict code enforcement.</a>
+                      </Link>
+                    </p>
+                  </div>
+                </div >
                 <GamePlayerPowerLevel />
               </div>
               <Chat />

src/components/Game/GameHome/Header.tsx

@@ -11,6 +11,7 @@ import { useRouter } from "next/router";
 import { Card } from "./Card";
 import { useCurrentPhaseTitle } from "../GameDashboard/GameContainer/PlayContent/useCurrentPhaseTitle";
 import FourItemsDisplay from "./FourItemsDisplay";
+import { CountdownPhaseContent } from "../GameDashboard/GameContainer/PlayContent/CountdownPhaseContent";
 
 function GameStats() {
   const {
@@ -22,12 +23,10 @@ function GameStats() {
     usePaymentTerminalBalance(gameId);
 
   const mintText = totalSupply?.toNumber() === 1 ? "mint" : "mints";
-
+  if (currentPhase === DefifaGamePhase.COUNTDOWN) return <CountdownPhaseContent />;
   if (isTerminalLoading || !totalSupply)
     return <div className="text-center">...</div>;
 
-  if (currentPhase === DefifaGamePhase.COUNTDOWN) return null;
-
   return (
     <div className="flex gap-6 items-center">
       <div className="border-4 border-lime-600 border-dotted rounded-2xl px-4 py-3">