I know some one has already asked this question but I couldn't find the answer I was looking for. I am learning flask and I am creating a tic tac toe game, this is the code:
from flask import Flask
from flask import request
from flask import url_for
from flask import render_template
squares = [
['', '', ''],
['', '', ''],
['', '', '']
]
turn = 'X'
app = Flask(__name__)
@app.route('/games/tic-tac-toe')
def tic_tac_toe():
global squares, turn
# this is the game board
table = ('<!DOCTYPE html>\n'
'<html>\n'
'<head>\n'
'<style>\n'
'.square {\n'
' height: 55px;\n'
' width: 55px;\n'
' background-color: #ffffff;\n'
' border-style: solid;\n'
' border-color: black;\n'
' border-width: 4px;\n'
' text-align:center;\n'
' font-size:43px\n'
'}\n'
'.grid {\n'
' display: grid;\n'
' grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));\n'
'}\n'
'</style>\n'
'</head>\n'
'<body>\n'
'\n'
'<div class="grid">\n' # ------------row 1------------
f' <button class="square" onclick="{react_to_click(0, 0, "s1")}" id="s1">{squares[0][0]}</button>\n'
f' <button class="square" onclick="{react_to_click(0, 1, "s2")}" id="s2">{squares[0][1]}</button>\n'
f' <button class="square" onclick="{react_to_click(0, 2, "s3")}" id="s3">{squares[0][2]}</button>\n'
'</div>\n'
'<div class="grid">\n' # ------------row 2------------
f' <button class="square" onclick="{react_to_click(1, 0, "s4")}" id="s4">{squares[1][0]}</button>\n'
f' <button class="square" onclick="{react_to_click(1, 1, "s5")}" id="s5">{squares[1][1]}</button>\n'
f' <button class="square" onclick="{react_to_click(1, 2, "s6")}" id="s6">{squares[1][2]}</button>\n'
'</div>\n'
'<div class="grid">\n' # ------------row 3-------------
f' <button class="square" onclick="{react_to_click(2, 0, "s7")}" id="s7">{squares[2][0]}</button>\n'
f' <button class="square" onclick="{react_to_click(2, 1, "s8")}" id="s8">{squares[2][1]}</button>\n'
f' <button class="square" onclick="{react_to_click(2, 2, "s9")}" id="s9">{squares[2][2]}</button>\n'
'</div>\n'
'\n'
'</body>\n'
'</html> \n')
return table
# a function for tic tac toe game
def react_to_click(clicked_square_row, clicked_square_column, square_id):
global turn, squares
temp_turn = turn
if squares[clicked_square_row][clicked_square_column] == '':
if turn == 'X':
turn = 'O'
else:
turn = 'X'
squares[clicked_square_row][clicked_square_column] = temp_turn
app.run(debug=True)
the problem is in my buttons. I specified a python function but onclick can only take js functions. I want to activate the react_to_click function and give some arguments every time a square is clicked.
