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 */