cm-fen-editor
Version:
A FEN editor for web – uses Bootstrap 4 and cm-chessboard
128 lines (126 loc) • 7.14 kB
HTML
<html lang="en" data-bs-theme="auto">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<link rel="stylesheet" href="./node_modules/cm-chessboard/assets/chessboard.css"/>
<link rel="stylesheet" href="./node_modules/cm-chessboard/assets/extensions/markers/markers.css"/>
<link rel="stylesheet" href="./node_modules/cm-chessboard/assets/extensions/promotion-dialog/promotion-dialog.css"/>
<link rel="stylesheet" href="./node_modules/cm-chessboard-position-editor/assets/extensions/select-piece-dialog.css"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<link rel="stylesheet" href="./assets/style/screen.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"/>
<script src="./node_modules/bootstrap-auto-dark-mode/src/bootstrap-auto-dark-mode.js"></script>
<title>FEN Editor</title>
</head>
<body>
<main>
<div class="container-fluid max-width-xxl">
<h1>cm-fen-editor, a chess position editor</h1>
<div class="cm-fen-editor">
<div class="form-group row mb-3 g-3">
<label for="fenInputOutput" class="col-auto col-form-label d-none d-md-block">FEN</label>
<div class="col">
<input type="text" class="form-control fen-input-output" id="fenInputOutput">
</div>
<div class="col-auto">
<label for="positionSetUp" class="visually-hidden">Position setups</label>
<select class="form-select fen-select" id="positionSetUp">
<option disabled value=""></option>
<option value="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1">
Starting Position
</option>
<option value="4k3/8/8/8/8/8/8/4K3 w - - 0 1">Kings Only</option>
<option value="4k3/pppppppp/8/8/8/8/PPPPPPPP/4K3 w - - 0 1">Kings and Pawns</option>
<option value="8/8/8/8/8/8/8/8 w - - 0 1">Empty Board</option>
</select>
</div>
</div>
<div class="row">
<div class="col-xl-7 col-md-7 mb-3">
<div class="chessboard"></div>
</div>
<div class="col-xl-5 col-md-5">
<div class="card conditions-inputs mb-3">
<div class="card-header p-3">
<div class="form-group mb-3">
<label for="colorToPlay" class="visually-hidden">Color to play</label>
<select class="form-select color-to-play" id="colorToPlay">
<option value="w">White to play</option>
<option value="b">Black to play</option>
</select>
</div>
<p class="mb-2">Allowed castling</p>
<div class="row">
<div class="col-6 col-md-12 col-lg-6">
<div class="">
<input type="checkbox" name="castling" class="checkbox-castle checkbox-castle-wk" id="castle-wk"
value="K">
<label class="custom-control-label" for="castle-wk">White O-O</label>
</div>
<div class="">
<input type="checkbox" name="castling" class="checkbox-castle checkbox-castle-wq" id="castle-wq"
value="Q">
<label class="custom-control-label" for="castle-wq">White O-O-O</label>
</div>
</div>
<div class="col-6 col-md-12 col-lg-6">
<div class="">
<input type="checkbox" name="castling" class="checkbox-castle checkbox-castle-bk" id="castle-bk"
value="k">
<label class="custom-control-label" for="castle-bk">Black O-O</label>
</div>
<div class="">
<input type="checkbox" name="castling" class="checkbox-castle checkbox-castle-bq" id="castle-bq"
value="q">
<label class="custom-control-label" for="castle-bq">Black O-O-O</label>
</div>
</div>
</div>
</div>
</div>
<p class="text-muted">Click on an empty square to create a piece. Move a piece out of the board to remove it.</p>
</div>
<ul class="list-inline">
<li class="list-inline-item">
<a href="https://github.com/shaack/cm-fen-editor">GitHub repository</a>
</li>
</ul>
</div>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/es-module-shims@1.7.2/dist/es-module-shims.min.js"></script>
<!-- @formatter:off -->
<script type="importmap">
{
"imports": {
"bind.mjs/": "./node_modules/bind.mjs/",
"cm-chessboard/": "./node_modules/cm-chessboard/",
"cm-chessboard-position-editor/": "./node_modules/cm-chessboard-position-editor/",
"cm-web-modules/": "./node_modules/cm-web-modules/",
"chess.mjs/": "./node_modules/chess.mjs/",
"cm-pgn/": "./node_modules/cm-pgn/",
"cm-chess/": "./node_modules/cm-chess/"
}
}
</script>
<!-- @formatter:on -->
<script type="module">
import {FenEditor} from "./src/FenEditor.js"
import {MARKER_TYPE} from "cm-chessboard/src/extensions/markers/Markers.js"
new FenEditor(document.querySelector(".cm-fen-editor"), {
boardTheme: "default",
markers: MARKER_TYPE.square,
onFenChange: function (event) {
console.log("onFenChange", event)
},
onPositionChange: function (event) {
console.log("onPositionChange", event)
}
})
</script>
</body>
</html>