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