update styles
This commit is contained in:
Riffaells
parent
1b8c90e2be
commit
48d3491fc2
|
|
@ -6,9 +6,7 @@
|
|||
"scripts": {
|
||||
"dev": "node esbuild.config.mjs",
|
||||
"build": "tsc -noEmit -skipLibCheck && node esbuild.config.mjs production",
|
||||
"version": "node version-bump.mjs && git add manifest.json versions.json",
|
||||
"sass-dev": "sass --watch --update --style=expanded src/styles.scss:styles.css",
|
||||
"sass-prod": "sass --no-source-map --style=compressed src/styles.scss:styles.css"
|
||||
"version": "node version-bump.mjs && git add manifest.json versions.json"
|
||||
},
|
||||
"keywords": [
|
||||
"chess"
|
||||
|
|
|
|||
63
src/main.ts
63
src/main.ts
|
|
@ -16,18 +16,69 @@ export default class ChessMatePlugin extends Plugin {
|
|||
});
|
||||
|
||||
const boardElement = container.createDiv({
|
||||
cls: "pgn-viewer"
|
||||
cls: "pgn-viewer",
|
||||
});
|
||||
|
||||
PgnViewer(boardElement, {
|
||||
pgn: source.trim(),
|
||||
resizable: true
|
||||
});
|
||||
const options = this.parsePgnWithOptions(source.trim());
|
||||
|
||||
boardElement.style.width = `${this.settings.boardSize}px`;
|
||||
const viewerConfig = {
|
||||
pgn: options.pgn,
|
||||
orientation: (options.orientation as 'white' | 'black') || 'white',
|
||||
fen: options.fen || undefined,
|
||||
// showMoves: options.showMoves === 'true' || this.settings.showMoves,
|
||||
chessground: {
|
||||
movable: {
|
||||
free: options.editable === 'true' || false,
|
||||
color: 'both',
|
||||
},
|
||||
orientation: (options.orientation as 'white' | 'black') || 'white',
|
||||
},
|
||||
drawable: {
|
||||
enabled: true,
|
||||
visible: true,
|
||||
shapes: [],
|
||||
brushes: {
|
||||
green: { key: 'green', color: '#00FF00', opacity: 0.6 },
|
||||
red: { key: 'red', color: 'rgba(255,154,28,0.91)', opacity: 0.6 },
|
||||
},
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
PgnViewer(boardElement, viewerConfig);
|
||||
|
||||
boardElement.style.setProperty('--board-color', this.settings.accentColor);
|
||||
});
|
||||
}
|
||||
|
||||
parsePgnWithOptions(source: string): {
|
||||
pgn: string;
|
||||
orientation?: string;
|
||||
fen?: string;
|
||||
showMoves?: string;
|
||||
editable?: string;
|
||||
} {
|
||||
const options: any = {};
|
||||
const lines = source.split('\n');
|
||||
const pgnLines: string[] = [];
|
||||
|
||||
for (const line of lines) {
|
||||
const match = line.match(/\[([a-zA-Z]+)\s+"(.+)"]/);
|
||||
if (match) {
|
||||
const [, key, value] = match;
|
||||
options[key.toLowerCase()] = value;
|
||||
} else {
|
||||
pgnLines.push(line);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
pgn: pgnLines.join('\n').trim(),
|
||||
...options,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
async loadSettings() {
|
||||
this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ export interface ChessMateSettings {
|
|||
boardTheme: string;
|
||||
pieceTheme: string;
|
||||
showMoves: boolean;
|
||||
accentColor: string;
|
||||
boardSize: number;
|
||||
}
|
||||
|
||||
|
|
@ -13,6 +14,7 @@ export const DEFAULT_SETTINGS: ChessMateSettings = {
|
|||
boardTheme: 'brown',
|
||||
pieceTheme: 'cburnett',
|
||||
showMoves: true,
|
||||
accentColor: "#ffeac3",
|
||||
boardSize: 600
|
||||
};
|
||||
|
||||
|
|
@ -33,12 +35,7 @@ export class ChessMateSettingTab extends PluginSettingTab {
|
|||
new Setting(containerEl)
|
||||
.setName(t('settings.boardTheme'))
|
||||
.setDesc(t('settings.boardThemeDesc'))
|
||||
.addDropdown(dropdown => dropdown
|
||||
.addOptions({
|
||||
brown: t('settings.themeBrown'),
|
||||
blue: t('settings.themeBlue'),
|
||||
green: t('settings.themeGreen')
|
||||
})
|
||||
.addText(text => text
|
||||
.setValue(this.plugin.settings.boardTheme)
|
||||
.onChange(async (value) => {
|
||||
this.plugin.settings.boardTheme = value;
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
@import '../node_modules/lichess-pgn-viewer/scss/lichess-pgn-viewer.scss';
|
||||
|
||||
120
styles.css
120
styles.css
|
|
@ -1,4 +1,12 @@
|
|||
.cg-wrap {
|
||||
.chessmate-container {
|
||||
}
|
||||
|
||||
:root {
|
||||
--board-color: #ffffff;
|
||||
|
||||
}
|
||||
|
||||
.cg-wrap {
|
||||
box-sizing: content-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
|
|
@ -83,9 +91,7 @@ piece.fading {
|
|||
opacity: .6
|
||||
}
|
||||
|
||||
.cg-wrap cg-auto-pieces,
|
||||
.cg-wrap .cg-shapes,
|
||||
.cg-wrap .cg-custom-svgs {
|
||||
.cg-wrap cg-auto-pieces, .cg-wrap .cg-shapes, .cg-wrap .cg-custom-svgs {
|
||||
overflow: visible;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
|
|
@ -268,7 +274,7 @@ cg-board square.current-premove {
|
|||
text-decoration: none
|
||||
}
|
||||
|
||||
@media(hover: hover) {
|
||||
@media (hover: hover) {
|
||||
.lpv__fbt:hover:not(.disabled):not([disabled]) {
|
||||
background: var(--c-lpv-fbt-hover, lpv-fbt-hover);
|
||||
color: #fff
|
||||
|
|
@ -280,8 +286,7 @@ cg-board square.current-premove {
|
|||
color: #fff
|
||||
}
|
||||
|
||||
.lpv__fbt.disabled,
|
||||
.lpv__fbt[disabled] {
|
||||
.lpv__fbt.disabled, .lpv__fbt[disabled] {
|
||||
opacity: .4;
|
||||
cursor: default
|
||||
}
|
||||
|
|
@ -306,20 +311,20 @@ cg-board square.current-premove {
|
|||
}
|
||||
|
||||
.lpv--moves-false {
|
||||
grid-template-areas: "board" "controls";
|
||||
grid-template-columns: minmax(200px, calc(100vh - var(--controls-height)));
|
||||
grid-template-rows: auto var(--controls-height)
|
||||
grid-template-areas:"board" "controls";
|
||||
grid-template-columns:minmax(200px, calc(100vh - var(--controls-height)));
|
||||
grid-template-rows:auto var(--controls-height)
|
||||
}
|
||||
|
||||
.lpv--moves-right {
|
||||
grid-template-areas: "board side" "controls side";
|
||||
grid-template-columns: auto fit-content(40%);
|
||||
grid-template-rows: auto var(--controls-height)
|
||||
grid-template-areas:"board side" "controls side";
|
||||
grid-template-columns:auto fit-content(40%);
|
||||
grid-template-rows:auto var(--controls-height)
|
||||
}
|
||||
|
||||
.lpv--moves-bottom {
|
||||
grid-template-areas: "board" "controls" "side";
|
||||
grid-template-rows: auto var(--controls-height)
|
||||
grid-template-areas:"board" "controls" "side";
|
||||
grid-template-rows:auto var(--controls-height)
|
||||
}
|
||||
|
||||
.lpv--moves-bottom .lpv__controls {
|
||||
|
|
@ -327,32 +332,32 @@ cg-board square.current-premove {
|
|||
}
|
||||
|
||||
.lpv--moves-auto {
|
||||
grid-template-areas: "board side" "controls side";
|
||||
grid-template-columns: minmax(200px, calc(100vh - var(--controls-height))) minmax(232px, 1fr);
|
||||
grid-template-rows: auto var(--controls-height)
|
||||
grid-template-areas:"board side" "controls side";
|
||||
grid-template-columns:minmax(200px, calc(100vh - var(--controls-height))) minmax(232px, 1fr);
|
||||
grid-template-rows:auto var(--controls-height)
|
||||
}
|
||||
|
||||
@media(max-width: 500px) {
|
||||
@media (max-width: 500px) {
|
||||
.lpv--moves-auto {
|
||||
grid-template-areas: "board" "controls" "side";
|
||||
grid-template-columns: minmax(200px, calc(100vh - var(--controls-height) - 6em));
|
||||
grid-template-rows: auto var(--controls-height)
|
||||
grid-template-areas:"board" "controls" "side";
|
||||
grid-template-columns:minmax(200px, calc(100vh - var(--controls-height) - 6em));
|
||||
grid-template-rows:auto var(--controls-height)
|
||||
}
|
||||
}
|
||||
|
||||
.lpv--players.lpv--moves-false {
|
||||
grid-template-areas: "player-top" "board" "player-bot" "controls";
|
||||
grid-template-rows: 2em auto 2em var(--controls-height)
|
||||
grid-template-areas:"player-top" "board" "player-bot" "controls";
|
||||
grid-template-rows:2em auto 2em var(--controls-height)
|
||||
}
|
||||
|
||||
.lpv--players.lpv--moves-right {
|
||||
grid-template-areas: "player-top side" "board side" "player-bot side" "controls side";
|
||||
grid-template-rows: 2em auto 2em var(--controls-height)
|
||||
grid-template-areas:"player-top side" "board side" "player-bot side" "controls side";
|
||||
grid-template-rows:2em auto 2em var(--controls-height)
|
||||
}
|
||||
|
||||
.lpv--players.lpv--moves-bottom {
|
||||
grid-template-areas: "player-top" "board" "player-bot" "controls" "side";
|
||||
grid-template-rows: 2em auto 2em var(--controls-height)
|
||||
grid-template-areas:"player-top" "board" "player-bot" "controls" "side";
|
||||
grid-template-rows:2em auto 2em var(--controls-height)
|
||||
}
|
||||
|
||||
.lpv--players.lpv--moves-bottom .lpv__controls {
|
||||
|
|
@ -360,16 +365,16 @@ cg-board square.current-premove {
|
|||
}
|
||||
|
||||
.lpv--players.lpv--moves-auto {
|
||||
grid-template-areas: "player-top side" "board side" "player-bot side" "controls side";
|
||||
grid-template-columns: minmax(200px, calc(100vh - 2 * 2em - var(--controls-height))) minmax(232px, 1fr);
|
||||
grid-template-rows: 2em auto 2em var(--controls-height)
|
||||
grid-template-areas:"player-top side" "board side" "player-bot side" "controls side";
|
||||
grid-template-columns:minmax(200px, calc(100vh - 2 * 2em - var(--controls-height))) minmax(232px, 1fr);
|
||||
grid-template-rows:2em auto 2em var(--controls-height)
|
||||
}
|
||||
|
||||
@media(max-width: 500px) {
|
||||
@media (max-width: 500px) {
|
||||
.lpv--players.lpv--moves-auto {
|
||||
grid-template-areas: "player-top" "board" "player-bot" "controls" "side";
|
||||
grid-template-columns: minmax(200px, calc(100vh - 2 * 2em - var(--controls-height) - 6em));
|
||||
grid-template-rows: 2em auto 2em var(--controls-height)
|
||||
grid-template-areas:"player-top" "board" "player-bot" "controls" "side";
|
||||
grid-template-columns:minmax(200px, calc(100vh - 2 * 2em - var(--controls-height) - 6em));
|
||||
grid-template-rows:2em auto 2em var(--controls-height)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -393,13 +398,11 @@ cg-board square.current-premove {
|
|||
grid-area: controls
|
||||
}
|
||||
|
||||
.lpv__menu,
|
||||
.lpv__pgn {
|
||||
.lpv__menu, .lpv__pgn {
|
||||
grid-area: 1/1/2/2
|
||||
}
|
||||
|
||||
.lpv--players .lpv__menu,
|
||||
.lpv--players .lpv__pgn {
|
||||
.lpv--players .lpv__menu, .lpv--players .lpv__pgn {
|
||||
grid-area: 1/1/4/2
|
||||
}
|
||||
|
||||
|
|
@ -428,7 +431,7 @@ cg-board square.current-premove {
|
|||
color: var(--c-lpv-font-shy, rgb(109.0975, 108.21775, 106.8025))
|
||||
}
|
||||
|
||||
.lpv__moves>index {
|
||||
.lpv__moves > index {
|
||||
flex: 0 0 15%;
|
||||
margin-right: 3%;
|
||||
display: flex;
|
||||
|
|
@ -509,7 +512,7 @@ cg-board square.current-premove {
|
|||
background: var(--c-lpv-bg-interesting-hover, rgb(105.6465, 67.69485, 98.1495))
|
||||
}
|
||||
|
||||
.lpv__moves>move {
|
||||
.lpv__moves > move {
|
||||
flex: 0 0 41%;
|
||||
font-size: 1.1em
|
||||
}
|
||||
|
|
@ -524,7 +527,7 @@ cg-board square.current-premove {
|
|||
font-weight: bold
|
||||
}
|
||||
|
||||
.lpv__moves>comment {
|
||||
.lpv__moves > comment {
|
||||
flex: 1 1 100%;
|
||||
background: var(--c-lpv-bg-variation, hsl(37, 5%, 15%));
|
||||
border: 1px solid var(--c-lpv-side-border, hsl(37, 5%, 13%));
|
||||
|
|
@ -535,12 +538,11 @@ cg-board square.current-premove {
|
|||
word-break: break-word
|
||||
}
|
||||
|
||||
.lpv__moves>comment+variation,
|
||||
.lpv__moves>comment+comment {
|
||||
.lpv__moves > comment + variation, .lpv__moves > comment + comment {
|
||||
border-top: none
|
||||
}
|
||||
|
||||
.lpv__moves>variation {
|
||||
.lpv__moves > variation {
|
||||
flex: 1 1 100%;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
|
|
@ -551,44 +553,44 @@ cg-board square.current-premove {
|
|||
padding: 0em .6em
|
||||
}
|
||||
|
||||
.lpv__moves>variation+variation {
|
||||
.lpv__moves > variation + variation {
|
||||
border-top: none
|
||||
}
|
||||
|
||||
.lpv__moves>variation move {
|
||||
.lpv__moves > variation move {
|
||||
display: inline-block;
|
||||
padding: .1em .2em;
|
||||
min-width: 2.5ch;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.lpv__moves>variation move+index {
|
||||
.lpv__moves > variation move + index {
|
||||
margin-left: .2em
|
||||
}
|
||||
|
||||
.lpv__moves>variation index {
|
||||
.lpv__moves > variation index {
|
||||
margin: 0;
|
||||
padding: .1em 0
|
||||
}
|
||||
|
||||
.lpv__moves>variation index+move {
|
||||
.lpv__moves > variation index + move {
|
||||
margin-left: .1em
|
||||
}
|
||||
|
||||
.lpv__moves>variation comment {
|
||||
.lpv__moves > variation comment {
|
||||
align-self: center;
|
||||
margin: 0 .3em
|
||||
}
|
||||
|
||||
.lpv__moves>variation paren {
|
||||
.lpv__moves > variation paren {
|
||||
color: var(--c-lpv-font-shy, rgb(109.0975, 108.21775, 106.8025))
|
||||
}
|
||||
|
||||
.lpv__moves>variation paren.open {
|
||||
.lpv__moves > variation paren.open {
|
||||
margin: 0 .1em 0 .2em
|
||||
}
|
||||
|
||||
.lpv__moves>variation paren.close {
|
||||
.lpv__moves > variation paren.close {
|
||||
margin: 0 .2em 0 .1em
|
||||
}
|
||||
|
||||
|
|
@ -696,8 +698,7 @@ cg-board square.current-premove {
|
|||
padding: .4rem .7rem
|
||||
}
|
||||
|
||||
.lpv *::-webkit-scrollbar,
|
||||
.lpv *::-webkit-scrollbar-corner {
|
||||
.lpv *::-webkit-scrollbar, .lpv *::-webkit-scrollbar-corner {
|
||||
width: .5rem;
|
||||
background: var(--c-lpv-bg, hsl(37, 5%, 18%))
|
||||
}
|
||||
|
|
@ -706,8 +707,7 @@ cg-board square.current-premove {
|
|||
background: var(--c-lpv-font-bg, rgb(72.556, 71.1484, 68.884))
|
||||
}
|
||||
|
||||
.lpv *::-webkit-scrollbar-thumb:hover,
|
||||
.lpv *::-webkit-scrollbar-thumb:active {
|
||||
.lpv *::-webkit-scrollbar-thumb:hover, .lpv *::-webkit-scrollbar-thumb:active {
|
||||
background: var(--c-lpv-font-shy, rgb(109.0975, 108.21775, 106.8025))
|
||||
}
|
||||
|
||||
|
|
@ -754,9 +754,7 @@ cg-board square.current-premove {
|
|||
box-sizing: border-box
|
||||
}
|
||||
|
||||
.lpv *,
|
||||
.lpv *::before,
|
||||
.lpv *::after {
|
||||
.lpv *, .lpv *::before, .lpv *::after {
|
||||
box-sizing: inherit
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue