Staninna · December 12, 2023 12:18
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World with Slides and Interaction</title>
 </head>

 <body>
    <div id="slide">
        <!--
            Here the main content lives

            Q: What is the main content?
            A: The main content is the content visable on the screen
        -->
        <style>
            /* This is the CSS for the main content */

            /* Center the inviteCodeContainer */
            #inviteCodeContainer {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
        </style>
        <div id="inviteCodeContainer">
            <h1 id="inviteCode">unknown</h1>
            <img id="inviteCodeQr" src="" alt="QR Code">
            <p>Scan the QR code to join the session</p>
            <p>Or enter the code manually</p>

            <button id="helloFromServerButton">Say Hello to the Clients</button>
        </div>
    </div>

    <div id="slideInteraction">
        <!--
            Here the interaction content lives

            Q: What is the interaction content?
            A: The interaction content is the content visable to the user when they use the invite system
        -->
        <style>
            /* This is the CSS for the interaction content */

            /* Center the localIdContainer */
            #localIdContainer {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
        </style>
        <div id="localIdContainer">
            <h1 id="localId">unknown</h1>

            <button id="helloButton">Say Hello to the Server</button>
        </div>
    </div>

    <script>

        ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        // The next section of code is used for checking if the client is on the main content or the interaction content //
        ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////

        const HASH_INTERACTION_PREFIX = '#interaction-';
        // Q: What is this `HASH_SLIDE_PREFIX` thing?
        // A: This is a constant that is used to identify if the client is on the main content or the interaction content

        document.addEventListener('DOMContentLoaded', function () {
            if (window.location.hash.startsWith(HASH_INTERACTION_PREFIX)) {

                // We extract the localId from the hash
                const localId = window.location.hash.substr(HASH_INTERACTION_PREFIX.length);

                // We call the interactionScreen function, passing the localId
                interactionScreen(localId);

                return;
            }

            // If we are on the main screen, we call the mainScreen function
            mainScreen();
        });

        // Q: What does the code above do?
        // A: The code above checks if the client is on the main content or the interaction content
        //    If the client is on the interaction content, it calls the `interactionScreen` function
        //    If the client is on the main content, it calls the `mainScreen` function

        ///////////////////////////////////////////////////////////////////////////////////////////////////////////
        // The next section of code is the implementation of the `interactionScreen` and `mainScreen` functions  //
        ///////////////////////////////////////////////////////////////////////////////////////////////////////////

        // This function is called when the client is on the main content it is responsible for:
        // - Asking the parent window for the invite code
        // - Displaying the invite code to the user
        function mainScreen() {
            // Hide the interaction content
            document.querySelector('#slideInteraction').style.display = 'none';

            // Ask the parent window to send us the invite code every 15 seconds
            setTimeout(function () {
                window.parent.postMessage({
                    type: 'getInviteCode',
                    data: window.location.href,
                }, '*');
            }, 15000);

            // Ask the parent window to send us the invite code now
            window.parent.postMessage({
                type: 'getInviteCode',
                data: window.location.href,
            }, '*');

            document.querySelector('#helloFromServerButton').addEventListener('click', function () {
                // Print a message to the console
                console.log('Hello from the server to the clients');

                // Send a message to the parent window
                hello({
                    sender: 'the server'
                });
            });

            // Listen for the invite code from the parent window
            window.addEventListener('message', function (event) {
                console.log('\n\n================================\n\n' + 'message: ', event.data);

                if (event.data.type === 'onInviteCode') {
                    // We have received the invite code from the parent window
                    // We can now display the invite code to the user
                    let code = event.data.data.inviteCode;
                    let qr = event.data.data.inviteCodeQr;

                    document.querySelector('#inviteCode').innerText = code;
                    console.log(code);

                    document.querySelector('#inviteCodeQr').src = qr;
                    console.log(qr);
                }

                // Listen for the hello button events sent from the interaction content
                else if (event.data.type === 'requestSetInteractionData') {
                    console.log('data: ', event.data.data);

                    // Create elements to display the localId
                    const localId = document.createElement('h1');
                    localId.innerText = 'Hello from ' + event.data.data;

                    // Add the Hello from the client to the page
                    document.querySelector('#slide').appendChild(localId);
                }
            });
        }

        // This function is called when the client is on the interaction content it is responsible for:
        // - Displaying the interaction content to the user

        function interactionScreen(localId) {
            // Hide the main content
            document.querySelector('#slide').style.display = 'none';

            console.log('Welcome to the interaction screen');
            console.log('Your localId is:', localId);

            // Display the localId to the user
            document.querySelector('#localId').innerText = localId;

            // Listen for the hello button to be clicked
            document.querySelector('#helloButton').addEventListener('click', function () {
                // Print a message to the console
                console.log('Hello from', localId, 'to the server');

                // Send a message to the parent window
                hello({
                    sender: localId
                });
            });

            // Listen for the hello button events sent from the main content
            window.addEventListener('message', function (event) {
                console.log('\n\n================================\n\n' + 'message: ', event.data);

                if (event.data.type === 'requestSetInteractionData') {
                    console.log('data: ', event.data.data);

                    // Create elements to display the localId
                    const localId = document.createElement('h1');
                    localId.innerText = 'Hello from ' + event.data.data;

                    // Add the Hello from the server to the page
                    document.querySelector('#slideInteraction').appendChild(localId);
                }
            });
        }

        // Should work on both client and server
        function hello(data) {
            console.log('hello function called with data:', data);
            console.log('Hello from', data.sender);

            // Send a message to the parent window
            window.parent.postMessage({
                type: 'requestSetInteractionData',
                data: {
                    msg: 'Hello from' + data.sender,
                    uniqueId: Math.random().toString(36).substr(2, 9),
                },
            }, '*');
        }
    </script>
 </body>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hello World with Slides and Interaction</title>
	</head>

	<body>
	<div id="slide">
	<!--
	Here the main content lives

	Q: What is the main content?
	A: The main content is the content visable on the screen
	-->
	<style>
	/* This is the CSS for the main content */

	/* Center the inviteCodeContainer */
	#inviteCodeContainer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	}
	</style>
	<div id="inviteCodeContainer">
	<h1 id="inviteCode">unknown</h1>
	<img id="inviteCodeQr" src="" alt="QR Code">
	<p>Scan the QR code to join the session</p>
	<p>Or enter the code manually</p>

	<button id="helloFromServerButton">Say Hello to the Clients</button>
	</div>
	</div>

	<div id="slideInteraction">
	<!--
	Here the interaction content lives

	Q: What is the interaction content?
	A: The interaction content is the content visable to the user when they use the invite system
	-->
	<style>
	/* This is the CSS for the interaction content */

	/* Center the localIdContainer */
	#localIdContainer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	}
	</style>
	<div id="localIdContainer">
	<h1 id="localId">unknown</h1>

	<button id="helloButton">Say Hello to the Server</button>
	</div>
	</div>

	<script>

	///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	// The next section of code is used for checking if the client is on the main content or the interaction content //
	///////////////////////////////////////////////////////////////////////////////////////////////////////////////////

	const HASH_INTERACTION_PREFIX = '#interaction-';
	// Q: What is this `HASH_SLIDE_PREFIX` thing?
	// A: This is a constant that is used to identify if the client is on the main content or the interaction content

	document.addEventListener('DOMContentLoaded', function () {
	if (window.location.hash.startsWith(HASH_INTERACTION_PREFIX)) {

	// We extract the localId from the hash
	const localId = window.location.hash.substr(HASH_INTERACTION_PREFIX.length);

	// We call the interactionScreen function, passing the localId
	interactionScreen(localId);

	return;
	}

	// If we are on the main screen, we call the mainScreen function
	mainScreen();
	});

	// Q: What does the code above do?
	// A: The code above checks if the client is on the main content or the interaction content
	// If the client is on the interaction content, it calls the `interactionScreen` function
	// If the client is on the main content, it calls the `mainScreen` function

	///////////////////////////////////////////////////////////////////////////////////////////////////////////
	// The next section of code is the implementation of the `interactionScreen` and `mainScreen` functions //
	///////////////////////////////////////////////////////////////////////////////////////////////////////////

	// This function is called when the client is on the main content it is responsible for:
	// - Asking the parent window for the invite code
	// - Displaying the invite code to the user
	function mainScreen() {
	// Hide the interaction content
	document.querySelector('#slideInteraction').style.display = 'none';

	// Ask the parent window to send us the invite code every 15 seconds
	setTimeout(function () {
	window.parent.postMessage({
	type: 'getInviteCode',
	data: window.location.href,
	}, '*');
	}, 15000);

	// Ask the parent window to send us the invite code now
	window.parent.postMessage({
	type: 'getInviteCode',
	data: window.location.href,
	}, '*');

	document.querySelector('#helloFromServerButton').addEventListener('click', function () {
	// Print a message to the console
	console.log('Hello from the server to the clients');

	// Send a message to the parent window
	hello({
	sender: 'the server'
	});
	});

	// Listen for the invite code from the parent window
	window.addEventListener('message', function (event) {
	console.log('\n\n================================\n\n' + 'message: ', event.data);

	if (event.data.type === 'onInviteCode') {
	// We have received the invite code from the parent window
	// We can now display the invite code to the user
	let code = event.data.data.inviteCode;
	let qr = event.data.data.inviteCodeQr;

	document.querySelector('#inviteCode').innerText = code;
	console.log(code);

	document.querySelector('#inviteCodeQr').src = qr;
	console.log(qr);
	}

	// Listen for the hello button events sent from the interaction content
	else if (event.data.type === 'requestSetInteractionData') {
	console.log('data: ', event.data.data);

	// Create elements to display the localId
	const localId = document.createElement('h1');
	localId.innerText = 'Hello from ' + event.data.data;

	// Add the Hello from the client to the page
	document.querySelector('#slide').appendChild(localId);
	}
	});
	}

	// This function is called when the client is on the interaction content it is responsible for:
	// - Displaying the interaction content to the user

	function interactionScreen(localId) {
	// Hide the main content
	document.querySelector('#slide').style.display = 'none';

	console.log('Welcome to the interaction screen');
	console.log('Your localId is:', localId);

	// Display the localId to the user
	document.querySelector('#localId').innerText = localId;

	// Listen for the hello button to be clicked
	document.querySelector('#helloButton').addEventListener('click', function () {
	// Print a message to the console
	console.log('Hello from', localId, 'to the server');

	// Send a message to the parent window
	hello({
	sender: localId
	});
	});

	// Listen for the hello button events sent from the main content
	window.addEventListener('message', function (event) {
	console.log('\n\n================================\n\n' + 'message: ', event.data);

	if (event.data.type === 'requestSetInteractionData') {
	console.log('data: ', event.data.data);

	// Create elements to display the localId
	const localId = document.createElement('h1');
	localId.innerText = 'Hello from ' + event.data.data;

	// Add the Hello from the server to the page
	document.querySelector('#slideInteraction').appendChild(localId);
	}
	});
	}

	// Should work on both client and server
	function hello(data) {
	console.log('hello function called with data:', data);
	console.log('Hello from', data.sender);

	// Send a message to the parent window
	window.parent.postMessage({
	type: 'requestSetInteractionData',
	data: {
	msg: 'Hello from' + data.sender,
	uniqueId: Math.random().toString(36).substr(2, 9),
	},
	}, '*');
	}
	</script>
	</body>