(function () { "use strict"; // Consts // ///////////////////////////////////////////////////////////////////////// var EVENT_BRIDGE_OPEN_MESSAGE = "eventBridgeOpen", UPDATE_UI = "update_ui", GOTO = "goto", VOTE_AVATAR = "vote_avatar", VOTE_DOMAIN = "vote_domain", EVENTBRIDGE_SETUP_DELAY = 200; // Components // ///////////////////////////////////////////////////////////////////////// Vue.component('navigation', { props: { polls: { type: Object } }, template: ` ` }) Vue.component('infotab', { template: `

Futvrelands Contest Information

Hello and welcome to the Futvrelands Voting Contest where the community picks the winner!

Favorite Domain (see above tab)

  1. Opens Wednesday Nov. 14

  2. Visit all domains

  3. Pick your favorite!

Best Avatar (see above tab)

  1. Opens Saturday Nov. 17

  2. Watch Avatar Fashion show at Futvrelands

  3. Pick your favorite!

` }) Vue.component('domainlist', { props: { flagvisited: { type: Boolean }, visitedalldomains: { type: Boolean }, domains: { type: Array }, open: { type: Boolean }, voted: { type: Boolean } // *** }, computed: { groupedItems() { var grouped = []; var index = -1; for (var i = 0; i < this.domains.length; i++) { if (i % 2 == 0) { index++; grouped[index] = []; grouped[index].id = index; } grouped[index].push(this.domains[i]); } if (grouped.length && grouped[index].length === 1) { grouped[index].push({ hidden: true }); } return grouped; }, getTitle() { if (!this.visitedalldomains) { return "Visit the entries then vote:"; } else if (this.voted) { return "Thanks for voting!"; } else { return "Vote for your favorite!"; } } }, methods: { closeVisitedModal() { console.log("closeModal"); this.isVisitedModalVisible = false; this.showedVisited = true; } }, data() { return { isVisitedModalVisible: false, showedVisited: false }; }, watch: { visitedalldomains: function (newVal, oldVal) { if (newVal === true && oldVal === false && this.voted === false) { this.isVisitedModalVisible = true; } } }, template: ` ` }) Vue.component('domaincard', { props: { visitedalldomains: { type: Boolean }, domain: { type: Object }, voted: { type: Boolean } }, methods: { goto(domainName) { EventBridge.emitWebEvent(JSON.stringify({ type: GOTO, value: domainName })); console.log(domainName); }, votedomain(domainName) { EventBridge.emitWebEvent(JSON.stringify({ type: VOTE_DOMAIN, value: domainName })); console.log(domainName); this.closeVoteModal(); }, showVoteModal() { if (!this.domain.hidden && !this.voted) { this.isVoteModalVisible = true; } }, closeVoteModal() { console.log("closeVoteModal"); this.isVoteModalVisible = false; }, }, computed: { styles() { return "background: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0)), url('" + this.domain.image + "'); background-position: center; background-size: cover;"; }, showCheckMark () { if (this.voted) { return this.domain.voted; } else { return this.visitedalldomains; } }, }, data() { return { isVoteModalVisible: false }; }, template: `

{{ domain.displayName }}

Vote for {{ domain.displayName }}?

You can only vote once. Your vote cannot be changed later.

` }) Vue.component('avatarlist', { props: { avatars: { type: Array }, open: { type: Boolean }, voted: { type: Boolean } // *** }, computed: { groupedItems() { var grouped = []; var index = -1; for (var i = 0; i < this.avatars.length; i++) { if (i % 3 == 0) { index++; grouped[index] = []; grouped[index].id = index; } grouped[index].push(this.avatars[i]); } if (grouped.length && grouped[index].length < 3) { console.log("robin"); grouped[index].push({ hidden: true }); if (grouped[index].length === 2) { console.log("robin"); grouped[index].push({ hidden: true }); } } return grouped; } }, template: ` ` }) Vue.component('avatarcard', { props: { avatar: { type: Object }, voted: { type: Boolean } }, methods: { voteavatar(avatarName) { EventBridge.emitWebEvent(JSON.stringify({ type: VOTE_AVATAR, value: avatarName })); console.log(avatarName); this.closeVoteModal(); // var that = this; // setTimeout(function () { // that.$forceUpdate(); // }, 200); }, showAvatarInfoModal() { if (!this.avatar.hidden) { this.isAvatarInfoModalVisible = true; } }, closeAvatarInfoModal() { console.log("closeAvatarInfoModal"); this.isAvatarInfoModalVisible = false; }, showVoteModal() { if (!this.avatar.hidden && !this.voted) { this.isVoteModalVisible = true; this.isAvatarInfoModalVisible = false; } }, closeVoteModal() { console.log("closeAvatarInfoModal"); this.isVoteModalVisible = false; this.isAvatarInfoModalVisible = true; }, closeBothModals() { this.isVoteModalVisible = false; this.isAvatarInfoModalVisible = false; } }, data() { return { isAvatarInfoModalVisible: false, isVoteModalVisible: false, }; }, computed: { cardStyles() { console.log("robin _0"); if (this.avatar && this.avatar.image && this.avatar.image.length && this.avatar.image.length > 5) { console.log("robin _01"); var str = this.avatar.image; var urlLength = str.length; var charAt4 = str.charAt(urlLength - 4); // .png/.jpg var charAt5 = str.charAt(urlLength - 5); // .jpeg var index = -1; if (charAt4 === "." || charAt5 === ".") { index = charAt4 === "." ? urlLength - 4 : urlLength - 5; } var root = str.slice(0, index); var end = str.slice(index, urlLength); var thumbnail = "-thumbnail"; var styles = "background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0)), url('" + root + thumbnail + end + "'); background-position: center; background-size: cover;" if (this.avatar.voted) { // styles = "border: 5px solid #FB0488 !important; background: linear-gradient(rgba(251, 4, 136, 0.3), rgba(251, 4, 136, 0.3)), url('" + root + thumbnail + end + // "'); background-position: center; background-size: cover;"; // console.log("robin _1"); } else { styles += "border:none"; } return styles; } }, modalStyles() { return "background: url('" + this.avatar.image + "'); background-position: center; background-size: cover; border:none"; }, voteBarText() { if (!this.voted) { return " Vote for " + this.avatar.name; } else { // voted already if (this.avatar.voted) { return " Voted!"; } else { return "Thanks for voting!"; } } }, votedFor () { return this.voted && this.avatar.voted; }, notVotedFor () { return this.voted && !this.avatar.voted; // } }, template: `

{{ avatar.name }}

{{ avatar.name }}

{{ voteBarText }}

Vote for {{ avatar.name }}?

You can only vote once. Your vote cannot be changed later.

` }) // Vue.component('avatarview', { // props: { // avatar: { type: Object }, // voted: { type: Boolean } // }, // template: ` // //
//
//

{{ avatar.name }}

// //
//
//

{{ voteBarText }}

//
//
//
// ` // }) Vue.component('modal', { props: { alert: { type: Boolean }, hidex: { type: Boolean }, isavatar: { type: Boolean } }, methods: { close() { console.log("close"); this.$emit('close'); } }, template: ` ` }) Vue.component('example', { props: { example: { type: Object } }, methods: { example() { EventBridge.emitWebEvent(JSON.stringify({ type: EXAMPLE_MESSAGE, value: this.example })); } }, template: `
{{ example.name }}
` }) // App // ///////////////////////////////////////////////////////////////////////// var app = new Vue({ el: '#app', data: { // dataStore: { // unload: false, // loading: true, // loggedin: true, // voted: { // domain: false, // avatar: false // }, // openPolls: { // avatar: false, // domain: true // }, // visitedalldomains: false, // domains: [], // avatars: [] // } dataStore: { unload: false, loading: false, loggedin: true, voted: { domain: false, avatar: true }, openPolls: { avatar: true, domain: true }, visitedalldomains: false, domains: [ {"name":"Warroom","image":"","visited":false,"index":-1,"voted":false} ], avatars: [ {"name":"Anchovy","image":"http://hifi-content.s3-us-west-1.amazonaws.com/robin/robinStuff/voteAppTestPhotos/anchovy.png" , voted: true }, {"name":"Andy","image":"http://hifi-content.s3-us-west-1.amazonaws.com/robin/robinStuff/voteAppTestPhotos/andy.png", voted: false} ] } // dataStore: { // "loading": true, // "loggedin": true, // "voted": { // "domain": false, // "avatar": true // }, // "openPolls": { // "avatar":true, // "domain":true // }, // "visitedalldomains":false, // "domains": [ // { // "name":"TheSpot", // "image":"https://hifi-metaverse.s3-us-west-1.amazonaws.com/images/places/previews/6bf/6ed/a7-/thumbnail/hifi-place-6bf6eda7-51d6-45ef-8ffc-28a6c4080af4.jpg?1527698357", // "visited":false, // "index":0 // }, // { // "name":"Studio", // "image":"http://img.youtube.com/vi/kEJDqO7WrKY/hqdefault.jpg", // "visited":true, // "index":1 // }, // { // "name":"Help1", // "image":"https://hifi-metaverse.s3-us-west-1.amazonaws.com/images/places/previews/0ce/40e/14-/thumbnail/hifi-place-0ce40e14-7c49-4076-8bcf-be6f76fe7482.png?1529018633", // "visited":true, // "index":2 // }, // { // "name":"Help2", // "image":"https://hifi-metaverse.s3-us-west-1.amazonaws.com/images/places/previews/0ce/40e/14-/thumbnail/hifi-place-0ce40e14-7c49-4076-8bcf-be6f76fe7482.png?1529018633", // "visited":true, // "index":2 // }, // { // "name":"Help3", // "image":"https://hifi-metaverse.s3-us-west-1.amazonaws.com/images/places/previews/0ce/40e/14-/thumbnail/hifi-place-0ce40e14-7c49-4076-8bcf-be6f76fe7482.png?1529018633", // "visited":true, // "index":2 // }, // { // "name":"Help4", // "image":"https://hifi-metaverse.s3-us-west-1.amazonaws.com/images/places/previews/0ce/40e/14-/thumbnail/hifi-place-0ce40e14-7c49-4076-8bcf-be6f76fe7482.png?1529018633", // "visited":true, // "index":2 // }, // { // "name":"Help5", // "image":"https://hifi-metaverse.s3-us-west-1.amazonaws.com/images/places/previews/0ce/40e/14-/thumbnail/hifi-place-0ce40e14-7c49-4076-8bcf-be6f76fe7482.png?1529018633", // "visited":true, // "index":2 // }, // { // "name":"Help6", // "image":"https://hifi-metaverse.s3-us-west-1.amazonaws.com/images/places/previews/0ce/40e/14-/thumbnail/hifi-place-0ce40e14-7c49-4076-8bcf-be6f76fe7482.png?1529018633", // "visited":true, // "index":2 // } // ], // "avatars":[ // { // "name":"Robin1", // "image":"http://hifi-content.s3-us-west-1.amazonaws.com/Experiences/LoadTest/VoteApp/InProgress/V7/Artemis-Feature-Pic.jpg" // // }, // { // "name":"Robin2", // "image":"http://img.youtube.com/vi/kEJDqO7WrKY/hqdefault.jpg" // }, // { // "name":"Robin3", // "image":"http://img.youtube.com/vi/kEJDqO7WrKY/hqdefault.jpg" // }, // { // "name":"Robin4", // "image":"http://img.youtube.com/vi/kEJDqO7WrKY/hqdefault.jpg" // }, // { // "name":"Robin5", // "image":"http://img.youtube.com/vi/kEJDqO7WrKY/hqdefault.jpg" // }, // { // "name":"Robin5", // "image":"http://img.youtube.com/vi/kEJDqO7WrKY/hqdefault.jpg" // }, // { // "name":"Robin5", // "image":"http://img.youtube.com/vi/kEJDqO7WrKY/hqdefault.jpg" // }, // { // "name":"Robin5", // "image":"http://img.youtube.com/vi/kEJDqO7WrKY/hqdefault.jpg" // } // ] // } } }); // Procedural // ///////////////////////////////////////////////////////////////////////// function onScriptEventReceived(message) { var data; try { data = JSON.parse(message); switch (data.type) { case UPDATE_UI: app.dataStore = data.value; break; // case VISITED_ALL_DOMAINS: // app.dataStore.flagVisited = true; // break; default: } } catch (e) { console.log(e) return; } } function onLoad() { // Initial button active state is communicated via URL parameter. // isActive = location.search.replace("?active=", "") === "true"; setTimeout(function () { // Open the EventBridge to communicate with the main script. // Allow time for EventBridge to become ready. EventBridge.scriptEventReceived.connect(onScriptEventReceived); EventBridge.emitWebEvent(JSON.stringify({ type: EVENT_BRIDGE_OPEN_MESSAGE })); }, EVENTBRIDGE_SETUP_DELAY); } // Main // ///////////////////////////////////////////////////////////////////////// onLoad(); }());