diff --git a/package.json b/package.json
index 2999197..a38efaa 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
"packageManager": "yarn@4.2.2",
"devDependencies": {
"@parcel/packager-ts": "2.12.0",
+ "@parcel/transformer-sass": "2.12.0",
"@parcel/transformer-typescript-types": "2.12.0",
"typescript": ">=3.0.0"
}
diff --git a/webapp/src/css/style.css b/webapp/src/css/style.css
deleted file mode 100644
index 87c0aff..0000000
--- a/webapp/src/css/style.css
+++ /dev/null
@@ -1,246 +0,0 @@
-body {
- background-color: #3A6EA5;
- font-size: 11px;
-}
-
-#logonView {
- display: block;
-}
-
-#chatView {
- display: none;
-}
-
-.window {
- display: flex;
- flex-direction: column;
-
- position: fixed;
- .title-bar {
- user-select: none;
- }
-}
-
-.window-body {
- flex: 1;
-}
-
-#motdContainer {
- font-family: "Arial", sans-serif;
-}
-
-#bottomLinks {
- font-family: "Pixelated MS Sans Serif", Arial, sans-serif;
- background-color: silver;
- box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf,inset -2px -2px grey, inset 2px 2px #fff;
- padding: 0.95em;
- margin: 0px;
- left: 0;
- right: 0;
- transform: unset;
- text-align: center;
-
- li {
- padding: 0.2em;
- display: inline-block;
- border-right: 1px solid black;
- margin: 0;
- padding-right: 0.2rem;
- margin-right: 0.2rem;
- a {
- font-size: 14pt;
- color: #fff;
- }
- a:visited {
- font-size: 14pt;
- color: #fff;
- }
- }
-
- li:last-child {
- border-right: none;
- padding-right: 0;
- margin-right: 0;
- }
-
- list-style: none;
- display: block;
- position: fixed;
- bottom: 0;
- left: 50%;
- transform: translateX(-50%);
-}
-
-
-#logonWindowLogo {
- background-color: #ffffff;
- margin: 0;
- border-bottom: 8px solid;
- border-image: linear-gradient(to right, #013755, #9ec0da, #013755) 4;
- padding-top: 1.3rem;
- padding-bottom: 1.3rem;
- img {
- margin-left: auto;
- margin-right: auto;
- display: block;
- }
-}
-
-#logonForm {
- margin-top: 25px;
- margin-left: 15px;
- display: flex;
- flex-direction: column;
- div {
- display: flex;
- flex-direction: row;
- }
-}
-
-#logonUsername, #logonRoom {
- align-self: flex-end;
- margin-left: auto;
- width: 300px;
- margin-right: 90px;
- margin-bottom: 10px;
-}
-
-#logonButton {
- align-self: flex-end;
- margin-left: auto;
- margin-right: 90px;
-}
-
-
-#roomSettingsBody {
- display: flex;
- flex-direction: column;
-}
-
-#roomSettingsTabContent {
- flex: 1;
- margin-bottom: 8px;
-}
-
-/* CSS nesting isn't even a year old as of writing this, we should consider using SASS or something for now */
-#roomSettingsWallpaperTab {
- display: flex;
- flex-direction: column;
-
- .wallpaperMonitor {
- text-align: center;
- flex: 1;
- }
-
- #roomSettingsWallpaperSelect {
- height: 114px;
- display: flex;
- flex-direction: row;
-
- gap: 8px;
-
- .mainCol {
- display: flex;
- flex-direction: column;
- flex: 1;
-
- .tree-view {
- flex: 1;
- overflow: auto;
- }
- }
-
- #roomSettingsWallpaperURL {
- margin-top: 8px;
- width: 100%;
- }
- }
-}
-
-
-#chatBar {
- margin: 0;
- position: fixed;
- left: 0;
- right: 0;
- bottom: 0;
- display: flex;
- width: 100%;
- background-color: silver;
- box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf,inset -2px -2px grey, inset 2px 2px #fff;
- height: 3vh;
- padding: 4px;
- padding-left: 0px;
-}
-
-#chatInput {
- flex-grow: 1;
- margin-right: 4px;
- margin-left: 4px;
- height: 100%;
-}
-
-#chatSendBtn {
- font-weight: bold;
- margin-right: 4px;
-}
-
-.wallpaperMonitor {
- div {
- display: inline-block;
- position: relative;
- }
-
- .wallpaperMonitorFg {
- position: absolute;
- width: 152px;
- height: 112px;
- margin: 17px 16px;
- background: linear-gradient(160deg, #9b4f96, #0038a8);
- }
-}
-
-
-.fieldRowRight {
- justify-content: flex-end;
-}
-
-.context-menu {
- background-color: silver;
- box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf,inset -2px -2px grey, inset 2px 2px #fff;
- padding-left: 0.2em;
- padding-right: 0.2em;
- z-index: 1;
- ul {
- list-style: none;
- padding: 0;
- margin: 0;
- }
-}
-
-.context-menu-item {
- padding-left: 0.2rem;
- font-size: 11px;
-
- padding-bottom: 0.2rem;
- padding-top: 0.2rem;
-
- font-family: "Pixelated MS Sans Serif", Arial;
-
- cursor: pointer;
-
- padding: 5px;
- padding-right: 5em;
- margin-top: 2px;
- margin-bottom: 2px;
- list-style-type: none;
-}
-
-.context-menu-item:hover {
- background-color: navy;
- color: #fff;
-}
-
-.d-none {
- display: none;
-}
\ No newline at end of file
diff --git a/webapp/src/css/style.scss b/webapp/src/css/style.scss
new file mode 100644
index 0000000..9feca8d
--- /dev/null
+++ b/webapp/src/css/style.scss
@@ -0,0 +1,251 @@
+body {
+ background-color: #3a6ea5;
+ font-size: 11px;
+}
+
+#logonView {
+ display: block;
+}
+
+#chatView {
+ display: none;
+}
+
+.window {
+ display: flex;
+ flex-direction: column;
+ position: fixed;
+
+ .title-bar {
+ user-select: none;
+ }
+}
+
+.window-body {
+ flex: 1;
+}
+
+#motdContainer {
+ font-family: 'Arial', sans-serif;
+}
+
+#bottomLinks {
+ font-family: 'Pixelated MS Sans Serif', Arial, sans-serif;
+ background-color: silver;
+ box-shadow:
+ inset -1px -1px #0a0a0a,
+ inset 1px 1px #dfdfdf,
+ inset -2px -2px grey,
+ inset 2px 2px #fff;
+ padding: 0.95em;
+ margin: 0px;
+ right: 0;
+ bottom: 0;
+ text-align: center;
+ list-style: none;
+ display: block;
+ position: fixed;
+ left: 50%;
+ transform: translateX(-50%);
+
+ li {
+ padding: 0.2em;
+ display: inline-block;
+ border-right: 1px solid black;
+ margin: 0;
+ padding-right: 0.2rem;
+ margin-right: 0.2rem;
+ a {
+ font-size: 14pt;
+ color: #fff;
+ }
+ a:visited {
+ font-size: 14pt;
+ color: #fff;
+ }
+ }
+
+ li:last-child {
+ border-right: none;
+ padding-right: 0;
+ margin-right: 0;
+ }
+}
+
+#logonWindowLogo {
+ background-color: #ffffff;
+ margin: 0;
+ border-bottom: 8px solid;
+ border-image: linear-gradient(to right, #013755, #9ec0da, #013755) 4;
+ padding-top: 1.3rem;
+ padding-bottom: 1.3rem;
+ img {
+ margin-left: auto;
+ margin-right: auto;
+ display: block;
+ }
+}
+
+#logonForm {
+ margin-top: 25px;
+ margin-left: 15px;
+ display: flex;
+ flex-direction: column;
+ div {
+ display: flex;
+ flex-direction: row;
+ }
+}
+
+#logonUsername,
+#logonRoom {
+ align-self: flex-end;
+ margin-left: auto;
+ width: 300px;
+ margin-right: 90px;
+ margin-bottom: 10px;
+}
+
+#logonButton {
+ align-self: flex-end;
+ margin-left: auto;
+ margin-right: 90px;
+}
+
+#roomSettingsBody {
+ display: flex;
+ flex-direction: column;
+}
+
+#roomSettingsTabContent {
+ flex: 1;
+ margin-bottom: 8px;
+}
+
+#roomSettingsWallpaperTab {
+ display: flex;
+ flex-direction: column;
+
+ .wallpaperMonitor {
+ text-align: center;
+ flex: 1;
+ }
+
+ #roomSettingsWallpaperSelect {
+ height: 114px;
+ display: flex;
+ flex-direction: row;
+
+ gap: 8px;
+
+ .mainCol {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+
+ .tree-view {
+ flex: 1;
+ overflow: auto;
+ }
+ }
+
+ #roomSettingsWallpaperURL {
+ margin-top: 8px;
+ width: 100%;
+ }
+ }
+}
+
+#chatBar {
+ margin: 0;
+ position: fixed;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ display: flex;
+ width: 100%;
+ background-color: silver;
+ box-shadow:
+ inset -1px -1px #0a0a0a,
+ inset 1px 1px #dfdfdf,
+ inset -2px -2px grey,
+ inset 2px 2px #fff;
+ height: 3vh;
+ padding: 4px;
+ padding-left: 0px;
+}
+
+#chatInput {
+ flex-grow: 1;
+ margin-right: 4px;
+ margin-left: 4px;
+ height: 100%;
+}
+
+#chatSendBtn {
+ font-weight: bold;
+ margin-right: 4px;
+}
+
+.wallpaperMonitor {
+ div {
+ display: inline-block;
+ position: relative;
+ }
+
+ .wallpaperMonitorFg {
+ position: absolute;
+ width: 152px;
+ height: 112px;
+ margin: 17px 16px;
+ background: linear-gradient(160deg, #9b4f96, #0038a8);
+ }
+}
+
+.fieldRowRight {
+ justify-content: flex-end;
+}
+
+.context-menu {
+ background-color: silver;
+ box-shadow:
+ inset -1px -1px #0a0a0a,
+ inset 1px 1px #dfdfdf,
+ inset -2px -2px grey,
+ inset 2px 2px #fff;
+ padding-left: 0.2em;
+ padding-right: 0.2em;
+ z-index: 1;
+ ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ }
+}
+
+.context-menu-item {
+ padding-left: 0.2rem;
+ font-size: 11px;
+
+ padding-bottom: 0.2rem;
+ padding-top: 0.2rem;
+
+ font-family: 'Pixelated MS Sans Serif', Arial;
+
+ cursor: pointer;
+
+ padding: 5px;
+ padding-right: 5em;
+ margin-top: 2px;
+ margin-bottom: 2px;
+ list-style-type: none;
+
+ &:hover {
+ background-color: navy;
+ color: #fff;
+ }
+}
+
+.d-none {
+ display: none;
+}
diff --git a/webapp/src/html/index.html b/webapp/src/html/index.html
index 5802050..78e2232 100644
--- a/webapp/src/html/index.html
+++ b/webapp/src/html/index.html
@@ -8,7 +8,7 @@
-
+
diff --git a/webapp/src/html/testbed.html b/webapp/src/html/testbed.html
index 137a425..2e995fc 100644
--- a/webapp/src/html/testbed.html
+++ b/webapp/src/html/testbed.html
@@ -8,7 +8,7 @@
-
+
diff --git a/yarn.lock b/yarn.lock
index ce667c3..92b9f53 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1044,6 +1044,17 @@ __metadata:
languageName: node
linkType: hard
+"@parcel/transformer-sass@npm:2.12.0":
+ version: 2.12.0
+ resolution: "@parcel/transformer-sass@npm:2.12.0"
+ dependencies:
+ "@parcel/plugin": "npm:2.12.0"
+ "@parcel/source-map": "npm:^2.1.1"
+ sass: "npm:^1.38.0"
+ checksum: 10c0/d82ee90605f9a8f04a978e2d72faf9693a843a0875961b6e7aa40659197356f1be45d738840c52863607c7823f70630f819aebd843606af8ea00772b75ba7574
+ languageName: node
+ linkType: hard
+
"@parcel/transformer-svg@npm:2.12.0":
version: 2.12.0
resolution: "@parcel/transformer-svg@npm:2.12.0"
@@ -1600,6 +1611,16 @@ __metadata:
languageName: node
linkType: hard
+"anymatch@npm:~3.1.2":
+ version: 3.1.3
+ resolution: "anymatch@npm:3.1.3"
+ dependencies:
+ normalize-path: "npm:^3.0.0"
+ picomatch: "npm:^2.0.4"
+ checksum: 10c0/57b06ae984bc32a0d22592c87384cd88fe4511b1dd7581497831c56d41939c8a001b28e7b853e1450f2bf61992dfcaa8ae2d0d161a0a90c4fb631ef07098fbac
+ languageName: node
+ linkType: hard
+
"argparse@npm:^2.0.1":
version: 2.0.1
resolution: "argparse@npm:2.0.1"
@@ -1647,6 +1668,13 @@ __metadata:
languageName: node
linkType: hard
+"binary-extensions@npm:^2.0.0":
+ version: 2.3.0
+ resolution: "binary-extensions@npm:2.3.0"
+ checksum: 10c0/75a59cafc10fb12a11d510e77110c6c7ae3f4ca22463d52487709ca7f18f69d886aa387557cc9864fbdb10153d0bdb4caacabf11541f55e89ed6e18d12ece2b5
+ languageName: node
+ linkType: hard
+
"bl@npm:^4.0.3":
version: 4.1.0
resolution: "bl@npm:4.1.0"
@@ -1674,7 +1702,7 @@ __metadata:
languageName: node
linkType: hard
-"braces@npm:^3.0.3":
+"braces@npm:^3.0.3, braces@npm:~3.0.2":
version: 3.0.3
resolution: "braces@npm:3.0.3"
dependencies:
@@ -1772,6 +1800,25 @@ __metadata:
languageName: node
linkType: hard
+"chokidar@npm:>=3.0.0 <4.0.0":
+ version: 3.6.0
+ resolution: "chokidar@npm:3.6.0"
+ dependencies:
+ anymatch: "npm:~3.1.2"
+ braces: "npm:~3.0.2"
+ fsevents: "npm:~2.3.2"
+ glob-parent: "npm:~5.1.2"
+ is-binary-path: "npm:~2.1.0"
+ is-glob: "npm:~4.0.1"
+ normalize-path: "npm:~3.0.0"
+ readdirp: "npm:~3.6.0"
+ dependenciesMeta:
+ fsevents:
+ optional: true
+ checksum: 10c0/8361dcd013f2ddbe260eacb1f3cb2f2c6f2b0ad118708a343a5ed8158941a39cb8fb1d272e0f389712e74ee90ce8ba864eece9e0e62b9705cb468a2f6d917462
+ languageName: node
+ linkType: hard
+
"chownr@npm:^1.1.1":
version: 1.1.4
resolution: "chownr@npm:1.1.4"
@@ -2398,6 +2445,25 @@ __metadata:
languageName: node
linkType: hard
+"fsevents@npm:~2.3.2":
+ version: 2.3.3
+ resolution: "fsevents@npm:2.3.3"
+ dependencies:
+ node-gyp: "npm:latest"
+ checksum: 10c0/a1f0c44595123ed717febbc478aa952e47adfc28e2092be66b8ab1635147254ca6cfe1df792a8997f22716d4cbafc73309899ff7bfac2ac3ad8cf2e4ecc3ec60
+ conditions: os=darwin
+ languageName: node
+ linkType: hard
+
+"fsevents@patch:fsevents@npm%3A~2.3.2#optional!builtin":
+ version: 2.3.3
+ resolution: "fsevents@patch:fsevents@npm%3A2.3.3#optional!builtin::version=2.3.3&hash=df0bf1"
+ dependencies:
+ node-gyp: "npm:latest"
+ conditions: os=darwin
+ languageName: node
+ linkType: hard
+
"generate-function@npm:^2.3.1":
version: 2.3.1
resolution: "generate-function@npm:2.3.1"
@@ -2421,6 +2487,15 @@ __metadata:
languageName: node
linkType: hard
+"glob-parent@npm:~5.1.2":
+ version: 5.1.2
+ resolution: "glob-parent@npm:5.1.2"
+ dependencies:
+ is-glob: "npm:^4.0.1"
+ checksum: 10c0/cab87638e2112bee3f839ef5f6e0765057163d39c66be8ec1602f3823da4692297ad4e972de876ea17c44d652978638d2fd583c6713d0eb6591706825020c9ee
+ languageName: node
+ linkType: hard
+
"glob@npm:^10.2.2, glob@npm:^10.3.10, glob@npm:^10.3.4":
version: 10.4.5
resolution: "glob@npm:10.4.5"
@@ -2579,6 +2654,13 @@ __metadata:
languageName: node
linkType: hard
+"immutable@npm:^4.0.0":
+ version: 4.3.6
+ resolution: "immutable@npm:4.3.6"
+ checksum: 10c0/7d0952a768b4fadcee47230ed86dc9505a4517095eceaf5a47e65288571c42400c6e4a2ae21eca4eda957cb7bc50720213135b62cf6a181639111f8acae128c3
+ languageName: node
+ linkType: hard
+
"import-fresh@npm:^3.3.0":
version: 3.3.0
resolution: "import-fresh@npm:3.3.0"
@@ -2648,6 +2730,15 @@ __metadata:
languageName: node
linkType: hard
+"is-binary-path@npm:~2.1.0":
+ version: 2.1.0
+ resolution: "is-binary-path@npm:2.1.0"
+ dependencies:
+ binary-extensions: "npm:^2.0.0"
+ checksum: 10c0/a16eaee59ae2b315ba36fad5c5dcaf8e49c3e27318f8ab8fa3cdb8772bf559c8d1ba750a589c2ccb096113bb64497084361a25960899cb6172a6925ab6123d38
+ languageName: node
+ linkType: hard
+
"is-extglob@npm:^2.1.1":
version: 2.1.1
resolution: "is-extglob@npm:2.1.1"
@@ -2662,7 +2753,7 @@ __metadata:
languageName: node
linkType: hard
-"is-glob@npm:^4.0.3":
+"is-glob@npm:^4.0.1, is-glob@npm:^4.0.3, is-glob@npm:~4.0.1":
version: 4.0.3
resolution: "is-glob@npm:4.0.3"
dependencies:
@@ -3166,6 +3257,7 @@ __metadata:
resolution: "msagent-chat@workspace:."
dependencies:
"@parcel/packager-ts": "npm:2.12.0"
+ "@parcel/transformer-sass": "npm:2.12.0"
"@parcel/transformer-typescript-types": "npm:2.12.0"
typescript: "npm:>=3.0.0"
languageName: unknown
@@ -3360,6 +3452,13 @@ __metadata:
languageName: node
linkType: hard
+"normalize-path@npm:^3.0.0, normalize-path@npm:~3.0.0":
+ version: 3.0.0
+ resolution: "normalize-path@npm:3.0.0"
+ checksum: 10c0/e008c8142bcc335b5e38cf0d63cfd39d6cf2d97480af9abdbe9a439221fd4d749763bab492a8ee708ce7a194bb00c9da6d0a115018672310850489137b3da046
+ languageName: node
+ linkType: hard
+
"nth-check@npm:^2.0.1":
version: 2.1.1
resolution: "nth-check@npm:2.1.1"
@@ -3484,7 +3583,7 @@ __metadata:
languageName: node
linkType: hard
-"picomatch@npm:^2.3.1":
+"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.3.1":
version: 2.3.1
resolution: "picomatch@npm:2.3.1"
checksum: 10c0/26c02b8d06f03206fc2ab8d16f19960f2ff9e81a658f831ecb656d8f17d9edc799e8364b1f4a7873e89d9702dff96204be0fa26fe4181f6843f040f819dac4be
@@ -3705,6 +3804,15 @@ __metadata:
languageName: node
linkType: hard
+"readdirp@npm:~3.6.0":
+ version: 3.6.0
+ resolution: "readdirp@npm:3.6.0"
+ dependencies:
+ picomatch: "npm:^2.2.1"
+ checksum: 10c0/6fa848cf63d1b82ab4e985f4cf72bd55b7dcfd8e0a376905804e48c3634b7e749170940ba77b32804d5fe93b3cc521aa95a8d7e7d725f830da6d93f3669ce66b
+ languageName: node
+ linkType: hard
+
"real-require@npm:^0.2.0":
version: 0.2.0
resolution: "real-require@npm:0.2.0"
@@ -3801,6 +3909,19 @@ __metadata:
languageName: node
linkType: hard
+"sass@npm:^1.38.0":
+ version: 1.77.8
+ resolution: "sass@npm:1.77.8"
+ dependencies:
+ chokidar: "npm:>=3.0.0 <4.0.0"
+ immutable: "npm:^4.0.0"
+ source-map-js: "npm:>=0.6.2 <2.0.0"
+ bin:
+ sass: sass.js
+ checksum: 10c0/2bfd62794070352c804f949e69bd8bb5b4ec846deeb924251b2c3f7b503170fb1ae186f513f0166907749eb34e0277dee747edcb78c886fb471aac01be1e864c
+ languageName: node
+ linkType: hard
+
"secure-json-parse@npm:^2.7.0":
version: 2.7.0
resolution: "secure-json-parse@npm:2.7.0"
@@ -3942,6 +4063,13 @@ __metadata:
languageName: node
linkType: hard
+"source-map-js@npm:>=0.6.2 <2.0.0":
+ version: 1.2.0
+ resolution: "source-map-js@npm:1.2.0"
+ checksum: 10c0/7e5f896ac10a3a50fe2898e5009c58ff0dc102dcb056ed27a354623a0ece8954d4b2649e1a1b2b52ef2e161d26f8859c7710350930751640e71e374fe2d321a4
+ languageName: node
+ linkType: hard
+
"source-map@npm:^0.6.1":
version: 0.6.1
resolution: "source-map@npm:0.6.1"