Chessboard rendering as black square

cheesebellies commented 1 year ago

here is the code:

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>chess</title>
    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet" type="text/css" />
<!--     <script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.js"></script> -->
</head>

<body>

    <!--main-->

    <div id="cboard"></div>

    <script type="module">
        import {Chessboard} from "{{ url_for('static', filename='./src/cm-chessboard/Chessboard.js') }}";
        import {FEN} from "{{ url_for('static', filename='./src/cm-chessboard/model/Position.js') }}";

        let cb = new Chessboard(document.getElementById("cboard"), {position: FEN.start});
    </script>

    <!--end main-->
    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>

</html>

When I run the website (on flask), this is what it looks like. Any idea what is happening?
Screenshot 2023-01-04 10 46 28 AM

cheesebellies commented 1 year ago

Fixed by ovverriding css, recoloring the black and white squares.

shaack commented 1 year ago

Did you include the cm-chessboard.css?

shaack / cm-chessboard

Chessboard rendering as black square #99