mirror of
https://github.com/Aviortheking/Puissance4.git
synced 2025-06-27 08:59:19 +00:00
Ajout de fonctions
This commit is contained in:
SamuWrob
212
public/Game.ts
212
public/Game.ts
@ -1,212 +0,0 @@
|
||||
import { DOMElement, DOMFleetManager } from '@dzeio/dom-manager'
|
||||
import { textChangeRangeIsUnchanged } from 'typescript'
|
||||
|
||||
export default class Game {
|
||||
|
||||
private table: DOMElement<HTMLTableElement>
|
||||
private columns: Array<Array<DOMElement>> = []
|
||||
|
||||
private gameStarted = false
|
||||
|
||||
public constructor(
|
||||
table: HTMLTableElement
|
||||
) {
|
||||
this.table = new DOMElement(table)
|
||||
this.setupGeneral()
|
||||
}
|
||||
|
||||
public setupGeneral() {
|
||||
// Clear la table
|
||||
this.columns = []
|
||||
const rows = new DOMFleetManager('tr', this.table)
|
||||
rows.each((item, rowIndex) => {
|
||||
const cells = new DOMFleetManager('td', item)
|
||||
// cellIndex = 0-6
|
||||
cells.each((cell, cellIndex) => {
|
||||
if (this.columns.length <= cellIndex) {
|
||||
this.columns.push([])
|
||||
}
|
||||
this.columns[cellIndex].push(cell)
|
||||
|
||||
cell
|
||||
.text(' ')
|
||||
.data('color', null)
|
||||
.data('winner', null)
|
||||
if (cell.data('event-added') === null) {
|
||||
cell.on('click', () => {
|
||||
if (this.gameStarted) {
|
||||
this.onPlayerMove(cell, cellIndex)
|
||||
}
|
||||
})
|
||||
cell.data('event-added', 'true')
|
||||
}
|
||||
|
||||
// Put each cells in the corresponding column
|
||||
|
||||
|
||||
})
|
||||
console.log(this.columns)
|
||||
})
|
||||
|
||||
// Setup la base du jeux
|
||||
}
|
||||
|
||||
public setRestartButton(btn: DOMElement) {
|
||||
btn.on('click', () => {
|
||||
this.setupGeneral()
|
||||
this.startSinglePlayer()
|
||||
})
|
||||
}
|
||||
|
||||
public isWaitingForPlayerMove = false
|
||||
public playerColor: 'red' | 'yellow' = 'red'
|
||||
public gameType: 'single' | 'multi' = 'single'
|
||||
|
||||
public startSinglePlayer() {
|
||||
this.gameStarted = true
|
||||
this.isWaitingForPlayerMove = true
|
||||
}
|
||||
|
||||
public setPlayerTurn(player: boolean) {
|
||||
const playerShower = DOMElement.get('.playerColor')
|
||||
if (!playerShower) {
|
||||
return
|
||||
}
|
||||
playerShower.text(player ? this.playerColor : this.playerColor === 'red' ? 'yellow' : 'red')
|
||||
if (player) {
|
||||
this.isWaitingForPlayerMove = true
|
||||
}
|
||||
}
|
||||
|
||||
public setupMultiplayer() {}
|
||||
|
||||
public onPlayerMove(cell: DOMElement, xPos: number) {
|
||||
if (this.isWaitingForPlayerMove) {
|
||||
this.isWaitingForPlayerMove = !this.makeMove(xPos, this.playerColor)
|
||||
if (this.isWaitingForPlayerMove) {
|
||||
return
|
||||
}
|
||||
if (this.gameType === 'single' && this.gameStarted) {
|
||||
setTimeout(() => {
|
||||
this.makeIATakeTurn()
|
||||
this.setPlayerTurn(true)
|
||||
}, getRandomInt(200, 2000))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Make a move and return and true if the move was done and false if the move was not done
|
||||
*/
|
||||
public makeMove(xPos: number, color: 'red' | 'yellow'): boolean {
|
||||
|
||||
let cellToFill: DOMElement | undefined
|
||||
let yPos = 0
|
||||
for (let i = 0; i < this.columns[xPos].length; i++) {
|
||||
const cell = this.columns[xPos][i];
|
||||
const color = cell.data('color')
|
||||
if (!color) {
|
||||
cellToFill = cell
|
||||
yPos = i
|
||||
}
|
||||
if (color) {
|
||||
break
|
||||
}
|
||||
|
||||
}
|
||||
console.log('cellToFill', cellToFill)
|
||||
if (!cellToFill) {
|
||||
return false
|
||||
}
|
||||
cellToFill.data('color', color)
|
||||
this.checkWinner(xPos, yPos)
|
||||
return true
|
||||
}
|
||||
|
||||
public checkWinner(x: number, y: number) {
|
||||
const win = this.checkDirection(x, y, 'horizontal') || this.checkDirection(x, y, 'vertical') || this.checkDirection(x, y, 'diagonal-left') || this.checkDirection(x, y, 'diagonal-right')
|
||||
if (win === false) {
|
||||
console.log('FALSE')
|
||||
return false
|
||||
}
|
||||
console.log(win)
|
||||
win.forEach((item) => {
|
||||
console.log(item.data('winner', 'true'))
|
||||
})
|
||||
this.gameStarted = false
|
||||
}
|
||||
|
||||
public checkDirection(x: number, y: number, direction: 'horizontal' | 'vertical' | 'diagonal-left' | 'diagonal-right'): Array<DOMElement> | false {
|
||||
console.log('Starting Check', direction)
|
||||
const color = this.columns[x][y].data('color')
|
||||
if (!color) {
|
||||
return false
|
||||
}
|
||||
const items = []
|
||||
let wentReverse: number | undefined
|
||||
for (let i = 0; i < 4; i++) {
|
||||
let newX = x
|
||||
if (direction === 'horizontal' || direction.startsWith('diagonal')) {
|
||||
newX = typeof wentReverse !== 'undefined' ? x + i - wentReverse : x - i
|
||||
if (direction === 'diagonal-left') {
|
||||
newX = typeof wentReverse !== 'undefined' ? x - i + wentReverse : x + i
|
||||
}
|
||||
}
|
||||
let newY = y
|
||||
if (direction === 'vertical' || direction.startsWith('diagonal')) {
|
||||
newY = typeof wentReverse !== 'undefined' ? y + i - wentReverse : y - i
|
||||
}
|
||||
|
||||
console.log('index', i, 'y', newY, 'Y exist', this.isYCorrect(newY))
|
||||
console.log('index', i, 'x', newX, 'X exist', this.isXCorrect(newX))
|
||||
|
||||
if (!this.isYCorrect(newY) || !this.isXCorrect(newX)) {
|
||||
if (typeof wentReverse === 'undefined') {
|
||||
wentReverse = --i
|
||||
continue
|
||||
}
|
||||
return false
|
||||
}
|
||||
const element = this.columns[newX][newY]
|
||||
|
||||
console.log('element color', element.data('color'), 'color wanted', color)
|
||||
|
||||
if (element.data('color') !== color) {
|
||||
if (typeof wentReverse === 'undefined') {
|
||||
wentReverse = --i
|
||||
continue
|
||||
}
|
||||
return false
|
||||
}
|
||||
items.push(element)
|
||||
}
|
||||
return items
|
||||
}
|
||||
|
||||
private isXCorrect(x: number) {
|
||||
return x >= 0 && x < this.columns.length
|
||||
}
|
||||
|
||||
private isYCorrect(y: number) {
|
||||
return y >= 0 && y < this.columns[0].length
|
||||
}
|
||||
|
||||
public makeIATakeTurn() {
|
||||
let turnDone = false
|
||||
while (!turnDone) {
|
||||
const pos = getRandomInt(0, this.columns.length - 1)
|
||||
turnDone = this.makeMove(pos, 'red')
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
function getRandomInt(min: number, max: number) {
|
||||
return Math.floor(Math.random() * ((max + 1) - min)) + min
|
||||
}
|
||||
|
||||
|
||||
|
||||
// const cell = new DOMElement('tr')
|
||||
|
||||
// cell.data('color') // return 'red | 'yello' pour get
|
||||
// cell.data('color', 'red') //return void pour set
|
||||
@ -1,74 +1 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Puissance 4</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div>Tour du joueur <span class="playerColor"></span></div>
|
||||
<button class="restartBtn">Recommencer</button>
|
||||
<div class="tableContainer">
|
||||
<table>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>2</td>
|
||||
<td>2</td>
|
||||
<td>2</td>
|
||||
<td>2</td>
|
||||
<td>2</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>3</td>
|
||||
<td>3</td>
|
||||
<td>3</td>
|
||||
<td>3</td>
|
||||
<td>3</td>
|
||||
<td>3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>4</td>
|
||||
<td>4</td>
|
||||
<td>4</td>
|
||||
<td>4</td>
|
||||
<td>4</td>
|
||||
<td>4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>5</td>
|
||||
<td>5</td>
|
||||
<td>5</td>
|
||||
<td>5</td>
|
||||
<td>5</td>
|
||||
<td>5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>6</td>
|
||||
<td>6</td>
|
||||
<td>6</td>
|
||||
<td>6</td>
|
||||
<td>6</td>
|
||||
<td>6</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
<script src="./main.ts"></script>
|
||||
|
||||
</html>
|
||||
<!DOCTYPE html><html lang="fr"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Puissance 4</title><link rel="stylesheet" href="/main.491056a1.css"></head><body> <div>Tour du joueur <span class="playerColor"></span></div> <button class="restartBtn">Recommencer</button> <div class="tableContainer"> <table> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> <td>3</td> <td>3</td> <td>3</td> <td>3</td> <td>3</td> </tr> <tr> <td>4</td> <td>4</td> <td>4</td> <td>4</td> <td>4</td> <td>4</td> <td>4</td> </tr> <tr> <td>5</td> <td>5</td> <td>5</td> <td>5</td> <td>5</td> <td>5</td> <td>5</td> </tr> <tr> <td>6</td> <td>6</td> <td>6</td> <td>6</td> <td>6</td> <td>6</td> <td>6</td> </tr> </table> </div> </body><script src="/main.6ae8f54c.js"></script></html>
|
||||
2
public/main.491056a1.css
Normal file
2
public/main.491056a1.css
Normal file
@ -0,0 +1,2 @@
|
||||
body{margin:0;padding:0}.tableContainer{display:flex;align-items:center;justify-content:center;height:40rem}table{border:2px solid}td,tr{border:1px solid}td{height:10px;width:20px}td[data-color=red]{background:red}td[data-color=yellow]{background:#ff0}td[data-winner=true]{background:gold}
|
||||
/*# sourceMappingURL=/main.491056a1.css.map */
|
||||
1
public/main.491056a1.css.map
Normal file
1
public/main.491056a1.css.map
Normal file
@ -0,0 +1 @@
|
||||
{"version":3,"sources":["style.css"],"names":[],"mappings":"AAAA,KACI,QAAS,CACT,SAEJ,CAEA,gBACI,YAAa,CACb,kBAAmB,CACnB,sBAAuB,CACvB,YACJ,CAEA,MACI,gBAEJ,CAOA,MAHI,gBAOJ,CAJA,GAEI,WAAY,CACZ,UACJ,CAEA,mBACI,cACJ,CAEA,sBACI,eACJ,CAEA,qBACI,eACJ","file":"main.491056a1.css","sourceRoot":"../front-src","sourcesContent":["body {\n margin: 0;\n padding: 0;\n\n}\n\n.tableContainer {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 40rem;\n}\n\ntable {\n border: 2px solid;\n\n}\n\ntr {\n\n border: 1px solid;\n}\n\ntd {\n border: 1px solid;\n height: 10px;\n width: 20px;\n}\n\ntd[data-color=\"red\"] {\n background: red\n}\n\ntd[data-color=\"yellow\"] {\n background: yellow\n}\n\ntd[data-winner=\"true\"] {\n background: gold\n}\n"]}
|
||||
14
public/main.69e3d5fd.js
Normal file
14
public/main.69e3d5fd.js
Normal file
@ -0,0 +1,14 @@
|
||||
parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;c<t.length;c++)try{f(t[c])}catch(e){i||(i=e)}if(t.length){var l=f(t[t.length-1]);"object"==typeof exports&&"undefined"!=typeof module?module.exports=l:"function"==typeof define&&define.amd?define(function(){return l}):n&&(this[n]=l)}if(parcelRequire=f,i)throw i;return f}({"iMte":[function(require,module,exports) {
|
||||
|
||||
},{}],"djAK":[function(require,module,exports) {
|
||||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});class t{constructor(t,e){t instanceof HTMLElement?this.item=t:this.item=document.createElement(t,e)}static create(e,i){return new t(e,i)}static get(e,i){if(!(e instanceof HTMLElement)){const s=(i instanceof t?i.item:i||document).querySelector(e);if(!s)return;return new t(s)}return new t(e)}on(t,e,i){return this.item.addEventListener(t,e,i),this}off(t,e){return this.item.removeEventListener(t,e),this}text(t){return void 0!==t?(this.item.innerText=t,this):this.item.innerText}html(t){return void 0!==t?(this.item.innerHTML=t,this):this.item.innerHTML}addClass(...t){return this.item.classList.add(...t),this}setClass(...t){return this.item.classList.forEach(e=>{t.includes(e)||this.item.classList.remove(e)}),this.addClass(...t),this}classList(...t){if(!t){const t=[];return this.item.classList.forEach(e=>t.push(e)),t}return this.setClass(...t)}toggleClass(...t){for(const e of t)this.item.classList.toggle(e);return this}removeClass(...t){return this.item.classList.remove(...t),this}emit(t){return t in this.item?(this.item[t](),this):(this.item.dispatchEvent(new Event(t)),this)}attr(t,e){return void 0===e?this.item.getAttribute(t):null===e?(this.item.removeAttribute(t),this):"boolean"==typeof e?(this.item[t]=e,this):(this.item.setAttribute(t,e),this)}data(t,e){return this.attr(`data-${t}`,e)}style(t,e){return void 0===e?this.item.style[t]:(this.item.style[t]=e,this)}exist(){return!!this.item}placeBefore(e){e instanceof t&&(e=e.item);const i=e.parentElement;if(!i)throw new Error("can't place DOMElement before item because it has no parent");return i.insertBefore(this.item,e),this}placeAsChildOf(e){return e instanceof t&&(e=e.item),e.appendChild(this.item),this}place(t,e){return"before"===t?this.placeBefore(e):this.placeAsChildOf(e)}}exports.default=t;
|
||||
},{}],"u1Ry":[function(require,module,exports) {
|
||||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e=require(".");class t{constructor(e,t){this.query=e,this.source=t,this.items=[],this.refresh()}last(){return this.items[this.items.length-1]}each(e){this.items.forEach((t,s)=>e(t,s))}on(e,t,s){this.each(i=>i.on(e,t,s))}off(e,t){this.each(s=>s.off(e,t))}refresh(){this.items=[],(this.source instanceof e.DOMElement?this.source.item:this.source||document).querySelectorAll(this.query).forEach(t=>{const s=e.DOMElement.get(t);s&&this.items.push(s)})}[Symbol.iterator](){return this.items}}exports.default=t;
|
||||
},{".":"jPsm"}],"jPsm":[function(require,module,exports) {
|
||||
"use strict";var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.DOMFleetManager=exports.DOMElement=void 0;const t=e(require("./DOMElement"));exports.DOMElement=t.default;const r=e(require("./DOMFleetManager"));exports.DOMFleetManager=r.default;
|
||||
},{"./DOMElement":"djAK","./DOMFleetManager":"u1Ry"}],"jKSw":[function(require,module,exports) {
|
||||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("@dzeio/dom-manager"),e=function(){function e(e){this.columns=[],this.gameStarted=!1,this.isWaitingForPlayerMove=!1,this.playerColor="red",this.gameType="single",this.table=new t.DOMElement(e),this.setupGeneral()}return e.prototype.setupGeneral=function(){var e=this;this.columns=[],new t.DOMFleetManager("tr",this.table).each(function(o,r){new t.DOMFleetManager("td",o).each(function(t,o){e.columns.length<=o&&e.columns.push([]),e.columns[o].push(t),t.text(" ").data("color",null).data("winner",null),null===t.data("event-added")&&(t.on("click",function(){e.gameStarted&&e.onPlayerMove(t,o)}),t.data("event-added","true"))}),console.log(e.columns)})},e.prototype.setRestartButton=function(t){var e=this;t.on("click",function(){e.setupGeneral(),e.startSinglePlayer()})},e.prototype.startSinglePlayer=function(){this.gameStarted=!0,this.isWaitingForPlayerMove=!0},e.prototype.setPlayerTurn=function(e){var r=this,i=t.DOMElement.get(".playerColor");i&&(i.text(e?this.playerColor:"red"===this.playerColor?"yellow":"red"),e?this.isWaitingForPlayerMove=!0:"single"===this.gameType&&this.gameStarted&&setTimeout(function(){r.makeIATakeTurn(),r.setPlayerTurn(!0)},o(200,500)))},e.prototype.setupMultiplayer=function(){},e.prototype.onPlayerMove=function(t,e){if(this.isWaitingForPlayerMove){if(this.isWaitingForPlayerMove=!this.makeMove(e,this.playerColor),this.isWaitingForPlayerMove)return;"single"===this.gameType&&this.gameStarted&&this.setPlayerTurn(!1)}},e.prototype.makeMove=function(t,e){for(var o,r=0,i=0;i<this.columns[t].length;i++){var n=this.columns[t][i],a=n.data("color");if(a||(o=n,r=i),a)break}return console.log("cellToFill",o),!!o&&(o.data("color",e),this.checkWinner(t,r),!0)},e.prototype.checkWinner=function(t,e){var o=this.checkDirection(t,e,"horizontal")||this.checkDirection(t,e,"vertical")||this.checkDirection(t,e,"diagonal-left")||this.checkDirection(t,e,"diagonal-right");if(!1===o)return console.log("FALSE"),!1;console.log(o),o.forEach(function(t){console.log(t.data("winner","true"))}),this.gameStarted=!1},e.prototype.checkDirection=function(t,e,o){console.log("Starting Check",o);var r=this.columns[t][e].data("color");if(!r)return!1;for(var i,n=[],a=0;a<4;a++){var l=t;("horizontal"===o||o.startsWith("diagonal"))&&(l=void 0!==i?t+a-i:t-a,"diagonal-left"===o&&(l=void 0!==i?t-a+i:t+a));var s=e;if(("vertical"===o||o.startsWith("diagonal"))&&(s=void 0!==i?e+a-i:e-a),console.log("index",a,"y",s,"Y exist",this.isYCorrect(s)),console.log("index",a,"x",l,"X exist",this.isXCorrect(l)),!this.isYCorrect(s)||!this.isXCorrect(l)){if(void 0===i){i=--a;continue}return!1}var c=this.columns[l][s];if(console.log("element color",c.data("color"),"color wanted",r),c.data("color")!==r){if(void 0===i){i=--a;continue}return!1}n.push(c)}return n},e.prototype.isXCorrect=function(t){return t>=0&&t<this.columns.length},e.prototype.isYCorrect=function(t){return t>=0&&t<this.columns[0].length},e.prototype.makeIATakeTurn=function(){for(var t=!1;!t;){var e=o(0,this.columns.length-1);t=this.makeMove(e,"red")}},e}();function o(t,e){return Math.floor(Math.random()*(e+1-t))+t}exports.default=e;
|
||||
},{"@dzeio/dom-manager":"jPsm"}],"ZCfc":[function(require,module,exports) {
|
||||
"use strict";var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),require("./style.css");var t=e(require("./Game")),r=require("@dzeio/dom-manager"),o=document.querySelector("table");if(!o)throw new Error("Table not found");var a=new t.default(o),l=r.DOMElement.get(".restartBtn");l&&a.setRestartButton(l),a.playerColor="yellow",a.startSinglePlayer();
|
||||
},{"./style.css":"iMte","./Game":"jKSw","@dzeio/dom-manager":"jPsm"}]},{},["ZCfc"], null)
|
||||
//# sourceMappingURL=/main.69e3d5fd.js.map
|
||||
1
public/main.69e3d5fd.js.map
Normal file
1
public/main.69e3d5fd.js.map
Normal file
File diff suppressed because one or more lines are too long
14
public/main.6ae8f54c.js
Normal file
14
public/main.6ae8f54c.js
Normal file
@ -0,0 +1,14 @@
|
||||
parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;c<t.length;c++)try{f(t[c])}catch(e){i||(i=e)}if(t.length){var l=f(t[t.length-1]);"object"==typeof exports&&"undefined"!=typeof module?module.exports=l:"function"==typeof define&&define.amd?define(function(){return l}):n&&(this[n]=l)}if(parcelRequire=f,i)throw i;return f}({"iMte":[function(require,module,exports) {
|
||||
|
||||
},{}],"djAK":[function(require,module,exports) {
|
||||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});class t{constructor(t,e){t instanceof HTMLElement?this.item=t:this.item=document.createElement(t,e)}static create(e,i){return new t(e,i)}static get(e,i){if(!(e instanceof HTMLElement)){const s=(i instanceof t?i.item:i||document).querySelector(e);if(!s)return;return new t(s)}return new t(e)}on(t,e,i){return this.item.addEventListener(t,e,i),this}off(t,e){return this.item.removeEventListener(t,e),this}text(t){return void 0!==t?(this.item.innerText=t,this):this.item.innerText}html(t){return void 0!==t?(this.item.innerHTML=t,this):this.item.innerHTML}addClass(...t){return this.item.classList.add(...t),this}setClass(...t){return this.item.classList.forEach(e=>{t.includes(e)||this.item.classList.remove(e)}),this.addClass(...t),this}classList(...t){if(!t){const t=[];return this.item.classList.forEach(e=>t.push(e)),t}return this.setClass(...t)}toggleClass(...t){for(const e of t)this.item.classList.toggle(e);return this}removeClass(...t){return this.item.classList.remove(...t),this}emit(t){return t in this.item?(this.item[t](),this):(this.item.dispatchEvent(new Event(t)),this)}attr(t,e){return void 0===e?this.item.getAttribute(t):null===e?(this.item.removeAttribute(t),this):"boolean"==typeof e?(this.item[t]=e,this):(this.item.setAttribute(t,e),this)}data(t,e){return this.attr(`data-${t}`,e)}style(t,e){return void 0===e?this.item.style[t]:(this.item.style[t]=e,this)}exist(){return!!this.item}placeBefore(e){e instanceof t&&(e=e.item);const i=e.parentElement;if(!i)throw new Error("can't place DOMElement before item because it has no parent");return i.insertBefore(this.item,e),this}placeAsChildOf(e){return e instanceof t&&(e=e.item),e.appendChild(this.item),this}place(t,e){return"before"===t?this.placeBefore(e):this.placeAsChildOf(e)}}exports.default=t;
|
||||
},{}],"u1Ry":[function(require,module,exports) {
|
||||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e=require(".");class t{constructor(e,t){this.query=e,this.source=t,this.items=[],this.refresh()}last(){return this.items[this.items.length-1]}each(e){this.items.forEach((t,s)=>e(t,s))}on(e,t,s){this.each(i=>i.on(e,t,s))}off(e,t){this.each(s=>s.off(e,t))}refresh(){this.items=[],(this.source instanceof e.DOMElement?this.source.item:this.source||document).querySelectorAll(this.query).forEach(t=>{const s=e.DOMElement.get(t);s&&this.items.push(s)})}[Symbol.iterator](){return this.items}}exports.default=t;
|
||||
},{".":"jPsm"}],"jPsm":[function(require,module,exports) {
|
||||
"use strict";var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.DOMFleetManager=exports.DOMElement=void 0;const t=e(require("./DOMElement"));exports.DOMElement=t.default;const r=e(require("./DOMFleetManager"));exports.DOMFleetManager=r.default;
|
||||
},{"./DOMElement":"djAK","./DOMFleetManager":"u1Ry"}],"jKSw":[function(require,module,exports) {
|
||||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("@dzeio/dom-manager"),e=function(){function e(e){this.columns=[],this.gameStarted=!1,this.isWaitingForPlayerMove=!1,this.playerColor="red",this.gameType="single",this.table=new t.DOMElement(e),this.setupGeneral()}return e.prototype.setupGeneral=function(){var e=this;this.columns=[],new t.DOMFleetManager("tr",this.table).each(function(o,r){new t.DOMFleetManager("td",o).each(function(t,o){e.columns.length<=o&&e.columns.push([]),e.columns[o].push(t),t.text(" ").data("color",null).data("winner",null),null===t.data("event-added")&&(t.on("click",function(){e.gameStarted&&e.onPlayerMove(t,o)}),t.data("event-added","true"))}),console.log(e.columns)})},e.prototype.setRestartButton=function(t){var e=this;t.on("click",function(){e.setupGeneral(),e.startSinglePlayer()})},e.prototype.startSinglePlayer=function(){this.gameStarted=!0,this.isWaitingForPlayerMove=!0},e.prototype.setPlayerTurn=function(e){var r=this,i=t.DOMElement.get(".playerColor");i&&(i.text(e?this.playerColor:"red"===this.playerColor?"yellow":"red"),e?this.isWaitingForPlayerMove=!0:"single"===this.gameType&&this.gameStarted&&setTimeout(function(){r.makeIATakeTurn(),r.setPlayerTurn(!0)},o(200,500)))},e.prototype.setupMultiplayer=function(){},e.prototype.onPlayerMove=function(t,e){if(this.isWaitingForPlayerMove){if(this.isWaitingForPlayerMove=!this.makeMove(e,this.playerColor),this.isWaitingForPlayerMove)return;"single"===this.gameType&&this.gameStarted&&this.setPlayerTurn(!1)}},e.prototype.makeMove=function(t,e){for(var o,r=0,i=0;i<this.columns[t].length;i++){var n=this.columns[t][i],a=n.data("color");if(a||(o=n,r=i),a)break}return console.log("cellToFill",o),!!o&&(o.data("color",e),this.checkWinner(t,r),!0)},e.prototype.checkWinner=function(t,e){var o=this.checkDirection(t,e,"horizontal")||this.checkDirection(t,e,"vertical")||this.checkDirection(t,e,"diagonal-left")||this.checkDirection(t,e,"diagonal-right");if(!1===o)return console.log("FALSE"),!1;console.log(o),o.forEach(function(t){console.log(t.data("winner","true"))}),this.gameStarted=!1},e.prototype.checkDirection=function(t,e,o){console.log("Starting Check",o);var r=this.columns[t][e].data("color");if(!r)return!1;for(var i,n=[],a=0;a<4;a++){var l=t;("horizontal"===o||o.startsWith("diagonal"))&&(l=void 0!==i?t+a-i:t-a,"diagonal-left"===o&&(l=void 0!==i?t-a+i:t+a));var s=e;if(("vertical"===o||o.startsWith("diagonal"))&&(s=void 0!==i?e+a-i:e-a),console.log("index",a,"y",s,"Y exist",this.isYCorrect(s)),console.log("index",a,"x",l,"X exist",this.isXCorrect(l)),!this.isYCorrect(s)||!this.isXCorrect(l)){if(void 0===i){i=--a;continue}return!1}var c=this.columns[l][s];if(console.log("element color",c.data("color"),"color wanted",r),c.data("color")!==r){if(void 0===i){i=--a;continue}return!1}n.push(c)}return n},e.prototype.isXCorrect=function(t){return t>=0&&t<this.columns.length},e.prototype.isYCorrect=function(t){return t>=0&&t<this.columns[0].length},e.prototype.makeIATakeTurn=function(){for(var t=!1;!t;){var e=o(0,this.columns.length-1);t=this.makeMove(e,"red")}},e}();function o(t,e){return Math.floor(Math.random()*(e+1-t))+t}exports.default=e;
|
||||
},{"@dzeio/dom-manager":"jPsm"}],"ZCfc":[function(require,module,exports) {
|
||||
"use strict";var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),require("./style.css");var t=e(require("./Game")),r=require("@dzeio/dom-manager"),o=document.querySelector("table");if(!o)throw new Error("Table not found");var a=new t.default(o),l=r.DOMElement.get(".restartBtn");l&&a.setRestartButton(l),a.playerColor="yellow",a.startSinglePlayer();var n=new WebSocket("ws://localhost:8080");n.onmessage=function(e){console.log(e.data)};
|
||||
},{"./style.css":"iMte","./Game":"jKSw","@dzeio/dom-manager":"jPsm"}]},{},["ZCfc"], null)
|
||||
//# sourceMappingURL=/main.6ae8f54c.js.map
|
||||
1
public/main.6ae8f54c.js.map
Normal file
1
public/main.6ae8f54c.js.map
Normal file
File diff suppressed because one or more lines are too long
14
public/main.e275d3e4.js
Normal file
14
public/main.e275d3e4.js
Normal file
@ -0,0 +1,14 @@
|
||||
parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;c<t.length;c++)try{f(t[c])}catch(e){i||(i=e)}if(t.length){var l=f(t[t.length-1]);"object"==typeof exports&&"undefined"!=typeof module?module.exports=l:"function"==typeof define&&define.amd?define(function(){return l}):n&&(this[n]=l)}if(parcelRequire=f,i)throw i;return f}({"iMte":[function(require,module,exports) {
|
||||
|
||||
},{}],"djAK":[function(require,module,exports) {
|
||||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});class t{constructor(t,e){t instanceof HTMLElement?this.item=t:this.item=document.createElement(t,e)}static create(e,i){return new t(e,i)}static get(e,i){if(!(e instanceof HTMLElement)){const s=(i instanceof t?i.item:i||document).querySelector(e);if(!s)return;return new t(s)}return new t(e)}on(t,e,i){return this.item.addEventListener(t,e,i),this}off(t,e){return this.item.removeEventListener(t,e),this}text(t){return void 0!==t?(this.item.innerText=t,this):this.item.innerText}html(t){return void 0!==t?(this.item.innerHTML=t,this):this.item.innerHTML}addClass(...t){return this.item.classList.add(...t),this}setClass(...t){return this.item.classList.forEach(e=>{t.includes(e)||this.item.classList.remove(e)}),this.addClass(...t),this}classList(...t){if(!t){const t=[];return this.item.classList.forEach(e=>t.push(e)),t}return this.setClass(...t)}toggleClass(...t){for(const e of t)this.item.classList.toggle(e);return this}removeClass(...t){return this.item.classList.remove(...t),this}emit(t){return t in this.item?(this.item[t](),this):(this.item.dispatchEvent(new Event(t)),this)}attr(t,e){return void 0===e?this.item.getAttribute(t):null===e?(this.item.removeAttribute(t),this):"boolean"==typeof e?(this.item[t]=e,this):(this.item.setAttribute(t,e),this)}data(t,e){return this.attr(`data-${t}`,e)}style(t,e){return void 0===e?this.item.style[t]:(this.item.style[t]=e,this)}exist(){return!!this.item}placeBefore(e){e instanceof t&&(e=e.item);const i=e.parentElement;if(!i)throw new Error("can't place DOMElement before item because it has no parent");return i.insertBefore(this.item,e),this}placeAsChildOf(e){return e instanceof t&&(e=e.item),e.appendChild(this.item),this}place(t,e){return"before"===t?this.placeBefore(e):this.placeAsChildOf(e)}}exports.default=t;
|
||||
},{}],"u1Ry":[function(require,module,exports) {
|
||||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e=require(".");class t{constructor(e,t){this.query=e,this.source=t,this.items=[],this.refresh()}last(){return this.items[this.items.length-1]}each(e){this.items.forEach((t,s)=>e(t,s))}on(e,t,s){this.each(i=>i.on(e,t,s))}off(e,t){this.each(s=>s.off(e,t))}refresh(){this.items=[],(this.source instanceof e.DOMElement?this.source.item:this.source||document).querySelectorAll(this.query).forEach(t=>{const s=e.DOMElement.get(t);s&&this.items.push(s)})}[Symbol.iterator](){return this.items}}exports.default=t;
|
||||
},{".":"jPsm"}],"jPsm":[function(require,module,exports) {
|
||||
"use strict";var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.DOMFleetManager=exports.DOMElement=void 0;const t=e(require("./DOMElement"));exports.DOMElement=t.default;const r=e(require("./DOMFleetManager"));exports.DOMFleetManager=r.default;
|
||||
},{"./DOMElement":"djAK","./DOMFleetManager":"u1Ry"}],"jKSw":[function(require,module,exports) {
|
||||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("@dzeio/dom-manager"),e=function(){function e(e){this.columns=[],this.gameStarted=!1,this.isWaitingForPlayerMove=!1,this.playerColor="red",this.gameType="single",this.table=new t.DOMElement(e),this.setupGeneral()}return e.prototype.setupGeneral=function(){var e=this;this.columns=[],new t.DOMFleetManager("tr",this.table).each(function(o,r){new t.DOMFleetManager("td",o).each(function(t,o){e.columns.length<=o&&e.columns.push([]),e.columns[o].push(t),t.text(" ").data("color",null).data("winner",null),null===t.data("event-added")&&(t.on("click",function(){e.gameStarted&&e.onPlayerMove(t,o)}),t.data("event-added","true"))}),console.log(e.columns)})},e.prototype.setRestartButton=function(t){var e=this;t.on("click",function(){e.setupGeneral(),e.startSinglePlayer()})},e.prototype.startSinglePlayer=function(){this.gameStarted=!0,this.isWaitingForPlayerMove=!0},e.prototype.setPlayerTurn=function(e){var r=this,i=t.DOMElement.get(".playerColor");i&&(i.text(e?this.playerColor:"red"===this.playerColor?"yellow":"red"),e?this.isWaitingForPlayerMove=!0:"single"===this.gameType&&this.gameStarted&&setTimeout(function(){r.makeIATakeTurn(),r.setPlayerTurn(!0)},o(200,500)))},e.prototype.setupMultiplayer=function(){},e.prototype.onPlayerMove=function(t,e){if(this.isWaitingForPlayerMove){if(this.isWaitingForPlayerMove=!this.makeMove(e,this.playerColor),this.isWaitingForPlayerMove)return;"single"===this.gameType&&this.gameStarted&&this.setPlayerTurn(!1)}},e.prototype.makeMove=function(t,e){for(var o,r=0,i=0;i<this.columns[t].length;i++){var n=this.columns[t][i],a=n.data("color");if(a||(o=n,r=i),a)break}return console.log("cellToFill",o),!!o&&(o.data("color",e),this.checkWinner(t,r),!0)},e.prototype.checkWinner=function(t,e){var o=this.checkDirection(t,e,"horizontal")||this.checkDirection(t,e,"vertical")||this.checkDirection(t,e,"diagonal-left")||this.checkDirection(t,e,"diagonal-right");if(!1===o)return console.log("FALSE"),!1;console.log(o),o.forEach(function(t){console.log(t.data("winner","true"))}),this.gameStarted=!1},e.prototype.checkDirection=function(t,e,o){console.log("Starting Check",o);var r=this.columns[t][e].data("color");if(!r)return!1;for(var i,n=[],a=0;a<4;a++){var l=t;("horizontal"===o||o.startsWith("diagonal"))&&(l=void 0!==i?t+a-i:t-a,"diagonal-left"===o&&(l=void 0!==i?t-a+i:t+a));var s=e;if(("vertical"===o||o.startsWith("diagonal"))&&(s=void 0!==i?e+a-i:e-a),console.log("index",a,"y",s,"Y exist",this.isYCorrect(s)),console.log("index",a,"x",l,"X exist",this.isXCorrect(l)),!this.isYCorrect(s)||!this.isXCorrect(l)){if(void 0===i){i=--a;continue}return!1}var c=this.columns[l][s];if(console.log("element color",c.data("color"),"color wanted",r),c.data("color")!==r){if(void 0===i){i=--a;continue}return!1}n.push(c)}return n},e.prototype.isXCorrect=function(t){return t>=0&&t<this.columns.length},e.prototype.isYCorrect=function(t){return t>=0&&t<this.columns[0].length},e.prototype.makeIATakeTurn=function(){for(var t=!1;!t;){var e=o(0,this.columns.length-1);t=this.makeMove(e,"red")}},e}();function o(t,e){return Math.floor(Math.random()*(e+1-t))+t}exports.default=e;
|
||||
},{"@dzeio/dom-manager":"jPsm"}],"ZCfc":[function(require,module,exports) {
|
||||
"use strict";var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),require("./style.css");var t=e(require("./Game")),r=require("@dzeio/dom-manager"),o=document.querySelector("table");if(!o)throw new Error("Table not found");var a=new t.default(o),l=r.DOMElement.get(".restartBtn");l&&a.setRestartButton(l),a.playerColor="yellow",a.startSinglePlayer();var n=new WebSocket("http://localhost:8080");n.onmessage=function(e){console.log(e.data)};
|
||||
},{"./style.css":"iMte","./Game":"jKSw","@dzeio/dom-manager":"jPsm"}]},{},["ZCfc"], null)
|
||||
//# sourceMappingURL=/main.e275d3e4.js.map
|
||||
1
public/main.e275d3e4.js.map
Normal file
1
public/main.e275d3e4.js.map
Normal file
File diff suppressed because one or more lines are too long
@ -1,21 +0,0 @@
|
||||
import './style.css'
|
||||
|
||||
import Game from './Game'
|
||||
import { DOMElement } from '@dzeio/dom-manager'
|
||||
|
||||
const table = document.querySelector('table')
|
||||
|
||||
if (!table) {
|
||||
throw new Error('Table not found')
|
||||
}
|
||||
|
||||
const game = new Game(table)
|
||||
const restartBtn = DOMElement.get('.restartBtn')
|
||||
if (restartBtn) {
|
||||
game.setRestartButton(restartBtn)
|
||||
}
|
||||
|
||||
game.playerColor = 'yellow'
|
||||
game.startSinglePlayer()
|
||||
|
||||
window.dm = DOMElement
|
||||
@ -1,40 +0,0 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
}
|
||||
|
||||
.tableContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 40rem;
|
||||
}
|
||||
|
||||
table {
|
||||
border: 2px solid;
|
||||
|
||||
}
|
||||
|
||||
tr {
|
||||
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
td {
|
||||
border: 1px solid;
|
||||
height: 10px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
td[data-color="red"] {
|
||||
background: red
|
||||
}
|
||||
|
||||
td[data-color="yellow"] {
|
||||
background: yellow
|
||||
}
|
||||
|
||||
td[data-winner="true"] {
|
||||
background: gold
|
||||
}
|
||||
Reference in New Issue
Block a user