Added logic to save username and send username to the server

codewithkyle · Jun 4, 2019 · 3da5567 · 3da5567
1 parent 5a2197e
commit 3da5567
Show file tree

Hide file tree

Showing 12 changed files with 101 additions and 16 deletions.
diff --git a/docs/Client.ts b/docs/Client.ts
@@ -3,8 +3,17 @@ import { Env } from 'Env';
 export class Client{
 
     public static room:string = null;
+    private static displayName:string = 'Tod';
 
     constructor(roomToken:string){
         Client.room = roomToken;
     }
+
+    public static setName(clientsName:string):void{
+        this.displayName = clientsName;
+    }
+
+    public static getName():string{
+        return this.displayName;
+    }
 }
diff --git a/docs/Login.ts b/docs/Login.ts
@@ -125,6 +125,9 @@ export class Login extends Module{
         this._tokenInput.addEventListener('blur', this.handleInput);
         this._tokenInput.addEventListener('keyup', this.handleInput);
         this._createRoomButton.addEventListener('click', this.createNewRoom);
+
+        const firstInput = this.view.querySelector('input');
+        firstInput.focus();
     }
 
     beforeDestroy(){

diff --git a/docs/SetupForm.ts b/docs/SetupForm.ts
@@ -2,6 +2,8 @@ import { Module } from 'Module';
 import { Application } from 'Application';
 import { Env } from 'Env';
 import { InputManager } from 'InputManager';
+import { Client } from './Client';
+import { SocketManager } from './SocketManager';
 
 export class SetupForm extends Module{
     public static index:string = 'SetupForm';
@@ -28,7 +30,22 @@ export class SetupForm extends Module{
         this.view.style.height = `${ newHeight + extraHeight }px`;
     }
 
-    private nextStep:EventListener = ()=>{
+    private updateUsernameHotswaps():void{
+        const hotwapEls:Array<HTMLElement> = Array.from(this.view.querySelectorAll('.js-username-hotswap'));
+
+        for(let i = 0; i < hotwapEls.length; i++){
+            hotwapEls[i].innerHTML = Client.getName();
+        }
+    }
+
+    private nextStep:EventListener = (e:Event)=>{
+
+        if(e instanceof KeyboardEvent){
+            if(e.key.toLowerCase() !== 'enter'){
+                return;
+            }
+        }
+
         const inputs:Array<HTMLInputElement> = Array.from(this._steps[this._currentStepIndex].querySelectorAll('.js-input'));
 
         let hasBlankInput = false;
@@ -45,6 +62,20 @@ export class SetupForm extends Module{
             return;
         }
 
+        switch(this._currentStepIndex){
+            case 1:
+                const username = <HTMLInputElement>this.view.querySelector('input#displayName');
+                Client.setName(username.value);
+                this.updateUsernameHotswaps();
+                SocketManager.emit('updateName', { displayName: username.value });
+                break;
+            default:
+                if(Env.isDebug){
+                    console.warn(`Unknown step #${ this._currentStepIndex }`);
+                }
+                break;
+        }
+
         this._steps[this._currentStepIndex].classList.remove('is-visible');
         this._currentStepIndex++;
         this._steps[this._currentStepIndex].classList.add('is-visible');
@@ -58,6 +89,10 @@ export class SetupForm extends Module{
         for(let i = 0; i < this._nextButtons.length; i++){
             this._nextButtons[i].addEventListener('click', this.nextStep);
         }
+
+        document.addEventListener('keyup', this.nextStep);
+
+        InputManager.reload();
     }
 
     beforeDestroy(){

diff --git a/docs/SocketManager.ts b/docs/SocketManager.ts
@@ -24,8 +24,9 @@ export class SocketManager extends Module{
      * Listens for a custom event to be sent from the server. Returns `false` when the socket is not connected to the server.
      * @param eventName - the name of the event the socket will listen for
      * @param callback - the events callback `Function`
+     * @param scope - the class object that called the method
      * @returns `boolean` containing the events success status
-     * @example SocketManager.emit('signupResponse', this.handleSignupResponse);
+     * @example SocketManager.emit('signupResponse', this.handleSignupResponse, this);
      */
     public static receive(eventName:string, callback:Function, scope:unknown):boolean{
         if(this._socket.connected){

diff --git a/docs/assets/scripts/globals.js b/docs/assets/scripts/globals.js
@@ -10,7 +10,14 @@ var Client = (function () {
     function Client(roomToken) {
         Client.room = roomToken;
     }
+    Client.setName = function (clientsName) {
+        this.displayName = clientsName;
+    };
+    Client.getName = function () {
+        return this.displayName;
+    };
     Client.room = null;
+    Client.displayName = 'Tod';
     return Client;
 }());
 exports.Client = Client;

diff --git a/docs/assets/scripts/login.js b/docs/assets/scripts/login.js
@@ -116,6 +116,8 @@ var Login = (function (_super) {
         this._tokenInput.addEventListener('blur', this.handleInput);
         this._tokenInput.addEventListener('keyup', this.handleInput);
         this._createRoomButton.addEventListener('click', this.createNewRoom);
+        var firstInput = this.view.querySelector('input');
+        firstInput.focus();
     };
     Login.prototype.beforeDestroy = function () {
     };

diff --git a/docs/assets/scripts/setupform.js b/docs/assets/scripts/setupform.js
@@ -23,11 +23,18 @@ var Module_1 = __webpack_require__(2);
 var Application_1 = __webpack_require__(3);
 var Env_1 = __webpack_require__(4);
 var InputManager_1 = __webpack_require__(64);
+var Client_1 = __webpack_require__(0);
+var SocketManager_1 = __webpack_require__(9);
 var SetupForm = (function (_super) {
     __extends(SetupForm, _super);
     function SetupForm(view, uuid) {
         var _this = _super.call(this, view, uuid) || this;
-        _this.nextStep = function () {
+        _this.nextStep = function (e) {
+            if (e instanceof KeyboardEvent) {
+                if (e.key.toLowerCase() !== 'enter') {
+                    return;
+                }
+            }
             var inputs = Array.from(_this._steps[_this._currentStepIndex].querySelectorAll('.js-input'));
             var hasBlankInput = false;
             inputs.forEach(function (input) {
@@ -41,6 +48,19 @@ var SetupForm = (function (_super) {
                 _this.updateViewHeight(32);
                 return;
             }
+            switch (_this._currentStepIndex) {
+                case 1:
+                    var username = _this.view.querySelector('input#displayName');
+                    Client_1.Client.setName(username.value);
+                    _this.updateUsernameHotswaps();
+                    SocketManager_1.SocketManager.emit('updateName', { displayName: username.value });
+                    break;
+                default:
+                    if (Env_1.Env.isDebug) {
+                        console.warn("Unknown step #" + _this._currentStepIndex);
+                    }
+                    break;
+            }
             _this._steps[_this._currentStepIndex].classList.remove('is-visible');
             _this._currentStepIndex++;
             _this._steps[_this._currentStepIndex].classList.add('is-visible');
@@ -59,12 +79,20 @@ var SetupForm = (function (_super) {
         var newHeight = this._steps[this._currentStepIndex].scrollHeight;
         this.view.style.height = newHeight + extraHeight + "px";
     };
+    SetupForm.prototype.updateUsernameHotswaps = function () {
+        var hotwapEls = Array.from(this.view.querySelectorAll('.js-username-hotswap'));
+        for (var i = 0; i < hotwapEls.length; i++) {
+            hotwapEls[i].innerHTML = Client_1.Client.getName();
+        }
+    };
     SetupForm.prototype.afterMount = function () {
         this._steps[this._currentStepIndex].classList.add('is-visible');
         this.updateViewHeight();
         for (var i = 0; i < this._nextButtons.length; i++) {
             this._nextButtons[i].addEventListener('click', this.nextStep);
         }
+        document.addEventListener('keyup', this.nextStep);
+        InputManager_1.InputManager.reload();
     };
     SetupForm.prototype.beforeDestroy = function () {
     };
@@ -81,4 +109,4 @@ Application_1.Application.mountModules();
 
 /***/ })
 
-},[[63,3,9,10,7]]]);
+},[[63,3,9,10,21,11,15,23,24,26,25,35,27,18,28,16,34,30,22,19,32,20,14,29,12,13,33,17,31,7]]]);
diff --git a/docs/assets/styles/homepage.css b/docs/assets/styles/homepage.css
diff --git a/docs/assets/styles/setup-form.css b/docs/assets/styles/setup-form.css
diff --git a/docs/creation-form.html b/docs/creation-form.html
@@ -5,24 +5,24 @@
     </form-controls>
 </form-step>
 <form-step>
-    <p class="u-margin-bottom">Please enter a name that will be displayed any friends you invite to your room.</p>
+    <p class="u-margin-bottom-x2">Please enter a name that will be displayed any friends you invite to your room.</p>
     <div class="g-input">
-        <input class="js-input" type="text" name="displayName" id="displayName" required>
+        <input class="js-input" type="text" name="displayName" id="displayName" required tabindex="1">
         <label for="displayName">Display Name</label>
         <error class="js-error"></error>
     </div>
     <form-controls>
-        <button class="js-next g-button -short -text -blue">Continue</button>
+        <button type="button" class="js-next g-button -short -text -blue"  tabindex="2">Continue</button>
     </form-controls>
 </form-step>
 <form-step>
-    <p class="u-margin-bottom">Alright <span class="js-username-hotswap">USERNAME</span>, what's the name of the project that you'll be working on today? We know that this is the hardest and most important part of any project so feel free to take your time.</p>
+    <p class="u-margin-bottom-x2">So <span class="js-username-hotswap">USERNAME</span>, what project will we working on today? We know that this will be the hardest and most important part your project so feel free to take your time.</p>
     <div class="g-input">
-        <input class="js-input" type="text" name="projectName" id="projectName" required>
+        <input class="js-input" type="text" name="projectName" id="projectName" required  tabindex="3">
         <label for="projectName">Project Name</label>
         <error class="js-error"></error>
     </div>
     <form-controls>
-        <button class="js-next g-button -short -text -blue">Continue</button>
+        <button type="button" class="js-next g-button -short -text -blue" tabindex="4">Continue</button>
     </form-controls>
 </form-step>
diff --git a/docs/homepage.scss b/docs/homepage.scss
@@ -23,7 +23,7 @@
         position: absolute;
 
         &.is-hidden{
-            animation: hideModal 150ms 0ms $ease-sharp forwards;
+            animation: hideModal 75ms 0ms $ease-sharp forwards;
         }
 
         .o-form_row{

diff --git a/docs/setup-form.scss b/docs/setup-form.scss
@@ -12,11 +12,11 @@
     pointer-events: none;
     visibility: hidden;
     user-select: none;
-    animation: showModal 300ms 150ms $ease-in forwards;
+    animation: showModal 150ms 75ms $ease-in forwards;
     transition: all 150ms $ease;
 
     &.is-hidden{
-        animation: hideModal 150ms 0ms $ease-sharp forwards;
+        animation: hideModal 75ms 0ms $ease-sharp forwards;
     }
 
     form-step{
@@ -37,7 +37,7 @@
             opacity: 1;
             user-select: auto;
             pointer-events: all;
-            transition: all 150ms $ease-in;
+            transition: all 150ms 75ms $ease-in;
         }
 
         form-controls{