Optimized some Text I'll add the functions later, no one even plays this

css/shop.css

@@ -30,6 +30,7 @@ body {
 }
 
 #search{
+  display: none;
   min-width: 230px;
   height: 30px;
   padding-left: .5rem;
@@ -41,9 +42,9 @@ body {
 #logclick{
   position: relative;
   display: flex;
-  align-items: center;
   justify-content: center;
-  gap: 5ch;
+  align-items: center;
+  gap: 2ch;
   margin: 0 5vw 0 5vw;
   padding: 1rem;
   border-radius: 1rem;
@@ -57,22 +58,12 @@ body {
 #imgcli{
   width: 50px;
   height: 50px;
-  margin: 0.1rem;
   width: 100px;
   aspect-ratio: 1/1;
-  margin: 0.5rem;
   object-fit: contain;
   pointer-events: none;
 }
 
-.backtop{
-  height: 230px;
-  max-width: auto;
-  margin: 0 1.5vw 0 1.5vw;
-  border-radius: 0 0 90px 90px;
-  background: linear-gradient(#11ABFF, #ccccccab);
-}
-
 .main{
   display: flex;
   flex-wrap: wrap;
@@ -84,7 +75,7 @@ body {
 .item{
   border: none;
   top: 5px;
-  margin: 2rem/* 1.5vw 2rem 1.5vw*/;
+  margin: 1.5rem/* 1.5vw 2rem 1.5vw*/;
   padding: .5rem 1rem 0 .5rem;
   border-radius: 6.9px;
   display: flex;
@@ -104,6 +95,7 @@ body {
   align-items: center;
 }
 .item .title h3{
+  text-transform: capitalize;
   margin-right: .5rem;
 }
 .item .title img{
@@ -114,7 +106,7 @@ body {
   filter: drop-shadow(10px 8px 6px #333);
   pointer-events: none
 }
-.item .title span{
+.item .title span, #logclick span{
   color: #00ec00;
   font-size: 12.5px;
 }

js/htmls.js

@@ -79,6 +79,7 @@ const htmlShop = `
       <div id="logclick">
         <img src="../img/icons8-rest.svg" id="imgcli" draggable="false">
         <p id="disclick"></p>
+        <span id="clickMake">+69k/s</span>
       </div>
       <input type="text" id="search" onkeyup="/*search()*/" placeholder="Search.." title="Type in a category">
     </section>
@@ -335,28 +336,28 @@ const htmlShop = `
         <div class="item">
           <section class="title">
             <img src="../img/girafe.svg">
-            <h3 id="disgirafeName">girafe</h3>
+            <h3 id="disgiraffeName">giraffe</h3>
-            <span id="girafeMake">+69k/s</span>
+            <span id="giraffeMake">+69k/s</span>
           </section>
           <div class="buttons" style="--Bcolor: #ffdb4d">
             <div class="column">
-              <button onclick="buygirafe()" class="buyone0" id="girafe1">
+              <button onclick="buygiraffe()" class="buyone0" id="giraffe1">
-                Buy a girafe
+                Buy a giraffe
               </button>
-              <button onclick="buyCgirafe()" class="buyone1" id="Cgirafe1">
+              <button onclick="buyCgiraffe()" class="buyone1" id="Cgiraffe1">
-                Buy a girafe for clicks
+                Buy a giraffe for clicks
               </button>
             </div>
             <div class="column">
-              <button onclick="mxCgirafe()" class="buymax0">
+              <button onclick="mxCgiraffe()" class="buymax0">
                 MAX
               </button>
-              <button onclick="mxgirafe()" class="buymax1">
+              <button onclick="mxgiraffe()" class="buymax1">
                 MAX
               </button>
             </div>
           </div>
-          <p id="disgirafe">You've got OUTPUT</p>
+          <p id="disgiraffe">You've got OUTPUT</p>
         </div>
   
         <!-- Otter -->
@@ -447,28 +448,28 @@ const htmlShop = `
         <div class="item">
           <section class="title">
             <img src="../img/squirell.svg">
-            <h3 id="dissquirellName">Squirrel</h3>
+            <h3 id="dissquirrelName">Squirrel</h3>
-            <span id="squirellMake">+69k/s</span>
+            <span id="squirrelMake">+69k/s</span>
           </section>
           <div class="buttons" style="--Bcolor: #CFB190">
             <div class="column">
-              <button onclick="buysquirell()" class="buyone0" id="squirell1">
+              <button onclick="buysquirrel()" class="buyone0" id="squirrel1">
                 Buy a Squirrel
               </button>
-              <button onclick="buyCsquirell()" class="buyone1" id="Csquirell1">
+              <button onclick="buyCsquirrel()" class="buyone1" id="Csquirrel1">
                 Buy a Squirrel for clicks
               </button>
             </div>
             <div class="column">
-              <button onclick="mxCsquirell()" class="buymax0">
+              <button onclick="mxCsquirrel()" class="buymax0">
                 MAX
               </button>
-              <button onclick="mxsquirell()" class="buymax1">
+              <button onclick="mxsquirrel()" class="buymax1">
                 MAX
               </button>
             </div>
           </div>
-          <p id="dissquirell">You've got OUTPUT</p>
+          <p id="dissquirrel">You've got OUTPUT</p>
         </div>
   
         <!-- Chameleon -->

js/normal.js

@@ -111,7 +111,7 @@ let contextBRBCONST = {
                 upgrade: 1,
             },
             {
-                name: 'raccoon',
+                name: 'racoon',
                 number: 0,
                 history: 0,
                 cost: 650000,

js/shop.js

@@ -152,155 +152,103 @@ function loadShop(){
     Cpig1.innerHTML = 'Kup za 126,5 mil kliků'
     Csea1.innerHTML = 'Kup za 143 mil kliků'
   }else{
-    disclick.innerHTML=`You have ${fornum(items.clicks)} clicks, and making ${fornum(cs*items.pres)} per second!`
+    disclick.innerHTML=`You've got ${fornum(items.clicks)} clicks`;
+    document.querySelector('#clickMake').innerHTML = `+${fornum(cs)}/s`
+    //* DISPLAYING THE GENERATION OF CLICKS
+    function displayClickGen(animal, make, upgrade, number){
+      const animalElement = document.querySelector(`#${animal}Make`);
 
-/*
+      if(animalElement){
-    disdog.innerHTML=
+          animalElement.innerHTML = `+ ${fornum(make*upgrade*number*bigredbutton.settings.prestige)}/s`;
-    `You have ${fornum(items.dogs)}<br>
+      }
-    Generating ${fornum((items.dogs*1)*bigredbutton.settings.prestige)} clicks!`
+    }
-    discat.innerHTML=
-    `You have ${fornum(items.cats)}<br>
-    Generating ${fornum((items.cats*12)*bigredbutton.settings.prestige)} clicks!`
-    disfox.innerHTML=
-    `You have ${fornum(items.foxes)}<br>
-    Generating ${fornum((items.foxes*18)*bigredbutton.settings.prestige)} clicks!`
-    diswol.innerHTML=
-    `You have ${fornum(items.wolfs)}<br>
-    Generating ${fornum((items.wolfs*100)*bigredbutton.settings.prestige)} clicks!`
-    disham.innerHTML=
-    `You have ${fornum(items.hamsters)}<br>
-    Generating ${fornum((items.hamsters*130)*bigredbutton.settings.prestige)} clicks!`
-    diswha.innerHTML=
-    `You have ${fornum(items.whales)}<br>
-    Generating ${fornum((items.whales*220)*bigredbutton.settings.prestige)} clicks!`
-    discap.innerHTML=
-    `You have ${fornum(items.capybaras)}<br>
-    Generating ${fornum((items.capybaras*280)*bigredbutton.settings.prestige)} clicks!`
-    dissna.innerHTML=
-    `You have ${fornum(items.snakes)}<br>
-    Generating ${fornum((items.snakes*1000)*bigredbutton.settings.prestige)} clicks!`
-    dische.innerHTML=
-    `You have ${fornum(items.cheetahs)}<br>
-    Generating ${fornum((items.cheetahs*3000)*bigredbutton.settings.prestige)} clicks!`
-    disgir.innerHTML=
-    `You have ${fornum(items.girrafes)}<br>
-    Generating ${fornum((items.girrafes*8400)*bigredbutton.settings.prestige)} clicks!`
-    disoth.innerHTML=
-    `You have ${fornum(items.otters)}<br>
-    Generating ${fornum((items.otters*9000)*bigredbutton.settings.prestige)} clicks!`
-    disrac.innerHTML=
-    `You have ${fornum(items.raccoon)}<br>
-    Generating ${fornum((items.raccoon*14500)*bigredbutton.settings.prestige)} clicks!`
-    disbad.innerHTML=
-    `You have ${fornum(items.badger)}<br>
-    Generating ${fornum((items.badger*32000)*bigredbutton.settings.prestige)} clicks!`
-    dissqu.innerHTML=
-    `You have ${fornum(items.squirrel)}<br>
-    Generating ${fornum((items.squirrel*50000)*bigredbutton.settings.prestige)} clicks!`
-    discha.innerHTML=
-    `You have ${fornum(items.chameleon)}<br>
-    Generating ${fornum((items.chameleon*70000)*bigredbutton.settings.prestige)} clicks!`
-    dischi.innerHTML=
-    `You have ${fornum(items.chicken)}<br>
-    Generating ${fornum((items.chicken*120000)*bigredbutton.settings.prestige)} clicks!`
-    diswom.innerHTML=
-    `You have ${fornum(items.wombat)}<br>
-    Generating ${fornum((items.wombat*280000)*bigredbutton.settings.prestige)} clicks!`
-    disfro.innerHTML=
-    `You have ${fornum(items.frog)}<br>
-    Generating ${fornum((items.frog*900000)*bigredbutton.settings.prestige)} clicks!`
-    dispig.innerHTML=
-    `You have ${fornum(items.pig)}<br>
-    Generating ${fornum((items.pig*1150000)*bigredbutton.settings.prestige)} clicks!`
-    dissea.innerHTML=
-    `You have ${fornum((items.seal||0))}<br>
-    Generating ${fornum(((items.seal||0)*1300000)*bigredbutton.settings.prestige)} clicks!`
-    
-    
-    document.getElementById('dislem').innerHTML=
-    `You have ${fornum(items.lemons)}!`
-    document.getElementById('dislt3').innerHTML=
-    `You have ${fornum(items.lt3)}!<br>
-    Generating ${fornum((items.lt3*items.pres))} Lemons<br>every 100 sec.`
-    
 
-    disdogName.innerHTML=`Dogs`
+    bigredbutton.items.animals.forEach(({ name , make , upgrade , number}) => {
-    discatName.innerHTML=`Cats`
+        displayClickGen(name, make, upgrade, number);
-    disfoxName.innerHTML=`Foxes`
+    });
-    diswolName.innerHTML=`Wolfs`
-    dishamName.innerHTML=`Hamsters`
-    diswhaName.innerHTML=`Whales`
-    discapName.innerHTML=`Capybaras`
-    dissnaName.innerHTML=`Snakes`
-    discheName.innerHTML=`Cheetahs`
-    disgirName.innerHTML=`Girafes`
-    disottName.innerHTML=`Otters`
-    disracName.innerHTML=`Racoons`
-    disbadName.innerHTML=`Badgers`
-    dissquName.innerHTML=`Squirrels`
-    dischaName.innerHTML=`Chameleons`
-    dischiName.innerHTML=`Chickens`
-    diswomName.innerHTML=`Wombats`
-    disfroName.innerHTML=`Frogs`
-    dispigName.innerHTML=`Pigs`
-    disseaName.innerHTML=`Seals`
 
 
-    dislemName.innerHTML=`Lemons`
+    //* DISPLAYING THE NUMBER OF ANIMALS
-    dislt3Name.innerHTML=`Lemon Trees`
+    function displayAnimal(animal, number){
+      const animalElement = document.querySelector(`#dis${animal}`);
 
-    dg1.innerHTML =  'Buy for 100 clicks'
+      if(animalElement){
-    ct1.innerHTML =  'Buy for 10 dogs'
+          animalElement.innerHTML = `You've got ${fornum(number)}`;
-    fx1.innerHTML =  'Buy for 15 dogs'
+      }
-    wl1.innerHTML =  'Buy for:<br> 6 dogs and 5 foxes'
+    }
-    hm1.innerHTML =  'Buy for:<br> 1 wolf and 2 cats'
-    wh1.innerHTML =  'Buy for 2 wolfs'
-    cp1.innerHTML =  'Buy for:<br> 1 whale and 4 cats'
-    sn1.innerHTML =  'Buy for:<br> 2 whales and 4 hamsters'
-    ch1.innerHTML =  'Buy for:<br> 2 snakes and 2 platypuses'
-    gi1.innerHTML =  'Buy for:<br> 1 python and 20 foxes'
-    ot1.innerHTML =  'Buy for:<br> 1 giraffe and 2 capybaras'
-    ra1.innerHTML =  'Buy for:<br> 1 meerkat and 7 porcupines'
-    ba1.innerHTML =  'Buy for:<br> 1 owl and 2 pythons'
-    sq1.innerHTML =  'Buy for:<br> 1 badger and 5 cheetah'
-    cha1.innerHTML = 'Buy for:<br> 1 squirrel and 2 meerkats'
-    chi1.innerHTML = 'Buy for:<br> 2 squirrels and 1 owl'
-    wom1.innerHTML = 'Buy for:<br> 1 chicken and 2 chameleons'
-    fro1.innerHTML = 'Buy for:<br> 1 coyote and 40 snakes'
-    pig1.innerHTML = 'Buy for:<br> 1 bear and 6 badgers'
-    sea1.innerHTML = 'Buy for:<br> 1 pig and 9 otters'
 
-    lm1.innerHTML = 'Buy for 20 cats'
+    bigredbutton.items.animals.forEach(({ name, number }) => {
-    lt1.innerHTML = 'Buy for 5 lemons'
+      displayAnimal(name, number);
-*/
+    });
-    // Buying for clicks
-    /*
-    Cct1.innerHTML =  'Buy for 1.2 k clicks'
-    Cfx1.innerHTML =  'Buy for 1.8 k clicks'
-    Cwl1.innerHTML =  'Buy for 10 k clicks'
-    Chm1.innerHTML =  'Buy for 13 k clicks'
-    Cwh1.innerHTML =  'Buy for 22 k clicks'
-    Ccp1.innerHTML =  'Buy for 28 k clicks'
-    Csn1.innerHTML =  'Buy for 150 k clicks'
-    Cch1.innerHTML =  'Buy for 350 k clicks'
-    Cgi1.innerHTML =  'Buy for 880 k clicks'
-    Cot1.innerHTML =  'Buy for 950 k clicks'
-    Cra1.innerHTML =  'Buy for 1.5 mil clicks'
-    Cba1.innerHTML =  'Buy for 3.5 mil clicks'
-    Csq1.innerHTML =  'Buy for 5.5 mil clicks'
-    Ccha1.innerHTML = 'Buy for 7.7 mil clicks'
-    Cchi1.innerHTML = 'Buy for 13 mil clicks'
-    Cwom1.innerHTML = 'Buy for 31 mil clicks'
-    Cfro1.innerHTML = 'Buy for 99 mil clicks'
-    Cpig1.innerHTML = 'Buy for 126.5 mil clicks'
-    Csea1.innerHTML = 'Buy for 143 mil clicks'*/
 
-    //? BUYING FOR CLICKS DISPLAY
 
+    //* DISPLAYING THE NUMBER OF ANIMALS
+    function displayAnimalName(animal){
+      const animalElement = document.querySelector(`#dis${animal}Name`);
+
+      if(animalElement){
+          animalElement.innerHTML = `${animal}`;
+      }
+    }
+
+    bigredbutton.items.animals.forEach(({ name }) => {
+      displayAnimalName(name);
+    });
+
+    //* DISPLAYING THE COST OF ANIMAL BUY
+    function purchaseText(animal, text = null){
+      const animalElement = document.querySelector(`#${animal}1`);
+  
+      if(animalElement){
+          if(text){
+              animalElement.innerHTML = text;
+          }else{
+              animalElement.innerHTML = `${animal}`;
+          }
+      }
+    }
+
+    const purchases = [
+      { id: 'dog', text: 'Buy for 10 dogs' },
+      { id: 'cat', text: 'Buy for 15 dogs' },
+      { id: 'fox', text: 'Buy for:<br> 6 dogs and 5 foxes' },
+      { id: 'wolf', text: 'Buy for:<br> 1 wolf and 2 cats' },
+      { id: 'hamster', text: 'Buy for:<br>' },
+      { id: 'whale', text: 'Buy for 2 wolfs' },
+      { id: 'capybara', text: 'Buy for:<br> 1 whale and 4 cats' },
+      { id: 'snake', text: 'Buy for:<br> 2 whales and 4 hamsters' },
+      { id: 'cheetah', text: 'Buy for:<br> 2 snakes and 2 platypuses' },
+      { id: 'giraffe', text: 'Buy for:<br> 1 python and 20 foxes' },
+      { id: 'otter', text: 'Buy for:<br> 1 giraffe and 2 capybaras' },
+      { id: 'racoon', text: 'Buy for:<br> 1 meerkat and 7 porcupines' },
+      { id: 'badger', text: 'Buy for:<br> 1 owl and 2 pythons' },
+      { id: 'squirrel', text: 'Buy for:<br> 1 badger and 5 cheetah' },
+      { id: 'chameleon', text: 'Buy for:<br> 1 squirrel and 2 meerkats' },
+      { id: 'chicken', text: 'Buy for:<br> 2 squirrels and 1 owl' },
+      { id: 'wombat', text: 'Buy for:<br> 1 chicken and 2 chameleons' },
+      { id: 'frog', text: 'Buy for:<br> 1 coyote and 40 snakes' },
+      { id: 'pig', text: 'Buy for:<br> 1 bear and 6 badgers' },
+      { id: 'seal', text: 'Buy for:<br> 1 pig and 9 otters' }
+    ];
+
+    // Function to find corresponding text for a given animal
+    function getPurchaseText(animalName){
+      const purchase = purchases.find(p => p.id === animalName);
+      return purchase ? purchase.text : null;
+    }
+
+    // Updating animal names from bigredbutton.items.animals with purchase text
+    bigredbutton.items.animals.forEach(({ name }) => {
+      const text = getPurchaseText(name);
+      purchaseText(name, text);
+    });
+
+
+    //* BUYING FOR CLICKS DISPLAY
     function internationalClicksDisplay(animal, cost){
       const animalElement = document.querySelector(`#C${animal}1`);
 
-      if (animalElement) {
+      if(animalElement){
           animalElement.innerHTML = `Buy for ${fornum(cost)} clicks!`;
       }
     }
@@ -308,18 +256,36 @@ function loadShop(){
     bigredbutton.items.animals.forEach(({ name , cost }) => {
         internationalClicksDisplay(name, cost);
     });
+  }/*
+    dislem.innerHTML=
+    `You have ${fornum(items.lemons)}!`
+    dislt3.innerHTML=
+    `You have ${fornum(items.lt3)}!<br>
+    Generating ${fornum((items.lt3*items.pres))} Lemons<br>every 100 sec.`
 
-  }
+    dislemName.innerHTML=`Lemons`
+    dislt3Name.innerHTML=`Lemon Trees`
+
+    lm1.innerHTML = 'Buy for 20 cats'
+    lt1.innerHTML = 'Buy for 5 lemons'*/
 }
 
 // uploadShop
 function uploadShop(){update();loadShop();}
 
 // Nákupy 
+
+let animal = bigredbutton.items.animals;
+
+function numHis(animals, num){
+  animal[animals].number += num;
+  animal[animals].history += num;
+}
+
 function buydog(){
-  if (items.clicks>=100){
+  if(bigredbutton.items.special[0].number>=100){
-    items.clicks -= 100;
+    bigredbutton.items.special[0] -= 100;
-    items.dogs += 1;
+    numHis(0,1);
   }
   uploadShop();
 }
@@ -553,7 +519,7 @@ function buylem(){
   uploadShop();
 }
 function buylt3(){
-  if (items.lemons>=5) {
+  if(items.lemons>=5){
     items.lemons-=5;
     items.lt3+=1;
   }
@@ -868,7 +834,7 @@ function canimal(animal, cost){
 function cManimal(animal, cost) {
   const quantity = Math.floor(items.clicks / cost);
 
-  if (quantity > 0) {
+  if(quantity > 0){
     items[animal] += quantity;
     items.clicks -= quantity * cost;
     uploadShop();

js/title.js

@@ -225,7 +225,7 @@ let bigredbutton = {
               upgrade: 1,
           },
           {
-              name: 'raccoon',
+              name: 'racoon',
               number: 0,
               history: 0,
               cost: 650000,

txt/add.txt

@@ -21,7 +21,7 @@ max 5 hour
 1 wombat     = 30 000 c/s     =  1 651 900 | 1 chim + 6 wha
 1 frog       = 50 000 c/s     =  2 782 400 | 1 wom + 1 cham
 1 pig        = 135 000 c/s    =  7 624 300 | 2 frog + 5 racc
-1 seal       = 270 900 c/s    = 15 323 600 | 2 pig + 10 foxes
+1 seal       = 275 900 c/s    = 15 323 600 | 2 pig + 10 foxes
 
 1 platypus
 1 porcupine