Rock Paper Scissors + finally design of the buttons in main PetPet page + MY OWN DOMAIN https://petpet.mreidam.com

Games/RockPaperScissors/main.js

@@ -10,20 +10,31 @@ window.onload = () => {
     for(let i=0;i<3;i++){
         let choice = document.createElement("img");
         choice.id = choices[i];
-        choice.src = `${choices[i]}.png`;
+        choice.src = `0${choices[i]}.png`;
         choice.setAttribute("draggable", "false");
-        choice.addEventListener("click", selectChoice);
+        choice.addEventListener("click", function() {
+            selectChoice(false, this.id);
+        });
         document.getElementById("choices").append(choice);
     }
 }
 
-function selectChoice(){
+document.addEventListener('keyup', (event) => {
-    you = this.id;
+    if(event.key === '1' || event.key === '+'){
-    document.getElementById("your-choice").src = `${you}.png`;
+        you = 'rock';
-
+        selectChoice(true);
-    opponent = choices[Math.floor(Math.random()*3)];
+    }
-    document.getElementById("opponent-choice").src = `${opponent}.png`;
+    if(event.key === '2' || event.key === 'ě'){
+        you = 'paper';
+        selectChoice(true);
+    }
+    if(event.key === '3' || event.key === 'š'){
+        you = 'scissors';
+        selectChoice(true);
+    }
+});
 
+function outcome(you, opponent){
     if(you===opponent){
         playerScore++;
         opponentScore-=-1;
@@ -51,6 +62,19 @@ function selectChoice(){
             }
         }
     }
+}
+
+function selectChoice(fast, choice = null){
+    if(!fast && choice !== null){
+        you = choice;
+    }
+    document.getElementById("your-choice").src = `${you}.png`;
+
+    opponent = choices[Math.floor(Math.random()*3)];
+    document.getElementById("opponent-choice").src = `${opponent}.png`;
+
+    outcome(you, opponent);
+
     document.getElementById("opponent-score").innerHTML = opponentScore;
     document.getElementById("your-score").innerHTML = playerScore;
 }

index.html

@@ -17,7 +17,7 @@
         <div>
             <h1><span id="nameCa">Junior</span>-<span>BOY</span></h1>
             <p>Age: <span id="ageN"></span></p>
-            <img src="./img/tiger/baby.png" id="anim">
+            <img src="./img/tiger/baby.png" id="anim" draggable="false">
         </div>
         <div class="activ">
             <article class="item">
@@ -41,7 +41,7 @@
             <img class="gamesPromo" src="./img/promorighth.png" alt="Promo for Games">
             <div class="gamesText">
                 <h2>Games</h2>
-                <a href="./Games/">Let's go!</a>
+                <a href="./Games/">Let's earn money!</a>
             </div>
             <img class="gamesPromo" src="./img/promoleflt.png" alt="Promo for Games">
         </div>

main.js

@@ -209,3 +209,12 @@ function time(){
         time();
     },1000);
 }
+
+function debug(){
+    attributes.Clean.value = Infinity;
+    attributes.Hp.value = Infinity;
+    attributes.Hunger.value = Infinity;
+    attributes.Joy.value = Infinity;
+    attributes.Age.max = Infinity
+    display();
+}

style.css

@@ -32,6 +32,7 @@ main{
 #anim{
     width: 200px;
     margin-top: 1rem;
+    filter: drop-shadow(2px 2px 5px #aaaaaaaa);
 }
 
 .activ{
@@ -48,6 +49,7 @@ main{
     border-radius: .5rem;
     display: flex;
     flex-direction: column;
+    align-items: center;
     justify-content: space-around;
     padding: 1rem;
     margin: .5rem;
@@ -90,6 +92,22 @@ span p{
 
 .actBTN{
     display: block;
+    border: none;
+    height: 20px;
+    width: 50px;
+    text-align: center;
+    border-radius: 5px;
+    color: #fff;
+    background: #666666aa;
+    box-shadow: 
+        inset 5px 5px 15px #777,
+        5px 5px 15px #555;
+    cursor: pointer;
+    transition: .5s;
+}
+.actBTN:hover{
+    background-color: #3c3;
+    transition: .1s;
 }
 
 .Lime{color: lime; user-select: none;}.Yellow{color: yellow; user-select: none;}.Orange{color: orange; user-select: none;}.Red{color: red; user-select: none;}.DarkRed{color: darkred; user-select: none;}