Когда я загружаю два идентичных (подтвержденных IntelliJ) JS скрипта в мое веб-приложение, один из них дает результаты, отличающиеся от другого - PullRequest
Новая
       51

Когда я загружаю два идентичных (подтвержденных IntelliJ) JS скрипта в мое веб-приложение, один из них дает результаты, отличающиеся от другого

0 голосов
/ 12 апреля 2020

TL; DR: IntelliJ подтверждает, что разные скрипты идентичны, но они дают разные результаты при запуске в браузере (используя IntelliJ с Tomcat). Точная информация ниже.

Я создаю веб-проект с использованием Spring MVC, который позволяет мне играть в шахматы. Я использую библиотеку chess. js и библиотеку . js library.

Согласно шахматам. js library README, у него есть метод pgn(), который возвращает ходы игры как string. При желании вы можете передать JSON, чтобы задать max_length и символ новой строки, чтобы после перемещения черных появился символ новой строки. Например game.pgn({ max_width: 5, newline_char: '<br />' }).

Вот моя проблема. Я создал скрипт под названием initgame.js, который создает экземпляр игры в шахматы с использованием библиотек, и попытался использовать приведенный выше пример, чтобы распечатанные ходы были отформатированы для печати новой строки после каждого хода.

Это не сработало, как я надеялся. Поэтому я создал другой сценарий test_game.js для экспериментов, и когда я получил желаемое поведение, я скопировал и вставил содержимое test_game.js в initgame.js. Снова изменил точку тега <script> на initgame.js, и он снова игнорировал разрывы строк. Использовал IntelliJ для сравнения файлов, и IntelliJ подтверждает, что файлы действительно идентичны.

Теперь я просто ошеломлен. Я попытался восстановить проект, очистить артефакты, очистить Maven. Ничего. Я даже вышел из IntelliJ и перезапустил. Когда я запускаю программу с test_game.js, она работает как нужно. Когда я запускаю его с initgame.js, он игнорирует разрывы строк.

Как потенциальная подсказка, этого не происходит, когда я использую Visual Studio и загружаю его в браузер как .html вместо .jsp Любое понимание приветствуется! Код и снимки экрана вывода приведены ниже, а также снимок экрана IntelliJ, сравнивающий файлы.

initgame.js

// NOTE: this example uses the chess.js library:
// https://github.com/jhlywa/chess.js

var board = null;
const game = new Chess()
var $status = $('#status');
var $fen = $('#fen');
var $pgn = $('#pgn');

function onDragStart (source, piece, position, orientation) {
    // do not pick up pieces if the game is over
    if (game.game_over()) return false;

    // only pick up pieces for the side to move
    if ((game.turn() === 'w' && piece.search(/^b/) !== -1) ||
        (game.turn() === 'b' && piece.search(/^w/) !== -1)) {
        return false
    }
}

function onDrop (source, target) {
    // see if the move is legal
    var move = game.move({
        from: source,
        to: target,
        promotion: 'q' // NOTE: always promote to a queen for example simplicity
    });

    // illegal move
    if (move === null) return 'snapback';

    updateStatus()
}

// update the board position after the piece snap
// for castling, en passant, pawn promotion
function onSnapEnd () {
    board.position(game.fen())
}

function updateStatus () {
    var status = '';

    var moveColor = 'White';
    if (game.turn() === 'b') {
        moveColor = 'Black'
    }

    // checkmate?
    if (game.in_checkmate()) {
        status = 'Game over, ' + moveColor + ' is in checkmate.'
    }

    // draw?
    else if (game.in_draw()) {
        status = 'Game over, drawn position'
    }

    // game still on
    else {
        status = moveColor + ' to move';

        // check?
        if (game.in_check()) {
            status += ', ' + moveColor + ' is in check'
        }
    }

    $status.html(status);
    $fen.html(game.fen());
    $pgn.html(game.pgn({ max_width: 5, newline_char: '<br />' }))
}

var config = {
    draggable: true,
    position: 'start',
    onDragStart: onDragStart,
    onDrop: onDrop,
    onSnapEnd: onSnapEnd
};
board = Chessboard('myBoard', config);

updateStatus();

test_game.js

// NOTE: this example uses the chess.js library:
// https://github.com/jhlywa/chess.js

