chore: use css classes instead style props and update manifest description

manifest.json

@@ -3,7 +3,7 @@
 	"name": "Chess Study",
 	"version": "1.0.0",
 	"minAppVersion": "0.15.0",
-	"description": "A chess study helper and PGN viewer for Obsidian.",
+	"description": "A chess study helper and PGN viewer/editor.",
 	"author": "Christoph Lindstädt",
 	"authorUrl": "https://github.com/chrislicodes",
 	"isDesktopOnly": false

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "chess-study",
 	"version": "1.0.0",
-	"description": "A chess study helper and PGN viewer for Obsidian.",
+	"description": "A chess study helper and PGN viewer/editor.",
 	"keywords": [
 		"chess",
 		"obsidian"

src/components/react/ChessStudy.tsx

@@ -98,23 +98,25 @@ export const ChessStudy = ({
 
 	const onMoveItemClick = useCallback(
 		(moveIndex: number) => {
-			setCurrentMove(() => {
-				const move = history[moveIndex];
-				const tempChess = new Chess(move.after);
-				chessView?.set({
-					fen: move.after,
-					check: tempChess.isCheck(),
-				});
-				if (moveIndex !== history.length - 1) {
-					setIsViewOnly(true);
-				} else {
-					setIsViewOnly(false);
-				}
+			if (moveIndex !== currentMove) {
+				setCurrentMove(() => {
+					const move = history[moveIndex];
+					const tempChess = new Chess(move.after);
+					chessView?.set({
+						fen: move.after,
+						check: tempChess.isCheck(),
+					});
+					if (moveIndex !== history.length - 1) {
+						setIsViewOnly(true);
+					} else {
+						setIsViewOnly(false);
+					}
 
-				return moveIndex;
-			});
+					return moveIndex;
+				});
+			}
 		},
-		[chessView, history]
+		[chessView, currentMove, history]
 	);
 
 	const onSaveButtonClick = useCallback(async () => {
@@ -141,19 +143,9 @@ export const ChessStudy = ({
 	]);
 
 	return (
-		<div className="border">
-			<div
-				style={{
-					display: 'flex',
-					height: '450px',
-				}}
-			>
-				<div
-					style={{
-						flex: '0 0 450px',
-						height: '100%',
-					}}
-				>
+		<div className="chess-study border">
+			<div className="chessground-pgn-container">
+				<div className="chessground-container">
 					<ChessgroundWrapper
 						api={chessView}
 						setApi={setChessView}
@@ -171,7 +163,7 @@ export const ChessStudy = ({
 						currentMoveShapes={shapes[currentMove]}
 					/>
 				</div>
-				<div style={{ flex: 1, height: '100%' }}>
+				<div className="pgn-container">
 					<PgnViewer
 						history={history}
 						currentMove={currentMove}

src/components/react/ChessgroundWrapper/index.tsx

@@ -114,21 +114,8 @@ export const ChessgroundWrapper = React.memo(
 		}, [api, currentMoveNumber, currentMoveShapes, setShapes]);
 
 		return (
-			<div
-				style={{
-					height: '100%',
-					width: '100%',
-				}}
-				className={`${boardColor}-board`}
-			>
-				<div
-					ref={ref}
-					style={{
-						height: '100%',
-						width: '100%',
-						display: 'table' /* hack: round to full pixel size in chrome */,
-					}}
-				/>
+			<div className={`${boardColor}-board height-width-100 table`}>
+				<div ref={ref} className={`height-width-100`} />
 			</div>
 		);
 	}

src/components/react/PgnViewer/index.tsx

@@ -73,18 +73,9 @@ export const PgnViewer = React.memo(
 		const movePairs = useMemo(() => chunkArray(history, 2), [history]);
 
 		return (
-			<div style={{ width: '100%', height: '100%' }}>
-				<div style={{ height: '415px' }}>
-					<div
-						style={{
-							display: 'grid',
-							gridTemplateColumns: '0.15fr 0.425fr 0.425fr',
-							gridAutoRows: '30px',
-							width: '100%',
-							maxHeight: '415px',
-							overflowY: 'scroll',
-						}}
-					>
+			<div className="height-width-100">
+				<div className="move-item-section">
+					<div className="move-item-container">
 						{movePairs.map((pair, i) => {
 							const [wMove, bMove] = pair;
 							return (
@@ -107,16 +98,7 @@ export const PgnViewer = React.memo(
 						})}
 					</div>
 				</div>
-				<div
-					style={{
-						display: 'flex',
-						justifyContent: 'center',
-						alignItems: 'center',
-						width: '100%',
-						gap: '4px',
-						height: '35px',
-					}}
-				>
+				<div className="button-section">
 					<button onClick={() => onBackButtonClick()}>
 						<ArrowLeft />
 					</button>

src/main.css

@@ -1,33 +1,118 @@
-button:active {
+/* General */
+
+.chess-study button:active {
 	transform: translateY(1px);
 }
 
-.border {
+.chess-study .border {
 	border: 1px var(--color-base-10) solid;
 	border-radius: 5px;
 }
 
-.border-top {
+.chess-study .border-top {
 	border: 1px var(--color-base-10) solid;
 }
 
-.vertical-align {
+.chess-study .vertical-align {
 	display: flex;
 	align-items: center;
 }
 
-.center {
+.chess-study .center {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }
 
-.move-item {
+.chess-study .height-width-100 {
+	width: 100%;
+	height: 100%;
+}
+
+.chess-study .table {
+	display: table;
+}
+
+.chess-study {
+	line-height: 1.5;
+	-webkit-font-smoothing: antialiased;
+}
+
+.chess-study {
+	height: 100%;
+}
+
+.chess-study *,
+.chess-study *::before,
+.chess-study *::after {
+	box-sizing: border-box;
+}
+.chess-study * {
+	margin: 0;
+}
+
+.chess-study input,
+.chess-study button,
+.chess-study textarea,
+.chess-study select {
+	font: inherit;
+}
+
+.chess-study p,
+.chess-study h1,
+.chess-study h2,
+.chess-study h3,
+.chess-study h4,
+.chess-study h5,
+.chess-study h6 {
+	overflow-wrap: break-word;
+}
+
+/* Container */
+.chess-study .chessground-pgn-container {
+	display: flex;
+	height: 450px;
+}
+
+.chess-study .chessground-pgn-container .chessground-container {
+	flex: 0 0 450px;
+	height: 100%;
+}
+
+.chess-study .chessground-pgn-container .pgn-container {
+	flex: 1;
+	height: 100%;
+}
+
+/* PGN Viewer */
+.chess-study .move-item-section {
+	height: 415px;
+}
+
+.chess-study .button-section {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	gap: 4px;
+	height: 35px;
+}
+
+.chess-study .move-item-container {
+	display: grid;
+	grid-template-columns: 0.15fr 0.425fr 0.425fr;
+	grid-auto-rows: 30px;
+	width: 100%;
+	max-height: 415px;
+	overflow-y: scroll;
+}
+
+.chess-study .move-item {
 	padding-left: 8px;
 	user-select: none;
 }
 
-.move-item:hover {
+.chess-study .move-item:hover {
 	background-color: hsl(
 		var(--accent-h),
 		var(--accent-s),
@@ -37,7 +122,7 @@ button:active {
 	cursor: pointer;
 }
 
-.move-item.active {
+.chess-study .move-item.active {
 	background-color: hsl(
 		var(--accent-h),
 		var(--accent-s),
@@ -47,7 +132,7 @@ button:active {
 	font-weight: bold;
 }
 
-.move-indicator {
+.chess-study .move-indicator {
 	color: var(--color-base-60);
 	text-align: center;
 	background-color: var(--color-base-10);
@@ -55,7 +140,9 @@ button:active {
 	cursor: default;
 }
 
-.editor-input {
+/* Comment Section */
+
+.chess-study .editor-input {
 	min-height: 150px;
 	resize: none;
 	font-size: 15px;
@@ -67,62 +154,14 @@ button:active {
 	caret-color: #444;
 }
 
-.CommentSection {
+.chess-study .CommentSection {
 	height: 250px;
 	padding-top: 5px;
 	overflow: scroll;
 }
 
-.ProseMirror,
-.CommentSection > div {
+.chess-study.ProseMirror,
+.chess-study.CommentSection > div {
 	width: 100%;
 	height: 100%;
 }
-
-/*
-  Josh's Custom CSS Reset
-  https://www.joshwcomeau.com/css/custom-css-reset/
-*/
-*,
-*::before,
-*::after {
-	box-sizing: border-box;
-}
-* {
-	margin: 0;
-}
-html,
-body {
-	height: 100%;
-}
-body {
-	line-height: 1.5;
-	-webkit-font-smoothing: antialiased;
-}
-img,
-picture,
-video,
-canvas,
-svg {
-	display: block;
-	max-width: 100%;
-}
-input,
-button,
-textarea,
-select {
-	font: inherit;
-}
-p,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-	overflow-wrap: break-word;
-}
-#root,
-#__next {
-	isolation: isolate;
-}

src/main.tsx

@@ -37,7 +37,7 @@ export default class ChessStudyPlugin extends Plugin {
 			this.storagePath
 		);
 
-		this.dataAdapter.createStorageFolder();
+		this.dataAdapter.createStorageFolderIfNotExists();
 
 		// Add settings tab
 		this.addSettingTab(new SettingsTab(this.app, this));

src/utils/index.ts

@@ -114,7 +114,7 @@ export class ChessStudyDataAdapter {
 		return JSON.parse(data);
 	}
 
-	async createStorageFolder() {
+	async createStorageFolderIfNotExists() {
 		const folderExists = await this.adapter.exists(this.storagePath);
 
 		if (!folderExists) {