Merge pull request #112 from S1lentcodes/main

Weow omg color picking! - Completed by Silent
loljoshie · Dec 26, 2022 · 1d821cf · 1d821cf
2 parents 6494613 + 17c84ed
commit 1d821cf
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -1,5 +1,7 @@
 ![LJ Inventory](https://user-images.githubusercontent.com/91661118/146313051-665337bf-ed92-4ed0-bbb9-6ee9613f670d.png)
 
+## Color Picking Added!
+
 Join my Discord for updates, support, and special early testing!
 <br>
 https://discord.gg/projectsloth

diff --git a/html/css/main.css b/html/css/main.css
@@ -317,6 +317,18 @@ body {
     font-weight: 300;
     font-family: 'Roboto', sans-serif !important;
 }
+.inv-option-item > label {
+    color: white;
+    text-align: center;
+    line-height: 48px;
+    text-transform: normal;
+    font-size: 1.5vh;
+    font-weight: 300;
+    font-family: 'Roboto', sans-serif !important;
+    margin-right: 10px;
+    margin-bottom: auto;
+    margin-top: auto;
+}
 
 .inv-option-item {
     margin-top: 3%;
@@ -1125,3 +1137,10 @@ body {
 .weapon-attachments-back:hover {
     background-color: rgb(18, 18, 18);
 }
+
+.color-picker-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
diff --git a/html/js/app.js b/html/js/app.js
@@ -248,6 +248,26 @@ $(document).on("click", ".weapon-attachments-back", function(e) {
     AttachmentScreenActive = false;
 });
 
+function changeInventoryColor(color) {
+    $( ".player-inventory-bg" ).css( "background-color", color);
+    $( ".other-inventory-bg" ).css( "background-color", color);
+    $( ".inv-options" ).css( "background-color", color);
+    localStorage.setItem('lj-inventory-color', color);
+}
+
+const savedColor = localStorage.getItem('lj-inventory-color');
+
+if (savedColor) {
+    changeInventoryColor(savedColor)
+}
+
+$('#favcolor').change(function(){
+    let color = $(this).val();
+    let hexOpacity = "CC";
+    let finalColor = color+hexOpacity;
+    changeInventoryColor(finalColor);
+});
+
 function FormatAttachmentInfo(data) {
     $.post(
         "https://lj-inventory/GetWeaponData",

diff --git a/html/ui.html b/html/ui.html
@@ -51,7 +51,13 @@
                 <div class="inv-options">
                     <div class="inv-options-list">
                         <img class="brand-logo" src="./images/lj-symbol.svg"></img>
-                        <input type="number" id="item-amount" class="inv-option-item" min=1 max="10000" placeholder="Amount" pattern="[0-9]" onfocus="this.value=''" placeholder="" oninput="validity.valid||(value='');"></input>                        <div class="inv-option-item" id="item-use"><p>Use</p></div>
+                        <div class="inv-option-item color-picker-container">
+                          <label for="favcolor">Color:</label>
+                          <input type="color" id="favcolor" name="favcolor" value="#ff0000">
+                        </div>
+                        <input type="number" id="item-amount" class="inv-option-item" min=1 max="10000" placeholder="Amount"
+                        pattern="[0-9]" onfocus="this.value=''" placeholder="" oninput="validity.valid||(value='');"></input>
+                        <div class="inv-option-item" id="item-use"><p>Use</p></div>
                         <!-- <img class="inv-option-hand" id= "item-use" src="images/hand-1.png"> -->
                         <div class="inv-option-item" id="item-give"><p>Give</p></div>
                         <div class="inv-option-item" id="inv-close"><p>Close</p></div>