From 8b2695f241206a1db43024592e32c39b5c74c4d6 Mon Sep 17 00:00:00 2001 From: Alvie Rahman Date: Wed, 19 Jan 2022 20:37:49 +0000 Subject: [PATCH] prettier -w --- game.js | 478 ++++++++++++++++++++++++++---------------------- game_styles.css | 183 +++++++++--------- index.html | 155 +++++++++------- styles.css | 50 ++--- 4 files changed, 473 insertions(+), 393 deletions(-) diff --git a/game.js b/game.js index 52db917..7217312 100644 --- a/game.js +++ b/game.js @@ -8,11 +8,13 @@ const answerAHTML = document.getElementById("answer_a"); const answerBHTML = document.getElementById("answer_b"); const answerCHTML = document.getElementById("answer_c"); const answerDHTML = document.getElementById("answer_d"); -const bodyHTML = document.getElementsByTagName("body")[0] -const incorrectAnswersTable = document.getElementById('incorrectAnswersTable'); -const correctAnswersTable = document.getElementById('correctAnswersTable'); -const previousQuestionAnswer = document.getElementById('previousQuestionAnswer'); -const previousQuestionText = document.getElementById('previousQuestionText'); +const bodyHTML = document.getElementsByTagName("body")[0]; +const incorrectAnswersTable = document.getElementById("incorrectAnswersTable"); +const correctAnswersTable = document.getElementById("correctAnswersTable"); +const previousQuestionAnswer = document.getElementById( + "previousQuestionAnswer" +); +const previousQuestionText = document.getElementById("previousQuestionText"); const regionListHTML = document.getElementById("regionList"); const resultsHTML = document.getElementById("results"); const scoreHTML = document.getElementById("score"); @@ -24,302 +26,327 @@ var gameTimeStartTime = 0; var gameTimeIntervalId = 0; var selectedRegion = null; -const guessCapital = () => document.getElementById('questionTypeCapital').checked; -const guessCountry = () => document.getElementById('questionTypeCountry').checked; -const guessFlag = () => document.getElementById('questionTypeFlag').checked; -const guessReverseFlag = () => document.getElementById('questionTypeReverseFlag').checked; +const guessCapital = () => + document.getElementById("questionTypeCapital").checked; +const guessCountry = () => + document.getElementById("questionTypeCountry").checked; +const guessFlag = () => document.getElementById("questionTypeFlag").checked; +const guessReverseFlag = () => + document.getElementById("questionTypeReverseFlag").checked; const updateTime = () => { - const secondsPassed = ((new Date().getTime() - gameTimeStartTime.getTime())/1000) - .toFixed(3); - timeHTML.innerHTML = secondsPassed; -} + const secondsPassed = ( + (new Date().getTime() - gameTimeStartTime.getTime()) / + 1000 + ).toFixed(3); + timeHTML.innerHTML = secondsPassed; +}; const getMasterQuestionList = () => { return countries; -} +}; const getQuestionByCountryName = (name) => { - c = getMasterQuestionList().filter(c => c.countryname === name) - if (c.length > 0) return c[0] - return null -} + c = getMasterQuestionList().filter((c) => c.countryname === name); + if (c.length > 0) return c[0]; + return null; +}; const getQuestionByCapital = (capital) => { - c = getMasterQuestionList().filter(c => c.capital === capital) - if (c.length > 0) return c[0] - return null -} + c = getMasterQuestionList().filter((c) => c.capital === capital); + if (c.length > 0) return c[0]; + return null; +}; const optionToAnswer = (option) => { if (guessCapital()) return option.capital; else if (guessCountry()) return option.countryname; else if (guessReverseFlag()) return option.countryname; else return option.code; -} +}; const optionToAnswerFormatted = (option) => { const r = optionToAnswer(option); if (guessFlag()) return getImageURLFromCountryCode(r); - return r -} + return r; +}; const optionToQuestion = (option) => { if (guessCapital()) return option.countryname; else if (guessCountry()) return option.capital; else if (guessReverseFlag()) return option.code; else return option.countryname; -} +}; const optionToQuestionFormatted = (option) => { const r = optionToQuestion(option); if (guessReverseFlag()) return getImageURLFromCountryCode(r); - return r -} + return r; +}; const getQuestionHTML = (state) => { - if(guessCountry()) - return `what country is ${state.question.capital} the capital of?` + if (guessCountry()) + return `what country is ${state.question.capital} the capital of?`; if (guessCapital()) - return `what is the capital of ${state.question.countryname}?` - if(guessFlag()) - return `what is the flag of ${state.question.countryname}?` - if(guessReverseFlag()) - return `which country's flag is ${getImageURLFromCountryCode(state.question.code)}?` -} + return `what is the capital of ${state.question.countryname}?`; + if (guessFlag()) + return `what is the flag of ${state.question.countryname}?`; + if (guessReverseFlag()) + return `which country's flag is ${getImageURLFromCountryCode( + state.question.code + )}?`; +}; const answerList = () => { - return getMasterQuestionList().map(q => { + return getMasterQuestionList().map((q) => { if (guessCountry()) return q.countryname; if (guessCapital()) return q.capital; if (guessFlag()) return q.code; if (guessReverseFlag()) return q.countryname; - }) -} + }); +}; +const getImageURLFromCountryCode = (code) => + ``; -const getImageURLFromCountryCode = (code) => ``; - -const regionList = () => [...new Set(getMasterQuestionList().map(item => item.region))] - .concat([...new Set(getMasterQuestionList().map(item => item.subregion))]) +const regionList = () => + [...new Set(getMasterQuestionList().map((item) => item.region))] + .concat([...new Set(getMasterQuestionList().map((item) => item.subregion))]) .concat([ALL_REGIONS]) .sort(); const date = new Date(); var questionList, state; -var resultsChart = new Chart( - document.getElementById('resultsChart'), - { - type: 'doughnut', - data: { - labels: [], - datasets: [ - { - labels: [], - data: [], - backgroundColor: [ - "#a1b56c", - "#ab4642", - ] - - } - ] - }, - options: {} - } -); - +var resultsChart = new Chart(document.getElementById("resultsChart"), { + type: "doughnut", + data: { + labels: [], + datasets: [ + { + labels: [], + data: [], + backgroundColor: ["#a1b56c", "#ab4642"], + }, + ], + }, + options: {}, +}); // set up game function init() { - // generate question list - questionList = getMasterQuestionList() - .filter(q => q.region == selectedRegion || q.subregion == selectedRegion || selectedRegion == ALL_REGIONS) - .sort(() => Math.random()-0.5); + // generate question list + questionList = getMasterQuestionList() + .filter( + (q) => + q.region == selectedRegion || + q.subregion == selectedRegion || + selectedRegion == ALL_REGIONS + ) + .sort(() => Math.random() - 0.5); - // set up state variable - state.endTime = 0; - state.finishedGame = false; - state.startedGame = true; - state.maxScore = questionList.length; - state.score = 0; - state.startTime = date.getTime(); - state.correctAnswers = []; - state.incorrectAnswers = []; - state.userAnswer = null; + // set up state variable + state.endTime = 0; + state.finishedGame = false; + state.startedGame = true; + state.maxScore = questionList.length; + state.score = 0; + state.startTime = date.getTime(); + state.correctAnswers = []; + state.incorrectAnswers = []; + state.userAnswer = null; - // show and hide appropriate elements - answersHTML.style.display = ""; - settingsHTML.style.display = "none"; - questionHTML.onclick = deinit; - incorrectAnswersTable.innerHTML = " question answer your answer "; - correctAnswersTable.innerHTML = " country capital "; + // show and hide appropriate elements + answersHTML.style.display = ""; + settingsHTML.style.display = "none"; + questionHTML.onclick = deinit; + incorrectAnswersTable.innerHTML = + " question answer your answer "; + correctAnswersTable.innerHTML = + " country capital "; - // start game - updateState(); - updateScreen(); - gameTimeStartTime = new Date() - gameTimeIntervalId = setInterval(updateTime, 1); + // start game + updateState(); + updateScreen(); + gameTimeStartTime = new Date(); + gameTimeIntervalId = setInterval(updateTime, 1); } - // stop game, go back to start screen function deinit() { - clearInterval(gameTimeIntervalId); - - answersHTML.style.display = "none"; - resultsHTML.style.display = "none"; - settingsHTML.style.display = ""; - questionHTML.innerHTML = "capitals_quiz - select a region to start!"; - scoreHTML.innerHTML = "score"; - questionHTML.onclick = init; - timeHTML.innerHTML = "time"; + clearInterval(gameTimeIntervalId); - questionList = null; - state = { - "score": 0, - "maxScore": 0, - "startTime": 0, - "endTime": 0, - "finishedGame": true, - "startedGame": false, - }; + answersHTML.style.display = "none"; + resultsHTML.style.display = "none"; + settingsHTML.style.display = ""; + questionHTML.innerHTML = "capitals_quiz - select a region to start!"; + scoreHTML.innerHTML = "score"; + questionHTML.onclick = init; + timeHTML.innerHTML = "time"; + + questionList = null; + state = { + score: 0, + maxScore: 0, + startTime: 0, + endTime: 0, + finishedGame: true, + startedGame: false, + }; } - function updateState() { - // check if game is over - if (questionList.length == 0) { state.finishedGame = true; return; } + // check if game is over + if (questionList.length == 0) { + state.finishedGame = true; + return; + } - // set up new question - const newQuestion = questionList.pop(); - console.log(newQuestion); + // set up new question + const newQuestion = questionList.pop(); + console.log(newQuestion); - var options = [] - while (options.length < 4) { - var c = getMasterQuestionList()[Math.floor(Math.random()*answerList().length)]; - var question = getQuestionByCountryName(newQuestion.countryname); - if (question == undefined) question = getQuestionByCapital(newQuestion.capital); - console.log(c); - console.log(question); - if (c !== getQuestionByCountryName(newQuestion.countryname)&& !options.includes(c)){ - options.push(c); - } - } + var options = []; + while (options.length < 4) { + var c = + getMasterQuestionList()[Math.floor(Math.random() * answerList().length)]; var question = getQuestionByCountryName(newQuestion.countryname); - if (question == undefined) question = getQuestionByCapital(newQuestion.capital); - options[Math.floor(Math.random()*4)] = question; + if (question == undefined) + question = getQuestionByCapital(newQuestion.capital); + console.log(c); + console.log(question); + if ( + c !== getQuestionByCountryName(newQuestion.countryname) && + !options.includes(c) + ) { + options.push(c); + } + } + var question = getQuestionByCountryName(newQuestion.countryname); + if (question == undefined) + question = getQuestionByCapital(newQuestion.capital); + options[Math.floor(Math.random() * 4)] = question; - if (state.question) state.previousQuestion = { - "question": state.question, - "options": state.options, - "answer": state.answer + if (state.question) + state.previousQuestion = { + question: state.question, + options: state.options, + answer: state.answer, }; - state.question = newQuestion; - state.options = options; - state.answer = question; - console.log(state); + state.question = newQuestion; + state.options = options; + state.answer = question; + console.log(state); } - // update HTML elements to reflect values of state -function updateScreen(){ - scoreHTML.innerHTML = state.score + "/" + state.maxScore; - if (state.finishedGame) { - displayEndScreen(); - return; - } +function updateScreen() { + scoreHTML.innerHTML = state.score + "/" + state.maxScore; + if (state.finishedGame) { + displayEndScreen(); + return; + } - answerAHTML.getElementsByClassName("text")[0].innerHTML = optionToAnswerFormatted(state.options[0]); - answerBHTML.getElementsByClassName("text")[0].innerHTML = optionToAnswerFormatted(state.options[1]); - answerCHTML.getElementsByClassName("text")[0].innerHTML = optionToAnswerFormatted(state.options[2]); - answerDHTML.getElementsByClassName("text")[0].innerHTML = optionToAnswerFormatted(state.options[3]); + answerAHTML.getElementsByClassName("text")[0].innerHTML = + optionToAnswerFormatted(state.options[0]); + answerBHTML.getElementsByClassName("text")[0].innerHTML = + optionToAnswerFormatted(state.options[1]); + answerCHTML.getElementsByClassName("text")[0].innerHTML = + optionToAnswerFormatted(state.options[2]); + answerDHTML.getElementsByClassName("text")[0].innerHTML = + optionToAnswerFormatted(state.options[3]); - questionHTML.innerHTML = getQuestionHTML(state) - if (state.previousQuestion ) { - previousQuestionAnswer.innerHTML = optionToAnswerFormatted(state.previousQuestion.question); - previousQuestionText.style.display = ""; - } + questionHTML.innerHTML = getQuestionHTML(state); + if (state.previousQuestion) { + previousQuestionAnswer.innerHTML = optionToAnswerFormatted( + state.previousQuestion.question + ); + previousQuestionText.style.display = ""; + } } - function displayEndScreen() { - questionHTML.innerHTML = "you did it! click here to restart"; - answers.style.display = "none"; - answers.style.display = "none"; - - clearInterval(gameTimeIntervalId); + questionHTML.innerHTML = "you did it! click here to restart"; + answers.style.display = "none"; + answers.style.display = "none"; - if (guessReverseFlag() || guessFlag()) { - incorrectAnswersTable.innerHTML = " country answer your answer "; - correctAnswersTable.innerHTML = " flag country "; - } + clearInterval(gameTimeIntervalId); - state.incorrectAnswers.forEach(ans => { - var tr = document.createElement('tr'); - console.log(ans) + if (guessReverseFlag() || guessFlag()) { + incorrectAnswersTable.innerHTML = + " country answer your answer "; + correctAnswersTable.innerHTML = + " flag country "; + } - tr.appendChild(document.createElement('td')) - tr.lastChild.innerHTML = optionToQuestionFormatted(ans.question) + state.incorrectAnswers.forEach((ans) => { + var tr = document.createElement("tr"); + console.log(ans); - tr.appendChild(document.createElement('td')) - tr.lastChild.innerHTML = optionToAnswerFormatted(ans.answer); + tr.appendChild(document.createElement("td")); + tr.lastChild.innerHTML = optionToQuestionFormatted(ans.question); - tr.appendChild(document.createElement('td')) - tr.lastChild.innerHTML = optionToAnswerFormatted(ans.options[ans.userAnswer]); + tr.appendChild(document.createElement("td")); + tr.lastChild.innerHTML = optionToAnswerFormatted(ans.answer); - incorrectAnswersTable.appendChild(tr); - }) - if (state.incorrectAnswers.length <= 0) - incorrectAnswersTable.innerHTML = "no incorrect answers! go you!"; + tr.appendChild(document.createElement("td")); + tr.lastChild.innerHTML = optionToAnswerFormatted( + ans.options[ans.userAnswer] + ); - state.correctAnswers.forEach(ans => { - var tr = document.createElement('tr'); - tr.appendChild(document.createElement('td')) - tr.lastChild.innerHTML = optionToQuestionFormatted(ans.question); - tr.appendChild(document.createElement('td')) - tr.lastChild.innerHTML = optionToAnswerFormatted(ans.answer); - correctAnswersTable.appendChild(tr); - }) - if (state.correctAnswers.length <= 0) - correctAnswersTable.innerHTML = "no correct answers. better luck next time :')"; + incorrectAnswersTable.appendChild(tr); + }); + if (state.incorrectAnswers.length <= 0) + incorrectAnswersTable.innerHTML = "no incorrect answers! go you!"; - resultsChart.config.data.labels = ["correct", "incorrect"]; - resultsChart.config.data.labels = ["correct", "incorrect"]; - resultsChart.config.data.datasets[0].labels = ["correct", "incorrect"]; - resultsChart.config.data.datasets[0].data = [state.correctAnswers.length,state.incorrectAnswers.length]; - resultsChart.update(); - resultsHTML.style.display = ""; + state.correctAnswers.forEach((ans) => { + var tr = document.createElement("tr"); + tr.appendChild(document.createElement("td")); + tr.lastChild.innerHTML = optionToQuestionFormatted(ans.question); + tr.appendChild(document.createElement("td")); + tr.lastChild.innerHTML = optionToAnswerFormatted(ans.answer); + correctAnswersTable.appendChild(tr); + }); + if (state.correctAnswers.length <= 0) + correctAnswersTable.innerHTML = + "no correct answers. better luck next time :')"; + + resultsChart.config.data.labels = ["correct", "incorrect"]; + resultsChart.config.data.labels = ["correct", "incorrect"]; + resultsChart.config.data.datasets[0].labels = ["correct", "incorrect"]; + resultsChart.config.data.datasets[0].data = [ + state.correctAnswers.length, + state.incorrectAnswers.length, + ]; + resultsChart.update(); + resultsHTML.style.display = ""; } - function processClick(answer) { - if (state.finishedGame) return; - // check if answer to previous question was correct - var isAnswerCorrect = state.options[answer] == state.answer - state.score += isAnswerCorrect ? 1 : 0; - state.userAnswer = answer; - state[isAnswerCorrect ? "correctAnswers" : "incorrectAnswers"].push({ - "question": state.question, - "options": state.options, - "userAnswer": state.userAnswer, - "answer": state.answer - }); - state.userAnswer = null; + if (state.finishedGame) return; + // check if answer to previous question was correct + var isAnswerCorrect = state.options[answer] == state.answer; + state.score += isAnswerCorrect ? 1 : 0; + state.userAnswer = answer; + state[isAnswerCorrect ? "correctAnswers" : "incorrectAnswers"].push({ + question: state.question, + options: state.options, + userAnswer: state.userAnswer, + answer: state.answer, + }); + state.userAnswer = null; - // change background color based on if answer was correct for 500ms - bodyHTML.classList.add(isAnswerCorrect ? "correct" : "incorrect") - setTimeout(() => bodyHTML.classList = [], 500) + // change background color based on if answer was correct for 500ms + bodyHTML.classList.add(isAnswerCorrect ? "correct" : "incorrect"); + setTimeout(() => (bodyHTML.classList = []), 500); - updateState(); - updateScreen(); + updateState(); + updateScreen(); } - function setRegion(region) { - selectedRegion = region + selectedRegion = region; } // set up event listeners @@ -328,22 +355,29 @@ answerAHTML.addEventListener("click", () => processClick(0)); answerBHTML.addEventListener("click", () => processClick(1)); answerCHTML.addEventListener("click", () => processClick(2)); answerDHTML.addEventListener("click", () => processClick(3)); -document.addEventListener("keyup", e => { - if (e.code == "Digit1") processClick(0); - if (e.code == "Digit2") processClick(1); - if (e.code == "Digit3") processClick(2); - if (e.code == "Digit4") processClick(3); - if (e.code == "Enter" && settingsHTML.style.display === "none" && state.finishedGame) { - deinit(); - return; - } - if (e.code == "Enter" && !state.startedGame) init(); +document.addEventListener("keyup", (e) => { + if (e.code == "Digit1") processClick(0); + if (e.code == "Digit2") processClick(1); + if (e.code == "Digit3") processClick(2); + if (e.code == "Digit4") processClick(3); + if ( + e.code == "Enter" && + settingsHTML.style.display === "none" && + state.finishedGame + ) { + deinit(); + return; + } + if (e.code == "Enter" && !state.startedGame) init(); }); // start game deinit(); regionListHTML.innerHTML = regionList() - .map(region => `
${region}
`) + .map( + (region) => + `
${region}
` + ) .sort() .join(""); diff --git a/game_styles.css b/game_styles.css index 391e496..28f908f 100644 --- a/game_styles.css +++ b/game_styles.css @@ -1,147 +1,161 @@ :root { - --a-color: var(--red); - --b-color: var(--yellow); - --c-color: var(--green); - --d-color: var(--blue); - --question-country-color: var(--teal); - --question-capital-color: var(--blue); + --a-color: var(--red); + --b-color: var(--yellow); + --c-color: var(--green); + --d-color: var(--blue); + --question-country-color: var(--teal); + --question-capital-color: var(--blue); } input { - font-family: inherit + font-family: inherit; } .correct { - animation: correct .5s; + animation: correct 0.5s; } .incorrect { - animation: incorrect .5s; + animation: incorrect 0.5s; } @keyframes correct { - 0% { background: var(--default-bg); } - 50% { background: var(--green); } - 100% { background: var(--default-bg); } + 0% { + background: var(--default-bg); + } + 50% { + background: var(--green); + } + 100% { + background: var(--default-bg); + } } @keyframes incorrect { - 0% { background: var(--default-bg); } - 50% { background: var(--red); } - 100% { background: var(--default-bg); } + 0% { + background: var(--default-bg); + } + 50% { + background: var(--red); + } + 100% { + background: var(--default-bg); + } } #toprow { - display: flex; - justify-content: space-between; - align-items: center; + display: flex; + justify-content: space-between; + align-items: center; } @media only screen and (max-width: 600px) { - #toprow { - flex-direction: column-reverse; - } + #toprow { + flex-direction: column-reverse; + } } #question { - font-size: 1.5em; - display: flex; - align-items: center; + font-size: 1.5em; + display: flex; + align-items: center; } #question img { - max-height: 10vh; + max-height: 10vh; } #question * { - margin: 1em; + margin: 1em; } #score { - --good: var(--green); - --okay: var(--yellow); - --bad: var(--red); - background: var(--good); + --good: var(--green); + --okay: var(--yellow); + --bad: var(--red); + background: var(--good); } #time { - background: var(--blue); + background: var(--blue); } #gameinfo { - display: flex; + display: flex; } #gameinfo * { - margin: 0 0.5em 0 0.5em; + margin: 0 0.5em 0 0.5em; } -#previousQuestionAnswer { background: var(--green) } +#previousQuestionAnswer { + background: var(--green); +} #game .answer { - display: flex; - justify-content: space-evenly; - align-items: center; - align-content: center; + display: flex; + justify-content: space-evenly; + align-items: center; + align-content: center; } #game .answer .text { - width: 50%; + width: 50%; } #game .answer .letter { - font-size: 1.5em; - padding: 1em; - border: 0; - border-radius: 0.25em; + font-size: 1.5em; + padding: 1em; + border: 0; + border-radius: 0.25em; } #a { - background-color: var(--a-color); - border-color: var(--a-color); + background-color: var(--a-color); + border-color: var(--a-color); } #b { - background-color: var(--b-color); - border-color: var(--b-color); + background-color: var(--b-color); + border-color: var(--b-color); } #c { - background-color: var(--c-color); - border-color: var(--c-color); + background-color: var(--c-color); + border-color: var(--c-color); } #d { - background-color: var(--d-color); - border-color: var(--d-color); + background-color: var(--d-color); + border-color: var(--d-color); } span#questionCountry { - background-color: var(--question-country-color); + background-color: var(--question-country-color); } span#questionCapital { - background-color: var(--question-capital-color); + background-color: var(--question-capital-color); } #settings { - width: 100% + width: 100%; } #regionList { - display: flex; - flex-wrap: wrap; - justify-content: center; + display: flex; + flex-wrap: wrap; + justify-content: center; } #settings .regionListItem { - padding: 1em; - transition: 0.5s; + padding: 1em; + transition: 0.5s; } #settings .regionListItem:hover { - background: #d9d9d9; - color: black; + background: #d9d9d9; + color: black; } /* toggle switches */ @@ -153,7 +167,7 @@ span#questionCapital { height: 34px; } -.switch input { +.switch input { opacity: 0; width: 0; height: 0; @@ -167,8 +181,8 @@ span#questionCapital { right: 0; bottom: 0; background-color: var(--question-country-color); - -webkit-transition: .4s; - transition: .4s; + -webkit-transition: 0.4s; + transition: 0.4s; } .slider:before { @@ -179,8 +193,8 @@ span#questionCapital { left: 4px; bottom: 4px; background-color: white; - -webkit-transition: .4s; - transition: .4s; + -webkit-transition: 0.4s; + transition: 0.4s; } input:checked + .slider { @@ -207,29 +221,34 @@ input:checked + .slider:before { } #questionTypeSelector { - display: flex; - width: 100%; - align-items: center; - justify-content: space-around; - margin-top: 3em;; - margin-bottom: 3em;; + display: flex; + width: 100%; + align-items: center; + justify-content: space-around; + margin-top: 3em; + margin-bottom: 3em; } -.text img, td img { max-height: 15vh } - -#questionTypeSelector input[type="radio"] { display: none; } -input[type="radio"]+label { - padding: 0.5em; +.text img, +td img { + max-height: 15vh; } -input[type="radio"]:checked+label { - background-color: var(--yellow); + +#questionTypeSelector input[type="radio"] { + display: none; +} +input[type="radio"] + label { + padding: 0.5em; +} +input[type="radio"]:checked + label { + background-color: var(--yellow); } #previousQuestionAnswer { - display: inline; + display: inline; } #previousQuestionAnswer img { - display: inline; - max-height: 2em; + display: inline; + max-height: 2em; } diff --git a/index.html b/index.html index a116c04..bb9a5d2 100644 --- a/index.html +++ b/index.html @@ -1,72 +1,99 @@ - + + + + + + + capitals_quiz + - - - - - -capitals_quiz - - - -
-
-

you need javascript enabled to play this

+ +
+
+

you need javascript enabled to play this

-

time

-

score

+

time

+

score

-
- + + -
-

built with ❤ and adequate amounts of care by alv

- - - - +

correct answers

+
+
+
+

+ built with ❤ and adequate amounts of care by + alv +

+ + + + + diff --git a/styles.css b/styles.css index bb87266..4121655 100644 --- a/styles.css +++ b/styles.css @@ -1,35 +1,35 @@ @import url("https://alv.cx/styles.css"); :root { - --default-bg: #fefefe; - --dark-bg: #b8b8b8; - --selected-bg:#383838; - --default-fg: #454545; - --red: #ab4642; - --orange: #dc9656; - --yellow: #f7ca88; - --green: #a1b56c; - --teal: #86c1b9; - --blue: #7cafc2; - --purple: #ba8baf; - --brown: #a16946; + --default-bg: #fefefe; + --dark-bg: #b8b8b8; + --selected-bg: #383838; + --default-fg: #454545; + --red: #ab4642; + --orange: #dc9656; + --yellow: #f7ca88; + --green: #a1b56c; + --teal: #86c1b9; + --blue: #7cafc2; + --purple: #ba8baf; + --brown: #a16946; } body { - font-family: monospace; - color: var(--default-fg); - font-size: 16px; - margin: 0 auto; - max-width: 800px; - padding: 2em; - line-height: 1.1; - text-align: justify; - background-color: var(--default-bg); + font-family: monospace; + color: var(--default-fg); + font-size: 16px; + margin: 0 auto; + max-width: 800px; + padding: 2em; + line-height: 1.1; + text-align: justify; + background-color: var(--default-bg); } @media only screen and (max-width: 600px) { - body { - margin: 0em auto; - padding: 2em; - } + body { + margin: 0em auto; + padding: 2em; + } }