diff --git a/html/images/flag_use.png b/html/images/flag_use.png deleted file mode 100644 index d88929d7..00000000 Binary files a/html/images/flag_use.png and /dev/null differ diff --git a/html/images/flag_usw.png b/html/images/flag_usw.png deleted file mode 100644 index 61912a17..00000000 Binary files a/html/images/flag_usw.png and /dev/null differ diff --git a/html/images/flags.png b/html/images/flags.png new file mode 100644 index 00000000..dc36e31f Binary files /dev/null and b/html/images/flags.png differ diff --git a/html/package-lock.json b/html/package-lock.json index 1aba7cfd..677ad0ac 100644 --- a/html/package-lock.json +++ b/html/package-lock.json @@ -15,7 +15,6 @@ "element-ui": "^2.15.9", "eslint": "^8.20.0", "eslint-config-prettier": "^8.5.0", - "famfamfam-flags": "^1.0.0", "html-webpack-plugin": "^5.5.0", "mini-css-extract-plugin": "^2.6.1", "normalize.css": "^8.0.1", @@ -1496,15 +1495,6 @@ "node": ">=0.8.x" } }, - "node_modules/famfamfam-flags": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/famfamfam-flags/-/famfamfam-flags-1.0.0.tgz", - "integrity": "sha512-l7F0/L1I1eozNN9oLoXgqHzBCFjrhuuDwwZkuo9fOHPrreS61bV3Qft+IMyYAqjibnGjTU9/2WovGccSvNYahQ==", - "dev": true, - "engines": { - "node": ">= 0.10.0" - } - }, "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", @@ -5159,12 +5149,6 @@ "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==", "dev": true }, - "famfamfam-flags": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/famfamfam-flags/-/famfamfam-flags-1.0.0.tgz", - "integrity": "sha512-l7F0/L1I1eozNN9oLoXgqHzBCFjrhuuDwwZkuo9fOHPrreS61bV3Qft+IMyYAqjibnGjTU9/2WovGccSvNYahQ==", - "dev": true - }, "fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", diff --git a/html/package.json b/html/package.json index 371a6b42..5f89cf0d 100644 --- a/html/package.json +++ b/html/package.json @@ -31,7 +31,6 @@ "element-ui": "^2.15.9", "eslint": "^8.20.0", "eslint-config-prettier": "^8.5.0", - "famfamfam-flags": "^1.0.0", "html-webpack-plugin": "^5.5.0", "mini-css-extract-plugin": "^2.6.1", "normalize.css": "^8.0.1", diff --git a/html/src/app.js b/html/src/app.js index beea1622..808eec7c 100644 --- a/html/src/app.js +++ b/html/src/app.js @@ -812,7 +812,7 @@ speechSynthesis.getVoices(); template: "" + '' + - '{{ text }}' + + '{{ text }}' + '', props: { location: String, @@ -882,14 +882,9 @@ speechSynthesis.getVoices(); } this.region = ''; if ($app.isRealInstance(instanceId)) { - if (L.region === 'eu') { - this.region = 'europeanunion'; - } else if (L.region === 'jp') { - this.region = 'jp'; - } else if (L.region === 'use') { - this.region = 'flag-icon-use'; - } else { - this.region = 'flag-icon-usw'; + this.region = L.region; + if (!L.region) { + this.region = 'us'; } } this.strict = L.strict; diff --git a/html/src/app.scss b/html/src/app.scss index cdf0234b..3a853f3b 100644 --- a/html/src/app.scss +++ b/html/src/app.scss @@ -12,7 +12,6 @@ @import '~animate.css/animate.min.css'; @import '~noty/lib/noty.css'; @import '~element-ui/lib/theme-chalk/index.css'; -@import '~famfamfam-flags/dist/sprite/famfamfam-flags.min.css'; .color-palettes { background: #409eff; @@ -651,20 +650,6 @@ i.x-user-status.busy { border-radius: 2px; } -.flag-icon-use { - background-image: url('/images/flag_use.png'); - background-size: 16px 11px; - width: 16px; - height: 11px; -} - -.flag-icon-usw { - background-image: url('/images/flag_usw.png'); - background-size: 16px 11px; - width: 16px; - height: 11px; -} - .el-pagination .el-select .el-input .el-input__inner, .el-input--mini .el-input__icon { height: 22px; diff --git a/html/src/flags.scss b/html/src/flags.scss new file mode 100644 index 00000000..664a16c5 --- /dev/null +++ b/html/src/flags.scss @@ -0,0 +1,100 @@ +:root { + --offx: 20px; /* flag size */ + --offy: calc(var(--offx) / 70 * 46); +} +.flags { + background: url('/images/flags.png') no-repeat; + background-size: calc(var(--offx) * 6); + width: var(--offx); + height: var(--offy); + transform: translateY(calc(var(--offx) / 16)); + background-position: calc(var(--offx) * -5) calc(var(--offy) * -4); +} +span[class='flags'] { + background-position: calc(var(--offx) * 1) 0; +} +.flags.us { + background-position: 0 0; +} +.flags.kr { + background-position: calc(var(--offx) * -1) 0; +} +.flags.ru { + background-position: calc(var(--offx) * -2) 0; +} +.flags.es { + background-position: calc(var(--offx) * -3) 0; +} +.flags.pt { + background-position: calc(var(--offx) * -4) 0; +} +.flags.cn { + background-position: calc(var(--offx) * -5) 0; +} +.flags.de { + background-position: 0 calc(var(--offy) * -1); +} +.flags.jp { + background-position: calc(var(--offx) * -1) calc(var(--offy) * -1); +} +.flags.fr { + background-position: calc(var(--offx) * -2) calc(var(--offy) * -1); +} +.flags.se { + background-position: calc(var(--offx) * -3) calc(var(--offy) * -1); +} +.flags.nl { + background-position: calc(var(--offx) * -4) calc(var(--offy) * -1); +} +.flags.pl { + background-position: calc(var(--offx) * -5) calc(var(--offy) * -1); +} +.flags.dk { + background-position: 0 calc(var(--offy) * -2); +} +.flags.no { + background-position: calc(var(--offx) * -1) calc(var(--offy) * -2); +} +.flags.it { + background-position: calc(var(--offx) * -2) calc(var(--offy) * -2); +} +.flags.th { + background-position: calc(var(--offx) * -3) calc(var(--offy) * -2); +} +.flags.fi { + background-position: calc(var(--offx) * -4) calc(var(--offy) * -2); +} +.flags.hu { + background-position: calc(var(--offx) * -5) calc(var(--offy) * -2); +} +.flags.cz { + background-position: 0 calc(var(--offy) * -3); +} +.flags.tr { + background-position: calc(var(--offx) * -1) calc(var(--offy) * -3); +} +.flags.ae { + background-position: calc(var(--offx) * -2) calc(var(--offy) * -3); +} +.flags.ro { + background-position: calc(var(--offx) * -3) calc(var(--offy) * -3); +} +.flags.vn { + background-position: calc(var(--offx) * -4) calc(var(--offy) * -3); +} +.flags.ua { + background-position: calc(var(--offx) * -5) calc(var(--offy) * -3); +} +.flags.gb { + background-position: 0 calc(var(--offy) * -4); +} + +.flags.use { + background-position: calc(var(--offx) * -1) calc(var(--offy) * -4); +} +.flags.eu { + background-position: calc(var(--offx) * -2) calc(var(--offy) * -4); +} +.flags.tw { + background-position: calc(var(--offx) * -3) calc(var(--offy) * -4); +} diff --git a/html/src/index.pug b/html/src/index.pug index d69890e5..cdb3dd71 100644 --- a/html/src/index.pug +++ b/html/src/index.pug @@ -9,6 +9,7 @@ html link(rel="preconnect" href="https://api.vrchat.cloud") link(rel="preconnect" href="https://d348imysud55la.cloudfront.net") link(rel="stylesheet" href="app.css") + link(rel="stylesheet" href="flags.css") body .x-app#x-app(style="display:none") //- login @@ -97,10 +98,8 @@ html br span.x-link(v-if="currentInstanceLocation.instanceName" @click="showLaunchDialog(lastLocation.location)") span \#{{ currentInstanceLocation.instanceName }} {{ currentInstanceLocation.accessType }} - span.famfamfam-flags(v-if="currentInstanceLocation.region === 'eu'" class="europeanunion" style="display:inline-block;margin-left:5px") - span.famfamfam-flags(v-else-if="currentInstanceLocation.region === 'jp'" class="jp" style="display:inline-block;margin-left:5px") - span.flag-icon-use(v-else-if="currentInstanceLocation.region === 'use'" style="display:inline-block;margin-left:5px") - span.flag-icon-usw(v-else style="display:inline-block;margin-left:5px") + span.flags(v-if="currentInstanceLocation.region" :class="currentInstanceLocation.region" style="display:inline-block;margin-left:5px") + span.flags(v-else class="us" style="display:inline-block;margin-left:5px") i.el-icon-lock(v-if="currentInstanceLocation.strict" style="display:inline-block;margin-left:5px") span(v-if="lastLocation.playerList.size > 0" style="margin-left:5px") | {{ lastLocation.playerList.size }} @@ -178,7 +177,7 @@ html el-tooltip(v-for="item in scope.row.ref.$languages" :key="item.key" placement="top") template(#content) span {{ item.value }} ({{ item.key }}) - span.famfamfam-flags(:class="languageClass(item.key)" style="display:inline-block;margin-left:5px") + span.flags(:class="languageClass(item.key)" style="display:inline-block;margin-left:5px") el-table-column(label="Bio Links" width="100" prop="ref.bioLinks") template(v-once #default="scope") el-tooltip(v-if="link" v-for="(link, index) in scope.row.ref.bioLinks" :key="index") @@ -907,7 +906,7 @@ html el-tooltip(v-for="item in scope.row.$languages" :key="item.key" placement="top") template(#content) span {{ item.value }} ({{ item.key }}) - span.famfamfam-flags(:class="languageClass(item.key)" style="display:inline-block;margin-left:5px") + span.flags(:class="languageClass(item.key)" style="display:inline-block;margin-left:5px") el-table-column(label="Bio Links" width="100" prop="bioLinks") template(v-once #default="scope") el-tooltip(v-if="link" v-for="(link, index) in scope.row.bioLinks" :key="index") @@ -1446,7 +1445,7 @@ html el-tooltip(v-for="item in userDialog.ref.$languages" :key="item.key" placement="top") template(#content) span {{ item.value }} ({{ item.key }}) - span.famfamfam-flags(:class="languageClass(item.key)" style="display:inline-block;margin-right:5px") + span.flags(:class="languageClass(item.key)" style="display:inline-block;margin-right:5px") div el-tag.name(type="info" effect="plain" size="mini" :class="userDialog.ref.$trustClass" v-text="userDialog.ref.$trustLevel" style="margin-right:5px;margin-top:5px") el-tag.x-tag-friend(v-if="userDialog.isFriend && userDialog.friend" type="info" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") Friend No.{{userDialog.friend.no}} @@ -1750,10 +1749,8 @@ html div(style="margin:5px 0") span.x-link(@click="showLaunchDialog(room.$location.tag)") span \#{{ room.$location.instanceName }} {{ room.$location.accessType }} - span.famfamfam-flags(v-if="room.$location.region === 'eu'" class="europeanunion" style="display:inline-block;margin-left:5px") - span.famfamfam-flags(v-else-if="room.$location.region === 'jp'" class="jp" style="display:inline-block;margin-left:5px") - span.flag-icon-use(v-else-if="room.$location.region === 'use'" style="display:inline-block;margin-left:5px") - span.flag-icon-usw(v-else style="display:inline-block;margin-left:5px") + span.flags(v-if="room.$location.region" :class="room.$location.region" style="display:inline-block;margin-left:5px") + span.flags(v-else class="us" style="display:inline-block;margin-left:5px") i.el-icon-lock(v-if="room.$location.strict" style="display:inline-block;margin-left:5px") el-tooltip(placement="top" content="Invite yourself" :disabled="hideTooltips") invite-yourself(:location="room.$location.tag" style="margin-left:5px") @@ -2012,12 +2009,12 @@ html div(v-loading="languageDialog.loading") div(style="margin:5px 0") el-tag(v-for="item in API.currentUser.$languages" :key="item.key" size="small" type="info" effect="plain" closable @close="removeUserLanguage(item.key)" style="margin-right:5px") - span.famfamfam-flags(:class="languageClass(item.key)" style="display:inline-block;margin-right:5px") + span.flags(:class="languageClass(item.key)" style="display:inline-block;margin-right:5px") | {{ item.value }} ({{ item.key }}) div(v-if="languageDialog.languageChoice === true") el-select(v-model="languageDialog.languageValue" size="mini") el-option(v-for="item in languageDialog.languages" :key="item.key" :value="item.key" :label="item.value") - span.famfamfam-flags(:class="languageClass(item.key)" style="display:inline-block;margin-right:5px") + span.flags(:class="languageClass(item.key)" style="display:inline-block;margin-right:5px") | {{ item.value }} ({{ item.key }}) el-button(@click="languageDialog.languageChoice=false; addUserLanguage(languageDialog.languageValue)" size="mini") Ok el-button(@click="languageDialog.languageChoice=false" size="mini" style="margin-left:0") Cancel @@ -2882,10 +2879,8 @@ html template(v-once #default="scope") span.x-link(@click="showLaunchDialog(scope.row.location)") span \#{{ scope.row.$location.instanceName }} {{ scope.row.$location.accessType }} - span.famfamfam-flags(v-if="scope.row.$location.region === 'eu'" class="europeanunion" style="display:inline-block;margin-left:5px") - span.famfamfam-flags(v-else-if="scope.row.$location.region === 'jp'" class="jp" style="display:inline-block;margin-left:5px") - span.flag-icon-use(v-else-if="scope.row.$location.region === 'use'" style="display:inline-block;margin-left:5px") - span.flag-icon-usw(v-else style="display:inline-block;margin-left:5px") + span.flags(v-if="scope.row.$location.region" :class="scope.row.$location.region" style="display:inline-block;margin-left:5px") + span.flags(v-else class="us" style="display:inline-block;margin-left:5px") i.el-icon-lock(v-if="scope.row.$location.strict" style="display:inline-block;margin-left:5px") el-table-column(label="Instance Creator" prop="location") template(v-once #default="scope") @@ -3130,6 +3125,13 @@ html ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. + div(style="margin-top:15px") + p(style="font-weight:bold") osu!resources + pre(style="font-size:12px;white-space:pre-line"). + https://github.com/ppy/osu-resources + + CC-BY-NC 4.0 + https://github.com/ppy/osu-resources/blob/master/LICENCE.md div(style="margin-top:15px") p(style="font-weight:bold") SharpDX pre(style="font-size:12px;white-space:pre-line"). diff --git a/html/src/vr.js b/html/src/vr.js index 7b8b2acd..02beed48 100644 --- a/html/src/vr.js +++ b/html/src/vr.js @@ -79,7 +79,7 @@ Vue.component('marquee-text', MarqueeText); Vue.component('location', { template: - '{{ text }}', + '{{ text }}', props: { location: String, hint: { @@ -122,14 +122,9 @@ Vue.component('marquee-text', MarqueeText); !L.isOffline && !L.isPrivate ) { - if (L.region === 'eu') { - this.region = 'europeanunion'; - } else if (L.region === 'jp') { - this.region = 'jp'; - } else if (L.region === 'use') { - this.region = 'flag-icon-use'; - } else { - this.region = 'flag-icon-usw'; + this.region = L.region; + if (!L.region) { + this.region = 'us'; } } this.strict = L.strict; diff --git a/html/src/vr.pug b/html/src/vr.pug index 8bad20fb..7109e1c6 100644 --- a/html/src/vr.pug +++ b/html/src/vr.pug @@ -7,6 +7,7 @@ html meta(http-equiv="viewport" content="width=device-width,initial-scale=1,user-scalable=no") title VRCXVR link(rel="stylesheet" href="vr.css") + link(rel="stylesheet" href="flags.css") body .x-app#x-app(class="x-app-type" :class="{ background: appType === '1' && config && config.backgroundEnabled }") template(v-if="appType === '1'") diff --git a/html/src/vr.scss b/html/src/vr.scss index 89e2d7fd..77ed3dbf 100644 --- a/html/src/vr.scss +++ b/html/src/vr.scss @@ -12,7 +12,6 @@ @import '~animate.css/animate.min.css'; @import '~noty/lib/noty.css'; @import '~element-ui/lib/theme-chalk/index.css'; -@import '~famfamfam-flags/dist/sprite/famfamfam-flags.min.css'; /* 마지노선인듯 @@ -397,17 +396,3 @@ i.x-user-status.busy { right: -160px; bottom: 0; } - -.flag-icon-use { - background-image: url('/images/flag_use.png'); - background-size: 16px 11px; - width: 16px; - height: 11px; -} - -.flag-icon-usw { - background-image: url('/images/flag_usw.png'); - background-size: 16px 11px; - width: 16px; - height: 11px; -} diff --git a/html/webpack.config.js b/html/webpack.config.js index 265784bd..6d7d332b 100644 --- a/html/webpack.config.js +++ b/html/webpack.config.js @@ -5,132 +5,136 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const TerserPlugin = require('terser-webpack-plugin'); module.exports = { - entry: { - vendor: [ - 'element-ui', - 'noty', - 'vue', - 'vue-data-tables', - 'vue-lazyload', - 'uuid' - ], - app: { - import: ['./src/app.js', './src/app.scss'], - dependOn: 'vendor' + entry: { + vendor: [ + 'element-ui', + 'noty', + 'vue', + 'vue-data-tables', + 'vue-lazyload', + 'uuid' + ], + app: { + import: ['./src/app.js', './src/app.scss'], + dependOn: 'vendor' + }, + 'app.dark': './src/app.dark.scss', + flags: './src/flags.scss', + vr: { + import: ['./src/vr.js', './src/vr.scss'], + dependOn: 'vendor' + } }, - 'app.dark': './src/app.dark.scss', - vr: { - import: ['./src/vr.js', './src/vr.scss'], - dependOn: 'vendor' - } - }, - output: { - filename: '[name].js', - library: { - type: 'window' - } - }, - module: { - rules: [ - { - test: /\.pug$/, - oneOf: [ - { - resourceQuery: /^\?vue/, - use: 'pug-plain-loader' - }, - { - use: ['raw-loader', 'pug-plain-loader'] - } + output: { + filename: '[name].js', + library: { + type: 'window' + } + }, + module: { + rules: [ + { + test: /\.pug$/, + oneOf: [ + { + resourceQuery: /^\?vue/, + use: 'pug-plain-loader' + }, + { + use: ['raw-loader', 'pug-plain-loader'] + } + ] + }, + { + test: /\.s?css$/, + use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'] + }, + { + test: /\.(eot|png|svg|ttf|woff)/, + type: 'asset', + generator: { + filename: 'assets/[name][ext]' + } + } ] - }, - { - test: /\.s?css$/, - use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'] - }, - { - test: /\.(eot|png|svg|ttf|woff)/, - type: 'asset', - generator: { - filename: 'assets/[name][ext]' + }, + resolve: { + extensions: ['.css', '.js', '.scss'], + alias: { + vue: path.join( + __dirname, + './node_modules/vue/dist/vue.common.prod.js' + ) } - } - ] - }, - resolve: { - extensions: ['.css', '.js', '.scss'], - alias: { - vue: path.join(__dirname, './node_modules/vue/dist/vue.common.prod.js') + }, + performance: { + hints: false + }, + devtool: 'inline-source-map', + target: ['web', 'es2020'], + stats: { + preset: 'errors-only', + builtAt: true, + timings: true + }, + plugins: [ + new MiniCssExtractPlugin({ + filename: '[name].css' + }), + new HtmlWebpackPlugin({ + filename: 'index.html', + template: './src/index.pug', + inject: false, + minify: false + }), + new HtmlWebpackPlugin({ + filename: 'vr.html', + template: './src/vr.pug', + inject: false, + minify: false + }), + new CopyPlugin({ + patterns: [ + // assets + { + from: './images/', + to: './images/' + } + // // vscode-codicons + // { + // from: './node_modules/vscode-codicons/dist/codicon.css', + // to: 'vendor/vscode-codicons/' + // }, + // { + // from: './node_modules/vscode-codicons/dist/codicon.ttf', + // to: 'vendor/vscode-codicons/' + // }, + // // fontawesome + // { + // from: './node_modules/@fortawesome/fontawesome-free/webfonts/', + // to: 'vendor/fontawesome/webfonts/' + // }, + // { + // from: './node_modules/@fortawesome/fontawesome-free/css/all.min.css', + // to: 'vendor/fontawesome/css/' + // }, + // // element-plus + // { + // from: './node_modules/element-plus/lib/theme-chalk/fonts/', + // to: 'vendor/element-plus/lib/theme-chalk/fonts/' + // }, + // { + // from: './node_modules/element-plus/lib/theme-chalk/index.css', + // to: 'vendor/element-plus/lib/theme-chalk/' + // } + ] + }) + ], + optimization: { + minimizer: [ + new TerserPlugin({ + extractComments: false + }) + ] } - }, - performance: { - hints: false - }, - devtool: 'inline-source-map', - target: ['web', 'es2020'], - stats: { - preset: 'errors-only', - builtAt: true, - timings: true - }, - plugins: [ - new MiniCssExtractPlugin({ - filename: '[name].css' - }), - new HtmlWebpackPlugin({ - filename: 'index.html', - template: './src/index.pug', - inject: false, - minify: false - }), - new HtmlWebpackPlugin({ - filename: 'vr.html', - template: './src/vr.pug', - inject: false, - minify: false - }), - new CopyPlugin({ - patterns: [ - // assets - { - from: './images/', - to: './images/' - } - // // vscode-codicons - // { - // from: './node_modules/vscode-codicons/dist/codicon.css', - // to: 'vendor/vscode-codicons/' - // }, - // { - // from: './node_modules/vscode-codicons/dist/codicon.ttf', - // to: 'vendor/vscode-codicons/' - // }, - // // fontawesome - // { - // from: './node_modules/@fortawesome/fontawesome-free/webfonts/', - // to: 'vendor/fontawesome/webfonts/' - // }, - // { - // from: './node_modules/@fortawesome/fontawesome-free/css/all.min.css', - // to: 'vendor/fontawesome/css/' - // }, - // // element-plus - // { - // from: './node_modules/element-plus/lib/theme-chalk/fonts/', - // to: 'vendor/element-plus/lib/theme-chalk/fonts/' - // }, - // { - // from: './node_modules/element-plus/lib/theme-chalk/index.css', - // to: 'vendor/element-plus/lib/theme-chalk/' - // } - ] - }) - ], - optimization: { - minimizer: [ - new TerserPlugin({ - extractComments: false - }) - ] - } };