ConwayLife Sprint3

Requirement analysis

Problem analysis

Test plans

Al fine di testare la corretta interazione tra i componenti, si possono realizzare caller specifici.
Si ipotizza pertanto l'esecuzione di un caller che implementa IObserver, cui routine è quella di aprire una connessione websocket alla porta 8080, ed inviare il messaggio di comando al guiserver, simulando l'interazione guiserver-applicazione. In particolare si simula un comando di dispatch inviato da lifeCtrl a guiserver per modificare lo stato della cella (5,7), indicando di modificare la visualizzazione della griglia, come farebbe il controller man mano che il gioco procede. Ci aspettiamo pertanto che il guiserver ricevuto il messaggio, proceda a fare il forward a tutti i caller attualemnte attivi come pagine HTML, il messaggio per produrre l'aggiornamento corretto, modificando la cella cell(5,7).

	public class CallerServerInteraction  implements IObserver{  
		private String name;
	   
	   protected void sendCellChange( ) throws Exception {
		   Interaction wsconn = WsConnection.create("localhost:8080", "eval", this);
		   //((Connection) wsconn).setTrace(true);
		   //build the dispatch message, switch cell 5, 7
			IApplMessage cmdmsg = CommUtils.buildDispatch("lifeCtrl", "eval", "cell(5,7)", "guiserver"  );
			CommUtils.outblue(name + " sending " + cmdmsg);
			wsconn.forward(cmdmsg);
			
			CommUtils.delay(2000);
			CommUtils.outblue("CallerServerInteraction | BYE "  );
   		}
	}     

Project

1. Comunicazione server - pagina:
   Aprire la connessione webseocket per comunicare con guiserver, la pagina viene erogata dal server:

   			//se il server è nella stessa macchina, usa localhost:8080
   			socketToGui = new WebSocket("ws://localhost:8080/eval");
   			socketToGui = new WebSocket("ws://"+window.location.host+"/eval");
   		

   Come si diceva in analisi il server invia alla pagina comandi espressi da semplici stringhe, che verranno interpretate dal codice JavaScript scritto nella pagina.
   Si specifica alla ricezione di un messaggio, 2 casi principali di dispatching:
   • Handshake di identità: La pagina estrae e memorizza il proprio identificatore in pageId, che verrà usato come SENDER in tutti i messaggi successivi verso il server.

     					if (event.data.startsWith("ID:")) {
     						pageId = event.data.split(":")[1];
     					}
     				

   • Ricezione della griglia completa: può essere impostata come griglia globale o come griglia granulare
     La griglia pertanto può essere impostata:
     1. Come griglia globale attraverso l'uso di canvas:
        Il server invia la griglia serializzata come array JSON bidimensionale. Viene deserializzata e passata a draw(), schedulata al prossimo frame del browser tramite requestAnimationFrame.

        						//messaggi del tipo [[false,false, ... ]]
        						if( event.data.includes("[[")) {
        							const grid = JSON.parse(event.data);
        							requestAnimationFrame(() => draw(grid));
        						}
        					

        Draw(grid) fa rendering su canvas:

        						ctx.clearRect(0, 0, canvas.width, canvas.height);  // 1. pulisce tutto
        						const currentRows = grid.length;                    // 2. dimensioni dinamiche
        						const currentCols = grid[0].length;
        
        						for (let r = 0; r < currentRows; r++) {
        							for (let c = 0; c < currentCols; c++) {
        								ctx.fillStyle = grid[r][c] ? "#ff0000" : "#00ff00";  // 3. stato vivo/morto
        								ctx.fillRect(c * CELL_SIZE, r * CELL_SIZE, CELL_SIZE - 1, CELL_SIZE - 1);
        							}
        						}
        					

     2. Come griglia granulare ovvero serie di celle quadrate, ciascuna con ID cell-i-j incapsulata in un tag. Pertanto in questo caso:

        						if (event.data.startsWith("cell(")) {
        							coords = event.data.replace("cell(", "").replace(")", "").split(",");
        							updateCellColor(coords[0], coords[1], coords[2]);
        						}
        
        					

        Ogni cella ha un indirizzo fisico nel documento HTML che è l'ID e lo stato vivomorto è appreso direttamente dall'elemento tramite una classe CSS:

        						//nel metodo function updateCellColor(newX, newY,color)
        						cellxy = document.getElementById(`cell(${newX},${newY})`);
        					

Testing

Deployment

Maintenance

By studentName email: gregorio.bussolari@studio.unibo.it, GIT repo: https://github.com/GregorioBussolari/iss2026Unibo.git