Creating the create team interface.

js-src/conquer/index.ts

@@ -21,6 +21,7 @@ import CreateNode from '@burguillosinfo/conquer/create-node'
 import MapState from '@burguillosinfo/conquer/map-state'
 import MapNode from '@burguillosinfo/conquer/map-node'
 import NewNodeUI from '@burguillosinfo/conquer/interface/new-node'
+import NewTeamUI from '@burguillosinfo/conquer/interface/new-team'
 import WebSocket from '@burguillosinfo/conquer/websocket'
 import JsonSerializer from '@burguillosinfo/conquer/serializer';
 
@@ -182,7 +183,6 @@ export default class Conquer {
             this.interfaceManager.remove(selfPlayerUI)
         })
         selfPlayerUI.on('enable-explorer-mode', () => {
-            console.log('hola')
             this.addState(MapState.FREE_MOVE);
             this.addState(MapState.FREE_ROTATION);
         });
@@ -194,10 +194,21 @@ export default class Conquer {
             this.addState(MapState.CREATE_NODE)
             this.removeState(MapState.NORMAL)
         })
+        selfPlayerUI.on('open-create-team', () => {
+            this.onOpenCreateTeam();
+        });
         this.interfaceManager.push(selfPlayerUI)
         this.selfPlayerUI = selfPlayerUI
     }
 
