Borealis integration

.env.example

@@ -20,6 +20,9 @@ NUXT_PORT=3000
 VIDEO_BITRATE=1200
 AUDIO_BITRATE=128
 
+# Optional: link to local Borealis repository for @cryb/borealis development. Not recommended—disabled in production
+# BOREALIS_REPOSITORY=
+
 # Optional: Branding
 # BRAND_NAME=
 # BRAND_LANDING_VIDEO_ID=

.eslintrc.json

@@ -15,6 +15,7 @@
     "parser": "babel-eslint"
   },
   "rules": {
+
     "curly": ["error", "multi"],
     "linebreak-style": ["error", "unix"],
     "no-cond-assign": "error",
@@ -24,8 +25,16 @@
     }],
     "semi": "off",
     "vue/html-indent": ["warn", 4],
-    "vue/max-attributes-per-line": ["warn", {
-      "singleline": 2
-    }]
+    "vue/max-attributes-per-line": ["off"],
+	"vue/html-self-closing": ["off", {
+		"html": {
+			"void": "never",
+			"normal": "always",
+			"component": "always"
+		  },
+		  "svg": "always",
+		  "math": "always"
+	}],
+	"vue/html-quotes": ["off", "double"]
   }
 }

brand/pages.js

@@ -0,0 +1,18 @@
+export default [
+	{
+		name: 'Terms of Service',
+		link: 'https://www.notion.so/cryb/Terms-of-Service-513af510c55140c1adef76b7c06eb595'
+	},
+	{
+		name: 'Privacy Policy',
+		link: 'https://www.notion.so/cryb/Privacy-Policy-9580cfd1c52340ddad17f9d28b41012b'
+	},
+	{
+		name: 'Community Guidelines',
+		link: 'https://www.notion.so/cryb/Community-Guidelines-758b0b8e89eb4854a925b6f1c6730738'
+	},
+	{
+		name: 'Support',
+		link: 'https://www.notion.so/cryb/Support-ed7db95eb31c4f2d8b4a290988c67b97'
+	}
+]

components/Button/index.vue

@@ -1,31 +1,23 @@
 <template>
-    <a class="button-wrapper" :href="href">
-        <div class="button" :class="{ 'discord': type === 'discord', disabled, loading }">
-            <img
-                v-if="icon"
-                :src="icon"
-                class="button-icon"
-            >
-            <img
-                v-if="icon && hover"
-                :src="hover"
-                class="button-icon-hover"
-            >
-            <p class="button-content"><slot /></p>
-        </div>
+    <a class="is-wrapper" :href=href>
+        <button class="button" :class="{ 'has-theme': theme, 'is-discord-theme': theme === 'discord', 'has-icon': icon, 'is-loading': loading, 'is-disabled': disabled }">
+            <img v-if=icon class="icon" :src=icon />
+            <img v-if="icon && hoverIcon" class="icon is-hover" :src=hoverIcon />
+            <slot />
+        </button>
     </a>
 </template>
 <script>
     export default {
         props: [
-            'type',
             'href',
             'icon',
-            'hover',
+			'hoverIcon',
+
+			'theme',
 
             'loading',
             'disabled'
         ]
     }
 </script>
-<style src="~/static/css/components/button.css" scoped></style>

components/Chat/GroupedMessage.vue → components/Chat/GroupedChatMessage.vue

@@ -1,29 +1,13 @@
 <template>
-    <div
-        v-if="author"
-        class="grouped-chat-wrapper"
-        @mouseover="hover = true"
-        @mouseleave="hover = false"
-    >
-        <img
-            v-if="userIcon"
-            :src="userIcon"
-            class="chat-author-avatar"
-            :class="{ 'has-controller': hasController }"
-        >
-        <div class="grouped-chat-messages-content">
+    <div v-if=author class="grouped-chat-messages" @mouseover="hover = true" @mouseleave="hover = false">
+        <img v-if=userIcon :src=userIcon class="chat-messages-author-avatar" :class="{ 'has-controller': hasController }">
+        <div class="chat-messages">
             <div class="grouped-chat-messages-meta">
-                <p class="chat-author-name">
+                <p class="chat-messages-author-name">
                     {{ author.name }}
                 </p>
             </div>
