@rpg-engine/long-bow 0.3.97 → 0.3.98

package/src/components/Character/CharacterSelection.tsx

@@ -1,98 +1,98 @@
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-
-import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
-
-import { ErrorBoundary } from '../Item/Inventory/ErrorBoundary';
-import PropertySelect, {
-  IPropertiesProps,
-} from '../PropertySelect/PropertySelect';
-
-export interface ICharacterProps {
-  name: string;
-  textureKey: string;
-}
-
-export interface ICharacterSelectionProps {
-  availableCharacters: ICharacterProps[];
-  atlasJSON: any;
-  atlasIMG: any;
-  onChange: (textureKey: string) => void;
-}
-
-export const CharacterSelection: React.FC<ICharacterSelectionProps> = ({
-  availableCharacters,
-  atlasJSON,
-  atlasIMG,
-  onChange,
-}) => {
-  const propertySelectValues = availableCharacters.map((item) => {
-    return {
-      id: item.textureKey,
-      name: item.name,
-    };
-  });
-
-  const [selectedValue, setSelectedValue] = useState<IPropertiesProps>();
-  const [selectedSpriteKey, setSelectedSpriteKey] = useState('');
-
-  const onSelectedValueChange = () => {
-    const textureKey = selectedValue ? selectedValue.id : '';
-    const spriteKey = textureKey ? textureKey + '/down/standing/0.png' : '';
-
-    if (spriteKey === selectedSpriteKey) {
-      return;
-    }
-
-    setSelectedSpriteKey(spriteKey);
-    onChange(textureKey);
-  };
-
-  useEffect(() => {
-    onSelectedValueChange();
-  }, [selectedValue]);
-
-  useEffect(() => {
-    setSelectedValue(propertySelectValues[0]);
-  }, [availableCharacters]);
-
-  return (
-    <Container>
-      {selectedSpriteKey && atlasIMG && atlasJSON && (
-        <ErrorBoundary>
-          <SpriteFromAtlas
-            spriteKey={selectedSpriteKey}
-            atlasIMG={atlasIMG}
-            atlasJSON={atlasJSON}
-            imgScale={4}
-            height={80}
-            width={64}
-            containerStyle={{
-              display: 'flex',
-              alignItems: 'center',
-              paddingBottom: '15px',
-            }}
-            imgStyle={{
-              left: '22px',
-            }}
-          />
-        </ErrorBoundary>
-      )}
-      <PropertySelect
-        availableProperties={propertySelectValues}
-        onChange={(value) => {
-          setSelectedValue(value);
-        }}
-      />
-    </Container>
-  );
-};
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  image-rendering: pixelated;
-`;
-
-export default CharacterSelection;
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+
+import { ErrorBoundary } from '../Item/Inventory/ErrorBoundary';
+import PropertySelect, {
+  IPropertiesProps,
+} from '../PropertySelect/PropertySelect';
+
+export interface ICharacterProps {
+  name: string;
+  textureKey: string;
+}
+
+export interface ICharacterSelectionProps {
+  availableCharacters: ICharacterProps[];
+  atlasJSON: any;
+  atlasIMG: any;
+  onChange: (textureKey: string) => void;
+}
+
+export const CharacterSelection: React.FC<ICharacterSelectionProps> = ({
+  availableCharacters,
+  atlasJSON,
+  atlasIMG,
+  onChange,
+}) => {
+  const propertySelectValues = availableCharacters.map((item) => {
+    return {
+      id: item.textureKey,
+      name: item.name,
+    };
+  });
+
+  const [selectedValue, setSelectedValue] = useState<IPropertiesProps>();
+  const [selectedSpriteKey, setSelectedSpriteKey] = useState('');
+
+  const onSelectedValueChange = () => {
+    const textureKey = selectedValue ? selectedValue.id : '';
+    const spriteKey = textureKey ? textureKey + '/down/standing/0.png' : '';
+
+    if (spriteKey === selectedSpriteKey) {
+      return;
+    }
+
+    setSelectedSpriteKey(spriteKey);
+    onChange(textureKey);
+  };
+
+  useEffect(() => {
+    onSelectedValueChange();
+  }, [selectedValue]);
+
+  useEffect(() => {
+    setSelectedValue(propertySelectValues[0]);
+  }, [availableCharacters]);
+
+  return (
+    <Container>
+      {selectedSpriteKey && atlasIMG && atlasJSON && (
+        <ErrorBoundary>
+          <SpriteFromAtlas
+            spriteKey={selectedSpriteKey}
+            atlasIMG={atlasIMG}
+            atlasJSON={atlasJSON}
+            imgScale={4}
+            height={80}
+            width={64}
+            containerStyle={{
+              display: 'flex',
+              alignItems: 'center',
+              paddingBottom: '15px',
+            }}
+            imgStyle={{
+              left: '22px',
+            }}
+          />
+        </ErrorBoundary>
+      )}
+      <PropertySelect
+        availableProperties={propertySelectValues}
+        onChange={(value) => {
+          setSelectedValue(value);
+        }}
+      />
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  image-rendering: pixelated;
+`;
+
+export default CharacterSelection;

package/src/components/CharacterStatus/CharacterStatus.tsx

