2a:null 2b:["$","title",null,{"children":"💥 Firebobservable | linard-y | Observable"}] 31:T684,{ const SumSVG = html` ` return html`

${SumSVG} = 💥 Firebobservable

Example of the use of firebase, firebaseui, Google Realtime database and my tableInput. (If you don't want use your own email to try the app, you can use this email/password combination; fakeman@laposte.net/dreamit).

` }32:T621,{ let user = firebase.auth().currentUser; let welcome = 'Welcome to my awesome App, please sign in !'; let btnSignOutVisible = 'hidden'; if (user) { welcome = 'Welcome '+ user.displayName + ' !' btnSignOutVisible = 'visible'; } const form = html`

${welcome}

<< Come back here when you want to log out.

`; form.querySelector('input[id="btn_signout"]').onclick = () => { if (!(wantToPlay)) { killUser();} firebase .auth() .signOut() .then( function() { mutable identifiedUser = ({}); form.querySelector('input[id="btn_signout"]').style.visibility = 'hidden'; form.querySelector('label[id="lbl_signout"]').style.visibility = 'hidden'; form.querySelector('h3[id="welcome"]').innerText = 'Welcome to my awesome App, please sign in !'; showContent(false); console.log('sign out'); pollForUIContainer(); }) .catch(function(error) { console.log(error.message); }); }; pollForUIContainer(); return form }33:T4d2,showContent = async (user) => { if(user) { showProfile(user); console.log('Profile displayed'); document.querySelector('div[id="introduction"]').innerHTML = "

In the near future you will be able to participate in an amazing game where you will be at the head of a guild of thieves in the city of Laelith, plotting to keep your guild in a dominant position against the other guilds in the city. Now it's time for you to name your guild and assign it a color that will represent you in the game!

"; await showTableGuild(user); console.log('Guild table displayed'); document.querySelector('div[id="conclusion"]').innerHTML = "

The game will start in a few days. You will be notified by email. In the meantime you can come back here as many times as you like to change your guild name or color.

"; } else { document.querySelector('div[name="UserProfile"]').innerHTML = ''; document.querySelector('div[name="CommentProfile"]').innerHTML = ''; document.querySelector('div[id="introduction"]').innerHTML = "

"; document.querySelector('div[id="conclusion"]').innerHTML = "

"; document.querySelector('div[id="guild_config"]').innerHTML = "

"; } }34:T67f,TableGuild = (data, login) => { const colorInput = (d,i) => { const dd3 = color(d); dd3.input.style = "width:35%;margin-right: 0.5em; margin-left: 1.0em;"; dd3.output.style = "width:50%;margin-right: 1.0em; margin-left: 0.5em;"; return dd3; } const nameInput = (d,i) => { const dd3 = text(d); dd3.input.style = "width:90%;margin-right: 1.0em; margin-left: 1.0em; text-align: right; border: none; border-bottom: 0.5px solid lightgray;"; return dd3; } const playerInput = (d,i) => { const dd3 = text(d); dd3.input.style = "width:83%; margin-right: 1.0em; margin-left: 1.0em; text-align: right; border: none; border-bottom: 0.5px solid lightgray;"; return dd3; } let exception1 = []; let exception2 = []; data.map((d,i) => { if (d.player!=login) { exception2.push(i); } else { exception1.push({row:i, cell:[1,2], val:false}); } }) return tableInput({ rc:[ [25,'player', 'Player', 'input', playerInput], [45,'name', 'Guild', 'input', nameInput], [25,'color', 'Color', 'input', colorInput] ], defaultRowValue:{player: "", name: "", color: "#ffffff"}, value: data, disabled: {player:true, name:true, color:true}, title:'Table of guilds', description:"Find the row with your name and enter a name for your guild and choose a color to represent it. If you don't intend to play, you could click the cross button to remove your name from this table and your profile will be destroyed soon after log out.", action:{remove:true}, disabledException : exception1, actionException:exception2 }) }35:T7f9,showProfile = (user) => { let profile = user.providerData[0]; const form = html` ` form.querySelector('input[name="change_name"]').onclick = () => { console.log('change name'); var newName = form.querySelector('input[name="displayed_name"]').value updateDisplayName(newName); console.log('name has been changed'); }; document.querySelector('div[name="UserProfile"]').append(form); if (profile.displayName==null) { const comment = html`My poor friend, you have no name! The profile wich you used to sign-in have no name filled in. It would be better for you to give a name to your user profile to play with us.` document.querySelector('div[name="CommentProfile"]').append(comment); form.querySelector('input[name="displayed_name"]').disabled=false; form.querySelector('input[name="change_name"]').style.visibility='visible'; } }36:[] 2e:{"id":"dc765ede99d116c1","slug":"firebobservable","title":"💥 Firebobservable","thumbnail":"905d394efccf048e861604a037188bd72668e954650d8e27cf483725f6735fbe","access_level":"public","create_time":"$D2021-01-14T19:06:17.764Z","update_time":"$D2021-01-28T19:03:09.340Z","view_time":null,"first_public_time":"$D2021-01-26T09:18:33.782Z","fork":{"id":"c72090ba8cb2a6c7","slug":"serverless-notebooks-with-firebase","title":"🔥 Serverless Notebooks with Firebase","owner":{"id":"ebdd8a722ae381e2","login":"a10k","name":"Alok Pepakayala"}},"stars":0,"starred":false,"owner":{"type":"team","id":"9784867a3e59436b","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":"starter_2024"},"version":1292,"publish_version":1292,"role":null,"authored":false,"authors":[{"type":"individual","id":"c6e84137b8a39d94","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":null}],"members":[{"type":"individual","id":"c6e84137b8a39d94","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"💥 Firebobservable","cells":[{"id":602,"value":"md`# 💥 Firebobservable`","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":629,"value":"html`\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":937,"value":"md`***\n\n## App implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1251,"value":"{ \n firebase.auth().onAuthStateChanged(async function(currentUser) {\n if (currentUser) { \n console.log('AuthStateChanged --> solicitSignOut')\n await solicitSignOut(currentUser); \n }\n }); \n return md`Listen realtime database` \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":821,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":811,"value":"showTableGuild = async (user) => {\n var newGuild = null;\n document.querySelector('div[id=\"guild_config\"]').innerHTML = \"

\"\n \n var data = await firebase.database().ref('/guild').once('value').then(snapshot => {return snapshot.val();})\n if (Object.keys(data).indexOf(user.displayName) == -1){\n await addGuild(user.displayName);\n }\n var guild_data = await firebase.database().ref('/guild').once('value').then(snapshot => {\n return Object.entries(snapshot.val()).map((e) => ( { player:e[0], color:e[1].color, name:e[1].name } ));\n });\n var table = TableGuild(guild_data, user.displayName);\n table.addEventListener('input', updateGuilds);\n document.querySelector('div[id=\"guild_config\"]').append(table);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":796,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":736,"value":"async function solicitSignOut(currentUser) {\n console.log(identifiedUser.displayName + ' --> ' + currentUser.displayName)\n if (currentUser.uid != identifiedUser.uid) {\n mutable identifiedUser = currentUser;\n await showContent(currentUser);\n console.log('content displayed')\n document.querySelector('h3[id=\"welcome\"]').innerText = 'Welcome '+ (currentUser.displayName==null ? '':currentUser.displayName) + ' !';\n document.querySelector('input[id=\"btn_signout\"]').style.visibility = 'visible';\n document.querySelector('label[id=\"lbl_signout\"]').style.visibility = 'visible'; \n console.log('Sign-out button turn into visible')\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":730,"value":"function pollForUIContainer() {\n const uiConfig = { \n signInOptions: [\"google.com\", \"github.com\", \"password\", \"phone\"],\n signInFlow : \"popup\",\n callbacks : { \n signInSuccessWithAuthResult: (authResult, redirectUrl) => false\n }\n }\n if (!document.getElementById(\"firebaseui-auth-container\")) {\n //console.log(`cant find firebaseui-auth-container`)\n setTimeout(pollForUIContainer, 50);\n } else {\n //console.log(`starting for firebaseui-auth-container`)\n const ui = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth());\n ui.start(`#firebaseui-auth-container`, uiConfig);\n console.log(`firebaseui displayed`)\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":639,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":689,"value":"updateDisplayName = (newName) => {\n firebase.auth().currentUser\n .updateProfile({displayName: newName}).then(function() {\n document.querySelector('input[name=\"displayed_name\"]').disabled=true;\n document.querySelector('input[name=\"change_name\"]').style.visibility='hidden';\n document.querySelector('div[name=\"CommentProfile\"]').innerHTML = '';\n })\n .catch(function(error) {console.log(error.message);});\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"updateGuilds = (e) => {\n //check if user want to play (i.e. is his displayname always in the table ?)\n if(identifiedUser) {\n var players = e.currentTarget.value.map(d => d.player);\n if (players.indexOf(identifiedUser.displayName) == -1){\n mutable wantToPlay = false;\n }\n }\n var newData = ({});\n e.currentTarget.value.map((d) => newData[d.player]={color:d.color, name:d.name})\n firebase.database().ref('/guild').set(newData, (error) => {\n if (error) {\n // The update failed...\n } else {\n // Data updated successfully!\n }\n });\n console.log('database \"guilds\" variable updated');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":945,"value":"addGuild = (newPlayer) => {\n //var newGuildKey = firebase.database().ref().child('guild').push().key;\n var newGuild = {};\n newGuild[newPlayer] = {color: \"#ffffff\", name: \"\"};\n firebase.database().ref('/guild').update(newGuild, (error) => {\n if (error) {\n // The update failed...\n } else {\n // Data updated successfully!\n console.log(newPlayer + ' has been added...');\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1025,"value":"killUser = () => {\n identifiedUser.delete().then(function() {\n // User deleted.\n }).catch(function(error) {\n // An error happened.\n }); \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1037,"value":"mutable wantToPlay = true","pinned":false,"hidden":false,"mode":"ojs"},{"id":1076,"value":"mutable identifiedUser = ({})","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"md`### Firebase config and objects\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"firebase = {\n if (!window.firebase) { // Initialize Firebase once\n window.firebase = await require.alias({\n \"@firebase/app\": `https://www.gstatic.com/firebasejs/7.21.0/firebase-app.js`,\n \"@firebase/auth\": `https://www.gstatic.com/firebasejs/7.21.0/firebase-auth.js`,\n \"@firebase/database\": `https://www.gstatic.com/firebasejs/7.21.0/firebase-database.js`\n })(\n \"@firebase/app\", \n \"@firebase/auth\", \n \"@firebase/database\"\n )\n window.firebase.initializeApp(firebaseConfig)\n window.firebase.auth().useDeviceLanguage();\n }\n return window.firebase\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"firebaseui = {\n var script = document.createElement('script');\n script.src = \"https://www.gstatic.com/firebasejs/ui/4.7.1/firebase-ui-auth.js\";\n document.getElementsByTagName('head')[0].appendChild(script);\n return new Promise((resolve) => {\n function pollForFirebaseUI() {\n if (!window.firebaseui) {\n setTimeout(pollForFirebaseUI, 50);\n } else {\n resolve(window.firebaseui);\n }\n }\n pollForFirebaseUI();\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"firebaseConfig = ({\n apiKey: \"AIzaSyAtxjDy8X4yy7UEz8nCJ4auxCAfQfa3xuY\",\n authDomain: \"observirebase-911c1.firebaseapp.com\",\n projectId: \"observirebase-911c1\",\n storageBucket: \"observirebase-911c1.appspot.com\",\n messagingSenderId: \"209367509829\",\n appId: \"1:209367509829:web:18afc381164264fc9d6c2c\",\n measurementId: \"G-3LPG1XFK3H\",\n databaseURL: \"https://observirebase-911c1-default-rtdb.firebaseio.com/\"\n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":618,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":611,"value":"import {tableInput} from \"@linard-y/table-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":615,"value":"import {select, color, slider, radio, checkbox, text, date, time} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"d3=require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}} 2f:"$2e:body"