We_Relese/OnlineApp/Relese/Views/Play/_Run/Ready.cshtml

@using IwbZero.ToolCommon.StringModel
@using WeOnlineApp.Configuration
@using WeOnlineApp.Models.Play
@using WeOnlineApp.TrainingCamp.Dto
@using WeOnlineApp.TrainingCampPlay.Dto
@model WeOnlineApp.Models.Play.CampPlayModel
@{
    Layout = "~/Views/Shared/Layout/_Layout.None.cshtml";
    ViewBag.PageId = "start";
    ViewBag.Title = "等待演练";
    CampPlayModel campPlay = Model;
    CampPlayDto play = campPlay.Play;
    CampDto camp = campPlay.Camp;
    CampPlayUserDto playUser = campPlay.PlayUser;
    var imagePath = string.IsNullOrEmpty(AbpSession.AvatarImagePath) ? "/Content/Image/user.png" : AbpSession.AvatarImagePath;
}

<style>
    body {
        --mc: #3168f5;
        width: 100vw;
        height: 100vh;
        color: var(--mc);
        background-image: linear-gradient(45deg,#f2f6fe,#f2f6fe);
    }

    .menu {
        --h: 35px;
        position: absolute;
        top: 30px;
        right: 10px;
        width: 80%;
        padding-right: 20px;
        line-height: var(--h);
        display: inline-block;
        list-style: none;
        display: flex;
        justify-content: flex-end;
    }

        .menu a {
            color: var(--mc);
            padding: 3px 5px;
            margin: 0 10px;
            line-height: var(--h);
        }

            .menu a:hover {
                border-bottom: 1px solid var(--mc);
            }

    .header {
        margin: 60px 20px 0;
        min-height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .friend-box {
        margin: 50px 100px 10px;
        min-height: 100px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        border: 2px solid var(--mc);
        font-size: 1rem;
        border-radius: .75rem;
    }

    .self-box {
        margin: 20px 0;
        width: 100%;
        min-height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

        .self-box > div {
            margin-top: 15px;
        }

    .code {
        color: var(--mc);
        font-weight: 600;
        font-size: 24px;
    }

    .img-box {
        width: auto;
    }

    img {
        width: 100px;
        height: 100px;
        border: 1px solid #ddd;
        border-radius: .5rem;
    }

    .name {
    }

    .role {
        font-size: 90%;
        font-weight: bold;
        color: #f08080;
        margin-top: 0 !important;
        text-align: center;
    }

    .self-box .img-box img {
        width: 200px;
        height: 200px;
        border: 2px solid #ddd;
        border-radius: 50%;
    }

    .self-box .name {
        font-weight: 600;
        font-size: 22px;
    }

    .friend {
        margin: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

        .friend > div {
            margin-top: 8px;
        }

        .friend .img-box {
            position: relative;
        }

    .role-box .select2-selection {
        height: 38px;
    }

    .select2-results__option {
        color: var(--mc) !important;
    }

        .select2-results__option.select2-results__option--highlighted {
            color: #fff !important;
            background: var(--mc) !important;
        }

        .select2-results__option[aria-selected=true] {
            color: #eee !important;
            background: var(--mc) !important;
        }

    .select2-selection__arrow b {
        margin-top: 4px !important;
    }

    .btn-box {
        width: 100px;
        margin: 15px auto 0;
    }

        .btn-box button {
            width: 100%;
        }

    .msg-box {
        text-align: center;
        font-size: 24px;
    }

    .start-btn {
        display: none;
    }

    .load-per {
        padding: 0 10px;
        font-size: 120%;
        font-weight: 600;
    }

    .loading:after {
        overflow: hidden;
        display: inline-block;
        vertical-align: bottom;
        animation: ellipsis 2s infinite;
        content: "\2026";
    }

    @@keyframes ellipsis {
        from {
            width: 2px;
            margin-right: 16px;
        }

        to {
            width: 18px;
            margin-right: 0;
        }
    }
</style>

<div class="header">
    <h2>@(play.Name) (@(camp?.Name))  </h2>
</div>
<ul class="menu">
    <li>
        <a href="@Url.Action("Index","Play")"><i class="fa fa-home"></i>&nbsp;&nbsp;返回主页</a>
    </li>
    <li>
        <a href="javascript:void(0)" onclick="Exit()"><i class="fas fa-backspace"></i>&nbsp;&nbsp;退出演练</a>
    </li>
    <li>
        <a href="javascript:void(0)" onclick="LoginOut()"><i class="fas fa-sign-out-alt"></i>&nbsp;&nbsp;注销账号</a>
    </li>
</ul>
<div class="self-box">
    <div class="img-box">
        <img src="@(imagePath)" alt="@(AbpSession.RealName)" />
    </div>
    <div class="name">@(AbpSession.RealName)</div>

    @if (playUser == null)
    {
        <div class="btn-box"><button type="button" class="btn btn-success" onclick="Join()">加入演练</button></div>
    }
    else if (playUser.PlayerType == CampPlayerTypeDefinition.Creator)
    {
        <div class="btn-box start-btn"> <button type="button" class="btn btn-success" onclick="Start()">开始演练</button></div>
        <div class="msg-box"> <span class="loading">正在加载演练数据 <span class="load-per">0%</span></span></div>
        <div class="code">
            <span>邀请码：@(play.InvitationCode)</span>
        </div>
    }
    else
    {
        string style1 = "display:none", style2 = "display:none";
        if (playUser.PlayerState == CampPlayUserStateDefinition.Ready)
        {
            style1 = "display:block";
        }
        else if (playUser.PlayerState == CampPlayUserStateDefinition.New || playUser.PlayerState == CampPlayUserStateDefinition.CancelReady)
        {
            style2 = "display:block";

        }
        var roleNames = "<option value=\"\">请选择一个角色开始准备</option>"; ;
        if (play.PlayRoleNames.IsNotEmpty())
        {
            var arr = play.PlayRoleNames.Split(',');
            foreach (var role in arr)
            {
                roleNames += "<option value=\"" + role + "\">" + role + "</option>";
            }
        }
        <div id="noReady" style="@(style2)">
            <div class="role-box">
                <select id="role" class="form-control" style="width: 250px" autocomplete="off">
                    @(Html.Raw(roleNames))
                </select>
            </div>
            <div class="btn-box"><button type="button" class="btn btn-success" onclick="Ready()">准备演练</button></div>
        </div>
        <div id="hasReady" style="@(style1)">

            <div class="role">@(playUser.Role)</div>
            <div class="btn-box"><button type="button" class="btn btn-danger" onclick="Cancel()">取消准备</button></div>
        </div>

    }
</div>
@if (play.PlayModel == CampPlayModelDefinition.Team)
{
    <div class="friend-box"></div>
}

@section scripts
{
    <script>
        $(function() {
            abp.signalr.connect('@(play.InvitationCode)');
            PreLoad();
            $('#role').select2();
            @if (play.PlayModel == CampPlayModelDefinition.Team)
            {
                <text>
                    GetPlayUsers();
                </text>
            }
        });
        function PreLoad() {
            var loadCount = 0, loadTimeout,num = 0,ok=false;
            load();
            loading();

            function load() {
                loadCount++;
                console.log("加载数据中... " + loadCount);
                if (loadCount > 5) {
                    $('.msg-box').hide();
                    $('.start-btn').fadeIn();
                    return;
                }
                $.iwbAjax5({
                    url: abp.appUrl + "Query/LoadCampPre?no=@camp.Id&type=1",
                    timeout: 1000 * 60 * 5,
                    success:() => {
                        clearTimeout(loadTimeout);
                        ok = true;

                       
                    },
                    complete: function() {
                        console.log("加载中... " + loadCount);
                        clearTimeout(loadTimeout);
                        loadTimeout = setTimeout(load, 1000 * 60 * 2);
                    }
                });
            }

            function loading() {
                num++;
                if (num > 99&&!ok) {
                    num = 99;
                }
                $('.msg-box .load-per').html(num + "%");
                var delay = 1;
                if (!ok) {
                    if (num < 20+Math.floor(Math.random() * 10)) {
                        delay =50+ Math.floor(Math.random() * 10);
                    } else if (num < 50 + Math.floor(Math.random() * 10)) {
                        delay = 300+Math.floor(Math.random() * 100);
                    } else if (num < 60 + Math.floor(Math.random() * 5)) {
                        delay =400+ Math.floor(Math.random() * 600);
                    } else if (num < 63 + Math.floor(Math.random() * 5)) {
                        delay = 20+ Math.floor(Math.random() * 30);
                    } else if (num < 68 + Math.floor(Math.random() * 10)) {
                        delay = 100+ Math.floor(Math.random() * 50);
                    } else if (num < 80 + Math.floor(Math.random() * 10)) {
                        delay =40+ Math.floor(Math.random() * 50);
                    } else if (num < 95 + Math.floor(Math.random() * 9)) {
                        delay = 500 + Math.floor(Math.random() * 400);
                    }
                }
                if (num < 100) {
                    setTimeout(loading, 10 * delay);
                } else {
                    $('.msg-box').hide();
                    $('.start-btn').fadeIn();
                }
            }
        }

        function Exit() {
            MsgConfirm("退出后无法再加入演练，您确定退出演练吗？",
                "退出演练",
                function () {
                    @if (playUser?.PlayerType == CampPlayerTypeDefinition.Creator)
                    {
                        <text>
                            MsgConfirm("演练还未开始！您是房主，退出后演练后会删除演练，确定退出吗？",
                                "再次确认",
                                function() {
                                    $.iwbAjax({
                                        url: abp.appUrl + '/CampPlay/ExitPlay?no=@(play.Id)',
                                        success: function() {
                                            window.location.href = "@Url.Action("Start", "Play")";
                                        }
                                    });
                                });
                        </text>
                    }
                    else
                    {
                        <text>
                            $.iwbAjax({
                                url: abp.appUrl + '/CampPlay/ExitPlay?no=@(play.Id)',
                                success: function() {
                                    window.location.href = "@Url.Action("Start", "Play")";
                                }
                            });
                        </text>
                    }

                });
        }
        function LoginOut() {
            MsgConfirm("您确定注销账号吗？",
                "注销账号",
                function () {
                    @if (playUser?.PlayerType == CampPlayerTypeDefinition.Creator)
                    {
                        <text>
                            MsgConfirm("您是房主，注销后演练进程无法继续，注销退出吗？",
                                "再次确认",
                                function() {
                                    window.location.href = "/Account/LogOut";
                                });
                        </text>
                    }
                    else
                    {
                        <text>
                            window.location.href = "/Account/LogOut";
                        </text>
                    }
                });
        }
        function GetPlayUsers() {
            $.iwbAjax4({
                url: abp.appUrl + "CampPlay/GetPlayUsers?no=@(play.Id)",
                success: function(res) {
                    FormatterPlayUsers(res);
                }
            });
        }

        function FormatterPlayUsers(data) {
            var str = "";
            if (data && data.length) {
                data.forEach(function(v) {
                    str += '<div class="friend" id="user-{0}">'.format(v.id);
                    str += FormatterPlayUser(v);
                    str += '</div>';
                });
            }
            if (str) {
                $('.friend-box').html(str);
            }
        }

        function FormatterPlayUser(data) {
            var str = "";
            if (data) {
                var ribbon = '<div class="ribbon-wrapper"><div class="ribbon bg-danger">未准备</div></div>';
                if (data.playerType == @(CampPlayerTypeDefinition.Creator)) {
                    ribbon = '<div class="ribbon-wrapper"><div class="ribbon bg-warning">房主</div></div>';
                } else if (data.playerState == @(CampPlayUserStateDefinition.Ready)) {
                    ribbon = '<div class="ribbon-wrapper"><div class="ribbon bg-success">已准备</div></div>';
                }
                var img = data.imagePath ? data.imagePath : "/Content/Image/user.png";
                str += '<div class="img-box"><img src="{0}" alt="{1}" />{2}</div>'.format(img, data.playerName, ribbon);
                str += '<div class="name">{0}</div>'.format(data.playerName);
                str += '<div class="role">{0}</div>'.format(data.role ? data.role : "未准备");

            }
            return str;
        }
    </script>
    <script>
        function Join() {
            MsgConfirm("确认加入演练吗?",
                "加入演练",
                function() {
                    $.iwbAjax1({
                        url: abp.appUrl + "/CampPlay/Join",
                        data: { id: '@(play.Id)' },
                        success: function() {
                            window.location.reload();
                        }
                    });
                });
        }

        function Cancel() {
            MsgConfirm("确认取消准备吗?",
                "取消准备",
                function() {
                    $.iwbAjax1({
                        url: abp.appUrl + "/CampPlay/CancelReady",
                        data: { id: '@(play.Id)' },
                        success: function() {
                            $('#hasReady').hide();
                            $('#noReady').fadeIn(500);
                        }
                    });
                });
        }

        function Ready() {
            var role = $('#role').val();
            if (role) {
                $.iwbAjax4({
                    url: abp.appUrl + "/CampPlay/Ready",
                    data: { id: '@(play.Id)', role: role },
                    success: function() {
                        $('#noReady').hide();
                        $('#hasReady').fadeIn(500);
                    }
                });
            } else {
                abp.message.warn('请选择一个角色！');
            }

        }

        function Start() {
            var msg = "确认开始演练吗?";
            MsgConfirm(msg,
                "开始演练",
                function() {
                    $.iwbAjax4({
                        url: abp.appUrl + "/CampPlay/Start",
                        data: { id: '@(play.Id)' },
                        success: function() {
                            abp.message.success("演练启动完成。");
                        },
                        error: function() {

                        }
                    });
                });
        }
    </script>

    <script id="hub-s">
        iwbHub.client.getReloadPage = function (msg) {
            console.log('getReloadPage: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    if (data.no=='@(play.Id)') {
                        window.location.reload();
                    }
                } catch (e) {
                    console.log('getReloadPage: ', e);
                }
            }
        };
        iwbHub.client.getUserChange = function (msg) {
            console.log('getUserChange: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    if (data) {
                        var str = FormatterPlayUser(data);
                        var $user = $('#user-' + data.id);
                        if ($user.length > 0) {
                            $user.html(str);
                        } else {
                            str = '<div class="friend" id="user-{0}">{1}</div>'.format(data.id, str);
                            $('.friend-box').append(str);
                        }
                    }
                } catch (e) {
                    console.log('getUserChange: ', e);
                }
            }
        };
        iwbHub.client.getUserExit = function (msg) {
            console.log('getUserExit: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    if (data) {
                        var $user = $('#user-' + data.id);
                        if ($user.length > 0) {
                            $user.remove();
                        }
                    }
                } catch (e) {
                    console.log('getUserExit: ', e);
                }
            }
        };
        @if (play.PlayModel == CampPlayModelDefinition.Team&& playUser?.PlayerType != CampPlayerTypeDefinition.Creator)
        {
            <text>
        iwbHub.client.getCreatorExit = function (msg) {
            console.log('getCreatorExit: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    if (data) {
                        abp.message.warn('房主已退出演练，演练已结束！',"演练结束").done(function() {
                            window.location.href = "@Url.Action("Start", "Play")";
                        });
                    }
                } catch (e) {
                    console.log('getCreatorExit: ', e);
                }
            }
        };
            </text>
        }
    </script>
}