@@ -1,120 +1,120 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import { uiColors } from '../../constants/uiColors';
-import { ProgressBar } from '../ProgressBar';
-import Character from './Character.png';
-
-export interface ICharacterStatusProps {
-  healthValue: number;
-  healthMaxValue: number;
-  manaValue: number;
-  manaMaxValue: number;
-  charName: string;
-}
-
-export const CharacterStatus: React.FC<ICharacterStatusProps> = ({
-  healthValue,
-  healthMaxValue,
-  manaValue,
-  manaMaxValue,
-  charName,
-}) => {
-  const [buff] = useState<Boolean>(false);
-  return (
-    <StatusContainer>
-      <ImgContainer
-        style={{
-          background: `url(${Character})`,
-          backgroundPositionX: 'center',
-        }}
-      />
-      <StatusFlexContainer>
-        <div>
-          <CharNameContainer>{charName}</CharNameContainer>
-          <ProgressContainer>
-            <StyledProgressBar
-              max={healthMaxValue}
-              value={healthValue}
-              color={'red'}
-              minWidth={200}
-            />
-            <StyledProgressBar
-              max={manaMaxValue}
-              value={manaValue}
-              color={'blue'}
-              minWidth={200}
-            />
-          </ProgressContainer>
-        </div>
-        {buff && (
-          <BuffCircleContainer>
-            <BuffCircle />
-            <BuffCircle />
-            <BuffCircle />
-            <BuffCircle />
-            <BuffCircle />
-            <BuffCircle />
-            <BuffCircle />
-            <BuffCircle />
-            <BuffCircle />
-            <BuffCircle />
-          </BuffCircleContainer>
-        )}
-      </StatusFlexContainer>
-    </StatusContainer>
-  );
-};
-
-const CharNameContainer = styled.div`
-  color: black;
-  margin: auto;
-  display: flex;
-  justify-content: space-around;
-  background-color: rgba(117, 113, 97, 0.3);
-  align-items: center;
-  height: 30px;
-  border-radius: 10px;
-`;
-
-const StatusContainer = styled.div`
-  display: flex;
-  scale: 0.7;
-`;
-
-const ProgressContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-`;
-
-const StyledProgressBar = styled(ProgressBar)`
-  .rpgui-progress-left-edge,
-  .rpgui-progress-right-edge {
-    width: 20px;
-  }
-`;
-
-const ImgContainer = styled.div`
-  width: 4.3rem;
-  height: 4.3rem;
-  border: 2px solid ${uiColors.darkGray};
-  border-radius: 50%;
-  border-radius: 50%;
-  margin-right: 8px;
-`;
-
-const BuffCircle = styled.div`
-  width: 2rem;
-  height: 2rem;
-  background-color: ${uiColors.lightGray};
-  border: 2px solid ${uiColors.darkGray};
-  border-radius: 50%;
-`;
-
-const StatusFlexContainer = styled.div``;
-
-const BuffCircleContainer = styled.div`
-  display: flex;
-  div {
-    margin: 2px;
-  }
-`;
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { ProgressBar } from '../ProgressBar';
+import Character from './Character.png';
+
+export interface ICharacterStatusProps {
+  healthValue: number;
+  healthMaxValue: number;
+  manaValue: number;
+  manaMaxValue: number;
+  charName: string;
+}
+
+export const CharacterStatus: React.FC<ICharacterStatusProps> = ({
+  healthValue,
+  healthMaxValue,
+  manaValue,
+  manaMaxValue,
+  charName,
+}) => {
+  const [buff] = useState<Boolean>(false);
+  return (
+    <StatusContainer>
+      <ImgContainer
+        style={{
+          background: `url(${Character})`,
+          backgroundPositionX: 'center',
+        }}
+      />
+      <StatusFlexContainer>
+        <div>
+          <CharNameContainer>{charName}</CharNameContainer>
+          <ProgressContainer>
+            <StyledProgressBar
+              max={healthMaxValue}
+              value={healthValue}
+              color={'red'}
+              minWidth={200}
+            />
+            <StyledProgressBar
+              max={manaMaxValue}
+              value={manaValue}
+              color={'blue'}
+              minWidth={200}
+            />
+          </ProgressContainer>
+        </div>
+        {buff && (
+          <BuffCircleContainer>
+            <BuffCircle />
+            <BuffCircle />
+            <BuffCircle />
+            <BuffCircle />
+            <BuffCircle />
+            <BuffCircle />
+            <BuffCircle />
+            <BuffCircle />
+            <BuffCircle />
+            <BuffCircle />
+          </BuffCircleContainer>
+        )}
+      </StatusFlexContainer>
+    </StatusContainer>
+  );
+};
+
+const CharNameContainer = styled.div`
+  color: black;
+  margin: auto;
+  display: flex;
+  justify-content: space-around;
+  background-color: rgba(117, 113, 97, 0.3);
+  align-items: center;
+  height: 30px;
+  border-radius: 10px;
+`;
+
+const StatusContainer = styled.div`
+  display: flex;
+  scale: 0.7;
+`;
+
+const ProgressContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+
+const StyledProgressBar = styled(ProgressBar)`
+  .rpgui-progress-left-edge,
+  .rpgui-progress-right-edge {
+    width: 20px;
+  }
+`;
+
+const ImgContainer = styled.div`
+  width: 4.3rem;
+  height: 4.3rem;
+  border: 2px solid ${uiColors.darkGray};
+  border-radius: 50%;
+  border-radius: 50%;
+  margin-right: 8px;
+`;
+
+const BuffCircle = styled.div`
+  width: 2rem;
+  height: 2rem;
+  background-color: ${uiColors.lightGray};
+  border: 2px solid ${uiColors.darkGray};
+  border-radius: 50%;
+`;
+
+const StatusFlexContainer = styled.div``;
+
+const BuffCircleContainer = styled.div`
+  display: flex;
+  div {
+    margin: 2px;
+  }
+`;