@rpg-engine/long-bow 0.4.7 → 0.4.8

package/src/components/QuestInfo/QuestInfo.tsx

@@ -1,233 +1,233 @@
-import { IQuest } from '@rpg-engine/shared';
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import { uiColors } from '../../constants/uiColors';
-import { uiFonts } from '../../constants/uiFonts';
-import SelectArrow from '../Arrow/SelectArrow';
-import { Button, ButtonTypes } from '../Button';
-import { DraggableContainer } from '../DraggableContainer';
-
-import { RPGUIContainerTypes } from '../RPGUIContainer';
-import { Column } from '../shared/Column';
-import thumbnailDefault from './img/default.png';
-
-export interface IQuestsButtonProps {
-  disabled: boolean;
-  title: string;
-  onClick: (questId: string, npcId: string) => void;
-}
-
-export interface IQuestInfoProps {
-  onClose?: () => void;
-  buttons?: IQuestsButtonProps[];
-  quests: IQuest[];
-  onChangeQuest: (currentQuestIndex: number, currentQuestId: string) => void;
-  scale?: number;
-}
-
-export const QuestInfo: React.FC<IQuestInfoProps> = ({
-  quests,
-  onClose,
-  buttons,
-  onChangeQuest,
-  scale,
-}) => {
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const questsLength = quests.length - 1;
-
-  useEffect(() => {
-    if (onChangeQuest) {
-      onChangeQuest(currentIndex, quests[currentIndex]._id);
-    }
-  }, [currentIndex]);
-
-  const onLeftClick = () => {
-    if (currentIndex === 0) setCurrentIndex(questsLength);
-    else setCurrentIndex(index => index - 1);
-  };
-  const onRightClick = () => {
-    if (currentIndex === questsLength) setCurrentIndex(0);
-    else setCurrentIndex(index => index + 1);
-  };
-
-  return (
-    <QuestDraggableContainer
-      type={RPGUIContainerTypes.Framed}
-      onCloseButton={() => {
-        if (onClose) onClose();
-      }}
-      width="730px"
-      cancelDrag=".equipment-container-body .arrow-selector"
-      scale={scale}
-    >
-      {quests.length >= 2 ? (
-        <QuestsContainer>
-          {currentIndex !== 0 && (
-            <SelectArrow
-              direction="left"
-              onPointerDown={onLeftClick}
-            ></SelectArrow>
-          )}
-          {currentIndex !== quests.length - 1 && (
-            <SelectArrow
-              direction="right"
-              onPointerDown={onRightClick}
-            ></SelectArrow>
-          )}
-
-          <QuestContainer>
-            <TitleContainer className="drag-handler">
-              <Title>
-                <Thumbnail
-                  src={quests[currentIndex].thumbnail || thumbnailDefault}
-                />
-                {quests[currentIndex].title}
-              </Title>
-              <QuestSplitDiv>
-                <hr className="golden" />
-              </QuestSplitDiv>
-            </TitleContainer>
-            <Content>
-              <p>{quests[currentIndex].description}</p>
-            </Content>
-            <QuestColumn className="dark-background" justifyContent="flex-end">
-              {buttons &&
-                buttons.map((button, index) => (
-                  <Button
-                    key={index}
-                    onPointerDown={() =>
-                      button.onClick(
-                        quests[currentIndex]._id,
-                        quests[currentIndex].npcId
-                      )
-                    }
-                    disabled={button.disabled}
-                    buttonType={ButtonTypes.RPGUIButton}
-                    id={`button-${index}`}
-                  >
-                    {button.title}
-                  </Button>
-                ))}
-            </QuestColumn>
-          </QuestContainer>
-        </QuestsContainer>
-      ) : (
-        <QuestsContainer>
-          <QuestContainer>
-            <TitleContainer className="drag-handler">
-              <Title>
-                <Thumbnail src={quests[0].thumbnail || thumbnailDefault} />
-                {quests[0].title}
-              </Title>
-              <QuestSplitDiv>
-                <hr className="golden" />
-              </QuestSplitDiv>
-            </TitleContainer>
-            <Content>
-              <p>{quests[0].description}</p>
-            </Content>
-            <QuestColumn className="dark-background" justifyContent="flex-end">
-              {buttons &&
-                buttons.map((button, index) => (
-                  <Button
-                    key={index}
-                    onPointerDown={() =>
-                      button.onClick(quests[0]._id, quests[0].npcId)
-                    }
-                    disabled={button.disabled}
-                    buttonType={ButtonTypes.RPGUIButton}
-                    id={`button-${index}`}
-                  >
-                    {button.title}
-                  </Button>
-                ))}
-            </QuestColumn>
-          </QuestContainer>
-        </QuestsContainer>
-      )}
-    </QuestDraggableContainer>
-  );
-};
-
-const QuestDraggableContainer = styled(DraggableContainer)`
-  border: 1px solid black;
-  width: 600px;
-  padding: 0 0 0 0 !important;
-  .DraggableContainer__TitleContainer-sc-184mpyl-2 {
-    height: auto;
-  }
-  .container-close {
-    position: absolute;
-    margin-left: auto;
-    top: 20px;
-    padding-right: 5px;
-  }
-  img {
-    display: inline-block;
-    vertical-align: middle;
-    line-height: normal;
-  }
-`;
-
-const QuestContainer = styled.div`
-  margin-right: 40px;
-  margin-left: 40px;
-`;
-
-const QuestsContainer = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-const Content = styled.div`
-  padding: 18px;
-  h1 {
-    text-align: left;
-    margin: 14px 0px;
-  }
-`;
-
-const QuestSplitDiv = styled.div`
-  width: 100%;
-  font-size: 11px;
-  margin-bottom: 10px;
-  hr {
-    margin: 0px;
-    padding: 0px;
-  }
-  p {
-    margin-bottom: 0px;
-  }
-`;
-
-const QuestColumn = styled(Column)`
-  padding-top: 5px;
-  margin-bottom: 20px;
-  display: flex;
-  justify-content: space-evenly;
-`;
-
-const TitleContainer = styled.div`
-  width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  align-items: center;
-  margin-top: 1rem;
-`;
-
-const Title = styled.h1`
-  color: white;
-  z-index: 22;
-  font-size: ${uiFonts.size.medium} !important;
-  color: ${uiColors.yellow} !important;
-`;
-
-const Thumbnail = styled.img`
-  color: white;
-  z-index: 22;
-  width: 32px * 1.5;
-  margin-right: 0.5rem;
-  position: relative;
-  top: -4px;
-`;
+import { IQuest } from '@rpg-engine/shared';
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { uiFonts } from '../../constants/uiFonts';
+import SelectArrow from '../Arrow/SelectArrow';
+import { Button, ButtonTypes } from '../Button';
+import { DraggableContainer } from '../DraggableContainer';
+
+import { RPGUIContainerTypes } from '../RPGUIContainer';
+import { Column } from '../shared/Column';
+import thumbnailDefault from './img/default.png';
+
+export interface IQuestsButtonProps {
+  disabled: boolean;
+  title: string;
+  onClick: (questId: string, npcId: string) => void;
+}
+
+export interface IQuestInfoProps {
+  onClose?: () => void;
+  buttons?: IQuestsButtonProps[];
+  quests: IQuest[];
+  onChangeQuest: (currentQuestIndex: number, currentQuestId: string) => void;
+  scale?: number;
+}
+
+export const QuestInfo: React.FC<IQuestInfoProps> = ({
+  quests,
+  onClose,
+  buttons,
+  onChangeQuest,
+  scale,
+}) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const questsLength = quests.length - 1;
+
+  useEffect(() => {
+    if (onChangeQuest) {
+      onChangeQuest(currentIndex, quests[currentIndex]._id);
+    }
+  }, [currentIndex]);
+
+  const onLeftClick = () => {
+    if (currentIndex === 0) setCurrentIndex(questsLength);
+    else setCurrentIndex(index => index - 1);
+  };
+  const onRightClick = () => {
+    if (currentIndex === questsLength) setCurrentIndex(0);
+    else setCurrentIndex(index => index + 1);
+  };
+
+  return (
+    <QuestDraggableContainer
+      type={RPGUIContainerTypes.Framed}
+      onCloseButton={() => {
+        if (onClose) onClose();
+      }}
+      width="730px"
+      cancelDrag=".equipment-container-body .arrow-selector"
+      scale={scale}
+    >
+      {quests.length >= 2 ? (
+        <QuestsContainer>
+          {currentIndex !== 0 && (
+            <SelectArrow
+              direction="left"
+              onPointerDown={onLeftClick}
+            ></SelectArrow>
+          )}
+          {currentIndex !== quests.length - 1 && (
+            <SelectArrow
+              direction="right"
+              onPointerDown={onRightClick}
+            ></SelectArrow>
+          )}
+
+          <QuestContainer>
+            <TitleContainer className="drag-handler">
+              <Title>
+                <Thumbnail
+                  src={quests[currentIndex].thumbnail || thumbnailDefault}
+                />
+                {quests[currentIndex].title}
+              </Title>
+              <QuestSplitDiv>
+                <hr className="golden" />
+              </QuestSplitDiv>
+            </TitleContainer>
+            <Content>
+              <p>{quests[currentIndex].description}</p>
+            </Content>
+            <QuestColumn className="dark-background" justifyContent="flex-end">
+              {buttons &&
+                buttons.map((button, index) => (
+                  <Button
+                    key={index}
+                    onPointerDown={() =>
+                      button.onClick(
+                        quests[currentIndex]._id,
+                        quests[currentIndex].npcId
+                      )
+                    }
+                    disabled={button.disabled}
+                    buttonType={ButtonTypes.RPGUIButton}
+                    id={`button-${index}`}
+                  >
+                    {button.title}
+                  </Button>
+                ))}
+            </QuestColumn>
+          </QuestContainer>
+        </QuestsContainer>
+      ) : (
+        <QuestsContainer>
+          <QuestContainer>
+            <TitleContainer className="drag-handler">
+              <Title>
+                <Thumbnail src={quests[0].thumbnail || thumbnailDefault} />
+                {quests[0].title}
+              </Title>
+              <QuestSplitDiv>
+                <hr className="golden" />
+              </QuestSplitDiv>
+            </TitleContainer>
+            <Content>
+              <p>{quests[0].description}</p>
+            </Content>
+            <QuestColumn className="dark-background" justifyContent="flex-end">
+              {buttons &&
+                buttons.map((button, index) => (
+                  <Button
+                    key={index}
+                    onPointerDown={() =>
+                      button.onClick(quests[0]._id, quests[0].npcId)
+                    }
+                    disabled={button.disabled}
+                    buttonType={ButtonTypes.RPGUIButton}
+                    id={`button-${index}`}
+                  >
+                    {button.title}
+                  </Button>
+                ))}
+            </QuestColumn>
+          </QuestContainer>
+        </QuestsContainer>
+      )}
+    </QuestDraggableContainer>
+  );
+};
+
+const QuestDraggableContainer = styled(DraggableContainer)`
+  border: 1px solid black;
+  width: 600px;
+  padding: 0 0 0 0 !important;
+  .DraggableContainer__TitleContainer-sc-184mpyl-2 {
+    height: auto;
+  }
+  .container-close {
+    position: absolute;
+    margin-left: auto;
+    top: 20px;
+    padding-right: 5px;
+  }
+  img {
+    display: inline-block;
+    vertical-align: middle;
+    line-height: normal;
+  }
+`;
+
+const QuestContainer = styled.div`
+  margin-right: 40px;
+  margin-left: 40px;
+`;
+
+const QuestsContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const Content = styled.div`
+  padding: 18px;
+  h1 {
+    text-align: left;
+    margin: 14px 0px;
+  }
+`;
+
+const QuestSplitDiv = styled.div`
+  width: 100%;
+  font-size: 11px;
+  margin-bottom: 10px;
+  hr {
+    margin: 0px;
+    padding: 0px;
+  }
+  p {
+    margin-bottom: 0px;
+  }
+`;
+
+const QuestColumn = styled(Column)`
+  padding-top: 5px;
+  margin-bottom: 20px;
+  display: flex;
+  justify-content: space-evenly;
+`;
+
+const TitleContainer = styled.div`
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: center;
+  margin-top: 1rem;
+`;
+
+const Title = styled.h1`
+  color: white;
+  z-index: 22;
+  font-size: ${uiFonts.size.medium} !important;
+  color: ${uiColors.yellow} !important;
+`;
+
+const Thumbnail = styled.img`
+  color: white;
+  z-index: 22;
+  width: 32px * 1.5;
+  margin-right: 0.5rem;
+  position: relative;
+  top: -4px;
+`;