MAINT: Crafting UI overhaul

BondageClub/CSS/Crafting.css

@@ -0,0 +1,258 @@
+#crafting-screen {
+	--button-size: min(9dvh, 4.5dvw);
+
+	display: grid;
+	grid-template:
+		"crafting-top-bar crafting-top-bar crafting-top-bar" var(--button-size)
+		"crafting-left-panel crafting-center-panel crafting-right-panel" auto / 3fr 2fr 3fr
+	;
+	gap: calc(var(--button-size) / 6);
+}
+
+#crafting-top-bar {
+	display: grid;
+	grid-template-columns: auto min-content;
+	gap: calc(var(--button-size) / 6);
+	grid-area: crafting-top-bar;
+}
+
+#crafting-header {
+	user-select: none;
+	font-size: min(5dvh, 2.5dvw);
+	line-height: 0;
+	color: white;
+	justify-self: center;
+	align-self: center;
+	padding-left: calc((5 + (4 / 6)) * var(--button-size));
+}
+
+#crafting-menu-bar {
+	display: grid;
+	direction: rtl;
+	grid-auto-flow: column;
+	gap: calc(var(--button-size) / 6);
+}
+
+#crafting-accept-button,
+#crafting-cancel-button,
+#crafting-exit-button,
+#crafting-download-button,
+#crafting-upload-button {
+	width: var(--button-size);
+	height: var(--button-size);
+}
+
+#crafting-accept-button {
+	background-image: url("../Icons/Accept.png");
+}
+
+#crafting-accept-button[aria-disabled="false"] #crafting-accept-button-tooltip-disabled {
+	display: none;
+}
+
+#crafting-cancel-button {
+	background-image: url("../Icons/Cancel.png");
+}
+
+#crafting-exit-button {
+	background-image: url("../Icons/Exit.png");
+}
+
+#crafting-download-button {
+	background-image: url("../Icons/Download.png");
+}
+
+#crafting-upload-button {
+	background-image: url("../Icons/Upload.png");
+}
+
+#crafting-left-panel {
+	display: grid;
+	grid-area: crafting-left-panel;
+	column-gap: calc(var(--button-size) / 6);
+	row-gap: 3px;
+	padding: 3px;
+	overflow-y: hidden;
+	height: 100%;
+	grid-template:
+		"crafting-property-button crafting-left-panel-expanded" calc(2.3 * var(--button-size))
+		"crafting-asset-button crafting-left-panel-expanded" calc(2.3 * var(--button-size))
+		"crafting-lock-button crafting-left-panel-expanded" auto / calc(1.8 * var(--button-size)) auto;
+}
+
+#crafting-left-panel input[type="search"] {
+	width: calc(100% - 6px);
+	margin: 3px;
+	margin-bottom: 0;
+	font: inherit;
+}
+
+.crafting-panel {
+	height: 100%;
+	display: none;
+	overflow-y: inherit;
+	gap: calc(var(--button-size) / 6 - 3px);
+	background-color: rgba(0, 0, 0, 0.25);
+	grid-template-rows: min-content auto;
+	grid-area: crafting-left-panel-expanded;
+}
+
+.crafting-panel > .crafting-label > span {
+	justify-self: center;
+}
+
+#crafting-property-button[aria-checked="true"] ~ #crafting-property-panel,
+#crafting-asset-button[aria-checked="true"] ~ #crafting-asset-panel,
+#crafting-padlock-button[aria-checked="true"] ~ #crafting-padlock-panel {
+	display: grid;
+}
+
+.crafting-grid {
+	display: grid;
+	gap: calc(var(--button-size) / 6);
+	overflow: visible scroll;
+	margin: 3px;
+	padding: 3px;
+}
+
+#crafting-asset-grid,
+#crafting-padlock-grid {
+	grid-template-columns: repeat(3, min-content);
+	grid-template-rows: repeat(auto-fill, calc(2.3 * var(--button-size)));
+}
+
+#crafting-property-grid {
+	grid-template-columns: min-content;
+	grid-template-rows: repeat(auto-fill, calc(1.5 * var(--button-size)));
+}
+
+#crafting-asset-grid button,
+#crafting-padlock-grid button,
+#crafting-property-button,
+#crafting-asset-button,
+#crafting-padlock-button {
+	width: calc(1.8 * var(--button-size));
+	height: calc(2.3 * var(--button-size));
+}
+
+#crafting-property-grid button {
+	width: calc(5.7 * var(--button-size));
+	height: calc(1.5 * var(--button-size));
+}
+
+#crafting-property-grid button > label {
+	display: none;
+}
+
+#crafting-property-button {
+	font-size: min(3dvh, 1.5dvw);
+	grid-area: crafting-property-button;
+}
+
+#crafting-property-button > .button-label {
+	display: none;
+}
+
+#crafting-asset-button {
+	grid-area: crafting-asset-button;
+}
+
+#crafting-padlock-button {
+	grid-area: crafting-lock-button;
+}
+
+#crafting-center-panel {
+	display: flex;
+	align-items: flex-end;
+	justify-content: center;
+	grid-area: crafting-center-panel;
+}
+
+#crafting-undress-button {
+	width: var(--button-size);
+	height: var(--button-size);
+	background-image: url("../Icons/Naked.png");
+}
+
+#crafting-right-panel {
+	grid-area: crafting-right-panel;
+	overflow-y: scroll;
+}
+
+#crafting-extended-button,
+#crafting-layering-button,
+#crafting-colors-button,
+#crafting-private-checkbox {
+	height: calc(0.75 * var(--button-size));
+	width: calc(0.75 * var(--button-size));
+}
+
+#crafting-extended-button {
+	background-image: url("../Icons/Use.png");
+}
+
+#crafting-layering-button {
+	background-image: url("../Icons/Layering.png");
+}
+
+.crafting-label {
+	width: calc(100% - 6px);
+	display: grid;
+	row-gap: calc(var(--button-size) / 12);
+	column-gap: calc(var(--button-size) / 6);
+	padding-left: 3px;
+	padding-right: 3px;
+	padding-top: calc(var(--button-size) / 12);
+	padding-bottom: calc(var(--button-size) / 12);
+	cursor: pointer;
+	color: white;
+	font: inherit;
+	align-items: center;
+	user-select: none;
+}
+
+.crafting-label input, .crafting-label textarea {
+	font: inherit;
+}
+
+.crafting-label > span:hover {
+	color: yellow;
+}
+
+#crafting-name-label, #crafting-description-label {
+	grid-template-rows: repeat(2, min-content);
+}
+
+#crafting-colors-label {
+	grid-template-columns: auto min-content;
+	grid-template-rows: min-content min-content;
+}
+
+#crafting-colors-label > span {
+	grid-column: 1 / 3;
+}
+
+#crafting-colors-button {
+	background-image: url("../Icons/Color.png");
+}
+
+#crafting-name-input, #crafting-colors-input {
+	height: calc(0.75 * var(--button-size));
+}
+
+#crafting-description-input {
+	height: calc(3 * var(--button-size));
+}
+
+#crafting-layering-label {
+	grid-template-columns: calc(1.5 * var(--button-size)) min-content auto;
+}
+
+#crafting-layering-input {
+	height: calc(0.75 * var(--button-size));
+}
+
+#crafting-private-label,
+#crafting-extended-label {
+	grid-template-columns: min-content auto;
+}

