initial commit

ilyagru · Apr 12, 2017 · ed50ca4 · ed50ca4
commit ed50ca4
Show file tree

Hide file tree

Showing 54 changed files with 2,311 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,19 @@
+{
+  "comments": false,
+  "env": {
+    "testing-unit": {
+      "presets": ["es2015", "stage-0"],
+      "plugins": ["istanbul"]
+    },
+    "main": {
+      "presets": ["es2015", "stage-0"]
+    },
+    "renderer": {
+      "presets": [
+        ["es2015", { "modules": false }],
+        "stage-0"
+      ]
+    }
+  },
+  "plugins": ["transform-runtime"]
+}
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,5 @@
+app/node_modules/**
+app/dist/**
+test/unit/coverage/**
+test/unit/*.js
+test/e2e/*.js
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,26 @@
+module.exports = {
+    root: true,
+        parser: 'babel-eslint',
+        parserOptions: {
+            sourceType: 'module'
+        },
+    env: {
+        browser: true,
+        node: true
+    },
+    extends: 'standard',
+    plugins: [
+        'html'
+    ],
+    'rules': {
+        "semi": [2, "always"],
+        "indent": ["error", 4],
+        "space-before-function-paren": ["error", "never"],
+        // allow paren-less arrow functions
+        'arrow-parens': 0,
+        // allow async-await
+        'generator-star-spacing': 0,
+        // allow debugger during development
+        'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
+    }
+};
diff --git a/README.md b/README.md
@@ -0,0 +1,52 @@
+# snake-app
+
+A Desktop game built with [Electron-vue](https://github.com/SimulatedGREG/electron-vue) template.
+
+## Description
+
+A desktop game Space Snake.
+Built with [Electron](https://electron.atom.io/) and [Vue.js](https://vuejs.org/).
+State Management – [Vuex](https://github.com/vuejs/vuex).
+Routing – [Vue-router](https://github.com/vuejs/vue-router).
+Bundling – [Webpack](https://webpack.github.io/).
+Styles – [SASS](http://sass-lang.com/).
+Tests – [Karma](https://karma-runner.github.io/1.0/index.html) + [Mocha](https://mochajs.org/).
+
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:9080
+npm run dev
+
+# build electron app for production
+npm run build
+
+# lint all JS/Vue component files in `app/src`
+npm run lint
+
+# run webpack in production
+npm run pack
+```
+More information can be found [here](https://simulatedgreg.gitbooks.io/electron-vue/content/docs/npm_scripts.html).
+
+---
+
+This project was generated from [electron-vue](https://github.com/SimulatedGREG/electron-vue) using [vue-cli](https://github.com/vuejs/vue-cli). Documentation about this project can be found [here](https://simulatedgreg.gitbooks.io/electron-vue/content/index.html).
+
+
+TODO:
+
+- [x] Settings (speed(level))
+- [x] Leaderboards
+- [x] Save data
+- [x] Logo, icon
+- [x] Idea
+- [x] Styles, animation
+- [ ] Tests
+- [x] UI/UX
+- [x] Clean code
+- [ ] Downloadable bundle
diff --git a/app/dist/.gitkeep b/app/dist/.gitkeep
diff --git a/app/dist/imgs/Clone.png b/app/dist/imgs/Clone.png
diff --git a/app/dist/imgs/icon.png b/app/dist/imgs/icon.png
diff --git a/app/icons/icon.icns b/app/icons/icon.icns
diff --git a/app/icons/icon.ico b/app/icons/icon.ico
diff --git a/app/icons/icon.png b/app/icons/icon.png
diff --git a/app/index.ejs b/app/index.ejs
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>snake-app</title>
+        <% if (htmlWebpackPlugin.options.appModules) { %>
+            <!-- Add `app/node_modules` to global paths so `require` works properly in development -->
+            <script>
+                require('module').globalPaths.push('<%= htmlWebpackPlugin.options.appModules.replace(/\\/g, '\\\\') %>')
+            </script>
+        <% } %>
+    </head>
+    <body>
+        <div id="app"></div>
+        <!-- webpack builds are automatically injected -->
+    </body>
+</html>
diff --git a/app/package.json b/app/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "snake-app",
+  "version": "0.0.0",
+  "description": "An electron-vue project",
+  "main": "./dist/main.js",
+  "dependencies": {
+    "vue": "^2.1.10",
+    "vue-electron": "^1.0.6",
+    "vue-resource": "^1.0.3",
+    "vue-router": "^2.1.2",
+    "vuex": "^2.1.1"
+  },
+  "devDependencies": {},
+  "author": "Ilya Gruzhevski <>"
+}
diff --git a/app/src/main/index.dev.js b/app/src/main/index.dev.js
@@ -0,0 +1,32 @@
+/**
+ * This file is used specifically and only for development. It enables the use of ES6+
+ * features for the main process and installs `electron-debug` & `vue-devtools`. There
+ * shouldn't be any need to modify this file, but it can be used to extend your
+ * development environment.
+ */
+
+/* eslint-disable no-console */
+
+// Set babel `env` and install `babel-register`
+process.env.NODE_ENV = 'development';
+process.env.BABEL_ENV = 'main';
+
+require('babel-register')({
+    ignore: /node_modules/
+});
+
+// Install `electron-debug` with `devtron`
+require('electron-debug')({ showDevTools: true });
+
+// Install `vue-devtools`
+require('electron').app.on('ready', () => {
+    let installExtension = require('electron-devtools-installer');
+    installExtension.default(installExtension.VUEJS_DEVTOOLS)
+        .then(() => {})
+        .catch(err => {
+    console.log('Unable to install `vue-devtools`: \n', err);
+    });
+});
+
+// Require `main` process to boot app
+require('./index');
diff --git a/app/src/main/index.js b/app/src/main/index.js
@@ -0,0 +1,40 @@
+'use strict';
+
+import { app, BrowserWindow } from 'electron';
+
+let mainWindow;
+const winURL = process.env.NODE_ENV === 'development'
+    ? `http://localhost:${require('../../../config').port}`
+    : `file://${__dirname}/index.html`;
+
+function createWindow() {
+    // Initial window options
+    mainWindow = new BrowserWindow({
+        width: 800,
+        height: 700,
+        minWidth: 800,
+        minHeight: 700,
+        resizable: false
+        // fullscreenable: false
+    });
+
+    mainWindow.loadURL(winURL);
+
+    mainWindow.on('closed', () => {
+        mainWindow = null;
+    });
+}
+
+app.on('ready', createWindow);
+
+app.on('window-all-closed', () => {
+    if (process.platform !== 'darwin') {
+        app.quit();
+    }
+});
+
+app.on('activate', () => {
+    if (mainWindow === null) {
+        createWindow();
+    }
+});
diff --git a/app/src/renderer/App.vue b/app/src/renderer/App.vue
@@ -0,0 +1,86 @@
+<template>
+    <div id="#app">
+        <topbar></topbar>
+
+        <main>
+            <transition :name="transitionName" mode="out-in" appear>
+                <keep-alive>
+                    <router-view></router-view>
+                </keep-alive>
+            </transition>
+        </main>
+    </div>
+</template>
+
+<script>
+    import Topbar from './components/Topbar';
+    import store from './vuex/store';
+
+    export default {
+        store,
+
+        components: {
+            Topbar
+        },
+
+        computed: {
+            transitionName() {
+                return this.$route.path === '/' ? 'slide-right' : 'slide-left';
+            }
+        }
+    };
+</script>
+
+<style lang="scss">
+    main {
+        padding: 20px 20px 20px 20px;
+    }
+
+    // Animations
+
+    .fade-enter-active, .fade-leave-active {
+        transition: opacity .2s;
+    }
+    .fade-enter, .fade-leave-to {
+        opacity: 0;
+    }
+
+    .scale-enter-active {
+        animation: scale-in .3s;
+    }
+    .scale-leave-active {
+        animation: scale-out .3s;
+    }
+    @keyframes scale-in {
+        0% {
+            transform: scale(0);
+        }
+        100% {
+            transform: scale(1);
+        }
+    }
+    @keyframes scale-out {
+        0% {
+            transform: scale(1);
+        }
+        100% {
+            transform: scale(0);
+        }
+    }
+
+    .slide-left-enter-active {
+        transition: all .3s;
+    }
+    .slide-left-enter {
+        transform: translateX(50px);
+        opacity: 0;
+    }
+
+    .slide-right-enter-active {
+        transition: all .3s;
+    }
+    .slide-right-enter {
+        transform: translateX(-50px);
+        opacity: 0;
+    }
+</style>