diff --git a/index.html b/index.html index 270e476..f9ddbb7 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ Wikihow game - +
@@ -16,34 +16,33 @@

How to play:

  • Use the "hint" button to get another image from the article to help your guess, you may only use 4 hints per game
  • The game ends when you either run out of lives or the timer runs out of time
    • - +
    -
    -
    - -
    -
    -
    - timer icon -

    +
    +
    +
    + +
    +
    +
    + timer icon +

    +
    +

    points

    +

    lives

    -

    points

    -

    lives

    -
    +

    Game over!

    Your score:

    - +
    - github logo + - \ No newline at end of file + diff --git a/script.js b/script.js index 3c3d5f0..79238fd 100644 --- a/script.js +++ b/script.js @@ -20,6 +20,7 @@ let timer; let hints; let gameDataRequest = new XMLHttpRequest(); + gameDataRequest.onreadystatechange = function() { if (gameDataRequest.readyState === 4 && gameDataRequest.status === 200) { gameData = JSON.parse(gameDataRequest.responseText); @@ -27,14 +28,20 @@ gameDataRequest.onreadystatechange = function() { startButton.innerText = "Play"; startButton.disabled = false; } -} +}; + +gameDataRequest.ontimeout = function() { + alert("timed out hecc"); +}; + +gameDataRequest.timeout = 5000; gameDataRequest.open("GET", "/wikihow_guess/articles_dir.txt"); gameDataRequest.send(); function startGame() { instructionsDiv.style.display = "none"; postGameDiv.style.display = "none"; - gameDiv.style.display = "block"; + gameDiv.style.display = "flex"; hints = 4; health = 3; points = 0; @@ -142,4 +149,4 @@ function timerTimeoutHandler() { } else { endGame(); } -} \ No newline at end of file +} diff --git a/style.css b/style.css index bdad42c..25f61dc 100644 --- a/style.css +++ b/style.css @@ -1,5 +1,47 @@ +html, body { + padding: 0; + background-color: #111; + color: #EEE; + font-family: 'Montserrat', sans-serif; +} + +button { + border: none; + outline: none; + border-radius: 5px; + background-color: #333; + color: #FFF; + padding: 5px 10px 5px 10px; + transition: background-color 0.2s ease-in-out; + border-radius: 50000px; + cursor: pointer; + font-family: inherit; +} + +button[disabled] { + background-color: #A22; + cursor: default; + color: #CCC; +} + +button:hover:not([disabled]) { + background-color: #28F; +} + +#start_button { + position: absolute; + width: 75%; + font-size: 3em; + right: 12.5%; + margin-top: 2em; +} + #game_div { display: none; + flex-direction: column; + align-content: space-between; + align-items: stretch; + height: 90vh; } #post_game_div { @@ -9,38 +51,53 @@ #stats_box { display: flex; flex-direction: row; - justify-content: space-evenly; + justify-content: space-between; align-items: center; } +#stats_box > * { + flex-basis: 33%; +} + +#stats_box > :nth-child(2) { + text-align: center; +} + +#stats_box > :last-child { + text-align: right; +} + #image_display { display: flex; flex-direction: row; - justify-content: center; + justify-content: space-evenly; flex-wrap: wrap; + align-content: space-between; } -#options_display { +#image_display img { display: flex; - flex-direction: row; - justify-content: center; + border: #0F0 2px solid; + border-radius: 20px; } -.option { - flex-grow: 1; - padding: 5px; - margin:0 1px; +#options_display { + display: flex; + flex-direction: row; + justify-content: space-around; + margin: 20px 0 20px 0; } #timer_container { display: flex; - justify-content: center; + justify-content: flex-start; align-items: center; } #timer_display { padding: 5px; - margin:0 1px; + margin: 0 1px; + width: 20px; } #hint_display { @@ -51,14 +108,30 @@ height: 48px; width: 48px; position: absolute; - bottom: 0; - right: 0; - margin: 20px; + bottom: 20px; + right: 20px; + background: #AF1700; + background: linear-gradient(141deg, #F20 10%, #EDFF00 40%, #62FF4E 65%, #00FFF8 92%); + padding: 5px; + border-radius: 200px; + transition: transform 0.2s ease-in-out; } -.center_div { +#git_link:hover { + transform: scale(1.15); +} + +.center { margin: auto; width: 50%; padding: 10px; text-align: center; -} \ No newline at end of file +} + +.option { + display: flex; + flex-basis: 15%; + justify-content: center; + align-items: center; +} +