Skip to content

Commit

Permalink
Merge pull request #33 from ZyrenthDevelopment/main
Browse files Browse the repository at this point in the history
frontend updates pt.5
  • Loading branch information
Alexejhero authored Jun 10, 2024
2 parents d790e5b + ef2fae7 commit ffc1472
Show file tree
Hide file tree
Showing 5 changed files with 128 additions and 106 deletions.
22 changes: 15 additions & 7 deletions frontend/www/css/modals.css
Original file line number Diff line number Diff line change
Expand Up @@ -20,16 +20,10 @@

.modal {
position: relative;
padding: 20px;

background-color: #111;
border: 1px solid #ffffff1A;

display: flex;
flex-direction: row;
/* justify-content: center; */
gap: 20px;

border-radius: 20px;
font-size: 1rem;

Expand All @@ -42,8 +36,21 @@

-webkit-user-select: none;
user-select: none;
}

.modal-inside-wrapper {
width: 100%;
height: auto;

padding: 20px;

display: flex;
flex-direction: row;
/* justify-content: center; */
gap: 20px;

max-height: 80vh;

overflow-y: auto;
}

Expand Down Expand Up @@ -241,7 +248,8 @@ form label:not([aria-required]) {
}

.modal,
.modal-overlay {
.modal-overlay,
.modal-inside-wrapper {
flex-direction: column;
align-items: center;

Expand Down
196 changes: 99 additions & 97 deletions frontend/www/html/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,118 +9,120 @@
</head>

<body>
<% if (htmlWebpackPlugin.options.title == "Config") { %>
<% if (htmlWebpackPlugin.options.title=="Config" ) { %>
<h1>This extension is not configurable.</h1>
<% } else { %>
<main>
<div class="onboarding" id="onboarding">
<h2>Welcome to Swarm Control&trade;</h2>

<p>Please authenticate with Twitch in order to continue.</p>
<button id="twitch-login" class="button btn-primary">Authenticate</button>
</div>

<!-- Purchase modal -->
<div class="modal-wrapper" id="modal-wrapper" style="opacity: 0; pointer-events: none;">
<div class="modal">
<img id="modal-image" class="modal-image" src="">
<div class="modal-descriptors">
<!-- Title and description -->
<h2 id="modal-title"></h2>
<p id="modal-description"></p>
<div id="modal-price" style="display: flex; font-size:large; text-emphasis: bold;">
<img src="img/bits.png" class="bits-image">
<p id="modal-bits">X</p>
</div>

<!-- Checkbox, input and dropdown options -->
<div id="modal-options">
<form id="modal-options-form" action="#"></form>
</div>
<% } else { %>
<main>
<div class="onboarding" id="onboarding">
<h2>Welcome to Swarm Control&trade;</h2>

<!-- Buy and cancel buttons -->
<div class="modal-buttons">
<button id="modal-confirm" class="button btn-success">Redeem</button>
<button id="modal-cancel" class="button btn-danger">Cancel</button>
</div>
<p>Please authenticate with Twitch in order to continue.</p>
<button id="twitch-login" class="button btn-primary">Authenticate</button>
</div>

<!-- Modal processing overlay -->
<div class="modal-overlay modal-processing" id="modal-processing"
style="opacity: 0; pointer-events: none;">
<div class="modal-spinner-container">
<div class="spinner"></div>
<p>Processing your request...</p>
</div>
<!-- Purchase modal -->
<div class="modal-wrapper" id="modal-wrapper" style="opacity: 0; pointer-events: none;">
<div class="modal">
<div class="modal-inside-wrapper">
<img id="modal-image" class="modal-image" src="">
<div class="modal-descriptors">
<!-- Title and description -->
<h2 id="modal-title"></h2>
<p id="modal-description"></p>
<div id="modal-price" style="display: flex; font-size:large; text-emphasis: bold;">
<img src="img/bits.png" class="bits-image">
<p id="modal-bits">X</p>
</div>

<!-- Checkbox, input and dropdown options -->
<div id="modal-options">
<form id="modal-options-form" action="#"></form>
</div>

<!-- Buy and cancel buttons -->
<div class="modal-buttons">
<button id="modal-confirm" class="button btn-success">Redeem</button>
<button id="modal-cancel" class="button btn-danger">Cancel</button>
</div>
</div>
</div>

<p id="modal-processing-description"></p>
<!-- Modal processing overlay -->
<div class="modal-overlay modal-processing" id="modal-processing"
style="opacity: 0; pointer-events: none;">
<div class="modal-spinner-container">
<div class="spinner"></div>
<p>Processing your request...</p>
</div>

<!-- Close button -->
<div class="modal-buttons">
<button id="modal-processing-close" class="button btn-danger">Close</button>
</div>
</div>
<p id="modal-processing-description"></p>

<!-- Modal error overlay -->
<div class="modal-overlay" id="modal-error" style="opacity: 0; pointer-events: none;">
<p class="modal-error-x">&#x2715;</p>
<div class="modal-descriptors">
<h2 id="modal-error-title">An error has occurred.</h2>
<p id="modal-error-description"></p>
<!-- Close button -->
<div class="modal-buttons">
<button id="modal-processing-close" class="button btn-danger">Close</button>
</div>
</div>

<!-- Modal error overlay -->
<div class="modal-overlay" id="modal-error" style="opacity: 0; pointer-events: none;">
<p class="modal-error-x">&#x2715;</p>
<div class="modal-descriptors">
<h2 id="modal-error-title">An error has occurred.</h2>
<p id="modal-error-description"></p>

<!-- Close button -->
<div class="modal-buttons">
<button id="modal-error-close" class="button btn-danger">Close</button>
</div>
</div>
</div>

<!-- Close button -->
<div class="modal-buttons">
<button id="modal-error-close" class="button btn-danger">Close</button>
<!-- Modal success overlay -->
<div class="modal-overlay" id="modal-success" style="opacity: 0; pointer-events: none;">
<p class="modal-success-x">&#x2714;</p>
<div class="modal-descriptors">
<h2 id="modal-success-title"></h2>
<p id="modal-success-description"></p>

<!-- Close button -->
<div class="modal-buttons">
<button id="modal-success-close" class="button btn-danger">Close</button>
</div>
</div>
</div>
</div>
</div>

<!-- Modal success overlay -->
<div class="modal-overlay" id="modal-success" style="opacity: 0; pointer-events: none;">
<p class="modal-success-x">&#x2714;</p>
<div class="modal-descriptors">
<h2 id="modal-success-title"></h2>
<p id="modal-success-description"></p>

<!-- Close button -->
<div class="modal-buttons">
<button id="modal-success-close" class="button btn-danger">Close</button>
</div>
<div id="items">
<div class="redeems-content-spinner">
<div class="spinner"></div>
<p>Loading content...</p>
</div>
</div>
</div>
</div>
</main>

<div id="options-templates" style="display:none;">
<div id="modal-dropdown">
<label for="modal-dropdown-input">Choose one</label>
<select id="modal-dropdown-input"></select>
</div>

<div id="items">
<div class="redeems-content-spinner">
<div class="spinner"></div>
<p>Loading content...</p>
<div id="modal-text">
<label for="modal-text-input" id="modal-text-label">Enter text</label>
<input id="modal-text-input" type="text" placeholder="Enter text here">
</div>

<div id="modal-number">
<label for="modal-number-input" id="modal-number-label">Enter number</label>
<input id="modal-number-input" type="text" placeholder="Enter number here">
</div>

<div id="modal-toggle">
<label for="modal-toggle-input" id="modal-toggle-label">Enabled?</label>
<input id="modal-toggle-input" type="checkbox">
</div>
</div>
</div>
</main>

<div id="options-templates" style="display:none;">
<div id="modal-dropdown">
<label for="modal-dropdown-input">Choose one</label>
<select id="modal-dropdown-input"></select>
</div>

<div id="modal-text">
<label for="modal-text-input" id="modal-text-label">Enter text</label>
<input id="modal-text-input" type="text" placeholder="Enter text here">
</div>

<div id="modal-number">
<label for="modal-number-input" id="modal-number-label">Enter number</label>
<input id="modal-number-input" type="text" placeholder="Enter number here">
</div>

<div id="modal-toggle">
<label for="modal-toggle-input" id="modal-toggle-label">Enabled?</label>
<input id="modal-toggle-input" type="checkbox">
</div>
</div>
<% } %>
<% } %>
</body>

</html>
</html>
1 change: 1 addition & 0 deletions frontend/www/src/modules/auth.ts
Original file line number Diff line number Diff line change
Expand Up @@ -97,5 +97,6 @@ Twitch.ext.bits.onTransactionCancelled(async () => {
],
}).then();
}
hideProcessingModal();
showErrorModal("Transaction cancelled.", `Transaction ID: ${transactionToken}`);
});
7 changes: 7 additions & 0 deletions frontend/www/src/modules/modal.ts
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,13 @@ document.addEventListener("DOMContentLoaded", () => {
e.preventDefault();
setCartArgsFromForm(e.target as HTMLFormElement);
};

$modalWrapper.onclick = (e) => {
if (e.target !== $modalWrapper) return;
if ($modalProcessing.style.opacity == "1") return;

closeModal();
};
});

export async function openModal(redeem: Redeem | null) {
Expand Down
8 changes: 6 additions & 2 deletions frontend/www/src/modules/redeems.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { openModal, showErrorModal } from "./modal";
import { hideProcessingModal, openModal, showErrorModal } from "./modal";
import { getConfig } from "../util/config";

const $mainContainer = document.getElementsByTagName("main")!;
const $redeemContainer = document.getElementById("items")!;
const $modalProcessing = document.getElementById("modal-processing")!;

document.addEventListener("DOMContentLoaded", () => {
renderRedeemButtons().then();
Expand Down Expand Up @@ -62,5 +63,8 @@ export async function renderRedeemButtons() {
$redeemContainer.appendChild(item);
}

showErrorModal("New update!", "The items have been updated, because of this you need to reopen this modal.");
if ($modalProcessing.style.opacity !== "1") {
hideProcessingModal();
showErrorModal("New update!", "The items have been updated, because of this you need to reopen this modal.");
}
}

0 comments on commit ffc1472

Please sign in to comment.