Scribd
Upload
9 views

Ultimo - Con Contadores

Uploaded by

Alexis Bianchi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

Ultimo - Con Contadores

Uploaded by

Alexis Bianchi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

html:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>¿Qué prefieres?</title>
<link
href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="game-container">
<h1>¿Qué prefieres?</h1>
<div id="intro">
<p>Selecciona una categoría y elige entre dos alternativas. ¡Vamos a descubrir tus
favoritos!</p>
</div>
<div id="category-selector">
<label for="search-bar">Buscar categoría:</label>
<div class="search-container">
<input type="text" id="search-bar" placeholder="Escribe para buscar..."
oninput="filterCategories()" autocomplete="off">
<button id="toggle-btn" onclick="toggleAllCategories()">▼</button>
</div>
<div id="search-results" class="results-container" style="display: none;"></div>
<button id="start-btn" onclick="startGame()" disabled>Comenzar</button>
</div>
<h2 id="round-indicator" style="display:none;"></h2>
<div id="game-area" style="display: none;">
<div id="option1" class="card" onclick="selectOption('option1')"></div>
<div id="vs-text">VS</div>
<div id="option2" class="card" onclick="selectOption('option2')"></div>
</div>
<div id="top10" style="display: none;">
<div id="top-winner" class="highlighted-winner"></div>
<h2>Tu Top 10:</h2>
<div id="rankings"></div>
<button onclick="resetGame()">Jugar de nuevo</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
script:

const categories = {
pokemonprimera: ['Pikachu', 'Charizard', 'Eevee', 'Bulbasaur', 'Squirtle', 'Mew', 'Pidgey',
'Ditto', 'Ivysaur', 'Venusaur', 'Charmander', 'Charmeleon', 'Wartortle', 'Blastoise', 'Caterpie',
'Metapod', 'Butterfree', 'Weedle', 'Kakuna', 'Beedrill'],
comidas: ['Pizza', 'Hamburguesa', 'Pasta', 'Tacos', 'Sushi', 'Pollo asado', 'Sopa', 'Burrito',
'Hot dog', 'Ramen', 'Falafel', 'Goulash', 'Fish and chips'],
equipos: ['Barcelona', 'Real Madrid', 'Manchester United', 'Liverpool', 'Bayern Múnich',
'Chelsea', 'Juventus', 'Paris Saint-Germain']
};

const categoryNames = {
pokemonprimera: 'Pokemon Primera Generación',
comidas: 'Comidas',
equipos: 'Equipos'
};

let currentRound = [];


let nextRound = [];
let voteCounts = {};
let selectedCategory = null;
let roundNumber = 1;
let finalRound = false;
let top10Finalists = [];
let allPairs = [];
let remainingMatches = 0; // New counter for remaining matches

function initializeCategories() {
const searchResults = document.getElementById("search-results");
searchResults.innerHTML = "";
for (let key in categoryNames) {
const div = document.createElement("div");
div.textContent = categoryNames[key];
div.onclick = () => selectCategory(key);
searchResults.appendChild(div);
}
}

function filterCategories() {
const query = document.getElementById("search-bar").value.toLowerCase();
const searchResults = document.getElementById("search-results");
searchResults.innerHTML = "";
for (let key in categoryNames) {
if (categoryNames[key].toLowerCase().includes(query)) {
const div = document.createElement("div");
div.textContent = categoryNames[key];
div.onclick = () => selectCategory(key);
searchResults.appendChild(div);
}
}
searchResults.style.display = query ? "block" : "none";
}

function toggleAllCategories() {
const searchResults = document.getElementById("search-results");
searchResults.style.display = searchResults.style.display === "block" ? "none" : "block";
}

function selectCategory(key) {
selectedCategory = key;
currentRound = shuffleArray([...categories[key]]);
nextRound = [];
document.getElementById("start-btn").disabled = false;
document.getElementById("search-bar").value = categoryNames[key];
document.getElementById("search-results").style.display = "none";
}

function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}

