chess-console/src/components/GameControl/NewGameDialog.js

ES6 Module for playing chess

/**
 * Author and copyright: Stefan Haack (https://shaack.com)
 * Repository: https://github.com/shaack/chess-console
 * License: MIT, see file 'LICENSE'
 */

import {COLOR} from "cm-chess/src/Chess.js"
import {html} from "../../utils/html.js"
import "bootstrap-show-modal/src/ShowModal.js"

export class NewGameDialog {

    constructor(module, props) {
        const i18n = module.i18n
        i18n.load({
            de: {
                color: "Farbe",
                white: "Weiss",
                black: "Schwarz",
                auto: "automatisch"
            },
            en: {
                color: "Color",
                white: "White",
                black: "Black",
                auto: "automatically"
            }
        }).then(() => {
            const newGameColor = module.persistence.loadValue("newGameColor")

            const colorOptions = [
                {value: "auto", label: i18n.t("auto")},
                {value: "w", label: i18n.t("white")},
                {value: "b", label: i18n.t("black")}
            ]

            props.modalClass = "fade"
            props.body = html`
                <form class="form">
                    <div class="form-group row">
                        <div class="col-3">
                            <label for="color" class="col-form-label">${i18n.t("color")}</label>
                        </div>
                        <div class="col-9">
                            <select id="color" class="form-select">
                                ${colorOptions.map(opt => html`
                                    <option value="${opt.value}" ${opt.value === newGameColor ? "selected" : ""}>
                                        ${opt.label}
                                    </option>
                                `)}
                            </select>
                        </div>
                    </div>
                </form>
            `
            props.footer = html`
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">${i18n.t("cancel")}</button>
                <button type="submit" class="btn btn-primary">${i18n.t("ok")}</button>
            `
            props.onCreate = (modal) => {
                modal.element.querySelector("button[type='submit']").addEventListener("click", function (event) {
                    event.preventDefault()
                    const formElement = modal.element.querySelector(".form")
                    let color = formElement.querySelector("#color").value
                    module.persistence.saveValue("newGameColor", color)
                    if (color !== COLOR.white && color !== COLOR.black) {
                        color = (module.props.playerColor === COLOR.white) ? COLOR.black : COLOR.white
                    }
                    modal.hide()
                    module.newGame({playerColor: color})
                })
            }
            bootstrap.showModal(props)
        })
    }

}