From b6c47e23c9cefa0a79c332700070044386210c3c Mon Sep 17 00:00:00 2001 From: Stephen Feddes Date: Mon, 6 Nov 2023 03:01:21 -0600 Subject: [PATCH 1/3] Submitting feature for approval. --- public/images/chicagoBulls.svg | 1 + public/images/nbaLogos/1610612737.svg | 55 ++ public/images/nbaLogos/1610612738.svg | 99 +++ public/images/nbaLogos/1610612739.svg | 52 ++ public/images/nbaLogos/1610612740.svg | 19 + public/images/nbaLogos/1610612742.svg | 60 ++ public/images/nbaLogos/1610612743.svg | 64 ++ public/images/nbaLogos/1610612744.svg | 52 ++ public/images/nbaLogos/1610612746.svg | 55 ++ public/images/nbaLogos/1610612747.svg | 36 + public/images/nbaLogos/1610612749.svg | 51 ++ public/images/nbaLogos/1610612750.svg | 68 ++ public/images/nbaLogos/1610612751.svg | 36 + public/images/nbaLogos/1610612752.svg | 57 ++ public/images/nbaLogos/1610612753.svg | 291 +++++++ public/images/nbaLogos/1610612754.svg | 289 +++++++ public/images/nbaLogos/1610612755.svg | 293 +++++++ public/images/nbaLogos/1610612756.svg | 29 + public/images/nbaLogos/1610612757.svg | 127 +++ public/images/nbaLogos/1610612758.svg | 73 ++ public/images/nbaLogos/1610612759.svg | 44 ++ public/images/nbaLogos/1610612760.svg | 35 + public/images/nbaLogos/1610612761.svg | 41 + public/images/nbaLogos/1610612762.svg | 37 + public/images/nbaLogos/1610612763.svg | 51 ++ public/images/nbaLogos/1610612764.svg | 727 ++++++++++++++++++ public/images/nbaLogos/1610612765.svg | 90 +++ public/images/nbaLogos/1610612766.svg | 352 +++++++++ src/components/DraftRoom/ChatRoom.tsx | 47 +- src/components/DraftRoom/DraftGrade.tsx | 87 +++ src/components/DraftRoom/RosterPickList.tsx | 7 +- .../DraftRoom/center/CenterHeader.tsx | 39 +- .../DraftRoom/center/PlayersTable.tsx | 2 +- .../DraftRoom/leftColumn/LeftColumn.tsx | 2 +- src/components/Invites.tsx | 20 +- src/components/Navbar.tsx | 2 +- src/components/PlayerDraftPopup.tsx | 64 ++ src/components/UserInviter.tsx | 69 +- src/components/buttons/TranslucentButton.tsx | 15 + src/css/buttons/translucent-btn.css | 15 + src/css/chatRoom.css | 51 +- src/css/configureMockDraft.css | 3 +- src/css/draftHeader.css | 2 +- src/css/draftRoom/draftGrade.css | 102 +++ src/css/draftRoom/rosterPickList.css | 56 +- src/css/draftsPage.css | 57 +- src/css/invites.css | 43 +- src/css/modal.css | 11 + src/css/navbar.css | 15 +- src/css/pageLayout.css | 2 +- src/css/playerDraftPopup.css | 102 +++ src/css/userInviter.css | 13 - src/index.css | 10 +- src/pages/Dashboard.tsx | 2 +- src/pages/DraftsPage.tsx | 32 +- src/pages/UpdateMockDraft.tsx | 4 +- 56 files changed, 3918 insertions(+), 140 deletions(-) create mode 100644 public/images/chicagoBulls.svg create mode 100644 public/images/nbaLogos/1610612737.svg create mode 100644 public/images/nbaLogos/1610612738.svg create mode 100644 public/images/nbaLogos/1610612739.svg create mode 100644 public/images/nbaLogos/1610612740.svg create mode 100644 public/images/nbaLogos/1610612742.svg create mode 100644 public/images/nbaLogos/1610612743.svg create mode 100644 public/images/nbaLogos/1610612744.svg create mode 100644 public/images/nbaLogos/1610612746.svg create mode 100644 public/images/nbaLogos/1610612747.svg create mode 100644 public/images/nbaLogos/1610612749.svg create mode 100644 public/images/nbaLogos/1610612750.svg create mode 100644 public/images/nbaLogos/1610612751.svg create mode 100644 public/images/nbaLogos/1610612752.svg create mode 100644 public/images/nbaLogos/1610612753.svg create mode 100644 public/images/nbaLogos/1610612754.svg create mode 100644 public/images/nbaLogos/1610612755.svg create mode 100644 public/images/nbaLogos/1610612756.svg create mode 100644 public/images/nbaLogos/1610612757.svg create mode 100644 public/images/nbaLogos/1610612758.svg create mode 100644 public/images/nbaLogos/1610612759.svg create mode 100644 public/images/nbaLogos/1610612760.svg create mode 100644 public/images/nbaLogos/1610612761.svg create mode 100644 public/images/nbaLogos/1610612762.svg create mode 100644 public/images/nbaLogos/1610612763.svg create mode 100644 public/images/nbaLogos/1610612764.svg create mode 100644 public/images/nbaLogos/1610612765.svg create mode 100644 public/images/nbaLogos/1610612766.svg create mode 100644 src/components/DraftRoom/DraftGrade.tsx create mode 100644 src/components/PlayerDraftPopup.tsx create mode 100644 src/components/buttons/TranslucentButton.tsx create mode 100644 src/css/buttons/translucent-btn.css create mode 100644 src/css/draftRoom/draftGrade.css create mode 100644 src/css/modal.css create mode 100644 src/css/playerDraftPopup.css diff --git a/public/images/chicagoBulls.svg b/public/images/chicagoBulls.svg new file mode 100644 index 00000000..e96cdf46 --- /dev/null +++ b/public/images/chicagoBulls.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/nbaLogos/1610612737.svg b/public/images/nbaLogos/1610612737.svg new file mode 100644 index 00000000..8f533ae6 --- /dev/null +++ b/public/images/nbaLogos/1610612737.svg @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/nbaLogos/1610612738.svg b/public/images/nbaLogos/1610612738.svg new file mode 100644 index 00000000..a8af2206 --- /dev/null +++ b/public/images/nbaLogos/1610612738.svg @@ -0,0 +1,99 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/nbaLogos/1610612739.svg b/public/images/nbaLogos/1610612739.svg new file mode 100644 index 00000000..d06ef0a8 --- /dev/null +++ b/public/images/nbaLogos/1610612739.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/nbaLogos/1610612740.svg b/public/images/nbaLogos/1610612740.svg new file mode 100644 index 00000000..ea56ce40 --- /dev/null +++ b/public/images/nbaLogos/1610612740.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/public/images/nbaLogos/1610612742.svg b/public/images/nbaLogos/1610612742.svg new file mode 100644 index 00000000..a3926ddb --- /dev/null +++ b/public/images/nbaLogos/1610612742.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/nbaLogos/1610612743.svg b/public/images/nbaLogos/1610612743.svg new file mode 100644 index 00000000..142d26b4 --- /dev/null +++ b/public/images/nbaLogos/1610612743.svg @@ -0,0 +1,64 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/nbaLogos/1610612744.svg b/public/images/nbaLogos/1610612744.svg new file mode 100644 index 00000000..d67b46a6 --- /dev/null +++ b/public/images/nbaLogos/1610612744.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/nbaLogos/1610612746.svg b/public/images/nbaLogos/1610612746.svg new file mode 100644 index 00000000..e699c2f0 --- /dev/null +++ b/public/images/nbaLogos/1610612746.svg @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/nbaLogos/1610612747.svg b/public/images/nbaLogos/1610612747.svg new file mode 100644 index 00000000..3d49dd4b --- /dev/null +++ b/public/images/nbaLogos/1610612747.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/nbaLogos/1610612749.svg b/public/images/nbaLogos/1610612749.svg new file mode 100644 index 00000000..8badb295 --- /dev/null +++ b/public/images/nbaLogos/1610612749.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/nbaLogos/1610612750.svg b/public/images/nbaLogos/1610612750.svg new file mode 100644 index 00000000..5e704ecb --- /dev/null +++ b/public/images/nbaLogos/1610612750.svg @@ -0,0 +1,68 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/nbaLogos/1610612751.svg b/public/images/nbaLogos/1610612751.svg new file mode 100644 index 00000000..e6391acb --- /dev/null +++ b/public/images/nbaLogos/1610612751.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/nbaLogos/1610612752.svg b/public/images/nbaLogos/1610612752.svg new file mode 100644 index 00000000..13087b93 --- /dev/null +++ b/public/images/nbaLogos/1610612752.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/nbaLogos/1610612753.svg b/public/images/nbaLogos/1610612753.svg new file mode 100644 index 00000000..0a65ab9a --- /dev/null +++ b/public/images/nbaLogos/1610612753.svg @@ -0,0 +1,291 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/nbaLogos/1610612754.svg b/public/images/nbaLogos/1610612754.svg new file mode 100644 index 00000000..03f47a68 --- /dev/null +++ b/public/images/nbaLogos/1610612754.svg @@ -0,0 +1,289 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/nbaLogos/1610612755.svg b/public/images/nbaLogos/1610612755.svg new file mode 100644 index 00000000..172ea0b1 --- /dev/null +++ b/public/images/nbaLogos/1610612755.svg @@ -0,0 +1,293 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/nbaLogos/1610612756.svg b/public/images/nbaLogos/1610612756.svg new file mode 100644 index 00000000..f310d5fc --- /dev/null +++ b/public/images/nbaLogos/1610612756.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/nbaLogos/1610612757.svg b/public/images/nbaLogos/1610612757.svg new file mode 100644 index 00000000..61ac4dac --- /dev/null +++ b/public/images/nbaLogos/1610612757.svg @@ -0,0 +1,127 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/nbaLogos/1610612758.svg b/public/images/nbaLogos/1610612758.svg new file mode 100644 index 00000000..30318ab6 --- /dev/null +++ b/public/images/nbaLogos/1610612758.svg @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/nbaLogos/1610612759.svg b/public/images/nbaLogos/1610612759.svg new file mode 100644 index 00000000..d505bb42 --- /dev/null +++ b/public/images/nbaLogos/1610612759.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/nbaLogos/1610612760.svg b/public/images/nbaLogos/1610612760.svg new file mode 100644 index 00000000..a7ba4456 --- /dev/null +++ b/public/images/nbaLogos/1610612760.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/nbaLogos/1610612761.svg b/public/images/nbaLogos/1610612761.svg new file mode 100644 index 00000000..34976cd0 --- /dev/null +++ b/public/images/nbaLogos/1610612761.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/nbaLogos/1610612762.svg b/public/images/nbaLogos/1610612762.svg new file mode 100644 index 00000000..a7c53877 --- /dev/null +++ b/public/images/nbaLogos/1610612762.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/nbaLogos/1610612763.svg b/public/images/nbaLogos/1610612763.svg new file mode 100644 index 00000000..c5fdc049 --- /dev/null +++ b/public/images/nbaLogos/1610612763.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/nbaLogos/1610612764.svg b/public/images/nbaLogos/1610612764.svg new file mode 100644 index 00000000..0eba4c4a --- /dev/null +++ b/public/images/nbaLogos/1610612764.svg @@ -0,0 +1,727 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/nbaLogos/1610612765.svg b/public/images/nbaLogos/1610612765.svg new file mode 100644 index 00000000..e0b7e6b0 --- /dev/null +++ b/public/images/nbaLogos/1610612765.svg @@ -0,0 +1,90 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/nbaLogos/1610612766.svg b/public/images/nbaLogos/1610612766.svg new file mode 100644 index 00000000..1a31c54c --- /dev/null +++ b/public/images/nbaLogos/1610612766.svg @@ -0,0 +1,352 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/DraftRoom/ChatRoom.tsx b/src/components/DraftRoom/ChatRoom.tsx index b3af66f9..23c012dd 100644 --- a/src/components/DraftRoom/ChatRoom.tsx +++ b/src/components/DraftRoom/ChatRoom.tsx @@ -3,50 +3,75 @@ import React, { useEffect, useState, useRef } from 'react'; import { useDraft } from './DraftContext'; import TextInput from '../TextInput'; import {BsChatFill} from 'react-icons/bs'; +import { useAuth } from '../../authentication/AuthContext'; +import TranslucentButton from '../buttons/TranslucentButton'; + +interface Message { + username: string; + message: string; +} const ChatRoom = () => { const draftContext = useDraft(); const socket = draftContext?.socket; const draftId = draftContext?.draftId; + const {username} = useAuth() const modalRef = useRef(null); const [message, setMessage] = useState(""); - const [messages, setMessages] = useState([]); + const [messages, setMessages] = useState([]); + const [unreadMessageCount, setUnreadMessageCount] = useState(0); const [isOpen, setIsOpen] = useState(false); const sendMessage = (message: string) => { - socket?.emit('send-message', message, draftId); - let messageList = [...messages, message]; - messages.push(message); - setMessages(messageList); + socket?.emit('send-message', message, username); } useEffect(() => { if (draftId) { - socket?.on('receive-message', (message: string) => { + socket?.on('receive-message', (message: Message) => { let messageList = [...messages, message]; - messages.push(message); + console.log(message); + messages.push({message: message.message, username: username}); setMessages(messageList); + setUnreadMessageCount(unreadMessageCount+1); + if (isOpen) { + setUnreadMessageCount(0) + } else{ + setUnreadMessageCount(unreadMessageCount+1); + } }); } }, [draftId]); return ( <> - setIsOpen(true)} className="chat-icon" /> + {setIsOpen(true); setUnreadMessageCount(0)}} className="chat-icon" /> + {unreadMessageCount > 0 && ( + + {unreadMessageCount} + + )} {if (e.target==modalRef.current) {setIsOpen(false)}}} className="modal" >
    - {messages.map((message: string, index: number) => ( -
  • {message}
    • + {messages.map((message: Message, index: number) => ( +
  • + {username==message.username && ( +

    {message.message}

    + )} + {username!=message.username && ( +

    {message.username}: {message.message}

    + )} +
    • ))}
- + {setMessage(""); sendMessage(message)}}>Send
diff --git a/src/components/DraftRoom/DraftGrade.tsx b/src/components/DraftRoom/DraftGrade.tsx new file mode 100644 index 00000000..35856ebc --- /dev/null +++ b/src/components/DraftRoom/DraftGrade.tsx @@ -0,0 +1,87 @@ +import "../../css/draftRoom/draftGrade.css"; +import React, { useEffect, useState, useRef } from "react"; +import { RxCross1 } from "react-icons/rx"; +import TranslucentButton from "../buttons/TranslucentButton"; +import { useAuth } from "../../authentication/AuthContext"; +import { useDraft } from "./DraftContext"; +const API_URL = import.meta.env.VITE_API_URL; + +interface Props { + isOpen: boolean; + draftGrade: string; + draftRank: number; + projectFanPtsTotal: number; +} + +const DraftGrade = (props: Props) => { + const modalRef = useRef(null); + const [isDraftGradeOpen, setIsDraftGradeOpen] = useState(false); + const {userId} = useAuth(); + const draftContext = useDraft(); + const draftId = draftContext?.draftId; + + useEffect(() => { + setIsDraftGradeOpen(props.isOpen); + }, [props.isOpen]); + + const sendSummaryEmail = async () => { + const response = await fetch(API_URL+"/drafts/grades", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + userId: userId, + draftId: draftId, + fanPtsTotal: props.projectFanPtsTotal, + draftRank: props.draftRank, + draftGrade: props.draftGrade + }), + }); + } + + return ( + { + if (e.target == modalRef.current) { + setIsDraftGradeOpen(false); + } + }} + className="modal" + > +
+

+ setIsDraftGradeOpen(false)} + /> + This draft is over! +

