I'm trying to build a cards game and I'm using ajax to achieve that without reloading the page. I'm posting a video down below so you can understand better. What I want to do is that the player can draw as many card as he wants, along with sending how many cards he wants on the table. With my code the player can only draw as many cards as he wants as long as he doesn't try to send a card to the table. If he wants to send a card to the table, he can't, he must refresh the page. Now if he sends a card to the table, he can't send another one nor can draw another card. What am I doing wrong so the player doesn't have to refresh the page anymore?
Here's the video: https://streamable.com/7iuaf
Flask code:
from flask import Flask, render_template, jsonify, request
from game import Game
app = Flask(__name__)
game = Game(4)
@app.route('/')
def game_main():
return render_template('game.html', card_on_table=game.card_on_table, player_deck=game.player_cards,
players_cards=game.ai_players)
@app.route('/cardChose', methods=['POST'])
def card_chose():
chosen_card = int(request.json)
game.put_card(chosen_card)
return jsonify({'player_cards': render_template('playercards.html', player_deck=game.player_cards),
'table_card': render_template('cardOnTable.html', card_on_table=game.card_on_table)})
@app.route('/drawCard', methods=['POST'])
def draw_card():
game.draw_card(game.player_cards)
return jsonify({'player_cards': render_template('playercards.html', player_deck=game.player_cards)})
if __name__ == '__main__':
app.run(debug=True)
JavaScript:
$(function(){
$('.drawCard').on('click', function(){
req = $.ajax({
url: '/drawCard',
type: 'POST'
});
req.done(function(resp) {
$('.playerDeck').html(resp.player_cards);
});
});
$('.playerCard').on('click', function(e){
req = $.ajax({
url : '/cardChose',
type : 'POST',
data: JSON.stringify(e.target.id, null, '\t'),
contentType: 'application/json;charset=UTF-8'
});
req.done(function(resp){
$('.playerDeck').html(resp.player_cards);
$('.tableCard').html(resp.table_card);
});
});
});
HTML:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="{{url_for('static', filename='main.css')}}">
<title>Game</title>
</head>
<body>
<div class="container">
<div class="float-left">
<ul class="pt-4 list-group">{% block players %}{% endblock %}</ul></div>
<div class="pt-4 text-center">
<div class="tableCard">{% block current_card %}{% endblock %}
<a href="#"><img class="ml-4 img-responsive drawCard" src="/static/cards/back.png" width="250" height="363"></a></div>
<div class="pt-4 playerDeck">{% block player_cards %}{% endblock %}</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="http://code.jquery.com/jquery.js"></script>
{# <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>#}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="{{ url_for('static', filename='app.js') }}"></script>
</body>
</html>
HTML (playercards.html in code) that loads the player's cards without refreshing the page:
{% block player_cards %}
{% for card in player_deck %}
<a href="#"><img class="img-responsive playerCard" src="{{ card.image }}" width="100" height="145" id="{{ card.id }}"></a>
{% endfor %}
{% endblock player_cards %}
HTML (cardOnTable.html in code) that loads the card that is on the table without refreshing the page
{% block current_card %}
<img class="img-responsive" src="{{ card_on_table.image }}" width="250" height="363" cardId="{{ card_on_table.id }}">
<a href="#"><img class="ml-4 img-responsive drawCard" src="/static/cards/back.png" width="250" height="363"></a></div>
{% endblock current_card %}
