MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-11 19:03:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

using laravel-mix

Browse Source
This commit is contained in:
pypy
2020-06-26 18:20:25 +09:00
parent 1dd8192c2f
commit 345c2ca875
4 changed files with 10948 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10709
html/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

28
html/package.json
View File

@@ -1,10 +1,13 @@
{
"name": "vrcx-html",
"version": "0.0.0",
"main": "index.js",
"private": true,
"scripts": {
"build": "npx webpack --mode production",
"watch": "npx webpack --mode development --watch --progress"
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"repository": {
"type": "git",
@@ -18,5 +21,16 @@
"bugs": {
"url": "https://github.com/pypy-vrc/VRCX/issues"
},
"homepage": "https://github.com/pypy-vrc/VRCX#readme"
}
"homepage": "https://github.com/pypy-vrc/VRCX#readme",
"devDependencies": {
"cross-env": "^7.0.2",
"html-webpack-plugin": "^4.3.0",
"laravel-mix": "^5.0.4",
"pug": "^3.0.0",
"pug-loader": "^2.4.0",
"resolve-url-loader": "^3.1.0",
"sass": "^1.26.9",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
}
}

149
html/src/vr.html Normal file
View File

@@ -0,0 +1,149 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta http-equiv="Cache-Control" content="no-cache">
<meta name="referrer" content="no-referrer">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>VRCXVR</title>
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://api.vrchat.cloud">
<link rel="preconnect" href="https://d348imysud55la.cloudfront.net">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noty/3.2.0-beta/noty.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.11.1/theme-chalk/index.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+JP|Noto+Sans+KR&display=swap">
</head>
<body>
<div id="x-app" class="x-app" :class="{ 'x-app-type': appType === '1' }" style="display:none">
<div class="x-container" style="flex:1">
<div ref="list" class="x-friend-list" style="color:#aaa">
<template v-for="feed in feeds">
<div v-if="feed.type === 'GPS'" class="x-friend-item" :class="{ friend: feed.isFriend, favorite: feed.isFavorite }">
<div class="detail">
<span class="extra">
<span class="time">{{ feed.created_at | formatDate('HH:MI') }}</span>
<span class="name" v-text="feed.displayName"></span> is in <location :location="feed.location[0]"></location>
</span>
</div>
</div>
<div v-else-if="feed.type === 'Offline'" class="x-friend-item" :class="{ friend: feed.isFriend, favorite: feed.isFavorite }">
<div class="detail">
<span class="extra">
<span class="time">{{ feed.created_at | formatDate('HH:MI') }}</span>
<span class="name" v-text="feed.displayName"></span> has logged out
</span>
</div>
</div>
<div v-else-if="feed.type === 'Online'" class="x-friend-item" :class="{ friend: feed.isFriend, favorite: feed.isFavorite }">
<div class="detail">
<span class="extra">
<span class="time">{{ feed.created_at | formatDate('HH:MI') }}</span>
<span class="name" v-text="feed.displayName"></span> has logged in
</span>
</div>
</div>
<div v-else-if="feed.type === 'Status'" class="x-friend-item" :class="{ friend: feed.isFriend, favorite: feed.isFavorite }">
<div class="detail">
<span class="extra">
<span class="time">{{ feed.created_at | formatDate('HH:MI') }}</span>
<span class="name" v-text="feed.displayName"></span> is <i class="x-user-status" :class="userStatusClass(feed.status[0])"></i> {{feed.status[0].statusDescription}}
</span>
</div>
</div>
<div v-else-if="feed.type === 'OnPlayerJoined'" class="x-friend-item" :class="{ friend: feed.isFriend, favorite: feed.isFavorite }">
<div class="detail">
<span class="extra">
<span class="time">{{ feed.created_at | formatDate('HH:MI') }}</span>
<span class="name" v-text="feed.data"></span> has joined
</span>
</div>
</div>
<div v-else-if="feed.type === 'OnPlayerLeft'" class="x-friend-item" :class="{ friend: feed.isFriend, favorite: feed.isFavorite }">
<div class="detail">
<span class="extra">
<span class="time">{{ feed.created_at | formatDate('HH:MI') }}</span>
<span class="name" v-text="feed.data"></span> has left
</span>
</div>
</div>
<div v-else-if="feed.type === 'Location'" class="x-friend-item" :class="{ friend: feed.isFriend, favorite: feed.isFavorite }">
<div class="detail">
<span class="extra">
<span class="time">{{ feed.created_at | formatDate('HH:MI') }}</span>
<location :location="feed.data"></location>
</span>
</div>
</div>
</template>
</div>
</div>
<div class="x-container">
<div style="display:flex;flex-direction:row">
<template v-if="devices.length">
<div v-for="device in devices" style="flex:none;text-align:center;width:64px">
<template v-if="device[0] === 'tracker'">
<img v-if="device[1] !== 'connected'" src="images/tracker_status_off.png" style="width:32px;height:32px">
<img v-else-if="device[2] < 20" src="images/tracker_status_ready_low.png" style="width:32px;height:32px">
<img v-else src="images/tracker_status_ready.png" style="width:32px;height:32px">
</template>
<template v-else-if="device[0] === 'leftController'">
<img v-if="device[1] !== 'connected'" src="images/controller_status_off.png" style="width:32px;height:32px">
<img v-else-if="device[2] < 20" src="images/controller_status_ready_low.png" style="width:32px;height:32px">
<img v-else src="images/controller_status_ready.png" style="width:32px;height:32px">
</template>
<template v-else-if="device[0] === 'rightController'">
<img v-if="device[1] !== 'connected'" src="images/controller_status_off.png" style="width:32px;height:32px">
<img v-else-if="device[2] < 20" src="images/controller_status_ready_low.png" style="width:32px;height:32px">
<img v-else src="images/controller_status_ready.png" style="width:32px;height:32px">
</template>
<template v-else-if="device[0] === 'controller'">
<img v-if="device[1] !== 'connected'" src="images/controller_status_off.png" style="width:32px;height:32px">
<img v-else-if="device[2] < 20" src="images/controller_status_ready_low.png" style="width:32px;height:32px">
<img v-else src="images/controller_status_ready.png" style="width:32px;height:32px">
</template>
<template v-else-if="device[0] === 'base'">
<img v-if="device[1] !== 'connected'" src="images/base_status_off.png" style="width:32px;height:32px">
<img v-else-if="device[2] < 20" src="images/base_status_ready_low.png" style="width:32px;height:32px">
<img v-else src="images/base_status_ready.png" style="width:32px;height:32px">
</template>
<template v-else>
<img v-if="device[1] !== 'connected'" src="images/other_status_off.png" style="width:32px;height:32px">
<img v-else-if="device[2] < 20" src="images/other_status_ready_low.png" style="width:32px;height:32px">
<img v-else src="images/other_status_ready.png" style="width:32px;height:32px">
</template>
<br><span>{{ device[2] }}%</span>
</div>
</template>
<div v-else>
<span>No SteamVR Devices</span>
</div>
</div>
</div>
<div class="x-container">
<span style="float:right">{{ currentTime | formatDate('YYYY-MM-DD HH:MI:SS AMPM') }}</span>
<span>CPU {{ cpuUsage }}%</span>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noty/3.2.0-beta/noty.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.11.1/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.11.1/locale/en.min.js"></script>
<script>
(function () {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = `vr.css?_=${Date.now()}`;
document.head.appendChild(link);
var script = document.createElement('script');
script.src = `vr.js?_=${Date.now()}`;
document.body.appendChild(script);
})();
</script>
</body>
</html>

69
html/webpack.mix.js Normal file
View File

@@ -0,0 +1,69 @@
var mix = require('laravel-mix');
var HtmlWebpackPlugin = require('html-webpack-plugin');
mix.disableNotifications();
mix.options({
processCssUrls: false
});
mix.override(function (webpackConfig) {
webpackConfig.resolve.alias['@'] = path.resolve('src'); // scss
webpackConfig.module.rules.push({
test: /\.pug$/,
use: 'pug-loader'
});
webpackConfig.plugins.push(new HtmlWebpackPlugin({
filename: 'dist/index.html',
template: 'src/index.pug',
inject: false,
minify: false
}));
});
mix.copyDirectory('images/', 'dist/images/');
mix.copy('src/vr.html', 'dist/');
mix.js('src/app.js', 'dist/');
mix.js('src/vr.js', 'dist/');
mix.sass('src/app.scss', 'dist/');
mix.sass('src/app.dark.scss', 'dist/');
// mix.pug('src/index.pug', 'dist/');
// mix.pug('src/vr.pug', 'dist/');
// Full API
// mix.js(src, output);
// mix.react(src, output); <-- Identical to mix.js(), but registers React Babel compilation.
// mix.preact(src, output); <-- Identical to mix.js(), but registers Preact compilation.
// mix.coffee(src, output); <-- Identical to mix.js(), but registers CoffeeScript compilation.
// mix.ts(src, output); <-- TypeScript support. Requires tsconfig.json to exist in the same folder as webpack.mix.js
// mix.extract(vendorLibs);
// mix.sass(src, output);
// mix.less(src, output);
// mix.stylus(src, output);
// mix.postCss(src, output, [require('postcss-some-plugin')()]);
// mix.browserSync('my-site.test');
// mix.combine(files, destination);
// mix.babel(files, destination); <-- Identical to mix.combine(), but also includes Babel compilation.
// mix.copy(from, to);
// mix.copyDirectory(fromDir, toDir);
// mix.minify(file);
// mix.sourceMaps(); // Enable sourcemaps
// mix.version(); // Enable versioning.
// mix.disableNotifications();
// mix.setPublicPath('path/to/public');
// mix.setResourceRoot('prefix/for/resource/locators');
// mix.autoload({}); <-- Will be passed to Webpack's ProvidePlugin.
// mix.webpackConfig({}); <-- Override webpack.config.js, without editing the file directly.
// mix.babelConfig({}); <-- Merge extra Babel configuration (plugins, etc.) with Mix's default.
// mix.then(function () {}) <-- Will be triggered each time Webpack finishes building.
// mix.override(function (webpackConfig) {}) <-- Will be triggered once the webpack config object has been fully generated by Mix.
// mix.dump(); <-- Dump the generated webpack config object to the console.
// mix.extend(name, handler) <-- Extend Mix's API with your own components.
// mix.options({
// extractVueStyles: false, // Extract .vue component styling to file, rather than inline.
// globalVueStyles: file, // Variables file to be imported in every component.
// processCssUrls: true, // Process/optimize relative stylesheet url()'s. Set to false, if you don't want them touched.
// purifyCss: false, // Remove unused CSS selectors.
// terser: {}, // Terser-specific options. https://github.com/webpack-contrib/terser-webpack-plugin#options
// postCss: [] // Post-CSS options: https://github.com/postcss/postcss/blob/master/docs/plugins.md
// });