From 3575afb31f2b934269b67d62637ed5096a8a6c99 Mon Sep 17 00:00:00 2001 From: Ben Coleman Date: Mon, 17 May 2021 09:20:46 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=93=20Add=20loading=20spinner=20&=20im?= =?UTF-8?q?prove=20local=20users?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/css/main.css | 52 +++++++++++++++++++++++++++++++++++++++++++++ client/index.html | 8 ++++++- client/js/app.js | 21 ++++++++++++------ client/js/utils.js | 13 ++++++++++++ client/login.html | 2 +- 5 files changed, 87 insertions(+), 9 deletions(-) diff --git a/client/css/main.css b/client/css/main.css index da57375..4ef84c9 100644 --- a/client/css/main.css +++ b/client/css/main.css @@ -36,3 +36,55 @@ footer { .userAway { color: #c0bdba !important; } + +.loaderOverlay { + position: absolute; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(255, 255, 255, 0.7); + z-index: 10; +} + +.loader, +.loader:after { + border-radius: 50%; + width: 10em; + height: 10em; +} +.loader { + margin: 60px auto; + font-size: 15px; + position: relative; + text-indent: -9999em; + + border-top: 1.1em solid rgba(39, 147, 218, 0.2); + border-right: 1.1em solid rgba(39, 147, 218, 0.2); + border-bottom: 1.1em solid rgba(39, 147, 218, 0.2); + border-left: 1.1em solid #2793da; + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + -webkit-animation: load8 1.1s infinite linear; + animation: load8 1.1s infinite linear; +} +@-webkit-keyframes load8 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes load8 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} diff --git a/client/index.html b/client/index.html index d5e6e70..6887d01 100644 --- a/client/index.html +++ b/client/index.html @@ -25,8 +25,14 @@ +
+ +
+
Loading...
+
+
{{ error }}
@@ -132,6 +138,6 @@
- + diff --git a/client/js/app.js b/client/js/app.js index aad58f1..007bb54 100644 --- a/client/js/app.js +++ b/client/js/app.js @@ -16,6 +16,8 @@ async function startApp() { joinedChats: {}, // Main WebSocket instance ws: null, + // Toggle to see if user is online + online: false, // User object which is an instance of SWA clientPrincipal // See https://docs.microsoft.com/en-us/azure/static-web-apps/user-information?tabs=javascript#client-principal-data user: {}, @@ -59,11 +61,11 @@ async function startApp() { } } catch (err) { // When auth endpoint not available, fallback to a prompt and fake clientPrincipal data - // In reality this is not really need anymore as the SWA emulator does a good job - const userName = prompt('What is your name') + // In reality this is not really need anymore as we use the SWA emulator + const userName = prompt('Please set your user name') if (!userName) window.location.href = window.location.href this.user = { - userId: utils.uuidv4(), + userId: utils.hashString(userName), userDetails: userName, identityProvider: 'fake', } @@ -112,7 +114,7 @@ async function startApp() { // System events if (msg.type === 'system' && msg.event === 'connected') { - utils.toastMessage(`🔌 Connected to ${evt.origin}`, 'success') + utils.toastMessage(`🔌 Connected to ${evt.origin.replace('wss://', '')}`, 'success') } // Server events @@ -131,9 +133,14 @@ async function startApp() { } if (msg.from === 'server' && msg.data.chatEvent === 'userOnline') { - let user = JSON.parse(msg.data.data) - this.$set(this.allUsers, user.userId, user) - utils.toastMessage(`🤩 ${user.userName} has just joined`, 'success') + let newUser = JSON.parse(msg.data.data) + // If the new user is ourselves, that means we're connected and online + if (newUser.userId == this.user.userId) { + this.online = true + } else { + utils.toastMessage(`🤩 ${newUser.userName} has just joined`, 'success') + } + this.$set(this.allUsers, newUser.userId, newUser) } if (msg.from === 'server' && msg.data.chatEvent === 'userOffline') { diff --git a/client/js/utils.js b/client/js/utils.js index 40f48d1..3fa4524 100644 --- a/client/js/utils.js +++ b/client/js/utils.js @@ -18,4 +18,17 @@ export default { animate: { in: 'fadeIn', out: 'fadeOut' }, }) }, + + hashString(str, seed = 0) { + let h1 = 0xdeadbeef ^ seed, + h2 = 0x41c6ce57 ^ seed + for (let i = 0, ch; i < str.length; i++) { + ch = str.charCodeAt(i) + h1 = Math.imul(h1 ^ ch, 2654435761) + h2 = Math.imul(h2 ^ ch, 1597334677) + } + h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^ Math.imul(h2 ^ (h2 >>> 13), 3266489909) + h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^ Math.imul(h1 ^ (h1 >>> 13), 3266489909) + return 4294967296 * (2097151 & h2) + (h1 >>> 0) + }, } diff --git a/client/login.html b/client/login.html index 1379ff1..3587c7b 100644 --- a/client/login.html +++ b/client/login.html @@ -46,7 +46,7 @@

💬 Chatr

- +