Eidam/PetPet
1
0
Fork 0
mirror of https://github.com/MrEidam/PetPet.git synced 2026-04-17 15:43:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Font and Shiba + Pet Chosing

Browse Source
This commit is contained in:
MrEidam
2024-09-17 14:22:35 +02:00
parent 9b3e7ecaa1
commit 2ee343305f
5 changed files with 107 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
img/dead/shiba.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

BIN
img/dedsad.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

13
index.html
View File

@@ -9,9 +9,14 @@
<title>PetPet</title> <title>PetPet</title>
</head> </head>
<body> <body>
<dialog id="chui" open> <dialog id="chui">
<p>:OOOO</p> <h1>Welcome to PetPet!</h1>
<a href="./Games/" style="color: #fff;text-decoration: none;font-size: 20px;">:0000</a> <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> </dialog>
<div id="blurs"></div> <div id="blurs"></div>
<article class="cash"> <article class="cash">
@@ -22,7 +27,7 @@
<div> <div>
<h1><span id="nameCa">Junior</span>-<span>BOY</span></h1> <h1><span id="nameCa">Junior</span>-<span>BOY</span></h1>
<p>Age: <span id="ageN"></span></p> <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>
<div class="activ"> <div class="activ">
<article class="item"> <article class="item">

99
main.js
View File

@@ -9,7 +9,24 @@ const Dhealth = document.querySelector('#heaN');
let coins = 0; 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 = { const animalImage = {
animal: { animal: {
@@ -18,13 +35,13 @@ const animalImage = {
`./img/${chosenAnimal}/baby.png`, `./img/${chosenAnimal}/baby.png`,
`./img/${chosenAnimal}/teen.png`, `./img/${chosenAnimal}/teen.png`,
`./img/${chosenAnimal}/adult.png`, `./img/${chosenAnimal}/adult.png`,
`./img/${chosenAnimal}/senior.png` `./img/${chosenAnimal}/senior.png`,
] ]
}, },
Dead: `./img/dead/${chosenAnimal}.png`, Dead: function(){ return `./img/dead/${chosenAnimal}.png`; },
Gone: `./img/gone/${chosenAnimal}.png` Gone: function(){ return `./img/gone/${chosenAnimal}.png`; }
} }
} };
let attributes = { let attributes = {
Name: [], Name: [],
@@ -64,12 +81,32 @@ let attributes = {
away: 0, 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',() => { switch(num){
////choseTime(); case 0:
chosenAnimal = 'tiger';
break;
case 1:
chosenAnimal = 'shiba';
break;
default:
alert('MrEidam did a oopsie dopsie');
break;
}
display(); display();
time(); time();
money(); money();
}
window.addEventListener('load',() => {
choseTime();
}); });
function money(){ function money(){
@@ -102,20 +139,27 @@ function toCPercen(varr){
varr.value = varr.min; varr.value = varr.min;
} }
switch (true){ let colorClass;
switch(true){
case num >= 80: case num >= 80:
return `<p class="Lime">${num}%</p>`; colorClass = "Lime";
break;
case num >= 60: case num >= 60:
return `<p class="Yellow">${num}%</p>`; colorClass = "Yellow";
break;
case num >= 40: case num >= 40:
return `<p class="Orange">${num}%</p>`; colorClass = "Orange";
break;
case num >= 20: case num >= 20:
return `<p class="DarkOrange">${num}%</p>`; colorClass = "DarkOrange";
break;
default: default:
return `<p class="Red">${num}%</p>`; colorClass = "Red";
} }
return `<p class="${colorClass}">${num}%</p>`;
} }
function display(){ function display(){
Dage.innerHTML = (attributes.Age.value); Dage.innerHTML = (attributes.Age.value);
Djoy.innerHTML = toCPercen(attributes.Joy); Djoy.innerHTML = toCPercen(attributes.Joy);
@@ -123,36 +167,33 @@ function display(){
Dclean.innerHTML = toCPercen(attributes.Clean); Dclean.innerHTML = toCPercen(attributes.Clean);
Dhealth.innerHTML = toCPercen(attributes.Hp); Dhealth.innerHTML = toCPercen(attributes.Hp);
if(attributes.Age.value<=6){ if(attributes.Age.value <= 6){
NameC.innerHTML = `Junior`; NameC.innerHTML = `Junior`;
Aimg.src = animalImage.animal.Normal.age[0]; Aimg.src = getAnimalImage(0);
}else if(attributes.Age.value<18){ }else if(attributes.Age.value < 18){
NameC.innerHTML = `Teen`; NameC.innerHTML = `Teen`;
Aimg.src = animalImage.animal.Normal.age[1]; Aimg.src = getAnimalImage(1);
}else if(attributes.Age.value<60){ }else if(attributes.Age.value < 60){
NameC.innerHTML = `Adult`; NameC.innerHTML = `Adult`;
Aimg.src = animalImage.animal.Normal.age[2]; Aimg.src = getAnimalImage(2);
}else if(attributes.Age.value<attributes.Age.max){ }else if(attributes.Age.value < attributes.Age.max){
NameC.innerHTML = `Senior`; NameC.innerHTML = `Senior`;
Aimg.src = animalImage.animal.Normal.age[3]; Aimg.src = getAnimalImage(3);
}else{ }else{
NameC.innerHTML = `Dead`; NameC.innerHTML = `Dead`;
attributes.Life.dead = 1; attributes.Life.dead = 1;
btnHide(); btnHide();
Aimg.src = animalImage.animal.Dead; Aimg.src = getDeadImage();
} }
if(attributes.Hp.value<=0){ if(attributes.Life.dead){
NameC.innerHTML = `Dead`;
attributes.Life.dead = 1;
btnHide(); btnHide();
Aimg.src = animalImage.animal.Dead; Aimg.src = animalImage.animal.Dead();
} }
if(attributes.Life.away){ if(attributes.Life.away) {
NameC.innerHTML = `Gone`;
btnHide(); btnHide();
Aimg.src = animalImage.animal.Gone; Aimg.src = animalImage.animal.Gone();
} }
} }

34
style.css
View File

@@ -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; padding: 0;
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
text-align: center; text-align: center;
font-family: 'Ubuntu', sans-serif;
} }
body{ body{
display: flex; display: flex;
@@ -172,13 +174,31 @@ span p{
transition: .5s; transition: .5s;
overflow: hidden; overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
} }
#chui::backdrop{ #chui h2{
content: ''; }
position: absolute;
background: #3c3; .animalChoose{
width: 200px; border: none;
height: 300px; border-radius: 50%;
border: red 2px solid; 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;
} }