+    private onOpenCreateTeam(): void {
+        const newTeamUI = new NewTeamUI();
+        newTeamUI.on('close', () => {
+            this.interfaceManager.remove(newTeamUI);
+        });
+        this.interfaceManager.push(newTeamUI);
+    }
+
     private isFeatureEnabledMap: Record<string, boolean> = {}
 
     async onClickFeature(feature: Feature): Promise<void> {

js-src/conquer/interface/login.ts

@@ -150,7 +150,6 @@ export default class LoginUI extends ConquerInterface {
             Conquer.fail('Unable to find the submit button for the login.')
         }
         this.conquerLoginSubmit = conquerLoginSubmit
-        console.log(this.conquerLoginSubmit.parentNode?.parentNode)
         this.conquerLoginSubmit.addEventListener('click', (event: Event) => {
             event.preventDefault() 
             const username = this.conquerLoginUsername.value

js-src/conquer/interface/new-team.ts

@@ -0,0 +1,97 @@
+import AbstractTopBarInterface from '@burguillosinfo/conquer/interface/abstract-top-bar-interface'
+import Conquer from '@burguillosinfo/conquer'
+
+export default class NewTeamUI extends AbstractTopBarInterface {
+    public getSubmitButton(): HTMLElement {
+        const submitButton = this.getMainNode().querySelector('button.new-team-form-submit') 
+        if (submitButton === null || !(submitButton instanceof HTMLElement)) {
+            Conquer.fail('SubmitButton is null');
+        }
+        return submitButton;
+    }
+    public getErrorElement(): HTMLElement {
+        const errorElement = this.getMainNode().querySelector('p.conquer-error');
+        if (errorElement === null || !(errorElement instanceof HTMLElement)) {
+            Conquer.fail('No error element set');
+        }
+        return errorElement;
+    }
+    public getInputTeamName(): HTMLInputElement {
+        const teamName = this.getMainNode().querySelector('input.conquer-team-name');
+        if (teamName === null || !(teamName instanceof HTMLInputElement)) {
+            Conquer.fail('TeamName is null');
+        }
+        return teamName;
+    }
+    public getInputTeamColor(): HTMLInputElement {
+        const teamColor = this.getMainNode().querySelector('input.conquer-team-color');
+        if (teamColor === null || !(teamColor instanceof HTMLInputElement)) {
+            Conquer.fail('TeamColor is null');
+        }
+        return teamColor;
+    }
+    public getTextareaTeamDescription(): HTMLTextAreaElement {
+        const teamDescription = this.getMainNode().querySelector('textarea.conquer-team-description')
+        if (teamDescription === null || !(teamDescription instanceof HTMLTextAreaElement)) {
+            Conquer.fail('TeamDescription is null');
+        }
+        return teamDescription
+    }
+
+    constructor() {
+        super()
+    }
+
+    public run() {
+        const mainNode = this.getMainNode()
+        const form = this.getNodeFromTemplateId('conquer-new-team-form-creation-template')
+        mainNode.append(form)
+        this.getSubmitButton().addEventListener('click', (event) => {
+            event.preventDefault();
+            this.onSubmit();
+        });
+        form.classList.remove('conquer-display-none')
+        mainNode.classList.remove('conquer-display-none')
+    }
+
+    private setError(error: string): void {
+        const errorElement = this.getErrorElement();
+        errorElement.classList.remove('conquer-display-none')
+        errorElement.innerText = error
+    }
+
+    private onSubmit(): void {
+        const inputTeamName           = this.getInputTeamName();
+        const textareaTeamDescription = this.getTextareaTeamDescription();
+        const inputTeamColor          = this.getInputTeamColor();
+        const name                    = inputTeamName.value;
+        const description             = textareaTeamDescription.value;
+        const color                   = inputTeamColor.value;
+        if (name.length < 5) {
+            this.setError('Todos los equipos deben tener un nombre mayor a 4 caracteres.');
+            return;
+        }
+        const urlTeam = new URL('/conquer/team', window.location.protocol + '//' + window.location.hostname + ':' + window.location.port)
+        fetch(urlTeam, {
+            method: 'PUT',
+            body: JSON.stringify({
+                description : description,
+                name        : name,
+                color       : color,
+            }),
+        }).then(async (res) => {
+            let responseBody;
+            try {
+                responseBody = await res.json();
+            } catch (error) {
+                this.setError( 'Respuesta erronea del servidor.');
+                return;
+            }
+            if (res.status !== 200) {
+                this.setError(responseBody.error);
+                return;
+            }
+            this.runCallbacks('close')
+        });
+    }
+}

js-src/conquer/interface/self-player.ts

@@ -33,6 +33,7 @@ export default class SelfPlayerUI extends AbstractTopBarInterface {
         this.populateWelcome()
         this.populateCreateNodeOption()
         this.populateToggleExplorerModeOption();
+        this.populateCreateTeamButton();
         await this.populateUserTeamData();
         selfPlayerNode.classList.remove('conquer-display-none')
     }
@@ -56,6 +57,22 @@ export default class SelfPlayerUI extends AbstractTopBarInterface {
 
     }
 
+    private populateCreateTeamButton(): void {
+        // Only admins can create teams.
+        if (!this.selfPlayer?.isAdmin()) {
+            return;
+        }
+        const createTeamButton = document.createElement('button');
+        createTeamButton.innerText = 'Crea un nuevo equipo';
+        createTeamButton.addEventListener('click', () => {
+            this.runCallbacks('open-create-team');
+            this.runCallbacks('close');
+        });
+        const createTeamButtonInterface = this.generateInterfaceElementCentered()
+        createTeamButtonInterface.append(createTeamButton);
+        this.getMainNode().appendChild(createTeamButtonInterface);
+    }
+
     private setTextToggleExplorerModeButton(button: HTMLElement): void {
         if (this.isExplorerModeEnabled) {
             button.innerText = 'Desactivar movimiento libre en el mapa.';
@@ -65,6 +82,7 @@ export default class SelfPlayerUI extends AbstractTopBarInterface {
     }
 
     private populateCreateNodeOption() {
+        // Only admins can create nodes.
         if (!this.selfPlayer?.isAdmin()) {
             return
         }

js-src/conquer/map-node.ts

@@ -101,8 +101,6 @@ export default class MapNode {
 
     public getFeature(): Feature {
         if (this.feature === null) {
-            console.log(this.coordinate_1);
-            console.log(this.coordinate_2);
             this.feature = new Feature({
                 geometry: new Point([this.coordinate_1, this.coordinate_2]),
                 type: 'node-' + this.uuid,

templates/conquer/_new-team-form-creation-template.html.ep

@@ -0,0 +1,18 @@
+<div id="conquer-new-team-form-creation-template" class="conquer-new-team-form-creation conquer-display-none conquer-interface-element-padded">
+    <form> 
+        <p class="conquer-error conquer-display-none"></p>
+        <label>Nombre del equipo.<br/>
+            <input class="conquer-team-name"/>
+        </label>
+        <label>Descripción del equipo.<br/>
+            <textarea class="conquer-team-description"></textarea></label>
+        </label>
+        <label>Color del equipo<br/>
+           <input type="color" class="conquer-team-color"/>
+        </label>
+        <div>
+            <button class="new-team-form-submit">Finalizar creación de nodo.</button>
+        </div>
+    </form> 
+</div>
+

templates/conquer/index.html.ep

@@ -15,6 +15,7 @@
 %= include 'conquer/_interface-with-top-bar-template';
 %= include 'conquer/_login-template';
 %= include 'conquer/_register-template';
+%= include 'conquer/_new-team-form-creation-template';
         <div id="conquer-view-node-template" class="conquer-display-none conquer-interface-element-padded">
             <div>
                 <h1>Vista de nodo.</h1>
@@ -22,6 +23,7 @@
                 <p class="node-description"></p>
             </div>
         </div>
+
         <div class="conquer-container">
         </div>
     </body>