Scribd
Upload
7 views

message (2)

The document is a React component for a coinflip game view, displaying player information, items, and a winner announcement with confetti. It includes functionalities for handling modal states, loading videos, and calculating total item values for each player. The component also manages user interactions and updates based on the coinflip results, ensuring a dynamic user experience.

Uploaded by

jalalgirma.dev
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
7 views

message (2)

The document is a React component for a coinflip game view, displaying player information, items, and a winner announcement with confetti. It includes functionalities for handling modal states, loading videos, and calculating total item values for each player. The component also manages user interactions and updates based on the coinflip results, ensuring a dynamic user experience.

Uploaded by

jalalgirma.dev
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 6

import React, { useEffect, useRef, useState, useContext } from "react";

import Confetti from "react-confetti";


import ViewStyles from "./view.module.css";
import toast from "react-hot-toast";
import { useModal
} from "../../../utils/ModalContext";
import {
RedVideo,
BlueVideo,
LongLogo,
Bobux,
Undefinded,
Heads,
Trails,
} from "../../../assets/exports.jsx";
import { getauth } from "../../../utils/getauth.js";
import SocketContext from "../../../utils/socket.js";
import UserContext from "../../../utils/user.js";
import { api } from "../../../config.js";
import Profile from "../../popup/profile.jsx";

