DatabaseTesting.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Fun and Games | Hail Duckfather?</title>
    <meta name="description" content="Shared live games: argue ducks versus rats, play duck-tac-toe and quack along with everyone else on the page.">
    <link rel="canonical" href="https://duckfather.de/DatabaseTesting.html">
    <link rel="icon" href="favicon.ico">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="Hail Duckfather?">
    <meta property="og:title" content="Fun and Games | Hail Duckfather?">
    <meta property="og:description" content="Shared live games: argue ducks versus rats, play duck-tac-toe and quack along with everyone else on the page.">
    <meta property="og:url" content="https://duckfather.de/DatabaseTesting.html">
    <meta property="og:image" content="https://duckfather.de/Referenced_Media/DuckFather.png">
    <meta name="twitter:card" content="summary_large_image">
    <script src="site.js"></script>
    <link rel="stylesheet" href="games.css">
  </head>
  <body class="games-page" onpageshow="usersOnlineFunction(1)" onpagehide="usersOnlineFunction(-1)">

<main class="games">

  <header class="container games-header">
    <h1 class="games-title">Below is an absolutely undisputed unquestionable fact (it's on the internet)</h1>
  </header>

  <section class="container games-fact">
    <aside class="fact-card games-card">
      <p class="card-label">the official fact:</p>
      <h2 title="this text is the same no matter which device views this page" id="displayText">Ducks are the best</h2>
      <div>
        <button class="btn btn-outline-dark me-2" onclick="duckFunction()" style="background-color: #f3e6d2;">Ducks!</button>
        <button class="btn btn-outline-dark" onclick="ratFunction()" style="background-color: #f3e6d2;">Rats!</button>
      </div>
    </aside>
  </section>

  <section class="stage" aria-label="The quacking duck and the official fact">
    <div class="stage-grid">
      <div class="duck-col">
        <picture>
          <source srcset="Referenced_Media/PaintedDuck1.webp" type="image/webp">
          <img id="duck" class="duck" src="Referenced_Media/PaintedDuck1.png" alt="A painted white duck leaning in from the left edge of the screen" width="1112" height="1415">
        </picture>
      </div>

      <div class="bubble-col">
        <button type="button" class="bubble" id="bubble" onclick="quackFunction()" aria-label="Add a quack" title="Add a quack"><span class="bubble-text" id="button1">quack</span></button>
        <div class="bubble-actions">
          <button type="button" class="btn btn-outline-dark" id="resetBtn" onclick="resetQuackFunction()" style="background-color: #f3e6d2;">reset</button>
          <span class="bubble-tip">(duck)</span>
        </div>
        <p class="bubble-hint" id="quackHint" hidden>The duck is out of breath!!</p>
      </div>

    </div>
  </section>

  <section class="container games-lower">
    <div class="ttt-card games-card">
      <p class="card-label">duck tac toe</p>
      <div class="ttt-board">
        <button class="buttonDuck" id="1a" onclick="_1aFunction()">-</button>
        <button class="buttonDuck" id="1b" onclick="_1bFunction()">-</button>
        <button class="buttonDuck" id="1c" onclick="_1cFunction()">-</button>
        <button class="buttonDuck" id="2a" onclick="_2aFunction()">-</button>
        <button class="buttonDuck" id="2b" onclick="_2bFunction()">-</button>
        <button class="buttonDuck" id="2c" onclick="_2cFunction()">-</button>
        <button class="buttonDuck" id="3a" onclick="_3aFunction()">-</button>
        <button class="buttonDuck" id="3b" onclick="_3bFunction()">-</button>
        <button class="buttonDuck" id="3c" onclick="_3cFunction()">-</button>
      </div>
    </div>
  </section>
  <div class="watchers">friends watching: <span id="usersOnline">__</span></div>
</main>

  <!-- The core Firebase JS SDK is always required and must be listed first -->
  <script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-firestore.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-database.js"></script>
  <!-- TODO: Add SDKs for Firebase products that you want to use
    https://firebase.google.com/docs/web/setup#available-libraries -->
  <script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-analytics.js"></script>

  <script>
	// Your web app's Firebase configuration
	var firebaseConfig = {
		apiKey: "AIzaSyC_kt8C2WVY5-NelCH2368ISKJYCMgqrVw",
		authDomain: "duckfatherwebsite.firebaseapp.com",
		databaseURL: "https://duckfatherwebsite.firebaseio.com",
		projectId: "duckfatherwebsite",
		storageBucket: "duckfatherwebsite.appspot.com",
		messagingSenderId: "378512363534",
		appId: "1:378512363534:web:5d079ba167130bce74ec5f",
		measurementId: "G-XN358D4C48"
	};
	// Initialize Firebase
	firebase.initializeApp(firebaseConfig);
	firebase.analytics();
	
	
	var displayVar = document.getElementById('displayText');
	var dbRef1 = firebase.database().ref().child('text');
	dbRef1.on('value', snap => displayVar.innerText = snap.val());
	
	// ---- The quacking duck: the shared text lives at /button1 and is shown in the speech bubble ----
	var MAX_QUACK_LENGTH = 1800;   // stops the shared text growing without limit
	var button1Var = document.getElementById('button1');   // the speech bubble
	var quackHint = document.getElementById('quackHint');
	var bubbleVar = document.getElementById('bubble');   // the bubble's outer box (animated)
	var duckVar = document.getElementById('duck');
	var firstQuackLoad = true;
	var dbRef2 = firebase.database().ref().child('button1');
	dbRef2.on('value', snap => {
		var text = String(snap.val() || "quack");
		var changed = button1Var.textContent !== text;
		button1Var.textContent = text;
		var full = text.length >= MAX_QUACK_LENGTH;
		bubbleVar.disabled = full;
		quackHint.hidden = !full;
		if (changed && !firstQuackLoad) {
			[bubbleVar, duckVar].forEach(el => {
				el.classList.remove('quacked');
				void el.offsetWidth;   // restart the animation
				el.classList.add('quacked');
			});
		}
		firstQuackLoad = false;
	});
	
	var usersOnlineVar = document.getElementById('usersOnline');
	var dbRef_usersOnline = firebase.database().ref().child('usersOnline');
	dbRef_usersOnline.on('value', snap => usersOnlineVar.innerText = snap.val());
	
	
	function usersOnlineFunction(comeOrGo) {
		firebase.database().ref().update({usersOnline: firebase.database.ServerValue.increment(comeOrGo)});
	}
	
	// These control each function of the TicTacToe board --------------------------------------------------------------------------------------------
	
	var _1aVar = document.getElementById('1a');
	var dbRef1a = firebase.database().ref().child('_1a');
	dbRef1a.on('value', snap => _1aVar.innerText = snap.val());
	
	function _1aFunction() {
		if (_1aVar.innerText == "--"){
		firebase.database().ref().update({_1a:"🦆"});
		}
		else if (_1aVar.innerText == "🦆") {
		firebase.database().ref().update({_1a:"🐀"});
		}
		else {
		firebase.database().ref().update({_1a:"--"});
		}
	}
	
	var _1bVar = document.getElementById('1b');
	var dbRef1b = firebase.database().ref().child('_1b');
	dbRef1b.on('value', snap => _1bVar.innerText = snap.val());
	
	function _1bFunction() {
		if (_1bVar.innerText == "--"){
		firebase.database().ref().update({_1b:"🦆"});
		}
		else if (_1bVar.innerText == "🦆") {
		firebase.database().ref().update({_1b:"🐀"});
		}
		else {
		firebase.database().ref().update({_1b:"--"});
		}
	}
	
	var _1cVar = document.getElementById('1c');
	var dbRef1c = firebase.database().ref().child('_1c');
	dbRef1c.on('value', snap => _1cVar.innerText = snap.val());
	
	function _1cFunction() {
		if (_1cVar.innerText == "--"){
		firebase.database().ref().update({_1c:"🦆"});
		}
		else if (_1cVar.innerText == "🦆") {
		firebase.database().ref().update({_1c:"🐀"});
		}
		else {
		firebase.database().ref().update({_1c:"--"});
		}
	}
	
	var _2aVar = document.getElementById('2a');
	var dbRef2a = firebase.database().ref().child('_2a');
	dbRef2a.on('value', snap => _2aVar.innerText = snap.val());
	
	function _2aFunction() {
		if (_2aVar.innerText == "--"){
		firebase.database().ref().update({_2a:"🦆"});
		}
		else if (_2aVar.innerText == "🦆") {
		firebase.database().ref().update({_2a:"🐀"});
		}
		else {
		firebase.database().ref().update({_2a:"--"});
		}
	}
	
	var _2bVar = document.getElementById('2b');
	var dbRef2b = firebase.database().ref().child('_2b');
	dbRef2b.on('value', snap => _2bVar.innerText = snap.val());
	
	function _2bFunction() {
		if (_2bVar.innerText == "--"){
		firebase.database().ref().update({_2b:"🦆"});
		}
		else if (_2bVar.innerText == "🦆") {
		firebase.database().ref().update({_2b:"🐀"});
		}
		else {
		firebase.database().ref().update({_2b:"--"});
		}
	}
	
	var _2cVar = document.getElementById('2c');
	var dbRef2c = firebase.database().ref().child('_2c');
	dbRef2c.on('value', snap => _2cVar.innerText = snap.val());
	
	function _2cFunction() {
		if (_2cVar.innerText == "--"){
		firebase.database().ref().update({_2c:"🦆"});
		}
		else if (_2cVar.innerText == "🦆") {
		firebase.database().ref().update({_2c:"🐀"});
		}
		else {
		firebase.database().ref().update({_2c:"--"});
		}
	}
	
	var _3aVar = document.getElementById('3a');
	var dbRef3a = firebase.database().ref().child('_3a');
	dbRef3a.on('value', snap => _3aVar.innerText = snap.val());
	
	function _3aFunction() {
		if (_3aVar.innerText == "--"){
		firebase.database().ref().update({_3a:"🦆"});
		}
		else if (_3aVar.innerText == "🦆") {
		firebase.database().ref().update({_3a:"🐀"});
		}
		else {
		firebase.database().ref().update({_3a:"--"});
		}
	}
	
	var _3bVar = document.getElementById('3b');
	var dbRef3b = firebase.database().ref().child('_3b');
	dbRef3b.on('value', snap => _3bVar.innerText = snap.val());
	
	function _3bFunction() {
		if (_3bVar.innerText == "--"){
		firebase.database().ref().update({_3b:"🦆"});
		}
		else if (_3bVar.innerText == "🦆") {
		firebase.database().ref().update({_3b:"🐀"});
		}
		else {
		firebase.database().ref().update({_3b:"--"});
		}
	}
	
	var _3cVar = document.getElementById('3c');
	var dbRef3c = firebase.database().ref().child('_3c');
	dbRef3c.on('value', snap => _3cVar.innerText = snap.val());
	
	function _3cFunction() {
		if (_3cVar.innerText == "--"){
		firebase.database().ref().update({_3c:"🦆"});
		}
		else if (_3cVar.innerText == "🦆") {
		firebase.database().ref().update({_3c:"🐀"});
		}
		else {
		firebase.database().ref().update({_3c:"--"});
		}
	}
	
	// End of the TicTacToe board ---------------------------------------------------------------------------------
	
		

function duckFunction() {
  firebase.database().ref().update({text: "Ducks are the best"});
}
function ratFunction() {
  firebase.database().ref().update({text: "Rats are the best"});
}
function quackFunction() {
  // A transaction makes simultaneous quacks from several visitors add up instead of overwriting each other.
  firebase.database().ref().child('button1').transaction(function (current) {
    current = current || "quack";
    if (current.length >= MAX_QUACK_LENGTH) { return; }   // returning nothing cancels the write
    return "quack " + current;
  });
}
function resetQuackFunction() {
  firebase.database().ref().update({button1: "quack"});
}
	</script>

</body>
</html>