Cristiano Pires
2 years ago
parent
691f6ac6bd
commit
58009675a7
@ -0,0 +1 @@
|
||||
node_modules
|
||||
@ -0,0 +1,8 @@
|
||||
FROM node:18
|
||||
WORKDIR /home/hc/Desktop/champs
|
||||
COPY package*.json ./
|
||||
COPY . ./
|
||||
RUN npm install
|
||||
EXPOSE 8080
|
||||
CMD ["node", "server.js"]
|
||||
|
||||
@ -0,0 +1,15 @@
|
||||
exports.get = (io)=>
|
||||
{
|
||||
return(req,res)=>
|
||||
{
|
||||
//IO interaction shit
|
||||
res.render('game');
|
||||
}
|
||||
}
|
||||
exports.getC = (io)=>
|
||||
{
|
||||
return (req,res)=>
|
||||
{
|
||||
res.render('champion');
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
exports.get = (io)=>
|
||||
{
|
||||
return(req,res)=>
|
||||
{
|
||||
res.render('home')
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "lol-champ-chalenge",
|
||||
"version": "1.0.0",
|
||||
"description": "LeagueOfLegends Champion Naming Challange",
|
||||
"main": "server.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"devStart": "nodemon server.js",
|
||||
"start": "node server.js"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"cors": "^2.8.5",
|
||||
"ejs": "^3.1.8",
|
||||
"express": "^4.18.2",
|
||||
"socket.io": "^4.6.0"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,195 @@
|
||||
|
||||
/* width */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
background: #020a0e91;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #076969;
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #064e4e;
|
||||
}
|
||||
body
|
||||
{
|
||||
--bgColor: #051c25;
|
||||
--borderSize: 3px;
|
||||
background: var(--bgColor);
|
||||
font-size: 16px;
|
||||
}
|
||||
html, body
|
||||
{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
body
|
||||
{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
h1
|
||||
{
|
||||
position: absolute;
|
||||
top: -0.5em;
|
||||
color: #9fc3c3;
|
||||
font-family: 'Eczar', serif;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
font-size: 3em;
|
||||
}
|
||||
h2
|
||||
{
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
color: #9fc3c3;
|
||||
font-family: 'Eczar', serif;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
font-size: 2em;
|
||||
}
|
||||
.wrapper
|
||||
{
|
||||
position: absolute;
|
||||
height: 80%;
|
||||
width: 80%;
|
||||
top:14%;
|
||||
left:10%;
|
||||
}
|
||||
.card
|
||||
{
|
||||
position: relative;
|
||||
float:left;
|
||||
border: 3px solid #7A6B43;
|
||||
margin: 2vw;
|
||||
}
|
||||
|
||||
.ability
|
||||
{
|
||||
float:left;
|
||||
height: 4vh;
|
||||
width: 4vh;
|
||||
margin: 1vw;
|
||||
margin-top: 2vw;
|
||||
margin-bottom: 3vh;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 4vh 4vh;
|
||||
cursor: pointer;
|
||||
}
|
||||
.active
|
||||
{
|
||||
border: 3px solid #d1cab8;
|
||||
}
|
||||
.abilityInfo
|
||||
{
|
||||
position: absolute;
|
||||
top:9vh;
|
||||
height: 30vh;
|
||||
width: 65%;
|
||||
left:21vmin;
|
||||
margin-left: 5vw;
|
||||
}
|
||||
.spellName
|
||||
{
|
||||
margin-bottom: -2vmin;
|
||||
}
|
||||
.description
|
||||
{
|
||||
padding-top: 1vmin;
|
||||
}
|
||||
.champion
|
||||
{
|
||||
background-repeat: no-repeat;
|
||||
background-size: 20vmin 36.2vmin;
|
||||
width: 20vmin;
|
||||
height: 36vmin;
|
||||
}
|
||||
.lore
|
||||
{
|
||||
position: absolute;
|
||||
top:24vmin;
|
||||
left:-15vw;
|
||||
float:right;
|
||||
margin-top: 4vmax;
|
||||
height: 25vh;
|
||||
|
||||
}
|
||||
.lore_title
|
||||
{
|
||||
color: #9fc3c3;
|
||||
font-family: 'Eczar', serif;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
font-size: 2em;
|
||||
}
|
||||
p
|
||||
{
|
||||
font-family: 'Eczar', serif;
|
||||
font-weight: bold;
|
||||
color: #adc0c0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.bt_skins
|
||||
{
|
||||
display: block;
|
||||
position: relative;
|
||||
top:calc(100% - 5.3vmin);
|
||||
height: 3.5vmin;
|
||||
width: 3.5vmin;
|
||||
left:3.5vmin;
|
||||
float: left;
|
||||
margin-right: 1vmin;
|
||||
}
|
||||
.bt_skins span
|
||||
{
|
||||
color:ivory;
|
||||
position: relative;
|
||||
top:0.5vmin;
|
||||
cursor: pointer;
|
||||
}
|
||||
.next
|
||||
{
|
||||
margin-left:1vmin ;
|
||||
}
|
||||
.chroma
|
||||
{
|
||||
height: 3.5vmin;
|
||||
width: 3.5vmin;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0px 0px 0px 2px #7A6B43;
|
||||
background: #9fc3c3;
|
||||
background-image:
|
||||
radial-gradient(
|
||||
white,
|
||||
rgba(255, 255, 255, 0) 85%
|
||||
),
|
||||
conic-gradient(yellow,red , blue, green,yellow)
|
||||
;
|
||||
}
|
||||
|
||||
.chroma .center
|
||||
{
|
||||
background-color: #051c25;
|
||||
border-radius: 50%;
|
||||
height: 1.5vh;
|
||||
width: 1.5vh;
|
||||
position: relative;
|
||||
top: calc(50% - 0.75vh);
|
||||
left: calc(50% - 0.75vh);
|
||||
}
|
||||
.hidden
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
@ -0,0 +1,264 @@
|
||||
body
|
||||
{
|
||||
--bgColor: #051c25;
|
||||
--borderSize: 3px;
|
||||
background: var(--bgColor);
|
||||
}
|
||||
/* width */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
background: #020a0e91;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #076969;
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #064e4e;
|
||||
}
|
||||
html, body
|
||||
{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
body
|
||||
{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.in
|
||||
{
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
/* left:1em; */
|
||||
left:10%;
|
||||
height: 2.5em;
|
||||
width: 80%;
|
||||
background-color: #020a0e;
|
||||
color: #9fc3c3;
|
||||
font-family: 'Eczar', serif;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
border: 0px;
|
||||
padding-left: 1.3em;
|
||||
}
|
||||
.in:focus
|
||||
{
|
||||
border:0px;
|
||||
outline: none;
|
||||
}
|
||||
.infoContainer
|
||||
{
|
||||
position: absolute;
|
||||
top:4em;
|
||||
left:20%;
|
||||
width:60%;
|
||||
height: 3%;
|
||||
}
|
||||
|
||||
#ChampGrid {
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: 90%;
|
||||
width: 90%;
|
||||
top:6em;
|
||||
left:5em;
|
||||
}
|
||||
#missingGrid
|
||||
{
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 87%;
|
||||
height: 72%;
|
||||
top:6em;
|
||||
left:5%;
|
||||
padding-top: 3vh;
|
||||
padding-left: 2vw;
|
||||
z-index: 999;
|
||||
overflow-y: scroll;
|
||||
background-color: #020a0e;
|
||||
border: 2px solid #7A6B43;
|
||||
}
|
||||
|
||||
.card
|
||||
{
|
||||
display: block;
|
||||
float: left;
|
||||
height: 100px;
|
||||
width: 75px;
|
||||
background-color: #181e22;
|
||||
padding: 0.2em;
|
||||
border: 2px solid #7A6B43;
|
||||
margin: 0.1em;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
img
|
||||
{
|
||||
margin:0;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
p
|
||||
{
|
||||
margin-top: 0%;
|
||||
text-align: center;
|
||||
font-family: 'Eczar', serif;
|
||||
font-weight: bold;
|
||||
color: #9fc3c3;
|
||||
max-width: 90%;
|
||||
max-height: 20%;
|
||||
}
|
||||
.infoContainer p
|
||||
{
|
||||
display: inline-block;
|
||||
max-height: 100%;
|
||||
|
||||
}
|
||||
#guessedInfo
|
||||
{
|
||||
float: left;
|
||||
}
|
||||
#totalInfo
|
||||
{
|
||||
float: right;
|
||||
position: relative;
|
||||
right: 20%
|
||||
}
|
||||
.timer
|
||||
{
|
||||
position: absolute;
|
||||
top: 1.1em;
|
||||
right: 12vw;
|
||||
|
||||
}
|
||||
.timer_Nums
|
||||
{
|
||||
font-family: 'Eczar', serif;
|
||||
font-weight: bold;
|
||||
font-size: 1.5em;
|
||||
color: #9fc3c3;
|
||||
}
|
||||
#endCard
|
||||
{
|
||||
position: absolute;
|
||||
height: 38vh;
|
||||
width: 40vw;
|
||||
background-color: #020a0e;
|
||||
border: 2px solid #7A6B43;
|
||||
top:calc(50% - 17.5vh);
|
||||
left:calc(50% - 20vw);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 3vmin;
|
||||
font-weight: bolder;
|
||||
font-family: 'Eczar', serif;
|
||||
color: #9fc3c3;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
#endCard p
|
||||
{
|
||||
position: relative;
|
||||
font-size: 0.5em;
|
||||
left:2vw;
|
||||
}
|
||||
.bt
|
||||
{
|
||||
display: block;
|
||||
position: relative;
|
||||
left: calc(50% - 2em);
|
||||
height: 1em;
|
||||
width: 4em;
|
||||
background-color: #082c3a;
|
||||
border: 2px solid #7A6B43;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
#reload
|
||||
{
|
||||
position: relative;
|
||||
bottom:-3vh;
|
||||
}
|
||||
#missed_bt
|
||||
{
|
||||
position: relative;
|
||||
bottom: -4vh;
|
||||
left:calc(50% - 9.5vw);
|
||||
width: 19vw;
|
||||
}
|
||||
.bt:hover
|
||||
{
|
||||
box-shadow:0 0 3px 3px #635738;
|
||||
}
|
||||
.bt_text
|
||||
{
|
||||
position: relative;
|
||||
bottom: 10%;
|
||||
font-size: 0.7em;
|
||||
}
|
||||
#giveUp
|
||||
{
|
||||
background-color: #082c3a;
|
||||
position: absolute;
|
||||
top: 4em;
|
||||
left: 74vw;
|
||||
text-align: center;
|
||||
font-family: 'Eczar', serif;
|
||||
font-weight: bold;
|
||||
color: #9fc3c3;
|
||||
}
|
||||
#giveUp .bt_text
|
||||
{
|
||||
left:0;
|
||||
}
|
||||
.hidden
|
||||
{
|
||||
display: none !important;
|
||||
}
|
||||
#close_bt
|
||||
{
|
||||
/* position: relative; */
|
||||
position: -webkit-sticky; /* Safari */
|
||||
position: sticky;
|
||||
margin-bottom: -100%;
|
||||
top: -2.4vh;
|
||||
right: 0.4vw;
|
||||
float:right;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
color: #076969;
|
||||
}
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings:
|
||||
'FILL' 0,
|
||||
'wght' 400,
|
||||
'GRAD' 0,
|
||||
'opsz' 48
|
||||
}
|
||||
|
||||
.rank
|
||||
{
|
||||
background-image:url('https://static.developer.riotgames.com/img/docs/lol/emblems_and_positions.png');
|
||||
background-repeat: no-repeat;
|
||||
/* Iron 0 Bronze -140 Silver -280 Gold -425 Platinum -570 Diamond -716 Master -860 GrandMaster -1010 Challanger -1151*/
|
||||
background-position: -150px 32px ;
|
||||
width: 150px;
|
||||
height: 200px;
|
||||
margin-top: -27px;
|
||||
position: relative;
|
||||
top:calc(50%-100px);
|
||||
left:calc(50% - 75px)
|
||||
}
|
||||
@ -0,0 +1,104 @@
|
||||
body
|
||||
{
|
||||
--bgColor: #051c25;
|
||||
--borderSize: 3px;
|
||||
background: var(--bgColor);
|
||||
font-size: 16px;
|
||||
}
|
||||
html, body
|
||||
{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
body
|
||||
{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
h1
|
||||
{
|
||||
position: absolute;
|
||||
top:15%;
|
||||
left:calc(40% - 2em);
|
||||
color: #9fc3c3;
|
||||
font-family: 'Eczar', serif;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
font-size: 3em;
|
||||
}
|
||||
.wrapper
|
||||
{
|
||||
position: absolute;
|
||||
top:60vh;
|
||||
left:calc(50% - 111px);
|
||||
}
|
||||
.bt
|
||||
{
|
||||
position: absolute;
|
||||
border-bottom: 100px solid #1e252a;
|
||||
border-left: 50px solid transparent;
|
||||
border-right: 50px solid transparent;
|
||||
border-radius: 0% 0% 50% 50%;
|
||||
height: 0;
|
||||
cursor: pointer;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.base
|
||||
{
|
||||
z-index: 1;
|
||||
}
|
||||
.border
|
||||
{
|
||||
position: relative;
|
||||
left:-5px;
|
||||
top: -0.23em;
|
||||
z-index: 0;
|
||||
border-bottom: 108px solid #0F9C94;
|
||||
border-left: 52px solid transparent;
|
||||
border-right: 52px solid transparent;
|
||||
border-radius: 0% 0% 50% 50%;
|
||||
height: 0;
|
||||
width: 206px;
|
||||
}
|
||||
|
||||
.border2
|
||||
{
|
||||
position: relative;
|
||||
top:calc(-108px + -1em);
|
||||
left:calc(-5px + -1em);
|
||||
z-index: -1;
|
||||
border-bottom: calc(108px + 1.5em) solid #081620;
|
||||
border-left: 60px solid transparent;
|
||||
border-right: 60px solid transparent;
|
||||
border-radius: 0% 0% 50% 50%;
|
||||
height: 0;
|
||||
width: calc(206px + 1em);
|
||||
}
|
||||
.border3
|
||||
{
|
||||
position: relative;
|
||||
top:calc(-216px + -2.8em);
|
||||
left:calc(-5px + -1.35em);
|
||||
z-index: -2;
|
||||
border-bottom: calc(108px + 2em) solid #7A6B43;
|
||||
border-left: 66px solid transparent;
|
||||
border-right: 66px solid transparent;
|
||||
border-radius: 0% 0% 50% 50%;
|
||||
height: 0;
|
||||
width: calc(206px + 1em);
|
||||
}
|
||||
.bt_text
|
||||
{
|
||||
color: #9fc3c3;
|
||||
position:relative;
|
||||
font-family: 'Eczar', serif;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
font-size: 3em;
|
||||
top:0.4em;
|
||||
left:0.6em;
|
||||
}
|
||||
|
After Width: | Height: | Size: 448 KiB |
@ -0,0 +1,175 @@
|
||||
var elements =
|
||||
{
|
||||
name:document.getElementById('name'),
|
||||
title:document.getElementById('title'),
|
||||
championImage:document.getElementById('champion'),
|
||||
chroma:document.getElementById('chroma'),
|
||||
P:document.getElementById('P'),
|
||||
Q:document.getElementById('Q'),
|
||||
W:document.getElementById('W'),
|
||||
E:document.getElementById('E'),
|
||||
R:document.getElementById('R'),
|
||||
spellName:document.getElementById('spellName'),
|
||||
description:document.getElementById('description'),
|
||||
lore:document.getElementById('lore')
|
||||
}
|
||||
var version = 0;
|
||||
var champCache = '';
|
||||
var currentSkin = 0;
|
||||
var champName =''
|
||||
window.onload = ()=>
|
||||
{
|
||||
champName = new URL(location.href).searchParams.get('name');
|
||||
if(isMobile()) handleMobile();
|
||||
document.getElementById('previous').onclick = previousSkin;
|
||||
document.getElementById('next').onclick = nextSkin;
|
||||
document.getElementById('P').onclick = ability;
|
||||
document.getElementById('Q').onclick = ability;
|
||||
document.getElementById('W').onclick = ability;
|
||||
document.getElementById('E').onclick = ability;
|
||||
document.getElementById('R').onclick = ability;
|
||||
getVersion().then(v=>
|
||||
{
|
||||
version = v;
|
||||
let listURL = `https://ddragon.leagueoflegends.com/cdn/${version}/data/en_US/champion/${champName}.json`;
|
||||
fetch(listURL)
|
||||
.then(response=>
|
||||
{
|
||||
return response.json().then(
|
||||
json=>
|
||||
{
|
||||
return response.ok? json:Promise.reject(json);
|
||||
}
|
||||
)
|
||||
})
|
||||
.then(data=>
|
||||
{
|
||||
return data.data[`${Object.keys(data.data)[0]}`];
|
||||
})
|
||||
.catch(error=>{return error})
|
||||
.then(champ=>
|
||||
{
|
||||
champCache = champ;
|
||||
elements.name.textContent = champ.name;
|
||||
elements.title.textContent = champ.title;
|
||||
let fontSize =32;
|
||||
var textWidth = getTextWidth(champ.title, `${fontSize}px`)
|
||||
while (textWidth>=window.innerWidth)
|
||||
{
|
||||
fontSize--;
|
||||
textWidth = getTextWidth(champ.title, `${fontSize}px`)
|
||||
}
|
||||
elements.title.style.fontSize = `${fontSize}px`;
|
||||
elements.lore.textContent = champ.lore;
|
||||
elements.description.textContent = getClearDescriptionText(champ.passive.description);
|
||||
elements.championImage.style.backgroundImage = `url(http://ddragon.leagueoflegends.com/cdn/img/champion/loading/${champ.id}_${champ.skins[currentSkin].num}.jpg)`;
|
||||
document.getElementsByTagName('body')[0].style.backgroundImage = `url(http://ddragon.leagueoflegends.com/cdn/img/champion/splash/${champ.id}_${champ.skins[currentSkin].num}.jpg)`;
|
||||
elements.P.style.backgroundImage = `url(http://ddragon.leagueoflegends.com/cdn/${version}/img/passive/${champ.passive.image.full})`;
|
||||
elements.P.classList.add('active');
|
||||
elements.spellName.textContent = champ.passive.name;
|
||||
elements.Q.style.backgroundImage = `url(http://ddragon.leagueoflegends.com/cdn/${version}/img/spell/${champ.spells[0].id}.png )`;
|
||||
elements.W.style.backgroundImage = `url(http://ddragon.leagueoflegends.com/cdn/${version}/img/spell/${champ.spells[1].id}.png )`;
|
||||
elements.E.style.backgroundImage = `url(http://ddragon.leagueoflegends.com/cdn/${version}/img/spell/${champ.spells[2].id}.png )`;
|
||||
elements.R.style.backgroundImage = `url(http://ddragon.leagueoflegends.com/cdn/${version}/img/spell/${champ.spells[3].id}.png )`;
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
function getVersion()
|
||||
{
|
||||
return fetch("https://ddragon.leagueoflegends.com/api/versions.json").then(handleResponse)
|
||||
.then(handleData)
|
||||
.catch(handleError)
|
||||
function handleResponse(response)
|
||||
{
|
||||
return response.json().then(function (json)
|
||||
{
|
||||
return response.ok ? json : Promise.reject(json);
|
||||
});
|
||||
}
|
||||
function handleError(error) {
|
||||
return error;
|
||||
}
|
||||
function handleData(data) {return data[0]}
|
||||
}
|
||||
|
||||
function previousSkin ()
|
||||
{
|
||||
currentSkin--;
|
||||
if(currentSkin==-1) currentSkin = champCache.skins.length-1;
|
||||
showSkin();
|
||||
|
||||
}
|
||||
function nextSkin ()
|
||||
{
|
||||
currentSkin++;
|
||||
if(currentSkin==champCache.skins.length) currentSkin = 0;
|
||||
showSkin();
|
||||
}
|
||||
function showSkin()
|
||||
{
|
||||
console.log(currentSkin)
|
||||
elements.championImage.style.backgroundImage = `url(http://ddragon.leagueoflegends.com/cdn/img/champion/loading/${champCache.id}_${champCache.skins[currentSkin].num}.jpg)`;
|
||||
document.getElementsByTagName('body')[0].style.backgroundImage = `url(http://ddragon.leagueoflegends.com/cdn/img/champion/splash/${champCache.id}_${champCache.skins[currentSkin].num}.jpg)`;
|
||||
elements.chroma.classList.add('hidden');
|
||||
if(champCache.skins[currentSkin].chromas) elements.chroma.classList.remove('hidden');
|
||||
}
|
||||
function ability()
|
||||
{
|
||||
var element = this;
|
||||
document.getElementsByClassName('active')[0].classList.remove('active');
|
||||
element.classList.add('active');
|
||||
if(element.id=='P')
|
||||
{
|
||||
console.log(champCache.passive)
|
||||
elements.spellName.textContent = champCache.passive.name;
|
||||
elements.description.textContent =getClearDescriptionText(champCache.passive.description);
|
||||
return
|
||||
}
|
||||
for(var spell of champCache.spells)
|
||||
{
|
||||
if(spell.id == champName+element.id)
|
||||
{
|
||||
elements.spellName.textContent = spell.name;
|
||||
elements.description.textContent =getClearDescriptionText(spell.description);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function getClearDescriptionText(text)
|
||||
{
|
||||
return new DOMParser().parseFromString(text, "text/html").getElementsByTagName('body')[0].textContent;
|
||||
}
|
||||
|
||||
function getTextWidth (text, size)
|
||||
{
|
||||
|
||||
var span = document.getElementById('sizeTestDiv');
|
||||
if (!span) {
|
||||
span = document.createElement('span');
|
||||
span.setAttribute('style', 'display: none;');
|
||||
span.id = 'sizeTestDiv';
|
||||
document.body.appendChild(span);
|
||||
}
|
||||
span.setAttribute('style', 'position: absolute; visibiliy: hidden; display: block; color: transparent; font-size: ' + size);
|
||||
span.innerText = text;
|
||||
var width = span.offsetWidth;
|
||||
span.setAttribute('style', 'display: none;');
|
||||
return width;
|
||||
}
|
||||
|
||||
function isMobile()
|
||||
{
|
||||
return window.innerWidth<innerHeight;
|
||||
}
|
||||
function handleMobile()
|
||||
{
|
||||
var elements_ = document.getElementsByClassName('desktop');
|
||||
for(var element of elements_)
|
||||
{
|
||||
console.log(element)
|
||||
element.classList.remove('desktop');
|
||||
element.classList.add('mobile')
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,234 @@
|
||||
var champs = new Map();
|
||||
var version;
|
||||
var Allnames = [];
|
||||
var names = [];
|
||||
var isTimmerOn = false;
|
||||
var isOutOfTime = false;
|
||||
var secondsRemaining = 20*60;
|
||||
var totalchamps =0;
|
||||
var interval;
|
||||
/* Iron 0 Bronze -140 Silver -280 Gold -425 Platinum -570 Diamond -716 Master -860 GrandMaster -1010 Challanger -1151*/
|
||||
var rank = new Map([
|
||||
[0,'0px'],
|
||||
[1,'0px'],
|
||||
[2,'-140px'],
|
||||
[3,'-280px'],
|
||||
[4,'-425px'],
|
||||
[5,'-570px'],
|
||||
[6,'-716px'],
|
||||
[7,'-820px'],
|
||||
[8,'-1010px'],
|
||||
[9,'-1151px'],
|
||||
[10,'-1151px']
|
||||
])
|
||||
window.onload=()=>
|
||||
{
|
||||
document.getElementById('guess').addEventListener('input', handleGuess)
|
||||
document.getElementById("reload").onclick = () =>
|
||||
{
|
||||
location.href = location.href;
|
||||
}
|
||||
document.getElementById('missed_bt').onclick = ()=>
|
||||
{
|
||||
document.getElementById('missingGrid').classList.remove('hidden');
|
||||
drawMissingGrid();
|
||||
}
|
||||
document.getElementById('close_bt').onclick = ()=>
|
||||
{
|
||||
document.getElementById('missingGrid').classList.add('hidden');
|
||||
}
|
||||
document.getElementById('giveUp').onclick = ()=>
|
||||
{
|
||||
if(isTimmerOn) handleTimerEnd();
|
||||
}
|
||||
document.getElementById('guess').focus();
|
||||
getVersion().then(v=>
|
||||
{
|
||||
version = v;
|
||||
let listURL = `https://ddragon.leagueoflegends.com/cdn/${version}/data/en_US/champion.json`;
|
||||
fetch(listURL)
|
||||
.then(response=>
|
||||
{
|
||||
return response.json().then(
|
||||
json=>
|
||||
{
|
||||
return response.ok? json:Promise.reject(json);
|
||||
}
|
||||
)
|
||||
})
|
||||
.then(data=>
|
||||
{
|
||||
data = data.data;
|
||||
totalchamps = Object.keys(data).length;
|
||||
document.getElementById('totalInfo').innerHTML += ' ' + totalchamps
|
||||
var aux= new Map();
|
||||
for(var key of Object.keys(data))
|
||||
{
|
||||
Allnames.push(data[`${key}`].name)
|
||||
let img = data[`${key}`].image.full;
|
||||
aux.set(key.toLowerCase(),{name:data[`${key}`].name, used:0,img});
|
||||
if(key!=data[`${key}`].name) aux.set(data[`${key}`].name.toLowerCase(),{name:data[`${key}`].name, used:0, img});
|
||||
}
|
||||
return aux;
|
||||
})
|
||||
.catch(error=>{return error})
|
||||
.then(list=>
|
||||
{
|
||||
champs = list;
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
function getVersion()
|
||||
{
|
||||
return fetch("https://ddragon.leagueoflegends.com/api/versions.json").then(handleResponse)
|
||||
.then(handleData)
|
||||
.catch(handleError)
|
||||
function handleResponse(response)
|
||||
{
|
||||
return response.json().then(function (json)
|
||||
{
|
||||
return response.ok ? json : Promise.reject(json);
|
||||
});
|
||||
}
|
||||
function handleError(error) {
|
||||
return error;
|
||||
}
|
||||
function handleData(data) {return data[0]}
|
||||
}
|
||||
function startTimer ()
|
||||
{
|
||||
interval = setInterval(() =>
|
||||
{
|
||||
secondsRemaining -= 1;
|
||||
updateTimer();
|
||||
if (secondsRemaining == 0) return handleTimerEnd()
|
||||
}, 1000);
|
||||
}
|
||||
function handleTimerEnd()
|
||||
{
|
||||
if(isOutOfTime) return;
|
||||
clearInterval(interval);
|
||||
document.getElementById('endCard').classList.remove('hidden');
|
||||
document.getElementById('guessed').innerHTML += names.length;
|
||||
document.getElementById('total').innerHTML += totalchamps;
|
||||
var percentage = Math.floor(names.length/totalchamps*100, -3)
|
||||
document.getElementById('percentage').innerHTML +=percentage+'%';
|
||||
document.getElementById('rank').style.backgroundPositionX= rank.get(Math.floor(percentage/10));
|
||||
isOutOfTime = true;
|
||||
}
|
||||
function updateTimer()
|
||||
{
|
||||
let seconds = secondsRemaining-(Math.floor(secondsRemaining/60)*60)
|
||||
seconds= seconds<10?'0'+seconds:seconds;
|
||||
document.getElementById('timer').innerHTML = `${Math.floor(secondsRemaining/60)}:${seconds}`;
|
||||
}
|
||||
function handleCorrect(name)
|
||||
{
|
||||
let input = document.getElementById('guess');
|
||||
let aux = champs.get(name);
|
||||
champs.set(name,{name:aux.name, used:1, img:aux.img})
|
||||
input.value = '';
|
||||
names.push(aux.name)
|
||||
document.getElementById('guessedInfo').innerHTML= `Guessed: ${names.length}`
|
||||
drawGrid();
|
||||
|
||||
|
||||
if(names.length == totalchamps) handleTimerEnd()
|
||||
}
|
||||
|
||||
function handleGuess(e)
|
||||
{
|
||||
document.getElementById('guess').placeholder = '';
|
||||
if(isOutOfTime) return
|
||||
let name = e.target.value.toLowerCase();
|
||||
name = name.split(' ')?name.split(' ').join(''):name;
|
||||
name = name.split("'")?name.split("'").join(''):name;
|
||||
//EdgeCase:
|
||||
name = name==='mundo'?'drmundo':name;
|
||||
|
||||
if(!isTimmerOn)
|
||||
{
|
||||
isTimmerOn = true;
|
||||
startTimer();
|
||||
}
|
||||
if(!champs.get(name)) return
|
||||
if(champs.get(name).used<1) handleCorrect(name);
|
||||
}
|
||||
function handleRepeated()
|
||||
{
|
||||
document.getElementById('guess').innerHTML = ''
|
||||
}
|
||||
|
||||
function drawGrid()
|
||||
{
|
||||
document.getElementById('ChampGrid').innerHTML = ''
|
||||
var _names = getOrganizedNames();
|
||||
for(var name of _names)
|
||||
{
|
||||
document.getElementById('ChampGrid').append(card(name));
|
||||
}
|
||||
}
|
||||
function drawMissingGrid()
|
||||
{
|
||||
for(var name of getMissingChamps())
|
||||
{
|
||||
document.getElementById('missingGrid').append(card(name));
|
||||
}
|
||||
}
|
||||
function getOrganizedNames()
|
||||
{
|
||||
return names.sort(function(a, b) {
|
||||
return (a < b) ? -1 : (a > b) ? 1 : 0;
|
||||
});
|
||||
}
|
||||
|
||||
function card(name)
|
||||
{
|
||||
let champ = champs.get(name.toLowerCase());
|
||||
name = champ.name;
|
||||
let nameForURL = champ.img;
|
||||
var card = document.createElement('div');
|
||||
card.classList.add('card');
|
||||
var img = document.createElement('img');
|
||||
img.src = `https://ddragon.leagueoflegends.com/cdn/${version}/img/champion/${nameForURL}`;
|
||||
var p = document.createElement('p');
|
||||
p.textContent = `${name.toUpperCase()}`;
|
||||
p.onclick = ()=>{
|
||||
window.open(location.origin+'/champion?name='+champ.img.split('.png')[0])
|
||||
}
|
||||
p.style.cursor = 'pointer';
|
||||
let fontSize = 16;
|
||||
var textWidth = getTextWidth(p.textContent, `${fontSize}px`)
|
||||
while (textWidth>=65)
|
||||
{
|
||||
fontSize--;
|
||||
textWidth = getTextWidth(p.textContent, `${fontSize}px`)
|
||||
}
|
||||
p.style.fontSize = `${fontSize}px`;
|
||||
card.appendChild(img);
|
||||
card.appendChild(p);
|
||||
return card
|
||||
};
|
||||
|
||||
function getTextWidth (text, size)
|
||||
{
|
||||
|
||||
var span = document.getElementById('sizeTestDiv');
|
||||
if (!span) {
|
||||
span = document.createElement('span');
|
||||
span.setAttribute('style', 'display: none;');
|
||||
span.id = 'sizeTestDiv';
|
||||
document.body.appendChild(span);
|
||||
}
|
||||
span.setAttribute('style', 'position: absolute; visibiliy: hidden; display: block; color: transparent; font-size: ' + size);
|
||||
span.innerText = text;
|
||||
var width = span.offsetWidth;
|
||||
span.setAttribute('style', 'display: none;');
|
||||
return width;
|
||||
}
|
||||
function getMissingChamps()
|
||||
{
|
||||
return Allnames.filter(item => !names.includes(item));
|
||||
}
|
||||
|
||||
@ -0,0 +1,11 @@
|
||||
const router = require('express').Router();
|
||||
const homeC = require('../controller/homeC');
|
||||
const gameC = require('../controller/gameC');
|
||||
|
||||
module.exports = (io)=>
|
||||
{
|
||||
router.route('/').get(homeC.get(io));
|
||||
router.route('/game').get(gameC.get(io));
|
||||
router.route('/champion').get(gameC.getC(io));
|
||||
return router;
|
||||
};
|
||||
@ -0,0 +1,21 @@
|
||||
var express = require('express')
|
||||
var app = express();
|
||||
const path = require('path')
|
||||
var http = require('http')
|
||||
const {Server} = require('socket.io');
|
||||
const port = process.env.Port || 8080;
|
||||
|
||||
app.use(express.static(path.join(__dirname, "public")));
|
||||
app.set("view engine", "ejs");
|
||||
app.use(require('cors')())
|
||||
app.use(express.json());
|
||||
app.use(express.urlencoded({extended:true}))
|
||||
|
||||
const server = http.createServer(app);
|
||||
const io = new Server(server);
|
||||
|
||||
server.listen(port, () =>
|
||||
{
|
||||
app.use('/', require('./routes/routes')(io));
|
||||
console.log(`Http-Server UP`);
|
||||
});
|
||||
@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset= "UTF-8">
|
||||
<meta name="viewport" content = "width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<link rel="stylesheet" href="/css/champion.css" />
|
||||
<script type="module" src="/scripts/champion.js"></script>
|
||||
<link rel="icon" type="image/png" href="/img/favicon-2.png">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
|
||||
<title>Champion Names</title>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="name" id="name"></h1>
|
||||
<h2 class="title" id="title"></h2>
|
||||
<div class="wrapper">
|
||||
<div class="card champion desktop" id="champion">
|
||||
<div class="bt_skins previous desktop" id="previous">
|
||||
<span class="material-symbols-outlined">
|
||||
chevron_left
|
||||
</span>
|
||||
</div>
|
||||
<div class="bt_skins desktop">
|
||||
<div class="chroma hidden" id="chroma">
|
||||
<div class="center"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bt_skins next desktop" id="next">
|
||||
<span class="material-symbols-outlined">
|
||||
chevron_right
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="abilities desktop">
|
||||
<div class="card ability" id="P"></div>
|
||||
<div class="card ability" id="Q"></div>
|
||||
<div class="card ability" id="W"></div>
|
||||
<div class="card ability" id="E"></div>
|
||||
<div class="card ability" id="R"></div>
|
||||
</div>
|
||||
<div class="abilityInfo desktop" >
|
||||
<p class="spellName" id="spellName"> Test</p>
|
||||
<p id="description">
|
||||
</p>
|
||||
<div class="lore desktop">
|
||||
<p class="lore_title">Lore:</p>
|
||||
<p class="lore_text" id="lore"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<footer>
|
||||
<script data-name="BMC-Widget" data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="masterhc" data-description="Support me on Buy me a coffee!" data-message="" data-color="#FFDD00" data-position="Right" data-x_margin="18" data-y_margin="18"></script>
|
||||
</footer>
|
||||
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset= "UTF-8">
|
||||
<meta name="viewport" content = "width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<link rel="stylesheet" href="/css/game.css" />
|
||||
<script type="module" src="/scripts/game.js"></script>
|
||||
<link rel="icon" type="image/png" href="/img/favicon-1.png"/>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
|
||||
<title>Champion Names</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<input type="text" class="in" id="guess" placeholder="Start typing to start the timer!">
|
||||
<div class="timer">
|
||||
<span class="timer_Nums" id="timer">20:00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="infoContainer">
|
||||
<p id="guessedInfo">Guessed: 0</p>
|
||||
<p id="totalInfo">Out of:</p>
|
||||
</div>
|
||||
<div class="bt" id="giveUp"><span class="bt_text">Give Up?</span></div>
|
||||
<div class='hidden' id='endCard'>
|
||||
<div class="rank" id="rank"></div>
|
||||
<p><span id="guessed">You guessed:</span> <span id="total"> Out of:</span> <br><span id="percentage"> </span></p>
|
||||
<div class="bt" id="reload"><span class="bt_text">Try again?</span></div>
|
||||
<div class="bt" id="missed_bt"><span class="bt_text">What have I missed?</span></div>
|
||||
</div>
|
||||
<div class='hidden' id="missingGrid">
|
||||
<i class="close material-symbols-outlined"id="close_bt">
|
||||
cancel
|
||||
</i>
|
||||
</div>
|
||||
<div id="ChampGrid">
|
||||
</div>
|
||||
</body>
|
||||
<footer>
|
||||
<script data-name="BMC-Widget" data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="masterhc" data-description="Support me on Buy me a coffee!" data-message="" data-color="#FFDD00" data-position="Right" data-x_margin="18" data-y_margin="18"></script>
|
||||
</footer>
|
||||
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset= "UTF-8">
|
||||
<meta name="viewport" content = "width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<link rel="stylesheet" href="/css/home.css" />
|
||||
<link rel="icon" type="image/png" href="/img/favicon-2.png">
|
||||
<title>Champion Names</title>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<h1>Can you name them all?</h1>
|
||||
<div class="wrapper">
|
||||
<div class="bt base" id="bt">
|
||||
<span class="bt_text">Play!</span>
|
||||
</div>
|
||||
<div class="bt border"></div>
|
||||
<div class="bt border2"></div>
|
||||
<div class="bt border3"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
document.getElementById("bt").onclick = function () {
|
||||
location.href = location.href+'game';
|
||||
};
|
||||
</script>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<footer>
|
||||
<script data-name="BMC-Widget" data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="masterhc" data-description="Support me on Buy me a coffee!" data-message="" data-color="#FFDD00" data-position="Right" data-x_margin="18" data-y_margin="18"></script>
|
||||
</footer>
|
||||
|
||||
|
||||
</html>
|
||||
Loading…
Reference in new issue