とりあえず完成でもビルドできない

LinaTsukusu · Mar 24, 2019 · ba0e36b · ba0e36b
1 parent 9edaaf1
commit ba0e36b
Show file tree

Hide file tree

Showing 20 changed files with 199 additions and 154 deletions.
diff --git a/package.json b/package.json
@@ -12,12 +12,14 @@
     "postuninstall": "electron-builder install-app-deps",
     "test:unit": "vue-cli-service test:unit"
   },
+  "main": "background.js",
   "dependencies": {
     "log4js": "^4.0.2",
     "vue": "^2.6.6",
     "vue-class-component": "^6.0.0",
     "vue-property-decorator": "^7.0.0",
     "vue-router": "^3.0.1",
+    "vuetify": "^1.5.5",
     "vuex": "^3.0.1"
   },
   "devDependencies": {
@@ -35,7 +37,8 @@
     "typescript": "^3.2.1",
     "vue-cli-plugin-electron-builder": "^1.2.0",
     "vue-cli-plugin-pug": "^1.0.7",
-    "vue-template-compiler": "^2.5.21"
-  },
-  "main": "background.js"
+    "vue-cli-plugin-vuetify": "^0.5.0",
+    "vue-template-compiler": "^2.5.21",
+    "vuetify-loader": "^1.0.5"
+  }
 }
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -4,8 +4,9 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>quiz-stream-ui</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
   </head>
   <body>
     <noscript>

diff --git a/src/App.vue b/src/App.vue
@@ -1,25 +1,14 @@
-<template>
-  <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view/>
-  </div>
+<template lang="pug">
+  v-app
+    v-content
+      router-view
+
 </template>
-<style lang="stylus">
-#app
-  font-family 'Avenir', Helvetica, Arial, sans-serif
-  -webkit-font-smoothing antialiased
-  -moz-osx-font-smoothing grayscale
-  text-align center
-  color #2c3e50
 
-#nav
-  padding 30px
-  a
-    font-weight bold
-    color #2c3e50
-    &.router-link-exact-active
-      color #42b983
-</style>
+<script lang="ts">
+  import {Component, Vue} from 'vue-property-decorator'
+
+  @Component({})
+  export default class App extends Vue {
+  }
+</script>
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/background.ts b/src/background.ts
@@ -1,10 +1,11 @@
 'use strict'
 
-import {app, protocol, BrowserWindow} from 'electron'
+import {app, protocol, BrowserWindow, globalShortcut} from 'electron'
 import {
   createProtocol,
   installVueDevtools,
 } from 'vue-cli-plugin-electron-builder/lib'
+import {logger} from './main/logger'
 
 const isDevelopment = process.env.NODE_ENV !== 'production'
 
@@ -15,6 +16,9 @@ let win: BrowserWindow | null
 // Standard scheme must be registered before the app is ready
 protocol.registerStandardSchemes(['app'], {secure: true})
 
