Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Style Update #21

Merged
merged 18 commits into from
Feb 4, 2024
Merged

Style Update #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
e55f48d
Update message area styling
FeXd May 6, 2023
9395ecb
Copy Lichess colors (temporary)
FeXd May 6, 2023
985c468
Merge branch 'main' into style
FeXd May 7, 2023
09b7d68
Pointer fixes
FeXd May 7, 2023
66df3d3
Styling Fix
FeXd May 7, 2023
46683e8
Update Debug Menu
FeXd May 7, 2023
f431581
Add info & settings icons
FeXd May 8, 2023
fcee7b2
WIP: kind of a mess, may revert
FeXd May 8, 2023
b640f6d
WIP: a bit better
FeXd May 9, 2023
bbe42d2
Random Fixes
FeXd Feb 3, 2024
c9a6965
Show / Hide debug menu
FeXd Feb 3, 2024
758d80d
Mobile Message
FeXd Feb 3, 2024
e004a53
Mobile Board Style
FeXd Feb 4, 2024
468a3ac
Add "Game Info" to Menu
FeXd Feb 4, 2024
1e95c14
No rounded corners in mobile screen
FeXd Feb 4, 2024
ce1e63d
Modal Tweaks
FeXd Feb 4, 2024
873ffc3
Modal Info Adjustments
FeXd Feb 4, 2024
c97dad1
Add build number to info modal
FeXd Feb 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 37 additions & 25 deletions index.html
View file
Open in desktop
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
Open in desktop
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