Add mechanism to detect browser/window/tab closing

Author: ggeerraarrdd

README.md

@@ -32,9 +32,10 @@ Apart from what was to be gained from implementing the requirements, this projec
 
 * Flask==2.2.5
 * Flask-Session==0.4.1
+* Flask_SocketIO==5.3.6
 * geographiclib==2.0
 * haversine==2.8.0
-* Werkzeug==3.0.0
+* Werkzeug==3.0.1
 
 ### Usage
 

app.py

@@ -2,6 +2,7 @@
 
 from flask import Flask, flash, redirect, render_template, request, session
 from flask_session import Session
+from flask_socketio import SocketIO
 from werkzeug.security import check_password_hash, generate_password_hash
 from datetime import datetime
 
@@ -12,6 +13,9 @@
 # Configure application
 app = Flask(__name__)
 
+app.config['SECRET_KEY'] = 'secret!'
+socketio = SocketIO(app)
+
 # View HTML changes without rerunning server
 app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0
 app.config['TEMPLATES_AUTO_RELOAD'] = True
@@ -49,6 +53,23 @@ def after_request(response):
     return response
 
 
+@socketio.on('disconnect')
+def disconnect():
+    
+    # Print to debug
+    # print("\nDISCONNECTED:")
+    # print(f"Current Game ID: {session['current_game_id']}")
+    # print(f"Current Location ID: {session['current_game_loc_id']}")
+    # print(f"Current Game Start: {session['current_game_start']}")
+
+    current_game_id = session["current_game_id"]
+    current_game_start = session['current_game_start']
+
+    result = queries.get_disconnected(db, current_game_id, current_game_start)
+
+    print(f"{result}\n")
+
+
 ####################################################################
 #
 # INDEX

geo.db

@@ -1,9 +1,9 @@
-from cs50 import SQL
 import sqlite3
 from random import randint
 from datetime import datetime
 from math import floor, ceil, exp
 from haversine import haversine, Unit
+import time
 
 
 def get_user(db, new_username, new_password):
@@ -217,6 +217,60 @@ def get_current_game_deleted(db, current_game_id):
     return 1
 
 
+def get_disconnected(db, current_game_id, current_game_start):
+
+    # Set current timestamp
+    current_game_end = datetime.now()
+    
+    # Delay function by 5 seconds to allow other functions to update db
+    time.sleep(5)
+
+    # TODO try-catch db connection
+    # Create connection and cursor
+    connection = sqlite3.connect(db)
+    cursor = connection.cursor()
+
+    # Check value of game_duration
+    query = "SELECT game_duration FROM games WHERE id = ?; "
+    cursor.execute(query, (current_game_id,))
+    result = cursor.fetchone()
+
+    # Check if game record is deleted or still there
+    if result == None: 
+        # Game record has been deleted
+        result = f"Game record has been deleted."
+    
+    else:
+        # Game record is still there & game_duration is still None
+        if result[0] == None:
+            # Calculate duration
+            duration_sec, duration_min = game_answer_duration(current_game_start, current_game_end)
+
+            if duration_sec >= 10:
+                # Update game_duration
+                query = "UPDATE games SET game_duration = ? WHERE id = ?; "
+                cursor.execute(query, (duration_min, current_game_id))
+
+                # Commit update
+                connection.commit()
+
+                result = f"Game record updated."
+            
+            else:
+                get_current_game_deleted(db, current_game_id)
+                result = f"Game record deleted."
+        
+        # Game record is still there & game_duration is still None
+        else:
+            result = f"Game record has game_duration."
+    
+    # Close cursor and connection
+    cursor.close()
+    connection.close()
+
+    return result
+
+
 def game_answer_distance(loc_answer_lat, loc_answer_long, game_answer_lat, game_answer_long):
 
     # https://pypi.org/project/haversine/

queries.py

@@ -1,5 +1,6 @@
 Flask==2.2.5
 Flask-Session==0.4.1
+Flask_SocketIO==5.3.6
 geographiclib==2.0
 haversine==2.8.0
-Werkzeug==3.0.0
+Werkzeug==3.0.1

requirements.txt

@@ -72,5 +72,14 @@
 </div>
 
 
+<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js" integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA==" crossorigin="anonymous"></script>
+            
+<script type="text/javascript" charset="utf-8">
+var socket = io();
+socket.on('connect', function() {
+    socket.emit('my event', {data: 'Game started!'});
+});
+</script>
+
 
 {% endblock %}