Font and Shiba + Pet Chosing

2026-04-17 15:43:31 +00:00 · 2024-09-17 14:22:35 +02:00
parent 9b3e7ecaa1
commit 2ee343305f
5 changed files with 107 additions and 41 deletions
--- a/img/dead/shiba.png
+++ b/img/dead/shiba.png
--- a/img/dedsad.png
+++ b/img/dedsad.png
--- a/index.html
+++ b/index.html
@@ -9,9 +9,14 @@
    <title>PetPet</title>
 </head>
 <body>
-    <dialog id="chui" open>
-        <p>:OOOO</p>
-        <a href="./Games/" style="color: #fff;text-decoration: none;font-size: 20px;">:0000</a>
+    <dialog id="chui">
+        <h1>Welcome to PetPet!</h1>
+        <h2>Please choose an Animal:</h2>
+        <div>
+            <img src="./img/tiger/baby.png" onclick="option(0)" title="tiger" alt="tiger" class="animalChoose">
+            <img src="./img/shiba/baby.png" onclick="option(1)" title="shiba" alt="shiba" class="animalChoose">
+        </div>
+        <p>Made by <a>MrEidam</a> & <a>Tufsie</a></p>
    </dialog>
    <div id="blurs"></div>
    <article class="cash">
@@ -22,7 +27,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" draggable="false">
+            <img src="./img/gone/Invis.png" id="anim" draggable="false">
        </div>
        <div class="activ">
            <article class="item">
--- a/main.js
+++ b/main.js
@@ -9,7 +9,24 @@ const Dhealth = document.querySelector('#heaN');

 let coins = 0;

-let chosenAnimal = 'tiger';
+let chosenAnimal = '';
+
+function getAnimalImage(stage){
+    const stages = ['baby', 'teen', 'adult', 'senior'];
+    if(stage >= 0 && stage < stages.length){
+        return `./img/${chosenAnimal}/${stages[stage]}.png`;
+    }
+    return '';
+}
+
+function getDeadImage(){
+    return `./img/dead/${chosenAnimal}.png`;
+}
+
+function getGoneImage(){
+    return `./img/gone/${chosenAnimal}.png`;
+}
+

 const animalImage = {
    animal: {
@@ -18,13 +35,13 @@ const animalImage = {
                `./img/${chosenAnimal}/baby.png`,
                `./img/${chosenAnimal}/teen.png`,
                `./img/${chosenAnimal}/adult.png`,
-                `./img/${chosenAnimal}/senior.png`
+                `./img/${chosenAnimal}/senior.png`,
            ]
        },
-        Dead: `./img/dead/${chosenAnimal}.png`,
-        Gone: `./img/gone/${chosenAnimal}.png`
+        Dead: function(){ return `./img/dead/${chosenAnimal}.png`; },
+        Gone: function(){ return `./img/gone/${chosenAnimal}.png`; }
    }
-}
+};

 let attributes = {
    Name: [],
@@ -64,12 +81,32 @@ let attributes = {
        away: 0,
    }
 }
