diff --git a/.gitignore b/.gitignore index 235f2e5..f642fda 100644 --- a/.gitignore +++ b/.gitignore @@ -9,3 +9,4 @@ node_modules/ # build files package-lock.json ._build +public/js/Game.min.js diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..4e1dbe7 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,14 @@ +{ +// The number of spaces a tab is equal to. This setting is overridden +// based on the file contents when `editor.detectIndentation` is true. +"editor.tabSize": 4, + +// Insert spaces when pressing Tab. This setting is overriden +// based on the file contents when `editor.detectIndentation` is true. +"editor.insertSpaces": true, + +// When opening a file, `editor.tabSize` and `editor.insertSpaces` +// will be detected based on the file contents. Set to false to keep +// the values you've explicitly set, above. +"editor.detectIndentation": false +} \ No newline at end of file diff --git a/README.md b/README.md index 4294edd..c373a62 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ domino-game é jogo de dominó online feito em html5,node.js e websocket. ```bash -git clone https://github.com/felipefm32/NodeDomino.git +git clone https://github.com/eufelipemateus/NodeDomino.git ``` ```bash @@ -38,4 +38,4 @@ Veja Mais [Aqui](https://felipemateus.com/blog/2017/06/domino). ## Author -**[Felipe Mateus](https://felipemateus.com)** - [Felipefm32](https://github.com/felipefm32) \ No newline at end of file +**[Felipe Mateus](https://felipemateus.com)** - [Felipefm32](https://github.com/eufelipemateus) \ No newline at end of file diff --git a/package.json b/package.json index 89dde12..c13ed6c 100644 --- a/package.json +++ b/package.json @@ -7,12 +7,13 @@ "node": "10.18.0" }, "scripts": { - "build": "tslint --project . && tsc", + "build": "tslint --project . && tsc --declaration && npm run minify", "serve": "nodemon --watch \"src/**/*\" -e ts --exec \"ts-node -r tsconfig-paths/register\" ./src/Server.ts", "start": "node ./._build/Server.js", "pm2:start": "pm2 start ./._build/Server.js --name dominio-felipefm32", "lint:ts:base": "tslint --project tsconfig.json --config tslint.json", - "lint:ts": "npm run lint:ts:base \"src/**/*.ts\"" + "lint:ts": "npm run lint:ts:base \"src/**/*.ts\"", + "minify": "jsmin -o public/js/Game.min.js public/js/Game.js" }, "repository": { "type": "git", @@ -41,15 +42,16 @@ "socket.io": "^2.2.0" }, "devDependencies": { - "@types/socket.io": "^2.1.2", + "@types/dotenv": "8.2.0", "@types/node": "^7.0.5", + "@types/socket.io": "^2.1.2", + "jsmin": "^1.0.1", + "lint-staged": "9.5.0", "nodemon": "^1.11.0", - "typescript": "3.7.2", - "@types/dotenv": "8.2.0", "ts-node": "3.3.0", "tsconfig-paths": "3.9.0", "tslint": "5.7.0", - "lint-staged": "9.5.0" + "typescript": "3.7.2" }, "bugs": { "url": "https://github.com/felipefm32/NodeDomino/issues" diff --git a/public/index.html b/public/index.html index 1a49a5c..2cf5085 100644 --- a/public/index.html +++ b/public/index.html @@ -3,6 +3,7 @@ + Dominó @@ -50,7 +51,7 @@ } #tabuleiro{ width:70%; - height:450px; + height:400px; text-align:center; border-right:2px solid #000; border-bottom:2px solid #000; @@ -58,10 +59,10 @@ display:inline-block; } .stat{ - height:450px; + height:400px; width:29.5%; display:inline-block; - float:right; + float: right; } .stat h1{ text-align:center; @@ -192,16 +193,14 @@

Estastiticas

