master

分支 (1)

管理

管理

master

TreeNewBee
/
test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>吹牛逼测试网站</title>
    <style>
        #myCards {
            padding: 40px;
            position: absolute;
            bottom: 0;
        }
        #statementSelector {
            width: 300px;
            padding: 10px;
            margin-top: 30px;
            border: 1px #ccc solid;
            border-radius: 10px;
        }
        #statementSelector ul {
            display: flex;
            list-style: none;
            padding: 0;
        }
        #statementSelector ul li {
            cursor: pointer;
            margin: 5px;
        }
        #statementSelector ul li:hover, .statementSelected {
            font-weight: bold;
            text-decoration: underline;
            background: #f5f5f5;
        }
        #notification {
            width: 50%;
            top: 130px;
            margin-left: 25%;
            display: none;
            position: fixed;
            justify-content: center;
        }
        #notification div {
            width: 200px;
            text-align: center;
            border: 1px #ccc solid;
            border-radius: 10px;
            padding: 10px;
            color: crimson;
            font-weight: bold;
        }
        #btnWrapper {
            /*display: none;*/
            width: 105px !important;
            border: none !important;
        }
        button {
            width: 50px;
            height: 30px;
            border-radius: 4px;
            border: none;
        }
        .card {
            width: 50px;
            height: 80px;
            border: 1px #555 solid;
            padding: 5px;
            border-radius: 4px;
            float: left;
            background: #fff;
            margin-left: -20px;
        }
        .selected {
            margin-top: -10px;
        }
    </style>
</head>
<body>
    <h3>树新蜂纸牌游戏 WebSocket 调试阶段</h3>
    <div id="myCards">
        <!--牌将会作为子节点出现这这里-->
    </div>

    <div id="userInfo">
        <!--玩家信息将会出现在这里-->
    </div>
    <button id="getReadyBtn">准备</button>

    <div id="statementSelector" style="display: none">
        <!--从这里选择声称出了什么牌-->
        请选择你要声称你出的是什么：
        <ul>
            <li>A</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>J</li>
            <li>Q</li>
            <li>K</li>
        </ul>
        <button style="display: none" id="submit">出牌</button>
    </div>

    <div id="notification">
        <!--这里显示提示-->
        <div>
        </div>
        <div id="btnWrapper">
            <button id="challengeBtn">质疑</button>
            <button id="passBtn">Pass</button>
        </div>
    </div>
</body>
<script src="main.js"></script>
<script>
    function notify(content, status=true) {
        const notification = document.querySelector('#notification');

        notification.children[0].innerHTML = content;
        notification.style.display = "flex";

        const btnWrapper = document.querySelector('#btnWrapper');

        if (status) {
            btnWrapper.style.display = "block";
        } else {
            btnWrapper.style.display = "none";
        }

    }

    function unselectAll() {
        for (let j = 0; j < statements.length; j+=1) {
            statements[j].setAttribute("class", "");
        }
    }

    function clearPlay() {
        statement = "";
        document.querySelector('#statementSelector').style.display = "none";
        unselectAll();
        submitBtn.style.display = "none";
    }

    let username;
    let player;
    let otherPlayers = [];

    let gameMode;

    let statement = "";
    const statements = document.querySelectorAll('#statementSelector li');
    for (let i = 0; i < statements.length; i+=1) {
        statements[i].onclick = e => {
            statement = `${i+1}`;
            if (statement !== "") {
                submitBtn.style.display = "block";
            } else {
                submitBtn.style.display = "none";
            }

            unselectAll();

            e.target.setAttribute("class", "statementSelected");
        }
    }

    const submitBtn = document.querySelector('#submit');
    const challengeBtn = document.querySelector('#challengeBtn');
    const passBtn = document.querySelector('#passBtn');

    submitBtn.onclick = () => {
        if (player.cardsTemp.length > 0 &&
            statement !== "") {

            gameMode = "play";

            sendCanIPlay({
                id: player.id,
            });


        } else {
            alert("出牌错误！");
        }
    };
    challengeBtn.onclick = () => {
        gameMode = "challenge";
        sendCanIPlay({
            id: player.id,
        });
    };
    passBtn.onclick = () => {
        gameMode = "pass";
        sendCanIPlay({
            id: player.id,
        });
    };

    const getReadyBtn = document.querySelector('#getReadyBtn');
    getReadyBtn.onclick = () => {
        sendReady({ id: player.id });
    };


    const ws = new WebSocket('ws://127.0.0.1:5002/cnb');
    ws.onmessage = response => {
        if (response && response.data) {
            const data = JSON.parse(response.data);

            switch (data.type) {
                case "accessible":
                    handleAccessible(data);
                    break;
                case "room_info":
                    handleRoomInfo(data);
                    break;
                case "game_begins":
                    handleGameBegins(data);
                    break;
                case "play_status":
                    handlePlayStatus(data);
                    break;
                case "play_result":
                    handlePlayResult(data);
            }

        } else {
            alert("连接服务器失败！");
        }
    };

    function updateOtherPlayers(data) {
        otherPlayers = data;
    }

    function sendEnterRoom(data) {
        ws.send(JSON.stringify({
            type: "enter_room",
            data,
        }));
    }

    function sendReady(data) {
        ws.send(JSON.stringify({
            type: "ready",
            data,
        }));
    }

    function sendCanIPlay(data) {
        ws.send(JSON.stringify({
            type: "can_i_play",
            data,
        }));
    }

    function sendPlayInfo(data) {
        ws.send(JSON.stringify({
            type: "play",
            data,
        }));
    }

    function handlePlayResult(data) {
        const { message } = data.data;

        notify(message);
    }

    function handlePlayStatus(data) {
        let { status } = data.data;
        status = JSON.parse(status);

        if (status) {
            switch (gameMode) {
                case "play":
                    handlePlay();
                    break;
                case "challenge":
                    handleChallenge();
                    break;
                case "pass":
                    handlePass();
                    break;
            }
        }  else {
            alert("还没轮到你！");
        }
    }

    function handlePass() {
        ws.send(JSON.stringify({
            type: "pass",
            data:{id: player.id}
        }));
    }

    function handleChallenge() {
        ws.send(JSON.stringify({
            type: "challenge",
            data:{id: player.id}
        }));
    }

    function handlePlay() {
        const cards = player.play();

        sendPlayInfo({
            id: player.id,
            cards,
            statement,
        });

        clearPlay();
    }

    function handleGameBegins(data) {
        const { cards, others } = data.data;

        player.getCards(cards);
        player.showCards();

        updateOtherPlayers(others);

        getReadyBtn.style.display = "none";
        notify("游戏开始！", false)
    }

    function handleRoomInfo(data) {
        const { id, others } = data.data;

        player = new Player(id, username);
        player.showInfo();

        updateOtherPlayers(others);
    }

    function handleAccessible(data) {
        const { accessible } = data.data;
        if (accessible) {
            username = prompt("请输入你的名字:");
            sendEnterRoom({
               name: username,
            });
        } else {
            alert("你不能进入此房间！");
        }
    }
</script>
</html>