diff --git a/package-lock.json b/package-lock.json index c149e25..4a1f9db 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2385,7 +2385,6 @@ "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz", "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==", "dev": true, - "optional": true, "requires": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" @@ -2591,6 +2590,15 @@ "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==", "dev": true }, + "axios": { + "version": "0.21.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.0.tgz", + "integrity": "sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw==", + "dev": true, + "requires": { + "follow-redirects": "^1.10.0" + } + }, "babel-eslint": { "version": "10.1.0", "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz", @@ -2731,8 +2739,7 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz", "integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==", - "dev": true, - "optional": true + "dev": true }, "bluebird": { "version": "3.7.2", @@ -3251,7 +3258,6 @@ "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.3.tgz", "integrity": "sha512-DtM3g7juCXQxFVSNPNByEC2+NImtBuxQQvWlHunpJIS5Ocr0lG306cC7FCi7cEA0fzmybPUIl4txBIobk1gGOQ==", "dev": true, - "optional": true, "requires": { "anymatch": "~3.1.1", "braces": "~3.0.2", @@ -3268,7 +3274,6 @@ "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", "dev": true, - "optional": true, "requires": { "fill-range": "^7.0.1" } @@ -3278,7 +3283,6 @@ "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", "dev": true, - "optional": true, "requires": { "to-regex-range": "^5.0.1" } @@ -3287,15 +3291,13 @@ "version": "7.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", - "dev": true, - "optional": true + "dev": true }, "to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", "dev": true, - "optional": true, "requires": { "is-number": "^7.0.0" } @@ -6529,7 +6531,6 @@ "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", "dev": true, - "optional": true, "requires": { "binary-extensions": "^2.0.0" } @@ -6974,6 +6975,12 @@ "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==", "dev": true }, + "klona": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.4.tgz", + "integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==", + "dev": true + }, "launch-editor": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.2.1.tgz", @@ -6993,6 +7000,12 @@ "launch-editor": "^2.2.1" } }, + "leaflet": { + "version": "1.7.1", + "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz", + "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw==", + "dev": true + }, "levn": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz", @@ -8225,8 +8238,7 @@ "version": "2.2.2", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz", "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==", - "dev": true, - "optional": true + "dev": true }, "pify": { "version": "4.0.1", @@ -9148,7 +9160,6 @@ "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz", "integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==", "dev": true, - "optional": true, "requires": { "picomatch": "^2.2.1" } @@ -9503,6 +9514,58 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true }, + "sass": { + "version": "1.29.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.29.0.tgz", + "integrity": "sha512-ZpwAUFgnvAUCdkjwPREny+17BpUj8nh5Yr6zKPGtLNTLrmtoRYIjm7njP24COhjJldjwW1dcv52Lpf4tNZVVRA==", + "dev": true, + "requires": { + "chokidar": ">=2.0.0 <4.0.0" + } + }, + "sass-loader": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.1.0.tgz", + "integrity": "sha512-ZCKAlczLBbFd3aGAhowpYEy69Te3Z68cg8bnHHl6WnSCvnKpbM6pQrz957HWMa8LKVuhnD9uMplmMAHwGQtHeg==", + "dev": true, + "requires": { + "klona": "^2.0.4", + "loader-utils": "^2.0.0", + "neo-async": "^2.6.2", + "schema-utils": "^3.0.0", + "semver": "^7.3.2" + }, + "dependencies": { + "loader-utils": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", + "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", + "dev": true, + "requires": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + } + }, + "schema-utils": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz", + "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==", + "dev": true, + "requires": { + "@types/json-schema": "^7.0.6", + "ajv": "^6.12.5", + "ajv-keywords": "^3.5.2" + } + }, + "semver": { + "version": "7.3.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz", + "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==", + "dev": true + } + } + }, "sax": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", @@ -11232,6 +11295,12 @@ "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "dev": true }, + "vuex": { + "version": "4.0.0-rc.1", + "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.0-rc.1.tgz", + "integrity": "sha512-zgXVCQygF1Sm7ezyudEEMynoV2PBxZdcjE12D0BY1xIKZMrA7GFP6xqADTEAzwfVemXboExJ+/KThfxJFtM/5w==", + "dev": true + }, "watchpack": { "version": "1.7.5", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz", diff --git a/package.json b/package.json index be0bef7..4fde738 100644 --- a/package.json +++ b/package.json @@ -16,9 +16,14 @@ "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/compiler-sfc": "^3.0.0", + "axios": "^0.21.0", "babel-eslint": "^10.1.0", "eslint": "^6.7.2", - "eslint-plugin-vue": "^7.0.0-0" + "eslint-plugin-vue": "^7.0.0-0", + "leaflet": "^1.7.1", + "sass": "^1.29.0", + "sass-loader": "^10.1.0", + "vuex": "^4.0.0-rc.1" }, "eslintConfig": { "root": true, diff --git a/public/css/dynmap_style.css b/public/css/dynmap_style.css new file mode 100644 index 0000000..3bdc79b --- /dev/null +++ b/public/css/dynmap_style.css @@ -0,0 +1,1019 @@ +/* TILE DEBUGGING */ +/*.leaflet-tile { + margin: -1; + border: 1px solid red; +}*/ + +/******************* + * Attribution placement + */ +.leaflet-control-attribution { + margin-right: 20px !important; +} + +/******************* + * Page setup + */ + +.dynmap .map .tile img, img { + image-rendering: -moz-crisp-edges; + image-rendering: pixelated; + -ms-interpolation-mode: nearest-neighbor; +} + + +/******************* + * fieldset and legend styles + */ + +.dynmap fieldset { + border: none; + border-top: 1px solid rgba(196,196,196,0.4); +} + +.dynmap legend { + padding: 8px 4px; + font-weight: bold; + color: #fff; +} + +.leaflet-control-layers { + background-color: #bbb; +} + +.leaflet-control-layers:hover { + background-color: #bbb; +} + +.leaflet-control-zoom-in { + background-color: #eee; + } + +.leaflet-control-zoom-out { + background-color: #eee; + } + +.leaflet-control-zoom-in:hover { + background-color: #fff; + } + +.leaflet-control-zoom-out:hover { + background-color: #fff; + } + + +/******************* + * Map Setup + */ + +.dynmap > .map { + width: 100%; + height: 100%; + background: #000; + z-index: 0; +} + +/* Map Controls */ +.gmnoprint{ + margin-top:-75px; + margin-left:-20px; +} + + +/******************* + * Alerts are pretty. + */ + +.alertbox { + position: fixed; + width: 50%; + z-index: 999; + + top: 0; + left: 0; + right: 0; + + text-align: center; + font-size: 16px; + font-weight: bold; + + color: #fff; + background: #c00; + + border-color: #a00; + + margin: auto; + padding: 8px; +} + + +/******************* + * shared rules + */ + +.dynmap .panel ul, .dynmap .panel li { + list-style: none; + + padding: 0; + margin: 0; +} + +.maplist li a, +.playerlist li a { + outline: none; + text-decoration: none; +} + +.alertbox, +.largeclock { + border-style: solid; + border-width: 0px 1px 1px 1px; + + -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4); + -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4); + -o-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4); + + -moz-border-radius: 0 0 3px 3px; + -webkit-border-radius: 0 0 3px 3px; + -o-border-radius: 0 0 3px 3px; + + box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4); + border-radius: 0 0 3px 3px; +} + +/******************* + * sidebar panels + */ + +.dynmap .sidebar { + + display: block; + position: absolute; + z-index: 120; + + top: 0px; + right: 0px; + + height: 100%; + + background: rgb(0,0,0); /* FU IE */ + background: rgba(0,0,0,0.6); + color: #fff; + + border-left: 1px solid rgba(0,0,0,0.5); +} + +.dynmap .hitbar { + + display: block; + position: absolute; + z-index: 110; + + top: 0px; + + height: 100%; + width: 16px; + + text-align: center; + + background: url(../images/sidebar_hint.png) rgb(0,0,0); + background: url(../images/sidebar_hint.png) rgba(0,0,0,0.6); + background-repeat: no-repeat; + background-position:center; + + border: 1px solid rgba(0,0,0,0.5); +} + +/* magic and metrics */ + +/* The following only applies to desktops, not to mobile devices */ +@media screen and (min-device-width: 640px) { + .dynmap .sidebar { + -moz-transition: all 0.6s ease-in-out; + -webkit-transition: all 0.6s ease-in-out; + -o-transition: all 0.6s ease-in-out; + transition: all 0.6s ease-in-out; + } + + .dynmap .hitbar { + -moz-transition: all 0.6s ease-in-out; + -webkit-transition: all 0.6s ease-in-out; + -o-transition: all 0.6s ease-in-out; + transition: all 0.6s ease-in-out; + } + + .dynmap .sidebar:hover { + margin-right: 0px; + } + + .dynmap .sidebar < .hitbar:hover { + margin-right: 0px; + } + + .dynmap .sidebar:hover .hitbar { + right: -120px; + } +} + +.dynmap .sidebar.pinned { + margin-right: 0px; +} + +.dynmap .sidebar.pinned .hitbar { + right: -120px; +} + +/* pinning */ + +.dynmap .sidebar .panel > .pin { + position: absolute; + + right: 8px; + top: 7px; + + width: 16px; + height: 16px; + + background-image: url(../images/window_close.png); +} + +.dynmap .sidebar .panel > .pin:hover { + background-image: url(../images/window_pinned_hover.png); +} + +.dynmap .sidebar.pinned .panel > .pin:hover { + background-image: url(../images/window_close_hover.png); +} + +.dynmap .sidebar.pinned .panel > .pin { + background-image: url(../images/window_pinned.png); +} + + +/******************* + * Sidebar clock style + */ +/* +.dynmap .panel .clock { + display: inline-block; + height: 16px; + z-index:50; + + font-weight: bold; + background-repeat: no-repeat; + padding-left: 20px; + margin-left: 8px; +} +*/ +.largeclock.digitalclock { + text-align: center; + font-size: 50px; + font-weight: bold; +} + +.digitalclock { + text-align: center; + font-size: 20px; + font-weight:bold; +} + +.digitalclock.night { + /* background-image: url(../images/clock_night.png); */ + color: #dff; +} + +.digitalclock.day { + /* background-image: url(../images/clock_day.png); */ + color: #fd3; +} + +.digitalclock.night, .digitalclock.day { + -moz-transition: color 8s 8s linear; + -webkit-transition: color 8s 8s linear; + -o-transition: color 8s 8s linear; + transition: color 8s 8s linear; +} + + +/******************* + * Large clock style + */ + +.largeclock { + position: absolute; + top: 0; + left: 0; + right: 0; + border-color: rgba(0,0,0,0.5); + width: 150px; + height: 60px; + background: rgba(0,0,0,0.6); + z-index:50; + + margin: auto; +} + +.timeofday { + background-repeat: no-repeat; +} + +.timeofday.sun { + background-image: url(../images/sun.png); +} + +.timeofday.moon { + background-image: url(../images/moon.png); +} + +.timeofday.digitalclock { + position: relative; + bottom: 25px; +} + +/******************* + * Clock weather style + */ + +.weather { + position: absolute; + top: 5px; + right: 0px; + width: 32px; + height: 32px; + display: block; + background-repeat: no-repeat; +} + +.weather.sunny_day { + background-image: url(../images/weather_sunny_day.png); +} + +.weather.stormy_day { + background-image: url(../images/weather_stormy_day.png); +} +.weather.thunder_day { + background-image: url(../images/weather_thunder_day.png); +} + +.weather.sunny_night { + background-image: url(../images/weather_sunny_night.png); +} + +.weather.stormy_night { + background-image: url(../images/weather_stormy_night.png); +} +.weather.thunder_night { + background-image: url(../images/weather_thunder_night.png); +} + +/******************* + * generic sidebar sublist styling + */ + +.dynmap .panel .subsection { + display: block; + clear: both; + + width: 100%; + line-height: 18px; + margin: 0 0 30px 0; + + border-bottom: 1px solid rgba(128,128,128,0.3); + +} + +.dynmap .sublist .item { + display: block; + float: left; + + height: 18px; + width: 18px; + + padding: 2px; + margin: 5px 2px; + + border-radius: 3px; + -moz-border-radius: 3px; + + background: rgba(32,32,32,0.6); + border: 1px solid rgba(64,64,64,0.6); +} + +.dynmap .sublist .item:hover { + background: rgba(64,64,64,0.6); + border: 1px solid rgba(128,128,128,0.6); +} + +.dynmap .sublist .item.selected { + background: rgba(128,128,128,0.5); + border: 1px solid rgba(255,255,255,0.5); +} + +.dynmap .sublist .item > a { + display: block; + + text-indent: -99999px; + outline: none; +} + +.dynmap .sublist .item > a { + background-repeat: no-repeat; + background-position: center; +} + +/******************* + * player list-specific styles + */ + +.dynmap .playerlist .player { + + display: inline-block; + float: left; + width: 100%; + + padding: 4px 0; + border: 3px solid transparent; +} + +.dynmap .playerlist .player.otherworld { + opacity: 0.5; +} + +.dynmap .playerlist .player:hover { + background: rgba(64,64,64,0.6); +} + +.dynmap .playerlist .player a { + color: #fff; +} + +.dynmap .playerlist .playerIcon img { + width: 16px; + height: 16px; +} + +.dynmap .playerlist .playerIcon > * { + vertical-align: middle; + border: none; +} + +.dynmap .playerlist .playerIcon { + width: 16px; + height: 16px; + + display: block; + float: left; + + margin: 0px 4px 0px 2px; +} + +.dynmap .playerlist .player.following { + background: rgba(128,128,128,0.5); + border: 1px solid rgba(255,255,255,0.5); + + border-radius: 3px; + -moz-border-radius: 3px; + + padding: 6px 2px; + + width: -webkit-calc(100% - 6px); + width: calc(100% - 6px); +} + +.dynmap .playerlist .player:hover .playericon { + background: url(../images/player_follow_off.png) no-repeat; +} + +.dynmap .playerlist .player.following .playericon { + background: url(../images/player_follow_on.gif) no-repeat; +} + +.dynmap .playerlist .player.following .playericon > *, +.dynmap .playerlist .player:hover .playericon > * { + visibility: hidden; +} + +/******************* + * Playerlist Scrolling + */ + +.panel .scrollup { + border: 1px solid rgba(64,64,64,0.6); + background: url(../images/scrollup.png) rgba(32,32,32,0.6); + + margin-bottom: 4px; + + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + -o-border-radius: 2px; + border-radius: 2px; +} + +.panel .scrolldown { + border: 1px solid rgba(64,64,64,0.6); + background: url(../images/scrolldown.png) rgba(32,32,32,0.6); + + margin-top: 4px; + + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + -o-border-radius: 2px; + border-radius: 2px; +} + +.panel .scrollup:hover, .panel .scrolldown:hover { + border: 1px solid rgba(128,128,128,0.6); + background: url(../images/scrollup.png) rgba(64,64,64,0.6); +} + +.panel .scrollup:active, .panel .scrolldown:active { + border: 1px solid rgba(255,255,255,0.5); + background: url(../images/scrollup.png) rgba(128,128,128,0.5); +} + +.panel .scrolldown:hover { + border: 1px solid rgba(128,128,128,0.6); + background: url(../images/scrolldown.png) rgba(64,64,64,0.6); +} + +.panel .scrolldown:active { + border: 1px solid rgba(255,255,255,0.5); + background: url(../images/scrolldown.png) rgba(128,128,128,0.5); +} + +.panel .scrollup, .panel .scrollup:active, .panel .scrollup:hover, +.panel .scrolldown, .panel .scrolldown:active, .panel .scrolldown:hover { + height: 18px; + width: 100%; + + background-repeat: no-repeat; + background-position: center; +} + +.sidebar .list { + overflow:hidden; +} + +.sidebar .content { + min-height: 24px; +} + +/******************* + * players on the map + */ + +/* smooth player movements (contrib from KillahKiwi) */ +.dynmap .playerMarker { + -moz-transition: all 0.6s ease-in-out 0s; + -webkit-transition: all 0.6s ease-in-out 0s; + -o-transition: all 0.6s ease-in-out 0s; + transition: all 0.6s ease-in-out 0s; +} + +.dynmap .playerIcon { + margin-top: -16px; + margin-left: -16px; + width: 32px; + height: 32px; +} + +.dynmap .playerIconSm { + margin-top: -8px; + margin-left: -8px; + width: 16px; + height: 16px; +} + +.dynmap .playerName { + position: absolute; + top: -19px; + left: 18px; + z-index:20; + + white-space: nowrap; + + color: #fff; + background: rgba(0,0,0,0.6); + padding: 2px; + + -moz-border-radius: 3px; + border-radius: 3px; +} + +.dynmap .playerNameSm { + position: absolute; + top: -16px; + left: 10px; + + white-space: nowrap; + + color: #fff; + background: rgba(0,0,0,0.6); + padding: 2px; + + -moz-border-radius: 3px; + border-radius: 3px; +} + +.dynmap .playerNameNoHealth { + top: -7px; +} + +.dynmap .healthContainer { + display: block; + position: absolute; + top: 1px; + left: 18px; + + width: 50px; + + background: rgba(0,0,0,0.6); + padding: 2px; + + -moz-border-radius: 3px; + border-radius: 3px; + + z-index: 21; +} + +.dynmap .healthContainerSm { + display: block; + position: absolute; + top: -2px; + left: 10px; + + width: 50px; + + background: rgba(0,0,0,0.6); + padding: 2px; + + -moz-border-radius: 3px; + border-radius: 3px; +} + +.dynmap .playerHealth { + height: 7px; + + background: url(../images/heart.png) repeat-x left center; +} + +.dynmap .playerHealthBackground { + height: 7px; + width: 50px; + + background: url(../images/heart_depleted.png) repeat-x left center; +} + +.dynmap .playerArmor { + height: 7px; + + background: url(../images/armor.png) repeat-x left center; +} + +.dynmap .playerArmorBackground { + height: 7px; + width: 50px; + + background: url(../images/armor_depleted.png) repeat-x left center; +} + + +/******************* + * Compass + */ + +.compass, .compass_NE, .compass_SE, .compass_NW, .compass_SW { + display: block; + position: absolute; + z-index: 10; + top: 20px; + right: 32px; + height: 84px; + width: 83px; + background-repeat: no-repeat; +} + +.compass, .compass_SE { + background-image: url(../images/compass.png); +} + +.compass_NE { + background-image: url(../images/compass_NE.png); +} + +.compass_NW { + background-image: url(../images/compass_NW.png); +} + +.compass_SW { + background-image: url(../images/compass_SW.png); +} + +.compass_flat, .compass_N, .compass_E, .compass_W, .compass_S { + top: 10px; + right: 21px; + + height: 105px; + width: 105px; +} + +.compass_flat, .compass_S { + background-image: url(../images/compass_flat.png); +} + +.compass_N { + background-image: url(../images/compass_N.png); +} + +.compass_E { + background-image: url(../images/compass_E.png); +} + +.compass_W { + background-image: url(../images/compass_W.png); +} + +.mobilecompass { + top: 5px; + right: 10px; + height: 42px; + width: 42px; + background-size: cover; +} + +/******************* + * Chat + */ + +.chat { + position: absolute; + bottom: 0px; + left: 32px; + z-index:50; + + border-color: rgba(0,0,0,0.5); + background: rgba(0,0,0,0.6); + + border-style: solid; + border-width: 1px 1px 0px 1px; + + -moz-border-radius: 3px 3px 0px 0px; + -webkit-border-radius: 3px 3px 0px 0px; + -o-border-radius: 3px 3px 0px 0px; + border-radius: 3px 3px 0px 0px; + + margin-left: 10px; +} + +.chatinput { + + width: 608px; + height: 16px; + + outline: none; + color: #fff; + background-color: #000000; + + border: 0px; + background: rgba(0, 0, 0, 0.6); + background-image: url(../images/chat_cursor.png); + background-repeat: no-repeat; + background-position: 1px center; + + margin: 4px; + padding: 1px 1px 1px 15px; +} + +.chatsendbutton { + background-color: #bbb; +} + +.loginbutton { + color: #000; + font-family: sans-serif; + font-size: 11px; + border: 1px solid rgba(128,128,128,0.6); + background-color: #bbb; + border-style: solid; + padding: 2px; + -moz-border-radius: 5px; + border-radius: 5px; + cursor: pointer; + margin: 0; +} + +.messagelist { + color: white; + overflow: hidden; + + width: 622px; + max-height: 6em; + + margin: 4px 4px 0px 4px; + padding: 1px; +} + +.scrollback:hover { + overflow-y: auto !important; +} + + +.messagerow { + position: relative; + max-height: 200px; + + left: 0px; + bottom: 0px; + + color: #fff; + font-weight: bold; +} + +.messageicon { + position: relative; + top: 1px; + left: 0px; +} + +.messagetext { + position: relative; + top: -3px; + left: 0px; +} + +.leaflet-popup { + color: black; +} + +.balloonmessage { + word-wrap: break-word; +} + +/* Marker styles */ +.dynmap .mapMarker .markerName { + display: none; + z-index: 101; +} + +.dynmap .mapMarker:hover .markerName, +.dynmap .mapMarker .markerName-show { + display: block; + position: absolute; + z-index: 16; + + white-space: nowrap; + + color: #fff; + background: rgba(0,0,0,0.6); + padding: 2px; + + -moz-border-radius: 3px; + border-radius: 3px; +} + +.dynmap .mapMarker .markerName16x16 { + top: -6px; + left: 10px; +} + +.dynmap .mapMarker .markerName8x8 { + top: -4px; + left: 6px; +} + +.dynmap .mapMarker .markerName32x32 { + top: -8px; + left: 18px; +} + +.dynmap .mapMarker .markerIcon16x16 { + transform: translate(-50%, -50%); + width: 16px; + height: 16px; +} + +.dynmap .mapMarker .markerIcon8x8 { + transform: translate(-50%, -50%); + width: 8px; + height: 8px; +} + +.dynmap .mapMarker .markerIcon32x32 { + transform: translate(-50%, -50%); + width: 32px; + height: 32px; +} + +.dynmap .mapMarker .markerName_offline_players { + font-style: italic; +} + +.dynmap .coord-control { + color: #000; + + border: 1px solid rgba(128,128,128,0.6); + background-color: #bbb; + border-style: solid; + + padding: 2px; + min-width: 80px; + -moz-border-radius: 5px; + border-radius: 5px; +} + +.dynmap .coord-control-noy { + width: 60px; +} + +.dynmap .coord-control .coord-control-label { + +} + +.dynmap .coord-control .coord-control-value { + font-weight: bold; +} + +.dynmap .dynmap-link { + -moz-border-radius: 7px; + -webkit-border-radius: 7px; + border-radius: 7px; + padding: 2px; + background: rgba(0, 0, 0, 0.25); + } +.dynmap .dynmap-link a { + background-color: rgba(255, 255, 255, 0.75); + } +.dynmap .dynmap-link a { + background-position: 50% 50%; + background-repeat: no-repeat; + display: block; + } +.dynmap .dynmap-link a { + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + border-radius: 4px; + width: 19px; + height: 19px; + } +.dynmap .dynmap-link a:hover { + background-color: #fff; + } +.leaflet-big-buttons .dynmap-link a { + width: 27px; + height: 27px; + } +.dynmap .dynmap-link-button { + background-image: url(images/link.png); + } + +/* Login/register panel */ +.dynmaplogin { + text-align: center; + width: 100%; + font-weight: bold; + color: #FFFFFF; + background: #000000; +} + +table.loginregister { + color: #ffffff; + border: 1px solid rgba(64,64,64,0.6); + background: #bbb; + font-weight: bold; + margin: auto; +} + +td.login { + vertical-align: top; + color: #000000; + background-color: #bbb; + border: 1px solid rgba(64,64,64,0.6); + font-weight: bold; + margin: 2em; + width: 40em; +} + +td.register { + vertical-align: top; + color: #000000; + background-color: #bbb; + border: 1px solid rgba(64,64,64,0.6); + font-weight: bold; + margin: 2em; + width: 40em; +} + +div.statusmessage { + color: #FF0000; + font-weight: bold; + font-size: 24px; + +} + +.logincontainer { + background-color: rgba(0,0,0,0.0); +} + +.pinnedloginbutton { + margin-right: 201px; +} diff --git a/public/css/rtgame.css b/public/css/rtgame.css new file mode 100644 index 0000000..d368686 --- /dev/null +++ b/public/css/rtgame.css @@ -0,0 +1,371 @@ +/* latin */ +@font-face { + font-family: 'Raleway'; + font-style: normal; + font-weight: 400; + src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v14/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +html { + font-size: .625em; +} + +body { + font-family: Raleway, sans-serif; + color: #cccccc; + text-shadow: 0.1rem 0.1rem #000000; + letter-spacing: 0.02rem; + font-size: 1.2em; +} + +.dynmap .sidebar { + background-color: #222222; + border: none; + color: inherit; + width: 21rem; + box-shadow: -2px 0px 4px 1px rgba(17,17,17,0.8); +} + +.dynmap .panel { + padding: 1rem 1.5rem; +} + +.panel .scrollup, +.panel .scrolldown { + background-color: #111111; + border: none; + cursor: pointer; + height: 2.5rem; +} + +.panel .scrollup:hover, +.panel .scrollup:focus , +.panel .scrolldown:hover, +.panel .scrolldown:focus { + border: none; + height: 2.5rem; +} + +.dynmap .sidebar .panel > .pin { + right: 1.5rem; + top: 1.5rem; + width: 2rem; + height: 2rem; + background-size: cover; +} + +.dynmap .panel .section { + border: none; + padding: 0; + margin: 0 0 2rem; +} + +.dynmap .panel .section legend { + color: #eeeeee; + font-size: 1.4rem; + letter-spacing: 0.04rem; + padding: 0.8rem 0.4rem 0.8rem 0; + margin-bottom: 0.5rem; +} + +.dynmap .panel .subsection { + margin-bottom: 1rem; + border-bottom: none; + display: flex; + align-items: center; +} + +.dynmap .panel .sublist { + display: flex; + align-items: center; + flex: 0 0 auto; + margin-left: auto; +} + +.dynmap .panel .sublist .item { + float: none; + background-color: #111111 !important; + width: 2.6rem; + height: 2.6rem; + border-radius: 0.2rem; + cursor: pointer; + margin: 0; +} + +.dynmap .panel .sublist .item + .item { + margin-left: 0.5rem; +} + +.dynmap .panel .sublist .item a { + display: block; + width: 100%; + height: 100%; +} + +.dynmap .panel .playerlist { + display: flex; + flex-direction: column; +} + +.dynmap .playerlist .player { + display: inline-block; + float: none; + width: auto; + padding: 0; + border: none; + padding: 0.5rem 0.2rem; + display: flex; + align-items: center; + cursor: pointer; +} + +.dynmap .playerlist .player.following { + border: none; + border-radius: 0; + padding: 0.5rem 0.2rem; +} + +.dynmap .playerlist .player .playerIcon { + margin: 0 1rem 0 0; + padding: 0; +} + +.dynmap .panel .playerlist .player a { + color: inherit; +} + +.dynmap .hitbar { + background-color: #222222; +} + +.leaflet-container { + font-family: inherit; +} + +.leaflet-left { + display: flex; + flex-direction: column; + height: 50%; + align-items: flex-start; +} + +.leaflet-left:before, +.leaflet-left.leaflet-bottom:after { + content: ''; + position: absolute; + display: block; + top: 0; + left: 0; + height: 100%; + width: 4rem; + background-color: #222222; + z-index: -1; + box-shadow: 2px -4px 4px 1px rgba(17,17,17,0.8); +} + +.leaflet-left.leaflet-bottom:after { + top: auto; + bottom: 0; + left: 4rem; + height: 4rem; + right: 0; + width: auto; + box-shadow: 0 -2px 4px 1px rgba(17,17,17,0.8); + position: fixed; +} + +.leaflet-left.leaflet-top { + justify-content: flex-start; + z-index: 2; +} + +.leaflet-left.leaflet-bottom { + justify-content: flex-end; + z-index: 1; + box-shadow: 2px 0px 4px 1px rgba(17,17,17,0.8); +} + +.leaflet-left .leaflet-control { + margin-left: 0; + position: relative; + z-index: 2; +} + +.leaflet-top .leaflet-control { + margin-top: 2rem; +} + +.leaflet-container .leaflet-control-zoom { + margin-top: 1rem; + border: none; + order: 1; +} + +.leaflet-control-zoom a, +.leaflet-control-zoom a.leaflet-control-zoom-disabled, +.leaflet-control-layers, +.leaflet-control-layers-list, +.dynmap .dynmap-link a { + background-color: #111111; + color: #eeeeee; +} + +.leaflet-bar, +.leaflet-control-layers, +.dynmap .dynmap-link a { + box-shadow: none; +} + +.leaflet-control-zoom a, +.leaflet-control-layers-toggle, +.dynmap .dynmap-link a { + width: 4rem; + height: 4rem; + border-radius: 0; +} + +.leaflet-control-zoom a:hover, +.leaflet-control-zoom a:focus, +.dynmap .dynmap-link a:hover, +.dynmap .dynmap-link a:focus, +.leaflet-control-layers:hover, +.leaflet-control-layers:focus { + background-color: rgba(64,64,64,0.6); + color: #ffffff; +} + +.leaflet-control-zoom a { + border: none; + border-radius: 0; + font-size: 2rem; + line-height: 2rem; + padding: 1rem; + box-sizing: border-box; +} + +.leaflet-control-zoom a.leaflet-control-zoom-disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.leaflet-control-layers { + border-radius: 0; + order: 2; +} + +.leaflet-control-layers-list { + position: absolute; + top: 0; + left: 4rem; + width: 15rem; + padding: 1rem; + color: #cccccc; +} + +.leaflet-control-layers-expanded { + padding: 0; +} + +.leaflet-control-layers-expanded .leaflet-control-layers-toggle { + display: block; +} + +.leaflet-control-layers-expanded .leaflet-control-layers-list { + position: absolute; +} + +.dynmap .dynmap-link { + padding: 0; + margin-bottom: 0; +} + +.largeclock.digitalclock { + position: fixed; + bottom: 0; + margin: 0; + right: 4rem; + top: auto; + right: auto; + left: 4rem; + background-color: #111111; + height: 4rem; + border: none; + font-size: 3rem; + line-height: 4rem; + box-shadow: none; +} + +.dynmap .coord-control { + position: fixed; + bottom: 0; + left: 21rem; + background: none; + border: none; + padding: 0; + color: inherit; + width: auto; + font-size: 2rem; + white-space: nowrap; + margin: 0; + height: 4rem; + line-height: 4rem; +} + +.leaflet-container .leaflet-control-attribution { + background-color: transparent; + box-shadow: none; + margin: 0; + width: 4rem; + height: 4rem; + order: 0; + padding: 0; +} + +.leaflet-container .leaflet-control-attribution a { + width: 100%; + height: 100%; + display: block; + padding: 1rem 0.5rem; + box-sizing: border-box; +} + +.leaflet-container .leaflet-control-attribution img { + display: block; + max-width: 100% !important; +} + +.dynmap .mapMarker:hover .markerName, +.dynmap .mapMarker .markerName-show, +.dynmap .playerNameSm { + padding: 0.2rem 0.5rem; + color: #eeeeee; +} + +.leaflet-touch .leaflet-control-layers, +.leaflet-touch .leaflet-control-zoom { + border: none; +} + +.leaflet-touch .leaflet-control-layers-toggle, +.leaflet-touch .leaflet-control-zoom a { + width: 4rem; + height: 4rem; +} + +.leaflet-touch .leaflet-bar-part { + border: none; +} + +.leaflet-touch .leaflet-bar-part-bottom, +.leaflet-touch .leaflet-bar-part-top { + border-radius: 0; +} + +/*.leaflet-touch .coord-control {*/ +/* display: none;*/ +/*}*/ + +.sidebar .content.worldlist { + min-height: 20rem; +} diff --git a/public/index.html b/public/index.html index 4123528..9b080c8 100644 --- a/public/index.html +++ b/public/index.html @@ -3,15 +3,27 @@ - + <%= htmlWebpackPlugin.options.title %> + + + + + + + + + + + + -
+
diff --git a/src/App.vue b/src/App.vue index 591a031..9a83335 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,26 +1,21 @@ diff --git a/src/api.js b/src/api.js new file mode 100644 index 0000000..a552f58 --- /dev/null +++ b/src/api.js @@ -0,0 +1,2 @@ +import axios from 'axios'; + diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue deleted file mode 100644 index 879051a..0000000 --- a/src/components/HelloWorld.vue +++ /dev/null @@ -1,58 +0,0 @@ - - - - - - diff --git a/src/components/Map.vue b/src/components/Map.vue new file mode 100644 index 0000000..a6608d2 --- /dev/null +++ b/src/components/Map.vue @@ -0,0 +1,19 @@ + + + + + \ No newline at end of file diff --git a/src/components/PlayerList.vue b/src/components/PlayerList.vue new file mode 100644 index 0000000..39fe14a --- /dev/null +++ b/src/components/PlayerList.vue @@ -0,0 +1,29 @@ + + + + + \ No newline at end of file diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue new file mode 100644 index 0000000..78bc349 --- /dev/null +++ b/src/components/Sidebar.vue @@ -0,0 +1,158 @@ + + + + + \ No newline at end of file diff --git a/src/main.js b/src/main.js index 01433bc..b66c527 100644 --- a/src/main.js +++ b/src/main.js @@ -1,4 +1,6 @@ import { createApp } from 'vue' import App from './App.vue' +import store from "@/store"; -createApp(App).mount('#app') +const app = createApp(App); +app.use(store).mount('#mcmap'); \ No newline at end of file diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/store.js b/src/store.js new file mode 100644 index 0000000..b45dc8e --- /dev/null +++ b/src/store.js @@ -0,0 +1,20 @@ +import {createStore} from 'vuex' + +const store = createStore({ + state() { + return { + servers: [], + worlds: [], + maps: [], + players: [], + + following: null, + + currentServer: null, + currentWorld: null, + currentMap: null, + } + } +}); + +export default store; \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..4df98a6 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,11 @@ +// tsconfig.json +{ + "compilerOptions": { + "target": "esnext", + "module": "esnext", + // this enables stricter inference for data properties on `this` + "strict": true, + "jsx": "preserve", + "moduleResolution": "node" + } +} \ No newline at end of file