-            <div class="grouped-chat-messages">
-                <Message
-                    v-for="message in messages"
-                    :key="message.id"
-                    :message="message"
-                />
-            </div>
+            <Message v-for="message in messages" :key=message.id :message=message />
         </div>
     </div>
 </template>
@@ -52,26 +36,26 @@
                 return this.users[this.group.author]
             },
             messages() {
-                if(!this.isAuthorSelf || !this.isLastGroup) return this.group.messages
+                if (!this.isAuthorSelf || !this.isLastGroup) return this.group.messages
 
                 return [...this.group.messages, ...this.sendingMessages]
             },
 
             userIcon() {
-                if(!this.author) return null
+                if (!this.author) return null
 
-                if(this.hover) return this.author.icon
+                if (this.hover) return this.author.icon
 
                 return this.author.icon.replace('.gif', '.png')
             },
 
             isAuthorSelf() {
-                if(!this.author) return
+                if (!this.author) return
 
                 return this.group.author === this.userId
             },
             hasController() {
-                if(!this.author) return false
+                if (!this.author) return false
 
                 return this.author.id === this.controllerId
             }

components/Chat/InputBar.vue

@@ -1,21 +1,7 @@
 <template>
     <div class="chat-bar-wrapper">
-        <input
-            ref="input"
-            v-model="content"
-            type="text"
-            class="chat-bar"
-            :class="{ 'disabled': sending }"
-            placeholder="Say something cool..."
-            @keyup="didPressKey"
-            @keyup.enter="sendMessage()"
-        >
-        <div
-            class="send-button"
-            :class="{ 'is-enabled': canSendMessage, loading: sending, disabled: sending }"
-            title="Send Message"
-            @click="sendMessage()"
-        >
+        <input ref="input" v-model=content type="text" class="chat-bar" :class="{ 'disabled': sending }" placeholder="Say something cool..." @keyup=didPressKey @keyup.enter=sendMessage() />
+        <div class="send-button" :class="{ 'is-loading': sending, disabled: sending || !canSendMessage }" title="Send Message" @click=sendMessage()>
             <img src="/icons/airplane.svg" class="send-button-icon">
         </div>
     </div>
@@ -41,9 +27,9 @@
         },
         methods: {
             async sendMessage() {
-                if(this.sending) return
-                if(this.content.length === 0) return
-                if(this.content.length > 255) return alert('This message is longer than 255 characters, please shorten it before trying again.')
+                if (this.sending) return
+                if (this.content.length === 0) return
+                if (this.content.length > 255) return alert('This message is longer than 255 characters, please shorten it before trying again.')
 
                 const content = sanitizeHtml(this.content, { allowedTags: [], allowedAttributes: {} })
 
@@ -55,7 +41,7 @@
 
                 this.$store.commit('pushSendingMessage', { content })
 
-                if(content.trim().toLowerCase() === 'something cool')
+                if (content.trim().toLowerCase() === 'something cool')
                     alert('You are not very funny. At all.')
 
                 try {
@@ -67,10 +53,10 @@
                 }
             },
             didPressKey(e) {
-                if(e.keyCode === 8) return
-                if(this.content.length === 0) return
+                if (e.keyCode === 8) return
+                if (this.content.length === 0) return
 
-                if(this.typingTimer)
+                if (this.typingTimer)
                     clearInterval(this.typingTimer)
                 else
                     this.$store.commit('setTypingStatus', true)
@@ -80,12 +66,11 @@
             didEndTyping(broadcast) {
                 this.$store.commit('setTypingStatus', false)
 
-                if(this.typingTimer) {
+                if (this.typingTimer) {
                     clearInterval(this.typingTimer)
                     this.typingTimer = null
                 }
             }
         }
     }
 </script>
-<style src="~/static/css/room/chat-bar.css" scoped></style>

components/Chat/Message.vue

@@ -1,24 +1,9 @@
 <template>
-    <div
-        class="chat-message"
-        :class="{ 'is-loading': loading || isMessageSending }"
-    >
-        <p class="chat-message-content" v-html="getEmojifiedMessageContent" />
+    <div class="chat-message" :class="{ 'is-sending': loading || isMessageSending }">
+        <p class="chat-message-content" v-html=getEmojifiedMessageContent />
         <div v-if="!isMessageSending" class="chat-message-options">
-            <img
-                v-if="!isAuthorSelf"
-                class="chat-message-option chat-message-report"
-                src="/icons/message-exclaimation.svg"
-                title="Report message"
-                @click="report()"
-            >
-            <img
-                v-if="isAuthorSelf || isSelfRoomOwner"
-                class="chat-message-option chat-message-delete"
-                src="/icons/trash-full.svg"
-                title="Delete message"
-                @click="destroy()"
-            >
+            <img v-if=!isAuthorSelf class="chat-message-option chat-message-report" src="/icons/message-exclaimation.svg" title="Report message" @click=report()>
+            <img v-if="isAuthorSelf || isSelfRoomOwner" class="chat-message-option chat-message-delete" src="/icons/trash-full.svg" title="Delete message" @click=destroy()>
         </div>
     </div>
 </template>
@@ -44,7 +29,7 @@
                 return this.$parent.isAuthorSelf
             },
             isSelfRoomOwner() {
-                if(!this.room) return
+                if (!this.room) return
 
                 return this.userId === (typeof this.room.owner === 'string' ? this.room.owner : this.room.owner.id)
             },

