From f29d0b76ddd202d522db61095cf3b88d9a745787 Mon Sep 17 00:00:00 2001 From: Shauna Keating <59394696+shkeating@users.noreply.github.com> Date: Thu, 14 Nov 2024 21:34:39 +0000 Subject: [PATCH 01/22] updates readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 1ea09f8..a484bdd 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ hackrew is a framework for making character creator/dressup game applets a la [p ### Step 1: start a web server -The applet won't run correctly unless it's launched from a server. To launch it from your own machine, cd into the hackrew folder, run ./serve.sh (you'll need [Python 3 installed on your machine](https://www.python.org/downloads/)) from the command line and navigate to [http://localhost:8000/](http://localhost:8000/) in your browser. Once you're done developing your character creator, you can host it on a remote server, like Neocities or Github Pages. +The applet won't run correctly unless it's launched from a server. To launch it from your own machine, cd into the hackrew folder, run `./serve.sh` (you'll need [Python 3 installed on your machine](https://www.python.org/downloads/)) from the command line and navigate to [http://localhost:8000/](http://localhost:8000/) in your browser. Once you're done developing your character creator, you can host it on a remote server, like Neocities or Github Pages. ### Step 2: specify your parts The character creator applet's visual components are comprised of "parts" (ex: "body", "ears", "tail", "accessories"), which have varieties called "items" (ex: the items for ears are "small" and "big"). Each item is represented by a .png image with a transparent background. The applet allows the user to create different characters by layering different item .pngs on top of each other. From 948041da864281094bb3fc0a53c07518abb86ee4 Mon Sep 17 00:00:00 2001 From: Shauna Keating <59394696+shkeating@users.noreply.github.com> Date: Sun, 17 Nov 2024 17:19:27 +0000 Subject: [PATCH 02/22] edits attribution text --- index.html | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/index.html b/index.html index b1d4f72..4c725ec 100644 --- a/index.html +++ b/index.html @@ -11,13 +11,9 @@

- I made this applet using my open-source character creator + I made this applet using the open-source character creator framework, hackrew.

-

- If you're interested in making your own, I suggest - checking out the linked Github repository for documentation. -

From c30b5182b361874487944f5d2a14b558a44783d7 Mon Sep 17 00:00:00 2001 From: Shauna Keating <59394696+shkeating@users.noreply.github.com> Date: Sun, 17 Nov 2024 17:21:43 +0000 Subject: [PATCH 03/22] adds sr only class and adds opens in new window info for those users --- index.css | 14 ++++++++++++++ index.html | 2 +- 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/index.css b/index.css index 631a1f7..c3c3703 100644 --- a/index.css +++ b/index.css @@ -42,6 +42,20 @@ body { height: 90vh; } +.sr-only { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */ + -webkit-clip-path: inset(50%) !important; + clip-path: inset(50%) !important; /* 2 */ + height: 1px !important; + margin: -1px !important; + overflow: hidden !important; + padding: 0 !important; + position: absolute !important; + width: 1px !important; + white-space: nowrap !important; /* 3 */ +} + .imagemaker { height: 100%; } diff --git a/index.html b/index.html index 4c725ec..388f723 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@

I made this applet using the open-source character creator - framework, hackrew. + framework, hackrew(opens in a new window).

From 7699080947e65c46083e732b15b7365945349af3 Mon Sep 17 00:00:00 2001 From: Shauna Keating <59394696+shkeating@users.noreply.github.com> Date: Sun, 17 Nov 2024 17:22:58 +0000 Subject: [PATCH 04/22] edits attriution text --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 388f723..06cf9cd 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@

- I made this applet using the open-source character creator + This builder is based on the open-source character creator framework, hackrew(opens in a new window).

From 8a8f6afa0e29238ac3f66bc73e55fe1a1a578c95 Mon Sep 17 00:00:00 2001 From: Shauna Keating <59394696+shkeating@users.noreply.github.com> Date: Sun, 17 Nov 2024 17:26:19 +0000 Subject: [PATCH 05/22] updates readme to recommend github pages --- README.md | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index a484bdd..a43f143 100644 --- a/README.md +++ b/README.md @@ -51,11 +51,8 @@ The script will take a while to run, but at the end you'll have your color varia ### Step 4: edit the UI To change the colors and graphics of the UI, edit the variables at the top of index.css. -### Step 5: host your applet +### Step 5: host your avatar builder The only files that you need to host your applet are index.html, index.css imagemaker.js, and the imagemakerAssets folder. To host on Github pages, fork this repo, customize the files, and follow the intrucutions [here](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site). -To host on Neocities, make a new folder to contain your project (in my [example page](https://cherrvak.neocities.org/furrycreator/index.html), the folder is called "furrycreator"). Place the files index.html, index.css and imagemaker.js in this folder. Then place the folder imagemakerAssets in the same directory, but be careful to preserve the subfolder structure: the Neocities drag-and-drop GUI won't preserve the seperate folders for each part, which will break the code, so you're better off making a folder called imagemakerAssets and dragging-and-dropping in each part folder one-by-one. Then your completed applet will be on the page `https://your-neocities-page.neocities.org/your-folder-name/` (ex: https://cherrvak.neocities.org/furrycreator/) - -## TODO -- Add item shift button or draggable items? \ No newline at end of file +Since this repo generates a static site, you can turn on Github Pages in the Settings of the Repo and it should automatically deploy for you, detecting the presence of an index.html file. It will host your builder at `yourRepoName.github.io`. You can change the name of your repository to get a URL you like. From ab2cc46ced8a40a6cdeaed70149c26c6137872f4 Mon Sep 17 00:00:00 2001 From: Shauna Keating <59394696+shkeating@users.noreply.github.com> Date: Sun, 17 Nov 2024 17:26:47 +0000 Subject: [PATCH 06/22] updates readme to recommend github pages --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index a43f143..16fd638 100644 --- a/README.md +++ b/README.md @@ -56,3 +56,5 @@ To change the colors and graphics of the UI, edit the variables at the top of in The only files that you need to host your applet are index.html, index.css imagemaker.js, and the imagemakerAssets folder. To host on Github pages, fork this repo, customize the files, and follow the intrucutions [here](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site). Since this repo generates a static site, you can turn on Github Pages in the Settings of the Repo and it should automatically deploy for you, detecting the presence of an index.html file. It will host your builder at `yourRepoName.github.io`. You can change the name of your repository to get a URL you like. + +Pushing your changes to main will trigger a deploy. From 1f92060d0f3a73f1d8880915634835e2e65de9aa Mon Sep 17 00:00:00 2001 From: Shauna Keating <59394696+shkeating@users.noreply.github.com> Date: Sun, 17 Nov 2024 17:28:48 +0000 Subject: [PATCH 07/22] adds context to info section --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 16fd638..e7cd75a 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,8 @@ hackrew is a framework for making character creator/dressup game applets a la [picrew](https://picrew.me/). You can check out an online demo [here](https://ksadov.github.io/hackrew/), or see a more complex version on [Neocities](https://cherrvak.neocities.org/furrycreator/index.html). To make your own character creator, fork this repo or download the files and follow the instructions below. +This builder uses hackrew as a base, and implements some accessibility improvements to allow more users to interact with it. + ## Instructions ### Step 1: start a web server From af27929a0cdf80af35b335bcb7d83fbbd7e1524b Mon Sep 17 00:00:00 2001 From: Shauna Keating <59394696+shkeating@users.noreply.github.com> Date: Sun, 17 Nov 2024 17:51:34 +0000 Subject: [PATCH 08/22] adds event listener for enter key to controls buttons --- imagemaker.js | 41 +++++++++++++++++++++++++++++++++++++---- 1 file changed, 37 insertions(+), 4 deletions(-) diff --git a/imagemaker.js b/imagemaker.js index 237935b..0015944 100644 --- a/imagemaker.js +++ b/imagemaker.js @@ -85,13 +85,46 @@ window.addEventListener('load', function(ev) { * Assign functions to buttons. */ function initButtons() { - randomButton.addEventListener('click', randomize); - infoButton.addEventListener('click', toggleInfo); - paletteButton.addEventListener('click', togglePalette); - itemsButton.addEventListener('click', toggleItems); + randomButton.addEventListener('click', randomize).addEventListener("keypress", function(event) { + if (event.key === "Enter") { + event.preventDefault(); + document.getElementById(randomButton).click(); + } + }); + infoButton.addEventListener('click', toggleInfo).addEventListener("keypress", function(event) { + if (event.key === "Enter") { + event.preventDefault(); + document.getElementById(infoButton).click(); + } + }); + paletteButton.addEventListener('click', togglePalette).addEventListener("keypress", function(event) { + if (event.key === "Enter") { + event.preventDefault(); + document.getElementById(paletteButton).click(); + } + }); + itemsButton.addEventListener('click', toggleItems).addEventListener("keypress", function(event) { + // If the user presses the "Enter" key on the keyboard + if (event.key === "Enter") { + // Cancel the default action, if needed + event.preventDefault(); + // Trigger the button element with a click + document.getElementById("myBtn").click(); + } + }); return null; } + .addEventListener("keypress", function(event) { + // If the user presses the "Enter" key on the keyboard + if (event.key === "Enter") { + // Cancel the default action, if needed + event.preventDefault(); + // Trigger the button element with a click + document.getElementById("myBtn").click(); + } +}); + /** * Initialize partsElements, itemsElements */ From 30c271cf0035e0b395987fa8a0fc7c1c8c0ea82b Mon Sep 17 00:00:00 2001 From: Shauna Keating <59394696+shkeating@users.noreply.github.com> Date: Sun, 17 Nov 2024 17:52:18 +0000 Subject: [PATCH 09/22] cleans up items button event listener --- imagemaker.js | 5 +---- index.css | 5 ----- index.html | 5 ++--- 3 files changed, 3 insertions(+), 12 deletions(-) diff --git a/imagemaker.js b/imagemaker.js index 0015944..4ac85dc 100644 --- a/imagemaker.js +++ b/imagemaker.js @@ -104,12 +104,9 @@ window.addEventListener('load', function(ev) { } }); itemsButton.addEventListener('click', toggleItems).addEventListener("keypress", function(event) { - // If the user presses the "Enter" key on the keyboard if (event.key === "Enter") { - // Cancel the default action, if needed event.preventDefault(); - // Trigger the button element with a click - document.getElementById("myBtn").click(); + document.getElementById(itemsButton).click(); } }); return null; diff --git a/index.css b/index.css index c3c3703..7fc286a 100644 --- a/index.css +++ b/index.css @@ -321,8 +321,6 @@ body { position: absolute; font-size: 3vh; background-color: var(--loading-bg-color, #FFFFFF); - //padding: 3px; - //bottom: 4px; } .imagemaker_canvas_wrapper canvas { @@ -336,9 +334,6 @@ body { .imagemaker_ctrl_buttons { - position: absolute; - width: 50px; - height: 50px; z-index: 0; } diff --git a/index.html b/index.html index 06cf9cd..a739326 100644 --- a/index.html +++ b/index.html @@ -26,9 +26,8 @@ Loading...
- - - + +
From e94a8cc26f9ad37ab7a4edb48965810bc9fb77e4 Mon Sep 17 00:00:00 2001 From: Shauna Keating <59394696+shkeating@users.noreply.github.com> Date: Sun, 17 Nov 2024 17:52:43 +0000 Subject: [PATCH 10/22] removes broken code block --- imagemaker.js | 9 --------- 1 file changed, 9 deletions(-) diff --git a/imagemaker.js b/imagemaker.js index 4ac85dc..f318633 100644 --- a/imagemaker.js +++ b/imagemaker.js @@ -112,15 +112,6 @@ window.addEventListener('load', function(ev) { return null; } - .addEventListener("keypress", function(event) { - // If the user presses the "Enter" key on the keyboard - if (event.key === "Enter") { - // Cancel the default action, if needed - event.preventDefault(); - // Trigger the button element with a click - document.getElementById("myBtn").click(); - } -}); /** * Initialize partsElements, itemsElements From e9d334074210fd91158f081699594da78204ebeb Mon Sep 17 00:00:00 2001 From: Shauna Keating <59394696+shkeating@users.noreply.github.com> Date: Sun, 17 Nov 2024 17:59:14 +0000 Subject: [PATCH 11/22] adds title to index --- index.html | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index a739326..45c42a4 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ + Character Builder @@ -18,7 +19,7 @@
- + Save @@ -26,8 +27,8 @@ Loading...
- - + +
From f7e7d064528c16b21e2ca86171bae2a440c18d49 Mon Sep 17 00:00:00 2001 From: Shauna Keating <59394696+shkeating@users.noreply.github.com> Date: Sun, 17 Nov 2024 18:11:13 +0000 Subject: [PATCH 12/22] removes info toggle, and move button --- index.css | 71 ++--------------------------- index.html | 129 +++++++++++++++++++++++++++++------------------------ 2 files changed, 74 insertions(+), 126 deletions(-) diff --git a/index.css b/index.css index 7fc286a..3d4c39d 100644 --- a/index.css +++ b/index.css @@ -7,7 +7,7 @@ --image-background-color: hsla(0,0%,93.3%,.5); --image-background-png: "none"; /* the color/image filepath of the random button */ - --random-button-color: #ffbd15; + --random-button-color: #9d05f0; --random-button-png: "none"; /* the color/image filepath of the items menu background*/ --control-panel-color: #ccc; @@ -20,15 +20,9 @@ /* the color/image filepath of the palette toggle button */ --palette-toggle-color: #fff; --palette-toggle-svg: url("imagemakerAssets/palette_toggle.svg"); - /* the color/image filepath of the info button */ - --info-toggle-color: #fff; - --info-toggle-png: "none"; - /* the color/image filepath of the info button */ - --move-toggle-color: #fff; - --move-toggle-svg: url("imagemakerAssets/move_toggle.svg"); /* the image filepath of the logo */ --logo-png: "none"; - --save-button-color: #00b33c; + --save-button-color: #008a2e; } * { @@ -56,9 +50,6 @@ body { white-space: nowrap !important; /* 3 */ } -.imagemaker { - height: 100%; -} @media (orientation: landscape) { .imagemaker_container_wrapper { @@ -98,15 +89,6 @@ body { height: 100% } - .imagemaker_info_show_button { - position: absolute; - top: auto; - right: auto; - bottom: 4px; - left: 4px; - width: 50px; - height: 50px; - } .imagemaker_random_button { min-width: 60px; @@ -149,9 +131,7 @@ body { height: 48px; } - .imagemaker_info_content { - font-size: 3vh; - } + } @media (orientation: portrait) { @@ -192,17 +172,6 @@ body { height: 100% } - .imagemaker_info_show_button { - position: absolute; - top: 4px; - right: 4px; - bottom: auto; - left: auto; - height: 6vh; - width: 6vh; - font-size: 5vh - } - .imagemaker_parts_menu_wrapper { padding-left: 18.18%; } @@ -501,22 +470,6 @@ body { position: absolute; } -.imagemaker_info_show_button { - display: inline-flex; - justify-content: center; - align-items: center; - background-color: var(--info-toggle-color, #fff); - background-image: var(--info-toggle-png, "none"); - background-position: center; - background-repeat: no-repeat; - color: #333; - border: 0 solid #aaa; - border-radius: 50%; - cursor: pointer; - text-align: center; - z-index: 20; -} - .imagemaker_logo { position: absolute; top: 6px; @@ -538,24 +491,6 @@ body { border: 3px solid var(--select-color, #ff0000); } -.imagemaker_info_wrapper { - height: 100%; - background-color: #eeeeee; - position: absolute; - top: 4px; - right: 4px; - bottom: 4px; - left: 4px; - height: calc(100% - 8px); - overflow: hidden; - z-index: 10; - display: none; -} - -.imagemaker_info_content { - margin: 10px; -} - .imagemaker_colorpalette { flex: 1; /*display: flex;*/ diff --git a/index.html b/index.html index 45c42a4..345221c 100644 --- a/index.html +++ b/index.html @@ -1,63 +1,76 @@ - - - + + + + Character Builder - - - -
-
-
-
-

- This builder is based on the open-source character creator - framework, hackrew(opens in a new window). -

-
-
-
-
- - - Save - - - Loading... - -
- - -
-
-
-
-
-
    -
-
-
- Random -
-
-
-
-
-
    -
-
-
-
    -
+ + + +
+

Character Builder

+
+
+ +
+
+
+
+

+ This builder is based on the open-source character creator + framework, hackrew(opens in a new window). +

+
+
+
+
+ + + Save + + + Loading... + +
+ + +
+
+
+
+
+
    +
+
+ +
+
+
+
+
    +
+
+
+
    +
+
+
+
+
+
+ +
-
-
-
- ?
- -
-
- - + +
+
+ + + \ No newline at end of file From 1a435dcee87ab69302a74091d71682f1fc89afe4 Mon Sep 17 00:00:00 2001 From: Shauna Keating <59394696+shkeating@users.noreply.github.com> Date: Sun, 17 Nov 2024 18:22:24 +0000 Subject: [PATCH 13/22] rolls back imagemaker js file --- imagemaker.js | 28 +++------------------------- 1 file changed, 3 insertions(+), 25 deletions(-) diff --git a/imagemaker.js b/imagemaker.js index f318633..8d0442b 100644 --- a/imagemaker.js +++ b/imagemaker.js @@ -85,34 +85,12 @@ window.addEventListener('load', function(ev) { * Assign functions to buttons. */ function initButtons() { - randomButton.addEventListener('click', randomize).addEventListener("keypress", function(event) { - if (event.key === "Enter") { - event.preventDefault(); - document.getElementById(randomButton).click(); - } - }); - infoButton.addEventListener('click', toggleInfo).addEventListener("keypress", function(event) { - if (event.key === "Enter") { - event.preventDefault(); - document.getElementById(infoButton).click(); - } - }); - paletteButton.addEventListener('click', togglePalette).addEventListener("keypress", function(event) { - if (event.key === "Enter") { - event.preventDefault(); - document.getElementById(paletteButton).click(); - } - }); - itemsButton.addEventListener('click', toggleItems).addEventListener("keypress", function(event) { - if (event.key === "Enter") { - event.preventDefault(); - document.getElementById(itemsButton).click(); - } - }); + randomButton.addEventListener('click', randomize); + paletteButton.addEventListener('click', togglePalette); + itemsButton.addEventListener('click', toggleItems); return null; } - /** * Initialize partsElements, itemsElements */ From d404f017097ba4e1f6facb0ccc082d9149dcdc8e Mon Sep 17 00:00:00 2001 From: Shauna Keating <59394696+shkeating@users.noreply.github.com> Date: Sun, 17 Nov 2024 18:24:19 +0000 Subject: [PATCH 14/22] rolls back imagemaker js file to fix bug --- index.html | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index 345221c..beb7e19 100644 --- a/index.html +++ b/index.html @@ -15,15 +15,6 @@

Character Builder

-
-
-

- This builder is based on the open-source character creator - framework, hackrew(opens in a new window). -

-
-
@@ -34,9 +25,9 @@

Character Builder

Loading...
- -
@@ -46,7 +37,7 @@

Character Builder

-
@@ -70,6 +61,15 @@

Character Builder

From 3328edaf4eb87185711ca9469a44d480108d09ce Mon Sep 17 00:00:00 2001 From: Shauna Keating <59394696+shkeating@users.noreply.github.com> Date: Sun, 17 Nov 2024 18:28:32 +0000 Subject: [PATCH 15/22] adds focus ring --- index.css | 6 ++++++ index.html | 13 ++++++------- 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/index.css b/index.css index 3d4c39d..e9db268 100644 --- a/index.css +++ b/index.css @@ -3,6 +3,8 @@ --loading-bg-color: #FFFFFF; /* the color of the border around selected part and icon buttons */ --select-color: #FF0000; + /* the color of the focus ring */ + --focus-color: #0008ff; /* the color/image filepath of the background of the image display area */ --image-background-color: hsla(0,0%,93.3%,.5); --image-background-png: "none"; @@ -32,6 +34,10 @@ box-sizing: border-box; } +*:focus { + outline: 3px solid --focus-color; +} + body { height: 90vh; } diff --git a/index.html b/index.html index beb7e19..469f2c6 100644 --- a/index.html +++ b/index.html @@ -8,15 +8,14 @@ +

Character Builder

-
- - From 8469341bd712dd3a5abd92297b6fbcb6ccac2ce3 Mon Sep 17 00:00:00 2001 From: Shauna Keating <59394696+shkeating@users.noreply.github.com> Date: Sun, 17 Nov 2024 18:32:11 +0000 Subject: [PATCH 16/22] corrects syntx to get focus ring to appear --- index.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.css b/index.css index e9db268..978c02a 100644 --- a/index.css +++ b/index.css @@ -34,8 +34,8 @@ box-sizing: border-box; } -*:focus { - outline: 3px solid --focus-color; +button:focus-visible, a:focus-visible { + outline: 3px solid var(--focus-color); } body { From 0b2e4d6ef409d17a348bb678eb850f3f011dc713 Mon Sep 17 00:00:00 2001 From: Shauna Keating <59394696+shkeating@users.noreply.github.com> Date: Sun, 17 Nov 2024 18:45:33 +0000 Subject: [PATCH 17/22] adjusts button controld positioning --- index.css | 217 ++++++++++++++++++++++++++---------------------------- 1 file changed, 104 insertions(+), 113 deletions(-) diff --git a/index.css b/index.css index 978c02a..1427eac 100644 --- a/index.css +++ b/index.css @@ -6,7 +6,7 @@ /* the color of the focus ring */ --focus-color: #0008ff; /* the color/image filepath of the background of the image display area */ - --image-background-color: hsla(0,0%,93.3%,.5); + --image-background-color: hsla(0, 0%, 93.3%, .5); --image-background-png: "none"; /* the color/image filepath of the random button */ --random-button-color: #9d05f0; @@ -34,7 +34,8 @@ box-sizing: border-box; } -button:focus-visible, a:focus-visible { +button:focus-visible, +a:focus-visible { outline: 3px solid var(--focus-color); } @@ -43,98 +44,94 @@ body { } .sr-only { - border: 0 !important; - clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */ - -webkit-clip-path: inset(50%) !important; - clip-path: inset(50%) !important; /* 2 */ - height: 1px !important; - margin: -1px !important; - overflow: hidden !important; - padding: 0 !important; - position: absolute !important; - width: 1px !important; - white-space: nowrap !important; /* 3 */ + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + /* 1 */ + -webkit-clip-path: inset(50%) !important; + clip-path: inset(50%) !important; + /* 2 */ + height: 1px !important; + margin: -1px !important; + overflow: hidden !important; + padding: 0 !important; + position: absolute !important; + width: 1px !important; + white-space: nowrap !important; + /* 3 */ } @media (orientation: landscape) { .imagemaker_container_wrapper { - width: 800px; + width: 800px; } - + .imagemaker_container { - flex-direction: row; + flex-direction: row; } - + .imagemaker_canvas_wrapper { - max-height: 100%; + max-height: 100%; } .imagemaker_save_button { - top: 5px; - height: 36px; + top: 5px; + height: 36px; } .imagemaker_ctrl_buttons { - position: absolute; - top: 4px; - right: 4px; - bottom: auto; - left: auto; - width: 50px; - height: 50px; - z-index: 0; + position: absolute; + top: 10px; + right: 65px; + bottom: auto; + left: auto; + width: 50px; + height: 50px; + z-index: 0; } .imagemaker_control_wrapper { - position: relative; - flex: 1; - display: flex; - flex-direction: column; - min-width: 275px; - height: 100% + position: relative; + flex: 1; + display: flex; + flex-direction: column; + min-width: 275px; + height: 100% } .imagemaker_random_button { - min-width: 60px; - font-size: 14px; + min-width: 60px; + font-size: 14px; } .imagemaker_parts_menu ul { - margin-left: 10px; + margin-left: 10px; } .imagemaker_itemlist ul li { - width: 33.2%; + width: 33.2%; } .imagemaker_parts_menu { - height: 68px; + height: 68px; } .imagemaker_parts_menu ul li { - width: 60px; - height: auto; + width: 60px; + height: auto; } - .imagemaker_ctrl_buttons .button_show_itemlist { - width: 50px; - height: 50px; - line-height: 50px; + .imagemaker_ctrl_buttons button { + min-width: 50px; + height: 50px; + line-height: 50px; } - .imagemaker_ctrl_buttons .button_show_colorpalette { - align-items: center; - width: 50px; - height: 50px; - line-height: 50px; - left: -55px; - } .imagemaker_colorpalette ul li { - width: 48px; - height: 48px; + width: 48px; + height: 48px; } @@ -142,107 +139,103 @@ body { @media (orientation: portrait) { .loading { - font-size: 3vh; + font-size: 3vh; } - + .imagemaker_container_wrapper { - width: 95vw; - min-height: 95vh; + width: 95vw; + min-height: 95vh; } .imagemaker_container { - flex-direction: column; + flex-direction: column; } .imagemaker_canvas_wrapper { - max-height: 50vh; + max-height: 50vh; } .imagemaker_save_button { - height: 4vh; - font-size: 3vh; + height: 4vh; + font-size: 3vh; } .imagemaker_ctrl_buttons { - bottom: 4px; - right: 4px; - top: auto; - left: auto; + position:absolute; + bottom: 10px; + right: 10px; + top: auto; + left: auto; } .imagemaker_control_wrapper { - position: relative; - flex: 1; - display: flex; - flex-direction: column; - height: 100% + position: relative; + flex: 1; + display: flex; + flex-direction: column; + height: 100% } .imagemaker_parts_menu_wrapper { - padding-left: 18.18%; + padding-left: 18.18%; } .imagemaker_parts_menu ul { - margin-left: 0px; + margin-left: 0px; } .imagemaker_itemlist ul li { - width: 23.75%; + width: 23.75%; } .imagemaker_parts_menu_wrapper { - min-height: 10vh; + min-height: 10vh; } - + .imagemaker_parts_menu { - height: 100%; + height: 100%; + } + + .imagemaker_parts_menu ul { + width: auto; + height: 100%; } - .imagemaker_parts_menu ul { - width: auto; - height: 100%; - } - .imagemaker_parts_menu ul li { - width: 9vh; - height: 9vh; + width: 9vh; + height: 9vh; } .imagemaker_parts_menu ul li img { - width: 100%; - height: 100%; - position: relative; + width: 100%; + height: 100%; + position: relative; } .imagemaker_random_button { - font-size: 4vw; - } - - .imagemaker_ctrl_buttons { - width: 6vh; - height: 6vh; + font-size: 4vw; } .imagemaker_ctrl_buttons .button_show_colorpalette { - width: 6vh; - height: 6vh; - line-height: 6vh; - left: -10vh; - bottom: 4px; + width: 6vh; + height: 6vh; + line-height: 6vh; + left: -10vh; + bottom: 4px; } .imagemaker_ctrl_buttons .button_show_itemlist { - width: 6vh; - height: 6vh; - bottom: 4px; - right: 4px; + width: 6vh; + height: 6vh; + bottom: 4px; + right: 4px; } .imagemaker_colorpalette ul li { - width: 8vh; - height: 8vh; + width: 8vh; + height: 8vh; } - + } .imagemaker_container_wrapper { @@ -257,7 +250,7 @@ body { height: 100%; display: flex; overflow: hidden; - background-color: var(--image-background-color, hsla(0,0%,93.3%,.5)); + background-color: var(--image-background-color, hsla(0, 0%, 93.3%, .5)); background-image: var(--image-background-png, none); background-position: center; background-repeat: no-repeat; @@ -310,6 +303,7 @@ body { .imagemaker_ctrl_buttons { z-index: 0; + display: flex; } .imagemaker_control_wrapper { @@ -435,7 +429,6 @@ body { border-radius: 50%; cursor: pointer; text-align: center; - position: absolute; } .imagemaker_ctrl_buttons .button_show_controller { @@ -473,7 +466,6 @@ body { border-radius: 50%; cursor: pointer; text-align: center; - position: absolute; } .imagemaker_logo { @@ -485,7 +477,7 @@ body { display: inline-block; background-size: contain; background-repeat: no-repeat; - background-color: #ff597e; + background-color: #ff597e; background-image: var(--logo-png, "none"); width: 66px; height: 20px; @@ -521,16 +513,15 @@ body { border-radius: 50%; border: 2px solid #eee; box-sizing: border-box; - list-style-type: none!important; + list-style-type: none !important; cursor: pointer; } -.imagemaker_colorpalette ul > * { +.imagemaker_colorpalette ul>* { display: inline-block; list-style-type: none; margin: 0; padding: 0; vertical-align: middle; font-size: 1rem; -} - +} \ No newline at end of file From 7388343ee8da18117a337a07782abe8ff7db7686 Mon Sep 17 00:00:00 2001 From: Shauna Keating <59394696+shkeating@users.noreply.github.com> Date: Sun, 17 Nov 2024 18:52:31 +0000 Subject: [PATCH 18/22] turns li elements in itemslist to buttons that ca be keyboard operated --- imagemaker.js | 2 +- index.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/imagemaker.js b/imagemaker.js index 8d0442b..e119e55 100644 --- a/imagemaker.js +++ b/imagemaker.js @@ -257,7 +257,7 @@ window.addEventListener('load', function(ev) { itemsElements[i][0] = noneButton; } for (let j = 0; j < parts[i].items.length; j++) { - let item = document.createElement('li'); + let item = document.createElement('button'); let itemIcon = document.createElement('img'); itemIcon.id = "icon_" + i.toString() + "_" + j.toString(); itemIcon.src = (assetsPath + diff --git a/index.css b/index.css index 1427eac..809099b 100644 --- a/index.css +++ b/index.css @@ -109,7 +109,7 @@ body { margin-left: 10px; } - .imagemaker_itemlist ul li { + .imagemaker_itemlist ul button { width: 33.2%; } From d9083ae73d4a43e169064191607676850d372933 Mon Sep 17 00:00:00 2001 From: Shauna Keating <59394696+shkeating@users.noreply.github.com> Date: Sun, 17 Nov 2024 18:54:51 +0000 Subject: [PATCH 19/22] changes wrapping element to be a div instead of ul --- index.css | 4 ++-- index.html | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/index.css b/index.css index 809099b..13804f5 100644 --- a/index.css +++ b/index.css @@ -105,11 +105,11 @@ body { font-size: 14px; } - .imagemaker_parts_menu ul { + .imagemaker_parts_menu div { margin-left: 10px; } - .imagemaker_itemlist ul button { + .imagemaker_itemlist div button { width: 33.2%; } diff --git a/index.html b/index.html index 469f2c6..9d533a0 100644 --- a/index.html +++ b/index.html @@ -43,8 +43,8 @@

Character Builder

-
    -
+
+
    From 5418888f17d86e5b348fe8d69d802d0c6471f86c Mon Sep 17 00:00:00 2001 From: Shauna Keating <59394696+shkeating@users.noreply.github.com> Date: Sun, 17 Nov 2024 18:57:09 +0000 Subject: [PATCH 20/22] changes ul li list to be a nav of buttons --- imagemaker.js | 2 +- index.html | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/imagemaker.js b/imagemaker.js index e119e55..2f26c36 100644 --- a/imagemaker.js +++ b/imagemaker.js @@ -225,7 +225,7 @@ window.addEventListener('load', function(ev) { */ function initPartsElements() { for (let i = 0; i < parts.length; i++) { - let part = document.createElement('li'); + let part = document.createElement('button'); let partIcon = document.createElement('img'); partIcon.src = assetsPath + parts[i].folder + "/icon.png"; part.appendChild(partIcon); diff --git a/index.html b/index.html index 9d533a0..65bd811 100644 --- a/index.html +++ b/index.html @@ -33,8 +33,8 @@

    Character Builder