Add stub webclient
This commit is contained in:
parent
361c1dd59e
commit
05b253a2a2
19 changed files with 8966 additions and 0 deletions
2
webclient/.browserslistrc
Normal file
2
webclient/.browserslistrc
Normal file
|
@ -0,0 +1,2 @@
|
||||||
|
> 1%
|
||||||
|
last 2 versions
|
14
webclient/.eslintrc.js
Normal file
14
webclient/.eslintrc.js
Normal file
|
@ -0,0 +1,14 @@
|
||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
env: {
|
||||||
|
node: true
|
||||||
|
},
|
||||||
|
extends: ["plugin:vue/essential", "@vue/prettier", "@vue/typescript"],
|
||||||
|
rules: {
|
||||||
|
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
|
||||||
|
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
|
||||||
|
},
|
||||||
|
parserOptions: {
|
||||||
|
parser: "@typescript-eslint/parser"
|
||||||
|
}
|
||||||
|
};
|
21
webclient/.gitignore
vendored
Normal file
21
webclient/.gitignore
vendored
Normal file
|
@ -0,0 +1,21 @@
|
||||||
|
.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?
|
29
webclient/README.md
Normal file
29
webclient/README.md
Normal file
|
@ -0,0 +1,29 @@
|
||||||
|
# webclient
|
||||||
|
|
||||||
|
## Project setup
|
||||||
|
```
|
||||||
|
yarn install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and hot-reloads for development
|
||||||
|
```
|
||||||
|
yarn run serve
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and minifies for production
|
||||||
|
```
|
||||||
|
yarn run build
|
||||||
|
```
|
||||||
|
|
||||||
|
### Run your tests
|
||||||
|
```
|
||||||
|
yarn run test
|
||||||
|
```
|
||||||
|
|
||||||
|
### Lints and fixes files
|
||||||
|
```
|
||||||
|
yarn run lint
|
||||||
|
```
|
||||||
|
|
||||||
|
### Customize configuration
|
||||||
|
See [Configuration Reference](https://cli.vuejs.org/config/).
|
3
webclient/babel.config.js
Normal file
3
webclient/babel.config.js
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
module.exports = {
|
||||||
|
presets: ["@vue/app"]
|
||||||
|
};
|
34
webclient/package.json
Normal file
34
webclient/package.json
Normal file
|
@ -0,0 +1,34 @@
|
||||||
|
{
|
||||||
|
"name": "webclient",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"lint": "vue-cli-service lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"buefy": "^0.7.4",
|
||||||
|
"core-js": "^3.1.2",
|
||||||
|
"vue": "^2.6.10",
|
||||||
|
"vue-class-component": "^7.0.2",
|
||||||
|
"vue-property-decorator": "^8.1.0",
|
||||||
|
"vuex": "^3.0.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vue/cli-plugin-babel": "^4.0.0-alpha.1",
|
||||||
|
"@vue/cli-plugin-eslint": "^4.0.0-alpha.1",
|
||||||
|
"@vue/cli-plugin-typescript": "^4.0.0-alpha.1",
|
||||||
|
"@vue/cli-service": "^4.0.0-alpha.1",
|
||||||
|
"@vue/eslint-config-prettier": "^4.0.1",
|
||||||
|
"@vue/eslint-config-typescript": "^4.0.0",
|
||||||
|
"eslint": "^5.16.0",
|
||||||
|
"eslint-plugin-vue": "^5.0.0",
|
||||||
|
"node-sass": "^4.9.0",
|
||||||
|
"sass": "^1.19.0",
|
||||||
|
"sass-loader": "^7.1.0",
|
||||||
|
"typescript": "^3.4.5",
|
||||||
|
"vue-cli-plugin-buefy": "^0.3.6",
|
||||||
|
"vue-template-compiler": "^2.6.10"
|
||||||
|
}
|
||||||
|
}
|
5
webclient/postcss.config.js
Normal file
5
webclient/postcss.config.js
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
autoprefixer: {}
|
||||||
|
}
|
||||||
|
};
|
5
webclient/prettier.config.js
Normal file
5
webclient/prettier.config.js
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
// prettier.config.js or .prettierrc.js
|
||||||
|
module.exports = {
|
||||||
|
tabWidth: 4,
|
||||||
|
useTabs: true
|
||||||
|
};
|
BIN
webclient/public/favicon.ico
Normal file
BIN
webclient/public/favicon.ico
Normal file
Binary file not shown.
After Width: | Height: | Size: 4.2 KiB |
18
webclient/public/index.html
Normal file
18
webclient/public/index.html
Normal file
|
@ -0,0 +1,18 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<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">
|
||||||
|
<link rel="stylesheet" href="//cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css">
|
||||||
|
<title>webclient</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<strong>We're sorry but webclient 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>
|
12
webclient/src/App.vue
Normal file
12
webclient/src/App.vue
Normal file
|
@ -0,0 +1,12 @@
|
||||||
|
<template>
|
||||||
|
<div id="app"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { Component, Vue } from "vue-property-decorator";
|
||||||
|
|
||||||
|
@Component({})
|
||||||
|
export default class App extends Vue {}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss"></style>
|
153
webclient/src/assets/scss/_variables.scss
Normal file
153
webclient/src/assets/scss/_variables.scss
Normal file
|
@ -0,0 +1,153 @@
|
||||||
|
// Included below are all the defined variables from Bulma
|
||||||
|
// Modify as needed, removing the !default attribute.
|
||||||
|
|
||||||
|
// Colors
|
||||||
|
|
||||||
|
$black: hsl(0, 0%, 4%) !default;
|
||||||
|
$black-bis: hsl(0, 0%, 7%) !default;
|
||||||
|
$black-ter: hsl(0, 0%, 14%) !default;
|
||||||
|
|
||||||
|
$grey-darker: hsl(0, 0%, 21%) !default;
|
||||||
|
$grey-dark: hsl(0, 0%, 29%) !default;
|
||||||
|
$grey: hsl(0, 0%, 48%) !default;
|
||||||
|
$grey-light: hsl(0, 0%, 71%) !default;
|
||||||
|
$grey-lighter: hsl(0, 0%, 86%) !default;
|
||||||
|
|
||||||
|
$white-ter: hsl(0, 0%, 96%) !default;
|
||||||
|
$white-bis: hsl(0, 0%, 98%) !default;
|
||||||
|
$white: hsl(0, 0%, 100%) !default;
|
||||||
|
|
||||||
|
$orange: hsl(14, 100%, 53%) !default;
|
||||||
|
$yellow: hsl(48, 100%, 67%) !default;
|
||||||
|
$green: hsl(141, 71%, 48%) !default;
|
||||||
|
$turquoise: hsl(171, 100%, 41%) !default;
|
||||||
|
$cyan: hsl(204, 86%, 53%) !default;
|
||||||
|
$blue: hsl(217, 71%, 53%) !default;
|
||||||
|
$purple: hsl(271, 100%, 71%) !default;
|
||||||
|
$red: hsl(348, 100%, 61%) !default;
|
||||||
|
|
||||||
|
// Typography
|
||||||
|
|
||||||
|
$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto",
|
||||||
|
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
||||||
|
"Helvetica", "Arial", sans-serif !default;
|
||||||
|
$family-monospace: monospace !default;
|
||||||
|
$render-mode: optimizeLegibility !default;
|
||||||
|
|
||||||
|
$size-1: 3rem !default;
|
||||||
|
$size-2: 2.5rem !default;
|
||||||
|
$size-3: 2rem !default;
|
||||||
|
$size-4: 1.5rem !default;
|
||||||
|
$size-5: 1.25rem !default;
|
||||||
|
$size-6: 1rem !default;
|
||||||
|
$size-7: 0.75rem !default;
|
||||||
|
|
||||||
|
$weight-light: 300 !default;
|
||||||
|
$weight-normal: 400 !default;
|
||||||
|
$weight-medium: 500 !default;
|
||||||
|
$weight-semibold: 600 !default;
|
||||||
|
$weight-bold: 700 !default;
|
||||||
|
|
||||||
|
// Responsiveness
|
||||||
|
|
||||||
|
// The container horizontal gap, which acts as the offset for breakpoints
|
||||||
|
$gap: 32px !default;
|
||||||
|
// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
|
||||||
|
$tablet: 769px !default;
|
||||||
|
// 960px container + 4rem
|
||||||
|
$desktop: 960px + (2 * $gap) !default;
|
||||||
|
// 1152px container + 4rem
|
||||||
|
$widescreen: 1152px + (2 * $gap) !default;
|
||||||
|
// 1344px container + 4rem;
|
||||||
|
$fullhd: 1344px + (2 * $gap) !default;
|
||||||
|
|
||||||
|
// Miscellaneous
|
||||||
|
|
||||||
|
$easing: ease-out !default;
|
||||||
|
$radius-small: 2px !default;
|
||||||
|
$radius: 3px !default;
|
||||||
|
$radius-large: 5px !default;
|
||||||
|
$radius-rounded: 290486px !default;
|
||||||
|
$speed: 86ms !default;
|
||||||
|
|
||||||
|
// Flags
|
||||||
|
|
||||||
|
$variable-columns: true !default;
|
||||||
|
|
||||||
|
// The default Bulma derived variables are declared below
|
||||||
|
|
||||||
|
$primary: $turquoise !default;
|
||||||
|
|
||||||
|
$info: $cyan !default;
|
||||||
|
$success: $green !default;
|
||||||
|
$warning: $yellow !default;
|
||||||
|
$danger: $red !default;
|
||||||
|
|
||||||
|
$light: $white-ter !default;
|
||||||
|
$dark: $grey-darker !default;
|
||||||
|
|
||||||
|
// Invert colors
|
||||||
|
|
||||||
|
$orange-invert: findColorInvert($orange) !default;
|
||||||
|
$yellow-invert: findColorInvert($yellow) !default;
|
||||||
|
$green-invert: findColorInvert($green) !default;
|
||||||
|
$turquoise-invert: findColorInvert($turquoise) !default;
|
||||||
|
$cyan-invert: findColorInvert($cyan) !default;
|
||||||
|
$blue-invert: findColorInvert($blue) !default;
|
||||||
|
$purple-invert: findColorInvert($purple) !default;
|
||||||
|
$red-invert: findColorInvert($red) !default;
|
||||||
|
|
||||||
|
$primary-invert: $turquoise-invert !default;
|
||||||
|
$info-invert: $cyan-invert !default;
|
||||||
|
$success-invert: $green-invert !default;
|
||||||
|
$warning-invert: $yellow-invert !default;
|
||||||
|
$danger-invert: $red-invert !default;
|
||||||
|
$light-invert: $dark !default;
|
||||||
|
$dark-invert: $light !default;
|
||||||
|
|
||||||
|
// General colors
|
||||||
|
|
||||||
|
$background: $white-ter !default;
|
||||||
|
|
||||||
|
$border: $grey-lighter !default;
|
||||||
|
$border-hover: $grey-light !default;
|
||||||
|
|
||||||
|
// Text colors
|
||||||
|
|
||||||
|
$text: $grey-dark !default;
|
||||||
|
$text-invert: findColorInvert($text) !default;
|
||||||
|
$text-light: $grey !default;
|
||||||
|
$text-strong: $grey-darker !default;
|
||||||
|
|
||||||
|
// Code colors
|
||||||
|
|
||||||
|
$code: $red !default;
|
||||||
|
$code-background: $background !default;
|
||||||
|
|
||||||
|
$pre: $text !default;
|
||||||
|
$pre-background: $background !default;
|
||||||
|
|
||||||
|
// Link colors
|
||||||
|
|
||||||
|
$link: $blue !default;
|
||||||
|
$link-invert: $blue-invert !default;
|
||||||
|
$link-visited: $purple !default;
|
||||||
|
|
||||||
|
$link-hover: $grey-darker !default;
|
||||||
|
$link-hover-border: $grey-light !default;
|
||||||
|
|
||||||
|
$link-focus: $grey-darker !default;
|
||||||
|
$link-focus-border: $blue !default;
|
||||||
|
|
||||||
|
$link-active: $grey-darker !default;
|
||||||
|
$link-active-border: $grey-dark !default;
|
||||||
|
|
||||||
|
// Typography
|
||||||
|
|
||||||
|
$family-primary: $family-sans-serif !default;
|
||||||
|
$family-code: $family-monospace !default;
|
||||||
|
|
||||||
|
$size-small: $size-7 !default;
|
||||||
|
$size-normal: $size-6 !default;
|
||||||
|
$size-medium: $size-5 !default;
|
||||||
|
$size-large: $size-4 !default;
|
37
webclient/src/assets/scss/app.scss
Normal file
37
webclient/src/assets/scss/app.scss
Normal file
|
@ -0,0 +1,37 @@
|
||||||
|
@import "~bulma/sass/utilities/initial-variables";
|
||||||
|
@import "~bulma/sass/utilities/functions";
|
||||||
|
// 1. Set your own initial variables and derived
|
||||||
|
// variables in _variables.scss
|
||||||
|
@import "variables";
|
||||||
|
|
||||||
|
// 2. Setup your Custom Colors
|
||||||
|
$linkedin: #0077b5;
|
||||||
|
$linkedin-invert: findColorInvert($linkedin);
|
||||||
|
$twitter: #55acee;
|
||||||
|
$twitter-invert: findColorInvert($twitter);
|
||||||
|
$github: #333;
|
||||||
|
$github-invert: findColorInvert($github);
|
||||||
|
|
||||||
|
@import "~bulma/sass/utilities/derived-variables";
|
||||||
|
|
||||||
|
// 3. Add new color variables to the color map.
|
||||||
|
$addColors: (
|
||||||
|
"twitter": (
|
||||||
|
$twitter,
|
||||||
|
$twitter-invert
|
||||||
|
),
|
||||||
|
"linkedin": (
|
||||||
|
$linkedin,
|
||||||
|
$linkedin-invert
|
||||||
|
),
|
||||||
|
"github": (
|
||||||
|
$github,
|
||||||
|
$github-invert
|
||||||
|
)
|
||||||
|
);
|
||||||
|
$colors: map-merge($colors, $addColors);
|
||||||
|
|
||||||
|
@import "~bulma";
|
||||||
|
@import "~buefy/src/scss/buefy";
|
||||||
|
|
||||||
|
// 4. Provide custom buefy overrides and site styles here
|
14
webclient/src/main.ts
Normal file
14
webclient/src/main.ts
Normal file
|
@ -0,0 +1,14 @@
|
||||||
|
import Vue from "vue";
|
||||||
|
import App from "./App.vue";
|
||||||
|
import store from "./store";
|
||||||
|
import Buefy from "buefy";
|
||||||
|
import "./assets/scss/app.scss";
|
||||||
|
|
||||||
|
Vue.use(Buefy);
|
||||||
|
|
||||||
|
Vue.config.productionTip = false;
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
store,
|
||||||
|
render: h => h(App)
|
||||||
|
}).$mount("#app");
|
13
webclient/src/shims-tsx.d.ts
vendored
Normal file
13
webclient/src/shims-tsx.d.ts
vendored
Normal file
|
@ -0,0 +1,13 @@
|
||||||
|
import Vue, { VNode } from "vue";
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
namespace JSX {
|
||||||
|
// tslint:disable no-empty-interface
|
||||||
|
interface Element extends VNode {}
|
||||||
|
// tslint:disable no-empty-interface
|
||||||
|
interface ElementClass extends Vue {}
|
||||||
|
interface IntrinsicElements {
|
||||||
|
[elem: string]: any;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
4
webclient/src/shims-vue.d.ts
vendored
Normal file
4
webclient/src/shims-vue.d.ts
vendored
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
declare module "*.vue" {
|
||||||
|
import Vue from "vue";
|
||||||
|
export default Vue;
|
||||||
|
}
|
24
webclient/src/store.ts
Normal file
24
webclient/src/store.ts
Normal file
|
@ -0,0 +1,24 @@
|
||||||
|
import Vue from "vue";
|
||||||
|
import Vuex, { StoreOptions } from "vuex";
|
||||||
|
|
||||||
|
Vue.use(Vuex);
|
||||||
|
|
||||||
|
export interface AppState {
|
||||||
|
in_room: boolean;
|
||||||
|
room: string;
|
||||||
|
playerName: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const store: StoreOptions<AppState> = {
|
||||||
|
state: {
|
||||||
|
in_room: false,
|
||||||
|
room: "",
|
||||||
|
playerName:
|
||||||
|
"webclient-" +
|
||||||
|
Math.random()
|
||||||
|
.toString(32)
|
||||||
|
.slice(2)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default new Vuex.Store<AppState>(store);
|
28
webclient/tsconfig.json
Normal file
28
webclient/tsconfig.json
Normal file
|
@ -0,0 +1,28 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "esnext",
|
||||||
|
"module": "esnext",
|
||||||
|
"strict": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"importHelpers": true,
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"sourceMap": true,
|
||||||
|
"baseUrl": ".",
|
||||||
|
"types": ["webpack-env"],
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["src/*"]
|
||||||
|
},
|
||||||
|
"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src/**/*.ts",
|
||||||
|
"src/**/*.tsx",
|
||||||
|
"src/**/*.vue",
|
||||||
|
"tests/**/*.ts",
|
||||||
|
"tests/**/*.tsx"
|
||||||
|
],
|
||||||
|
"exclude": ["node_modules"]
|
||||||
|
}
|
8550
webclient/yarn.lock
Normal file
8550
webclient/yarn.lock
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue