update styles

package.json

@@ -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"

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());
 	}

src/settings.ts

@@ -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;

src/styles.scss

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

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;
@@ -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
 }
@@ -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
 }
 
@@ -535,8 +538,7 @@ 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
 }
 
@@ -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
 }