+
+ :
+ null
+ }
+
+ { this.getBodyPartElem('Head') }
+
+ { this.getBodyPartElem('RightArm') }
+ { this.getBodyPartElem('Torso') }
+ { this.getBodyPartElem('LeftArm') }
+
+
+ { this.getBodyPartElem('RightLeg') }
+ { this.getBodyPartElem('LeftLeg') }
+
+
+ { this.state.showModal ? this.visibleModal : null }
+
+ );
+ }
+}
+
+class WearingPane extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ loading: true,
+ items: [],
+ pageKey: 0
+ };
+
+ this.load = this.load.bind(this);
+ }
+
+ componentDidMount() {
+ this.load();
+ }
+
+ load() {
+ this.setState({ loading: true });
+
+ axios.get(buildGenericApiUrl('api', 'avatar/v1/wearing'))
+ .then(res => {
+ const items = res.data;
+ let newKey = this.state.pageKey + 1;
+
+ this.setState({ pageKey: newKey, items: items.data, loading: false });
+ })
+ .catch(() => {
+ this.props.setError('Error loading wearing pane.');
+ this.setState({ pageNumber: oldPageNum, loading: false });
+ });
+ }
+
+ render() {
+ return (
+ <>
+ {
+ (this.state.loading)
+ ?
+
+
+ :
+ null
+ }
+ {
+ this.state.items.length == 0
+ ?
+ Nothing found.
+ : +
+ {
+ this.state.items.map((item, index) =>
+
+ }
+
+ );
+ }
+}
+
+class AvatarEditor extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ loading: false,
+ thumbnailLoading: false,
+ tabLoaded: false,
+ tabs: [
+ {label: 'Wardrobe', name: 'wardrobe', ref: createRef()},
+ {label: 'Outfits', name: 'outfits', ref: createRef()}
+ ],
+ error: null,
+ thumbKey: 0
+ };
+
+ this.tabIndex = 0;
+
+ this.wearingPane = createRef();
+ this.bodyColorPane = createRef();
+ this.tabPane = createRef();
+
+ this.setCurrentTab = this.setCurrentTab.bind(this);
+ this.setTab = this.setTab.bind(this);
+ this.redrawCharacter = this.redrawCharacter.bind(this);
+ this.reloadCharacter = this.reloadCharacter.bind(this);
+ this.setError = this.setError.bind(this);
+ this.thumbCallback = this.thumbCallback.bind(this);
+ this.wearAssetId = this.wearAssetId.bind(this);
+ this.unwearAssetId = this.unwearAssetId.bind(this);
+ this.setBodyColor = this.setBodyColor.bind(this);
+ }
+
+ componentDidMount() {
+ this.setTab('wardrobe');
+ }
+
+ setCurrentTab(instance)
+ {
+ this.currentTab = instance;
+ this.setState({tabLoaded: true});
+ }
+
+ setTab(tabType) {
+ this.setState({tabLoaded: false});
+ this.tabIndex += 1;
+
+ let component = {
+ wardrobe: WardrobeTab,
+ outfits: OutfitsTab
+ }[tabType];
+
+ this.setCurrentTab(createElement(
+ component,
+ {
+ setError: this.setError,
+ reloadCharacter: this.reloadCharacter,
+ wearAssetId: this.wearAssetId,
+ unwearAssetId: this.unwearAssetId,
+ ref: this.tabPane,
+ key: this.tabIndex
+ }
+ ));
+
+ this.state.tabs.map(({ name, ref }) => {
+ if(name == tabType)
+ ref.current.classList.add('active');
+ else
+ ref.current.classList.remove('active');
+ });
+ }
+
+ redrawCharacter() {
+ if(this.state.loading) return;
+
+ this.setState({ loading: true });
+
+ axios.post(buildGenericApiUrl('api', 'avatar/v1/redraw'))
+ .then(res => {
+ this.reloadCharacter();
+ this.setState({ loading: false });
+ })
+ .catch(() => {
+ this.setError('An error occurred while redrawing.');
+ this.setState({ loading: false });
+ });
+ }
+
+ setError(state) {
+ this.setState({ error: state });
+ setTimeout(function(){
+ this.setState({ error: null });
+ }.bind(this), 2000);
+ }
+
+ reloadCharacter() {
+ let thumbKey = this.state.thumbKey + 1;
+
+ this.wearingPane.current.load();
+ this.bodyColorPane.current.load();
+ this.tabPane.current.refresh();
+
+ this.setState({ thumbKey: thumbKey });
+ }
+
+ thumbCallback(loading) {
+ this.setState({ thumbnailLoading: loading });
+ }
+
+ wearAssetId(assetId, callback) {
+ if(this.state.thumbnailLoading) return;
+
+ axios.post(buildGenericApiUrl('api', `avatar/v1/wear?id=${ assetId }`))
+ .then(res => {
+ this.reloadCharacter();
+ if(callback) callback();
+ })
+ .catch(() => {
+ this.setError('An error occurred while trying to wear this item.');
+ });
+ }
+
+ unwearAssetId(assetId, callback) {
+ if(this.state.thumbnailLoading) return;
+
+ axios.post(buildGenericApiUrl('api', `avatar/v1/unwear?id=${ assetId }`))
+ .then(res => {
+ this.reloadCharacter();
+ if(callback) callback();
+ })
+ .catch(() => {
+ this.setError('An error occurred while trying to take off this item.');
+ });
+ }
+
+ setBodyColor(name, color) {
+ if(this.state.thumbnailLoading) return;
+
+ axios.post(buildGenericApiUrl('api', `avatar/v1/set-body-color?part=${ name }&color=${ color }`))
+ .then(res => {
+ this.reloadCharacter();
+ })
+ .catch(() => {
+ this.setError('An error occurred while trying to change body color.');
+ });
+ }
+
+ render() {
+ return (
+ <>
+ {
+ this.state.error
+ ?
+ { this.state.error }
+ :
+ null
+ }
+
+
+
+ {
+ this.state.loading
+ ?
+
+
+
+ :
+ Is something wrong with your avatar?
+ Click here to re-draw it! + +Colors
+
+
+
+
+
+ );
+ }
+}
+
+export default AvatarEditor;
\ No newline at end of file
diff --git a/web/resources/js/components/Shop.js b/web/resources/js/components/Shop.js
index fd1d280..a4066a9 100644
--- a/web/resources/js/components/Shop.js
+++ b/web/resources/js/components/Shop.js
@@ -270,6 +270,7 @@ class Shop extends Component {
super(props);
this.state = {
selectedCategoryId: -1,
+ pageKey: 0,
pageItems: [],
pageLoaded: true,
pageNumber: null,
@@ -332,11 +333,12 @@ class Shop extends Component {
url += ((paramIterator++ == 0 ? '?' : '&') + `${key}=${data[key]}`);
});
+ let newKey = this.state.pageKey + 1;
axios.get(url)
.then(res => {
const items = res.data;
- this.setState({ pageItems: items.data, pageCount: items.pages, pageLoaded: true, error: false });
+ this.setState({ pageKey: newKey, pageItems: items.data, pageCount: items.pages, pageLoaded: true, error: false });
}).catch(err => {
const data = err.response.data;
@@ -344,7 +346,7 @@ class Shop extends Component {
if(data.errors)
errorMessage = data.errors[0].message;
- this.setState({ pageItems: [], pageCount: 1, pageNumber: 1, pageLoaded: true, error: errorMessage });
+ this.setState({ pageKey: newKey, pageItems: [], pageCount: 1, pageNumber: 1, pageLoaded: true, error: errorMessage });
this.inputBox.current.focus();
});
}
@@ -404,7 +406,7 @@ class Shop extends Component {
(this.state.pageItems.length == 0 && !this.state.error) ?
-
+ {
+ this.state.tabs.map(({ label, name, ref }) =>
+
- + + + ) + } +
+ { this.state.tabLoaded ? this.currentTab :
+
+ Currently Wearing
+
+
+ Nothing found.
: -
+
{
this.state.pageItems.map((item, index) =>
-
- :
- <>
- {
- this.state.loading
- ?
-
-
- :
- (
- this.state.is3d
- ?
-
- :
-
- {
- this.wearable ?
-
- :
- null
- }
- {
- this.renderable3d ?
-
- :
- null
- }
+ {
+ this.state.initialLoading
+ ?
+
+
:
- null
- }
-
- }
+ <>
+ {
+ this.state.loading
+ ?
+
+
+ :
+ (
+ this.state.is3d
+ ?
+
+ :
+
+ {
+ this.wearable ?
+
+ :
+ null
+ }
+ {
+ this.renderable3d ?
+
+ :
+ null
+ }
+
+ :
+ null
+ }
+
+ }
);
}
diff --git a/web/resources/js/pages/AvatarEditor.js b/web/resources/js/pages/AvatarEditor.js
new file mode 100644
index 0000000..dc42be1
--- /dev/null
+++ b/web/resources/js/pages/AvatarEditor.js
@@ -0,0 +1,19 @@
+/*
+ Copyright © XlXi 2022
+*/
+
+import $ from 'jquery';
+
+import React from 'react';
+import { render } from 'react-dom';
+
+import AvatarEditor from '../components/AvatarEditor';
+
+const editorId = 'vb-avatar-editor';
+
+$(document).ready(function() {
+ if (document.getElementById(editorId)) {
+ let eElem = document.getElementById(editorId);
+ render(
+
Todo:
+-
+
- Section for wearing outfits +
Avatar Editor
-
-
-
+
+
+
->getImageUrl() }})
Colors
-
+
-
-