Skip to content

Commit

Permalink
Style Update (#21)
Browse files Browse the repository at this point in the history 
- many style adjustments, trying to make things simple and work better
on mobile
- there is now only a single menu button
- tapping on the title brings up the debug menu
- info module now shows current rating and version number

closes #15
closes #18
  • Loading branch information
@FeXd
FeXd committed Feb 4, 2024
2 parents 84151a9 + c97dad1 commit 76fe3b1
Show file tree
Hide file tree
Showing 3 changed files with 258 additions and 83 deletions.
62 changes: 37 additions & 25 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,12 @@
<body>

<header>
<h1>Puzzle ♟ Chess</h1>
<p>Work in progress.</p>
<button id="menu-button">
<!-- menu icon c/o Google Fonts / Material Symbols: https://fonts.google.com/ -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>
<span>menu</span>
</button>
<h1 id="title">Puzzle ♟ Chess</h1>
</header>

<main id="board">
Expand Down Expand Up @@ -90,38 +94,46 @@ <h1>Puzzle ♟ Chess</h1>
<div id="h8" class="r"><span></span></div>
</main>

<aside id="message">
<footer id="message">
<p id="no-js">
<strong>Oh no!</strong> Either JavaScript is <a href="https://duckduckgo.com/?q=how+to+enable+javascript" target="_blank">disabled</a>, you have <br>a <a
href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors" target="_blank">CORS
error</a>, or you aren't running a <a
href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server"
target="_blank">local server</a>.
</p>
</aside>

<footer>
<p>Game by <a href="https://fexd.com/" rel="me" target="_blank">Arlin Schaffel</a></p>
<p class="attribution">Pieces by <a href="https://en.wikipedia.org/wiki/User:Cburnett"
target="_blank">Cburnett</a>, <a href="http://creativecommons.org/licenses/by-sa/3.0/"
target="_blank">CC BY-SA 3.0</a> via <a
href="https://commons.wikimedia.org/wiki/Template:SVG_chess_pieces" target="_blank">Wikimedia
Commons</a></p>
<p class="attribution">Puzzles via <a href="https://database.lichess.org/#puzzles"
target="_blank">Lichess Open Database</a>, <a href="https://www.tldrlegal.com/license/creative-commons-cc0-1-0-universal"
target="_blank">Creative Commons CC0</a></p>
<p class="attribution">Uses <a href="https://github.com/jayasurian123/fen-validator"
target="_blank">fen-validator</a>, <a href="https://choosealicense.com/licenses/gpl-3.0/"
target="_blank">GNU GPL v3.0</a> by <a href="https://github.com/jayasurian123"
target="_blank">Jayasurian Makkoth</a></p>
<p class="attribution">Uses <a href="https://github.com/josefjadrny/js-chess-engine"
target="_blank">JS-CHESS-ENGINE</a>, <a href="https://choosealicense.com/licenses/mit/"
target="_blank">MIT</a> by <a href="https://github.com/josefjadrny" target="_blank">Josef Jadrny</a></p>
<p class="attribution">Code available on <a href="https://github.com/FeXd/puzzle-chess"
target="_blank">GitHub</a> | Play on <a href="https://fexd.itch.io/puzzle-chess">itch.io</a></p>
</footer>

<aside id="debug"></aside>
<aside id="debug" style="display: none;"></aside>

<div id="info-modal" style="display:none;">
<div>
<button class="close-button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 96 960 960"><path d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z"/></svg>
<span>close</span>
</button>
<h1 id="title">Puzzle ♟ Chess</h1>
<p id="game-info"></p>
<h2>Game by <a href="https://fexd.com/" rel="me" target="_blank">Arlin Schaffel</a></h2>
<p class="attribution">Pieces by <a href="https://en.wikipedia.org/wiki/User:Cburnett"
target="_blank">Cburnett</a>,<br> <a href="http://creativecommons.org/licenses/by-sa/3.0/"
target="_blank">CC BY-SA 3.0</a> via <a
href="https://commons.wikimedia.org/wiki/Template:SVG_chess_pieces" target="_blank">Wikimedia
Commons</a></p>
<p class="attribution">Puzzles via <a href="https://database.lichess.org/#puzzles"
target="_blank">Lichess Open Database</a>,<br> <a href="https://www.tldrlegal.com/license/creative-commons-cc0-1-0-universal"
target="_blank">Creative Commons CC0</a></p>
<p class="attribution">Uses <a href="https://github.com/jayasurian123/fen-validator"
target="_blank">fen-validator</a>,<br> <a href="https://choosealicense.com/licenses/gpl-3.0/"
target="_blank">GNU GPL v3.0</a> by <a href="https://github.com/jayasurian123"
target="_blank">Jayasurian Makkoth</a></p>
<p class="attribution">Uses <a href="https://github.com/josefjadrny/js-chess-engine"
target="_blank">JS-CHESS-ENGINE</a>,<br> <a href="https://choosealicense.com/licenses/mit/"
target="_blank">MIT</a> by <a href="https://github.com/josefjadrny" target="_blank">Josef Jadrny</a></p>
<p class="attribution">Code available on <a href="https://github.com/FeXd/puzzle-chess"
target="_blank">GitHub</a> | Play on <a href="https://fexd.itch.io/puzzle-chess">itch.io</a></p>
</div>
</div>
</body>

</html>
41 changes: 38 additions & 3 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ let playerRating = 400;

window.addEventListener("DOMContentLoaded", (event) => {
setUpBoard();
setUpButtons();
playerRating = getLocalPlayerRating();
fetch('./puzzles/offline/puzzles.csv')
.then(response => response.text())
Expand Down Expand Up @@ -72,6 +73,31 @@ function setUpBoard() {
}
}

function setUpButtons() {
const title = document.getElementById('title');
const menuButton = document.getElementById('menu-button');
const closeButtons = document.querySelectorAll('.close-button');

title.addEventListener('pointerdown', function () {
let element = document.getElementById('debug');
element.style.display = element.style.display === 'none' ? 'block' : 'none';
});

menuButton.addEventListener('pointerdown', function () {
document.getElementById('info-modal').style.display = 'flex';
});

menuButton.addEventListener('pointerdown', function () {
document.getElementById('info-modal').style.display = 'flex';
});

closeButtons.forEach(closeButton => {
closeButton.addEventListener('pointerdown', function () {
this.parentNode.parentNode.style.display = 'none';
});
});
}

function unselectAll() {
const board = document.getElementById('board');
const squares = board.querySelectorAll('div');
Expand Down Expand Up @@ -264,6 +290,7 @@ function loadPuzzle(puzzle) {
computerMove(currentPuzzle.moves[0].substring(0, 2), currentPuzzle.moves[0].substring(2, 4));
lastPuzzleMoveIndex = 0;

updateGameInfo();
updateDebug();
}

Expand All @@ -278,9 +305,17 @@ function disableNextPuzzle() {

function updateDebug() {
document.getElementById('debug').innerHTML = `
Puzzle: <a href="https://lichess.org/training/${currentPuzzle.puzzle_id}">${currentPuzzle.puzzle_id}</a><br>
Rating: ${currentPuzzle.rating}<br>
Player: ${getLocalPlayerRating()}<br>
<strong>DEBUG INFO</strong>:
Puzzle ID: <a href="https://lichess.org/training/${currentPuzzle.puzzle_id}">${currentPuzzle.puzzle_id}</a> -
Puzzle Rating: ${currentPuzzle.rating} -
Player Rating: ${getLocalPlayerRating()}
`;
}

function updateGameInfo() {
document.getElementById('game-info').innerHTML = `
<em>Build v0.0.1</em><br>
Current Rating: <strong>${getLocalPlayerRating()}</strong><br>
`;
}

Expand Down
Loading

0 comments on commit 76fe3b1

Please sign in to comment.