Fix/refactor center component

src/app/(game)/game/_components/Actions/ActionsSection.tsx

@@ -0,0 +1,118 @@
+import type { FC } from 'react';
+import { Player } from '@/types/player';
+import RollDiceAction from './RollDiceAction';
+import BuyFieldAction from './BuyFieldAction';
+import PayRentAction from './PayRentAction';
+import VDNHAction from './VDNHAction';
+import CoinAction from './CoinAction';
+import SecretPayAction from './SecretPayAction';
+import { Action } from '@/types';
+import { Field } from '@/types/field';
+import { useAppSelector } from '@/hooks/store';
+import { ACTION_TITLES } from '../../_utils/constants';
+import { api } from '@/api/build/api';
+
+interface Props {
+  action: Action;
+  currentField: Field;
+  secretInfo: {
+    users: string[];
+    amounts: number[];
+  };
+  amountToPay: number;
+}
+
+const ActionsSection: FC<Props> = ({
+  action,
+  currentField,
+  secretInfo,
+  amountToPay,
+}) => {
+  let renderJsx = null;
+
+  const game = useAppSelector(state => state.game.game);
+  const { data: user } = useAppSelector(state => state.user);
+
+  const payForSecret = () => {
+    if (secretInfo.users.length > 2 && secretInfo.amounts[0] === null) {
+      api.payToUserForSecret();
+    } else {
+      api.payToBankForSecret();
+    }
+  };
+
+  switch (action) {
+    case 'rollDice':
+      renderJsx = <RollDiceAction onRollDice={() => api.rollDice()} />;
+      break;
+
+    case 'buy':
+      if (!currentField.ownedBy) {
+        renderJsx = (
+          <BuyFieldAction
+            fieldPrice={currentField.price}
+            onBuyField={() => api.buyField()}
+            onPutUpForAuction={() => api.putUpForAuction()}
+          />
+        );
+      }
+      if (currentField.ownedBy && currentField.ownedBy !== user?.id) {
+        renderJsx = (
+          <PayRentAction
+            rentAmount={currentField.income[currentField.amountOfBranches]}
+            onPayRent={() => api.payForPrivateField()}
+          />
+        );
+      }
+      break;
+
+    case 'payForPrivateField':
+      renderJsx = (
+        <PayRentAction
+          rentAmount={currentField.income[currentField.amountOfBranches]}
+          onPayRent={() => api.payForPrivateField()}
+        />
+      );
+      break;
+
+    case 'VDNH':
+      renderJsx = (
+        <VDNHAction
+          amountToPay={currentField.toPay || 0}
+          onPay={() => api.payToBankForSpecialField()}
+        />
+      );
+      break;
+
+    case 'COIN':
+      renderJsx = (
+        <CoinAction
+          amountToPay={currentField.toPay || 0}
+          onPay={() => api.payToBankForSpecialField()}
+        />
+      );
+      break;
+
+    case 'secretPay':
+      renderJsx = (
+        <SecretPayAction
+          secretInfo={secretInfo}
+          amountToPay={amountToPay}
+          gamePlayers={game.players}
+          onPay={() => payForSecret()}
+        />
+      );
+      break;
+  }
+  console.log('renderJsx', renderJsx);
+  return (
+    <div className="flex flex-col justify-between rounded-xl bg-gameCenterModal px-4 py-2 text-xs text-white shadow-gameCenterModaShadowCombined lg:py-3">
+      <div className="mb-3 text-small font-bold md:text-standard lg:text-xl xl:text-3xl">
+        {ACTION_TITLES[action as keyof typeof ACTION_TITLES]}
+      </div>
+      {renderJsx}
+    </div>
+  );
+};
+
+export default ActionsSection;

src/app/(game)/game/_components/Actions/BuyFieldAction.tsx

