mirror of
https://github.com/simon987/simon987.net.git
synced 2025-04-10 14:06:41 +00:00
basic vue-material setup
This commit is contained in:
simon987
parent
a759dc22c7
commit
1bd682cf41
@ -1,5 +1,6 @@
|
||||
#!/bin/bash
|
||||
|
||||
|
||||
export TTROOT="simon987"
|
||||
|
||||
chmod 755 -R "${TTROOT}/webroot"
|
||||
|
||||
1055
simon987/package-lock.json
generated
1055
simon987/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,65 +1,68 @@
|
||||
{
|
||||
"name": "simon987.net",
|
||||
"version": "1.0.0",
|
||||
"description": "A Vue.js project",
|
||||
"author": "simon987 <fortier.simon@protonmail.com>",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
|
||||
"start": "npm run dev",
|
||||
"build": "node build/build.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"d3": "^5.9.2",
|
||||
"lodash": "^4.17.11",
|
||||
"pixi.js": "^4.8.7",
|
||||
"vue": "^2.5.2",
|
||||
"vue-router": "^3.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^7.1.2",
|
||||
"babel-core": "^6.22.1",
|
||||
"babel-helper-vue-jsx-merge-props": "^2.0.3",
|
||||
"babel-loader": "^7.1.1",
|
||||
"babel-plugin-syntax-jsx": "^6.18.0",
|
||||
"babel-plugin-transform-runtime": "^6.22.0",
|
||||
"babel-plugin-transform-vue-jsx": "^3.5.0",
|
||||
"babel-preset-env": "^1.3.2",
|
||||
"babel-preset-stage-2": "^6.22.0",
|
||||
"chalk": "^2.0.1",
|
||||
"copy-webpack-plugin": "^4.0.1",
|
||||
"css-loader": "^0.28.0",
|
||||
"extract-text-webpack-plugin": "^3.0.0",
|
||||
"file-loader": "^1.1.4",
|
||||
"friendly-errors-webpack-plugin": "^1.6.1",
|
||||
"html-webpack-plugin": "^2.30.1",
|
||||
"node-notifier": "^5.1.2",
|
||||
"optimize-css-assets-webpack-plugin": "^3.2.0",
|
||||
"ora": "^1.2.0",
|
||||
"portfinder": "^1.0.13",
|
||||
"postcss-import": "^11.0.0",
|
||||
"postcss-loader": "^2.0.8",
|
||||
"postcss-url": "^7.2.1",
|
||||
"rimraf": "^2.6.0",
|
||||
"semver": "^5.3.0",
|
||||
"shelljs": "^0.7.6",
|
||||
"uglifyjs-webpack-plugin": "^1.1.1",
|
||||
"url-loader": "^0.5.8",
|
||||
"vue-loader": "^13.3.0",
|
||||
"vue-style-loader": "^3.0.1",
|
||||
"vue-template-compiler": "^2.5.2",
|
||||
"webpack": "^3.6.0",
|
||||
"webpack-bundle-analyzer": "^2.9.0",
|
||||
"webpack-dev-server": "^2.9.1",
|
||||
"webpack-merge": "^4.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6.0.0",
|
||||
"npm": ">= 3.0.0"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not ie <= 8"
|
||||
]
|
||||
"name": "simon987.net",
|
||||
"version": "1.0.0",
|
||||
"description": "A Vue.js project",
|
||||
"author": "simon987 <fortier.simon@protonmail.com>",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
|
||||
"start": "npm run dev",
|
||||
"build": "node build/build.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"d3": "^5.9.2",
|
||||
"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",
|
||||
"babel-plugin-syntax-jsx": "^6.18.0",
|
||||
"babel-plugin-transform-runtime": "^6.22.0",
|
||||
"babel-plugin-transform-vue-jsx": "^3.5.0",
|
||||
"babel-preset-env": "^1.3.2",
|
||||
"babel-preset-stage-2": "^6.22.0",
|
||||
"chalk": "^2.0.1",
|
||||
"copy-webpack-plugin": "^4.0.1",
|
||||
"css-loader": "^0.28.11",
|
||||
"extract-text-webpack-plugin": "^3.0.0",
|
||||
"file-loader": "^1.1.4",
|
||||
"friendly-errors-webpack-plugin": "^1.6.1",
|
||||
"html-webpack-plugin": "^2.30.1",
|
||||
"node-notifier": "^5.1.2",
|
||||
"optimize-css-assets-webpack-plugin": "^3.2.0",
|
||||
"ora": "^1.2.0",
|
||||
"portfinder": "^1.0.13",
|
||||
"postcss-import": "^11.0.0",
|
||||
"postcss-loader": "^2.0.8",
|
||||
"postcss-url": "^7.2.1",
|
||||
"rimraf": "^2.6.0",
|
||||
"semver": "^5.3.0",
|
||||
"shelljs": "^0.7.6",
|
||||
"uglifyjs-webpack-plugin": "^1.1.1",
|
||||
"url-loader": "^0.5.8",
|
||||
"vue-loader": "^13.3.0",
|
||||
"vue-style-loader": "^3.1.2",
|
||||
"vue-template-compiler": "^2.5.2",
|
||||
"webpack": "^3.6.0",
|
||||
"webpack-bundle-analyzer": "^2.9.0",
|
||||
"webpack-dev-server": "^2.9.1",
|
||||
"webpack-merge": "^4.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6.0.0",
|
||||
"npm": ">= 3.0.0"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not ie <= 8"
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<router-view/>
|
||||
</div>
|
||||
<div id="app">
|
||||
<router-view/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'App'
|
||||
name: 'App'
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -15,6 +15,7 @@ export default {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
overflow-x: hidden;
|
||||
margin: 0;
|
||||
|
||||
@ -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 = 0xf9989f;
|
||||
this.c2 = 0xfccb8f;
|
||||
this.c3 = 0xc5f8c8;
|
||||
// this.c1 = 0x3a3b52;
|
||||
// this.c2 = 0x33284b;
|
||||
// this.c3 = 0x2c2332;
|
||||
this._c1 = colScheme.c1;
|
||||
this._c2 = colScheme.c2;
|
||||
this._c3 = colScheme.c3;
|
||||
|
||||
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) {
|
||||
this.app.renderer.view.style.width = this._pxWidth + "px";
|
||||
this.app.renderer.view.style.height = this._pxHeight + "px";
|
||||
this.app.renderer.resize(window.innerWidth, window.innerHeight);
|
||||
if (this._app) {
|
||||
this._app.renderer.view.style.width = this._pxWidth + "px";
|
||||
this._app.renderer.view.style.height = this._pxHeight + "px";
|
||||
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.xCoordsMap = this.xMap.map(x => x * cellSize);
|
||||
this.yCoordsMap = _.range(0, this._cellCount)
|
||||
this._xMap = _.range(0, this._cellCount).map(x => x % this._cellCountX);
|
||||
this._xCoordsMap = this._xMap.map(x => x * cellSize);
|
||||
this._yCoordsMap = _.range(0, this._cellCount)
|
||||
.map(y => Math.floor(y / this._cellCountX))
|
||||
.map(y => y * cellSize);
|
||||
};
|
||||
|
||||
this.g_TICK = tickLen;
|
||||
this.g_Time = 0;
|
||||
this._tickLen = tickLen;
|
||||
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;
|
||||
if (timeDiff < this.g_TICK) {
|
||||
let timeDiff = timeNow - this._tickTime;
|
||||
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.yCoordsMap[d],
|
||||
this._xCoordsMap[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;
|
||||
|
||||
50
simon987/src/components/Grid.vue
Normal file
50
simon987/src/components/Grid.vue
Normal file
@ -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>
|
||||
@ -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>
|
||||
100
simon987/src/components/Jumbotron.vue
Normal file
100
simon987/src/components/Jumbotron.vue
Normal file
@ -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>
|
||||
@ -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)
|
||||
})
|
||||
el: '#app',
|
||||
router,
|
||||
render: h => h(App)
|
||||
});
|
||||
|
||||
|
||||
@ -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',
|
||||
component: HelloWorld
|
||||
name: 'Grid',
|
||||
component: Grid
|
||||
},
|
||||
{
|
||||
path: '/j',
|
||||
name: 'Jumbotron',
|
||||
component: Jumbotron
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user