From 23a4feac74def4d02c50ad73c31e34584ad8df09 Mon Sep 17 00:00:00 2001 From: SpikeHD Date: Mon, 25 Apr 2022 21:00:57 -0700 Subject: [PATCH] begin layout --- resources/banner_creator/banner_creator.html | 34 +++++++++++++++++++- resources/banner_creator/js/banner_data.js | 17 +++++++++- resources/banner_creator/js/banner_onload.js | 2 +- resources/banner_creator/js/helpers.js | 5 ++- resources/banner_creator/style/banner.css | 25 +++++++++++++- 5 files changed, 76 insertions(+), 7 deletions(-) diff --git a/resources/banner_creator/banner_creator.html b/resources/banner_creator/banner_creator.html index 6fe6474..f02ba5d 100644 --- a/resources/banner_creator/banner_creator.html +++ b/resources/banner_creator/banner_creator.html @@ -10,9 +10,41 @@
Select a banner to use as a base: -
+
+
+ Select the main character + +
+
+ Select secondary characters + +
+
+
+ Banner Type + +
+
+ Banner Cost Item + +
+
+ Banner Start + +
+
+ Banner End + +
+
+
diff --git a/resources/banner_creator/js/banner_data.js b/resources/banner_creator/js/banner_data.js index 7d53e06..15f36d3 100644 --- a/resources/banner_creator/js/banner_data.js +++ b/resources/banner_creator/js/banner_data.js @@ -1,3 +1,18 @@ async function fillDefaultBanners() { - getBannerData() + await getBannerData() + + const selectList = document.getElementById('bannerDefaultSelect') + + for (const banner in bannerObj) { + const data = bannerObj[banner] + + const option = document.createElement('option') + option.value = banner + option.innerText = banner + selectList.appendChild(option) + } +} + +async function handleBaseBannerChange() { + } \ No newline at end of file diff --git a/resources/banner_creator/js/banner_onload.js b/resources/banner_creator/js/banner_onload.js index cb448a1..34d32bc 100644 --- a/resources/banner_creator/js/banner_onload.js +++ b/resources/banner_creator/js/banner_onload.js @@ -1,5 +1,5 @@ document.addEventListener('DOMContentLoaded', async () => { - fillDefaultBanners() + await fillDefaultBanners() console.log('loaded') }) \ No newline at end of file diff --git a/resources/banner_creator/js/helpers.js b/resources/banner_creator/js/helpers.js index 54c25fd..64599be 100644 --- a/resources/banner_creator/js/helpers.js +++ b/resources/banner_creator/js/helpers.js @@ -1,11 +1,12 @@ Neutralino.init() const filesystem = Neutralino.filesystem +let bannerObj async function getBannerData() { const bannerData = await filesystem.readFile('resources/banner_creator/data/banners.txt') const lines = bannerData.split('\n') - let bannerObj = {} + bannerObj = {} for (const line of lines) { const values = line.split(' ') @@ -17,6 +18,4 @@ async function getBannerData() { fourStars: values.slice(3) } } - - console.log(bannerObj) } \ No newline at end of file diff --git a/resources/banner_creator/style/banner.css b/resources/banner_creator/style/banner.css index b6ec564..0be5550 100644 --- a/resources/banner_creator/style/banner.css +++ b/resources/banner_creator/style/banner.css @@ -14,13 +14,36 @@ body { flex-direction: column } +#bannerEditor span, #base span { display: block; } + +#bannerEditor select, #base select { display: block; width: 60%; height: 30px; margin: 10px auto; -} \ No newline at end of file +} + +#bannerEditor { + display: flex; + flex-wrap: wrap; + flex: 1 0 50%; + justify-content: space-around; +} + +#bannerEditor div { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + width: 100%; + flex: 1 0 50%; +} + +#bannerConfig { + height: 100%; +}