var board = null;
const game = new Chess()
var $status = $('#status');
var $fen = $('#fen');
var $pgn = $('#pgn');

function onDragStart (source, piece, position, orientation) {
    // do not pick up pieces if the game is over
    if (game.game_over()) return false;

    // only pick up pieces for the side to move
    if ((game.turn() === 'w' && piece.search(/^b/) !== -1) ||
        (game.turn() === 'b' && piece.search(/^w/) !== -1)) {
        return false
    }
}

function onDrop (source, target) {
    // see if the move is legal
    var move = game.move({
        from: source,
        to: target,
        promotion: 'q' // NOTE: always promote to a queen for example simplicity
    });

    // illegal move
    if (move === null) return 'snapback';

    updateStatus()
}

// update the board position after the piece snap
// for castling, en passant, pawn promotion
function onSnapEnd () {
    board.position(game.fen())
}

function updateStatus () {
    var status = '';

    var moveColor = 'White';
    if (game.turn() === 'b') {
        moveColor = 'Black'
    }

    // checkmate?
    if (game.in_checkmate()) {
        status = 'Game over, ' + moveColor + ' is in checkmate.'
    }

    // draw?
    else if (game.in_draw()) {
        status = 'Game over, drawn position'
    }

    // game still on
    else {
        status = moveColor + ' to move';

        // check?
        if (game.in_check()) {
            status += ', ' + moveColor + ' is in check'
        }
    }

    $status.html(status);
    $fen.html(game.fen());
    $pgn.html(game.pgn({ max_width: 5, newline_char: '<br />' }))
}

var config = {
    draggable: true,
    position: 'start',
    onDragStart: onDragStart,
    onDrop: onDrop,
    onSnapEnd: onSnapEnd
};
board = Chessboard('myBoard', config);

updateStatus();

.jsp страница 

    <!doctype html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/static/javascript/chessboardjs/css/chessboard-1.0.0.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.min.css">

    <title>Hello, world!</title>
</head>


<body>

<main>
    <div class="container">

        <div class="d-flex justify-content-between align-items-center">
            <h1>Hello World</h1>
            <a href="#" class="btn btn-outline-success btn-sm flex-row-reverse">Login</a>
        </div>

        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">
                <i class="fas fa-chess-queen"></i>
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Dropdown
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                    </li>
                </ul>
                <form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                    <!-- Replace with Spring security Login form -->
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                </form>
            </div>
        </nav>

        <div class="container">
            <div class="row justify-content-center mx-1 my-3">
                <div id="myBoard" class="col-6"></div>

                <div class="card bg-light col-3">
                    <div class="card-header">Header</div>
                    <div class="card-body">
                        <h5 class="card-title">PGN</h5>
                        <p class="card-text">Here are the moves of the game as printed by test_game.js</p>
                        <div class="card-text" id="pgn"></div>
                    </div>
                    <button type="button" class="btn btn-primary m-3">Reset Game</button>
                </div>

            </div>

            <div class="row justify-content-center">
                <label>Status:</label>
                <div id="status"></div>

                <label>FEN:</label>
                <div id="fen"></div>
                <!--
                          <label>PGN:</label>
                          <div id="pgn"></div> -->
            </div>
        </div>

    </div>
</main>

<%-- jquery    --%>
<script
        src="https://code.jquery.com/jquery-3.4.1.js"
        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"></script>
<script src="${pageContext.request.contextPath}/static/javascript/chessboardjs/js/chessboard-1.0.0.min.js"></script>
<script src="${pageContext.request.contextPath}/static/javascript/node_modules/chess.js/chess.js"></script>
<script src="${pageContext.request.contextPath}/static/javascript/test_game.js"></script>
</body>
</html>

С initgame.js Results of initgame.js С test_game.js Results of test_game.js Результаты функции сравнения IntelliJ IntelliJ confirms the files are identical

1 Ответ

0 голосов
/ 13 апреля 2020

попробуйте это: замените 

$pgn.html(game.pgn({ max_width: 5, newline_char: '<br />' c}))

на 

var pgnn = game.pgn({ max_width: 5, newline_char: '<br />' })
pgnn = pgnn + " </br>"
$pgn.html(pgnn)

Я не уверен, что это сработает, но я думаю

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...