Major changes

.gitignore

@@ -2,6 +2,7 @@
 node_modules
 /dist
 /build
+electron-builder.yml
 
 # local env files
 .env.local

package.json

@@ -1,73 +1,77 @@
 {
-  "name": "matixs-mod-installer-rn",
-  "version": "0.1.2",
-  "private": true,
-  "description": "Matix's Mod Installer is Matix's Mod Installer is the newly designed platform to install your Minecraft modpacks!",
-  "author": {
-    "name": "Max Heilmann",
-    "email": "[email protected]",
-    "url": "https://matix-media.net"
-  },
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
-    "electron:build": "vue-cli-service electron:build",
-    "electron:serve": "vue-cli-service electron:serve",
-    "postinstall": "electron-builder install-app-deps",
-    "postuninstall": "electron-builder install-app-deps"
-  },
-  "main": "background.js",
-  "dependencies": {
-    "@wuild/vue-titlebar": "^1.0.1",
-    "axios": "^0.21.1",
-    "core-js": "^3.6.5",
-    "electron-updater": "^4.3.8",
-    "minecraft-launcher-core": "^3.16.2",
-    "uuid": "^8.3.2",
-    "vue": "^2.6.11",
-    "vue-luxon": "^0.10.0",
-    "vue-markdown-render": "^1.1.1",
-    "vue-meta": "^2.4.0",
-    "vue-router": "^3.2.0"
-  },
-  "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^2.33.0",
-    "@typescript-eslint/parser": "^2.33.0",
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-router": "^4.5.12",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/eslint-config-typescript": "^5.0.2",
-    "babel-eslint": "^10.1.0",
-    "electron": "9.0.0",
-    "electron-devtools-installer": "^3.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^6.2.2",
-    "sass": "^1.32.5",
-    "sass-loader": "^10.1.1",
-    "typescript": "~4.1.5",
-    "vue-cli-plugin-electron-builder": "^2.0.0-rc.5",
-    "vue-template-compiler": "^2.6.11"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/Matix-Media/matixs-mod-installer-rn.git"
     },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended",
-      "@vue/typescript"
-    ],
-    "parserOptions": {
-      "parser": "@typescript-eslint/parser"
+    "name": "matixs-mod-installer-rn",
+    "version": "0.1.2",
+    "private": true,
+    "description": "Matix's Mod Installer is Matix's Mod Installer is the newly designed platform to install your Minecraft modpacks!",
+    "author": {
+        "name": "Max Heilmann",
+        "email": "[email protected]",
+        "url": "https://matix-media.net"
     },
-    "rules": {}
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ]
+    "scripts": {
+        "serve": "vue-cli-service serve",
+        "build": "vue-cli-service build",
+        "lint": "vue-cli-service lint",
+        "electron:build": "vue-cli-service electron:build",
+        "electron:serve": "vue-cli-service electron:serve",
+        "postinstall": "electron-builder install-app-deps",
+        "postuninstall": "electron-builder install-app-deps"
+    },
+    "main": "background.js",
+    "dependencies": {
+        "@wuild/vue-titlebar": "^1.0.1",
+        "axios": "^0.21.1",
+        "core-js": "^3.11.1",
+        "electron-updater": "^4.3.8",
+        "minecraft-launcher-core": "^3.16.2",
+        "uuid": "^8.3.2",
+        "vue": "^2.6.12",
+        "vue-luxon": "^0.10.0",
+        "vue-markdown-render": "^1.1.1",
+        "vue-meta": "^2.4.0",
+        "vue-router": "^3.5.1"
+    },
+    "devDependencies": {
+        "@typescript-eslint/eslint-plugin": "^4.22.0",
+        "@typescript-eslint/parser": "^4.22.0",
+        "@vue/cli-plugin-babel": "~4.5.12",
+        "@vue/cli-plugin-eslint": "~4.5.12",
+        "@vue/cli-plugin-router": "^4.5.12",
+        "@vue/cli-service": "~4.5.12",
+        "@vue/eslint-config-typescript": "^7.0.0",
+        "babel-eslint": "^10.1.0",
+        "electron": "12.0.6",
+        "electron-devtools-installer": "^3.2.0",
+        "eslint": "^7.25.0",
+        "eslint-plugin-vue": "^7.9.0",
+        "sass": "^1.32.12",
+        "sass-loader": "^11.0.1",
+        "typescript": "~4.2.4",
+        "vue-cli-plugin-electron-builder": "^2.0.0-rc.6",
+        "vue-template-compiler": "^2.6.12"
+    },
+    "eslintConfig": {
+        "root": true,
+        "env": {
+            "node": true
+        },
+        "extends": [
+            "plugin:vue/essential",
+            "eslint:recommended",
+            "@vue/typescript"
+        ],
+        "parserOptions": {
+            "parser": "@typescript-eslint/parser"
+        },
+        "rules": {}
+    },
+    "browserslist": [
+        "> 1%",
+        "last 2 versions",
+        "not dead"
+    ]
 }

src/background.js

@@ -1,6 +1,7 @@
 "use strict";
 
 import { app, protocol, BrowserWindow, ipcMain } from "electron";
+import { autoUpdater } from "electron-updater";
 import { createProtocol } from "vue-cli-plugin-electron-builder/lib";
 import installExtension, { VUEJS_DEVTOOLS } from "electron-devtools-installer";
 const isDevelopment = process.env.NODE_ENV !== "production";
