From 0448f011bec79b0fac66ad67b1206c5420fc1619 Mon Sep 17 00:00:00 2001 From: Ragaxus Date: Thu, 24 Dec 2020 18:15:32 -0600 Subject: [PATCH] Style import failures --- import-test.html | 48 +++++++++++++++++ javascript/setup.js | 115 +++++++++++++++++++++++------------------ stylesheets/styles.css | 51 ++++++++++++++++++ 3 files changed, 165 insertions(+), 49 deletions(-) create mode 100644 import-test.html diff --git a/import-test.html b/import-test.html new file mode 100644 index 0000000..8ea3307 --- /dev/null +++ b/import-test.html @@ -0,0 +1,48 @@ + + + + + + + + \ No newline at end of file diff --git a/javascript/setup.js b/javascript/setup.js index f37f89d..5dc8c5f 100644 --- a/javascript/setup.js +++ b/javascript/setup.js @@ -86,7 +86,7 @@ function renderAvailableCards(isCondensed) { function renderGoodRole(cardInfo, i, isCondensed) { const card = CardManager.createCard(cardInfo); if (card.custom) { - renderCustomRole(cardInfo, "custom-roles"); + document.getElementById("custom-roles").appendChild(renderCustomRole(cardInfo)); } document.getElementById("roles").appendChild(CardManager.constructModalRoleElement(card)); @@ -119,7 +119,7 @@ function renderGoodRole(cardInfo, i, isCondensed) { function renderEvilRole(cardInfo, i, isCondensed) { const card = CardManager.createCard(cardInfo); if (card.custom) { - renderCustomRole(cardInfo, "custom-roles"); + document.getElementById("custom-roles").appendChild(renderCustomRole(cardInfo)); } document.getElementById("roles").appendChild(CardManager.constructModalRoleElement(card)); @@ -204,25 +204,23 @@ function addImportFileToRoles (e) { } //add roles - let succesfullyAddedRoleInfo = []; + let succesfullyAddedRoles = []; let rolesThatFailedToImport = []; let expectedKeys = ["role", "description", "team", "isTypeOfWerewolf"]; - let roleIndex; newRoles.forEach(newRole => { newRole.custom = true; newRole.saved = true; let newRoleValidationResult = validateNewRole(newRole, expectedKeys); if (newRoleValidationResult.isValid) { - roleIndex = cards.push(newRole) - 1; - succesfullyAddedRoleInfo.push({role: newRole, roleIndex: roleIndex}); + succesfullyAddedRoles.push(newRole); } else { rolesThatFailedToImport.push(newRoleValidationResult); } }); + cards.push(...succesfullyAddedRoles); renderAvailableCards(document.getElementById("role-view-changer-list").classList.contains("selected")); // always save imported roles - let succesfullyAddedRoles = succesfullyAddedRoleInfo.map(roleInfo => roleInfo.role); let existingRoles = localStorage.getItem("play-werewolf-custom-roles"); if (existingRoles !== null) { let rolesArray; @@ -239,7 +237,7 @@ function addImportFileToRoles (e) { localStorage.setItem("play-werewolf-custom-roles", JSON.stringify(succesfullyAddedRoles)); } updateCustomRoleModal(); - updateImportRolesModal(succesfullyAddedRoleInfo, rolesThatFailedToImport); + updateImportRolesModal(succesfullyAddedRoles, rolesThatFailedToImport); displayModal("import-custom-roles-result-modal", undefined); } @@ -265,20 +263,69 @@ function validateNewRole(newCard,expectedKeys) { } function updateCustomRoleModal() { - document.getElementById("custom-roles").innerHTML = ""; + const customRoles = document.getElementById("custom-roles"); + customRoles.innerHTML = ""; for (let i = 0; i < cards.length; i++){ if (cards[i].custom) { - renderCustomRole(cards[i], "custom-roles"); + customRoles.appendChild(renderCustomRole(cards[i])); } } } function updateImportRolesModal(succesfullyAddedRoles, rolesThatFailedToImport) { - document.getElementById("import-successes-subheader").innerHTML = succesfullyAddedRoles.length + " roles sucessfully imported"; - document.getElementById("import-successes-role-list").innerHTML = ""; - succesfullyAddedRoles.forEach(roleInfo => { - renderCustomRole(roleInfo.role, "import-successes-role-list"); + let numAddedRoles = succesfullyAddedRoles.length; + if (numAddedRoles > 0) { + let successSubheader = (numAddedRoles == 1) ? "role successfully imported" : "roles successfully imported"; + document.getElementById("import-successes-subheader").innerHTML = numAddedRoles + " " + successSubheader; + const successfulRoleList = document.getElementById("import-successes-role-list"); + successfulRoleList.innerHTML = ""; + succesfullyAddedRoles.forEach(role => { + successfulRoleList.appendChild(renderCustomRole(role)); + }); + } + + let numFailedRoles = rolesThatFailedToImport.length; + if (numFailedRoles > 0) { + let failureSubheader = (numFailedRoles == 1) ? "role failed to import" : "roles failed to import"; + document.getElementById("import-failures-subheader").innerHTML = numFailedRoles + " " + failureSubheader; + document.getElementById("import-failures-issue-list").innerHTML = ""; + rolesThatFailedToImport.forEach(failureInfo => { + document.getElementById("import-failures-issue-list").appendChild(renderImportFailure(failureInfo)); + }); + } +} + +function renderImportFailure(failureInfo) { + let importFailure = document.createElement("div"); + importFailure.classList.add("import-failure"); + + let failureLabelContainer = document.createElement("div"); + failureLabelContainer.classList.add("import-failure-label"); + let triangle = document.createElement("div"); + triangle.classList.add("triangle"); + let roleName = document.createElement("p"); + roleName.innerText = failureInfo.role.role; + failureLabelContainer.appendChild(triangle); + failureLabelContainer.appendChild(roleName); + + let issueDescriptionContainer = document.createElement("div"); + issueDescriptionContainer.classList.add("import-failure-data"); + let levelSeverityOrder = ["warning", "error"]; + let levelIdx = 0; + let issueDescriptionList = document.createElement("ul"); + failureInfo.issues.forEach(issue => { + let description = document.createElement("li"); + description.innerText = issue.description; + let thisIssueLevelIdx = levelSeverityOrder.indexOf(issue.level); + if (thisIssueLevelIdx > levelIdx) { levelIdx = thisIssueLevelIdx; } + issueDescriptionList.appendChild(description); }); + issueDescriptionContainer.appendChild(issueDescriptionList); + + importFailure.classList.add(levelSeverityOrder[levelIdx]); + importFailure.appendChild(failureLabelContainer); + importFailure.appendChild(issueDescriptionContainer); + return importFailure; } function readInUserCustomRoles() { @@ -291,7 +338,7 @@ function readInUserCustomRoles() { } } -function renderCustomRole(card, destinationId) { +function renderCustomRole(card) { let roleElement = document.createElement("div"); let editRemoveContainer = document.createElement("div"); let editFormDiv = document.createElement("div"); @@ -299,7 +346,6 @@ function renderCustomRole(card, destinationId) { let roleName = document.createElement("p"); let remove = document.createElement("img"); let edit = document.createElement("img"); - //let editForm = buildRoleEditForm(index); let editRoleTemplate = document.getElementById("edit-custom-role-template"); let editForm = editRoleTemplate.content.cloneNode(true); @@ -320,18 +366,16 @@ function renderCustomRole(card, destinationId) { roleLabel.appendChild(roleName); roleLabel.appendChild(editRemoveContainer); roleElement.appendChild(roleLabel); - //roleElement.appendChild(editForm); const shadowRoot = editFormDiv.attachShadow({mode: 'open'}); shadowRoot.appendChild(editForm); + shadowRoot.getElementById("edit-role-form").addEventListener("submit", function(e) { + updateCustomRole(e, editFormDiv, card); + }); editFormDiv.style.display = "none"; roleElement.appendChild(editFormDiv); - document.getElementById(destinationId).appendChild(roleElement); - - shadowRoot.getElementById("edit-role-form").addEventListener("submit", function(e) { - updateCustomRole(e, editFormDiv, card); - }); + return roleElement; } function toggleEditForm(event, formDiv, card) { @@ -356,33 +400,6 @@ function toggleViewChanger(isCondensed) { renderAvailableCards(isCondensed); } -function buildRoleEditForm(index) { - let infoForm = document.createElement("div"); - infoForm.style.display = "none"; - infoForm.setAttribute("id", "edit-form-" + index); - infoForm.innerHTML = - "
" + - "" + - "" + - "" + - "" + - "
" + - "" + - "" + - "
" + - "
" + - "" + - "" + - "
" + - "

" + - "" + - "
"; - return infoForm; -} - function populateEditRoleForm(formDiv, card) { formDiv.shadowRoot.querySelector("#edit-role-desc").value = card.description; formDiv.shadowRoot.querySelector("#edit-role-team").value = card.team; diff --git a/stylesheets/styles.css b/stylesheets/styles.css index dc674c9..88fa8ab 100644 --- a/stylesheets/styles.css +++ b/stylesheets/styles.css @@ -1188,6 +1188,57 @@ label { padding: 0.5em; } +.import-failure { + display: flex; + width: 100%; + flex-direction: row; + justify-content: space-between; + background-color: black; + border-radius: 5px; + margin: 0.3em; +} + +.import-failure-label { + display: flex; + flex-direction: row; + width: 33%; +} + +.import-failure-label p { + text-overflow: ellipsis; + overflow-x: hidden; + white-space: nowrap; + max-width: 20em; +} + +.import-failure-data { + display: flex; + flex: 1 1 auto; + flex-direction: row; + justify-content: center; +} + +.import-failure-data ul { + max-width: 40em; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 8px; + float: left; + position: relative; + z-index: 1; + } + +div.import-failure.warning .triangle { + border-color: #dbec3b transparent transparent #dbec3b; +} + +div.import-failure.error .triangle { + border-color: #c7360a transparent transparent #c7360a; +} /* lobby */