Upload 6 files

Briscola_app.py

@@ -0,0 +1,272 @@
+#open -na Google\ Chrome --args --user-data-dir=/tmp/temporary-chrome-profile-dir --disable-web-security to avoid "CORS request blocked ..."
+
+
+import os
+import posix
+
+from flask import request
+from flask import Flask, render_template
+from flask import jsonify
+
+from flask import send_from_directory
+
+import tensorflow as tf
+import briscola_players as players
+import environment as env
+
+import numpy as np
+
+app = Flask(__name__, static_folder=None)
+
+partita = env.Briscola_env()
+
+player_1 = None
+client_player = None
+card_player_1 = 'Not played yet'
+
+client_previous_card = 'Not played yet'
+pl_1_previous_card = 'Not played yet'
+
+
+from huggingface_hub import snapshot_download
+
+
+# Download the repo locally
+model_dir = snapshot_download(repo_id="ginchiostro/briscola_model")
+saved_model_path = os.path.join(model_dir, "MLP_best_model")
+
+# Load the TensorFlow SavedModel
+loaded_model = tf.keras.models.load_model(saved_model_path)
+
+best_model = players.MyModel_dense(compute_prob_winning = False)
+best_model.compile()
+best_model(np.linspace(1,100,250)[np.newaxis][np.newaxis])
+best_model.set_weights(loaded_model.get_weights())
+
+
+
+dataset_dir = snapshot_download(repo_id="ginchiostro/briscola_images", repo_type="dataset")
+
+
+def string_to_card(card):
+	res = [3, 3]
+	if card[0] == '8':
+		res[0] = 'Fante'
+	elif card[0] == '9':
+		res[0] = 'Cavallo'
+	elif card[0] == '0':
+		res[0] = 'Re'
+	elif card[0] == '1':
+		res[0] = 'Asso'
+	else:
+		res[0] = card[0]
+	res[1] = card[1:]
+	if card == 'Not played yet':
+		return 'Not played yet'
+	else:
+		return res[0] + ' ' + res[1]
+
+def card_to_string(string):
+	card = string.split()
+	res = [3, 3]
+	if card[0] == 'Fante':
+		res[0] = '8'
+	elif card[0] == 'Cavallo':
+		res[0] = '9'
+	elif card[0] == 'Re':
+		res[0] = '0'
+	elif card[0] == 'Asso':
+		res[0] = '1'
+	else:
+		res[0] = card[0]
+	res[1] = card[1]
+
+	return res[0] + res[1]
+
+
+@app.route('/new_game_vs_det', methods = ['POST'])
+def new_game_det():
+	global partita
+	partita.reset()
+
+	global player_1
+	global client_player
+	global card_player_1
+	global client_previous_card 
+	global pl_1_previous_card
+
+	card_player_1 = 'Not played yet'
+
+	client_previous_card = 'Not played yet'
+	pl_1_previous_card = 'Not played yet'
+
+	first_hand, briscola = partita.start_game()
+	
+	if 0 == np.random.randint(2):
+		coin_flip_player_1_is_first = True
+	else:
+		coin_flip_player_1_is_first = False
+
+	player_1 = players.DeterministicPlayer(first_hand[0], briscola, coin_flip_player_1_is_first)
+	client_player = players.HumanPlayer(first_hand[1], briscola, not coin_flip_player_1_is_first)
+
+	if client_player.is_first_player:
+		first_pl_message = 'I will be playing first'
+	else:
+		first_pl_message = 'I will be playing second'
+		card_player_1 = player_1.policy(0, None, False)
+
+	response = {
+	'first_player':  first_pl_message,
+	'my_hand':  [string_to_card(card) for card in client_player.hand],
+	'briscola': string_to_card(client_player.briscola),
+	'card_player_1': string_to_card(card_player_1),
+	'client_previous_card' : 'Not played yet',
+	'pl_1_previous_card' : 'Not played yet'
+	}
+	return jsonify(response)
+
+@app.route('/New_game_vs_random', methods = ['POST'])
+def new_game_rand():
+	global partita
+	partita.reset()
+
+	global player_1
+	global client_player
+	global card_player_1
+	global client_previous_card 
+	global pl_1_previous_card
+
+	card_player_1 = 'Not played yet'
+
+	client_previous_card = 'Not played yet'
+	pl_1_previous_card = 'Not played yet'
+
+	first_hand, briscola = partita.start_game()
+	
+	if 0 == np.random.randint(2):
+		coin_flip_player_1_is_first = True
+	else:
+		coin_flip_player_1_is_first = False
+
+	player_1 = players.RandomPlayer(first_hand[0], briscola, coin_flip_player_1_is_first)
+	client_player = players.HumanPlayer(first_hand[1], briscola, not coin_flip_player_1_is_first)
+
+	if client_player.is_first_player:
+		first_pl_message = 'I will be playing first'
+	else:
+		first_pl_message = 'I will be playing second'
+		card_player_1 = player_1.policy(0, None, False)
+
+	response = {
+	'first_player':  first_pl_message,
+	'my_hand':  [string_to_card(card) for card in client_player.hand],
+	'briscola': string_to_card(client_player.briscola),
+	'card_player_1': string_to_card(card_player_1),
+	'client_previous_card' : 'Not played yet',
+	'pl_1_previous_card' : 'Not played yet'
+	}
+	return jsonify(response)
+
+@app.route('/New_game_vs_best', methods = ['POST'])
+def new_game_best():
+	global partita
+	partita.reset()
+
+	global player_1
+	global client_player
+	global card_player_1
+	global client_previous_card 
+	global pl_1_previous_card
+
+	card_player_1 = 'Not played yet'
+
+	client_previous_card = 'Not played yet'
+	pl_1_previous_card = 'Not played yet'
+
+	first_hand, briscola = partita.start_game()
+	
+	if 0 == np.random.randint(2):
+		coin_flip_player_1_is_first = True
+	else:
+		coin_flip_player_1_is_first = False
+
+	player_1 = players.DeepPlayer(first_hand[0], briscola, coin_flip_player_1_is_first)
+	client_player = players.HumanPlayer(first_hand[1], briscola, not coin_flip_player_1_is_first)
+	player_1.model = best_model
+
+	#print('beginning of the game: ', player_1.hand)
+	if client_player.is_first_player:
+		first_pl_message = 'I will be playing first'
+	else:
+		first_pl_message = 'I will be playing second'
+		card_player_1 = player_1.policy(0, None, False)
+
+	response = {
+	'first_player':  first_pl_message,
+	'my_hand':  [string_to_card(card) for card in client_player.hand],
+	'briscola': string_to_card(client_player.briscola),
+	'card_player_1': string_to_card(card_player_1),
+	'client_previous_card' : 'Not played yet',
+	'pl_1_previous_card' : 'Not played yet'
+	}
+	return jsonify(response)
+
+
+@app.route('/play_hand', methods = ['POST'])
+def my_play_hand():
+	global partita
+	global player_1
+	global client_player
+	global card_player_1
+	global client_previous_card 
+	global pl_1_previous_card
+
+	message = request.get_json(force = True)
+	card_player_2 = card_to_string(message['my_card'])
+
+	if card_player_1 == 'Not played yet':
+		card_player_1 = player_1.policy(0., card_player_2, False)
+
+	pl_1_previous_card = card_player_1
+	client_previous_card =  card_player_2
+		
+
+	new_card_player_1, new_card_player_2, played_cards, is_end_game, player_1_wins, player_1_pts, player_2_pts = partita.step(card_player_1, card_player_2, player_1.is_first_player)
+
+	player_1.gain_info_after_a_hand(new_card_player_1, card_player_1, played_cards, player_1_wins, player_1_pts, player_2_pts)
+
+	client_player.gain_info_after_a_hand(new_card_player_2, card_player_2, played_cards, not player_1_wins, player_1_pts, player_2_pts)
+	
+	if client_player.is_first_player:
+		first_pl_message = 'I will be playing first'
+		card_player_1 = 'Not played yet'
+	else:
+		first_pl_message = 'I will be playing second'
+		if len(player_1.hand) > 0:
+			card_player_1 = player_1.policy(0, None, False)
+		else:
+			card_player_1 = '  The game is over'
+
+	response = {
+	'first_player':  first_pl_message,
+	'my_hand':  [string_to_card(card) for card in client_player.hand],
+	'briscola': string_to_card(client_player.briscola),
+	'card_player_1': string_to_card(card_player_1),
+	'client_previous_card' : string_to_card(client_previous_card),
+	'pl_1_previous_card': string_to_card(pl_1_previous_card),
+	'points_pl_1':  str(player_1.player_1_pts),
+	'points_pl_2':  str(player_1.player_2_pts)
+	}
+	return jsonify(response)
+
+@app.route("/")
+def index():
+	return render_template("Briscola.html")
+
+@app.route('/static/<path:filename>')
+def serve_static(filename):
+    return send_from_directory(os.path.join(dataset_dir, 'static'), filename)
+
+
+app.run(debug=False, use_reloader=False, host="0.0.0.0", port=7860)

