avior/Puissance4
1
0
Fork 0
mirror of https://github.com/Aviortheking/Puissance4.git synced 2025-06-27 08:59:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Ajout du fonctionement basique

Browse Source
This commit is contained in:
SamuWrob
2020-12-17 12:29:24 +01:00
parent eed359a457
commit 9e007cae96
33 changed files with 9348 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
public/Game.ts Normal file
View File

@ -0,0 +1,94 @@
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 rows: Array<Array<DOMElement>> = []
public constructor(
table: HTMLTableElement
) {
this.table = new DOMElement(table)
this.setupGeneral()
}
public setupGeneral() {
// Clear la table
const rows = new DOMFleetManager('tr', this.table)
rows.each((item, rowIndex) => {
const cells = new DOMFleetManager('td', item)
this.rows.push([])
// cellIndex = 0-6
cells.each((cell, cellIndex) => {
this.rows[rowIndex].push(cell)
if (this.columns.length <= cellIndex) {
this.columns.push([])
}
this.columns[cellIndex].push(cell)
cell
.text(' ')
.data('color', null)
// Put each cells in the corresponding column
})
console.log(this.columns)
})
// Setup la base du jeux
}
public setupMultiplayer() { }
public setupSinglePlayer() { }
/**
* 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
for (const cell of this.columns[xPos]) {
const color = cell.data('color')
if (!color) {
cellToFill = cell
}
if (color) {
break
}
}
if (!cellToFill) {
return false
}
cellToFill.data('color', color)
return true
}
public checkWinner() {
}
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

72
public/index.html Normal file
View File

@ -0,0 +1,72 @@
<!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 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>

20
public/main.ts Normal file
View File

@ -0,0 +1,20 @@
import './style.css'
import Game from './Game'
const table = document.querySelector('table')
if (!table) {
throw new Error('Table not found')
}
const game = new Game(table)
game.makeMove(0, 'red')
game.makeIATakeTurn()
game.makeMove(0, 'red')
game.makeMove(0, 'red')
game.makeMove(0, 'red')
game.makeMove(0, 'red')
game.makeMove(0, 'red')
game.makeMove(0, 'red')
game.makeMove(0, 'red')

36
public/style.css Normal file
View File

@ -0,0 +1,36 @@
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
}