-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: refactor theme change functionality to use abstract class and s…
…ubclasses for different chess sites
- Loading branch information
1 parent
8697022
commit bfaf267
Showing
4 changed files
with
161 additions
and
104 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| import Site from './Site'; | ||
| import { getBoardURL, getPieceURL } from '../utils'; | ||
|
|
||
| /** Class for chess.com */ | ||
| class ChessCom extends Site { | ||
| constructor() { | ||
| super(); | ||
| } | ||
|
|
||
| changeBoard(theme: string): void { | ||
| const board: HTMLElement | null = document.querySelector('wc-chess-board'); | ||
| if (board != null) | ||
| board.style.backgroundImage = `url('${getBoardURL(theme)}')`; | ||
| const root: HTMLElement = document.querySelector(':root')!; | ||
| root.style.setProperty( | ||
| '--theme-board-style-image', | ||
| `url('${getBoardURL(theme)}')`, | ||
| ); | ||
| } | ||
|
|
||
| changePieces(theme: string): void { | ||
| const pieces: NodeListOf<HTMLElement> = document.querySelectorAll('.piece'); | ||
| const pieceNames = [ | ||
| 'wp', | ||
| 'wr', | ||
| 'wn', | ||
| 'wb', | ||
| 'wq', | ||
| 'wk', | ||
| 'bp', | ||
| 'br', | ||
| 'bn', | ||
| 'bb', | ||
| 'bq', | ||
| 'bk', | ||
| ]; | ||
| const root: HTMLElement = document.querySelector(':root')!; | ||
| for (const piece of pieceNames) { | ||
| root.style.setProperty( | ||
| `--theme-piece-set-${piece}`, | ||
| `url('${getPieceURL(theme, piece)}')`, | ||
| ); | ||
| } | ||
| for (const piece of pieces) { | ||
| const classList = piece.classList; | ||
| const name = pieceNames.find((name) => classList.contains(name)); | ||
| if (name != null) { | ||
| piece.style.backgroundImage = `var(--theme-piece-set-${name})`; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| export default ChessCom; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import Site from './Site'; | ||
| import { getBoardURL, getPieceURL } from '../utils'; | ||
|
|
||
| /** Class for lichess.org */ | ||
| class Lichessorg extends Site { | ||
| constructor() { | ||
| super(); | ||
| } | ||
|
|
||
| changeBoard(theme: string): void { | ||
| const boards: NodeListOf<HTMLElement> = | ||
| document.querySelectorAll('cg-board'); | ||
| for (const board of boards) { | ||
| board.style.backgroundImage = `url('${getBoardURL(theme)}')`; | ||
| } | ||
| this.boardTheme = theme; | ||
| } | ||
|
|
||
| changePieces(theme: string): void { | ||
| const pieces: NodeListOf<HTMLElement> = document.querySelectorAll('piece'); | ||
| for (const piece of pieces) { | ||
| const classList = piece.classList; | ||
| if (classList.contains('white') || classList.contains('black')) { | ||
| const nameRelation: { [key: string]: string } = { | ||
| black: 'b', | ||
| white: 'w', | ||
| pawn: 'p', | ||
| knight: 'n', | ||
| bishop: 'b', | ||
| rook: 'r', | ||
| queen: 'q', | ||
| king: 'k', | ||
| }; | ||
| const pieceName = [...classList] | ||
| .sort( | ||
| (a, b) => | ||
| Object.keys(nameRelation).indexOf(a) - | ||
| Object.keys(nameRelation).indexOf(b), | ||
| ) | ||
| .map((c: string) => nameRelation[c]) | ||
| .join(''); | ||
| piece.style.backgroundImage = `url('${getPieceURL(theme, pieceName)}')`; | ||
| } | ||
| } | ||
| this.piecesTheme = theme; | ||
| } | ||
| } | ||
|
|
||
| export default Lichessorg; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| /** Abstract class for chess sites */ | ||
| abstract class Site { | ||
| // Properties for the theme of the board and pieces | ||
| boardTheme: string; | ||
| piecesTheme: string; | ||
| constructor() { | ||
| this.boardTheme = ''; | ||
| this.piecesTheme = ''; | ||
| } | ||
|
|
||
| /** Abstract method to change the board theme, to be implemented by subclasses | ||
| * @param board - The theme of the board | ||
| */ | ||
| abstract changeBoard(board: string): void; | ||
|
|
||
| /** Abstract method to change the pieces theme, to be implemented by subclasses | ||
| * @param pieces - The theme of the pieces | ||
| */ | ||
| abstract changePieces(pieces: string): void; | ||
|
|
||
| /** Method to start observing changes in the DOM */ | ||
| startObserver(): void { | ||
| const observer = new MutationObserver((mutations) => { | ||
| if (this.boardTheme === '' || this.piecesTheme === '') { | ||
| return; | ||
| } | ||
| mutations.forEach((mutation) => { | ||
| if (mutation.type === 'childList') { | ||
| this.changeBoard(this.boardTheme); | ||
| this.changePieces(this.piecesTheme); | ||
| } | ||
| }); | ||
| }); | ||
|
|
||
| observer.observe(document.body, { | ||
| childList: true, | ||
| subtree: true, | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| export default Site; |