diff --git a/assets/js/Chat/ChatService.js b/assets/js/Chat/ChatService.js index 55e6c49c..c3a86d99 100644 --- a/assets/js/Chat/ChatService.js +++ b/assets/js/Chat/ChatService.js @@ -1,12 +1,10 @@ -import { client } from '../Common/HttpClient.js' +import {client} from '../Common/HttpClient.js' -class ChatService -{ +class ChatService { /** * @param {HttpClient} httpClient */ - constructor(httpClient) - { + constructor(httpClient) { this.httpClient = httpClient; } @@ -15,13 +13,10 @@ class ChatService * @param {String} message * @returns {Promise} */ - writeMessage(chatId, message) - { + writeMessage(chatId, message) { return this.httpClient.post( '/api/chat/chats/' + chatId + '/write-message', - { - message: message - } + {message} ); } @@ -29,8 +24,7 @@ class ChatService * @param {String} chatId * @returns {Promise} */ - messages(chatId) - { + messages(chatId) { return this.httpClient.get( '/api/chat/chats/' + chatId + '/messages' ); diff --git a/assets/js/Chat/Widget.js b/assets/js/Chat/Widget.js index af4740d3..75066251 100644 --- a/assets/js/Chat/Widget.js +++ b/assets/js/Chat/Widget.js @@ -1,9 +1,7 @@ -import { service } from './ChatService.js' +import {service} from './ChatService.js' -class WidgetElement extends HTMLElement -{ - connectedCallback() - { +customElements.define('chat-widget', class extends HTMLElement { + connectedCallback() { this._onDisconnect = []; this.classList.add('loading-indicator'); @@ -33,16 +31,14 @@ class WidgetElement extends HTMLElement this._registerEventHandler(); } - disconnectedCallback() - { + disconnectedCallback() { this._onDisconnect.forEach(f => f()); } /** * @param {String} chatId */ - _initialize(chatId) - { + _initialize(chatId) { if (this._chatId === '') { this._chatId = chatId; @@ -53,8 +49,7 @@ class WidgetElement extends HTMLElement /** * @param {String} chatId */ - _loadMessages(chatId) - { + _loadMessages(chatId) { service.messages(chatId).then((messages) => { messages.messages.forEach((message) => { this._appendMessage(message); @@ -76,8 +71,7 @@ class WidgetElement extends HTMLElement /** * @param {Object} message */ - _appendMessage(message) - { + _appendMessage(message) { if (!this._isDuplicate(message)) { this._messageHolder.append( this._createMessageNode(message) @@ -91,13 +85,11 @@ class WidgetElement extends HTMLElement * @param {Object} message * @returns {Boolean} */ - _isDuplicate(message) - { + _isDuplicate(message) { return this._messageHolder.querySelector(['[data-id="' + message.messageId + '"]']) !== null; } - _flushMessageBuffer() - { + _flushMessageBuffer() { this._messageBuffer.forEach((message) => { this._appendMessage(message); }); @@ -109,8 +101,7 @@ class WidgetElement extends HTMLElement * @param {Object} message * @returns {Node} */ - _createMessageNode(message) - { + _createMessageNode(message) { let writtenAt = new Date(message.writtenAt); let hours = ('0' + writtenAt.getHours()).slice(-2); let minutes = ('0' + writtenAt.getMinutes()).slice(-2); @@ -131,13 +122,11 @@ class WidgetElement extends HTMLElement return li; } - _clearInput() - { + _clearInput() { this._input.value = ''; } - _onKeyPress(event) - { + _onKeyPress(event) { if (event.which === 13 && !event.shiftKey) { event.preventDefault(); let message = this._input.value; @@ -153,8 +142,7 @@ class WidgetElement extends HTMLElement } } - _onMessageWritten(event) - { + _onMessageWritten(event) { let message = event.detail; if (!this._isAlreadyInitialized) { @@ -164,15 +152,13 @@ class WidgetElement extends HTMLElement } } - _onChatAssigned(event) - { + _onChatAssigned(event) { window.dispatchEvent(new CustomEvent('sse:addsubscription', {detail: {name: 'chat-' + event.detail.chatId}})); this._initialize(event.detail.chatId); } - _registerEventHandler() - { + _registerEventHandler() { this._input.addEventListener('keypress', this._onKeyPress.bind(this)); ((n, f) => { @@ -185,6 +171,4 @@ class WidgetElement extends HTMLElement this._onDisconnect.push(() => window.removeEventListener(n, f)); })('ConnectFour.ChatAssigned', this._onChatAssigned.bind(this)); } -} - -customElements.define('chat-widget', WidgetElement); +}); diff --git a/assets/js/Common/EventSource.js b/assets/js/Common/EventSource.js index e7031d49..0d5ff6c3 100644 --- a/assets/js/Common/EventSource.js +++ b/assets/js/Common/EventSource.js @@ -1,7 +1,5 @@ -class EventSourceElement extends HTMLElement -{ - connectedCallback() - { +customElements.define('event-source', class extends HTMLElement { + connectedCallback() { this._eventSource = null; this._lastEventId = null; this._subscriptions = this.getAttribute('subscriptions').split(','); @@ -19,13 +17,11 @@ class EventSourceElement extends HTMLElement })('app:load', this._connect.bind(this)); } - disconnectedCallback() - { + disconnectedCallback() { this._onDisconnect.forEach(f => f()); } - _connect() - { + _connect() { if (this._eventSource) this._eventSource.close(); let url = '/sse/sub?id=' + this._subscriptions.join(','); @@ -35,8 +31,7 @@ class EventSourceElement extends HTMLElement this._eventSource.onmessage = this._onMessage.bind(this); } - _onMessage(message) - { + _onMessage(message) { this._lastEventId = message.lastEventId; let payload = JSON.parse(message.data); @@ -48,13 +43,10 @@ class EventSourceElement extends HTMLElement if (this._verbose) console.log(eventName, payload); } - _onAddSubscription(event) - { + _onAddSubscription(event) { if (this._subscriptions.indexOf(event.detail.name) !== -1) return; this._subscriptions.push(event.detail.name); this._connect(); } -} - -customElements.define('event-source', EventSourceElement); +}); diff --git a/assets/js/Common/HttpClient.js b/assets/js/Common/HttpClient.js index 2caa4bc1..5ae2702f 100644 --- a/assets/js/Common/HttpClient.js +++ b/assets/js/Common/HttpClient.js @@ -1,9 +1,6 @@ -class HttpClient -{ - constructor() - { +class HttpClient { + constructor() { this.onError = (response) => { - }; } @@ -11,79 +8,43 @@ class HttpClient * @param {String} url * @returns {Promise} */ - get(url) - { - return new Promise((resolve, reject) => { - let request = new XMLHttpRequest(); - request.open('GET', url); - request.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); - request.addEventListener('load', () => { - let response = JSON.parse(request.responseText); - - if (request.status >= 200 && request.status < 300) { - resolve(response); - } else { - this.onError(response); - reject(response); - } - }); - request.send(); + async get(url) { + const response = await fetch(url, { + headers: {'X-Requested-With': 'XMLHttpRequest'} }); + const json = await response.json(); + + if (response.status >= 200 && response.status < 300) return json; + + this.onError(json); + throw json; } /** * @param {String} url - * @param {Object} [postParameters] + * @param {Object} data * @returns {Promise} */ - post(url, postParameters) - { - postParameters = postParameters || {}; + async post(url, data) { + const response = await fetch(url, { + method: 'POST', + headers: {'X-Requested-With': 'XMLHttpRequest'}, + body: new URLSearchParams(data) + }); + const json = await response.json(); - return new Promise((resolve, reject) => { - let request = new XMLHttpRequest(); - request.open('POST', url); - request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); - request.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); - request.addEventListener('load', () => { - let response = JSON.parse(request.responseText); + if (response.status >= 200 && response.status < 300) return json; - if (request.status >= 200 && request.status < 300) { - resolve(response); - } else { - this.onError(response); - reject(response); - } - }); - request.send( - this._preparePostParameters(postParameters) - ); - }); + this.onError(json); + throw json; } /** * @param {String} url */ - redirectTo(url) - { + redirectTo(url) { window.app.navigate(url); } - - /** - * @param {Object} postParameters - * @returns {String} - */ - _preparePostParameters(postParameters) - { - let preparedPostParameters = []; - - for (let name in postParameters) { - let value = postParameters[name]; - preparedPostParameters.push(name + '=' + encodeURIComponent(value)); - } - - return preparedPostParameters.join('&'); - } } export const client = new HttpClient(); diff --git a/assets/js/Common/NotificationList.js b/assets/js/Common/NotificationList.js index 4bd8b8e4..ffdcaace 100644 --- a/assets/js/Common/NotificationList.js +++ b/assets/js/Common/NotificationList.js @@ -1,7 +1,5 @@ -class NotificationListElement extends HTMLElement -{ - connectedCallback() - { +customElements.define('notification-list', class extends HTMLElement { + connectedCallback() { this._ul = document.createElement('ul'); this._ul.classList.add('notification'); @@ -11,8 +9,7 @@ class NotificationListElement extends HTMLElement /** * @param {String} message */ - appendMessage(message) - { + appendMessage(message) { let messageNode = this._createMessageNode(message); this._ul.insertBefore(messageNode, this._ul.childNodes[0]); @@ -30,8 +27,7 @@ class NotificationListElement extends HTMLElement * @param {String} message * @returns {Node} */ - _createMessageNode(message) - { + _createMessageNode(message) { let smiley = document.createTextNode('¯\\_(ツ)_/¯'); let br = document.createElement('br'); let text = document.createTextNode(message); @@ -45,6 +41,4 @@ class NotificationListElement extends HTMLElement return li; } -} - -customElements.define('notification-list', NotificationListElement); +}); diff --git a/assets/js/ConnectFour/AbortGameButton.js b/assets/js/ConnectFour/AbortButton.js similarity index 78% rename from assets/js/ConnectFour/AbortGameButton.js rename to assets/js/ConnectFour/AbortButton.js index 33143650..375eae7b 100644 --- a/assets/js/ConnectFour/AbortGameButton.js +++ b/assets/js/ConnectFour/AbortButton.js @@ -1,9 +1,7 @@ -import { service } from './GameService.js' +import {service} from './GameService.js' -class AbortGameButtonElement extends HTMLElement -{ - connectedCallback() - { +customElements.define('connect-four-abort-button', class extends HTMLElement { + connectedCallback() { this._button = document.createElement('button'); this._button.setAttribute('id', 'abort-game'); this._button.classList.add('button'); @@ -17,8 +15,7 @@ class AbortGameButtonElement extends HTMLElement this._registerEventHandler(); } - _onButtonClick(event) - { + _onButtonClick(event) { event.preventDefault(); this._button.disabled = true; @@ -34,10 +31,7 @@ class AbortGameButtonElement extends HTMLElement }); } - _registerEventHandler() - { + _registerEventHandler() { this._button.addEventListener('click', this._onButtonClick.bind(this)); } -} - -customElements.define('abort-game-button', AbortGameButtonElement); +}); diff --git a/assets/js/ConnectFour/Game.js b/assets/js/ConnectFour/Game.js index bbd21336..fd91e43e 100644 --- a/assets/js/ConnectFour/Game.js +++ b/assets/js/ConnectFour/Game.js @@ -1,14 +1,12 @@ -import { service } from './GameService.js' -import { Game as GameModel } from './Model/Game.js' +import {service} from './GameService.js' +import {Game as GameModel} from './Model/Game.js' /** * todo: Render the game within , see https://github.com/marein/php-gaming-website/issues/19. */ -class GameElement extends HTMLElement -{ - connectedCallback() - { +customElements.define('connect-four-game', class extends HTMLElement { + connectedCallback() { this._onDisconnect = []; let game = JSON.parse(this.getAttribute('game')); @@ -62,16 +60,14 @@ class GameElement extends HTMLElement this._registerEventHandler(); } - disconnectedCallback() - { + disconnectedCallback() { this._onDisconnect.forEach(f => f()); } /** * @param {Number} index */ - _showMovesUpTo(index) - { + _showMovesUpTo(index) { // Clear fields this._fields.forEach((field) => { field.classList.remove('game__field--flash'); @@ -88,8 +84,7 @@ class GameElement extends HTMLElement * * @param {{x:Number, y:Number, color:Number}} move */ - _showMove(move) - { + _showMove(move) { let field = this._gameHolder.querySelector('.game__field[data-point="' + move.x + ' ' + move.y + '"]'); field.classList.add( this._colorToClass[move.color] @@ -105,8 +100,7 @@ class GameElement extends HTMLElement * Updates the previous move, next move und follow moves button according to the state of * the number of the current move in view. */ - _updateNavigationButtons() - { + _updateNavigationButtons() { let isCurrentMoveTheLastMove = this._numberOfCurrentMoveInView === this._game.numberOfMoves(); let isCurrentMoveBeforeTheFirstMove = this._numberOfCurrentMoveInView === 0; @@ -130,8 +124,7 @@ class GameElement extends HTMLElement * * @param {{x:Number, y:Number, color:Number}} move */ - _onMoveAppendedToGame(move) - { + _onMoveAppendedToGame(move) { // Only show if the the user follow the moves. Otherwise notify user that a new move is available. if (this._followMovesButton.disabled === true) { this._showMove(move); @@ -143,8 +136,7 @@ class GameElement extends HTMLElement } } - _onFieldClick(event) - { + _onFieldClick(event) { let cell = event.target; this._gameHolder.classList.add('loading-indicator'); @@ -160,8 +152,7 @@ class GameElement extends HTMLElement }); } - _onPlayerMoved(event) - { + _onPlayerMoved(event) { this._game.appendMove({ x: event.detail.x, y: event.detail.y, @@ -169,32 +160,28 @@ class GameElement extends HTMLElement }); } - _onPreviousMoveClick(event) - { + _onPreviousMoveClick(event) { event.preventDefault(); this._numberOfCurrentMoveInView--; this._showMovesUpTo(this._numberOfCurrentMoveInView); } - _onNextMoveClick(event) - { + _onNextMoveClick(event) { event.preventDefault(); this._numberOfCurrentMoveInView++; this._showMovesUpTo(this._numberOfCurrentMoveInView); } - _onFollowMovesClick(event) - { + _onFollowMovesClick(event) { event.preventDefault(); this._numberOfCurrentMoveInView = this._game.numberOfMoves(); this._showMovesUpTo(this._numberOfCurrentMoveInView); } - _registerEventHandler() - { + _registerEventHandler() { this._game.onMoveAppended(this._onMoveAppendedToGame.bind(this)); ((n, f) => { @@ -210,6 +197,4 @@ class GameElement extends HTMLElement this._nextMoveButton.addEventListener('click', this._onNextMoveClick.bind(this)); this._followMovesButton.addEventListener('click', this._onFollowMovesClick.bind(this)); } -} - -customElements.define('connect-four-game', GameElement); +}); diff --git a/assets/js/ConnectFour/GameList.js b/assets/js/ConnectFour/GameList.js index d8b77763..7b5261f5 100644 --- a/assets/js/ConnectFour/GameList.js +++ b/assets/js/ConnectFour/GameList.js @@ -1,9 +1,7 @@ -import { service } from './GameService.js' +import {service} from './GameService.js' -class GameListElement extends HTMLElement -{ - connectedCallback() - { +customElements.define('connect-four-game-list', class extends HTMLElement { + connectedCallback() { this._onDisconnect = []; this._games = document.createElement('ul'); this._games.classList.add('game-list'); @@ -21,8 +19,7 @@ class GameListElement extends HTMLElement this._flushPendingGamesToAdd(); } - disconnectedCallback() - { + disconnectedCallback() { this._onDisconnect.forEach(f => f()); } @@ -30,8 +27,7 @@ class GameListElement extends HTMLElement * @param {String} gameId * @param {String} playerId */ - _addGame(gameId, playerId) - { + _addGame(gameId, playerId) { if (this._currentGamesInList.indexOf(gameId) === -1) { let isCurrentUserThePlayer = this._playerId === playerId; @@ -44,8 +40,7 @@ class GameListElement extends HTMLElement /** * @param {String} gameId */ - _removeGame(gameId) - { + _removeGame(gameId) { if (this._currentGamesInList.indexOf(gameId) !== -1) { let node = this._games.querySelector('[data-game-id="' + gameId + '"]'); this._games.removeChild(node); @@ -55,8 +50,7 @@ class GameListElement extends HTMLElement /** * @param {String} gameId */ - _scheduleRemovingOfGame(gameId) - { + _scheduleRemovingOfGame(gameId) { let indexOfGameInList = this._currentGamesInList.indexOf(gameId); if (indexOfGameInList !== -1) { @@ -76,8 +70,7 @@ class GameListElement extends HTMLElement /** * @param {String} gameId */ - _markGameAsToBeRemovedSoon(gameId) - { + _markGameAsToBeRemovedSoon(gameId) { if (this._currentGamesInList.indexOf(gameId) !== -1) { let node = this._games.querySelector('[data-game-id="' + gameId + '"]'); node.classList.add('game-list__game--remove-soon'); @@ -85,8 +78,7 @@ class GameListElement extends HTMLElement } } - _flushPendingGamesToAdd() - { + _flushPendingGamesToAdd() { // Limited by the maximum number of games in list. let limit = Math.min( this._pendingGamesToAdd.length, @@ -103,8 +95,7 @@ class GameListElement extends HTMLElement } } - _flushPendingGamesToRemove() - { + _flushPendingGamesToRemove() { let gamesToRemove = this._currentGamesInList.filter((gameId) => { let indexOfGameIdInRemoveList = this._pendingGamesToRemove.indexOf(gameId); return indexOfGameIdInRemoveList !== -1; @@ -122,8 +113,7 @@ class GameListElement extends HTMLElement this._pendingGamesToRemove = []; } - _renderList() - { + _renderList() { this._renderListTimeout = null; this._games.classList.add('loading-indicator'); @@ -140,8 +130,7 @@ class GameListElement extends HTMLElement * @param {Boolean} isCurrentUserThePlayer * @returns {Node} */ - _createGameNode(gameId, isCurrentUserThePlayer) - { + _createGameNode(gameId, isCurrentUserThePlayer) { let span = document.createElement('span'); span.innerText = 'Anonymous'; @@ -187,8 +176,7 @@ class GameListElement extends HTMLElement return li; } - _onGameOpened(event) - { + _onGameOpened(event) { let gameId = event.detail.gameId; let playerId = event.detail.playerId; let pendingGameToAdd = { @@ -222,13 +210,11 @@ class GameListElement extends HTMLElement } } - _onPlayerJoinedOrGameAborted(event) - { + _onPlayerJoinedOrGameAborted(event) { this._scheduleRemovingOfGame(event.detail.gameId); } - _registerEventHandler() - { + _registerEventHandler() { ((n, f) => { window.addEventListener(n, f); this._onDisconnect.push(() => window.removeEventListener(n, f)); @@ -244,6 +230,4 @@ class GameListElement extends HTMLElement this._onDisconnect.push(() => window.removeEventListener(n, f)); })('ConnectFour.GameAborted', this._onPlayerJoinedOrGameAborted.bind(this)); } -} - -customElements.define('connect-four-game-list', GameListElement); +}); diff --git a/assets/js/ConnectFour/GameService.js b/assets/js/ConnectFour/GameService.js index 8f3ee18b..9618514c 100644 --- a/assets/js/ConnectFour/GameService.js +++ b/assets/js/ConnectFour/GameService.js @@ -1,20 +1,17 @@ -import { client } from '../Common/HttpClient.js' +import {client} from '../Common/HttpClient.js' -class GameService -{ +class GameService { /** * @param {HttpClient} httpClient */ - constructor(httpClient) - { + constructor(httpClient) { this.httpClient = httpClient; } /** * @param {String} gameId */ - redirectTo(gameId) - { + redirectTo(gameId) { this.httpClient.redirectTo( '/game/' + gameId ); @@ -25,21 +22,17 @@ class GameService * @param {int} column * @returns {Promise} */ - move(gameId, column) - { + move(gameId, column) { return this.httpClient.post( '/api/connect-four/games/' + gameId + '/move', - { - column: column - } + {column} ); } /** * @returns {Promise} */ - open() - { + open() { return this.httpClient.post( '/api/connect-four/games/open' ); @@ -49,8 +42,7 @@ class GameService * @param {String} gameId * @returns {Promise} */ - abort(gameId) - { + abort(gameId) { return this.httpClient.post( '/api/connect-four/games/' + gameId + '/abort', ); @@ -60,8 +52,7 @@ class GameService * @param {String} gameId * @returns {Promise} */ - resign(gameId) - { + resign(gameId) { return this.httpClient.post( '/api/connect-four/games/' + gameId + '/resign', ); @@ -71,8 +62,7 @@ class GameService * @param {String} gameId * @returns {Promise} */ - join(gameId) - { + join(gameId) { return this.httpClient.post( '/api/connect-four/games/' + gameId + '/join', ); diff --git a/assets/js/ConnectFour/Model/Game.js b/assets/js/ConnectFour/Model/Game.js index d549d662..29504c12 100644 --- a/assets/js/ConnectFour/Model/Game.js +++ b/assets/js/ConnectFour/Model/Game.js @@ -1,11 +1,9 @@ -export class Game -{ +export class Game { /** * @param {String} gameId * @param {{x:Number, y:Number, color:Number}[]} moves */ - constructor(gameId, moves) - { + constructor(gameId, moves) { this.gameId = gameId; this.moves = moves; this.onMoveAppendedObservers = []; @@ -16,8 +14,7 @@ export class Game * * @returns {Number} */ - numberOfMoves() - { + numberOfMoves() { return this.moves.length; } @@ -26,8 +23,7 @@ export class Game * * @param {{x:Number, y:Number, color:Number}} move */ - appendMove(move) - { + appendMove(move) { if (!this.hasMove(move)) { this.moves.push(move); @@ -44,8 +40,7 @@ export class Game * * @returns {boolean} */ - hasMove(move) - { + hasMove(move) { // this.moves.indexOf(move) doesn't work due === check. return JSON.stringify(this.moves).indexOf(JSON.stringify(move)) !== -1; } @@ -55,8 +50,7 @@ export class Game * * @param {Function} callback */ - onMoveAppended(callback) - { + onMoveAppended(callback) { this.onMoveAppendedObservers.push(callback); } @@ -65,8 +59,7 @@ export class Game * * @param {{gameId:String, moves:{x:Number, y:Number, color:Number}[]}} object */ - static fromObject(object) - { + static fromObject(object) { return new this( object.gameId, object.moves diff --git a/assets/js/ConnectFour/OpenGameButton.js b/assets/js/ConnectFour/OpenButton.js similarity index 84% rename from assets/js/ConnectFour/OpenGameButton.js rename to assets/js/ConnectFour/OpenButton.js index 8a95f573..36bc1b32 100644 --- a/assets/js/ConnectFour/OpenGameButton.js +++ b/assets/js/ConnectFour/OpenButton.js @@ -1,9 +1,7 @@ -import { service } from './GameService.js' +import {service} from './GameService.js' -class OpenGameButtonElement extends HTMLElement -{ - connectedCallback() - { +customElements.define('connect-four-open-button', class extends HTMLElement { + connectedCallback() { this._onDisconnect = []; this._button = document.createElement('button'); this._button.classList.add('button'); @@ -28,13 +26,11 @@ class OpenGameButtonElement extends HTMLElement })('ConnectFour.GameAborted', this._onGameAborted.bind(this)); } - disconnectedCallback() - { + disconnectedCallback() { this._onDisconnect.forEach(f => f()); } - _onButtonClick(event) - { + _onButtonClick(event) { event.preventDefault(); this._button.disabled = true; @@ -54,19 +50,15 @@ class OpenGameButtonElement extends HTMLElement }); } - _onPlayerJoined(event) - { + _onPlayerJoined(event) { if (this._currentOpenGameId === event.detail.gameId) { service.redirectTo(this._currentOpenGameId); } } - _onGameAborted(event) - { + _onGameAborted(event) { if (this._currentOpenGameId === event.detail.gameId) { this._currentOpenGameId = ''; } } -} - -customElements.define('open-game-button', OpenGameButtonElement); +}); diff --git a/assets/js/ConnectFour/ResignGameButton.js b/assets/js/ConnectFour/ResignButton.js similarity index 77% rename from assets/js/ConnectFour/ResignGameButton.js rename to assets/js/ConnectFour/ResignButton.js index 12a0c3a2..0a2e5615 100644 --- a/assets/js/ConnectFour/ResignGameButton.js +++ b/assets/js/ConnectFour/ResignButton.js @@ -1,9 +1,7 @@ -import { service } from './GameService.js' +import {service} from './GameService.js' -class ResignGameButtonElement extends HTMLElement -{ - connectedCallback() - { +customElements.define('connect-four-resign-button', class extends HTMLElement { + connectedCallback() { this._button = document.createElement('button'); this._button.classList.add('button'); this._button.innerHTML = this.innerHTML; @@ -16,8 +14,7 @@ class ResignGameButtonElement extends HTMLElement this._registerEventHandler(); } - _onButtonClick(event) - { + _onButtonClick(event) { event.preventDefault(); this._button.disabled = true; @@ -33,10 +30,7 @@ class ResignGameButtonElement extends HTMLElement }); } - _registerEventHandler() - { + _registerEventHandler() { this._button.addEventListener('click', this._onButtonClick.bind(this)); } -} - -customElements.define('resign-game-button', ResignGameButtonElement); +}); diff --git a/assets/js/ConnectFour/RunningGames.js b/assets/js/ConnectFour/RunningGames.js index 840b19c5..6190948c 100644 --- a/assets/js/ConnectFour/RunningGames.js +++ b/assets/js/ConnectFour/RunningGames.js @@ -1,7 +1,5 @@ -class RunningGamesElement extends HTMLElement -{ - connectedCallback() - { +customElements.define('connect-four-running-games', class extends HTMLElement { + connectedCallback() { this._onDisconnect = []; ((n, f) => { @@ -10,15 +8,11 @@ class RunningGamesElement extends HTMLElement })('ConnectFour.RunningGamesUpdated', this._onRunningGamesUpdated.bind(this)); } - disconnectedCallback() - { + disconnectedCallback() { this._onDisconnect.forEach(f => f()); } - _onRunningGamesUpdated(event) - { + _onRunningGamesUpdated(event) { this.innerText = event.detail.count; } -} - -customElements.define('running-games', RunningGamesElement); +}); diff --git a/assets/js/app.js b/assets/js/app.js index 787c6d1f..9b823aef 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -1,4 +1,4 @@ -import { client } from './Common/HttpClient.js' +import {client} from './Common/HttpClient.js' import './Common/NotificationList.js' window.app = { diff --git a/config/connect-four/importmap.php b/config/connect-four/importmap.php index 84e97b70..12f5dbe8 100644 --- a/config/connect-four/importmap.php +++ b/config/connect-four/importmap.php @@ -3,10 +3,10 @@ declare(strict_types=1); return [ - 'running-games' => ['path' => 'js/ConnectFour/RunningGames.js'], + 'connect-four-running-games' => ['path' => 'js/ConnectFour/RunningGames.js'], 'connect-four-game-list' => ['path' => 'js/ConnectFour/GameList.js'], 'connect-four-game' => ['path' => 'js/ConnectFour/Game.js'], - 'open-game-button' => ['path' => 'js/ConnectFour/OpenGameButton.js'], - 'abort-game-button' => ['path' => 'js/ConnectFour/AbortGameButton.js'], - 'resign-game-button' => ['path' => 'js/ConnectFour/ResignGameButton.js'] + 'connect-four-open-button' => ['path' => 'js/ConnectFour/OpenButton.js'], + 'connect-four-abort-button' => ['path' => 'js/ConnectFour/AbortButton.js'], + 'connect-four-resign-button' => ['path' => 'js/ConnectFour/ResignButton.js'] ]; diff --git a/src/WebInterface/Presentation/Http/View/game.html.twig b/src/WebInterface/Presentation/Http/View/game.html.twig index 3477af0a..7d5446a2 100644 --- a/src/WebInterface/Presentation/Http/View/game.html.twig +++ b/src/WebInterface/Presentation/Http/View/game.html.twig @@ -18,12 +18,12 @@

- + x Abort game - - + + x Resign game - +

diff --git a/src/WebInterface/Presentation/Http/View/lobby.html.twig b/src/WebInterface/Presentation/Http/View/lobby.html.twig index b59d33fb..077ec4e5 100644 --- a/src/WebInterface/Presentation/Http/View/lobby.html.twig +++ b/src/WebInterface/Presentation/Http/View/lobby.html.twig @@ -4,9 +4,9 @@

- + {{ runningGames.count }} - + running games

@@ -20,9 +20,9 @@

- + + Open a new game - +