273 lines
12 KiB
Plaintext
273 lines
12 KiB
Plaintext
@using Chruch.Net.Models.IceBreak
|
|
@model Chruch.Net.Models.IceBreak.WhoIsSpyPlayer
|
|
|
|
@{
|
|
Layout = "~/Views/Shared/_LayoutEmpty.cshtml";
|
|
ViewBag.Title = "NLCC 破冰-誰是臥底";
|
|
}
|
|
<section class="g-flex-centered g-bg-pos-center g-bg-img-hero g-pos-rel g-z-index-1 g-overflow-hidden g-height-100vh" style="background-image: url(/Images/IceBreak/img14.jpg);" data-calc-target="#js-header">
|
|
<div class="g-pos-abs g-top-0 g-left-0" data-animation="fadeInDown" data-animation-delay="100" data-animation-duration="1500">
|
|
<img class="img-fluid" src="/Images/IceBreak/img15.png" alt="Image Description">
|
|
</div>
|
|
<div class="g-pos-abs g-bottom-0 g-right-0" data-animation="fadeInUp" data-animation-delay="1800" data-animation-duration="1500">
|
|
<img class="img-fluid" src="/Images/IceBreak/img16.png" alt="Image Description">
|
|
</div>
|
|
<div class="container text-center g-z-index-1">
|
|
<div class="mb-4">
|
|
<h1 class="h2 d-inline-block g-color-black g-font-weight-700 g-font-size-40 g-font-size-75--md text-uppercase g-line-height-1" data-animation="fadeInDown" data-animation-delay="1000" data-animation-duration="1500">誰</h1>
|
|
<h2 class="h2 d-inline-block g-color-black g-font-weight-700 g-font-size-40 g-font-size-75--md text-uppercase g-line-height-1" data-animation="fadeInDown" data-animation-delay="1200" data-animation-duration="1500">是</h2>
|
|
<h2 class="h2 d-inline-block g-color-red g-font-weight-700 g-font-size-40 g-font-size-75--md text-uppercase g-line-height-1" data-animation="fadeInDown" data-animation-delay="1400" data-animation-duration="1500">臥底</h2>
|
|
</div>
|
|
@if (Model == null)
|
|
{
|
|
|
|
using (Html.BeginForm("WhoIsSpyPlayJoin", "IceBreak"))
|
|
{
|
|
<div class="row" data-animation="fadeInDown" data-animation-delay="2000" data-animation-duration="1500">
|
|
<div class="col">
|
|
<label class="g-font-weight-700 g-mb-20 h5">遊戲房編號</label>
|
|
@Html.TextBoxFor(m => m.Id, new { @class = "border-0 form-control g-color-gray-dark-v4 g-placeholder-gray-dark-v3 g-px-20" })
|
|
</div>
|
|
<div class="col">
|
|
|
|
<button class="btn btn-lg u-btn-primary g-font-weight-600 g-font-size-20 text-uppercase g-rounded-50 mx-2 g-px-25 g-py-15" type="submit">加入遊戲間</button>
|
|
</div>
|
|
</div>
|
|
|
|
}
|
|
}
|
|
else if (Model.IsDead)
|
|
{
|
|
|
|
<div class="mx-auto g-max-width-600 g-overflow-hidden">
|
|
<p class="g-color-black g-font-size-18 g-font-size-24--md g-mb-40" data-animation="fadeInDown" data-animation-delay="1600" data-animation-duration="1500">
|
|
抱歉，由於已被視為臥底，因此請先耐心等候此局結束
|
|
</p>
|
|
</div>
|
|
using (Html.BeginForm())
|
|
{
|
|
<div class="row">
|
|
|
|
<div class="col">
|
|
|
|
<button class="btn btn-lg u-btn-primary g-font-weight-600 g-font-size-20 text-uppercase g-rounded-50 mx-2 g-px-25 g-py-15" type="submit">重新整理</button>
|
|
</div>
|
|
</div>
|
|
|
|
}
|
|
}
|
|
else
|
|
{
|
|
|
|
switch (Model.GameStatus)
|
|
{
|
|
case WhoIsSpyProcess.WaitForPlayer:
|
|
|
|
<div class="mx-auto g-max-width-600 g-overflow-hidden g-color-black g-font-size-18 g-font-size-24--md g-mb-40" data-animation="fadeInDown" data-animation-delay="1600" data-animation-duration="1500">
|
|
<span class="g-font-size-30">
|
|
遊戲規則:
|
|
</span>
|
|
|
|
|
|
<br />
|
|
1.角色：共有三個角色「<span class="g-color-red">臥底</span>、<span class="g-color-primary">平民</span>、白板」 <br /> (ps.白板為選用腳色)
|
|
<br />
|
|
2.每個人需依序描述自己手中的答案，請注意只能描述自己手中的答案 <br />
|
|
(ps.所有人都不知道自己的身分，僅能透過他人的發言來判斷)
|
|
<br />
|
|
3.投票階段大家投給認為可能是臥底的人，最高票者將被視為臥底
|
|
<br />
|
|
4.當遊戲中所有臥底被抓出，則由<span class="g-color-primary">平民</span>獲勝， <br />
|
|
若臥底剩餘人數大於等於平民，則由<span class="g-color-red">臥底</span>勝出
|
|
</div>
|
|
<div data-animation="fadeInDown" data-animation-delay="2000" data-animation-duration="1500">
|
|
|
|
<h1>等待遊戲開始</h1>
|
|
|
|
</div>
|
|
break;
|
|
case WhoIsSpyProcess.Started:
|
|
|
|
<div data-animation="fadeInDown" data-animation-delay="2000" data-animation-duration="1500">
|
|
|
|
<h1>請仔細聆聽其他人的發言，來找出誰是臥底</h1>
|
|
|
|
<button id="btnViewAnswer" class="btn btn-lg u-btn-primary g-font-weight-600 g-font-size-20 text-uppercase g-rounded-50 mx-2 g-px-25 g-py-15" type="submit">檢視自己的答案</button>
|
|
</div>
|
|
|
|
|
|
@section scripts{
|
|
<script>
|
|
$("#btnViewAnswer").click(function(parameters) {
|
|
swal({
|
|
title: '<strong>請確認自己的答案</strong>',
|
|
type: 'info',
|
|
html:
|
|
'<img src="/Images/IceBreak/WhoIsSpy/@(Model.Answer.AnswerImage)">' +
|
|
'<h2>' +
|
|
'@(Model.Answer.AnswerCht)<br> ' +
|
|
'@(Model.Answer.AnswerChs)<br> ' +
|
|
'@(Model.Answer.AnswerEn)<br> ' +
|
|
'</h2>',
|
|
showCloseButton: true,
|
|
focusConfirm: false,
|
|
confirmButtonText:
|
|
'<i class="fa fa-thumbs-up"></i> 收到!',
|
|
confirmButtonAriaLabel: 'Thumbs up, great!'
|
|
})
|
|
});
|
|
|
|
</script>
|
|
}
|
|
break;
|
|
case WhoIsSpyProcess.Votting:
|
|
<div class="g-bg-img-hero g-py-50" style="background-image: url(/images/svg/svg-bg3.svg);" data-animation="flipInY" data-animation-delay="1600" data-animation-duration="1500">
|
|
|
|
<div class="mx-auto g-max-width-600 g-overflow-hidden g-mb-40 g-font-size-30">
|
|
請投票下您神聖的 <span class="g-color-primary">@(Model.VoteAmount)</span>票
|
|
</div>
|
|
|
|
@using (Html.BeginForm("WhoIsSpyPlayVote", "IceBreak"))
|
|
{
|
|
@Html.HiddenFor(m => m.Id)
|
|
<div class="container">
|
|
<div class="btn-group justified-content g-mb-20">
|
|
|
|
@foreach (var option in Model.VoteOption)
|
|
{
|
|
|
|
<label class="u-check g-pl-0">
|
|
<input name="VoteTo" class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0 VoteTo" type="checkbox" value="@(option.Id)">
|
|
<span class="btn btn-md btn-block u-btn-outline-lightgray g-color-white--checked g-bg-primary--checked rounded-0 g-font-size-18 g-py-10">@(option.Name)</span>
|
|
</label>
|
|
}
|
|
|
|
</div>
|
|
|
|
<div class="row">
|
|
|
|
<div class="col">
|
|
|
|
<button id="btnVote" class="btn btn-lg u-btn-primary g-font-weight-600 g-font-size-20 text-uppercase g-rounded-50 mx-2 g-px-25 g-py-15 btnVote" type="button">送出</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
}
|
|
</div>
|
|
|
|
@section scripts{
|
|
<script>
|
|
$(".VoteTo").change(function () {
|
|
|
|
|
|
if(this.checked) {
|
|
//Do stuff
|
|
|
|
if ($('input.VoteTo:checked').length>@Model.VoteAmount) {
|
|
swal("最多只能投 @(Model.VoteAmount) 票");
|
|
this.checked = false;
|
|
}
|
|
|
|
}
|
|
});
|
|
|
|
|
|
$(".btnVote").click(function () {
|
|
|
|
if ($('input.VoteTo:checked').length == @Model.VoteAmount) {
|
|
|
|
$("#btnVote").parents("Form").submit();
|
|
} else {
|
|
swal(
|
|
'請確實投票',
|
|
'每個人都要投滿 @(Model.VoteAmount) 票',
|
|
'warning'
|
|
);
|
|
}
|
|
});
|
|
</script>
|
|
}
|
|
|
|
break;
|
|
case WhoIsSpyProcess.DisplayResult:
|
|
|
|
|
|
<div data-animation="fadeInDown" data-animation-delay="2000" data-animation-duration="1500">
|
|
|
|
<h1>請觀看大螢幕的投票結果</h1>
|
|
|
|
</div>
|
|
break;
|
|
case WhoIsSpyProcess.End:
|
|
|
|
|
|
<div data-animation="fadeInDown" data-animation-delay="2000" data-animation-duration="1500">
|
|
|
|
<h1>本局遊戲結束</h1>
|
|
|
|
</div>
|
|
break;
|
|
default:
|
|
throw new ArgumentOutOfRangeException();
|
|
}
|
|
|
|
|
|
<div class="g-mt-30" data-animation="fadeInDown" data-animation-delay="2000" data-animation-duration="1500">
|
|
<div class="row">
|
|
<div class="col">
|
|
|
|
@using (Html.BeginForm("WhoIsSpyPlay","IceBreak"))
|
|
{
|
|
<button class="btn btn-lg u-btn-primary g-font-weight-600 g-font-size-16 text-uppercase g-rounded-30 mx-2 g-px-25 g-py-15" type="submit">重新整理</button>
|
|
}
|
|
</div>
|
|
<div class="col">
|
|
|
|
@using (Html.BeginForm("WhoIsSpyExit", "IceBreak"))
|
|
{
|
|
<button class="btn u-shadow-v32 g-brd-black g-brd-2 g-color-black g-color-white--hover g-bg-transparent g-bg-black--hover g-font-size-16 g-rounded-30 g-py-10 mr-2 g-mt-0" type="button" data-toggle="confirmExit">離開遊戲</button>
|
|
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
}
|
|
|
|
|
|
</div>
|
|
</section>
|
|
|
|
@section scripts2
|
|
{
|
|
@if (Model != null)
|
|
{
|
|
|
|
<script>
|
|
|
|
function checkGameRoomStatus() {
|
|
|
|
|
|
$.ajax({method: "POST",url: "@Url.Action("CheckGameRoomStatu")",data: { id: "@(Model.RoomId.ToString())"}})
|
|
.done(function( msg ) {
|
|
if (msg != '@((int)Model.GameStatus)') {
|
|
location.reload();
|
|
} else {
|
|
|
|
setTimeout(checkGameRoomStatus, 5000);
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
@if (Model.GameStatus != WhoIsSpyProcess.Votting && !Model.IsDead)
|
|
{
|
|
@:$(function() {setTimeout(checkGameRoomStatus, 1000);});
|
|
}
|
|
</script>
|
|
}
|
|
|
|
|
|
}
|