427 lines
24 KiB
Plaintext
427 lines
24 KiB
Plaintext
@using Chruch.Net.Models.IceBreak
|
|
@model Chruch.Net.Models.IceBreak.WhoIsSpyGameRoom
|
|
@{
|
|
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 (string.IsNullOrWhiteSpace(Model.Id))
|
|
{
|
|
|
|
|
|
<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">
|
|
|
|
@using (Html.BeginForm("WhoIsSpyCreate", "IceBreak"))
|
|
{
|
|
<div class="row">
|
|
<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>
|
|
|
|
}
|
|
|
|
</div>
|
|
}
|
|
else
|
|
{
|
|
|
|
|
|
using (Html.BeginForm("WhoIsSpyClose", "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 g-pos-fix g-right-0 g-top-10" type="button" data-toggle="confirmExit">結束</button>
|
|
|
|
}
|
|
switch (Model.Status)
|
|
{
|
|
case WhoIsSpyProcess.WaitForPlayer:
|
|
|
|
<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-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">@Model.Id</h2>
|
|
</div>
|
|
|
|
using (Html.BeginForm("WhoIsSpyStart", "IceBreak"))
|
|
{
|
|
|
|
@Html.HiddenFor(m => m.Id)
|
|
@Html.HiddenFor(m => m.Status)
|
|
|
|
<div class="row">
|
|
<div class="col">
|
|
|
|
<div id="qrcode"></div>
|
|
</div>
|
|
<div class="col">
|
|
|
|
<div class="row">
|
|
<div class="col-4">
|
|
|
|
<label class="g-font-weight-700 g-mb-20 h5">房間人數</label>
|
|
<span id="lbPlayerAmount" class="g-color-red">@Model.TotalPlayer</span>
|
|
</div>
|
|
<div class="col-4">
|
|
|
|
<label class="g-font-weight-700 g-mb-20 h5">臥底人數</label>
|
|
@Html.TextBoxFor(m => m.SpyAmount, new { @class = "border-0 form-control g-color-gray-dark-v4 g-placeholder-gray-dark-v3 g-px-20" })
|
|
</div>
|
|
<div class="col-4">
|
|
|
|
<label class="g-font-weight-700 g-mb-20 h5">空白人數</label>
|
|
@Html.TextBoxFor(m => m.EmptyAmount, new { @class = "border-0 form-control g-color-gray-dark-v4 g-placeholder-gray-dark-v3 g-px-20" })
|
|
</div>
|
|
<div class="col g-mt-30">
|
|
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="g-my-30">已加入房間:</h2>
|
|
|
|
<div id="playerList"></div>
|
|
|
|
@section scripts{
|
|
<script>
|
|
function checkGameRoomPlayerList() {
|
|
$("#playerList").load("@Url.Action("WhoIsSpyGetPlayerList")",function(parameters) {
|
|
|
|
$("#lbPlayerAmount").html($("#playerCount")[0].value);
|
|
setTimeout(checkGameRoomPlayerList, 5000);
|
|
});
|
|
|
|
}
|
|
|
|
$(function() {
|
|
setTimeout(checkGameRoomPlayerList, 500);
|
|
|
|
$('#qrcode').qrcode("@Url.Action("WhoIsSpyPlayJoin","IceBreak",new{id=Model.Id}, this.Request.Url.Scheme)");
|
|
|
|
});
|
|
</script>
|
|
}
|
|
}
|
|
break;
|
|
case WhoIsSpyProcess.Started:
|
|
|
|
|
|
using (Html.BeginForm("WhoIsSpyNext", "IceBreak"))
|
|
{
|
|
|
|
<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">
|
|
各自發言階段:
|
|
<br />
|
|
請透過系統隨機順序發言
|
|
</p>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col">
|
|
|
|
<button id="btnSpeak" 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="button">開始發言</button>
|
|
</div>
|
|
<div class="col">
|
|
|
|
<button id="btnGoToNext" 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 disabled" type="button" onclick="GoToNextStep()">開始投票</button>
|
|
</div>
|
|
</div>
|
|
|
|
@section scripts{
|
|
<script>
|
|
|
|
$("#btnSpeak").click(function () {
|
|
swal.mixin({
|
|
confirmButtonText: 'Next →',
|
|
showCancelButton: true,
|
|
progressSteps: [
|
|
@for (int i = 1; i < (Model.TotalPlayer-Model.Players.Count(p=>p.IsDead)); i++)
|
|
{
|
|
@Html.Raw($"'{i}',")
|
|
}
|
|
, @Html.Raw($"'{Model.TotalPlayer}',")
|
|
]
|
|
}).queue([
|
|
|
|
@foreach (var p in Model.Players)
|
|
{
|
|
if (!p.IsDead)
|
|
{
|
|
@Html.Raw($"'有請 {p.Name} 發言!',")
|
|
}
|
|
|
|
}
|
|
|
|
]).then((result) => {
|
|
if (result.value) {
|
|
swal({
|
|
title: '全數發言完畢!',
|
|
html:
|
|
'請使用您的手機來進行投票，找出誰是臥底!',
|
|
confirmButtonText: 'OK!'
|
|
}).then((result) => {
|
|
$('#btnGoToNext').removeClass('disabled');
|
|
});
|
|
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
</script>
|
|
}
|
|
|
|
|
|
}
|
|
break;
|
|
case WhoIsSpyProcess.Votting:
|
|
|
|
<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">
|
|
各自投票階段:
|
|
<br />
|
|
請使用您的手機來投下您神聖的 <h1 class="g-color-primary">@Model.VoteAmount</h1> 票
|
|
<br />
|
|
<h1>以下人員尚未完成投票</h1>
|
|
</p>
|
|
</div>
|
|
|
|
<div id="playerList"></div>
|
|
<div class="row">
|
|
<div class="col">
|
|
|
|
<button id="btnGoToNext" 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 disabled" type="button" onclick="GoToNextStep()">揭開投票結果</button>
|
|
</div>
|
|
</div>
|
|
@section scripts{
|
|
<script>
|
|
function checkGameRoomPlayerList() {
|
|
$("#playerList").load("@Url.Action("WhoIsSpyGetPlayerVoteList")", function() {
|
|
/* When load is done */
|
|
if ($("#playerCount")[0].value==0) {
|
|
|
|
$('#btnGoToNext').removeClass('disabled');
|
|
} else {
|
|
setTimeout(checkGameRoomPlayerList, 5000);
|
|
}
|
|
});
|
|
|
|
|
|
}
|
|
|
|
$(function () { setTimeout(checkGameRoomPlayerList, 500); });
|
|
</script>
|
|
}
|
|
|
|
break;
|
|
case WhoIsSpyProcess.DisplayResult:
|
|
|
|
<div class="mx-auto g-max-width-600 g-overflow-hidden">
|
|
<div class="g-color-black g-font-size-18 g-font-size-30 g-font-weight-600 g-mb-40" data-animation="fadeInDown" data-animation-delay="1600" data-animation-duration="1500">
|
|
恭喜以下 <span class="g-color-primary">候選人</span> 當選
|
|
</div>
|
|
|
|
<div class="row">
|
|
|
|
@foreach (var player in Model.Players.OrderByDescending(p => p.ReceviedVotes).Take(Model.VoteAmount))
|
|
{
|
|
<div class="col g-mb-30" data-animation="flipInY" data-animation-delay="@(1800+Model.Players.IndexOf(player)*20)" data-animation-duration="1500">
|
|
<!-- Article -->
|
|
<article class="text-center g-bg-white g-rounded-15 g-overflow-hidden g-transform-scale-1_05--hover g-transition-0_3">
|
|
<!-- Article Header -->
|
|
<header class="g-bg-primary g-pos-rel g-px-20 g-py-50">
|
|
<svg class="g-pos-abs g-bottom-0 g-left-0 g-right-0" version="1.1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="70px" viewBox="0 0 300 70">
|
|
<path d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729 c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" opacity="0.6" fill="#ffffff"></path>
|
|
<path d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729 c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" opacity="0.6" fill="#ffffff"></path>
|
|
<path d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716 H42.401L43.415,98.342z" opacity="0.7" fill="#ffffff"></path>
|
|
<path d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428 c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" fill="#ffffff"></path>
|
|
</svg>
|
|
<h1 class="h1 g-color-white g-letter-spacing-3 g-mb-20 text-uppercase g-font-size-50">@player.Name</h1>
|
|
<strong class="d-block g-color-white g-font-size-50 g-line-height-0_7 g-mb-20">
|
|
<span class="g-valign-top g-font-size-default">$</span>
|
|
@player.ReceviedVotes
|
|
<span class="g-font-size-default">/ 當選票數</span>
|
|
</strong>
|
|
</header>
|
|
<!-- End Article Header -->
|
|
<!-- Article Content -->
|
|
<div class="g-px-20 g-py-40">
|
|
|
|
<button class="btn text-uppercase u-btn-primary g-rounded-50 g-font-size-12 g-font-weight-700 g-pa-15-30 g-mb-10 btnShowIdentity" type="button" value="@(player.IsSpy.ToString())">揭示身分</button>
|
|
</div>
|
|
<!-- End Article Content -->
|
|
</article>
|
|
<!-- End Article -->
|
|
</div>
|
|
}
|
|
|
|
</div>
|
|
<div class="row" data-animation="fadeInDown" data-animation-delay="1800" data-animation-duration="1500">
|
|
<div class="col">
|
|
|
|
<button id="btnGoToNext" 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="button" onclick="GoToNextStep()">進行下一輪</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
@section scripts{
|
|
<script>
|
|
$(".btnShowIdentity").click(function () {
|
|
if ($(this)[0].value == "True") {
|
|
swal("你是大偵探!", "恭喜你們抓到了一位臥底!!", "success");
|
|
} else {
|
|
|
|
swal("冤望阿!!", "你們這群暴民...就這樣害死了一位無辜的百姓!!", "error");
|
|
}
|
|
})
|
|
</script>
|
|
}
|
|
|
|
break;
|
|
case WhoIsSpyProcess.End:
|
|
|
|
<div class="mx-auto g-max-width-600 g-overflow-hidden">
|
|
|
|
<div class="g-color-black g-font-size-18 g-font-size-30 g-font-weight-600 g-mb-40" data-animation="fadeInDown" data-animation-delay="1600" data-animation-duration="1500">
|
|
恭喜 <span class="g-color-primary g-font-size-30">@(Model.Players.Count(p => p.IsSpy && !p.IsDead) > 0 ? "臥底" : "平民")</span> 獲勝
|
|
</div>
|
|
|
|
<div class="row">
|
|
|
|
<div class="col g-mb-30" data-animation="flipInY" data-animation-delay="1800" data-animation-duration="1500">
|
|
<!-- Article -->
|
|
<article class="text-center u-block-hover u-block-hover__additional--jump g-brd-around g-bg-gray-light-v5 g-brd-gray-light-v4 g-color-gray-dark-v5">
|
|
<!-- Article Header -->
|
|
<header class="g-bg-primary g-color-white-opacity-0_7 g-pa-20">
|
|
<h3 class="g-color-white g-mb-5">平民的答案</h3>
|
|
<em class="g-font-style-normal"></em>
|
|
</header>
|
|
<!-- End Article Header -->
|
|
<!-- Article Image -->
|
|
<img class="w-100" src="/Images/IceBreak/WhoIsSpy/@(Model.Answer.AnswerImage)" alt="Image Description">
|
|
<!-- End Article Image -->
|
|
<!-- Article Content -->
|
|
<div class="g-pa-40">
|
|
<div class="g-mb-10">
|
|
<strong class="d-block g-color-primary g-font-size-24 g-mt-5">@(Model.Answer.AnswerCht)</strong>
|
|
</div>
|
|
<div class="g-mb-10">
|
|
<strong class="d-block g-color-primary g-font-size-24 g-mt-5">@(Model.Answer.AnswerChs)</strong>
|
|
</div>
|
|
<div class="g-mb-10">
|
|
<strong class="d-block g-color-primary g-font-size-24 g-mt-5">@(Model.Answer.AnswerEn)</strong>
|
|
</div>
|
|
</div>
|
|
<!-- End Article Content -->
|
|
</article>
|
|
<!-- End Article -->
|
|
</div>
|
|
|
|
<div class="col g-mb-30" data-animation="flipInY" data-animation-delay="2000" data-animation-duration="1500">
|
|
<!-- Article -->
|
|
<article class="text-center u-block-hover u-block-hover__additional--jump g-brd-around g-bg-gray-light-v5 g-brd-gray-light-v4 g-color-gray-dark-v5">
|
|
<!-- Article Header -->
|
|
<header class="g-bg-deeporange g-color-white-opacity-0_7 g-pa-20">
|
|
<h3 class="g-color-white g-mb-5">臥底的答案</h3>
|
|
<em class="g-font-style-normal"></em>
|
|
</header>
|
|
<!-- End Article Header -->
|
|
<!-- Article Image -->
|
|
<img class="w-100" src="/Images/IceBreak/WhoIsSpy/@(Model.SpysAnswer.AnswerImage)" alt="Image Description">
|
|
<!-- End Article Image -->
|
|
<!-- Article Content -->
|
|
<div class="g-pa-40">
|
|
<div class="g-mb-10">
|
|
<strong class="d-block g-color-deeporange g-font-size-24 g-mt-5">@(Model.SpysAnswer.AnswerCht)</strong>
|
|
</div>
|
|
<div class="g-mb-10">
|
|
<strong class="d-block g-color-deeporange g-font-size-24 g-mt-5">@(Model.SpysAnswer.AnswerChs)</strong>
|
|
</div>
|
|
<div class="g-mb-10">
|
|
<strong class="d-block g-color-deeporange g-font-size-24 g-mt-5">@(Model.SpysAnswer.AnswerEn)</strong>
|
|
</div>
|
|
</div>
|
|
<!-- End Article Content -->
|
|
</article>
|
|
<!-- End Article -->
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div class="g-px-20 g-py-5">
|
|
|
|
<button class="btn text-uppercase u-btn-primary g-rounded-50 g-font-size-12 g-font-weight-700 g-pa-15-30 g-mb-10" type="button" onclick="GoToNextStep()">開始下一局</button>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
break;
|
|
default:
|
|
throw new ArgumentOutOfRangeException();
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
</div>
|
|
</section>
|
|
|
|
|
|
@using (Html.BeginForm("WhoIsSpyNext", "IceBreak", FormMethod.Post, new { id = "GoToNextStepForm" }))
|
|
{
|
|
|
|
}
|
|
|
|
@section scripts2
|
|
{
|
|
|
|
<script>
|
|
function GoToNextStep() {
|
|
$("#GoToNextStepForm").submit();
|
|
}
|
|
|
|
</script>
|
|
|
|
} |