30:T41d,auth =html`

`31:[{"id":"f3126ec3905909e6b880d9b94891ff070304dd28ca9db34445b83d8928f8bae1a90a6ff0603d38432390d15d63d7abea89bd1b87cce71d554dde58683b0a4dbd","href":"https://static.observableusercontent.com/files/f3126ec3905909e6b880d9b94891ff070304dd28ca9db34445b83d8928f8bae1a90a6ff0603d38432390d15d63d7abea89bd1b87cce71d554dde58683b0a4dbd","name":"RPG (1).png","type":"image/png","lastModified":1619383072325.372,"size":736347}] 2e:{"title":"To Do RPG","cells":[{"id":0,"value":"md`# To Do RPG`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"logo = FileAttachment(\"RPG (1).png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`\n## Introduction\nWelcome to **To Do RPG**! This notebook is an Observable app created to allow you to keep track of tasks, organize your thinking, and defeat monsters to get loot! \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"md `## Step One: Log In\nBefore we can continue, we need you to log in! This way we can store your to-do's as well as keep track of your hero!\nIf you already have an account, please log in, otherwise sign up for an account.\nIf you don't see a login form here, you're already logged in!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"logout = html`\n

\n \n\n

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"md`## Step Two: Create some To Dos! \nNow that you are logged in, let's create some TO DO list items! This will be come much more feature filled as this develops!\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"todo = html`\n

My To Do List

\n\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"md`\n## Step Three: Create Your Character!\nIf you see empty fields below, then you haven't created a character yet! Add a name right now. (More coming soon!) \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"character = html`\n

\n Name: \n \n

\n Update Character: \n

\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"md`# Code Land Below This Line \n---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"{\n userbase.init({\n appId: \"ef438a27-2ec2-4f63-a5fe-b5115fd626d8\"\n }).then((session)=>{\n console.log(\"init called. session:\", session);\n if(session.user){\n showToDos(session.user)\n showCharacter(session.user)\n } else {\n showAuth()\n }\n });\n // bindEvents\n bindEvents();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"bindEvents = ()=>{\n document.querySelector(\"#form-login\").addEventListener(\"submit\", handleLogin);\n document.querySelector(\"#form-register\").addEventListener(\"submit\", handleRegister);\n document.querySelector(\"#signout-button\").addEventListener(\"click\", handleSignout);\n document.querySelector(\"#todo-list\").addEventListener(\"click\", addItem);\n document.querySelector(\"#todo-list\").addEventListener(\"click\", removeItem);\n document.querySelector(\"#character-update\").addEventListener(\"click\", updateCharacter)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"updateCharacter = ()=>{\n console.log(\"updateCharacter called. \")\n const charField = document.getElementById(\"character-name\");\n\n if(charField.dataset.itemid != \"\"){\n // we have an item!\n console.log(\"we have an item!\")\n userbase.updateItem({\n databaseName: config.characterDataBase,\n item: {\n type: 'character-name',\n value: charField.value\n },\n itemId: charField.dataset.itemid\n }).then((res)=>{\n console.log(\"res updated:\", res)\n }).catch((e) => console.error(e))\n } else {\n // create an item \n console.log(\"create an item\")\n userbase.insertItem({\n databaseName: config.characterDataBase,\n item: { \n type: 'character-name',\n value: charField.value\n }\n }).then((res) => {\n // item inserted\n console.log(\"result:\",res)\n }).catch((e) => console.error(e))\n }\n \n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"removeItem = (e)=>{\n console.log(\"removeItem: e.target:\", e.target)\n if(!e.target.classList.contains(\"del-item\")){\n return\n }\n const itmID = e.target.closest(\".item-element\").dataset.id; \n \n userbase.deleteItem({ \n databaseName: config.todoDataBase , \n itemId: itmID \n })\n .catch((e) => document.getElementById('add-item-error').innerHTML = e) \n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"handleSignout = (e)=>{\n e.preventDefault();\n userbase.signOut()\n .then(() => showAuth())\n .catch((e) => document.getElementById('signout-error').innerText = e)\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"showCharacter = ()=>{\n console.log('showCharacter');\n document.querySelector('.character').style.display = \"block\";\n userbase.openDatabase({\n databaseName: config.characterDataBase,\n changeHandler: characterChangeHandler\n })\n .catch((e)=> {\n console.log(\"showCharacter openDatabase error:\", e)\n document.getElementById(\"character-db-error\").innerText = e\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"characterChangeHandler = (items)=>{\n console.log(\"characterChangeHandler, items:\", items);\n renderCharacter(items);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"renderCharacter = (items)=>{\n console.log(\"renderCharacter, items:\", items);\n const charList = document.querySelector(\".character\")\n \n if(items.length > 0){\n items.forEach((itm,idx,arr)=>{\n console.log(\"render itm:\", itm)\n if(itm.item.type == \"character-name\"){\n let charField = document.getElementById(\"character-name\");\n charField.dataset.itemid = itm.itemId;\n charField.value = itm.item.value\n }\n }) \n }\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"showToDos = ()=>{\n console.log('showToDos')\n document.querySelector('.todo').style.display='block';\n document.querySelector('.auth').style.display='none';\n document.querySelector('.signout').style.display='block';\n showDatabases();\n \n document.querySelector('#todo-progress').style.display=\"block\";\n userbase.openDatabase({ databaseName: config.todoDataBase, changeHandler })\n .catch((e) => document.getElementById('todo-db-error').innerText = e)\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"changeHandler = (items)=>{\n document.querySelector(\"#todo-progress\").style.display = 'none';\n console.log(\"changeHandler: items\", items)\n renderToDos(items)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"renderToDos = (items)=>{\n // clear to do list\n const list = document.querySelector('#todo-list');\n const addItem = `\n

\n \n \n

`;\n const itemErr = `

`\n \n console.log(\"renderToDos - list\", items)\n const itemsList = items.reduce((response,itm)=>{\n return response + `

[${itm.item.todo}]

`\n },'')\n \n list.innerHTML = [addItem,itemErr,itemsList].join(\"\");\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"addItem = (e)=> {\n if(!e.target.classList.contains(\"add-item-button\")){\n return;\n }\n \n const valueEl = document.querySelector(\".add-item-value\")\n const value = valueEl.value;\n userbase.insertItem({ \n databaseName: config.todoDataBase, \n item: { \n 'todo': value \n }\n })\n .then(() => valueEl.value = '')\n .catch((e) => document.getElementById('add-item-error').innerHTML = e)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"showDatabases = () =>{\n userbase.getDatabases().then((databases) => {\n console.log(\"showDatabases:\", databases)\n}).catch((e) => console.error(e))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"showAuth = () =>{\n console.log(\"showAuth\")\n //document.getElementById('todo-view').style.display = 'none'\n document.querySelector('.auth').style.display = 'block';\n document.querySelector('.todo').style.display = 'none';\n document.querySelector('.character').style.display = 'none';\n document.querySelector('.signout').style.display = 'none';\n document.getElementById('login-username').value = ''\n document.getElementById('login-password').value = ''\n document.getElementById('login-error').innerText = ''\n document.getElementById('register-username').value = ''\n document.getElementById('register-password').value = ''\n document.getElementById('register-error').innerText = ''\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"handleLogin = (e) =>{\n e.preventDefault(); // stop the form default behavior\n const username = document.querySelector(\"#login-username\").value;\n const password = document.querySelector(\"#login-password\").value;\n userbase.signIn({\n username,\n password,\n rememberMe: 'local'\n })\n .then((user) => {\n showToDos(user.username)\n showCharacter(user.username)\n })\n .catch((e) => document.getElementById('login-error').innerHTML = e)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"handleRegister= (e) => {\n e.preventDefault();\n const username = document.querySelector('#register-username').value;\n const password = document.querySelector('#register-password').value;\n\n userbase.signUp({ username, password, rememberMe: 'local' })\n .then((user) => {\n showToDos(user.username);\n showCharacter(user.username)\n })\n .catch((e) => document.getElementById('register-error').innerHTML = e)\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"config = ({\n todoDataBase: \"todo\",\n rpgDataBase: \"rpg\",\n characterDataBase: \"character\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"userbase = require(\"https://sdk.userbase.com/2/userbase.js\").catch(() => window[\"userbase\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"md`# Release Notes\n** Current version: v0.03 **\n* **v0.03** -\n * Got TODO functionality working\n* **v0.02** -\n * Updated login HTML\n * added login and register javascript\n * added TODO panel placeholder\n* **v0.01** - \n * Created Logo\n * Introduction text\n * initial userbase integration\n\n`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}