+function choseTime(){
+    document.querySelector('#chui').style.display = 'flex';
+    document.querySelector('#blurs').style.display = 'flex';
+}
+function option(num){
+    document.querySelector('#chui').style.display = 'none';
+    document.querySelector('#blurs').style.display = 'none';

-window.addEventListener('load',() => {
-    ////choseTime();
+    switch(num){
+        case 0:
+            chosenAnimal = 'tiger';
+            break;
+        case 1:
+            chosenAnimal = 'shiba';
+            break;
+        default:
+            alert('MrEidam did a oopsie dopsie');
+            break;
+    }
    display();
    time();
    money();
+}
+
+window.addEventListener('load',() => {
+    choseTime();
 });

 function money(){
@@ -102,20 +139,27 @@ function toCPercen(varr){
        varr.value = varr.min;
    }

-    switch (true){
+    let colorClass;
+    switch(true){
        case num >= 80:
-            return `<p class="Lime">${num}%</p>`;
+            colorClass = "Lime";
+            break;
        case num >= 60:
-            return `<p class="Yellow">${num}%</p>`;
+            colorClass = "Yellow";
+            break;
        case num >= 40:
-            return `<p class="Orange">${num}%</p>`;
+            colorClass = "Orange";
+            break;
        case num >= 20:
-            return `<p class="DarkOrange">${num}%</p>`;
+            colorClass = "DarkOrange";
+            break;
        default:
-            return `<p class="Red">${num}%</p>`;
+            colorClass = "Red";
    }
+    return `<p class="${colorClass}">${num}%</p>`;
 }

+
 function display(){
    Dage.innerHTML    = (attributes.Age.value);
    Djoy.innerHTML    = toCPercen(attributes.Joy);
@@ -123,36 +167,33 @@ function display(){
    Dclean.innerHTML  = toCPercen(attributes.Clean);
    Dhealth.innerHTML = toCPercen(attributes.Hp);

-    if(attributes.Age.value<=6){
+    if(attributes.Age.value <= 6){
        NameC.innerHTML = `Junior`;
-        Aimg.src = animalImage.animal.Normal.age[0];
-    }else if(attributes.Age.value<18){
+        Aimg.src = getAnimalImage(0);
+    }else if(attributes.Age.value < 18){
        NameC.innerHTML = `Teen`;
-        Aimg.src = animalImage.animal.Normal.age[1];
-    }else if(attributes.Age.value<60){
+        Aimg.src = getAnimalImage(1);
+    }else if(attributes.Age.value < 60){
        NameC.innerHTML = `Adult`;
-        Aimg.src = animalImage.animal.Normal.age[2];
-    }else if(attributes.Age.value<attributes.Age.max){
+        Aimg.src = getAnimalImage(2);
+    }else if(attributes.Age.value < attributes.Age.max){
        NameC.innerHTML = `Senior`;
-        Aimg.src = animalImage.animal.Normal.age[3];
+        Aimg.src = getAnimalImage(3);
    }else{
        NameC.innerHTML = `Dead`;
        attributes.Life.dead = 1;
        btnHide();
-        Aimg.src = animalImage.animal.Dead;
+        Aimg.src = getDeadImage();
    }

-    if(attributes.Hp.value<=0){
-        NameC.innerHTML = `Dead`;
-        attributes.Life.dead = 1;
+    if(attributes.Life.dead){
        btnHide();
-        Aimg.src = animalImage.animal.Dead;
+        Aimg.src = animalImage.animal.Dead();
    }
-
-    if(attributes.Life.away){
-        NameC.innerHTML = `Gone`;
+    
+    if(attributes.Life.away) {
        btnHide();
-        Aimg.src = animalImage.animal.Gone;
+        Aimg.src = animalImage.animal.Gone();
    }
 }

--- a/style.css
+++ b/style.css
@@ -1,8 +1,10 @@
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
 *{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-align: center;
+    font-family: 'Ubuntu', sans-serif;
 }
 body{
    display: flex;
@@ -172,13 +174,31 @@ span p{

    transition: .5s;
    overflow: hidden;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
 }

-#chui::backdrop{
-    content: '';
-    position: absolute;
-    background: #3c3;
-    width: 200px;
-    height: 300px;
-    border: red 2px solid;
+#chui h2{
+}
+
+.animalChoose{
+    border: none;
+    border-radius: 50%;
+    background-color: #333;
+    box-shadow: 10px 10px 15px #444,
+          inset 7.5px 7.5px 10px #bbb;
+    width: 150px;
+    transition: .5s;
+}
+.animalChoose:hover{
+    transition: .25s;
+    transform: scale(1.2);
+    background-color: #c33;
+    cursor: pointer;
+}
+.animalChoose:nth-child(1){
+    margin-right: 1.5rem;
 }