function startGame() {
document.getElementById("category-selector").style.display = "none";
document.getElementById("round-indicator").style.display = "block";
document.getElementById("game-area").style.display = "flex";
voteCounts = {};
roundNumber = 1;
finalRound = false;
remainingMatches = Math.ceil(currentRound.length / 2); // Set initial match count
document.getElementById("round-indicator").textContent = `Ronda ${roundNumber} -
Enfrentamientos pendientes: ${remainingMatches}`;
displayNextPair();
}

function displayNextPair() {
if (finalRound) {
handleTop10Round();
return;
}
if (currentRound.length < 2) {
if (nextRound.length === 10) {
top10Finalists = [...nextRound];
finalRound = true;
startTop10Round();
return;
}
declareWinner(nextRound[0]);
return;
}
remainingMatches--; // Update remaining matches counter
document.getElementById("round-indicator").textContent = `Ronda ${roundNumber} -
Enfrentamientos pendientes: ${remainingMatches}`;

const [option1, option2] = [currentRound.pop(), currentRound.pop()];


document.getElementById("option1").textContent = option1;
document.getElementById("option2").textContent = option2;
document.getElementById("option1").classList.remove("selected");
document.getElementById("option2").classList.remove("selected");
}

function selectOption(optionId) {
const selectedOption = document.getElementById(optionId).textContent;
voteCounts[selectedOption] = (voteCounts[selectedOption] || 0) + 1;
if (finalRound) {
document.getElementById(optionId).classList.add("selected");
setTimeout(displayNextTop10Pair, 500);
} else {
nextRound.push(selectedOption);
document.getElementById(optionId).classList.add("selected");
setTimeout(displayNextPair, 500);
}
}

function declareWinner(winner) {
document.getElementById("game-area").style.display = "none";
document.getElementById("top10").style.display = "block";
document.getElementById("top-winner").innerHTML = `¡Tu Top N°1: <span
class="highlight">${winner}</span>!`;
displayRankings();
}

function startTop10Round() {
document.getElementById("round-indicator").textContent = "¡Ronda del Top 10!";
document.getElementById("round-indicator").classList.add("top10");
currentRound = [...top10Finalists];
nextRound = [];
voteCounts = {};
generateAllPairs();
displayNextTop10Pair();
}

function generateAllPairs() {
allPairs = [];
for (let i = 0; i < top10Finalists.length; i++) {
for (let j = i + 1; j < top10Finalists.length; j++) {
allPairs.push([top10Finalists[i], top10Finalists[j]]);
}
}
shuffleArray(allPairs);
remainingMatches = allPairs.length;
}

function displayNextTop10Pair() {
if (allPairs.length === 0) {
declareWinnerInTop10();
return;
}
const [option1, option2] = allPairs.pop();
remainingMatches--; // Update remaining matches counter for Top 10
document.getElementById("round-indicator").textContent = `Ronda Top 10 -
Enfrentamientos pendientes: ${remainingMatches}`;
document.getElementById("option1").textContent = option1;
document.getElementById("option2").textContent = option2;
document.getElementById("option1").classList.remove("selected");
document.getElementById("option2").classList.remove("selected");
}

function declareWinnerInTop10() {
document.getElementById("game-area").style.display = "none";
displayRankings();
}

function displayRankings() {
const rankings = Object.entries(voteCounts).sort((a, b) => b[1] - a[1]);
const rankingsContainer = document.getElementById("rankings");
rankingsContainer.innerHTML = "";
rankings.slice(0, 10).forEach(([option], index) => {
const div = document.createElement("div");
div.textContent = `${index + 1}. ${option}`;
rankingsContainer.appendChild(div);
});
}

function resetGame() {
document.getElementById("top10").style.display = "none";
document.getElementById("category-selector").style.display = "block";
document.getElementById("start-btn").disabled = true;
document.getElementById("round-indicator").style.display = "none";
document.getElementById("game-area").style.display = "none";
document.getElementById("rankings").innerHTML = "";
document.getElementById("search-bar").value = "";
initializeCategories();
}

