broadcast

party/main.py

@@ -1,5 +1,5 @@
 from flask import Flask, jsonify, render_template, session, redirect
-from flask_socketio import SocketIO, send, emit
+from flask_socketio import SocketIO, send, emit, join_room, leave_room
 from http import HTTPStatus
 from mate import generate_kiste, MateKiste
 from chat import Chat
@@ -12,7 +12,7 @@ app = Flask(__name__,
 app.secret_key = 'super secret key 1234 5678 9012 3456 '
 socketio = SocketIO(app)
 
-
+clients = []
 
 @app.route('/', methods=['GET'])
 def index():
@@ -66,6 +66,9 @@ def api_mate_status():
 @app.route('/api/mate/trinken/<row>/<column>', methods=['POST'])
 def api_mate_trinken(row, column):
     MateKiste.removeAt(int(row), int(column))
+    msg = '{ "mate-genommen": { "welche": [' + row + ', ' + column + '] } }'
+    socketio.emit(msg, broadcast=True)
+
     response = jsonify(success=True)
     response.status_code = 200
     return response
@@ -94,13 +97,23 @@ def handle_mate_status():
     print(status)
     return { 'data':  status }
 
+@socketio.on('mate-nehmen')
+def handle_mate_nehmen(data):
+    print(data)
+    MateKiste.removeAt(data['row'], data['column'])
+    # broadcast
+    emit('mate-genommen', data, broadcast=True)
+
+
 @socketio.on('connect')
 def handle_connect():
     print('Client connected')
+    join_room(0)
 
 @socketio.on('disconnect')
 def handle_disconnect():
     print('Client disconnected')
+    leave_room(0)
 
 @app.route('/api/music', methods=['GET'])
 def api_music():

party/static/css/session.css

@@ -412,14 +412,6 @@ margin-right: auto;
     border-radius: 50%;
 }
 
-.voll-false {
-    color: #ff0000;
-}
-
-.voll-true {
-    background-color: #00ff00;
-}
-
 #chat-container {
     max-height: 80%;
 }

party/static/js/mate.js

@@ -25,7 +25,10 @@ function getMateStatus(socket) {
                 rows[x].appendChild(cell);
                 continue;
             }
-            cell.classList = ['flasche', x, y, `voll-${flascheIstVoll}`];
+            cell.classList.add('flasche');
+            cell.classList.add(x);
+            cell.classList.add(y);
+            cell.classList.add(`voll-${flascheIstVoll}`);
 
             const flascheTrinkenButton = document.createElement('button');
             flascheTrinkenButton.classList.add('flasche-trinken-button');
@@ -51,16 +54,14 @@ function flascheIndex(index_1d, rows, columns) {
 //TODO: replace id lookup with class lookup
 function flascheTrinken(rowNumber, columnNumber) {
     console.log(`flasche trinken ${rowNumber} ${columnNumber}`);
-    fetch(`/api/mate/trinken/${rowNumber}/${columnNumber}`, {
-        method: 'POST',
-    }).then(response => {
-        if (response.status === 200) {
-            console.log('flasche getrunken');
-            let flasche = document.getElementById(`flasche-trinken-button-${rowNumber}-${columnNumber}`);
-            flasche.disabled = true;
-            flasche.style.backgroundColor = '#333';
-        } else {
-            alert('Fehler beim Trinken');
-        }
+    socket.emit('mate-nehmen', { 'row': rowNumber, 'column': columnNumber }, (data) => {
+        console.log('flasche getrunken');
+        let flasche = document.getElementById(`flasche-trinken-button-${rowNumber}-${columnNumber}`);
+        flasche.disabled = true;
+        flasche.style.backgroundColor = '#333';
     });
 }
+
+socket.on('mate-genommen', (data) => {
+    console.log(data)
+});