components/Chat/TypingBar.vue

@@ -1,5 +1,5 @@
 <template>
-    <p v-if="areUsersTyping" class="chat-typing-bar">
+    <p v-if=areUsersTyping class="chat-typing-bar">
         {{ typingTooltip }}
     </p>
 </template>

components/Chat/index.vue

@@ -1,20 +1,10 @@
 <template>
     <div class="chat">
-        <p v-if="!messages || messages.length === 0" class="chat-no-messages-warn">
+        <p v-if="!messages || messages.length === 0" class="chat-no-messages">
             Nobody said nothing. Maybe say something?
         </p>
-        <div
-            v-else-if="messages"
-            ref="messagesView"
-            class="chat-messages"
-            :class="{ 'users-are-typing': typingUsers.length > 0 }"
-        >
-            <GroupedChatMessage
-                v-for="(group, i) in messages"
-                :key="group.id"
-                :group="group"
-                :isLastGroup="i === messages.length - 1"
-            />
+        <div v-else-if=messages ref="messagesView" class="grouped-chat-messages-wrapper" :class="{ 'users-are-typing': typingUsers.length > 0 }">
+            <GroupedChatMessage v-for="(group, i) in messages" :key=group.id :group=group :is-last-group="i === messages.length - 1" />
         </div>
         <ChatTypingBar />
         <ChatInput />
@@ -25,7 +15,7 @@
 
     import ChatInput from '~/components/Chat/InputBar'
     import ChatTypingBar from '~/components/Chat/TypingBar'
-    import GroupedChatMessage from '~/components/Chat/GroupedMessage'
+    import GroupedChatMessage from '~/components/Chat/GroupedChatMessage'
 
     export default {
         components: {
@@ -40,20 +30,17 @@
             this.$nextTick(this.updateMessageView)
 
             this.$store.subscribe(({ type }, state) => {
-                if(type === 'pushMessage' || type === 'pushSendingMessage')
+                if (type === 'pushMessage' || type === 'pushSendingMessage')
                     this.$nextTick(this.updateMessageView)
             })
         },
         methods: {
             updateMessageView() {
                 const { messagesView } = this.$refs
-                if(!messagesView) return
+                if (!messagesView) return
 
                 messagesView.scrollTop = messagesView.scrollHeight
             }
         }
     }
 </script>
-<style src="~/static/css/room/chat.css">
-/* Manage scoping properly */
-</style>

components/Footer/index.vue

@@ -0,0 +1,23 @@
+<template>
+    <div class="footer">
+        <p class="footer">
+            &copy; {{ new Date().getFullYear() }} {{ brand.name }}
+            <span v-for="page in pages" :key=page.name>
+                &mdash; <a :href=page.link target="_blank">{{ page.name }}</a>
+            </span>
+        </p>
+    </div>
+</template>
+<script>
+	import brand from '~/brand/config'
+	import pages from '~/brand/pages'
+
+	export default {
+		data() {
+			return {
+				brand,
+				pages
+			}
+		}
+	}
+</script>

components/Form/index.vue

@@ -3,4 +3,3 @@
         <slot />
     </div>
 </template>
-<style src="~/static/css/components/form.css" scoped></style>