export default function View({ coinflip, onClose }) {


const { setModalState, modalState } = useModal();
const { setLoading } = useModal();
const [updatedCoinflip, setUpdatedCoinflip] = useState(coinflip);
const [isWinnerVisible, setIsWinnerVisible] = useState(false);
const { userData, setUserData } = useContext(UserContext);
const socket = useContext(SocketContext);
const blueVideoRef = useRef(null);
const redVideoRef = useRef(null);
const [isClosing, setIsClosing] = useState(false);
const [cancel, setCancel] = useState(false);

useEffect(() => {
if (coinflip) {
setUpdatedCoinflip(coinflip);
}
}, [coinflip]);

useEffect(() => {
if (updatedCoinflip?.winner) {
const timer = setTimeout(() => {
setIsWinnerVisible(true);
}, 4800);

return () => clearTimeout(timer);


}
}, [updatedCoinflip]);

if (!updatedCoinflip) {
toast.error("Coinflip data not found!");
return null;
}

const calculateTotalValue = (items) => {


return items?.reduce((total, item) => total + item.itemvalue, 0) || 0;
};
const playerOneTotal = calculateTotalValue(updatedCoinflip.PlayerOne?.items);
const playerTwoTotal = calculateTotalValue(updatedCoinflip.PlayerTwo?.items);

const closeModal = () => {


setIsClosing(true);
setTimeout(() => {
setModalState(null);
}, 200);
};

useEffect(() => {
if (blueVideoRef.current) {
blueVideoRef.current.load();
}
if (redVideoRef.current) {
redVideoRef.current.load();
}
}, []);

return (
<div
className={ViewStyles.blurbg}
onClick={() => {
closeModal();
onClose();
}}
>
<div
className={`${ViewStyles.modalbackgroundview} ${isClosing ?
ViewStyles.shrinkOut : ""}`}
onClick={(e) => e.stopPropagation()}
>
<div className={ViewStyles.header}>
<img src={LongLogo} alt="bloxyspin logo" className={ViewStyles.logo} />
<button
className={ViewStyles.closeButton}
onClick={() => {
closeModal();
onClose();
}}
>
&times;
</button>
</div>

<div className={ViewStyles.players}>
<div className={ViewStyles.player}>
<div className={ViewStyles.avatarWrapper}>
{isWinnerVisible &&
updatedCoinflip.winner === updatedCoinflip.PlayerOne?.id && (
<Confetti
width={150}
height={150}
recycle={false}
numberOfPieces={100}
style={{
position: "absolute",
top: 0,
left: 0,
}}
/>
)}
<img
src={updatedCoinflip.PlayerOne?.thumbnail || ""}
onClick={() =>
updatedCoinflip.PlayerOne?.id
? setModalState(...[<Profile
userid={updatedCoinflip.PlayerOne?.id} />])
: ""

}
alt={updatedCoinflip.PlayerOne?.username || "Unknown"}
className={`${ViewStyles.avatar} ${
isWinnerVisible &&
updatedCoinflip.winner === updatedCoinflip.PlayerOne?.id
? ViewStyles.winner
: ""
}`}
/>
{updatedCoinflip.PlayerOne?.coin && (
<div className={ViewStyles.coin}>
<img
src={
updatedCoinflip.PlayerOne.coin === "heads"
? Heads
: Trails
}
alt="coin"
/>
</div>
)}
</div>
<h3 className={ViewStyles.username}>
{updatedCoinflip.PlayerOne?.username || "Unknown"}
</h3>
</div>

<div className={ViewStyles.aniholder}>
{updatedCoinflip.winnercoin === "heads" ? (
<video
ref={blueVideoRef}
autoPlay
muted
playsInline
webkit-playsinline
preload="auto"
>
<source src={BlueVideo} type="video/mp4" />
unsupported browser
</video>
) : updatedCoinflip.winnercoin === "trails" ? (
<video
ref={redVideoRef}
autoPlay
muted
playsInline
webkit-playsinline
preload="auto"
>
<source src={RedVideo} type="video/mp4" />
unsupported browser
</video>
) : (
<p className={ViewStyles.vsText}>Vs</p>
)}
</div>

<div className={ViewStyles.player}>
{updatedCoinflip.PlayerTwo ? (
<div className={ViewStyles.avatarWrapper}>
{isWinnerVisible &&
updatedCoinflip.winner === updatedCoinflip.PlayerTwo?.id && (
<Confetti
width={150}
height={150}
recycle={false}
numberOfPieces={100}
style={{
position: "absolute",
top: 0,
left: 0,
}}
/>
)}
<img
src={updatedCoinflip.PlayerTwo?.thumbnail || Undefinded}
alt={updatedCoinflip.PlayerTwo?.username || "Unknown"}
className={`${ViewStyles.avatar} ${
isWinnerVisible &&
updatedCoinflip.winner === updatedCoinflip.PlayerTwo?.id
? ViewStyles.winner
: ""
}`}
onClick={() =>
updatedCoinflip.PlayerTwo?.id
? setModalState(<Profile
userid={updatedCoinflip.PlayerTwo?.id} />)
: ""
}
/>
<h3 className={ViewStyles.username}>
{updatedCoinflip.PlayerTwo?.username || "Waiting..."}
</h3>
{updatedCoinflip.PlayerTwo?.coin && (
<div className={ViewStyles.coin}>
<img
src={
updatedCoinflip.PlayerTwo.coin === "trails"
? Trails
: Heads
}
alt="Player Two Coin"
/>
</div>
)}
</div>
) : (
<div className={ViewStyles.avatarWrapper}>
<div className={ViewStyles.avatar}></div>
<h3 className={ViewStyles.username}>Waiting...</h3>
</div>
)}
</div>
</div>

<div className={ViewStyles.items}>
<div className={ViewStyles.playerItems}>
<div className={ViewStyles.totalValueContainer}>
<div className={ViewStyles.item}>
<img src={Bobux} alt="bobux" className={ViewStyles.bobux} />
<p>R${playerOneTotal.toLocaleString()}</p>
</div>
</div>
{updatedCoinflip.PlayerOne?.items?.map((item, index) => (
<div className={ViewStyles.item} key={index}>
<div className={ViewStyles.itemImageWrapper}>
<img
src={item.itemimage}
alt={item.name}
className={ViewStyles.normalItemImage}
loading="eager"
/>
<img
src={item.itemimage}
alt={item.name}
className={ViewStyles.bluredimages}
loading="eager"
/>
</div>
<div className={ViewStyles.itemDetails}>
<p className={ViewStyles.itemName}>{item.itemname}</p>
<p className={ViewStyles.itemValue}>R$
{item.itemvalue.toLocaleString()}</p>
</div>
</div>
))}
</div>
<div className={ViewStyles.playerItems}>
<div className={ViewStyles.totalValueContainer}>
<div className={ViewStyles.item}>
<img src={Bobux} alt="bobux" className={ViewStyles.bobux} />
<p>R${playerTwoTotal.toLocaleString()}</p>
</div>
</div>
{updatedCoinflip.PlayerTwo?.items?.map((item, index) => (
<div className={ViewStyles.item} key={index}>
<div className={ViewStyles.itemImageWrapper}>
<img
src={item.itemimage}
alt={item.name}
className={ViewStyles.normalItemImage}
loading="eager"
/>
<img
src={item.itemimage}
alt={item.name}
className={ViewStyles.bluredimages}
loading="eager"
/>
</div>
<div className={ViewStyles.itemDetails}>
<p className={ViewStyles.itemName}>{item.itemname}</p>
<p className={ViewStyles.itemValue}>R$
{item.itemvalue.toLocaleString()}</p>
</div>
</div>
))}
</div>
</div>
</div>
</div>
);
}

You might also like