@@ -10,9 +11,11 @@ protocol.registerSchemesAsPrivileged([
     { scheme: "app", privileges: { secure: true, standard: true } },
 ]);
 
+var win;
+
 async function createWindow() {
     // Create the browser window.
-    const win = new BrowserWindow({
+    win = new BrowserWindow({
         width: 1420,
         height: 820,
         minWidth: 1040,
@@ -23,6 +26,7 @@ async function createWindow() {
             nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
         },
     });
+
     win.setMenuBarVisibility(false);
     win.setMenu(null);
     if (process.env.WEBPACK_DEV_SERVER_URL) {
@@ -66,10 +70,6 @@ app.on("ready", async () => {
     createWindow();
 });
 
-ipcMain.on("app_version", (event) => {
-    event.sender.send("app_version", { version: app.getVersion() });
-});
-
 // Exit cleanly on request from parent process in development mode.
 if (isDevelopment) {
     if (process.platform === "win32") {
@@ -84,3 +84,38 @@ if (isDevelopment) {
         });
     }
 }
+
+// IPC Remote events
+
+ipcMain.on("app_version", (event) => {
+    event.sender.send("app_version", { version: app.getVersion() });
+});
+
+ipcMain.on("check_updates", (event) => {
+    console.log("Checking for updates...");
+    autoUpdater.checkForUpdatesAndNotify();
+    if (isDevelopment) event.sender.send("update_info", { updateAvailable: false });
+});
+
+ipcMain.on("restart_app", () => {
+    autoUpdater.quitAndInstall();
+});
+
+autoUpdater.on("update-available", () => {
+    console.log("update available");
+    win.webContents.send("update_info", { updateAvailable: true });
+});
+
+autoUpdater.on("update-not-available", () => {
+    console.log("no update available");
+    win.webContents.send("update_info", { updateAvailable: false });
+});
+
+autoUpdater.on("update-downloaded", () => {
+    win.webContents.send("update_downloaded");
+});
+
+autoUpdater.on("error", (error) => {
+    win.webContents.send("update_info", { updateAvailable: false });
+    console.error("Error while updating: " + error);
+});

src/views/Home.vue

@@ -1,18 +1,75 @@
 <template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
-  </div>
-</template>
+    <div class="home">
+        <div class="news">
+            <h3>News</h3>
+            <div class="content">
+                <NewsSmall icon="https://imgur.com/eiuJs3z.png" modpack="Survival Default Kit" title="Major Update to 1.2.1 yeah i tried!" content="Finally! We are updating to 1.2.1. With this update you get the updated mods of Xaero's Minimap and much more stuff ready for you to explore. her is some random teyt to fill the space that is currently empty and to some better designing." date="2021-01-25T14:48Z" modpackTarget="/library/0" newsId="1" />
+
+                <NewsSmall icon="https://imgur.com/u1B1co3.png" modpack="OptiFine for Forge 1.16.4" title="Updated OptiFine" content="We updated OptiFine to HD U G6 for Minecraft 1.16.4. This fixed a lot of old bugs from the recent version HD U G5." date="2021-01-07T14:48Z" modpackTarget="/library/1" newsId="0" />
+            </div>
+        </div>
+        <div class="lists">
+            <full-list title="RECENTLY PLAYED">
+                <div class="list-recently-played list">
+                    <modpack-small image="https://imgur.com/eiuJs3z.png" target="/library/0" />
+                    <modpack-small image="https://imgur.com/u1B1co3.png" target="/library/1" />
+                </div>
+            </full-list>
 
-<script lang="ts">
-import Vue from 'vue';
-import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
+            <full-list title="YOUR MODPACKS">
+                <div class="list-your-modpacks list">
+                    <modpack-small image="https://imgur.com/u1B1co3.png" target="/library/1" />
+                    <modpack-small image="https://imgur.com/eiuJs3z.png" target="/library/0" />
+                </div>
+            </full-list>
+        </div>
+    </div>
+</template>
 
-export default Vue.extend({
-  name: 'Home',
-  components: {
-    HelloWorld,
-  },
-});
+<script>
+import NewsSmall from '../components/NewsSmall.vue';
+import FullList from '../components/FullList.vue';
+import ModpackSmall from '../components/ModpackSmall.vue';
+export default {
+    name: "Home",
+    components: {
+        NewsSmall,
+        FullList,
+        ModpackSmall
+    }
+}
 </script>
+
+<style scoped>
+div.home {
+    padding-bottom: 5rem;
+}
+div.news {
+    margin: 0 3rem 0 2rem;
+    background-color: rgba(255, 255, 255, 0.19);
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    backdrop-filter: blur(15px);
+    padding: .5rem;
+    box-shadow: 1px 4px 9px -1px rgba(0,0,0,0.05);
+    overflow: hidden;
+}
+div.news h3 {
+    margin-bottom: .3rem;
+}
+div.news div.content,
+div.list {
+    display: flex;
+    align-content: top;
+    flex-direction: row;
+}
+div.news div.content div.news-small {
+    margin-right: 1.5rem;
+}
+div.modpack-small {
+    margin-right: 1rem;
+}
+div.lists div.full-list {
+    margin: 1.5rem 3rem 0 2rem;
+}
+</style>