diff --git a/src/avatar-selector.js b/src/avatar-selector.js index 09132ecfd4f336bdb27e9203bf4714cf2e156b10..34731ff37823ba04f3899dd02d34bdc6a8453e4c 100644 --- a/src/avatar-selector.js +++ b/src/avatar-selector.js @@ -34,16 +34,16 @@ const lang = ((navigator.languages && navigator.languages[0]) || navigator.langu addLocaleData([...en]); const messages = localeData[lang] || localeData.en; -function postAvatarToParent(newAvatar) { - window.parent.postMessage({ avatar: newAvatar }, location.origin); +function postAvatarIdToParent(newAvatarId) { + window.parent.postMessage({ avatarId: newAvatarId }, location.origin); } function mountUI() { const hash = queryString.parse(location.hash); - const avatar = hash.avatar; + const avatarId = hash.avatar_id; ReactDOM.render( <IntlProvider locale={lang} messages={messages}> - <AvatarSelector {...{ avatars, avatar, onChange: postAvatarToParent }} /> + <AvatarSelector {...{ avatars, avatarId, onChange: postAvatarIdToParent }} /> </IntlProvider>, document.getElementById("selector-root") ); diff --git a/src/components/player-info.js b/src/components/player-info.js index 8cb265a67b9c67ac26510d6b8a03efb59703c931..ac2fc6b55fcdaf0215e26327368c07dd67e88fcc 100644 --- a/src/components/player-info.js +++ b/src/components/player-info.js @@ -1,7 +1,7 @@ AFRAME.registerComponent("player-info", { schema: { displayName: { type: "string" }, - avatar: { type: "string" } + avatarSrc: { type: "string" } }, init() { this.applyProperties = this.applyProperties.bind(this); @@ -24,8 +24,8 @@ AFRAME.registerComponent("player-info", { } const modelEl = this.el.querySelector(".model"); - if (this.data.avatar && modelEl) { - modelEl.setAttribute("src", this.data.avatar); + if (this.data.avatarSrc && modelEl) { + modelEl.setAttribute("src", this.data.avatarSrc); } } }); diff --git a/src/react-components/avatar-selector.js b/src/react-components/avatar-selector.js index b6f17c66e2843706643d76ee3ca64c448c7c2b5c..ca74e9a786d0508c5934a833a8737afd8996d4a4 100644 --- a/src/react-components/avatar-selector.js +++ b/src/react-components/avatar-selector.js @@ -8,12 +8,12 @@ import faAngleRight from '@fortawesome/fontawesome-free-solid/faAngleRight'; class AvatarSelector extends Component { static propTypes = { avatars: PropTypes.array, - avatar: PropTypes.string, + avatarId: PropTypes.string, onChange: PropTypes.func, } getAvatarIndex = (direction=0) => { - const currAvatarIndex = this.props.avatars.findIndex(avatar => avatar.id === this.props.avatar); + const currAvatarIndex = this.props.avatars.findIndex(avatar => avatar.id === this.props.avatarId); const numAvatars = this.props.avatars.length; return ((currAvatarIndex + direction) % numAvatars + numAvatars) % numAvatars; } @@ -82,7 +82,7 @@ class AvatarSelector extends Component { ></a-asset-item> </a-assets> - <a-entity data-avatar={this.props.avatar}> + <a-entity data-avatar={this.props.avatarId}> <a-animation ref={anm => this.animation = anm} attribute="rotation" diff --git a/src/react-components/profile-entry-panel.js b/src/react-components/profile-entry-panel.js index dd7899ea60da19e7b4b503564ace0a2f4d169db5..dda86bca9ff141335c706f6305ea7d3982e279ed 100644 --- a/src/react-components/profile-entry-panel.js +++ b/src/react-components/profile-entry-panel.js @@ -15,7 +15,7 @@ class ProfileEntryPanel extends Component { window.store = this.props.store; this.state = { display_name: this.props.store.state.profile.display_name, - avatar: this.props.store.state.profile.avatar, + avatar_id: this.props.store.state.profile.avatar_id, }; this.props.store.addEventListener("statechanged", this.storeUpdated); } @@ -23,7 +23,7 @@ class ProfileEntryPanel extends Component { storeUpdated = () => { this.setState({ display_name: this.props.store.state.profile.display_name, - avatar: this.props.store.state.profile.avatar, + avatar_id: this.props.store.state.profile.avatar_id, }); } @@ -31,7 +31,7 @@ class ProfileEntryPanel extends Component { e.preventDefault(); this.props.store.update({profile: { display_name: this.state.display_name, - avatar: this.state.avatar + avatar_id: this.state.avatar_id }}); this.props.finished(); } @@ -42,7 +42,7 @@ class ProfileEntryPanel extends Component { setAvatarStateFromIframeMessage = (e) => { if (e.source !== this.avatarSelector.contentWindow) { return; } - this.setState({avatar: e.data.avatar}); + this.setState({avatar_id: e.data.avatarId}); } componentDidMount() { @@ -79,7 +79,7 @@ class ProfileEntryPanel extends Component { ref={inp => this.nameInput = inp}/> <iframe className="profile-entry__avatar-selector" - src={`avatar-selector.html#avatar=${this.state.avatar}`} + src={`avatar-selector.html#avatar_id=${this.state.avatar_id}`} ref={ifr => this.avatarSelector = ifr}></iframe> <input className="profile-entry__form-submit" type="submit" value={formatMessage({ id: "profile.save" }) }/> </div> diff --git a/src/room.js b/src/room.js index 6793385903a90d285ba45f7d00f164e9f21061fc..232bc18accb2d4150f3213e09f1cbaac5d0c4d47 100644 --- a/src/room.js +++ b/src/room.js @@ -114,9 +114,10 @@ async function exitScene() { } function applyProfileFromStore(playerRig) { + const displayName = store.state.profile.display_name; playerRig.setAttribute("player-info", { - displayName: store.state.profile.display_name, - avatar: '#' + (store.state.profile.avatar || "botdefault") + displayName, + avatarSrc: '#' + (store.state.profile.avatar_id || "botdefault") }); document.querySelector("a-scene").emit("username-changed", { username: displayName }); } diff --git a/src/storage/store.js b/src/storage/store.js index 7e7d1a722e7aa53c581b7fe1498a132d7e7257e5..037e27bf1d9603a210423baa5ee6543c2ee77fdb 100644 --- a/src/storage/store.js +++ b/src/storage/store.js @@ -17,7 +17,7 @@ export const SCHEMA = { additionalProperties: false, properties: { display_name: { type: "string", pattern: "^[A-Za-z0-9-]{3,32}$" }, - avatar: { type: "string" }, + avatar_id: { type: "string" }, } } }, diff --git a/src/utils/identity.js b/src/utils/identity.js index b1d5148251d76b637b9ce0201d5f2b7e28fbcff2..727be75580bae2701de1c8ae2c81315d60a635b5 100644 --- a/src/utils/identity.js +++ b/src/utils/identity.js @@ -173,6 +173,6 @@ export function generateDefaultProfile() { const name = selectRandom(names); return { display_name: name.replace(/^./, name[0].toUpperCase()) , - avatar: selectRandom(avatarIds) + avatar_id: selectRandom(avatarIds) }; }