Passar Vez
- Felipe Mateus
- - Licença Creative Commons
Este obra está licenciado com uma Licença Creative Commons Atribuição-NãoComercial 4.0 Internacional. -
+ Licença Creative Commons
Este obra está licenciado com uma Licença Creative Commons Atribuição-NãoComercial 4.0 Internacional. +
- + \ No newline at end of file diff --git a/public/js/Game.js b/public/js/Game.js index c0621f7..410d01e 100644 --- a/public/js/Game.js +++ b/public/js/Game.js @@ -9,24 +9,26 @@ var Game = /** @class */ (function () { if (invertido === void 0) { invertido = false; } var n1 = nums[0]; var n2 = nums[1]; - var dcard = document.createElement("div"); - dcard.classList.add("card"); - dcard.setAttribute("value", nums); - if (horizontal) - dcard.classList.add("R90"); - if (invertido) - dcard.classList.add("R180"); - var span = document.createElement("span"); - span.classList.add("dice"); - span.classList.add("dice-" + n1); - span.setAttribute("value", n1); + var dcard = document.createElement('div'); + dcard.classList.add('card'); + dcard.setAttribute('value', nums); + if (horizontal) { + dcard.classList.add('R90'); + } + if (invertido) { + dcard.classList.add('R180'); + } + var span = document.createElement('span'); + span.classList.add('dice'); + span.classList.add('dice-' + n1); + span.setAttribute('value', n1); dcard.appendChild(span); - var hr = document.createElement("hr"); + var hr = document.createElement('hr'); dcard.appendChild(hr); - span = document.createElement("span"); - span.classList.add("dice"); - span.classList.add("dice-" + n2); - span.setAttribute("value", n2); + span = document.createElement('span'); + span.classList.add('dice'); + span.classList.add('dice-' + n2); + span.setAttribute('value', n2); dcard.appendChild(span); return dcard; }; @@ -37,7 +39,6 @@ var Game = /** @class */ (function () { else { return false; } - ; }; Game.prototype.isInverted = function (nums) { if (nums[1] == this.Ultimo && (nums[1] != nums[0])) { @@ -46,7 +47,6 @@ var Game = /** @class */ (function () { else { return false; } - ; }; Game.prototype.isAllowed = function (nums, num) { if ((num == this.Ultimo) || ((nums[0] == 6) && (nums[1] == 6))) { @@ -67,100 +67,107 @@ var Game = /** @class */ (function () { this.Ultimo = ultimo; }; Game.prototype.OpenToken = function () { - document.getElementById("pass").classList.add("active"); - document.getElementById("wait").classList.add("disabled"); - document.getElementById("status").innerHTML = "Minha Vez!"; + document.getElementById('pass').classList.add('active'); + document.getElementById('wait').classList.add('disabled'); + document.getElementById('status').innerHTML = 'Minha Vez!'; }; Game.prototype.CloseToken = function () { - document.getElementById("pass").classList.remove("active"); - document.getElementById("wait").classList.remove("disabled"); - document.getElementById("status").innerHTML = "Aguardando Vez..."; + document.getElementById('pass').classList.remove('active'); + document.getElementById('wait').classList.remove('disabled'); + document.getElementById('status').innerHTML = 'Aguardando Vez...'; }; Game.prototype.PassarVez = function () { - this.socket.emit("PASS"); + this.socket.emit('PASS'); this.CloseToken(); }; Game.prototype.downTabScroll = function () { - var objDiv = document.getElementById("tabuleiro"); + var objDiv = document.getElementById('tabuleiro'); objDiv.scrollTop = objDiv.scrollHeight; }; Game.prototype.createHand = function (Hand) { var _this = this; - var _loop_1 = function (i) { - var nums = Hand[i]; + var _loop_1 = function (nums) { var card = this_1.newCard(nums, false); - var dices = card.querySelectorAll(".dice"); + var dices = card.querySelectorAll('.dice'); dices.forEach(function (dice, index) { - dice.classList.add("hand"); - dice.addEventListener("click", function (e) { - //Aqui entra Função Pra selecionar Peça no tabuleiro - if (!_this.isAllowed(nums, nums[index])) + dice.classList.add('hand'); + dice.addEventListener('click', function (e) { + // Aqui entra Função Pra selecionar Peça no tabuleiro + if (!_this.isAllowed(nums, nums[index])) { return false; + } var clone = e.srcElement.parentElement.cloneNode(true); - if (_this.isDouble(nums)) - clone.classList.add("R90"); - if (_this.isInverted(nums)) - clone.classList.add("R180"); - document.getElementById("tabuleiro").appendChild(clone); + if (_this.isDouble(nums)) { + clone.classList.add('R90'); + } + if (_this.isInverted(nums)) { + clone.classList.add('R180'); + } + document.getElementById('tabuleiro').appendChild(clone); _this.downTabScroll(); e.srcElement.parentElement.remove(); _this.changeUltimo(nums); _this.CloseToken(); - _this.socket.emit("gaming", { value: nums, last: _this.Ultimo }); + _this.socket.emit('gaming', { value: nums, last: _this.Ultimo }); }); - dice.addEventListener("mouseover", function (e) { + dice.addEventListener('mouseover', function (e) { if (_this.isAllowed(nums, nums[index])) { - e.srcElement.classList.add("hoverPossible"); + e.srcElement.classList.add('hoverPossible'); } else { - e.srcElement.classList.add("hoverImPossible"); + e.srcElement.classList.add('hoverImPossible'); } }); - dice.addEventListener("mouseout", function (e) { - e.srcElement.classList.remove("hoverPossible"); - e.srcElement.classList.remove("hoverImPossible"); + dice.addEventListener('mouseout', function (e) { + e.srcElement.classList.remove('hoverPossible'); + e.srcElement.classList.remove('hoverImPossible'); }); }); - document.getElementById("hand").appendChild(card); + document.getElementById('hand').appendChild(card); }; var this_1 = this; - for (var i = 0; i < Hand.length; i++) { - _loop_1(i); + for (var _i = 0, Hand_1 = Hand; _i < Hand_1.length; _i++) { + var nums = Hand_1[_i]; + _loop_1(nums); } }; Game.prototype.Reiniciar = function () { - document.getElementById("tabuleiro").innerHTML = ""; - var cards = document.querySelectorAll("#hand > div:not(#wait) "); + document.getElementById('tabuleiro').innerHTML = ''; + var cards = document.querySelectorAll('#hand > div:not(#wait) '); cards.forEach(function (card) { card.parentNode.removeChild(card); }); - document.getElementById("status").innerHTML = "Aguardando jogadores..."; + document.getElementById('status').innerHTML = 'Aguardando jogadores...'; }; /*** Listen connections ***/ Game.prototype.listen = function () { var _this = this; this.socket.on('connect', function () { - if (_this.Debug) - console.info("conectado!!"); - _this.socket.emit("NEW CONNECTION", window.prompt("Digite seu nome:")); + if (_this.Debug) { + console.info('conectado!!'); + } + _this.socket.emit('NEW CONNECTION', window.prompt('Digite seu nome:')); }); this.socket.on('HAND', function (msg) { _this.Reiniciar(); _this.createHand(msg); }); this.socket.on('GAMER NAME', function (msg) { - document.getElementById("gamerName_" + msg.gamer).innerHTML = msg.name; - document.getElementById("gamer_num").innerHTML = (msg.gamer + 1); + document.getElementById('gamerName_' + msg.gamer).innerHTML = msg.name; + document.getElementById('gamer_num').innerHTML = (msg.gamer + 1); _this.Jogador = msg.gamer; }); this.socket.on('MOVIMENT', function (msg) { - var horizontal = false, invertido = false; - if (_this.isDouble(msg.value)) + var horizontal = false; + var invertido = false; + if (_this.isDouble(msg.value)) { horizontal = true; - if (_this.isInverted(msg.value)) + } + if (_this.isInverted(msg.value)) { invertido = true; + } var card = _this.newCard(msg.value, horizontal, invertido); - document.getElementById("tabuleiro").appendChild(card); + document.getElementById('tabuleiro').appendChild(card); _this.downTabScroll(); _this.Ultimo = msg.last; }); @@ -169,16 +176,16 @@ var Game = /** @class */ (function () { if (token == _this.Jogador) { _this.OpenToken(); } - document.getElementById("Tokenjogador_" + token).checked = true; + document.getElementById('Tokenjogador_' + token).checked = true; }); this.socket.on('REBOOT', function (msg) { alert(msg); _this.Reiniciar(); }); this.socket.on('INFO', function (msg) { - document.getElementById("gamers").innerHTML = msg.Gamers; - document.getElementById("tab").innerHTML = msg.Tab; - document.getElementById("cards_in_hand").innerHTML = msg.CardsInHand; + document.getElementById('gamers').innerHTML = msg.Gamers; + document.getElementById('tab').innerHTML = msg.Tab; + document.getElementById('cards_in_hand').innerHTML = msg.CardsInHand; }); }; return Game; diff --git a/public/js/Game.ts b/public/js/Game.ts index b1a65a0..2fba015 100644 --- a/public/js/Game.ts +++ b/public/js/Game.ts @@ -1,178 +1,177 @@ -class Game{ - - private Ultimo=-1; - private Jogador; - private Debug; - private socket; - - constructor(io){ - this.socket = io(); - this.listen(); - } - - private newCard(nums,horizontal=false,invertido=false){ - let n1 = nums[0]; - let n2 = nums[1]; - let dcard = document.createElement("div"); - dcard.classList.add("card"); - dcard.setAttribute("value",nums); - if(horizontal) dcard.classList.add("R90"); - if(invertido) dcard.classList.add("R180"); - - let span = document.createElement("span"); - span.classList.add("dice"); - span.classList.add("dice-"+n1); - span.setAttribute("value",n1); - dcard.appendChild(span); - - let hr = document.createElement("hr"); - dcard.appendChild(hr); - - span = document.createElement("span"); - span.classList.add("dice"); - span.classList.add("dice-"+n2); - span.setAttribute("value",n2); - dcard.appendChild(span); - - return dcard; - } - - private isDouble(nums){ - if(nums[0]==nums[1]){ return true }else{ return false}; - } - private isInverted(nums){ - if(nums[1]==this.Ultimo && (nums[1] != nums[0])){ return true }else{ return false}; - } - private isAllowed(nums,num){ - if((num==this.Ultimo) || ((nums[0]==6) && (nums[1]==6))){return true ;} else{ return false;} - } - private changeUltimo(nums){ - let ultimo = this.Ultimo; - nums.forEach((num)=>{ - if(num!=ultimo && num!= this.Ultimo){ - ultimo=num; - } - }); - this.Ultimo = ultimo; - } - private OpenToken(){ - document.getElementById("pass").classList.add("active"); - document.getElementById("wait").classList.add("disabled"); - document.getElementById("status").innerHTML = "Minha Vez!"; - } - - private CloseToken(){ - document.getElementById("pass").classList.remove("active"); - document.getElementById("wait").classList.remove("disabled"); - document.getElementById("status").innerHTML = "Aguardando Vez..."; - } - private PassarVez(){ - this.socket.emit("PASS"); - this.CloseToken(); - } - private downTabScroll(){ - let objDiv = document.getElementById("tabuleiro"); - objDiv.scrollTop = objDiv.scrollHeight; - } - - private createHand(Hand){ - for(let i=0;i{ - dice.classList.add("hand"); - dice.addEventListener("click",(e)=>{ - //Aqui entra Função Pra selecionar Peça no tabuleiro - - if(!this.isAllowed(nums,nums[index])) return false; - let clone = (e.srcElement).parentElement.cloneNode(true); - - if(this.isDouble(nums)) (clone).classList.add("R90"); - if(this.isInverted(nums)) (clone).classList.add("R180"); - - document.getElementById("tabuleiro").appendChild(clone); - this.downTabScroll(); - (e.srcElement).parentElement.remove(); - - this.changeUltimo(nums); - - this.CloseToken(); - this.socket.emit("gaming",{value:nums , last:this.Ultimo}); - - }); - - dice.addEventListener("mouseover", (e)=>{ - if(this.isAllowed(nums,nums[index])){ - (e.srcElement).classList.add("hoverPossible"); - }else{ - (e.srcElement).classList.add("hoverImPossible"); - } - }); - - dice.addEventListener("mouseout", function(e){ - (e.srcElement).classList.remove("hoverPossible"); - (e.srcElement).classList.remove("hoverImPossible"); - }); - }); - document.getElementById("hand").appendChild(card); - } - } - - private Reiniciar(){ - document.getElementById("tabuleiro").innerHTML = ""; - var cards = document.querySelectorAll("#hand > div:not(#wait) "); - cards.forEach( function(card){ - card.parentNode.removeChild( card ); - }); - document.getElementById("status").innerHTML = "Aguardando jogadores..."; - } - - /*** Listen connections ***/ - private listen(){ - this.socket.on('connect', () => { - if(this.Debug)console.info("conectado!!"); - this.socket.emit("NEW CONNECTION",window.prompt("Digite seu nome:")); - - }); - this.socket.on('HAND', (msg)=> { - this.Reiniciar(); - this.createHand(msg); - }); - this.socket.on('GAMER NAME', (msg)=> { - document.getElementById("gamerName_"+msg.gamer).innerHTML =msg.name ; - document.getElementById("gamer_num").innerHTML = (msg.gamer+1); - this.Jogador=msg.gamer; - }); - this.socket.on('MOVIMENT', (msg)=> { - let horizontal=false,invertido=false; - - if(this.isDouble(msg.value)) horizontal=true; - if(this.isInverted(msg.value)) invertido=true; - - let card = this.newCard(msg.value,horizontal,invertido); - - document.getElementById("tabuleiro").appendChild(card); - this.downTabScroll(); - this.Ultimo= msg.last; - }); - this.socket.on('TOKEN', (token)=> { - this.CloseToken(); - if(token==this.Jogador){ - this.OpenToken(); - } - (document.getElementById("Tokenjogador_"+token)).checked =true; - }); - this.socket.on('REBOOT', (msg)=> { - alert(msg); - this.Reiniciar(); - }); - this.socket.on('INFO',(msg)=>{ - document.getElementById("gamers").innerHTML = msg.Gamers; - document.getElementById("tab").innerHTML = msg.Tab; - document.getElementById("cards_in_hand").innerHTML = msg.CardsInHand; - }); - } -} \ No newline at end of file +class Game { + + private Ultimo= -1; + private Jogador; + private Debug; + private socket; + + constructor(io) { + this.socket = io(); + this.listen(); + } + + private newCard(nums, horizontal= false, invertido= false) { + const n1 = nums[0]; + const n2 = nums[1]; + const dcard = document.createElement('div'); + dcard.classList.add('card'); + dcard.setAttribute('value', nums); + if (horizontal) { dcard.classList.add('R90'); } + if (invertido) { dcard.classList.add('R180'); } + + let span = document.createElement('span'); + span.classList.add('dice'); + span.classList.add('dice-' + n1); + span.setAttribute('value', n1); + dcard.appendChild(span); + + const hr = document.createElement('hr'); + dcard.appendChild(hr); + + span = document.createElement('span'); + span.classList.add('dice'); + span.classList.add('dice-' + n2); + span.setAttribute('value', n2); + dcard.appendChild(span); + + return dcard; + } + + private isDouble(nums) { + if (nums[0] == nums[1]) { return true; }else { return false; } + } + private isInverted(nums) { + if (nums[1] == this.Ultimo && (nums[1] != nums[0])) { return true; }else { return false; } + } + private isAllowed(nums, num) { + if ((num == this.Ultimo) || ((nums[0] == 6) && (nums[1] == 6))) {return true ; } else { return false; } + } + private changeUltimo(nums) { + let ultimo = this.Ultimo; + nums.forEach((num) => { + if (num != ultimo && num != this.Ultimo) { + ultimo = num; + } + }); + this.Ultimo = ultimo; + } + private OpenToken() { + document.getElementById('pass').classList.add('active'); + document.getElementById('wait').classList.add('disabled'); + document.getElementById('status').innerHTML = 'Minha Vez!'; + } + + private CloseToken() { + document.getElementById('pass').classList.remove('active'); + document.getElementById('wait').classList.remove('disabled'); + document.getElementById('status').innerHTML = 'Aguardando Vez...'; + } + private PassarVez() { + this.socket.emit('PASS'); + this.CloseToken(); + } + private downTabScroll() { + const objDiv = document.getElementById('tabuleiro'); + objDiv.scrollTop = objDiv.scrollHeight; + } + + private createHand(Hand) { + for (const nums of Hand){ + const card = this.newCard(nums, false); + const dices = card.querySelectorAll('.dice'); + dices.forEach((dice, index) => { + dice.classList.add('hand'); + dice.addEventListener('click', (e) => { + // Aqui entra Função Pra selecionar Peça no tabuleiro + + if (!this.isAllowed(nums, nums[index])) { return false; } + const clone = ( e.srcElement as Element).parentElement.cloneNode(true); + + if (this.isDouble(nums)) { ( clone as Element).classList.add('R90'); } + if (this.isInverted(nums)) { ( clone as Element).classList.add('R180'); } + + document.getElementById('tabuleiro').appendChild(clone); + this.downTabScroll(); + ( e.srcElement as Element).parentElement.remove(); + + this.changeUltimo(nums); + + this.CloseToken(); + this.socket.emit('gaming', {value: nums , last: this.Ultimo}); + + }); + + dice.addEventListener('mouseover', (e) => { + if (this.isAllowed(nums, nums[index])) { + ( e.srcElement as Element).classList.add('hoverPossible'); + }else { + ( e.srcElement as Element).classList.add('hoverImPossible'); + } + }); + + dice.addEventListener('mouseout', (e) => { + ( e.srcElement as Element).classList.remove('hoverPossible'); + ( e.srcElement as Element).classList.remove('hoverImPossible'); + }); + }); + document.getElementById('hand').appendChild(card); + } + } + + private Reiniciar() { + document.getElementById('tabuleiro').innerHTML = ''; + const cards = document.querySelectorAll('#hand > div:not(#wait) '); + cards.forEach( (card) => { + card.parentNode.removeChild( card ); + }); + document.getElementById('status').innerHTML = 'Aguardando jogadores...'; + } + + /*** Listen connections ***/ + private listen() { + this.socket.on('connect', () => { + if (this.Debug) { console.info('conectado!!'); } + this.socket.emit('NEW CONNECTION', window.prompt('Digite seu nome:')); + + }); + this.socket.on('HAND', (msg) => { + this.Reiniciar(); + this.createHand(msg); + }); + this.socket.on('GAMER NAME', (msg) => { + document.getElementById('gamerName_' + msg.gamer).innerHTML = msg.name ; + document.getElementById('gamer_num').innerHTML = (msg.gamer + 1); + this.Jogador = msg.gamer; + }); + this.socket.on('MOVIMENT', (msg) => { + let horizontal = false; + let invertido = false; + + if (this.isDouble(msg.value)) { horizontal = true; } + if (this.isInverted(msg.value)) { invertido = true; } + + const card = this.newCard(msg.value, horizontal, invertido); + + document.getElementById('tabuleiro').appendChild(card); + this.downTabScroll(); + this.Ultimo = msg.last; + }); + this.socket.on('TOKEN', (token) => { + this.CloseToken(); + if (token == this.Jogador) { + this.OpenToken(); + } + ( document.getElementById('Tokenjogador_' + token) as HTMLInputElement).checked = true; + }); + this.socket.on('REBOOT', (msg) => { + alert(msg); + this.Reiniciar(); + }); + this.socket.on('INFO', (msg) => { + document.getElementById('gamers').innerHTML = msg.Gamers; + document.getElementById('tab').innerHTML = msg.Tab; + document.getElementById('cards_in_hand').innerHTML = msg.CardsInHand; + }); + } +} diff --git a/src/App.ts b/src/App.ts index c3e6f98..a5708ea 100644 --- a/src/App.ts +++ b/src/App.ts @@ -60,7 +60,7 @@ class App { socket.broadcast.emit('MOVIMENT', msg); domino.removeGamerCard(socket, msg.value); if (domino.isGamerWinner(socket)) { - this.reboot('O Jogador' + (domino.indexOfGamers(socket) + 1) + ' Venceu!'); + this.reboot('O Jogador ' + (domino.indexOfGamers(socket) + 1) + ' - "' + domino.Gamers[domino.indexOfGamers(socket)].name + '" Venceu!'); if (this.debug) { console.info('User Winner!'); }