@rpg-engine/long-bow 0.8.1 → 0.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/ChatRevamp/ChatRevamp.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
+import { FaDiscord, FaWhatsapp } from 'react-icons/fa';
 import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
 import { useChat } from '../../hooks/useChat';
 import { Chat } from '../Chat/Chat';
 import { ChatContent } from './ChatContent';
@@ -8,10 +10,24 @@ import { ExpandButton } from './ExpandButton';
 import { RecentChats } from './RecentChats';
 import { IChatRevampProps } from './types';
 
-export const ChatRevamp = ({
+interface ITopBarProps {
+  isExpanded: boolean;
+}
+
+interface IAllChatsContainerProps {
+  width: string;
+  height: string;
+  isExpanded: boolean;
+}
+
+interface IChatContentWrapperProps {
+  isPrivate: boolean;
+}
+
+export const ChatRevamp: React.FC<IChatRevampProps> = ({
   chatMessages,
   onSendGlobalChatMessage,
-  onSendGuildChatMessage, // Add this new prop
+  onSendGuildChatMessage,
   onChangeCharacterName,
   onFocus,
   onBlur,
@@ -29,12 +45,14 @@ export const ChatRevamp = ({
   onRemoveRecentChatCharacter,
   unseenMessageCharacterIds,
   onSendTradeMessage,
-  searchCharacterUI,
-  hideSearchCharacterUI,
-  showSearchCharacterUI,
+  searchCharacterUI = false,
+  hideSearchCharacterUI = () => {},
+  showSearchCharacterUI = () => {},
   minimizedByDefault = false,
   autoCloseOnSend,
   onSendLocalChatMessage,
+  onDiscordClick,
+  onWhatsAppClick,
 }: IChatRevampProps) => {
   const isPrivate = activeTab === 'private';
   const isTrade = activeTab === 'trade';
@@ -48,15 +66,35 @@ export const ChatRevamp = ({
     unseenMessageCharacterIds,
   });
 
+  const handleDiscordClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    onDiscordClick?.();
+  };
+
+  const handleWhatsAppClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    onWhatsAppClick?.();
+  };
+
   return (
     <ChatRevampContainer>
       <TopBar isExpanded={chatHook.isExpanded}>
         {chatHook.isExpanded && (
-          <ChatTabs
-            tabs={tabs}
-            activeTab={activeTab}
-            onChangeTab={chatHook.handleTabChange}
-          />
+          <>
+            <ChatTabs
+              tabs={tabs}
+              activeTab={activeTab}
+              onChangeTab={chatHook.handleTabChange}
+            />
+            <SocialButtons>
+              <SocialButton onClick={handleDiscordClick}>
+                <FaDiscord />
+              </SocialButton>
+              <SocialButton onClick={handleWhatsAppClick}>
+                <FaWhatsapp />
+              </SocialButton>
+            </SocialButtons>
+          </>
         )}
         <ExpandButton
           isExpanded={chatHook.isExpanded}
@@ -74,7 +112,7 @@ export const ChatRevamp = ({
               <RecentChats
                 showRecentChats={chatHook.showRecentChats}
                 toggleRecentChats={chatHook.toggleRecentChats}
-                hasUnseenMessages={chatHook.hasUnseenMessages || false}
+                hasUnseenMessages={!!chatHook.hasUnseenMessages}
                 showSearchCharacterUI={showSearchCharacterUI}
                 recentChatCharacters={recentChatCharacters}
                 recentSelectedChatCharacterId={recentSelectedChatCharacterId}
@@ -139,18 +177,15 @@ const ChatRevampContainer = styled.div`
   position: relative;
 `;
 
-const TopBar = styled.div<{ isExpanded: boolean }>`
+const TopBar = styled.div<ITopBarProps>`
   display: flex;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: space-between;
   min-height: ${({ isExpanded }) => (isExpanded ? 'auto' : '32px')};
+  padding: 0 8px;
 `;
 
-const AllChatsContainer = styled.div<{
-  width: string;
-  height: string;
-  isExpanded: boolean;
-}>`
+const AllChatsContainer = styled.div<IAllChatsContainerProps>`
   width: ${({ width }) => width};
   height: ${({ height, isExpanded }) => (isExpanded ? height : 'auto')};
   padding: 10px;
@@ -160,13 +195,13 @@ const AllChatsContainer = styled.div<{
   flex-wrap: wrap;
 `;
 
-const ChatContentWrapper = styled.div<{ isPrivate: boolean }>`
+const ChatContentWrapper = styled.div<IChatContentWrapperProps>`
   flex-grow: 1;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   position: relative;
-  width: ${props => (props.isPrivate ? '75%' : '100%')};
+  width: ${({ isPrivate }) => (isPrivate ? '75%' : '100%')};
 `;
 
 const CollapsedChatInput = styled.div`
@@ -181,3 +216,23 @@ const ExpandedChatContent = styled.div`
   width: 100%;
   height: 100%;
 `;
+
+const SocialButtons = styled.div`
+  display: flex;
+  gap: 8px;
+  margin-right: 32px;
+`;
+
+const SocialButton = styled.button`
+  background-color: transparent;
+  border: none;
+  color: white;
+  font-size: 16px;
+  cursor: pointer;
+  transition: color 0.3s ease;
+  padding: 4px;
+
+  &:hover {
+    color: ${uiColors.yellow};
+  }
+`;

package/src/components/ChatRevamp/types.ts

@@ -18,15 +18,16 @@ export type ChatMessage =
 export interface IChatRevampProps {
   chatMessages: ChatMessage[];
   onSendGlobalChatMessage: (message: string) => void;
-  onCloseButton: () => void;
+  onSendGuildChatMessage: (message: string) => void;
+  onChangeCharacterName: (characterName: string) => void;
   onFocus?: () => void;
   onBlur?: () => void;
+  onCloseButton: () => void;
   styles?: IStyles;
-  tabs: { label: string; id: string }[];
-  activeTab: string;
-  onChangeTab: (tabId: string) => void;
+  tabs: any[];
+  onChangeTab: (tab: string) => void;
+  activeTab?: string;
   privateChatCharacters?: PrivateChatCharacter[];
-  onChangeCharacterName: (characterName: string) => void;
   onCharacterClick?: (character: PrivateChatCharacter) => void;
   onSendPrivateChatMessage: (message: string) => void;
   recentChatCharacters?: PrivateChatCharacter[];
@@ -35,12 +36,12 @@ export interface IChatRevampProps {
   onRemoveRecentChatCharacter?: (character: PrivateChatCharacter) => void;
   unseenMessageCharacterIds?: string[];
   onSendTradeMessage: (message: string) => void;
-  searchCharacterUI: boolean;
-  hideSearchCharacterUI: () => void;
-  showSearchCharacterUI: () => void;
+  searchCharacterUI?: boolean;
+  hideSearchCharacterUI?: () => void;
+  showSearchCharacterUI?: () => void;
   minimizedByDefault?: boolean;
   autoCloseOnSend?: boolean;
-  onSendGuildChatMessage: (message: string) => void;
-  isInGuild: boolean;
   onSendLocalChatMessage: (message: string) => void;
+  onDiscordClick?: () => void;
+  onWhatsAppClick?: () => void;
 }

package/src/components/SocialModal/SocialModal.tsx

@@ -0,0 +1,192 @@
+import React, { useState } from 'react';
+import { FaDiscord, FaReddit, FaWhatsapp } from 'react-icons/fa';
+import styled from 'styled-components';
+import { DraggableContainer } from '../DraggableContainer';
+import { Dropdown, IOptionsProps } from '../Dropdown';
+import { Divider } from '../shared/Divider/Divider';
+import socialModalGroup from './images/social-modal-group.png';
+
+interface ISocialModalProps {
+  onClose: () => void;
+}
+
+type WhatsAppLanguage = 'english' | 'pt-BR' | 'polski' | 'español';
+
+const whatsAppGroups: IOptionsProps[] = [
+  { id: 1, value: 'english', option: 'Global (English)' },
+  { id: 2, value: 'pt-BR', option: 'Brasil (Português)' },
+  { id: 3, value: 'español', option: 'Español' },
+  { id: 4, value: 'polski', option: 'Polski' },
+];
+
+const socialLinks = {
+  discord: 'https://discord.gg/xWBYBWanvE',
+  reddit: 'https://www.reddit.com/r/DefinyaMMO/',
+  whatsapp: {
+    english: 'https://chat.whatsapp.com/H8U1Jt7hJNdIWO19atAnRu',
+    'pt-BR': 'https://chat.whatsapp.com/DwXJz2RXDsG2X6ANOm4FtQ',
+    español: 'https://chat.whatsapp.com/BPlJ1RxshEiErNceZkdhyf',
+    polski: 'https://chat.whatsapp.com/DromXMChOmZK5JHXXdrEWr',
+  } as Record<WhatsAppLanguage, string>,
+};
+
+export const SocialModal: React.FC<ISocialModalProps> = ({ onClose }) => {
+  const [selectedLanguage, setSelectedLanguage] = useState<WhatsAppLanguage>(
+    'english'
+  );
+
+  const handleLanguageChange = (value: string) => {
+    setSelectedLanguage(value as WhatsAppLanguage);
+  };
+
+  const handleWhatsAppClick = () => {
+    window.open(
+      socialLinks.whatsapp[selectedLanguage],
+      '_blank',
+      'noopener,noreferrer'
+    );
+  };
+
+  const handleDiscordClick = () => {
+    window.open(socialLinks.discord, '_blank', 'noopener,noreferrer');
+  };
+
+  const handleRedditClick = () => {
+    window.open(socialLinks.reddit, '_blank', 'noopener,noreferrer');
+  };
+
+  return (
+    <DraggableContainer
+      title="Social Channels"
+      width="500px"
+      onCloseButton={onClose}
+    >
+      <Container>
+        <HeaderImage src={socialModalGroup} alt="" />
+        <ButtonsContainer>
+          <MainButtons>
+            <SocialButton onClick={handleDiscordClick}>
+              <FaDiscord /> Discord
+            </SocialButton>
+            <SocialButton onClick={handleRedditClick}>
+              <FaReddit /> Reddit
+            </SocialButton>
+          </MainButtons>
+
+          <Divider margin="8px 0" />
+
+          <DropdownContainer>
+            <Dropdown
+              options={whatsAppGroups}
+              onChange={handleLanguageChange}
+              width="100%"
+              opensUp={true}
+            />
+
+            <WhatsAppButton onClick={handleWhatsAppClick}>
+              <FaWhatsapp /> Join WhatsApp
+            </WhatsAppButton>
+          </DropdownContainer>
+        </ButtonsContainer>
+      </Container>
+    </DraggableContainer>
+  );
+};
+
+const Container = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  background-color: #5c4132;
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
+
+  &:before,
+  &:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 3px;
+  }
+
+  &:before {
+    bottom: 0;
+    background: linear-gradient(
+      to right,
+      #5c4132 0%,
+      #2b1810 2%,
+      #2b1810 98%,
+      #5c4132 100%
+    );
+  }
+`;
+
+const HeaderImage = styled.img`
+  width: 100%;
+  height: 160px;
+  object-fit: cover;
+  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
+  display: block;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+`;
+
+const ButtonsContainer = styled.div`
+  padding: 16px 24px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
+
+const MainButtons = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+`;
+
+const SocialButton = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  background-color: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  color: white;
+  padding: 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.7rem;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.12);
+  }
+
+  svg {
+    font-size: 1.1rem;
+  }
+`;
+
+const WhatsAppButton = styled(SocialButton)`
+  width: 100%;
+  background-color: #0f1f0f;
+  border: 1px solid #1a2f1a;
+  padding: 14px;
+
+  &:hover {
+    background-color: #162716;
+  }
+
+  margin-top: 8px;
+`;
+
+const DropdownContainer = styled.div`
+  background-color: rgba(0, 0, 0, 0.2);
+  padding: 8px;
+  border-radius: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+`;

package/src/components/shared/Divider/Divider.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface IDividerProps {
+  className?: string;
+  margin?: string;
+}
+
+export const Divider: React.FC<IDividerProps> = ({
+  className,
+  margin = '4px 0',
+}) => {
+  return <DividerLine className={className} margin={margin} />;
+};
+
+const DividerLine = styled.div<{ margin: string }>`
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(
+    to right,
+    transparent,
+    rgba(255, 255, 255, 0.1) 20%,
+    rgba(255, 255, 255, 0.1) 80%,
+    transparent
+  );
+  margin: ${({ margin }) => margin};
+`;

package/src/stories/UI/divider/Divider.stories.tsx

@@ -0,0 +1,30 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '../../..';
+import { Divider } from '../../../components/shared/Divider/Divider';
+
+export default {
+  title: 'UI/Divider',
+  component: Divider,
+  parameters: {
+    layout: 'centered',
+  },
+} as ComponentMeta<typeof Divider>;
+
+const Template: ComponentStory<typeof Divider> = args => (
+  <RPGUIRoot>
+    <div style={{ width: '300px', padding: '20px', background: '#333' }}>
+      <div>Content Above</div>
+      <Divider {...args} />
+      <div>Content Below</div>
+    </div>
+  </RPGUIRoot>
+);
+
+export const Default: ComponentStory<typeof Divider> = Template.bind({});
+Default.args = {};
+
+export const CustomMargin: ComponentStory<typeof Divider> = Template.bind({});
+CustomMargin.args = {
+  margin: '16px 0',
+};

package/src/stories/UI/social/SocialModal.stories.tsx

@@ -0,0 +1,23 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '../../..';
+import { SocialModal } from '../../../components/SocialModal/SocialModal';
+
+export default {
+  title: 'UI/Social/SocialModal',
+  component: SocialModal,
+  parameters: {
+    layout: 'centered',
+  },
+} as ComponentMeta<typeof SocialModal>;
+
+const Template: ComponentStory<typeof SocialModal> = args => (
+  <RPGUIRoot>
+    <SocialModal {...args} />
+  </RPGUIRoot>
+);
+
+export const Default: ComponentStory<typeof SocialModal> = Template.bind({});
+Default.args = {
+  onClose: () => console.log('Modal closed'),
+};