@@ -0,0 +1,58 @@
+import { Button } from '@/components/ui/button';
+import useScreenSize from '@/hooks/screenSize';
+import HintBulb from '../HintBulb';
+
+interface BuyFieldActionProps {
+  fieldPrice: number;
+  onBuyField: () => void;
+  onPutUpForAuction: () => void;
+}
+
+const BuyFieldAction = ({
+  fieldPrice,
+  onBuyField,
+  onPutUpForAuction,
+}: BuyFieldActionProps) => {
+  const screenSize = useScreenSize();
+
+  return (
+    <>
+      <div className="mb-3 flex w-full items-center gap-2 font-fixelDisplay">
+        <div className="flex h-6 items-center justify-center gap-1 rounded-md bg-gradient-to-r from-[#FBD07C] to-[#F7F779] px-1 text-[#19376D]">
+          <div className="h-5 w-5">
+            <HintBulb />
+          </div>
+        </div>
+        <p className="text-[10px]">
+          If you cancel the purchase, the field will be put up for auction.
+        </p>
+      </div>
+      <div className="flex w-full gap-1 lg:gap-4">
+        <Button
+          variant={'blueGame'}
+          size={screenSize.width > 1200 ? 'default' : 'xs'}
+          className="font-custom text-[9px] text-white md:text-sm lg:text-lg"
+          onClick={onBuyField}
+        >
+          Buy for {fieldPrice}
+        </Button>
+        <div
+          className={`flex h-[38px] w-full flex-col items-center justify-center overflow-hidden rounded-md bg-buttonBlueGradient px-[1px]`}
+        >
+          <Button
+            variant={'gameDarkBlue'}
+            onClick={onPutUpForAuction}
+            size={screenSize.width > 1200 ? 'default' : 'xs'}
+            className="font-custom"
+          >
+            <p className="bg-[linear-gradient(184.39deg,#5AB2F7_4.38%,#12CFF3_97.25%)] bg-clip-text text-4xl text-[9px] font-bold text-transparent md:text-sm lg:text-lg">
+              Put up for auction
+            </p>
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default BuyFieldAction;

src/app/(game)/game/_components/Actions/CoinAction.tsx

@@ -0,0 +1,32 @@
+import { Button } from '@/components/ui/button';
+import useScreenSize from '@/hooks/screenSize';
+
+interface CoinActionProps {
+  amountToPay: number;
+  onPay: () => void;
+}
+
+const CoinAction = ({ amountToPay, onPay }: CoinActionProps) => {
+  const screenSize = useScreenSize();
+
+  return (
+    <>
+      <div className="mb-3 flex w-full items-center gap-2 font-fixelDisplay">
+        <p className="text-[10px]">
+          The state has decided that you live too luxuriously! Pay
+          your taxes and maintain the balance in the game.
+        </p>
+      </div>
+      <Button
+        variant={'blueGame'}
+        size={screenSize.width > 1200 ? 'default' : 'xs'}
+        className="font-custom text-[9px] text-white md:text-sm lg:text-lg"
+        onClick={onPay}
+      >
+        Pay {Math.abs(amountToPay)}
+      </Button>
+    </>
+  );
+};
+
+export default CoinAction;

src/app/(game)/game/_components/Actions/PayRentAction.tsx

@@ -0,0 +1,32 @@
+import { Button } from '@/components/ui/button';
+import useScreenSize from '@/hooks/screenSize';
+
+interface PayRentActionProps {
+  rentAmount: number;
+  onPayRent: () => void;
+}
+
+const PayRentAction = ({ rentAmount, onPayRent }: PayRentActionProps) => {
+  const screenSize = useScreenSize();
+
+  return (
+    <>
+      <div className="mb-3 flex w-full items-center gap-2 font-fixelDisplay">
+        <p className="text-[10px]">
+          When you enter someone else's field, you are obliged to
+          pay the owner a rent according to the value of this field.
+        </p>
+      </div>
+      <Button
+        variant={'blueGame'}
+        size={screenSize.width > 1200 ? 'default' : 'xs'}
+        className="font-custom text-[9px] text-white md:text-sm lg:text-lg"
+        onClick={onPayRent}
+      >
+        Pay for rent {rentAmount}
+      </Button>
+    </>
+  );
+};
+
+export default PayRentAction;

src/app/(game)/game/_components/Actions/RollDiceAction.tsx

@@ -0,0 +1,38 @@
+import { Button } from '@/components/ui/button';
+import useScreenSize from '@/hooks/screenSize';
+import HintBulb from '../HintBulb';
+
+interface RollDiceActionProps {
+  onRollDice: () => void;
+}
+
+const RollDiceAction = ({ onRollDice }: RollDiceActionProps) => {
+  const screenSize = useScreenSize();
+
+  return (
+    <>
+      <div className="mb-3 flex w-full items-center gap-2 font-fixelDisplay">
+        <div className="flex h-6 items-center justify-center gap-1 rounded-md bg-gradient-to-r from-[#FBD07C] to-[#F7F779] px-2 text-[#19376D]">
+          <div className="h-5 w-5">
+            <HintBulb />
+          </div>
+          <p className="text-xs">Tip</p>
+        </div>
+        <p className="text-[10px]">
+          Remember: sometimes it's better to save money than to
+          spend it on everything that happens.
+        </p>
+      </div>
+      <Button
+        variant={'blueGame'}
+        size={screenSize.width > 1200 ? 'default' : 'xs'}
+        className="font-custom text-[9px] text-white md:text-sm lg:text-lg"
+        onClick={onRollDice}
+      >
+        Roll Dice
+      </Button>
+    </>
+  );
+};
+
+export default RollDiceAction;

src/app/(game)/game/_components/Actions/SecretPayAction.tsx

@@ -0,0 +1,51 @@
+import { Button } from '@/components/ui/button';
+import useScreenSize from '@/hooks/screenSize';
+import { Player } from '@/types/player';
+
+interface SecretPayActionProps {
+  secretInfo: {
+    users: string[];
+    amounts: number[];
+  };
+  amountToPay: number;
+  gamePlayers: Player[];
+  onPay: () => void;
+}
+
+const SecretPayAction = ({
+  secretInfo,
+  amountToPay,
+  gamePlayers,
+  onPay,
+}: SecretPayActionProps) => {
+  const screenSize = useScreenSize();
+
+  const getSecretMessage = () => {
+    if (secretInfo.users.length === 1) {
+      return `The unknown demands sacrifices! You have entered a secret field and must make a payment.`;
+    } else {
+      const player = gamePlayers.find(
+        player => player.userId === secretInfo?.users[0],
+      );
+      return `Player ${player?.user.nickname} activated a secret field, and this led to an event that affected you.`;
+    }
+  };
+
+  return (
+    <>
+      <div className="mb-3 flex w-full items-center gap-2 font-fixelDisplay">
+        <p className="text-[10px]">{getSecretMessage()}</p>
+      </div>
+      <Button
+        variant={'blueGame'}
+        size={screenSize.width > 1200 ? 'default' : 'xs'}
+        className="font-custom text-[9px] text-white md:text-sm lg:text-lg"
+        onClick={onPay}
+      >
+        Pay {Math.abs(amountToPay)}
+      </Button>
+    </>
+  );
+};
+
+export default SecretPayAction;

src/app/(game)/game/_components/Actions/VDNHAction.tsx

@@ -0,0 +1,32 @@
+import { Button } from '@/components/ui/button';
+import useScreenSize from '@/hooks/screenSize';
+
+interface VDNHActionProps {
+  amountToPay: number;
+  onPay: () => void;
+}
+
+const VDNHAction = ({ amountToPay, onPay }: VDNHActionProps) => {
+  const screenSize = useScreenSize();
+
+  return (
+    <>
+      <div className="mb-3 flex w-full items-center gap-2 font-fixelDisplay">
+        <p className="text-[10px]">
+          You've come to the festival at VDNH! Fairs, attractions
+          and delicious food - unforgettable impressions guaranteed!
+        </p>
+      </div>
+      <Button
+        variant={'blueGame'}
+        size={screenSize.width > 1200 ? 'default' : 'xs'}
+        className="font-custom text-[9px] text-white md:text-sm lg:text-lg"
+        onClick={onPay}
+      >
+        Pay {Math.abs(amountToPay)}
+      </Button>
+    </>
+  );
+};
+
+export default VDNHAction;