+// OBSで取り込めるように
+app.disableHardwareAcceleration()
+
 function createWindow() {
   // Create the browser window.
   win = new BrowserWindow({width: 800, height: 600})
@@ -62,16 +66,32 @@ app.on('ready', async () => {
     try {
       await installVueDevtools()
     } catch (e) {
-      console.error('Vue Devtools failed to install:', e.toString())
+      logger.error('Vue Devtools failed to install:', e.toString())
     }
   }
   createWindow()
+
+
+  // ShortCuts
+  globalShortcut.register('Ctrl+Shift+Up', () => {
+    logger.debug('Ctrl+Shift+Up')
+    if (win instanceof BrowserWindow) {
+      win.webContents.send('increment')
+    }
+  })
+
+  globalShortcut.register('Ctrl+Shift+Down', () => {
+    logger.debug('Ctrl+Shift+Down')
+    if (win instanceof BrowserWindow) {
+      win.webContents.send('decrement')
+    }
+  })
 })
 
 // Exit cleanly on request from parent process in development mode.
 if (isDevelopment) {
   if (process.platform === 'win32') {
-    process.on('message', data => {
+    process.on('message', (data) => {
       if (data === 'graceful-exit') {
         app.quit()
       }

diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
diff --git a/src/components/LampTower.vue b/src/components/LampTower.vue
@@ -0,0 +1,31 @@
+<template lang="pug">
+  v-container(grid-list-md text-xs-center)
+    v-layout(row wrap v-for="num in reversed()")
+      v-btn(depressed :color="num <= value && 'error' || ''" @click="click(num)") {{num}}
+</template>
+
+<script lang="ts">
+  import {Component, Prop, Vue} from 'vue-property-decorator'
+  
+  
+  @Component
+  export default class LampTower extends Vue {
+    @Prop()
+    private value!: number
+    @Prop({default: 5})
+    private length!: number
+
+    private reversed() {
+      return [...Array(this.length).keys()].map((n) => n + 1).reverse()
+    }
+
+    private click(num: number) {
+      this.$emit('input', num)
+    }
+  }
+</script>
+
+<style scoped lang="stylus">
+  .v-btn
+    margin 1px
+</style>
diff --git a/src/main.ts b/src/main.ts
@@ -1,12 +1,13 @@
-import Vue from 'vue';
-import App from './App.vue';
-import router from './router';
-import store from './store';
+import Vue from 'vue'
+import './plugins/vuetify'
+import App from './App.vue'
+import router from './router'
+import store from './store'
 
-Vue.config.productionTip = false;
+Vue.config.productionTip = false
 
 new Vue({
   router,
   store,
   render: (h) => h(App),
-}).$mount('#app');
+}).$mount('#app')
diff --git a/src/main/logger.ts b/src/main/logger.ts
@@ -0,0 +1,12 @@
+import * as log4js from 'log4js'
+
+log4js.configure({
+  appenders: {
+    system: {type: 'console'},
+  },
+  categories: {
+    default: {appenders: ['system'], level: 'trace'},
+  },
+})
+
+export const logger = log4js.getLogger('trace')
diff --git a/src/plugins/vuetify.ts b/src/plugins/vuetify.ts
@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import Vuetify from 'vuetify/lib'
+import 'vuetify/src/stylus/app.styl'
+
+Vue.use(Vuetify, {
+  iconfont: 'md',
+})
diff --git a/src/router.ts b/src/router.ts
@@ -1,8 +1,7 @@
-import Vue from 'vue';
-import Router from 'vue-router';
-import Home from './views/Home.vue';
+import Vue from 'vue'
+import Router from 'vue-router'
 
-Vue.use(Router);
+Vue.use(Router)
 
 export default new Router({
   mode: 'history',
@@ -11,15 +10,7 @@ export default new Router({
     {
       path: '/',
       name: 'home',
-      component: Home,
-    },
-    {
-      path: '/about',
-      name: 'about',
-      // route level code-splitting
-      // this generates a separate chunk (about.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
+      component: () => import('./views/Home.vue'),
     },
   ],
-});
+})
diff --git a/src/shims-tsx.d.ts b/src/shims-tsx.d.ts
@@ -1,11 +1,15 @@
-import Vue, { VNode } from 'vue';
+import Vue, {VNode} from 'vue'
 
 declare global {
   namespace JSX {
     // tslint:disable no-empty-interface
-    interface Element extends VNode {}
+    interface Element extends VNode {
+    }
+
     // tslint:disable no-empty-interface
-    interface ElementClass extends Vue {}
+    interface ElementClass extends Vue {
+    }
+
     interface IntrinsicElements {
       [elem: string]: any;
     }

diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
@@ -1,4 +1,4 @@
 declare module '*.vue' {
-  import Vue from 'vue';
-  export default Vue;
+  import Vue from 'vue'
+  export default Vue
 }
diff --git a/src/store.ts b/src/store.ts
@@ -1,16 +1,10 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
+import Vue from 'vue'
+import Vuex from 'vuex'
 
-Vue.use(Vuex);
+Vue.use(Vuex)
 
 export default new Vuex.Store({
-  state: {
-
-  },
-  mutations: {
-
-  },
-  actions: {
-
-  },
-});
+  state: {},
+  mutations: {},
+  actions: {},
+})
diff --git a/src/views/About.vue b/src/views/About.vue