css:

*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: linear-gradient(to right, #a8edea, #fed6e3);
font-family: 'Quicksand', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
h1 {
color: #5e548e;
text-align: center;
font-weight: 600;
margin-bottom: 0.5em;
}
h2 {
color: #333;
text-align: center;
}
#intro p {
font-size: 1em;
color: #4a4e69;
text-align: center;
margin-bottom: 1em;
font-weight: 600;
}

.game-container {
background-color: #f8edeb;
border-radius: 1em;
box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.2);
padding: 1.5em;
max-width: 500px;
width: 90%;
text-align: center;
}
#search-bar {
padding: 0.6em;
width: 100%;
font-size: 1em;
border: 1px solid #b8c1ec;
border-radius: 0.5em;
}
.search-container {
display: flex;
align-items: center;
gap: 0.5em;
margin-bottom: 1em;
}
#toggle-btn {
background-color: #9d8189;
color: #fff;
border: none;
border-radius: 0.5em;
cursor: pointer;
font-size: 1em;
padding: 0.5em;
}
.results-container {
display: none;
margin-top: 0.5em;
max-height: 150px;
overflow-y: auto;
border: 1px solid #ccc;
border-radius: 0.5em;
background-color: #ffffff;
}
.results-container div {
padding: 0.5em;

cursor: pointer;
transition: background-color 0.2s ease;
}
.results-container div:hover {
background-color: #ffb4a2;
}
#start-btn {
background-color: #ff758f;
color: #ffffff;
border: none;
border-radius: 0.5em;
padding: 0.7em 1em;
cursor: pointer;
font-size: 1.1em;
}
#start-btn:disabled {
background-color: #ccc;
cursor: not-allowed;
}
#round-indicator {
color: #ff758f;
font-weight: 600;
margin-top: 1em;
}
#game-area {
display: flex;
justify-content: center;
align-items: center;
gap: 1.5em;
margin-top: 1em;
}
.card {
padding: 1em;
background-color: #ffd6a5;
border: 2px solid #ff758f;
border-radius: 0.5em;
cursor: pointer;
width: 150px;
min-height: 100px;
display: flex;
align-items: center;
justify-content: center;

transition: background-color 0.3s;


font-weight: bold;
font-size: 1.1em;
color: #4a4e69;
text-align: center;
word-wrap: break-word;
}
.card:hover {
background-color: #ffadad;
}
.card.selected {
background-color: #ff758f;
color: white;
}
#vs-text {
font-size: 1.5em;
color: #333;
}
#round-message {
font-size: 1.2em;
color: #ff758f;
margin-top: 1em;
display: none;
}
#top10 {
margin-top: 2em;
}
#rankings div {
margin: 0.5em 0;
font-weight: 600;
}
#rankings div:first-child {
font-size: 1.2em;
color: #ff758f;
}
.highlighted-winner {
background-color: #ffb6b9;
color: #ffffff;
font-weight: 700;
font-size: 1.4em;

padding: 1em;
margin-bottom: 1em;
border-radius: 1em;
border: 3px solid #ff758f;
position: relative;
animation: shimmer 1.5s infinite;
text-align: center;
}
@keyframes shimmer {
0% { box-shadow: 0 0 10px #ff758f, 0 0 20px #ff758f, 0 0 30px #ff758f; }
50% { box-shadow: 0 0 20px #ff758f, 0 0 30px #ff758f, 0 0 40px #ff758f; }
100% { box-shadow: 0 0 10px #ff758f, 0 0 20px #ff758f, 0 0 30px #ff758f; }
}
#round-indicator.top10 {
color: #ffb100;
font-weight: 700;
animation: blink 1s ease-in-out infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
button {
background-color: #ff758f;
color: #ffffff;
border: none;
border-radius: 0.5em;
padding: 0.7em 1em;
cursor: pointer;
font-size: 1em;
margin-top: 1em;
}
button:hover {
background-color: #e65b52;
}

You might also like