first commit

.gitignore

@@ -14,6 +14,7 @@ main.js
 
 # Exclude sourcemaps
 *.map
+package-lock.json
 
 # obsidian
 data.json

esbuild.config.mjs

@@ -15,7 +15,7 @@ const context = await esbuild.context({
 	banner: {
 		js: banner,
 	},
-	entryPoints: ["main.ts"],
+	entryPoints: ["src/main.ts"],
 	bundle: true,
 	external: [
 		"obsidian",
@@ -38,7 +38,6 @@ const context = await esbuild.context({
 	sourcemap: prod ? false : "inline",
 	treeShaking: true,
 	outfile: "main.js",
-	minify: prod,
 });
 
 if (prod) {

main.ts

@@ -1,134 +0,0 @@
-import { App, Editor, MarkdownView, Modal, Notice, Plugin, PluginSettingTab, Setting } from 'obsidian';
-
-// Remember to rename these classes and interfaces!
-
-interface MyPluginSettings {
-	mySetting: string;
-}
-
-const DEFAULT_SETTINGS: MyPluginSettings = {
-	mySetting: 'default'
-}
-
-export default class MyPlugin extends Plugin {
-	settings: MyPluginSettings;
-
-	async onload() {
-		await this.loadSettings();
-
-		// This creates an icon in the left ribbon.
-		const ribbonIconEl = this.addRibbonIcon('dice', 'Sample Plugin', (evt: MouseEvent) => {
-			// Called when the user clicks the icon.
-			new Notice('This is a notice!');
-		});
-		// Perform additional things with the ribbon
-		ribbonIconEl.addClass('my-plugin-ribbon-class');
-
-		// This adds a status bar item to the bottom of the app. Does not work on mobile apps.
-		const statusBarItemEl = this.addStatusBarItem();
-		statusBarItemEl.setText('Status Bar Text');
-
-		// This adds a simple command that can be triggered anywhere
-		this.addCommand({
-			id: 'open-sample-modal-simple',
-			name: 'Open sample modal (simple)',
-			callback: () => {
-				new SampleModal(this.app).open();
-			}
-		});
-		// This adds an editor command that can perform some operation on the current editor instance
-		this.addCommand({
-			id: 'sample-editor-command',
-			name: 'Sample editor command',
-			editorCallback: (editor: Editor, view: MarkdownView) => {
-				console.log(editor.getSelection());
-				editor.replaceSelection('Sample Editor Command');
-			}
-		});
-		// This adds a complex command that can check whether the current state of the app allows execution of the command
-		this.addCommand({
-			id: 'open-sample-modal-complex',
-			name: 'Open sample modal (complex)',
-			checkCallback: (checking: boolean) => {
-				// Conditions to check
-				const markdownView = this.app.workspace.getActiveViewOfType(MarkdownView);
-				if (markdownView) {
-					// If checking is true, we're simply "checking" if the command can be run.
-					// If checking is false, then we want to actually perform the operation.
-					if (!checking) {
-						new SampleModal(this.app).open();
-					}
-
-					// This command will only show up in Command Palette when the check function returns true
-					return true;
-				}
-			}
-		});
-
-		// This adds a settings tab so the user can configure various aspects of the plugin
-		this.addSettingTab(new SampleSettingTab(this.app, this));
-
-		// If the plugin hooks up any global DOM events (on parts of the app that doesn't belong to this plugin)
-		// Using this function will automatically remove the event listener when this plugin is disabled.
-		this.registerDomEvent(document, 'click', (evt: MouseEvent) => {
-			console.log('click', evt);
-		});
-
-		// When registering intervals, this function will automatically clear the interval when the plugin is disabled.
-		this.registerInterval(window.setInterval(() => console.log('setInterval'), 5 * 60 * 1000));
-	}
-
-	onunload() {
-
-	}
-
-	async loadSettings() {
-		this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
-	}
-
-	async saveSettings() {
-		await this.saveData(this.settings);
-	}
-}
-
-class SampleModal extends Modal {
-	constructor(app: App) {
-		super(app);
-	}
-
-	onOpen() {
-		const {contentEl} = this;
-		contentEl.setText('Woah!');
-	}
-
-	onClose() {
-		const {contentEl} = this;
-		contentEl.empty();
-	}
-}
-
-class SampleSettingTab extends PluginSettingTab {
-	plugin: MyPlugin;
-
-	constructor(app: App, plugin: MyPlugin) {
-		super(app, plugin);
-		this.plugin = plugin;
-	}
-
-	display(): void {
-		const {containerEl} = this;
-
-		containerEl.empty();
-
-		new Setting(containerEl)
-			.setName('Setting #1')
-			.setDesc('It\'s a secret')
-			.addText(text => text
-				.setPlaceholder('Enter your secret')
-				.setValue(this.plugin.settings.mySetting)
-				.onChange(async (value) => {
-					this.plugin.settings.mySetting = value;
-					await this.plugin.saveSettings();
-				}));
-	}
-}

manifest.json

@@ -1,11 +1,11 @@
 {
-	"id": "sample-plugin",
+	"id": "chess-mate",
-	"name": "Sample Plugin",
+	"name": "Chess Mate",
 	"version": "1.0.0",
 	"minAppVersion": "0.15.0",
-	"description": "Demonstrates some of the capabilities of the Obsidian API.",
+	"description": "Allows you to easily display chessboards and play games in PGN format directly in your notes",
-	"author": "Obsidian",
+	"author": "Riffaells",
-	"authorUrl": "https://obsidian.md",
+	"authorUrl": "https://gihub.com/Riffaells",
-	"fundingUrl": "https://obsidian.md/pricing",
+	"fundingUrl": "https://gihub.com/Riffaells",
 	"isDesktopOnly": false
 }

package.json

@@ -1,15 +1,19 @@
 {
-	"name": "obsidian-sample-plugin",
+	"name": "obsidian-chess-mate",
 	"version": "1.0.0",
-	"description": "This is a sample plugin for Obsidian (https://obsidian.md)",
+	"description": "Allows you to easily display chessboards and play games in PGN format directly in your notes",
 	"main": "main.js",
 	"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"
+		"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": [
-	"author": "",
+		"chess"
+	],
+	"author": "Riffaells",
 	"license": "MIT",
 	"devDependencies": {
 		"@types/node": "^16.11.6",
@@ -20,5 +24,9 @@
 		"obsidian": "latest",
 		"tslib": "2.4.0",
 		"typescript": "4.7.4"
+	},
+	"dependencies": {
+		"lichess-pgn-viewer": "^2.1.3",
+		"sass": "^1.81.0"
 	}
 }

src/lang/helper.ts

@@ -0,0 +1,37 @@
+// https://github.com/mgmeyers/obsidian-kanban/blob/93014c2512507fde9eafd241e8d4368a8dfdf853/src/lang/helpers.ts
+
+import { moment } from "obsidian";
+
+
+import en from "src/lang/locale/en";
+import ru from "src/lang/locale/ru";
+
+
+export const localeMap: { [k: string]: Partial<typeof en> } = {
+
+    en,
+    ru
+};
+
+const locale = localeMap[moment.locale()];
+
+// https://stackoverflow.com/a/41015840/
+function interpolate(str: string, params: Record<string, unknown>): string {
+    const names: string[] = Object.keys(params);
+    const vals: unknown[] = Object.values(params);
+    return new Function(...names, `return \`${str}\`;`)(...vals);
+}
+
+export function t(str: keyof typeof en, params?: Record<string, unknown>): string {
+    if (!locale) {
+        console.error(`SRS error: Locale ${moment.locale()} not found.`);
+    }
+
+    const result = (locale && locale[str]) || en[str];
+
+    if (params) {
+        return interpolate(result, params);
+    }
+
+    return result;
+}

src/lang/locale/en.ts

@@ -0,0 +1,16 @@
+// English
+
+export default {
+    'settings.title': 'ChessMate Settings',
+    'settings.boardTheme': 'Board Theme',
+    'settings.boardThemeDesc': 'Choose the color theme for the chess board',
+    'settings.themeBrown': 'Brown',
+    'settings.themeBlue': 'Blue',
+    'settings.themeGreen': 'Green',
+    'settings.pieceTheme': 'Piece Theme',
+    'settings.pieceThemeDesc': 'Choose the style of chess pieces',
+    'settings.showMoves': 'Show Moves',
+    'settings.showMovesDesc': 'Show possible moves when selecting a piece',
+    'settings.boardSize': 'Board Size',
+    'settings.boardSizeDesc': 'Adjust the size of the chess board (in pixels)'
+} as const;

src/lang/locale/ru.ts

@@ -0,0 +1,4 @@
+// Russian
+
+export default {
+};

src/main.ts

@@ -0,0 +1,38 @@
+import { Plugin } from 'obsidian';
+import PgnViewer from 'lichess-pgn-viewer';
+import { ChessMateSettings, DEFAULT_SETTINGS, ChessMateSettingTab } from './settings';
+
+export default class ChessMatePlugin extends Plugin {
+	settings: ChessMateSettings;
+
+	async onload() {
+		await this.loadSettings();
+
+		this.addSettingTab(new ChessMateSettingTab(this.app, this));
+
+		this.registerMarkdownCodeBlockProcessor("chessmate", (source, el, ctx) => {
+			const container = el.createDiv({
+				cls: "chessmate-container",
+			});
+
+			const boardElement = container.createDiv({
+				cls: "pgn-viewer"
+			});
+
+			PgnViewer(boardElement, {
+				pgn: source.trim(),
+				resizable: true
+			});
+
+			boardElement.style.width = `${this.settings.boardSize}px`;
+		});
+	}
+
+	async loadSettings() {
+		this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
+	}
+
+	async saveSettings() {
+		await this.saveData(this.settings);
+	}
+}

src/settings.ts

@@ -0,0 +1,85 @@
+import { App, PluginSettingTab, Setting } from "obsidian";
+import ChessMatePlugin from "./main";
+import { t } from "./lang/helper";
+
+export interface ChessMateSettings {
+    boardTheme: string;
+    pieceTheme: string;
+    showMoves: boolean;
+    boardSize: number;
+}
+
+export const DEFAULT_SETTINGS: ChessMateSettings = {
+    boardTheme: 'brown',
+    pieceTheme: 'cburnett',
+    showMoves: true,
+    boardSize: 600
+};
+
+export class ChessMateSettingTab extends PluginSettingTab {
+    plugin: ChessMatePlugin;
+
+    constructor(app: App, plugin: ChessMatePlugin) {
+        super(app, plugin);
+        this.plugin = plugin;
+    }
+
+    display(): void {
+        const { containerEl } = this;
+        containerEl.empty();
+
+        containerEl.createEl('h2', { text: t('settings.title') });
+
+        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')
+                })
+                .setValue(this.plugin.settings.boardTheme)
+                .onChange(async (value) => {
+                    this.plugin.settings.boardTheme = value;
+                    await this.plugin.saveSettings();
+                }));
+
+        new Setting(containerEl)
+            .setName(t('settings.pieceTheme'))
+            .setDesc(t('settings.pieceThemeDesc'))
+            .addDropdown(dropdown => dropdown
+                .addOptions({
+                    cburnett: 'Cburnett',
+                    alpha: 'Alpha',
+                    classic: 'Classic'
+                })
+                .setValue(this.plugin.settings.pieceTheme)
+                .onChange(async (value) => {
+                    this.plugin.settings.pieceTheme = value;
+                    await this.plugin.saveSettings();
+                }));
+
+        new Setting(containerEl)
+            .setName(t('settings.showMoves'))
+            .setDesc(t('settings.showMovesDesc'))
+            .addToggle(toggle => toggle
+                .setValue(this.plugin.settings.showMoves)
+                .onChange(async (value) => {
+                    this.plugin.settings.showMoves = value;
+                    await this.plugin.saveSettings();
+                }));
+
+        new Setting(containerEl)
+            .setName(t('settings.boardSize'))
+            .setDesc(t('settings.boardSizeDesc'))
+            .addSlider(slider => slider
+                .setLimits(200, 800, 50)
+                .setValue(this.plugin.settings.boardSize)
+                .setDynamicTooltip()
+                .onChange(async (value) => {
+                    this.plugin.settings.boardSize = value;
+                    await this.plugin.saveSettings();
+                }));
+    }
+} 

src/styles.scss

@@ -0,0 +1,4 @@
+@use '../node_modules/lichess-pgn-viewer/scss/lichess-pgn-viewer' as *;
+
+/* Здесь вы можете добавить свои собственные стили или переопределения, если это необходимо */
+

src/types/lichess-pgn-viewer.d.ts

@@ -0,0 +1,10 @@
+declare module 'lichess-pgn-viewer' {
+    interface PgnViewOptions {
+        pgn: string;
+        pieceStyle?: string;
+        boardStyle?: string;
+        resizable?: boolean;
+    }
+
+    export default function(element: HTMLElement, options: PgnViewOptions): void;
+} 

src/types/pgn-viewer.d.ts

@@ -0,0 +1 @@
+