+
Summary
+
+ Grade: {props.draftGrade} +
+
+ Total Proj. Fan Pts: {props.projectFanPtsTotal} +
+
+ Rank: {props.draftRank} +
+
+

Email the results to yourself.

+ sendSummaryEmail()}> + Send + +
+
+ + ); +}; + +export default DraftGrade; diff --git a/src/components/DraftRoom/RosterPickList.tsx b/src/components/DraftRoom/RosterPickList.tsx index 9e227c3b..e198332c 100644 --- a/src/components/DraftRoom/RosterPickList.tsx +++ b/src/components/DraftRoom/RosterPickList.tsx @@ -4,6 +4,7 @@ import { useAuth } from '../../authentication/AuthContext'; import { useDraft } from './DraftContext'; import { User } from '../../utils/users'; import { FaChevronDown } from 'react-icons/fa'; +import {RxCross1} from 'react-icons/rx'; const API_URL = import.meta.env.VITE_API_URL; const RosterPickList = () => { @@ -40,7 +41,11 @@ const RosterPickList = () => { onClick={(e) => {if (e.target==modalRef.current) {setIsModalOpen(false)}}} >
-
Teams
+

+ setIsModalOpen(false)}/> + Teams +

  • {`Team ${draftUser?.username}`}
    • diff --git a/src/components/DraftRoom/center/CenterHeader.tsx b/src/components/DraftRoom/center/CenterHeader.tsx index b8ca4f50..212516ab 100644 --- a/src/components/DraftRoom/center/CenterHeader.tsx +++ b/src/components/DraftRoom/center/CenterHeader.tsx @@ -1,18 +1,48 @@ import '../../../css/draftRoom/center/draftCenter.css'; -import React, { useEffect, useState } from 'react'; +import '../../../css/modal.css'; +import React, { useEffect, useState, useRef } from 'react'; +import {RxCross1} from 'react-icons/rx'; import { DraftPick } from '../../../utils/draft'; import { useDraft } from '../DraftContext'; import { useAuth } from '../../../authentication/AuthContext'; +import DraftGrade from '../draftGrade'; +const API_URL = import.meta.env.VITE_API_URL; const CenterHeader = () => { const { userId } = useAuth(); + const modalRef = useRef(null); const draftContext = useDraft(); const socket = draftContext?.socket; + const draftId = draftContext?.draftId; const isDraftStarted = draftContext?.isDraftStarted; const [draftOrder, setDraftOrder] = useState(); const [pickCountToTurn, setPickCountToTurn] = useState(0); const [nextPickNumber, setNextPickNumber] = useState(0); + const [draftGrade, setDraftGrade] = useState(''); + const [draftRank, setDraftRank] = useState(0); + const [projectedFanPtsTotal, setProjectedFanPtsTotal] = useState(0); + const [isDraftGradeOpen, setIsDraftGradeOpen] = useState(false); + + useEffect(() => { + if (draftOrder?.length==0) { + fetch(API_URL+`/drafts/grades?userId=${userId}&draftId=${draftId}`, { + method: 'GET', + headers: { + 'Content-Type': 'application/json' + } + }) + .then(response => { + return response.json(); + }) + .then(data => { + setDraftGrade(data.grade); + setDraftRank(data.rank) + setProjectedFanPtsTotal(data.totalFanPts) + setIsDraftGradeOpen(true); + }) + } + }, [draftOrder]); useEffect(() => { @@ -30,6 +60,12 @@ const CenterHeader = () => { }, [socket]); return ( + <> +
    {(pickCountToTurn>0 && isDraftStarted) && ( {`You're on the clock in: ${pickCountToTurn} picks`} @@ -51,6 +87,7 @@ const CenterHeader = () => {

    {`Round ${Math.ceil(nextPickNumber/10)}, Pick ${((nextPickNumber)%10 || 10) }`}

    )}
    + ) }; diff --git a/src/components/DraftRoom/center/PlayersTable.tsx b/src/components/DraftRoom/center/PlayersTable.tsx index 05eb75ec..f175519a 100644 --- a/src/components/DraftRoom/center/PlayersTable.tsx +++ b/src/components/DraftRoom/center/PlayersTable.tsx @@ -4,7 +4,7 @@ import { useDraft } from '../DraftContext'; import { useAuth } from '../../../authentication/AuthContext'; import { addPlayer, PlayerPreviousSeasonStats, formatPlayerPositions, Player} from '../../../utils/draft'; import OutlinedRoundedButton from '../../buttons/OutlinedRoundedButton'; -const API_URL = import.meta.env.VITE_API_URL; +import PlayerDraftPopup from '../../PlayerDraftPopup'; const PlayersTable = () => { diff --git a/src/components/DraftRoom/leftColumn/LeftColumn.tsx b/src/components/DraftRoom/leftColumn/LeftColumn.tsx index 73943fef..d2cc24e8 100644 --- a/src/components/DraftRoom/leftColumn/LeftColumn.tsx +++ b/src/components/DraftRoom/leftColumn/LeftColumn.tsx @@ -62,7 +62,7 @@ const LeftColumn = () => {

    Pick Queue

    diff --git a/src/components/Invites.tsx b/src/components/Invites.tsx index a5e56bb2..33e21d1b 100644 --- a/src/components/Invites.tsx +++ b/src/components/Invites.tsx @@ -3,6 +3,7 @@ import "../css/invites.css"; import { useAuth } from "../authentication/AuthContext"; import {AiOutlineMail} from 'react-icons/ai'; import { useNavigate } from "react-router-dom"; +import {RxCross1} from 'react-icons/rx'; const API_URL = import.meta.env.VITE_API_URL; interface Invite { @@ -24,13 +25,12 @@ const Invites = () => { const navigate = useNavigate(); const updateInvite = async (isAccepted: boolean, draftId: number) => { - await fetch(API_URL+"/drafts/members", { + await fetch(API_URL+"/draft-invites", { method: "PUT", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ - isInviteAccepted: isAccepted, userId: userId, draftId: draftId }), @@ -43,7 +43,7 @@ const Invites = () => { } const openInvites = async () => { - await fetch(API_URL+"/drafts/invites?userId="+userId, { + await fetch(API_URL+"/draft-invites/read?userId="+userId, { method: "PUT", headers: { "Content-Type": "application/json", @@ -55,9 +55,9 @@ const Invites = () => { } useEffect(() => { - fetch(API_URL+'/drafts/invites?userId='+userId) + fetch(API_URL+'/draft-invites?userId='+userId) .then(response => { - return response.json(); // This returns a promise that resolves to the JSON data + return response.json(); }) .then(inviteList => { setUnreadInviteCount(inviteList.filter((invite) => !invite.is_invite_read).length); @@ -68,7 +68,9 @@ const Invites = () => { return ( <>
    - openInvites()}/> + openInvites()} + /> {(unreadInviteCount>0) ? unreadInviteCount: ""}
    { className="modal" >
    -
    Invites
    +

    + setIsOpen(false)}/> + Invites +

      {invites?.map((invite) => (
    • diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 0134b423..cf605d1f 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -20,7 +20,7 @@ const Navbar = () => { Mock Drafts -
      +
      • { diff --git a/src/components/PlayerDraftPopup.tsx b/src/components/PlayerDraftPopup.tsx new file mode 100644 index 00000000..83f4ef12 --- /dev/null +++ b/src/components/PlayerDraftPopup.tsx @@ -0,0 +1,64 @@ +import '../css/playerDraftPopup.css'; +import '../css/modal.css'; +import React, {useState, useRef} from 'react'; + +interface Props { + playerId: number +} + +const PlayerDraftPopup = (props: Props) => { + + const [isOpen, setIsOpen] = useState(false); + const modalRef = useRef(null); + + return ( + <> + setIsOpen(true)}> + Nikola Jokic + + { + if (e.target == modalRef.current) { + setIsOpen(false); + } + }} + className="modal" + > +
        +
        + { + const imgElement = event.target as HTMLImageElement; + imgElement.src = "/images/playerImages/201935.png"; + imgElement.onerror = null; // Prevents future errors from being logged + }} + /> +
        Rank #20
        +
        + James Harden +

        Los Angeles Clippers

        +
        + { + const imgElement = event.target as HTMLImageElement; + imgElement.src = "/images/nbaLogos/1610612737.svg"; + imgElement.onerror = null; // Prevents future errors from being logged + }} + /> +
        +
        + 2023 Fantasy Outlook +
        +
        +
        +
        +         + + ); +}; + +export default PlayerDraftPopup; \ No newline at end of file diff --git a/src/components/UserInviter.tsx b/src/components/UserInviter.tsx index 1391c85f..db9e7656 100644 --- a/src/components/UserInviter.tsx +++ b/src/components/UserInviter.tsx @@ -4,6 +4,7 @@ import TextInput from "./TextInput"; import { User } from "../utils/users"; import {RxCross1} from 'react-icons/rx'; import { useAuth } from "../authentication/AuthContext"; +import TranslucentButton from "./buttons/TranslucentButton"; const API_URL = import.meta.env.VITE_API_URL; interface Props { @@ -43,7 +44,7 @@ const UserInviter = (props: Props) => { const search = async (searchInput: string) => { if (searchInput.length > 3) { try { - const response = await fetch(API_URL + "/drafts/invite", { + const response = await fetch(API_URL + "/draft-invites", { method: "POST", headers: { "Content-Type": "application/json", @@ -99,40 +100,38 @@ const UserInviter = (props: Props) => { return ( <> - - { - if (e.target == modalRef.current) { - setIsOpen(false); - } - }} - className="modal" - > -
        -
        - - -
        -
          - {users?.map((user, index) => ( -
        • - {user.username} - removeUser(user.username)} - /> -
          • - ))} -
        -
        -         + setIsOpen(true)}>Invite Users + { + if (e.target == modalRef.current) { + setIsOpen(false); + } + }} + className="modal" + > +
        +
        + + search(searchValue)}>Invite +
        +
          + {users?.map((user, index) => ( +
        • + {user.username} + removeUser(user.username)} + /> +
          • + ))} +
        +
        +         ); }; diff --git a/src/components/buttons/TranslucentButton.tsx b/src/components/buttons/TranslucentButton.tsx new file mode 100644 index 00000000..07f4c5da --- /dev/null +++ b/src/components/buttons/TranslucentButton.tsx @@ -0,0 +1,15 @@ +import "../../css/buttons/translucent-btn.css"; +import React from 'react'; + +interface Props { + handleOnClick: React.MouseEventHandler; + children: React.ReactNode; +} + +const TranslucentButton = (props: Props) => { + return ( + + ); +}; + +export default TranslucentButton; \ No newline at end of file diff --git a/src/css/buttons/translucent-btn.css b/src/css/buttons/translucent-btn.css new file mode 100644 index 00000000..64b6e809 --- /dev/null +++ b/src/css/buttons/translucent-btn.css @@ -0,0 +1,15 @@ +.translucent-btn { + width: 100%px; + background-color: var(--transparentOrange); + font-weight: 500; + color: var(--brightOrange); + padding: 10px 25px 10px 25px; + border-radius: 8px; + border: none; + cursor: pointer; + transition: 0.3s; +} +.translucent-btn:hover { + background-color: rgb(255, 165, 95); + color: var(--black); +} \ No newline at end of file diff --git a/src/css/chatRoom.css b/src/css/chatRoom.css index 2c9d8f1b..7b040c74 100644 --- a/src/css/chatRoom.css +++ b/src/css/chatRoom.css @@ -10,8 +10,15 @@ overflow: auto; } +.chat-message-count { + position: absolute; + left: calc(100% - 45px); + top: 65px; + color: var(--black); +} + .chat-room { - background-color: var(--white); + background-color: var(--black); width: 75%; min-height: 350px; margin: auto; @@ -26,12 +33,32 @@ box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); z-index: 100; margin-top: 50px; + border: 1px solid var(--mediumDarkGrey); } .chat-room .messages { - border: 2px solid var(--grey); + border: 1px solid var(--mediumDarkGrey); width: 100%; height: 100%; + padding: 5px; + overflow: auto; +} + +.chat-room .messages .sent-by-other { + background-color: var(--transparentOrange); + border-radius: 3px; + padding: 0px 5px 0px 5px; + margin: 5px; + color: var(--coolWhite); +} + +.chat-room .messages .sent-by-self { + background-color: rgba(0, 200, 255, 0.15); + border-radius: 3px; + padding: 0px 5px 0px 5px; + text-align: right; + margin: 5px; + color: var(--coolWhite); } .chat-room .send-text { @@ -42,22 +69,10 @@ align-items: center; } -.chat-room .send-text input:focus { - outline-color: var(--blue); -} - -.chat-room .send-text button { - padding: 5px 15px 5px 15px; - border: none; - background-color: var(--lightGrey); - border: 1px solid var(--darkGrey); - cursor: pointer; - transition: 0.3s; - height: 100%; +.chat-room .send-text label { + color: var(--mediumGrey); } -.chat-room .send-text button:hover { - background-color: var(--darkGrey); - color: white; +.chat-room .send-text input:focus { + outline-color: var(--blue); } - diff --git a/src/css/configureMockDraft.css b/src/css/configureMockDraft.css index 0e2d4560..3befb659 100644 --- a/src/css/configureMockDraft.css +++ b/src/css/configureMockDraft.css @@ -1,10 +1,11 @@ .mock-draft-configuration { - background-color: var(--white); + background-color: var(--coolWhite); height: 100%; border-radius: 10px; padding: 25px; box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1); overflow: auto; + border: 1px solid var(--mediumDarkGrey); } .mock-draft-configuration .configuration-header { diff --git a/src/css/draftHeader.css b/src/css/draftHeader.css index c5005d67..7d42b23f 100644 --- a/src/css/draftHeader.css +++ b/src/css/draftHeader.css @@ -1,5 +1,5 @@ .draft-header { - background-color: var(--brightOrange); + background-color: var(--lightOrange); color: white; padding: 5px; display: flex; diff --git a/src/css/draftRoom/draftGrade.css b/src/css/draftRoom/draftGrade.css new file mode 100644 index 00000000..e4fc99d0 --- /dev/null +++ b/src/css/draftRoom/draftGrade.css @@ -0,0 +1,102 @@ +.draft-grade-area { + background-color: var(--black); + min-height: 485px; + margin: auto; + display: flex; + justify-content: space-between; + flex-direction: column; + width: 350px; + height: 485px; + min-width: 350px; + overflow: auto; + border-radius: 10px; + box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); + z-index: 100; + margin-top: 50px; + padding-bottom: 50px; + border: solid 1px var(--mediumDarkGrey); + transition: top 0.5s; + position: absolute; + left: calc(50% - 175px); + top: -535px; + transition: 0.5s; +} + +.draft-grade-area.active { + transform: translate(0, 535px); +} + +.draft-grade-area h4 { + color: var(--coolWhite); + background-color: var(--veryDarkGrey); + font-size: 20px; + font-weight: 500; + width: 100%; + height: 50px; + text-align: center; + border-bottom: 1px solid var(--mediumDarkGrey); + position: relative; + padding-top: 3px; +} + +.draft-grade-area .close { + position: absolute; + left: 10px; + cursor: pointer; + top: 10px; + height: 20px; + width: 20px; + padding: 2px; +} + +.draft-grade-area .close:hover { + background-color: rgba(200,200,200,.5); + border-radius: 10px; +} + +.draft-grade-area h5 { + color: var(--coolWhite); + font-size: 20px; + font-weight: 500; + text-align: center; +} + +.draft-grade-area .summary { + color: var(--); + margin-left: 20px; +} + +.draft-grade-area .summary { + color: var(--lightOrange); + font-weight: 500; +} + +.draft-grade-area .summary .A { + color: var(--green); +} + +.draft-grade-area .summary .B { + color: rgb(200, 255, 0); +} + +.draft-grade-area .summary .C { + color: var(--yellow); +} + +.draft-grade-area .summary .D { + color: var(--orange); +} + +.draft-grade-area .summary .F { + color: var(--red); +} + +.draft-grade-area .send-email-summary { + display: flex; + flex-direction: column; + align-items: center; +} + +.draft-grade-area .send-email-summary p { + color: var(--coolWhite); +} \ No newline at end of file diff --git a/src/css/draftRoom/rosterPickList.css b/src/css/draftRoom/rosterPickList.css index f7a3f7c7..2504e6ae 100644 --- a/src/css/draftRoom/rosterPickList.css +++ b/src/css/draftRoom/rosterPickList.css @@ -35,7 +35,7 @@ } .roster-list-modal .modal-content { - background-color: var(--coolWhite); + background-color: var(--black); min-height: 450px; height: 450px; margin: auto; @@ -50,13 +50,50 @@ z-index: 100; margin-top: 50px; overflow: auto; + border: 1px solid var(--mediumDarkGrey); } -.roster-list-modal .modal-content h5 { - border-bottom: 2px solid var(--mediumGrey); +.roster-list-modal .modal-content h4 { + color: var(--coolWhite); + background-color: var(--veryDarkGrey); + font-size: 20px; + font-weight: 500; width: 100%; + height: 50px; text-align: center; - padding: 5px; + border-bottom: 1px solid var(--mediumDarkGrey); + position: relative; + padding-top: 3px; +} + +.roster-list-modal .modal-content .close { + position: absolute; + left: 10px; + cursor: pointer; + top: 10px; + height: 20px; + width: 20px; + padding: 2px; +} + +.roster-list-modal .close { + position: absolute; + left: 10px; + cursor: pointer; + top: 10px; + height: 20px; + width: 20px; + padding: 2px; +} + +.roster-list-modal .close:hover { + background-color: rgba(200,200,200,.5); + border-radius: 10px; +} + +.roster-list-modal .modal-content .close:hover { + background-color: rgba(200,200,200,.5); + border-radius: 10px; } .roster-list-modal .modal-content ul { @@ -64,17 +101,22 @@ } .roster-list-modal .modal-content li { - border-bottom: 1px solid var(--grey); + border-bottom: 1px solid var(--mediumDarkGrey); width: 100%; cursor: pointer; transition: .3s; padding: 0px 5px 0px 5px; + color: var(--coolWhite); } .roster-list-modal .modal-content li:nth-child(even) { - background-color: var(--coolWhite); + background-color: var(--veryDarkGrey); +} + +.roster-list-modal .modal-content li:nth-child(odd) { + background-color: var(--black); } .roster-list-modal .modal-content li:hover { - background-color: var(--lightGrey); + background-color: var(--black); } \ No newline at end of file diff --git a/src/css/draftsPage.css b/src/css/draftsPage.css index 4f97b1c4..949a321a 100644 --- a/src/css/draftsPage.css +++ b/src/css/draftsPage.css @@ -5,7 +5,7 @@ } .mock-draft-menu { - background-color: var(--white); + background-color: var(--veryDarkGrey); height: 100%; border-radius: 10px; padding: 25px; @@ -13,6 +13,7 @@ min-width: 400px; min-height: 350px; overflow: auto; + border: 1px solid var(--mediumDarkGrey); } .mock-draft-menu .panel { @@ -26,6 +27,7 @@ height: 75px; width: 75px; cursor: pointer; + color: var(--lightBlueGrey); transition: 0.3s; } @@ -45,14 +47,14 @@ margin-top: 25px; font-size: 35px; font-weight: 600; - color: var(--yellow); + color: var(--lightBlueGrey); } .mock-draft-menu .mock-drafts { - border: 3px solid var(--blue); + border: 1px solid var(--mediumDarkGrey); height: 50%; width: 60%; - background-color: var(--coolWhite); + background-color: var(--darkGrey); border-radius: 10px; margin-bottom: 20px; padding: 10px; @@ -76,7 +78,9 @@ text-align: center; font-size: 20px; width: 100%; + font-weight: 600; display: flex; + color: var(--mediumGrey); justify-content: space-between; } @@ -88,44 +92,75 @@ padding: 10px; } +.mock-draft-menu .mock-drafts .draft-info p { + color: var(--mediumGrey); +} + .mock-draft-menu .mock-drafts .draft-info .started { color: var(--green); + font-weight: 500; } .mock-draft-menu .mock-drafts .draft-info .is-started { color: var(--red); + font-weight: 500; } .mock-draft-menu .mock-drafts .draft-info b { - color: var(--darkBlue); + color: var(--lightBlueGrey); font-size: 18px; + font-weight: 600; } .mock-draft-menu .mock-drafts .join-button { display: flex; justify-content: center; + margin-top: 15px; } .mock-draft-menu .mock-drafts .delete { - color: var(--red); + color: rgb(180, 140, 135); + background-color: rgba(125, 100, 100, 0.5); font-size: 30px; margin-left: 7px; - cursor: pointer + padding: 5px; + border-radius: 8px; + cursor: pointer; + transition: 0.3s; + min-height: 35px; + min-width: 35px; } .mock-draft-menu .mock-drafts .delete:hover { - color: red; + background-color: rgba(125, 100, 100, 1); } .mock-draft-menu .mock-drafts .update:hover { - transform: rotate(-60deg); - + background-color: rgba(100, 100, 125, 1); } .mock-draft-menu .mock-drafts .update { - color: var(-darkGrey); + color: var(--lightBlueGrey); font-size: 30px; margin-right: 7px; + min-height: 35px; + padding: 5px; + border-radius: 8px; + min-width: 35px; cursor: pointer; + background-color: rgba(100, 100, 125, 0.5); transition: 0.3s; +} + +.mock-draft-menu .mock-drafts h4 { + display: flex; + justify-content: center; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + gap: 25%; +} + +.recommend-draft-creation { + color: var(--mediumGrey); } \ No newline at end of file diff --git a/src/css/invites.css b/src/css/invites.css index 70489c80..ae9fdde3 100644 --- a/src/css/invites.css +++ b/src/css/invites.css @@ -6,7 +6,6 @@ flex-direction: column; gap: 20px; align-items: center; - padding: 20px; width: 450px; height: 485px; min-width: 450px; @@ -15,6 +14,7 @@ box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); z-index: 100; margin-top: 50px; + border: 1px solid var(--mediumDarkGrey); } .open-invites { @@ -34,19 +34,48 @@ width: 50px; cursor: pointer; margin-top: 7px; + border-radius: 8px; +} + +.open-invite-icon.active { + background-color: rgba(100, 100, 125, 0.2); } .open-invite-icon:hover { - opacity: 0.9; + background-color: rgba(100, 100, 125, 0.2); } -.invites header { - color: var(--white); - border-bottom: 1px solid var(--darkGrey); +.invites h4 { + color: var(--coolWhite); + background-color: var(--veryDarkGrey); + font-size: 20px; + font-weight: 500; width: 100%; + height: 50px; text-align: center; - font-size: 20px; -} + border-bottom: 1px solid var(--mediumDarkGrey); + position: relative; + padding-top: 3px; +} + +.invites .close { + position: absolute; + left: 10px; + cursor: pointer; + top: 10px; + height: 20px; + width: 20px; + padding: 2px; +} + +.invites .close:hover { + background-color: rgba(200,200,200,.5); + border-radius: 10px; +} + +.invites ul { + padding: 10px; +} .invites li { background-color: var(--darkBlue); diff --git a/src/css/modal.css b/src/css/modal.css new file mode 100644 index 00000000..19cadc55 --- /dev/null +++ b/src/css/modal.css @@ -0,0 +1,11 @@ +.modal { + position: fixed; /* Stay in place */ + z-index: 10; /* Sit on top of everything */ + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.4); + border: none; + overflow: auto; +} \ No newline at end of file diff --git a/src/css/navbar.css b/src/css/navbar.css index d1544ee1..7b13de9c 100644 --- a/src/css/navbar.css +++ b/src/css/navbar.css @@ -7,7 +7,7 @@ padding: 0px 50px 0px 50px; gap: 30px; box-shadow: 0px 5px 5px rgba(0, 0, 0, .3); - border-bottom: 1px solid var(--grey); + border-bottom: 1px solid var(--mediumDarkGrey); } .main-navbar .user { @@ -17,10 +17,11 @@ } .main-navbar .nav-icon { - color: white; + color: var(--coolWhite); height: 35px; width: 50px; cursor: pointer; + border-radius: 8px; } .main-navbar .user ul { @@ -34,7 +35,7 @@ } .main-navbar .nav-icon:hover { - opacity: 0.9; + background-color: rgba(100, 100, 125, 0.2); } .main-navbar .user:hover ul { @@ -53,12 +54,16 @@ .main-navbar .option { color: white; + height: 35px; + line-height: 35px; + padding: 0px 10px 0px 10px; + border-radius: 8px; } .main-navbar .option:hover { - opacity: .9; + background-color: rgba(100, 100, 125, 0.2); } .main-navbar .option.active { - opacity: .9; + background-color: rgba(100, 100, 125, 0.2); } \ No newline at end of file diff --git a/src/css/pageLayout.css b/src/css/pageLayout.css index 1363d7f8..d3c68681 100644 --- a/src/css/pageLayout.css +++ b/src/css/pageLayout.css @@ -4,6 +4,6 @@ } .page-layout { - background-color: var(--coolWhite); + background-color: var(--black); height: 100vh; } \ No newline at end of file diff --git a/src/css/playerDraftPopup.css b/src/css/playerDraftPopup.css new file mode 100644 index 00000000..59913389 --- /dev/null +++ b/src/css/playerDraftPopup.css @@ -0,0 +1,102 @@ +.player-draft-popup { + color: var(--brightBlue); + cursor: pointer; +} + +.player-draft-popup:hover { + color: var(--blue); +} + +.player-info-box-header { + display: flex; + justify-content: flex-start; + background-color: var(--coolWhite); + border-right: none; +} + +.fantasy-outlook-area { + height: 200px; + background-color: var(--coolWhite); + flex: 1; + padding: 10px; + border: 1px solid var(--darkGrey); +} + +.fantasy-outlook-area b { + font-size: 15px !important; +} + +.player-info-box-header-center { + display: flex; + flex-direction: column; + justify-content: center; + padding: 10px; + flex: 1; + height: 75px; + border: 1px solid var(--grey); +} + +.player-info-box-header img { + width: 75px; + height: 75px; + padding: 10px; +} + +.player-info-box-header img:first-child { + background-color: var(--darkBlue); + padding: 0px; +} + +.player-info-box1 b { + height: 35px; + font-size: 30px; + color: var(--black); + text-align: left; +} + +.player-info-box1 p { + color: var(--darkGrey); +} + +.player-info-box1 { + background-color: var(--black); + min-height: 250px; + margin: auto; + display: flex; + align-items: flex-start; + padding: 40px 10px 10px 10px; + width: 750px; + height: 250px; + min-width: 350px; + border-radius: 10px 10px 0px 0px; + box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); + z-index: 100; +} + +.player-info-box-header .rank { + position: absolute; + color: var(--white); + top: 10px; + height: 30px; + background-color: var(--darkBlue); + border-radius: 3px 0px 0px 0px; + width: 395px; +} + +.player-info-box2 { + background-color: var(--grey); + min-height: 250px; + margin: auto; + display: flex; + flex-direction: column; + gap: 20px; + align-items: center; + padding: 10px; + width: 750px; + height: 250px; + min-width: 350px; + overflow: auto; + border-radius: 0px 0px 10px 10px; + box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); + z-index: 100; +} \ No newline at end of file diff --git a/src/css/userInviter.css b/src/css/userInviter.css index a36d5d8c..b914fe4c 100644 --- a/src/css/userInviter.css +++ b/src/css/userInviter.css @@ -18,19 +18,6 @@ width: 100%; } -.invite-user button { - padding: 5px; - background-color: var(--white); - border: 2px solid var(--grey); - font-size: 14px; - cursor: pointer; - transition: 0.3s; -} - -.invite-user button:hover { - background-color: var(--lightGrey); -} - .user-inviter ul { width: 100%; display: flex; diff --git a/src/index.css b/src/index.css index acbf79b5..a51a8e86 100644 --- a/src/index.css +++ b/src/index.css @@ -3,21 +3,27 @@ :root { --lightGrey: rgb(235, 235, 235); --darkGrey: rgb(75, 75, 75); - --grey: rgb(200, 200, 200); + --veryDarkGrey: rgb(55, 60, 80); + --grey: rgb(180, 180, 180); --mediumGrey: rgb(215, 215, 215); --coolWhite: rgb(245, 245, 245); --white: rgb(250, 250, 250); --brightBlue: rgb(75, 175, 250); + --lightBlueGrey: rgb(135, 150, 180); --blue: rgb(65, 145, 210); + --transparentGrey: rgba(100, 100, 125, 0.5); --black: rgb(40, 45, 70); + --mediumDarkGrey: rgb(100, 100, 120); --darkBlue: rgb(50, 60, 120); --green: rgb(80, 200, 115); --yellow: rgb(220, 150, 20); --brightYellow: rgb(255, 255, 0); --red: rgb(240, 0, 0); - --brightOrange: rgb(200, 100, 0); + --brightOrange: rgb(255, 130, 0); + --lightOrange: rgb(225, 115, 0); --orange: rgb(175, 90, 0); --darkOrange: rgb(100, 50, 0); + --transparentOrange: rgba(255, 111, 0, 0.2); } *{ diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx index 11655b46..3ba28f5b 100644 --- a/src/pages/Dashboard.tsx +++ b/src/pages/Dashboard.tsx @@ -4,7 +4,7 @@ const Dashboard = () => { // Work in progress return ( -

        This is the dashboard. Currently a work in progress.

        +

        This is the dashboard. Currently a work in progress.

        ); }; diff --git a/src/pages/DraftsPage.tsx b/src/pages/DraftsPage.tsx index 6c87cccb..c34e002a 100644 --- a/src/pages/DraftsPage.tsx +++ b/src/pages/DraftsPage.tsx @@ -7,6 +7,7 @@ import {BsChevronDoubleLeft} from 'react-icons/bs'; import {BsChevronDoubleRight} from 'react-icons/bs'; import {BiCog} from 'react-icons/bi'; import {RiDeleteBin5Line} from 'react-icons/ri'; +import TranslucentButton from '../components/buttons/TranslucentButton'; const API_URL = import.meta.env.VITE_API_URL; interface DraftInfo { @@ -111,18 +112,22 @@ const DraftsPage = () => { <>

        - deleteDraft(userDrafts[draftIndex].draft_id)} - /> + {userDrafts[draftIndex].scheduled_by_user_id == userId && ( + deleteDraft(userDrafts[draftIndex].draft_id)} + /> + )} {userDrafts[draftIndex].scheduled_by_user_id == userId ? "Your Mock Draft" : `${userDrafts[draftIndex].username}'s Mock Draft`} - {if (!userDrafts[draftIndex].is_started) { - navigate("/modules/mock-drafts/update/"+userDrafts[draftIndex].draft_id) - } else { - alert("Cannot update a draft in progress.") - }}} - /> + {userDrafts[draftIndex].scheduled_by_user_id == userId && ( + {if (!userDrafts[draftIndex].is_started) { + navigate("/modules/mock-drafts/update/"+userDrafts[draftIndex].draft_id) + } else { + alert("Cannot update a draft in progress.") + }}} + /> + )}

        @@ -150,14 +155,13 @@ const DraftsPage = () => {

        - { navigate("/modules/drafts/draftroom/"+userDrafts[draftIndex].draft_id); }} > Join Draft - +
        ) @@ -165,7 +169,7 @@ const DraftsPage = () => {
      incrementDraftIndex()} />
      -

      No drafts? Make your own

      +

      No drafts? Make your own

      { diff --git a/src/pages/UpdateMockDraft.tsx b/src/pages/UpdateMockDraft.tsx index a681e65e..21bbab08 100644 --- a/src/pages/UpdateMockDraft.tsx +++ b/src/pages/UpdateMockDraft.tsx @@ -9,6 +9,7 @@ import UserInviter from "../components/UserInviter"; import LoadingScreen from "../components/LoadingScreen"; import { useParams } from "react-router-dom"; import { User } from "../utils/users"; +import TranslucentButton from "../components/buttons/TranslucentButton"; const API_URL = import.meta.env.VITE_API_URL; const UpdateMockDraft = () => { @@ -86,6 +87,7 @@ const UpdateMockDraft = () => { return response.json(); }) .then(draftSettings => { + console.log(draftSettings); const userIds = draftSettings.draft_members.map(draftMember => draftMember.user_id); setInvitedUserIds(userIds); setInvitedUsers(draftSettings.draft_members); @@ -93,7 +95,7 @@ const UpdateMockDraft = () => { setPickTime(draftSettings.pick_time_seconds+" seconds"); setDraftType(draftSettings.draft_type); setScoringType(draftSettings.scoring_type); - setDraftPosition(draftSettings.draft_owner_start_pick); + setDraftPosition(draftSettings.owner_first_pick); setPointGuardCount(draftSettings.pointguard_slots); setShootingGuardCount(draftSettings.shootingguard_slots); setGuardCount(draftSettings.guard_slots); From 0be3a5f7b2d546f66a18ebc45f528a4cb8483a81 Mon Sep 17 00:00:00 2001 From: Stephen Feddes Date: Mon, 6 Nov 2023 03:10:19 -0600 Subject: [PATCH 2/3] Fixing bug. --- src/components/DraftRoom/center/CenterHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/DraftRoom/center/CenterHeader.tsx b/src/components/DraftRoom/center/CenterHeader.tsx index 212516ab..7f482ade 100644 --- a/src/components/DraftRoom/center/CenterHeader.tsx +++ b/src/components/DraftRoom/center/CenterHeader.tsx @@ -5,7 +5,7 @@ import {RxCross1} from 'react-icons/rx'; import { DraftPick } from '../../../utils/draft'; import { useDraft } from '../DraftContext'; import { useAuth } from '../../../authentication/AuthContext'; -import DraftGrade from '../draftGrade'; +import DraftGrade from '../DraftGrade'; const API_URL = import.meta.env.VITE_API_URL; const CenterHeader = () => { From 8901aac0f9a8e9b6de29118760ce8de89c47cd4e Mon Sep 17 00:00:00 2001 From: Stephen Feddes Date: Mon, 6 Nov 2023 03:36:35 -0600 Subject: [PATCH 3/3] Fixed bug. --- src/components/DraftRoom/ChatRoom.tsx | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/src/components/DraftRoom/ChatRoom.tsx b/src/components/DraftRoom/ChatRoom.tsx index 23c012dd..9128720d 100644 --- a/src/components/DraftRoom/ChatRoom.tsx +++ b/src/components/DraftRoom/ChatRoom.tsx @@ -20,7 +20,7 @@ const ChatRoom = () => { const modalRef = useRef(null); const [message, setMessage] = useState(""); const [messages, setMessages] = useState([]); - const [unreadMessageCount, setUnreadMessageCount] = useState(0); + const [unreadMessageCount, setUnreadMessageCount] = useState(-1); const [isOpen, setIsOpen] = useState(false); const sendMessage = (message: string) => { @@ -31,22 +31,23 @@ const ChatRoom = () => { if (draftId) { socket?.on('receive-message', (message: Message) => { let messageList = [...messages, message]; - console.log(message); messages.push({message: message.message, username: username}); setMessages(messageList); - setUnreadMessageCount(unreadMessageCount+1); - if (isOpen) { - setUnreadMessageCount(0) - } else{ - setUnreadMessageCount(unreadMessageCount+1); - } }); } }, [draftId]); + useEffect(() => { + if (!isOpen) { + setUnreadMessageCount(unreadMessageCount+1); + } else { + setUnreadMessageCount(0); + } + }, [messages]) + return ( <> - {setIsOpen(true); setUnreadMessageCount(0)}} className="chat-icon" /> + {setIsOpen(true); setUnreadMessageCount(0);}} className="chat-icon" /> {unreadMessageCount > 0 && ( {unreadMessageCount}