BondageClub/Icons/Download.license.txt

@@ -0,0 +1,17 @@
+Free Download Icon, Copyright (C) Amit Jakhu, Creative Commons Attribution 4.0 International (CC-BY-4.0)
+
+You are free to:
+    Share — copy and redistribute the material in any medium or format for any purpose, even commercially.
+    Adapt — remix, transform, and build upon the material for any purpose, even commercially.
+    The licensor cannot revoke these freedoms as long as you follow the license terms.
+
+Under the following terms:
+
+    Attribution — You must give appropriate credit , provide a link to the license, and indicate if changes were made . You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.
+    No additional restrictions — You may not apply legal terms or technological measures that legally restrict others from doing anything the license permits.
+
+Notices:
+
+You do not have to comply with the license for elements of the material in the public domain or where your use is permitted by an applicable exception or limitation .
+
+No warranties are given. The license may not give you all of the permissions necessary for your intended use. For example, other rights such as publicity, privacy, or moral rights may limit how you use the material.

BondageClub/Icons/Upload.license.txt

@@ -0,0 +1,17 @@
+Free Upload Icon, Copyright (C) Amit Jakhu, Creative Commons Attribution 4.0 International (CC-BY-4.0)
+
+You are free to:
+    Share — copy and redistribute the material in any medium or format for any purpose, even commercially.
+    Adapt — remix, transform, and build upon the material for any purpose, even commercially.
+    The licensor cannot revoke these freedoms as long as you follow the license terms.
+
+Under the following terms:
+
+    Attribution — You must give appropriate credit , provide a link to the license, and indicate if changes were made . You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.
+    No additional restrictions — You may not apply legal terms or technological measures that legally restrict others from doing anything the license permits.
+
+Notices:
+
+You do not have to comply with the license for elements of the material in the public domain or where your use is permitted by an applicable exception or limitation .
+
+No warranties are given. The license may not give you all of the permissions necessary for your intended use. For example, other rights such as publicity, privacy, or moral rights may limit how you use the material.