Dockerfile

@@ -0,0 +1,11 @@
+FROM python:3.10
+
+WORKDIR /app
+
+COPY . /app
+
+RUN RUN pip install "tensorflow==2.13.*" "keras<3" pandas numpy flask huggingface_hub 
+
+EXPOSE 7860
+
+CMD ["python", "Briscola_app.py"]

briscola_players.py

@@ -0,0 +1,493 @@
+"""Briscola environment and players. Contains nn for deep player"""
+### Briscola environment and players
+# 
+import sys #for human player
+
+import numpy as np
+import pandas as pd
+import tensorflow as tf
+import environment as env
+
+semi = ['bastoni', 'coppe', 'denari', 'spade']
+numeri = ['2', '3', '4', '5', '6', '7', '8', '9', '0', '1']
+my_points = [ 0, 10, 0, 0, 0, 0, 2, 3, 4, 11]
+my_cards = pd.DataFrame({i:[1 for j in numeri] for i in semi}, index = numeri)
+my_cards['points'] = my_points
+sorted_cards = my_cards.sort_values(by = ['points'], ascending = False)
+
+
+all_cards_in_strings = [i + j for i in numeri for j in semi]
+all_cards_in_strings.append('None')
+sorted_cards_in_string = sorted(all_cards_in_strings)
+
+
+###General Player class          
+class Player(env.Briscola_env):
+    def __init__(self, cards_in_my_hand, briscola, is_first_player):
+        super().__init__()
+        self.is_first_player = is_first_player
+        self.briscola = briscola
+        self.hand = cards_in_my_hand
+        
+        #get cards seen
+        self.cards_seen = set([card for card in cards_in_my_hand]+[briscola])
+
+        self.player_1_pts = 0
+        self.player_2_pts = 0
+                
+        self.initial_states = [None]*4 #needed for rnn
+        
+        
+    def gain_info_after_a_hand(self, cards_received, card_played, cards_seen, player_1_wins,
+                               player_1_pts, player_2_pts):
+        """
+        Updates: cards_seen, hand, is_first_player
+        """
+        self.update_cards_seen(cards_seen)
+        self.update_my_hand(cards_received, card_played)
+        self.is_first_player = player_1_wins
+        self.update_points(player_1_pts, player_2_pts)
+        
+        
+    def update_points(self, player_1_pts, player_2_pts):
+        """
+        Updates the points after each round
+        """
+        self.player_1_pts += player_1_pts
+        self.player_2_pts += player_2_pts
+        
+        
+    def update_cards_seen(self, cards):
+        """
+        Returns: None
+        Updates: self.cards_seen
+        """
+        self.cards_seen.add(cards[0])
+        self.cards_seen.add(cards[1])
+        
+        
+    def update_my_hand(self, card_received, card_played):
+        hand_withot_dropped_card = [my_card for my_card in self.hand if my_card != card_played]
+        if not card_received == None:
+            self.hand = hand_withot_dropped_card + [card_received]
+            self.cards_seen.add(card_received)
+        else:
+            self.hand = hand_withot_dropped_card
+                
+                
+    def new_game(self, cards_in_my_hand, briscola, is_first_player):
+        """
+        Re-initializes the player 
+        """
+        self.is_first_player = is_first_player
+        self.briscola = briscola
+        self.hand = cards_in_my_hand
+        
+        #get cards seen
+        self.cards_seen = set([card for card in cards_in_my_hand]+[briscola]) 
+        self.player_1_pts = 0
+        self.player_2_pts = 0      
+        self.initial_states = [None]*4 #needed for rnn
+
+
+###Human player 
+class HumanPlayer(Player):
+    def __init__(self, cards_in_my_hand, briscola, is_first_player):
+        super().__init__(cards_in_my_hand, briscola, is_first_player)
+        
+    def policy(self, epsilon, first_played_card = None, vs_human = False):
+        if self.is_first_player:
+            print('I am the first player')
+        else:
+            print('I am the second player and my opponent played', first_played_card)
+        print('briscola:', self.briscola)
+        my_hand = [card for card in self.hand]
+        if len(my_hand) == 1:
+            print('My points:', self.player_1_pts)
+            print('Points of my opponent:', self.player_2_pts)
+        print('hand:', my_hand)
+        played_card = input("I play the following:")
+        return played_card
+
+
+###Deterministic "greedy" player
+class DeterministicPlayer(Player):
+    def __init__(self, cards_in_my_hand, briscola, is_first_player):
+        super().__init__(cards_in_my_hand, briscola, is_first_player)
+        
+    def deterministic_policy_first_player(self):
+        """
+        Plays the card with less points
+        """
+        numbers_of_cards = [card[0] for card in self.hand]
+        points = sorted_cards.loc[numbers_of_cards, 'points'].values
+        min_points = min(points)
+        
+        cards_with_min_pts =[]
+        for card in self.hand:
+            if sorted_cards.loc[card[0], 'points'] == min_points:
+                cards_with_min_pts.append(card)
+        if len(cards_with_min_pts) > 0:
+            
+            cards_with_min_pts_without_briscola = []#if i can win without a briscola i do that
+            for card in cards_with_min_pts:
+                if card[1:] != self.briscola:
+                    cards_with_min_pts_without_briscola.append(card)
+            if len(cards_with_min_pts_without_briscola) > 0:
+                card_with_min_points =  cards_with_min_pts_without_briscola                  
+        return cards_with_min_pts[np.random.randint(len(cards_with_min_pts))]
+        
+    
+    def deterministic_policy_second_player(self, first_played_card):
+        """
+        First determines if we can win. If we can win the round, plays the card
+        with less points that makes us win. Otherwise, plays the card with less points.
+        """
+        my_victories = []
+        for card in self.hand:
+            if 'second_played_card' == self.which_card_wins_a_round(first_played_card, card):
+                my_victories.append(card)
+                
+        if len(my_victories) == 0:
+            return self.deterministic_policy_first_player()
+        else:
+            numbers_of_cards = [card[0] for card in my_victories]
+            points = sorted_cards.loc[numbers_of_cards, 'points'].values
+            min_points = min(points)
+        
+            cards_with_min_pts =[] 
+            for card in my_victories:
+                if sorted_cards.loc[card[0], 'points'] == min_points:
+                    cards_with_min_pts.append(card)
+            return cards_with_min_pts[np.random.randint(len(cards_with_min_pts))]
+                
+    
+    def policy(self, epsilon, first_played_card = None, vs_human = False):
+        if self.is_first_player:
+            card = self.deterministic_policy_first_player()
+            if vs_human:
+                print('opponent plays ', card)
+            return card
+        else:
+            card = self.deterministic_policy_second_player(first_played_card)
+            if vs_human:
+                print('opponent plays ', card)
+            return card
+        
+###Random player
+
+class RandomPlayer(Player):
+    def __init__(self, cards_in_my_hand, briscola, is_first_player):
+        super().__init__(cards_in_my_hand, briscola, is_first_player)
+        
+    def policy(self, epsilon, first_played_card = None, vs_human = False):
+        card = self.hand[np.random.randint(len(self.hand))]
+        if vs_human:
+                print('opponent plays ', card)
+        return card
+
+###Deep player
+
+##Model
+class FinalLayer(tf.keras.layers.Layer):
+    def __init__(self):
+        super(FinalLayer, self).__init__()
+        
+    def call(self, my_input, final_output):
+        """
+        Returns a tensor of shape [batch_size, 3].
+        Changes final_output assigning [1.,1.,1.] (resp.[0.,0.,0.]) if I have already won (resp. lost).
+
+        final_output.shape == [batch_size, 3] and my_input.shape == [batch_size, number_of_rounds, features] 
+        """
+        results = my_input[:,-1,-1] #1d array with 1. if pl_1 wins, 0. if it loses, 0.5 otherwise
+        #1d array with 1. if pl_1 wins, 0. otherwise
+        winning = tf.reshape(tf.floor(results), (results.shape[0],1))
+        
+        #1d array with 0. if pl_1 loses, 1. otherwise
+        losing = tf.reshape(1- tf.floor(1-results), (results.shape[0],1))
+        
+        #needed for taking elementwise max-min.
+        winning_tensor = tf.concat([winning, winning, winning], axis = 1)
+        losing_tensor = tf.concat([losing, losing, losing], axis = 1)
+        
+        #Changes final_output assigning [1.,1.,1.] if I have already won
+        first = tf.math.maximum(winning_tensor, final_output)
+        
+        #Changes final_output assigning [0.,0.,0.] lost
+        second = tf.math.minimum(losing_tensor,first)
+        return second
+
+
+class MyModel(tf.keras.Model):
+    """
+    To initialize set compute_prob_winning=False if the model estimates the number of points, set it to True if it estimates
+    the probability of winning the game.
+    
+    The call has two parameters, initial_states=[None]*4 and my_return_sequences=False.
+    - initial_states are the initial states for the gru layers.
+    - my_return_sequences returns a list of the time-distributed outputs of the gru layers,
+    and the time-distributed outputs of the dense layer + final layer.
+    """
+    def __init__(self, compute_prob_winning=True, simplified=False):
+        super(MyModel, self).__init__()
+        self.compute_prob_winning = compute_prob_winning
+        self.simplified = simplified
+        
+        self.gru1 = tf.keras.layers.GRU(200, return_sequences = True)
+        self.gru2 = tf.keras.layers.GRU(200, return_sequences = True)
+        if not simplified:
+            self.gru3 = tf.keras.layers.GRU(200, return_sequences = True)
+            self.gru4 = tf.keras.layers.GRU(200, return_sequences = True)
+        
+        if self.compute_prob_winning:
+            self.dense = tf.keras.layers.Dense(3, activation = "sigmoid")
+            self.final = FinalLayer()
+            self.td1 = tf.keras.layers.TimeDistributed(self.dense)
+            self.td2 = tf.keras.layers.TimeDistributed(self.final)
+        else:
+            self.dense = tf.keras.layers.Dense(3, activation = "tanh")
+            self.td1 = tf.keras.layers.TimeDistributed(self.dense)        
+
+    def call(self, state, initial_states=[None]*4, my_return_sequences=False):
+        h_1 = self.gru1(state, initial_state=initial_states[0])#initial states has shape (batch_size, 200) 
+        h_2 = self.gru2(h_1, initial_state=initial_states[1])
+        if not my_return_sequences:
+            if not self.simplified:
+                h_3 = self.gru3(h_2, initial_state = initial_states[2])
+                h_4 = self.gru4(h_3, initial_state = initial_states[3])
+                final_output = self.dense(h_4[:,-1,:])
+
+                if self.compute_prob_winning:
+                    return [h_1[:,-1,:], h_2[:,-1,:], h_3[:,-1,:], h_4[:,-1,:]], self.final(state, final_output)
+                else:
+                    return [h_1[:,-1,:], h_2[:,-1,:], h_3[:,-1,:], h_4[:,-1,:]], final_output 
+            else:
+                final_output = self.dense(h_2[:,-1,:])
+
+                if self.compute_prob_winning:
+                    #the last 2 h-states are never used whene simplified == True
+                    return [h_1[:,-1,:], h_2[:,-1,:], h_2[:,-1,:], h_2[:,-1,:]], self.final(state, final_output)
+                else:
+                    #the last 2 h-states are never used whene simplified == True
+                    return [h_1[:,-1,:], h_2[:,-1,:], h_2[:,-1,:], h_2[:,-1,:]], final_output       
+        else:
+            if not self.simplified:
+                h_3 = self.gru3(h_2, initial_state = initial_states[2])
+                h_4 = self.gru4(h_3, initial_state = initial_states[3])
+                tdense = self.td1(h_4)
+
+                if self.compute_prob_winning:
+                    #Apply FinalLayer (if I already won or lost replace the prob with 1. or 0 respectively)
+                    #to each output, by reshaping the outputs.
+                
+                    reshaped_tdense = tf.reshape(tdense, (tdense.shape[1] * tdense.shape[0], tdense.shape[2]))
+                    reshaped_input = tf.reshape(state, ( state.shape[1] * state.shape[0],1, state.shape[2]))
+                    final_result = self.final(reshaped_input, reshaped_tdense)
+                    return [h_1, h_2, h_3, h_4], tf.reshape(final_result, tdense.shape)
+                else:
+                    return [h_1, h_2, h_3, h_4], tdense
+
+            else:
+                tdense = self.td1(h_2)
+
+                if self.compute_prob_winning:
+                    #Apply FinalLayer (if I already won or lost replace the prob with 1. or 0 respectively)
+                    #to each output, by reshaping the outputs.
+                
+                    reshaped_tdense = tf.reshape(tdense, (tdense.shape[1] * tdense.shape[0], tdense.shape[2]))
+                    reshaped_input = tf.reshape(state, ( state.shape[1] * state.shape[0],1, state.shape[2]))
+                    final_result = self.final(reshaped_input, reshaped_tdense)
+                
+                    #the last 2 h-states are never used whene simplified == True
+                    return [h_1, h_2, h_2, h_2], tf.reshape(final_result, tdense.shape)
+
+                else:
+                    #the last 2 h-states are never used whene simplified == True
+                    return [h_1, h_2, h_2, h_2], tdense
+        
+class MyModel_dense(tf.keras.Model):
+    """
+    If the nn is approximating the probability of winning, initialize with compute_prob_winning = True,
+    if it is approximating the (weighted) average of the number of points we make per round initialize with
+    compute_prob_winning = False.
+    
+    The call has the parameter initial_states = [None]*4, just to make it compatible with MyModel.
+    """
+    def __init__(self, compute_prob_winning = True):
+        super(MyModel_dense, self).__init__()
+        
+        self.my_layers = [tf.keras.layers.Dense(200, activation = "tanh"),
+                       tf.keras.layers.Dense(200, activation = "tanh")]
+        
+        if compute_prob_winning:
+            self.my_layers.append(tf.keras.layers.Dense(3, activation = "sigmoid"))
+            self.final = FinalLayer()
+        else:
+            self.my_layers.append(tf.keras.layers.Dense(3, activation = "tanh"))
+        
+        self.compute_prob_winning = compute_prob_winning
+
+    def call(self, state, initial_states = [None]*4):
+        current_state = tf.identity(state)
+        state = state[:,-1,:] #to make it compatible with the input of MyModel
+        
+        for layer in self.my_layers:
+            state = layer(state)
+        
+        if self.compute_prob_winning:
+            return [None]*4, self.final(current_state, state)
+        else:
+            return [None]*4, state 
+
+
+## Deep player
+class DeepPlayer(Player):
+    def __init__(self, cards_in_my_hand, briscola, is_first_player):
+        super().__init__(cards_in_my_hand, briscola, is_first_player)
+        self.model = MyModel()
+        self.cards_not_seen = set(all_cards_in_strings)
+        self.cards_not_seen.remove('None')
+        self.cards_not_seen = self.cards_not_seen.difference(self.cards_seen)
+        self.as_opponent = False
+        
+    def one_hot(self, is_first_player, hand , briscola,
+                player_1_pts, player_2_pts, cards_seen, card_opponent = None):
+        """
+        Gets one hot state for nn.
+        """
+        if card_opponent == None:
+            card_opponent = 'None'
+        result1 = [1. if is_first_player else 0.]
+        position = []
+
+        for card in hand:
+            position.append(sorted_cards_in_string.index(card))
+        if len(position)<3:
+            position = position + [40]*(3-len(position))
+        
+        card_1 = np.eye(41)[position[0]]
+        card_2 = np.eye(41)[position[1]]
+        card_3 = np.eye(41)[position[2]]
+        briscola = np.eye(41)[sorted_cards_in_string.index(briscola)]
+
+        pts = np.array([player_1_pts, player_2_pts])/120 if not self.as_opponent else np.array([player_2_pts, player_1_pts])/120
+        if pts[0] > 0.5:
+            winning = [1.]
+        elif pts[1] > 0.5:
+            winning = [0.]
+        else:
+            winning = [.5]
+            
+        card_opponent_oh = np.eye(41)[sorted_cards_in_string.index(card_opponent)]
+        
+        encode_seen_cards = np.zeros(41)
+        for i in range(len(sorted_cards_in_string)):
+            if sorted_cards_in_string[i] in cards_seen:
+                encode_seen_cards[i] = 1
+                        
+        result = np.concatenate([result1, card_1, card_2, card_3, briscola, pts, card_opponent_oh, encode_seen_cards, winning ])
+        return result[np.newaxis].astype('float32')
+        
+               
+    #Auxuliary 1 -- see policy last rounds    
+    def last_two_rounds(self, my_hand, opponent_hand, played_card):
+        if played_card != None:
+            best_option = ('s', - 200, 200) #(card, my pts, opp points)
+            for card in my_hand:
+                remaining_cards = [_ for _ in my_hand if _ != card]
+                remaining_opp_cards = [_ for _ in opponent_hand if _ != played_card]
+                _, _, _, _, player_1_wins, player_1_pts, player_2_pts = self.step(card, played_card, False, update_global_var = False)
+                my_points = player_1_pts
+                opp_points = player_2_pts
+                _, _, _, _, _, player_1_pts, player_2_pts = self.step(remaining_cards[0], remaining_opp_cards[0], player_1_wins, update_global_var = False)
+                my_points += player_1_pts
+                opp_points += player_2_pts
+                if my_points > best_option[1]:
+                    best_option = [card, my_points, opp_points]
+            return best_option
+        else:
+            best_option = ('s', -200, 200)
+            for card in my_hand:
+                local_option = self.last_two_rounds(opponent_hand, my_hand, card)
+                if local_option[2] > best_option[1]:
+                    best_option = (card, local_option[2],local_option[1])
+            return best_option
+        
+    #Auxuliary 2 -- see policy last rounds
+    def last_three_rounds(self, my_hand, opponent_hand, played_card):
+        if played_card != None:
+            best_option = ('s', - 200, 200) #(card, my pts, opp points)
+            for card in my_hand:
+                remaining_cards = [_ for _ in my_hand if _ != card]
+                remaining_opp_cards = [_ for _ in opponent_hand if _ != played_card]
+            
+                _, _, _, _, player_1_wins, player_1_pts, player_2_pts = self.step(card, played_card, False, update_global_var = False)            
+                my_points = player_1_pts
+                opp_points = player_2_pts            
+                if not player_1_wins:
+                    opponent_best_option = self.last_two_rounds(remaining_opp_cards, remaining_cards, None)
+                
+                    if my_points + opponent_best_option[2] > best_option[1]:
+                        #I make more points with this card so I switch
+                        best_option = (card, my_points + opponent_best_option[2], opp_points + opponent_best_option[1])
+                else:
+                    next_best_option = self.last_two_rounds(remaining_cards, remaining_opp_cards, None)
+                    if my_points + next_best_option[1] > best_option[1]:
+                        #I make more points with this card so I switch
+                        best_option = (card, my_points + next_best_option[1], opp_points + next_best_option[2])
+            return best_option
+        else:
+            best_option = ('s', -200, 200)
+            for card in my_hand:
+                local_option = self.last_three_rounds(opponent_hand, my_hand, card)
+                if local_option[2] > best_option[1]:
+                    #I make more points with this card so I switch
+                    best_option = (card, local_option[2],local_option[1])
+            return best_option
+    
+    #top play for last 3 rounds (when we know opponent's hand) assuming we are playing vs top player.
+    def policy_last_rounds(self, cards_seen, my_hand, pl_pts, briscola, played_card=None):
+        cards_not_seen = set(all_cards_in_strings)
+        cards_not_seen.remove('None')        
+        opponent_hand = list(cards_not_seen.difference(cards_seen))
+    
+        if len(opponent_hand) < len(my_hand):
+            opponent_hand.append(briscola)
+        
+        if len(my_hand) == 3:
+            best_option = self.last_three_rounds(my_hand, opponent_hand, played_card)
+        elif len(my_hand) == 2:
+            best_option = self.last_two_rounds(my_hand, opponent_hand, played_card)
+        else:
+            best_option = (my_hand[0], - 200, 200)
+        
+        return best_option[0]
+        
+               
+        
+    def policy(self, epsilon, first_player_card=None, vs_human=False):
+        
+        oh_state = self.one_hot(is_first_player = self.is_first_player, hand = self.hand,
+                                briscola = self.briscola, player_1_pts = self.player_1_pts,
+                                player_2_pts = self.player_2_pts, cards_seen = self.cards_seen, 
+                               card_opponent = first_player_card)
+        initial_states, total_q_vals = self.model(oh_state[np.newaxis], self.initial_states)
+        self.initial_states = initial_states
+        q_vals = total_q_vals[0][:len(self.hand)]
+        
+        if np.random.rand() < epsilon:
+            return self.hand[np.random.randint(len(self.hand))] 
+        else:
+            if len(self.cards_seen) < 37:
+                card = self.hand[tf.argmax(q_vals).numpy()] 
+                if vs_human:
+                    print('opponent plays ', card)
+                return card
+            else:
+                #pl knows opponent's hand
+                card = self.policy_last_rounds(self.cards_seen, self.hand, self.player_1_pts, self.briscola, played_card = first_player_card)
+                if vs_human:
+                    print('opponent plays ', card)
+                return card
+      

