Add basic Vue.js example

.gitignore

@@ -0,0 +1,8 @@
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -13,8 +13,9 @@ This repository contains two variants of the sample app:
 
 * native - pure js version without any external js framework.
 * ts - typeScript version of the app, that uses external packages,etc.
+* vue - Vue.js version of the app, that uses external packages and custom vue-components, etc.
 
-In the future we will add more variants like React, Vue, etc.
+In the future we will add more variants like React, etc.
 
 ## How to load the app
 

vue/.gitignore

@@ -0,0 +1,24 @@
+.DS_Store
+node_modules
+dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Overwolf packages
+*.opk

vue/README.md

@@ -0,0 +1,95 @@
+# Sample - Vue.js
+Example-Vue.js is an example app, meant to be used as a reference for developers who are new to Overwolf.
+The app is meant to demonstrate some basic points and flows that are relevant when developing Overwolf apps:
+
+- Auto-launch when a game starts.
+- Register to the overwolf.games.events API and receive real time events from the game.
+- Define a custom hotkey to be used in-game.
+- Communicate between the app windows according to our best practices.
+
+
+## Setting up
+In order to run the app, you must first complete several steps:
+1. Download and install [NodeJS](https://nodejs.org/).
+After installing, run the following commands in a terminal of your choice:
+```
+node -v
+npm -v
+yarn -v
+```
+If they run successfully, proceed to the next steps.
+
+2. Download and install the [Overwolf desktop client](https://download.overwolf.com/install/Download).
+
+3. Download the repository as a zip file and extract it.
+
+4. In your terminal, run the following commands:
+```
+cd <insert path to your extracted 'vue.js' folder here>
+yarn install
+yarn build
+```
+
+5. Open the Overwolf desktop client settings (by right-clicking the client and selecting
+"Support" or by clicking on the wrench icon in the dock and going to the "Support" tab).
+
+6. Click on "Development options".
+
+7. In the opened window, click on "Load unpacked extension" and select the `vue/dist/` folder.
+This will add the app to your dock.
+
+8. Click on the app's icon in your dock.
+
+## Building an .opk for distribution
+When you run run ```yarn build``` in your terminal, an .opk is created in releases/ directory
+
+## Changing the version number quickly
+We have included a webpack plugin that can change the .opk version quickly with just a command line argument. Simply add ```--env setVersion=1.0.1``` to your build command.
+Example:
+```
+yarn build --env setVersion=1.0.1
+```
+
+This will change the app version both in package.json and app's manifest.json
+
+## What will you find inside?
+
+### public/
+All of the static resources used by the app, like icons and the index.html.
+
+##### public/manifest.json
+This file defines all of the aspects of the app.
+Read all about Overwolf's manifest.json mechanism [here](https://overwolf.github.io/docs/api/manifest-json#welcome-to-the-manifestjson-file).
+In our manifest.json file, we have [```{ "start_window": "background" }```](https://overwolf.github.io/docs/api/manifest-json#start_window) defined.
+This sets our [background](###windows/background) window as the app's starting point.
+All of this app's windows' properties can be found under the [```windows```](https://overwolf.github.io/docs/api/manifest-json#window-data) object.
+Please refer to the [dev site](https://overwolf.github.io/docs/api/manifest-json#welcome-to-the-manifestjson-file) to learn more about each property.
+
+#### src/
+Source Vue-components, custom JS plugins and assets.
+
+##### src/background/
+This directory contains files of the background window, which serves as the application's starting point and window orchestrator.
+The window's ```run()``` method detects whether a Fortnite game is currently running, decides which window to launch accordingly, and listens for changes.
+
+The background window has no visual representation, which can be gleaned from the empty background.html file or from the
+[```{ is_background_page: true }```](https://overwolf.github.io/docs/api/manifest-json#is_background_page)
+property the background window has in our manifest.json.
+
+##### src/in_game/
+The in_game window listens to [Info Events](https://overwolf.github.io/docs/api/overwolf-games-events#oninfoupdates2) and
+[Game Events](https://overwolf.github.io/docs/api/overwolf-games-events#onnewevents) emitted by the game and
+displays an ad. Furthermore, it defines the behavior for the show/hide hotkey.
+Read all about hotkeys [here](https://overwolf.github.io/docs/topics/hotkeys-best-practices).
+
+##### src/desktop/
+This window serves a purely visual purpose and has no special logic.
+
+##### src/plugins/
+This directory contains .js files to include into the Vue.js app.
+
+
+## Notes
+Editing the author or app name in the manifest will prevent loading the app as an unpacked app.
+
+For any further information or questions, contact developers@overwolf.com

vue/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@vue/cli-plugin-babel/preset"]
+};

vue/makeOpk.js

@@ -0,0 +1,50 @@
+require("semver");
+const path = require("path"),
+  fs = require("fs"),
+  zip = require("zip-a-folder");
+
+function readFile(filePath) {
+  return new Promise(resolve => {
+    fs.readFile(filePath, (err, response) => {
+      try {
+        if (err) resolve(null);
+        else resolve(JSON.parse(response));
+      } catch (e) {
+        resolve(null);
+      }
+    });
+  });
+}
+
+function deleteFile(filePath) {
+  return new Promise(resolve => {
+    fs.unlink(filePath, resolve);
+  });
+}
+
+async function makeOPK(suffix = "") {
+  const packagePath = path.resolve(__dirname, "./package.json"),
+    manifestPath = path.resolve(__dirname, "./public/manifest.json"),
+    dist = path.join(__dirname, "dist/");
+
+  const [pkg, manifest] = await Promise.all([
+    readFile(packagePath),
+    readFile(manifestPath)
+  ]);
+
+  if (!pkg) throw "could not read package.json";
+
+  if (!manifest) throw "could not read manifest.json";
+
+  const version = pkg.version,
+    name = manifest.meta.name,
+    opkPath = path.join(
+      __dirname,
+      `releases/${name}-${version}${suffix ? `.${suffix}` : ""}.opk`
+    );
+
+  await deleteFile(opkPath);
+  await zip.zip(dist, opkPath);
+}
+
+makeOPK();

vue/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "example-vue",
+  "version": "1.0.0",
+  "description": "",
+  "scripts": {
+    "serve": "vue-cli-service serve --mode=development",
+    "build": "vue-cli-service build --mode=development && node makeOpk.js",
+    "lint": "vue-cli-service lint",
+    "dev": "vue-cli-service build --watch --mode=development"
+  },
+  "dependencies": {
+    "vue": "^2.6.14",
+    "vue-class-component": "^7.2.3",
+    "vue-property-decorator": "^9.1.2",
+    "vue-router": "^3.5.2",
+    "vue-virtual-scroll-list": "^2.3.2",
+    "vuetify": "^2.5.8",
+    "vuetify-loader": "^1.7.2",
+    "vuex": "^3.6.2",
+    "vuex-persist": "^3.1.3"
+  },
+  "devDependencies": {
+    "@overwolf/overwolf-api-ts": "^1.3.0",
+    "@overwolf/types": "^3.6.0",
+    "@typescript-eslint/eslint-plugin": "^4.18.0",
+    "@typescript-eslint/parser": "^4.18.0",
+    "@vue/cli-plugin-babel": "^4.5.13",
+    "@vue/cli-plugin-eslint": "~4.5.13",
+    "@vue/cli-plugin-router": "^4.5.12",
+    "@vue/cli-plugin-typescript": "~4.5.0",
+    "@vue/cli-plugin-vuex": "^4.5.12",
+    "@vue/cli-service": "~4.5.13",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/eslint-config-typescript": "^7.0.0",
+    "babel-eslint": "^10.1.0",
+    "deepmerge": "^4.2.2",
+    "eslint": "^6.7.2",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-vue": "^6.2.2",
+    "prettier": "^1.19.1",
+    "sass": "~1.32",
+    "sass-loader": "^8.0.2",
+    "semver": "^7.3.4",
+    "typescript": "~4.1.5",
+    "vue-cli-plugin-axios": "0.0.4",
+    "vue-cli-plugin-vuetify": "^2.0.9",
+    "vue-template-compiler": "^2.6.14",
+    "zip-a-folder": "^1.1.0"
+  },
+  "eslintConfig": {
+    "globals": {
+      "overwolf": "readonly"
+    },
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended",
+      "@vue/prettier",
+      "@vue/typescript"
+    ],
+    "parserOptions": {
+      "parser": "@typescript-eslint/parser"
+    },
+    "rules": {}
+  },
+  "license": "ISC",
+  "repository": "https://github.com/overwolf/sample-app.git"
+}

vue/public/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <style>
+        ::-webkit-scrollbar {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+<noscript>
+    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+</noscript>
+<div id="app"></div>
+<!-- built files will be auto injected -->
+</body>
+</html>

vue/public/manifest.json

@@ -0,0 +1,104 @@
+{
+  "manifest_version": 1,
+  "type": "WebApp",
+  "meta": {
+    "name": "Sample App",
+    "author": "Overwolf",
+    "version": "3.0.2",
+    "minimum-overwolf-version": "0.160.0",
+    "description": "An example app for developers new to Overwolf",
+    "dock_button_title": "Sample - Vue.js",
+    "icon": "icons/IconMouseOver.png",
+    "icon_gray": "icons/IconMouseNormal.png",
+    "launcher_icon": "icons/DesktopIcon.ico",
+    "window_icon": "icons/TaskbarIcon.png"
+  },
+  "permissions": [
+    "Hotkeys",
+    "GameInfo"
+  ],
+  "data": {
+    "start_window": "background",
+    "windows": {
+      "background": {
+        "file": "background.html",
+        "is_background_page": true
+      },
+      "desktop": {
+        "file": "desktop.html",
+        "desktop_only": true,
+        "native_window": true,
+        "resizable": true,
+        "transparent": true,
+        "override_on_update": true,
+        "size": {
+          "width": 1212,
+          "height": 699
+        }
+      },
+      "in_game": {
+        "file": "in_game.html",
+        "in_game_only": true,
+        "focus_game_takeover": "ReleaseOnHidden",
+        "focus_game_takeover_release_hotkey": "showhide",
+        "resizable": false,
+        "transparent": true,
+        "override_on_update": true,
+        "size": {
+          "width": 1212,
+          "height": 699
+        }
+      }
+    },
+    "game_targeting": {
+      "type": "dedicated",
+      "game_ids": [
+        21216
+      ]
+    },
+    "game_events": [
+      21216
+    ],
+    "launch_events": [
+      {
+        "event": "GameLaunch",
+        "event_data": {
+          "game_ids": [
+            21216
+          ]
+        },
+        "start_minimized": false
+      }
+    ],
+    "hotkeys": {
+      "showhide": {
+        "title": "Show/Hide In-Game Window",
+        "action-type": "toggle",
+        "default": "Ctrl+F"
+      }
+    },
+    "protocol_override_domains": {
+      "googlesyndication": "http"
+    },
+    "externally_connectable": {
+      "matches": [
+        "http://*.overwolf.com",
+        "https://*.overwolf.com",
+        "https://overwolf.github.io",
+        "https://*.google-analytics.com",
+        "http://*.google-analytics.com",
+        "https://www.googleapis.com",
+        "https://discord.gg/v5cfBTq",
+        "https://twitter.com/",
+        "https://www.facebook.com",
+        "https://www.reddit.com"
+      ]
+    },
+    "force_browser": "user",
+    "developer": {
+      "enable_auto_refresh": true,
+      "reload_delay": 1000,
+      "filter": "*.*"
+    }
+  }
+}