tpl
/
obsidian-sample-plugin
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update styles

This commit is contained in:
Riffaells 2024-12-01 19:57:16 +05:00
parent 1b8c90e2be
commit 48d3491fc2
5 changed files with 438 additions and 396 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -6,9 +6,7 @@
"scripts": { "scripts": {
"dev": "node esbuild.config.mjs", "dev": "node esbuild.config.mjs",
"build": "tsc -noEmit -skipLibCheck && node esbuild.config.mjs production", "build": "tsc -noEmit -skipLibCheck && node esbuild.config.mjs production",
"version": "node version-bump.mjs && git add manifest.json versions.json", "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"
}, },
"keywords": [ "keywords": [
"chess" "chess"

63
src/main.ts
View File

@ -16,18 +16,69 @@ export default class ChessMatePlugin extends Plugin {
}); });
const boardElement = container.createDiv({ const boardElement = container.createDiv({
cls: "pgn-viewer" cls: "pgn-viewer",
}); });
PgnViewer(boardElement, { const options = this.parsePgnWithOptions(source.trim());
pgn: source.trim(),
resizable: true
});
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() { async loadSettings() {
this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData()); this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
} }

9
src/settings.ts
View File

@ -6,6 +6,7 @@ export interface ChessMateSettings {
boardTheme: string; boardTheme: string;
pieceTheme: string; pieceTheme: string;
showMoves: boolean; showMoves: boolean;
accentColor: string;
boardSize: number; boardSize: number;
} }
@ -13,6 +14,7 @@ export const DEFAULT_SETTINGS: ChessMateSettings = {
boardTheme: 'brown', boardTheme: 'brown',
pieceTheme: 'cburnett', pieceTheme: 'cburnett',
showMoves: true, showMoves: true,
accentColor: "#ffeac3",
boardSize: 600 boardSize: 600
}; };
@ -33,12 +35,7 @@ export class ChessMateSettingTab extends PluginSettingTab {
new Setting(containerEl) new Setting(containerEl)
.setName(t('settings.boardTheme')) .setName(t('settings.boardTheme'))
.setDesc(t('settings.boardThemeDesc')) .setDesc(t('settings.boardThemeDesc'))
.addDropdown(dropdown => dropdown .addText(text => text
.addOptions({
brown: t('settings.themeBrown'),
blue: t('settings.themeBlue'),
green: t('settings.themeGreen')
})
.setValue(this.plugin.settings.boardTheme) .setValue(this.plugin.settings.boardTheme)
.onChange(async (value) => { .onChange(async (value) => {
this.plugin.settings.boardTheme = value; this.plugin.settings.boardTheme = value;

2
src/styles.scss
View File

@ -1,2 +0,0 @@
@import '../node_modules/lichess-pgn-viewer/scss/lichess-pgn-viewer.scss';

120
styles.css
View File

@ -1,4 +1,12 @@
.cg-wrap { .chessmate-container {
}
:root {
--board-color: #ffffff;
}
.cg-wrap {
box-sizing: content-box; box-sizing: content-box;
position: relative; position: relative;
display: block; display: block;
@ -83,9 +91,7 @@ piece.fading {
opacity: .6 opacity: .6
} }
.cg-wrap cg-auto-pieces, .cg-wrap cg-auto-pieces, .cg-wrap .cg-shapes, .cg-wrap .cg-custom-svgs {
.cg-wrap .cg-shapes,
.cg-wrap .cg-custom-svgs {
overflow: visible; overflow: visible;
position: absolute; position: absolute;
top: 0px; top: 0px;
@ -268,7 +274,7 @@ cg-board square.current-premove {
text-decoration: none text-decoration: none
} }
@media(hover: hover) { @media (hover: hover) {
.lpv__fbt:hover:not(.disabled):not([disabled]) { .lpv__fbt:hover:not(.disabled):not([disabled]) {
background: var(--c-lpv-fbt-hover, lpv-fbt-hover); background: var(--c-lpv-fbt-hover, lpv-fbt-hover);
color: #fff color: #fff
@ -280,8 +286,7 @@ cg-board square.current-premove {
color: #fff color: #fff
} }
.lpv__fbt.disabled, .lpv__fbt.disabled, .lpv__fbt[disabled] {
.lpv__fbt[disabled] {
opacity: .4; opacity: .4;
cursor: default cursor: default
} }
@ -306,20 +311,20 @@ cg-board square.current-premove {
} }
.lpv--moves-false { .lpv--moves-false {
grid-template-areas: "board" "controls"; grid-template-areas:"board" "controls";
grid-template-columns: minmax(200px, calc(100vh - var(--controls-height))); grid-template-columns:minmax(200px, calc(100vh - var(--controls-height)));
grid-template-rows: auto var(--controls-height) grid-template-rows:auto var(--controls-height)
} }
.lpv--moves-right { .lpv--moves-right {
grid-template-areas: "board side" "controls side"; grid-template-areas:"board side" "controls side";
grid-template-columns: auto fit-content(40%); grid-template-columns:auto fit-content(40%);
grid-template-rows: auto var(--controls-height) grid-template-rows:auto var(--controls-height)
} }
.lpv--moves-bottom { .lpv--moves-bottom {
grid-template-areas: "board" "controls" "side"; grid-template-areas:"board" "controls" "side";
grid-template-rows: auto var(--controls-height) grid-template-rows:auto var(--controls-height)
} }
.lpv--moves-bottom .lpv__controls { .lpv--moves-bottom .lpv__controls {
@ -327,32 +332,32 @@ cg-board square.current-premove {
} }
.lpv--moves-auto { .lpv--moves-auto {
grid-template-areas: "board side" "controls side"; grid-template-areas:"board side" "controls side";
grid-template-columns: minmax(200px, calc(100vh - var(--controls-height))) minmax(232px, 1fr); grid-template-columns:minmax(200px, calc(100vh - var(--controls-height))) minmax(232px, 1fr);
grid-template-rows: auto var(--controls-height) grid-template-rows:auto var(--controls-height)
} }
@media(max-width: 500px) { @media (max-width: 500px) {
.lpv--moves-auto { .lpv--moves-auto {
grid-template-areas: "board" "controls" "side"; grid-template-areas:"board" "controls" "side";
grid-template-columns: minmax(200px, calc(100vh - var(--controls-height) - 6em)); grid-template-columns:minmax(200px, calc(100vh - var(--controls-height) - 6em));
grid-template-rows: auto var(--controls-height) grid-template-rows:auto var(--controls-height)
} }
} }
.lpv--players.lpv--moves-false { .lpv--players.lpv--moves-false {
grid-template-areas: "player-top" "board" "player-bot" "controls"; grid-template-areas:"player-top" "board" "player-bot" "controls";
grid-template-rows: 2em auto 2em var(--controls-height) grid-template-rows:2em auto 2em var(--controls-height)
} }
.lpv--players.lpv--moves-right { .lpv--players.lpv--moves-right {
grid-template-areas: "player-top side" "board side" "player-bot side" "controls side"; grid-template-areas:"player-top side" "board side" "player-bot side" "controls side";
grid-template-rows: 2em auto 2em var(--controls-height) grid-template-rows:2em auto 2em var(--controls-height)
} }
.lpv--players.lpv--moves-bottom { .lpv--players.lpv--moves-bottom {
grid-template-areas: "player-top" "board" "player-bot" "controls" "side"; grid-template-areas:"player-top" "board" "player-bot" "controls" "side";
grid-template-rows: 2em auto 2em var(--controls-height) grid-template-rows:2em auto 2em var(--controls-height)
} }
.lpv--players.lpv--moves-bottom .lpv__controls { .lpv--players.lpv--moves-bottom .lpv__controls {
@ -360,16 +365,16 @@ cg-board square.current-premove {
} }
.lpv--players.lpv--moves-auto { .lpv--players.lpv--moves-auto {
grid-template-areas: "player-top side" "board side" "player-bot side" "controls side"; 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-columns:minmax(200px, calc(100vh - 2 * 2em - var(--controls-height))) minmax(232px, 1fr);
grid-template-rows: 2em auto 2em var(--controls-height) grid-template-rows:2em auto 2em var(--controls-height)
} }
@media(max-width: 500px) { @media (max-width: 500px) {
.lpv--players.lpv--moves-auto { .lpv--players.lpv--moves-auto {
grid-template-areas: "player-top" "board" "player-bot" "controls" "side"; 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-columns:minmax(200px, calc(100vh - 2 * 2em - var(--controls-height) - 6em));
grid-template-rows: 2em auto 2em var(--controls-height) grid-template-rows:2em auto 2em var(--controls-height)
} }
} }
@ -393,13 +398,11 @@ cg-board square.current-premove {
grid-area: controls grid-area: controls
} }
.lpv__menu, .lpv__menu, .lpv__pgn {
.lpv__pgn {
grid-area: 1/1/2/2 grid-area: 1/1/2/2
} }
.lpv--players .lpv__menu, .lpv--players .lpv__menu, .lpv--players .lpv__pgn {
.lpv--players .lpv__pgn {
grid-area: 1/1/4/2 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)) color: var(--c-lpv-font-shy, rgb(109.0975, 108.21775, 106.8025))
} }
.lpv__moves>index { .lpv__moves > index {
flex: 0 0 15%; flex: 0 0 15%;
margin-right: 3%; margin-right: 3%;
display: flex; 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)) background: var(--c-lpv-bg-interesting-hover, rgb(105.6465, 67.69485, 98.1495))
} }
.lpv__moves>move { .lpv__moves > move {
flex: 0 0 41%; flex: 0 0 41%;
font-size: 1.1em font-size: 1.1em
} }
@ -524,7 +527,7 @@ cg-board square.current-premove {
font-weight: bold font-weight: bold
} }
.lpv__moves>comment { .lpv__moves > comment {
flex: 1 1 100%; flex: 1 1 100%;
background: var(--c-lpv-bg-variation, hsl(37, 5%, 15%)); background: var(--c-lpv-bg-variation, hsl(37, 5%, 15%));
border: 1px solid var(--c-lpv-side-border, hsl(37, 5%, 13%)); 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 word-break: break-word
} }
.lpv__moves>comment+variation, .lpv__moves > comment + variation, .lpv__moves > comment + comment {
.lpv__moves>comment+comment {
border-top: none border-top: none
} }
.lpv__moves>variation { .lpv__moves > variation {
flex: 1 1 100%; flex: 1 1 100%;
display: block; display: block;
overflow: hidden; overflow: hidden;
@ -551,44 +553,44 @@ cg-board square.current-premove {
padding: 0em .6em padding: 0em .6em
} }
.lpv__moves>variation+variation { .lpv__moves > variation + variation {
border-top: none border-top: none
} }
.lpv__moves>variation move { .lpv__moves > variation move {
display: inline-block; display: inline-block;
padding: .1em .2em; padding: .1em .2em;
min-width: 2.5ch; min-width: 2.5ch;
text-align: center text-align: center
} }
.lpv__moves>variation move+index { .lpv__moves > variation move + index {
margin-left: .2em margin-left: .2em
} }
.lpv__moves>variation index { .lpv__moves > variation index {
margin: 0; margin: 0;
padding: .1em 0 padding: .1em 0
} }
.lpv__moves>variation index+move { .lpv__moves > variation index + move {
margin-left: .1em margin-left: .1em
} }
.lpv__moves>variation comment { .lpv__moves > variation comment {
align-self: center; align-self: center;
margin: 0 .3em margin: 0 .3em
} }
.lpv__moves>variation paren { .lpv__moves > variation paren {
color: var(--c-lpv-font-shy, rgb(109.0975, 108.21775, 106.8025)) 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 margin: 0 .1em 0 .2em
} }
.lpv__moves>variation paren.close { .lpv__moves > variation paren.close {
margin: 0 .2em 0 .1em margin: 0 .2em 0 .1em
} }
@ -696,8 +698,7 @@ cg-board square.current-premove {
padding: .4rem .7rem padding: .4rem .7rem
} }
.lpv *::-webkit-scrollbar, .lpv *::-webkit-scrollbar, .lpv *::-webkit-scrollbar-corner {
.lpv *::-webkit-scrollbar-corner {
width: .5rem; width: .5rem;
background: var(--c-lpv-bg, hsl(37, 5%, 18%)) 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)) background: var(--c-lpv-font-bg, rgb(72.556, 71.1484, 68.884))
} }
.lpv *::-webkit-scrollbar-thumb:hover, .lpv *::-webkit-scrollbar-thumb:hover, .lpv *::-webkit-scrollbar-thumb:active {
.lpv *::-webkit-scrollbar-thumb:active {
background: var(--c-lpv-font-shy, rgb(109.0975, 108.21775, 106.8025)) 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 box-sizing: border-box
} }
.lpv *, .lpv *, .lpv *::before, .lpv *::after {
.lpv *::before,
.lpv *::after {
box-sizing: inherit box-sizing: inherit
} }