environment.py

@@ -0,0 +1,170 @@
+"""Briscola environment and players. Contains nn for deep player"""
+
+### Briscola environment and players
+import numpy as np
+import pandas as pd
+import tensorflow as tf
+
+semi = ['bastoni', 'coppe', 'denari', 'spade']
+numeri = ['2', '3', '4', '5', '6', '7', '8', '9', '0', '1']
+my_points = [ 0, 10, 0, 0, 0, 0, 2, 3, 4, 11]
+my_cards = pd.DataFrame({i:[1 for j in numeri] for i in semi}, index = numeri)
+my_cards['points'] = my_points
+sorted_cards = my_cards.sort_values(by=['points'], ascending=False)
+
+
+class Briscola_env:
+    def __init__(self):
+        self.points_player_1 = 0 #player 1 is the first player at round 1
+        self.points_player_2 = 0
+        self.cards_in_the_deck = np.array([numero+seme for numero in numeri for seme in semi])
+        np.random.shuffle(self.cards_in_the_deck)
+        self.round = 20
+        self.index_top_card = 0
+        
+        #choose a briscola
+        self.briscola = self.cards_in_the_deck[0] #pick a briscola
+        self.index_top_card = 1
+        self.is_briscola_on_the_table = True
+    
+    
+    def draw_cards(self, number_cards):
+        """
+        Draws number_cards from the deck.
+        
+        Returns: a list of length number_cards
+        Updades: self.cards_in_the_deck
+        """
+        if len(self.cards_in_the_deck)- self.index_top_card > 0:
+            drawn = [ _ for _ in self.cards_in_the_deck[self.index_top_card : self.index_top_card + number_cards]]
+            self.index_top_card = self.index_top_card + number_cards
+            return drawn
+        else:
+            if self.is_briscola_on_the_table:
+                self.is_briscola_on_the_table = False
+                return [self.briscola]
+            else:
+                raise ValueError('Tried to draw from an empty deck..')
+    
+    
+    def start_game(self):
+        """
+        Deals 3 cards for each player
+        
+        Returns: (first_three_cards, second_three_cards), briscola
+        Updates: self.cards_in_the_deck by removing the 6 cards sampled
+        """
+        first_three_cards = self.draw_cards(3)
+        second_three_cards = self.draw_cards(3)
+        return (first_three_cards, second_three_cards), self.briscola
+        
+        
+    def which_card_wins_a_round(self, first_played_card, second_played_card, passed_briscola=None):
+        """
+        Determines which card wins a round
+        
+        Returns: either 'first_played_card' or 'second_played_card'
+        Updates: nothing
+        """
+        if passed_briscola == None:
+            briscola = self.briscola[1:]
+        else:
+            briscola = passed_briscola[1:]
+            
+        if first_played_card[1:] == briscola and second_played_card[1:]!= briscola:
+            return 'first_played_card'
+        elif first_played_card[1:] != briscola and second_played_card[1:] == briscola:
+            return 'second_played_card'
+        elif first_played_card[1:] != second_played_card[1:]:
+            return 'first_played_card'
+        else:
+            if sorted_cards.loc[first_played_card[0], 'points'] > 0 or sorted_cards.loc[second_played_card[0], 'points'] > 0:
+                return 'first_played_card' if sorted_cards.loc[first_played_card[0], 'points'] > sorted_cards.loc[second_played_card[0], 'points'] else 'second_played_card'
+            else:
+                return 'first_played_card' if int(first_played_card[0]) > int(second_played_card[0]) else 'second_played_card'
+    
+    
+    def pre_step(self, player_1, player_2, epsilon, vs_human=False):
+        """
+        The player who plays second decides his action based on the other player's action
+        
+        Returns: card_player_1, card_player_2
+        Updates: nothing
+        """
+        if player_1.is_first_player:
+            card_player_1 = player_1.policy(epsilon, None, vs_human)
+            card_player_2 = player_2.policy(epsilon, card_player_1, vs_human)
+        else:
+            card_player_2 = player_2.policy(epsilon, None, vs_human)
+            card_player_1 = player_1.policy(epsilon, card_player_2, vs_human)
+        return card_player_1, card_player_2
+    
+    
+    def step(self, card_player_1, card_player_2, order, update_global_var=True):
+        """
+        order == True -> card_first_player is played first
+        - Determines if player_1 wins a round
+        - Updates the points and the cards in the deck
+
+        - Draws 2 cards after the round if there are cards in the deck
+        
+        Returns: new_card_player_1, new_card_player_2, played_cards, is_end_game, player_1_wins
+        Updates: - self.cards_in_the_deck if it deals from the deck
+                 - self.points_player_1
+                 - self.points_player_2
+                 - self.round
+        """
+        #Determines who wins and how many points
+        [first_card, second_card] = [card_player_1, card_player_2] if order else [card_player_2, card_player_1]
+        winner = self.which_card_wins_a_round(first_card, second_card)
+        points = my_cards.loc[first_card[0], 'points'] + my_cards.loc[second_card[0], 'points']
+        played_cards = (first_card, second_card)
+        
+        player_1_wins = winner == 'first_played_card' if order else not winner == 'first_played_card'
+        
+        is_briscola_on_the_table = self.is_briscola_on_the_table
+        
+        if is_briscola_on_the_table:
+            #draws the new cards
+            card_winner = self.draw_cards(1)
+            card_loser = self.draw_cards(1)
+        
+        if player_1_wins:
+            if update_global_var:
+                self.points_player_1 += points
+            if is_briscola_on_the_table: #deals the new cards
+                new_card_player_1 = card_winner
+                new_card_player_2 = card_loser
+        else:
+            if update_global_var:
+                self.points_player_2 += points
+            if is_briscola_on_the_table: #deals the new cards
+                new_card_player_2 = card_winner
+                new_card_player_1 = card_loser
+                
+        if update_global_var:
+            self.round = self.round - 1
+        is_end_game = self.round == 0
+        
+        player_1_pts = points if player_1_wins else 0
+        player_2_pts = 0 if player_1_wins else points
+                
+        
+        if is_briscola_on_the_table:
+            return new_card_player_1[0], new_card_player_2[0], played_cards, is_end_game, player_1_wins, player_1_pts, player_2_pts
+        else:
+            return None, None, played_cards, is_end_game, player_1_wins, player_1_pts, player_2_pts
+        
+        
+    def reset(self):
+        self.points_player_1 = 0 #player 1 is the first player at round 1
+        self.points_player_2 = 0
+        np.random.shuffle(self.cards_in_the_deck) 
+        self.round = 20
+        self.index_top_card = 0
+        
+        #choose a briscola
+        self.briscola = self.cards_in_the_deck[0] #pick a briscola
+        self.index_top_card = 1
+        self.is_briscola_on_the_table = True
+        

templates/Briscola.html

@@ -0,0 +1,658 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Briscola</title>
+    <link rel="icon" href="data:,">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --card-height: 22vmin;
+            --card-width: calc(var(--card-height) * 0.63); /* Maintain aspect ratio (150/238) */
+            --gold-glow: 0 0 2.5vmin 1vmin #ffd700;
+        }
+
+        * {
+            box-sizing: border-box;
+            font-family: 'Cinzel', serif;
+        }
+
+        body {
+            background-image: url('static/background.jpg');
+            background-size: cover;
+            background-position: center;
+            background-repeat: no-repeat;
+            color: #E0E0E0;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            overflow: hidden;
+            font-size: clamp(14px, 1.2vw, 18px); /* Responsive base font */
+        }
+
+        #game-container {
+            position: relative;
+            width: 100vw;
+            height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        #start-screen {
+            display: flex;
+            gap: 2vw;
+            text-align: center;
+            background: rgba(0, 0, 0, 0.5);
+            padding: 4vmin;
+            border-radius: 15px;
+            transition: opacity 0.5s ease-out;
+        }
+
+        .start-button {
+            border: 2px solid #B0BEC5;
+            border-radius: 10px;
+            cursor: pointer;
+            transition: transform 0.3s, box-shadow 0.3s;
+            width: 22vmin;
+            height: 15vmin;
+        }
+
+        .start-button:hover {
+            transform: scale(1.05);
+            box-shadow: 0 0 15px #B0BEC5;
+        }
+
+        #game-board {
+            visibility: hidden;
+            opacity: 0;
+            transition: opacity 0.5s ease-in;
+            width: 100%;
+            height: 100%;
+            position: absolute;
+        }
+        
+        #game-board.visible {
+            visibility: visible;
+            opacity: 1;
+        }
+
+        #game-status {
+            position: absolute;
+            top: 2vh;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            gap: 4vw;
+            align-items: center;
+            background: rgba(0,0,0,0.75);
+            padding: 1vmin 3vmin;
+            border-radius: 50px;
+            font-size: clamp(16px, 1.8vmin, 24px);
+            font-weight: bold;
+            text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
+            z-index: 100;
+        }
+        #game-status p {
+            margin: 0;
+        }
+
+        #opponent-avatar-container {
+            position: absolute;
+            top: 12vh;
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 50; /* Below status but above board */
+        }
+
+        #opponent-avatar-img {
+            width: 18vmin;
+            height: 18vmin;
+            border-radius: 50%;
+            border: 3px solid rgba(176, 190, 197, 0.8);
+            box-shadow: 0 4px 15px rgba(0,0,0,0.7);
+        }
+
+        #deck-area {
+            position: absolute;
+            left: 5vw;
+            top: 50%;
+            transform: translateY(-50%);
+            text-align: center;
+        }
+
+        #image_briscola {
+            width: var(--card-width);
+            height: var(--card-height);
+            transform: rotate(90deg) translateX(calc(var(--card-height) * -0.25));
+            border-radius: 8px;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.5);
+        }
+        
+        #deck-pile {
+            width: var(--card-width);
+            height: var(--card-height);
+            background-image: url('static/cards/back.jpg');
+            background-size: cover;
+            border-radius: 8px;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            box-shadow: 0 4px 8px rgba(0,0,0,0.5);
+        }
+
+        #title_briscola {
+            font-size: clamp(20px, 2.5vmin, 32px);
+            font-weight: bold;
+            margin-top: calc(var(--card-height) * 0.65);
+        }
+
+        #table-area {
+            position: absolute;
+            top: 48%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: calc(var(--card-width) * 2 + 4vmin);
+            height: calc(var(--card-height) * 1.2); /* Increased height for separation */
+            z-index: 5;
+        }
+        
+        .played-card {
+            width: var(--card-width);
+            height: var(--card-height);
+            position: absolute;
+            border-radius: 8px;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.5);
+            transition: transform 0.5s ease-in-out, box-shadow 0.3s ease;
+        }
+        
+        .played-card.glow {
+             box-shadow: var(--gold-glow);
+        }
+
+        #opponent_card_img { 
+            left: 0; 
+            top: 0; /* Align to the top of the table area */
+        }
+        #player_card_img { 
+            right: 0; 
+            bottom: 0; /* Align to the bottom of the table area */
+        }
+
+        #player-hand {
+            position: absolute;
+            bottom: 8vh;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            justify-content: center;
+            gap: calc(var(--card-width) * -0.4); /* Overlap cards */
+            z-index: 10;
+        }
+
+        #resign-button {
+            margin-top: 2vmin;
+            padding: 1.2vmin 2.5vmin;
+            font-size: clamp(14px, 1.5vmin, 20px);
+            font-weight: bold;
+            color: #E0E0E0;
+            background-color: #757575; /* Muted gray */
+            border: 1px solid #B0BEC5;
+            border-radius: 10px;
+            cursor: pointer;
+            transition: background-color 0.3s, transform 0.3s;
+        }
+
+        #resign-button:hover {
+            background-color: #616161;
+            transform: scale(1.05);
+        }
+
+        #resign-button:disabled {
+            background-color: #424242;
+            cursor: not-allowed;
+            color: #757575;
+        }
+
+        .hand-card {
+            width: var(--card-width);
+            height: var(--card-height);
+            border: none;
+            padding: 0;
+            cursor: pointer;
+            transition: transform 0.3s ease, box-shadow 0.3s;
+            border-radius: 8px;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.5);
+        }
+
+        .hand-card:hover {
+            transform: translateY(-3vh) scale(1.05);
+            z-index: 10;
+        }
+
+        .modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.7);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 1000;
+        }
+
+        .modal-content {
+            background: #212121;
+            padding: 4vmin 6vmin;
+            border-radius: 15px;
+            text-align: center;
+            border: 2px solid #B0BEC5;
+            box-shadow: 0 5px 25px rgba(0,0,0,0.5);
+            color: #E0E0E0;
+        }
+
+        .modal-content h2 {
+            color: #ffd700;
+            font-size: 2.5em;
+            margin-top: 0;
+            margin-bottom: 20px;
+        }
+
+        .modal-content p {
+            font-size: 1.5em;
+            margin: 10px 0;
+        }
+
+        .modal-button, #play-again-button {
+            margin-top: 3vmin;
+            padding: 2vmin 4vmin;
+            font-size: 1.2em;
+            font-weight: bold;
+            border: none;
+            border-radius: 10px;
+            cursor: pointer;
+            transition: background-color 0.3s, transform 0.3s;
+        }
+        
+        #play-again-button {
+            color: #212121;
+            background-color: #B0BEC5;
+        }
+        
+        #play-again-button:hover {
+            background-color: #E0E0E0;
+            transform: scale(1.05);
+        }
+        
+        .modal-buttons {
+            display: flex;
+            justify-content: center;
+            gap: 3vmin;
+            margin-top: 3vmin;
+        }
+
+        #confirm-resign-button {
+            background-color: #c62828; /* Red */
+            color: white;
+        }
+        #confirm-resign-button:hover {
+            background-color: #d32f2f;
+            transform: scale(1.05);
+        }
+
+        #cancel-resign-button {
+            background-color: #B0BEC5;
+            color: #212121;
+        }
+
+        #cancel-resign-button:hover {
+            background-color: #E0E0E0;
+            transform: scale(1.05);
+        }
+
+    </style>
+</head>
+<body>
+    <div id="game-container">
+        <div id="start-screen">
+            <input src="static/random.jpg" id="New_game_vs_random" class="start-button" type="image">
+            <input src="static/greedy.jpg" id="New_game_vs_det" class="start-button" type="image">
+            <input src="static/best_deep_player.jpg" id="New_game_vs_best" class="start-button" type="image">
+        </div>
+
+        <div id="game-board">
+            <div id="game-status">
+                <p id="who_I_play"></p>
+                <p id="Rounds"></p>
+            </div>
+            
+            <div id="opponent-avatar-container" style="display: none;">
+                <img id="opponent-avatar-img" alt="Opponent">
+            </div>
+
+            <div id="deck-area">
+                <div id="deck-pile"></div>
+                <img id="image_briscola" src="static/cards/back.jpg" style="visibility:hidden;">
+                <p id="title_briscola" style="color:#B0BEC5;"></p>
+                <button id="resign-button">Resign</button>
+            </div>
+            
+            <div id="table-area">
+                 <img id="opponent_card_img" class="played-card" src="static/cards/back.jpg" style="visibility:hidden;">
+                 <img id="player_card_img" class="played-card" src="static/cards/back.jpg" style="visibility:hidden;">
+            </div>
+
+            <div id="player-hand">
+                <input id="card_0" class="hand-card" type="image" src="static/cards/back.jpg" style="visibility: hidden">
+                <input id="card_1" class="hand-card" type="image" src="static/cards/back.jpg" style="visibility: hidden">
+                <input id="card_2" class="hand-card" type="image" src="static/cards/back.jpg" style="visibility: hidden">
+            </div>
+            
+        </div>
+    </div>
+    
+    <div id="end-game-modal" class="modal-overlay" style="display: none;">
+        <div class="modal-content">
+            <h2 id="modal-title"></h2>
+            <p id="modal-my-score"></p>
+            <p id="modal-opponent-score"></p>
+            <button id="play-again-button">Play Again</button>
+        </div>
+    </div>
+    
+    <div id="resign-confirm-modal" class="modal-overlay" style="display: none;">
+        <div class="modal-content">
+            <h2>Do you want to resign?</h2>
+            <div class="modal-buttons">
+                <button id="confirm-resign-button" class="modal-button">Yes, resign</button>
+                <button id="cancel-resign-button" class="modal-button">No, go back</button>
+            </div>
+        </div>
+    </div>
+
+
+    <script>
+        let counter = 0;
+        let client_points = 0;
+        let opponent_points = 0;
+        let address = 'http://192.168.1.13:7860';
+
+        const opponentCardImg = document.getElementById('opponent_card_img');
+        const playerCardImg = document.getElementById('player_card_img');
+        const resignButton = document.getElementById('resign-button');
+        const resignConfirmModal = document.getElementById('resign-confirm-modal');
+        const confirmResignButton = document.getElementById('confirm-resign-button');
+        const cancelResignButton = document.getElementById('cancel-resign-button');
+
+        function set_cards(parsedResponse, length = 3) {
+            let numb_cards = 34 - 2 * counter;
+            document.getElementById('Rounds').innerText = (numb_cards > 0) ? `${numb_cards} Cards Left` : '';
+            
+            resignButton.disabled = false;
+            for (let i = 0; i < 3; i++) {
+                let id_element = 'card_' + i;
+                const cardElement = document.getElementById(id_element);
+                
+                if (i < length) {
+                    const cardString = parsedResponse.my_hand[i];
+                    if (cardString && !cardString.includes('The game is over')) {
+                        let card_name = cardString.replace(' ', '_') + '.jpg';
+                        cardElement.src = 'static/cards/' + card_name;
+                        cardElement.style.visibility = 'visible';
+                        cardElement.disabled = false;
+                    } else {
+                        cardElement.style.visibility = 'hidden';
+                        cardElement.disabled = true;
+                    }
+                } else {
+                    cardElement.style.visibility = 'hidden';
+                    cardElement.disabled = true;
+                }
+            }
+
+            if (counter == 0) {
+                let briscola_name = parsedResponse.briscola.replace(' ', '_') + '.jpg';
+                document.getElementById('image_briscola').src = 'static/cards/' + briscola_name;
+                document.getElementById('image_briscola').style.visibility = 'visible';
+                document.getElementById('title_briscola').innerText = '';
+            }
+            if (counter >= 17) {
+                document.getElementById('image_briscola').style.visibility = 'hidden';
+                document.getElementById('deck-pile').style.visibility = 'hidden';
+                document.getElementById('title_briscola').innerText = '';
+            }
+        }
+
+        function opponent_card_appears(parsedResponse) {
+            if (parsedResponse.card_player_1 != 'Not played yet') {
+                let name_card_played_by_opp = parsedResponse.card_player_1.replace(' ', '_') + '.jpg';
+                opponentCardImg.src = 'static/cards/' + name_card_played_by_opp;
+                opponentCardImg.style.visibility = 'visible';
+            } else {
+                opponentCardImg.style.visibility = 'hidden';
+            }
+        }
+
+        function startNewGame(endpoint, opponentName, opponentImageSrc) {
+            document.getElementById('who_I_play').innerHTML = `VS ${opponentName}`;
+            counter = 0;
+            client_points = 0;
+            opponent_points = 0;
+
+            const avatarContainer = document.getElementById('opponent-avatar-container');
+            const avatarImg = document.getElementById('opponent-avatar-img');
+            
+            avatarImg.src = opponentImageSrc;
+            avatarContainer.style.display = 'block';
+
+            document.getElementById('deck-pile').style.visibility = 'visible';
+            document.getElementById('start-screen').style.opacity = '0';
+            
+            setTimeout(() => {
+                document.getElementById('start-screen').style.display = 'none';
+                document.getElementById('game-board').classList.add('visible');
+            }, 500);
+
+
+            fetch(`${address}/${endpoint}`, { method: 'POST' })
+                .then(response => response.json())
+                .then(parsedResponse => {
+                    opponent_card_appears(parsedResponse);
+                    set_cards(parsedResponse);
+                });
+        }
+        
+        function resetUIForNewGame() {
+            document.getElementById('game-board').classList.remove('visible');
+            document.getElementById('opponent-avatar-container').style.display = 'none'; // Hide avatar
+             setTimeout(() => {
+                document.getElementById('start-screen').style.display = 'flex';
+                setTimeout(() => document.getElementById('start-screen').style.opacity = '1', 50);
+            }, 500);
+        }
+        
+        function showEndGameModal(winnerMessage, myScore, opponentScore) {
+            document.getElementById('modal-title').innerText = winnerMessage;
+            document.getElementById('modal-my-score').innerText = `Your Score: ${myScore}`;
+            document.getElementById('modal-opponent-score').innerText = `Opponent's Score: ${opponentScore}`;
+            document.getElementById('end-game-modal').style.display = 'flex';
+        }
+
+        document.getElementById('New_game_vs_det').onclick = () => startNewGame('new_game_vs_det', 'GREEDY PLAYER', 'static/greedy.jpg');
+        document.getElementById('New_game_vs_best').onclick = () => startNewGame('New_game_vs_best', 'BEST PLAYER', 'static/best_deep_player.jpg');
+        document.getElementById('New_game_vs_random').onclick = () => startNewGame('New_game_vs_random', 'RANDOM PLAYER', 'static/random.jpg');
+        
+        document.getElementById('play-again-button').onclick = () => {
+            document.getElementById('end-game-modal').style.display = 'none';
+            resetUIForNewGame();
+        };
+
+        function play_a_hand(answer) {
+            if (counter <= 20) {
+                fetch(`${address}/play_hand`, { method: 'POST', body: JSON.stringify(answer) })
+                    .then(response => response.json())
+                    .then(parsedResponse => {
+                        let timeout = 1000;
+                        if (opponentCardImg.style.visibility == 'hidden') {
+                            timeout = 1500;
+                        }
+
+                        let name_card_played_by_opp = parsedResponse.pl_1_previous_card.replace(' ', '_') + '.jpg';
+                        opponentCardImg.src = 'static/cards/' + name_card_played_by_opp;
+                        opponentCardImg.style.visibility = 'visible';
+
+                        setTimeout(() => {
+                            if (counter < 20) {
+                                if (parsedResponse.card_player_1 !== 'Not played yet') {
+                                    opponentCardImg.classList.add('glow');
+                                } else {
+                                    playerCardImg.classList.add('glow');
+                                }
+                            } else { 
+                                if (Number(parsedResponse.points_pl_2) > client_points) {
+                                    playerCardImg.classList.add('glow');
+                                } else if (Number(parsedResponse.points_pl_1) > opponent_points) {
+                                    opponentCardImg.classList.add('glow');
+                                }
+                            }
+                            
+                            opponent_points = Number(parsedResponse.points_pl_1);
+                            client_points = Number(parsedResponse.points_pl_2);
+
+                            setTimeout(() => {
+                                playerCardImg.classList.remove('glow');
+                                opponentCardImg.classList.remove('glow');
+                                playerCardImg.style.visibility = 'hidden';
+                                playerCardImg.style.transform = '';
+                                playerCardImg.style.transition = '';
+
+
+                                opponent_card_appears(parsedResponse);
+                                let n = parsedResponse.my_hand.length;
+                                set_cards(parsedResponse, n);
+
+                                if (counter == 20) {
+                                    opponentCardImg.style.visibility = 'hidden';
+                                    
+                                    let winnerMessage;
+                                    if (opponent_points > client_points) {
+                                        winnerMessage = 'You Lost!';
+                                    } else if (opponent_points < client_points) {
+                                        winnerMessage = 'You Won!';
+                                    } else {
+                                        winnerMessage = 'It\'s a Tie!';
+                                    }
+                                    showEndGameModal(winnerMessage, client_points, opponent_points);
+                                }
+                            }, 1500); // Time for player to see the glow
+                        }, timeout);
+                    });
+            }
+        }
+
+        function createCardClickHandler(cardIndex) {
+            return function () {
+                for (let i = 0; i < 3; i++) {
+                    document.getElementById('card_' + i).disabled = true;
+                }
+                resignButton.disabled = true;
+
+                const cardElement = document.getElementById('card_' + cardIndex);
+                
+                const startRect = cardElement.getBoundingClientRect();
+                playerCardImg.src = cardElement.src;
+                playerCardImg.style.visibility = 'visible';
+                
+                const endRect = playerCardImg.getBoundingClientRect();
+                const translateX = startRect.left - endRect.left;
+                const translateY = startRect.top - endRect.top;
+                
+                playerCardImg.style.transform = `translate(${translateX}px, ${translateY}px)`;
+                
+                cardElement.style.visibility = 'hidden';
+
+                requestAnimationFrame(() => {
+                    playerCardImg.style.transition = 'transform 0.4s ease-in';
+                    playerCardImg.style.transform = 'translate(0, 0)';
+                });
+
+
+                let list1 = cardElement.src.toString().split('/');
+                let list = list1[list1.length - 1].split('_');
+                let card_played_in_string = list[0] + ' ' + list[1].split('.')[0];
+                let answer = { my_card: card_played_in_string };
+                counter = counter + 1;
+                play_a_hand(answer);
+            };
+        }
+
+        document.getElementById('card_0').onclick = createCardClickHandler(0);
+        document.getElementById('card_1').onclick = createCardClickHandler(1);
+        document.getElementById('card_2').onclick = createCardClickHandler(2);
+        
+        resignButton.onclick = () => {
+            resignConfirmModal.style.display = 'flex';
+            resignButton.disabled = true;
+            for (let i = 0; i < 3; i++) {
+                document.getElementById('card_' + i).disabled = true;
+            }
+        };
+
+        cancelResignButton.onclick = () => {
+            resignConfirmModal.style.display = 'none';
+            resignButton.disabled = false;
+            for (let i = 0; i < 3; i++) {
+                const card = document.getElementById('card_' + i);
+                if(card.style.visibility === 'visible') {
+                    card.disabled = false;
+                }
+            }
+        };
+
+        confirmResignButton.onclick = () => {
+            resignConfirmModal.style.display = 'none';
+            showEndGameModal('You Lost!', client_points, opponent_points);
+        };
+
+    </script>
+
+<script>
+(function(){
+  async function postJSON(path, body={}){
+    try{
+      const r = await fetch(path,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});
+      const j = await r.json();
+      console.log('[Briscola] response', path, j);
+      window.__BRISCOLA_STATE__ = j;
+    }catch(e){console.error('[Briscola] error', path, e);}
+  }
+  function byButtonText(t){
+    return Array.from(document.querySelectorAll('button'))
+      .find(b=>b.textContent.trim().toLowerCase()===t.toLowerCase());
+  }
+  window.addEventListener('DOMContentLoaded',()=>{
+    // auto start a game so backend visibly works
+    postJSON('/New_game_vs_best');
+    const opp = byButtonText('Opponent');
+    const resign = byButtonText('Resign');
+    const again = byButtonText('Play Again');
+    if(opp)   opp.addEventListener('click', ()=>postJSON('/New_game_vs_best'));
+    if(again) again.addEventListener('click', ()=>postJSON('/New_game_vs_best'));
+    if(resign)resign.addEventListener('click', ()=>postJSON('/play_hand',{my_card:'Not played yet'}));
+  });
+})();
+</script>
+
+</body>
+</html>