Added vue and loaders

client/package.json

@@ -22,10 +22,14 @@
     "babel-preset-react": "^6.24.1",
     "babel-loader": "^7.1.2",
     "moment": "^2.20.1",
-    "jquery": "^3.2.1"
+    "jquery": "^3.2.1",
+    "vue": "^2.5.13",
+    "vue-loader": "^13.7.0",
+    "vue-template-compiler": "^2.5.13",
+    "css-loader": "^0.28.9"
   },
   "scripts": {
     "build": "webpack --progress --colors",
     "watch": "webpack --progress --colors --watch"
-  } 
-}
+  }
+}

client/src/index.js

@@ -19,8 +19,7 @@ class BetterDiscord {
         window.bdUtils = Utils;
         window.wpm = WebpackModules;
         Events.on('global-ready', e => {
-            const { UI } = require('./modules/ui/ui.jsx');
-            console.log(UI);
+            const { UI } = require('./modules/ui/vueui.js');
             this.ui = new UI();
         });
         // this.UI = new UI();

client/src/modules/ui/components/bdbutton.vue

@@ -0,0 +1,27 @@
+<template>
+    <div class="bd-settings-button">
+
+    </div>
+</template>
+
+<script>
+    export default {
+        
+    }
+</script>
+
+<style>
+    .bd-settings-button {
+        position: absolute;
+        top: 22px;
+        width: 50px;
+        height: 50px;
+        left: 0;
+        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAwMCAyMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAwIDIwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMzRTgyRTUiIGQ9Ik0xNDAyLjIsNjMxLjdjLTkuNy0zNTMuNC0yODYuMi00OTYtNjQyLjYtNDk2SDY4LjR2NzE0LjFsNDQyLDM5OFY0OTAuN2gyNTdjMjc0LjUsMCwyNzQuNSwzNDQuOSwwLDM0NC45SDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNkMxMzU3LjcsOTE1LjgsMTQwMi4yLDc5NC4zLDE0MDIuMiw2MzEuN3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTI2Mi41LDEzNS4yTDEyNjIuNSwxMzUuMmwtNzYuOCwwYzI2LjYsMTMuMyw1MS43LDI4LjEsNzUsNDQuM2M3MC43LDQ5LjEsMTI2LjEsMTExLjUsMTY0LjYsMTg1LjNjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNmMtMzguNSw3My44LTkzLjgsMTM2LjItMTY0LjYsMTg1LjNjLTIyLjYsMTUuNy00Ni45LDMwLjEtNzIuNiw0My4xaDcyLjVjMzQ2LjIsMS45LDY3MS0xNzEuMiw2NzEtNTY3LjlWNzE2LjdDMTkzMy41LDMxMi4yLDE2MDguNywxMzUuMiwxMjYyLjUsMTM1LjJ6Ii8+PC9nPjwvc3ZnPg==);
+        background-size: 100% 100%;
+        cursor: pointer;
+        filter: grayscale(100%);
+        opacity: .5;
+        transition: all .4s ease-in-out;
+    }
+</style>

client/src/modules/ui/vueui.js

@@ -0,0 +1,33 @@
+/**
+ * BetterDiscord Client UI Module
+ * Copyright (c) 2015-present JsSucks - https://github.com/JsSucks
+ * All rights reserved.
+ * https://github.com/JsSucks - https://betterdiscord.net
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree. 
+*/
+
+const $ = require('jquery');
+const Vue = require('vue');
+
+const BdButton = (require('./components/bdbutton.vue')).default;
+class UI {
+
+    constructor() {
+        $('body').append($('<div/>', {
+            class: 'bd-settingsbutton',
+            id: 'bd-settingsbutton'
+        }));
+
+         this.vueInstance = new Vue.default({
+             el: '#bd-settingsbutton',
+             template: '<BdButton/>',
+             components: { BdButton }
+         });
+    }
+
+}
+
+
+module.exports = { UI }

client/webpack.config.js

@@ -11,6 +11,12 @@ const jsLoader = {
     }
 }
 
+const vueLoader = {
+    test: /\.(vue)$/,
+    exclude: /node_modules/,
+    loader: 'vue-loader'
+}
+
 module.exports = {
     entry: './src/index.js',
     output: {
@@ -18,10 +24,15 @@ module.exports = {
         filename: 'betterdiscord.client.js'
     },
     module: {
-        loaders: [jsLoader]
+        loaders: [jsLoader, vueLoader]
     },
     externals: {
         'electron': 'window.require("electron")'
+    },
+    resolve: {
+        alias: {
+            vue$: path.resolve('node_modules', 'vue', 'dist', 'vue.esm.js')
+        }
     }
    /* resolve: {
         alias: {