File size: 3,754 Bytes
745e516
cc1da8d
f77b5cc
 
18385f6
cc1da8d
 
 
 
 
29900b1
745e516
 
f77b5cc
18385f6
 
f77b5cc
 
18385f6
b0be829
f77b5cc
 
cc1da8d
 
 
 
 
 
 
 
29900b1
 
cc1da8d
745e516
cc1da8d
 
 
 
 
 
 
 
 
f77b5cc
 
 
cc1da8d
 
 
 
 
745e516
cc1da8d
 
 
 
 
 
 
 
 
745e516
cc1da8d
 
 
 
f77b5cc
 
 
 
 
 
18385f6
 
f77b5cc
 
 
 
2ffd5df
 
18385f6
f77b5cc
cc1da8d
 
 
 
 
 
 
f77b5cc
cc1da8d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f77b5cc
 
 
 
 
 
ecea336
 
 
f77b5cc
 
 
 
 
 
cc1da8d
 
02a017b
8b6236c
10cb4dc
02a017b
 
8b6236c
cc1da8d
 
 
 
29900b1
cc1da8d
 
 
 
 
 
02a017b
745e516
cc1da8d
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
const $ = e =>document.querySelector(e);
const board = Array(9).fill(0);
const step = [];
let fitstMove = true;

const winPatterns = [
    [0, 1, 2], [3, 4, 5], [6, 7, 8], // poziome
    [0, 3, 6], [1, 4, 7], [2, 5, 8], // pionowe
    [0, 4, 8], [2, 4, 6]             // przekątne
];



function restart(){ 
    board.clear();
    board.push(...Array(9).fill(0));
    step = [];
    fitstMove = !fitstMove;

    initializeBoard();
}

function checkWin(board) {
    for (let pattern of winPatterns) {
        const [a, b, c] = pattern;
        if (board[a] !== 0 && board[a] === board[b] && board[a] === board[c]) {
            return board[a];
        }
    }
    return 0;
}

function initializeBoard() {
    const boardElement =$('.board');
    boardElement.innerHTML = '';
    
    for(let i = 0; i < 9; i++) {
        const div = document.createElement('div');
        div.className = 'cell';
        div.id = 'cell-' + i;
        div.addEventListener('click', () => handleMove(i));
        boardElement.appendChild(div);
    }
    if(!fitstMove){
        apiStep();
    }
    updateBoardDisplay();
}

function updateBoardDisplay() {
    board.forEach((value, index) => {
        const cell = $('#cell-' + index);
        cell.className = 'cell';
        if (value === 1) {
            cell.classList.add('o');
        } else if (value === -1) {
            cell.classList.add('x');
        }
    });

    const winner = checkWin(board);
    const messageElement =$('.message');
    if (winner === 1) {
        messageElement.textContent = 'Komputer wygrał!';
    } else if (winner === -1) {
        messageElement.textContent = 'Wygrałeś!';
        let newBoard = []
        for (let i = 0; i < 9 - 1; i++) {
            let value = 0;
            if(board[i]!=0)
                value = board[i]==1?-1:1;
            newBoard.push(value);
        }
        fetch('/savegame', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ final_board: newBoard, sequence:step })
            }).then(res => res.json());
      

    } else if (!board.includes(0)) {
        messageElement.textContent = 'Remis!';
    } else {
        messageElement.textContent = '';
    }
}

async function apiStep() {
    try {
        // Wysłanie stanu planszy do API
        const response = await fetch('/move', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ board: board })
        });

        const data = await response.json();

        if (data.status === 'success' && data.move >= 0 && data.move < 9) {
            // Ruch komputera
            board[data.move] = 1;
            updateBoardDisplay();
        }
    } catch (error) {
        console.error('Błąd podczas komunikacji z API:', error);
    }
}

async function handleMove(index) {
    if (board[index] !== 0 || checkWin(board)) return;

    // Ruch gracza
    board[index] = -1;
    // dodaj gkrok do historii
    step.push(index);    
    updateBoardDisplay();


    if (checkWin(board)) return;

    apiStep();
}

// Inicjalizacja gry i pobranie aktualnego stanu
async function initGame() {
    
    $('.restart').addEventListener('click', (e)=>{
            console.log('add event restart');
            restart();
    });

    try {
        const response = await fetch('/status');
        const data = await response.json();
        // Tutaj możesz zaktualizować planszę zgodnie z danymi z serwera
        console.log(data);
    } catch (error) {
        console.error('Błąd podczas pobierania stanu gry:', error);
    }
    initializeBoard();
}



initGame();