generated from Game-as-a-Service/Gaas-repo-template
-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
efarure/Fornt-End_GamePage-Other Merge To develop
- Loading branch information
Showing
49 changed files
with
919 additions
and
23 deletions.
There are no files selected for viewing
2 changes: 1 addition & 1 deletion
2
...oly.Web/Pages/Ready/Entities/ColorEnum.cs → Monopoly.Web/Pages/Enums/ColorEnum.cs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,4 @@ | ||
namespace Client.Pages.Ready.Entities; | ||
namespace Client.Pages.Enums; | ||
|
||
public enum ColorEnum | ||
{ | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
namespace Client.Pages.Enums; | ||
|
||
public enum GamingStatusEnum | ||
{ | ||
None, | ||
} |
2 changes: 1 addition & 1 deletion
2
...poly.Web/Pages/Ready/Entities/RoleEnum.cs → Monopoly.Web/Pages/Enums/RoleEnum.cs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,4 @@ | ||
namespace Client.Pages.Ready.Entities; | ||
namespace Client.Pages.Enums; | ||
|
||
public enum RoleEnum | ||
{ | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
<dlv class="ChatBox"> | ||
|
||
</dlv> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
namespace Client.Pages.Gaming.Components; | ||
|
||
public partial class ChatBox | ||
{ | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
| ||
.ChatBox { | ||
position: absolute; | ||
width: calc(603 * var(--unit)); | ||
height: calc(180 * var(--unit)); | ||
top: calc(888 * var(--unit)); | ||
left: calc(32 * var(--unit)); | ||
background-color: coral; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
<div class="GameRound"> | ||
<dlv class="Round_Info"> | ||
<div class="TimeBox"> | ||
<div class="Alarm_Clock"></div> | ||
<span class="Time_Str">10:00</span> | ||
</div> | ||
<div class="RoundBox"> | ||
<span class="Round_Str Start">第</span><span class="Round_Number">0</span><span class="Round_Str End">回合</span> | ||
</div> | ||
</dlv> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
namespace Client.Pages.Gaming.Components; | ||
|
||
public partial class GameRound | ||
{ | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,84 @@ | ||
| ||
.GameRound { | ||
position: absolute; | ||
width: calc(170 * var(--unit)); | ||
height: calc(135 * var(--unit)); | ||
top: calc(24 * var(--unit)); | ||
left: calc(32 * var(--unit)); | ||
} | ||
|
||
.Round_Info { | ||
position: absolute; | ||
width: calc(170 * var(--unit)); | ||
height: calc(135 * var(--unit)); | ||
top: 0; | ||
left: 0; | ||
/*background-image: url('./images/gamepage/Round.svg');*/ | ||
background-size: cover; | ||
background-position: center; | ||
} | ||
|
||
.TimeBox { | ||
width: calc(170 * var(--unit)); | ||
height: calc(52 * var(--unit)); | ||
background-color: #B67171; /* 底色 */ | ||
border: calc(3 * var(--unit)) solid #5B5B5B; /* 方框邊框寬度和顏色 */ | ||
border-bottom: none; /* 下方框邊框寬度和顏色*/ | ||
border-top-left-radius: calc(10 * var(--unit)); /* 左上角方框圓角半徑 */ | ||
border-top-right-radius: calc(10 * var(--unit)); /* 右上角方框圓角半徑 */ | ||
} | ||
|
||
.TimeBox .Alarm_Clock { | ||
position: absolute; | ||
width: calc(24 * var(--unit)); | ||
height: calc(24 * var(--unit)); | ||
top: calc(15 * var(--unit)); | ||
left: calc(30 * var(--unit)); | ||
background-image: url('./images/gamepage/alarm_clock.svg'); | ||
background-size: cover; | ||
background-position: center; | ||
} | ||
|
||
.TimeBox .Time_Str { | ||
position: absolute; | ||
width: calc(78 * var(--unit)); | ||
height: calc(33 * var(--unit)); | ||
top: calc(15 * var(--unit)); | ||
left: calc(62 * var(--unit)); | ||
color: white; | ||
font-size: calc(24 * var(--unit)); | ||
text-align: center; | ||
} | ||
|
||
.RoundBox { | ||
width: calc(170 * var(--unit)); | ||
height: calc(77 * var(--unit)); | ||
background-color: white; /* 底色 */ | ||
border: calc(3 * var(--unit)) solid #5B5B5B; /* 方框邊框寬度和顏色 */ | ||
border-top: none; /* 上方框線框寬度和顏色 */ | ||
border-bottom-left-radius: calc(10 * var(--unit)); /* 右下角方框圓角半徑 */ | ||
border-bottom-right-radius: calc(10 * var(--unit)); /* 右下角方框圓角半徑 */ | ||
} | ||
.RoundBox .Round_Str { | ||
position: absolute; | ||
color: #595959; | ||
font-size: calc(20 * var(--unit)); | ||
} | ||
.RoundBox .Round_Str.Start { | ||
top: calc(94 * var(--unit)); | ||
left: calc(23 * var(--unit)); | ||
} | ||
.RoundBox .Round_Str.End { | ||
top: calc(94 * var(--unit)); | ||
left: calc(108 * var(--unit)); | ||
} | ||
.RoundBox .Round_Number { | ||
position: absolute; | ||
width: calc(59 * var(--unit)); | ||
height: calc(58 * var(--unit)); | ||
top: calc(67 * var(--unit)); | ||
left: calc(46 * var(--unit)); | ||
color: #595959; | ||
font-size: calc(48 * var(--unit)); | ||
text-align: center; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
<dlv class="Go"> | ||
<dlv class="GoBetton"></dlv> | ||
<dlv class="AutoBetton"></dlv> | ||
</dlv> | ||
|
||
<script> | ||
//按下Go按鈕時切換圖片,放開時還原圖片 | ||
const dlv_Go = document.querySelector('.GoBetton'); | ||
dlv_Go.addEventListener('mousedown', () => { | ||
dlv_Go.classList.add('Pressed'); | ||
}); | ||
dlv_Go.addEventListener('mouseup', () => { | ||
dlv_Go.classList.remove('Pressed'); | ||
}); | ||
</script> | ||
|
||
<script> | ||
//按Auto按鈕切換狀態、圖片 | ||
const dlv_Auto = document.querySelector('.AutoBetton'); | ||
dlv_Auto.addEventListener('click', () => { | ||
const classList = dlv_Auto.classList; | ||
if (classList.contains('Open')) { | ||
classList.remove('Open'); | ||
} else { | ||
classList.add('Open'); | ||
} | ||
}); | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
namespace Client.Pages.Gaming.Components; | ||
|
||
public partial class Go | ||
{ | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
| ||
.Go { | ||
position: absolute; | ||
width: calc(257 * var(--unit)); | ||
height: calc(224 * var(--unit)); | ||
top: calc(840 * var(--unit)); | ||
left: calc(1632 * var(--unit)); | ||
/*background-color: coral;*/ | ||
} | ||
|
||
.GoBetton { | ||
position: absolute; | ||
width: calc(224 * var(--unit)); | ||
height: calc(224 * var(--unit)); | ||
top: 0; | ||
left: 0; | ||
background-image: url('./images/gamepage/Go_Default.svg'); | ||
background-size: cover; | ||
background-position: center; | ||
|
||
} | ||
|
||
.GoBetton.Pressed { | ||
background-image: url('./images/gamepage/Go_Pressed.svg'); | ||
} | ||
|
||
.AutoBetton { | ||
position: absolute; | ||
width: calc(72 * var(--unit)); | ||
height: calc(32 * var(--unit)); | ||
top: calc(177 * var(--unit)); | ||
left: calc(185 * var(--unit)); | ||
background-image: url('./images/gamepage/AutoButtun_Off.svg'); | ||
background-size: cover; | ||
background-position: center; | ||
} | ||
|
||
.AutoBetton.Open { | ||
background-image: url('./images/gamepage/AutoButtun_On.svg'); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
@using Client.Pages.Gaming.Entities | ||
@code { | ||
[CascadingParameter] | ||
public GamingPage Parent { get; set; } = default!; | ||
private Player player => Parent?.Players.FirstOrDefault(); | ||
} | ||
<dlv class="PlayerInfo"> | ||
<div class="money"> | ||
<span>@player.Money</span> | ||
</div> | ||
<div class="TotalMoney"> | ||
<span>@player.GetTotalMoney</span> | ||
</div> | ||
<hr class="withBalls"> | ||
<div class="collapseBtn"> | ||
抵押清單 | ||
</div> | ||
<div class="MortgageList"> | ||
<ul> | ||
<li><span>A</span></li> | ||
<li><span>B</span></li> | ||
<li><span>C</span></li> | ||
<li><span>C</span></li> | ||
<li><span>C</span></li> | ||
<li><span>C</span></li> | ||
<li><span>C</span></li> | ||
<li><span>C</span></li> | ||
<li><span>C</span></li> | ||
</ul> | ||
</div> | ||
</dlv> | ||
|
||
<script> | ||
const collapseContainer = document.querySelector('.MortgageList') | ||
const collapseBtn = document.querySelector('.collapseBtn') | ||
if (collapseContainer && collapseBtn) { | ||
// 預設關閉 | ||
collapseContainer.classList.add('collapseHide') | ||
// 點擊切換 | ||
collapseBtn.addEventListener('click', () => { | ||
collapseContainer.classList.toggle('collapseHide') | ||
}) | ||
} | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
namespace Client.Pages.Gaming.Components; | ||
|
||
public partial class PlayerInfo | ||
{ | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,79 @@ | ||
.PlayerInfo { | ||
position: absolute; | ||
top: calc(213 * var(--unit)); | ||
left: calc(1644 * var(--unit)); | ||
border-radius: calc(20 * var(--unit)); /* 方框圓角半徑 */ | ||
border: calc(4 * var(--unit)) solid white; /* 方框邊框寬度和顏色 */ | ||
background-color: #5B5B5B; /* 底色 */ | ||
padding: 1rem; /* 4邊起始位置往內推一個字(16px) */ | ||
} | ||
|
||
.PlayerInfo .withBalls::before, .PlayerInfo .withBalls::after { | ||
content: ''; | ||
display: inline-block; | ||
position: absolute; | ||
width: .5rem; | ||
height: .5rem; | ||
background-color: white; | ||
border-radius: 50%; | ||
transform: translateY(-50%); | ||
} | ||
|
||
.PlayerInfo .withBalls::before { | ||
left: 1rem; | ||
} | ||
|
||
.PlayerInfo .withBalls::after { | ||
right: 1rem; | ||
} | ||
|
||
.PlayerInfo .money, .PlayerInfo .TotalMoney { | ||
display: flex; | ||
align-items: center; | ||
width: calc(206 * var(--unit)); | ||
color: white; | ||
font-size: calc(20 * var(--unit)); | ||
} | ||
|
||
.PlayerInfo .money::before, .PlayerInfo .TotalMoney::before { | ||
content: ""; | ||
display: inline-block; | ||
width: calc(15 * var(--unit)); | ||
height: calc(15 * var(--unit)); | ||
margin-right: calc(4 * var(--unit)); | ||
margin-bottom: calc(-3 * var(--unit)); | ||
background-size: cover; | ||
background-position: center; | ||
} | ||
|
||
.PlayerInfo .money::before { | ||
background-image: url('./images/gamepage/icon_mini_money.svg'); | ||
} | ||
|
||
.PlayerInfo .TotalMoney::before { | ||
background-image: url('./images/gamepage/icon_mini_home.svg'); | ||
} | ||
|
||
.PlayerInfo .MortgageList { | ||
color: #D8C292; | ||
font-size: 20px; | ||
} | ||
|
||
.PlayerInfo .collapseBtn { | ||
color: white; | ||
cursor: pointer; | ||
text-align: center; | ||
font-size: 1.25rem; | ||
user-select: none; | ||
} | ||
|
||
.PlayerInfo .collapseBtn:hover { | ||
text-decoration: underline; | ||
} | ||
|
||
.PlayerInfo .MortgageList.collapseHide { | ||
opacity: 0; | ||
height: 0; | ||
overflow: hidden; | ||
pointer-events: none; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
@using Client.Pages.Gaming.Entities | ||
@code { | ||
[CascadingParameter] | ||
public GamingPage Parent { get; set; } = default!; | ||
private IEnumerable<Player> players => Parent?.Players; | ||
} | ||
|
||
<div class="PlayerRankList"> | ||
@foreach (var (player, index) in players.OrderBy(p=>p.GetTotalMoney).Select((item, index) => (item, index))) | ||
{ | ||
<div class="Player"> | ||
<div class="PlayerInfo"> | ||
<div class="Rank"> | ||
<div class="Round"> | ||
<span class="Number">@(@index + 1)</span> | ||
</div> | ||
<p class="Name"> | ||
<span>@player.Name</span> | ||
</p> | ||
</div> | ||
<div class="PlayerMoney"> | ||
<div class="Icon @player.Role.ToString().ToLower()"></div> | ||
<div class="MoneyBox"> | ||
<p class="Money">@player.Money</p> | ||
<p class="TotalMoney">@player.GetTotalMoney</p> | ||
</div> | ||
</div> | ||
<div class="Status"></div> | ||
</div> | ||
<div class="Host_Flag"></div> | ||
</div> | ||
} | ||
</div> |
Oops, something went wrong.