basic vue-material setup

jenkins/deploy.sh

@@ -1,5 +1,6 @@
 #!/bin/bash
 
+
 export TTROOT="simon987"
 
 chmod 755 -R "${TTROOT}/webroot"

simon987/package.json

@@ -14,10 +14,13 @@
         "lodash": "^4.17.11",
         "pixi.js": "^4.8.7",
         "vue": "^2.5.2",
+        "vue-material": "^1.0.0-beta-10.2",
         "vue-router": "^3.0.1"
     },
     "devDependencies": {
         "autoprefixer": "^7.1.2",
+        "node-sass": "^4.12.0",
+        "sass-loader": "^7.1.0",
         "babel-core": "^6.22.1",
         "babel-helper-vue-jsx-merge-props": "^2.0.3",
         "babel-loader": "^7.1.1",
@@ -28,7 +31,7 @@
         "babel-preset-stage-2": "^6.22.0",
         "chalk": "^2.0.1",
         "copy-webpack-plugin": "^4.0.1",
-    "css-loader": "^0.28.0",
+        "css-loader": "^0.28.11",
         "extract-text-webpack-plugin": "^3.0.0",
         "file-loader": "^1.1.4",
         "friendly-errors-webpack-plugin": "^1.6.1",
@@ -46,7 +49,7 @@
         "uglifyjs-webpack-plugin": "^1.1.1",
         "url-loader": "^0.5.8",
         "vue-loader": "^13.3.0",
-    "vue-style-loader": "^3.0.1",
+        "vue-style-loader": "^3.1.2",
         "vue-template-compiler": "^2.5.2",
         "webpack": "^3.6.0",
         "webpack-bundle-analyzer": "^2.9.0",

simon987/src/App.vue

@@ -15,6 +15,7 @@ export default {
         margin: 0;
         padding: 0;
     }
+
     html {
         overflow-x: hidden;
         margin: 0;

simon987/src/Grid.js

@@ -1,16 +1,11 @@
-// import * as d3 from 'd3';
 import * as PIXI from 'pixi.js'
 import * as _ from 'lodash'
 
-function Grid(cellSize, tickLen) {
+function Grid(cellSize, tickLen, colScheme) {
 
-    // Light
+    this._c1 = colScheme.c1;
-    this.c1 = 0xf9989f;
+    this._c2 = colScheme.c2;
-    this.c2 = 0xfccb8f;
+    this._c3 = colScheme.c3;
-    this.c3 = 0xc5f8c8;
-    // this.c1 = 0x3a3b52;
-    // this.c2 = 0x33284b;
-    // this.c3 = 0x2c2332;
 
     this.seed = function () {
         this._cells = new Uint8Array(this._cellCount).map(() => {
@@ -28,10 +23,10 @@ function Grid(cellSize, tickLen) {
         this._pxWidth = window.innerWidth;
         this._pxHeight = window.innerHeight;
 
-        if (this.app) {
+        if (this._app) {
-            this.app.renderer.view.style.width = this._pxWidth + "px";
+            this._app.renderer.view.style.width = this._pxWidth + "px";
-            this.app.renderer.view.style.height = this._pxHeight + "px";
+            this._app.renderer.view.style.height = this._pxHeight + "px";
-            this.app.renderer.resize(window.innerWidth, window.innerHeight);
+            this._app.renderer.resize(window.innerWidth, window.innerHeight);
         }
 
         this._cellCountX = Math.ceil(this._pxWidth / cellSize);
@@ -40,15 +35,15 @@ function Grid(cellSize, tickLen) {
 
         this.seed();
 
-        this.xMap = _.range(0, this._cellCount).map(x => x % this._cellCountX);
+        this._xMap = _.range(0, this._cellCount).map(x => x % this._cellCountX);
-        this.xCoordsMap = this.xMap.map(x => x * cellSize);
+        this._xCoordsMap = this._xMap.map(x => x * cellSize);
-        this.yCoordsMap = _.range(0, this._cellCount)
+        this._yCoordsMap = _.range(0, this._cellCount)
             .map(y => Math.floor(y / this._cellCountX))
             .map(y => y * cellSize);
     };
 
-    this.g_TICK = tickLen;
+    this._tickLen = tickLen;
-    this.g_Time = 0;
+    this._tickTime = 0;
 
     this._cellSize = cellSize;
 
@@ -56,31 +51,33 @@ function Grid(cellSize, tickLen) {
 
         let elem = document.getElementById("grid");
 
-        this.app = new PIXI.Application({
+        this._app = new PIXI.Application({
             width: 0,
             height: 0,
             backgroundColor: 0xFFFFFF,
         });
 
-        elem.appendChild(this.app.view);
+        elem.appendChild(this._app.view);
 
         this._graphics = new PIXI.Graphics();
-        this.app.stage.addChild(this._graphics);
+        this._app.stage.addChild(this._graphics);
 
-        this.app.ticker.add(() => {
+        this._app.ticker.add(() => {
 
             // Limit to the frame rate
             let timeNow = (new Date()).getTime();
-            let timeDiff = timeNow - this.g_Time;
+            let timeDiff = timeNow - this._tickTime;
-            if (timeDiff < this.g_TICK) {
+            if (timeDiff < this._tickLen) {
                 return;
             }
-            this.g_Time = timeNow;
+            this._tickTime = timeNow;
 
             this.tick();
         });
 
         window.onresize = () => this.resize();
+        elem.onmousedown = () => this.resize();
+        setInterval(() => this.resize(), 20000);
     };
 
     this.paint = function () {
@@ -103,8 +100,8 @@ function Grid(cellSize, tickLen) {
 
                 cells[color].forEach(d => this._graphics
                     .drawRect(
-                        this.xCoordsMap[d],
+                        this._xCoordsMap[d],
-                        this.yCoordsMap[d],
+                        this._yCoordsMap[d],
                         this._cellSize,
                         this._cellSize
                     )
@@ -127,7 +124,7 @@ function Grid(cellSize, tickLen) {
 
         for (let i = 0; i < this._cellCount; i++) {
 
-            let x = this.xMap[i];
+            let x = this._xMap[i];
 
             if (i < xw) {
                 if (i === 0) {
@@ -207,32 +204,13 @@ function Grid(cellSize, tickLen) {
 
     this.getColor = (cell) => {
         if (this._cells[cell] === 2) {
-            return this.c1;
+            return this._c1;
         } else if (this._cells[cell] === 4) {
-            return this.c2;
+            return this._c2;
         }
-        return this.c3;
+        return this._c3;
     };
 
-    // this.computeState_ = (state, neighbors) => {
-    //
-    //     let liveNeighbors = 0;
-    //     for (let i = 0; i < 8; i++) {
-    //         if (neighbors[i] === 1) {
-    //             liveNeighbors++;
-    //         }
-    //     }
-    //
-    //     if (state === 1) {
-    //         if (liveNeighbors < 2 || liveNeighbors > 3) {
-    //             return 0;
-    //         }
-    //     } else if (liveNeighbors === 3) {
-    //         return 1;
-    //     }
-    //     return state;
-    // };
-
     this.computeState = (state, neighbors) => {
 
         let predators = 0;

simon987/src/components/Grid.vue

@@ -0,0 +1,50 @@
+<template>
+    <div>
+        <div id="grid"></div>
+        <Jumbotron />
+    </div>
+</template>
+
+<script>
+import Grid from '../Grid';
+import Jumbotron from "./Jumbotron";
+
+let lightTheme = {
+    c1: 0xf9989f,
+    c2: 0xfccb8f,
+    c3: 0xc5f8c8
+};
+
+let darkTheme = {
+    c1: 0x3a3b52,
+    c2: 0x33284b,
+    c3: 0x2c2332
+};
+
+const urlParams = new URLSearchParams(window.location.search);
+const size = urlParams.get('size');
+
+export default {
+    name: 'Grid',
+    components: {Jumbotron},
+    data() {
+        return {}
+    },
+    mounted() {
+        let grid = new Grid(
+            size ? size : window.innerWidth < 1000 ? 20 : 30,
+            window.innerWidth < 1000 ? 80 : 40,
+            lightTheme
+        );
+        grid.setup();
+        grid.resize();
+    }
+}
+</script>
+
+<style scoped>
+    #grid {
+        position: fixed;
+        background: white;
+    }
+</style>

simon987/src/components/HelloWorld.vue

@@ -1,37 +0,0 @@
-<template>
-  <div id="grid">
-  </div>
-</template>
-
-<script>
-import Grid from '../Grid';
-
-window.onload = () => {
-
-    const urlParams = new URLSearchParams(window.location.search);
-    const size = urlParams.get('size');
-
-    let grid = new Grid(
-        size ? size : window.innerWidth < 1000 ? 20 : 30,
-        window.innerWidth < 1000 ? 80 : 40,
-    );
-    grid.setup();
-    grid.resize();
-};
-
-export default {
-  name: 'HelloWorld',
-  data () {
-    return {
-      msg: 'Welcome to Your Vue.js App'
-    }
-  }
-}
-</script>
-
-<style scoped>
-    #grid {
-        position: fixed;
-        background: white;
-    }
-</style>

simon987/src/components/Jumbotron.vue

@@ -0,0 +1,100 @@
+<template>
+    <div id="content" class="md-layout md-centered">
+        <md-card class="md-layout-item md-elevation-10">
+            <md-card-header>
+                <span class="md-display-4 text-mono">simon987.net<span class="vim-caret">_</span></span>
+            </md-card-header>
+
+            <md-card-content>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed
+                accusantium quasi non.
+            </md-card-content>
+
+            <md-card-actions>
+                <md-button>Action</md-button>
+                <md-button>Action</md-button>
+            </md-card-actions>
+        </md-card>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "Jumbotron"
+    }
+</script>
+
+<style scoped>
+    .md-card {
+        margin-top: 2em;
+        background-color: white;
+        padding: 2.5em;
+    }
+
+    .text-mono {
+        font-family: Hack, "Andale Mono", monospace;
+    }
+
+    ::selection {
+        background: #f9989f;
+    }
+
+    ::-moz-selection {
+        background: #f9989f;
+    }
+
+    .md-display-4 {
+    }
+
+    .vim-caret {
+        -webkit-animation: vimCaret 1s linear infinite;
+        -o-animation: vimCaret 1s linear infinite;
+        animation: vimCaret 1s linear infinite;
+        text-shadow: none;
+    }
+
+    @-webkit-keyframes vimCaret {
+        0% {
+            background-color: transparent;
+        }
+        49% {
+            background-color: transparent;
+        }
+        50% {
+            color: inherit;
+        }
+        100% {
+            color: inherit;
+        }
+    }
+
+    @-o-keyframes vimCaret {
+        0% {
+            color: transparent;
+        }
+        49% {
+            color: transparent;
+        }
+        50% {
+            color: inherit;
+        }
+        100% {
+            color: inherit;
+        }
+    }
+
+    @keyframes vimCaret {
+        0% {
+            color: transparent;
+        }
+        49% {
+            color: transparent;
+        }
+        50% {
+            color: inherit;
+        }
+        100% {
+            color: inherit;
+        }
+    }
+</style>

simon987/src/main.js

@@ -2,11 +2,17 @@ import Vue from 'vue'
 import App from './App'
 import router from './router'
 
-Vue.config.productionTip = false
+//TODO: Import individual components
+import VueMaterial from 'vue-material'
+import 'vue-material/dist/vue-material.min.css'
+
+Vue.config.productionTip = false;
+Vue.use(VueMaterial);
 
 /* eslint-disable no-new */
 new Vue({
     el: '#app',
     router,
     render: h => h(App)
-})
+});
+

simon987/src/router/index.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import HelloWorld from '@/components/HelloWorld'
+import Grid from '../components/Grid'
+import Jumbotron from "../components/Jumbotron";
 
 Vue.use(Router);
 
@@ -8,8 +9,13 @@ export default new Router({
     routes: [
         {
             path: '/',
-            name: 'HelloWorld',
+            name: 'Grid',
-            component: HelloWorld
+            component: Grid
+        },
+        {
+            path: '/j',
+            name: 'Jumbotron',
+            component: Jumbotron
         }
     ]
 })