BondageClub/Screens/Room/Crafting/Text_Crafting.csv

@@ -2,6 +2,7 @@ Exit,Return to the main hall
 Return,Return to item customizer
 Destroy,Destroy an item
 Accept,Craft your item
+AcceptInvalid,: no item selected
 Cancel,Cancel
 Previous,Previous
 Next,Next
@@ -11,12 +12,15 @@ ReorderPlace,"Click slots to place selected items: "
 NoLock,No lock
 SelectSlot,"Select an empty slot to craft a new item, or click on the item to edit.  Page"
 SelectDestroy,Select a crafted item slot to destroy.  Page
-SelectItem,Select an item to craft or search on your left.
-SelectProperty,Select a property for your AssetDescription.
-SelectLock,Select a lock to use with your PropertyName AssetDescription.
-SelectName,Enter a name and description for your PropertyName AssetDescription.
+SelectItem,Select an item
+SelectProperty,Select an item property
+SelectLock,Select a lock
+SelectName,Configure the crafted item
 SelectColor,Pick the item colors
 SelectPriority,Configure layer priority
+FilterProperty,Filter properties
+FilterAsset,Filter items
+FilterLock,Filter padlocks
 EnterName,Name of the crafted item
 EnterDescription,Engrave a description
 EnterColor,Enter or pick the colors
@@ -68,3 +72,9 @@ DescriptionHeavy,Slows down walking.
 DescriptionLight,Speeds up walking.
 OpenColorpicker,Open Colorpicker
 Layering,Change item layering
+Download,Export crafting code
+DownloadSucces,Crafting code pasted to clipboard
+Upload,Import crafting code
+UploadPrompt,Please paste the crafting code. Importing crafting codes will overwrite existing settings. Are you sure?
+UploadSucces,Crafting code successfully parsed
+UploadFailure,Failed to parse the passed crafting code

BondageClub/Scripts/Typedef.d.ts

@@ -3591,7 +3591,10 @@ interface PandoraBaseRoom {
 //#region Crafting items
 
 type CraftingMode = (
-	"Slot" | "Item" | "Property" | "Lock" | "Name" | "Color" | "Extended"
+	"Slot"
+	| "Name"
+	| "Color"
+	| "Extended"
 	| "OverridePriority"
 );
 

BondageClub/index.html

@@ -13,6 +13,7 @@
 	<link rel="icon" type="image/png" href="Icons/Logo.png" id="favicon">
 	<link rel="stylesheet" href="CSS/Styles.css">
 	<link rel="stylesheet" href="CSS/button.css">
+	<link rel="stylesheet" href="CSS/Crafting.css">
 	<link rel="stylesheet" href="CSS/FriendList.css">
 	<link rel="stylesheet" href="CSS/Beep.css">
 	<link rel="stylesheet" href="CSS/chat.css">