efarure/Fornt-End_GamePage-Other Merge To develop

Game-as-a-Service · Jun 2, 2024 · f420f03 · f420f03
2 parents 80a9f25 + 4fd0ec1
commit f420f03
Show file tree

Hide file tree

Showing 49 changed files with 919 additions and 23 deletions.
diff --git a/...oly.Web/Pages/Ready/Entities/ColorEnum.cs → Monopoly.Web/Pages/Enums/ColorEnum.cs b/...oly.Web/Pages/Ready/Entities/ColorEnum.cs → Monopoly.Web/Pages/Enums/ColorEnum.cs
@@ -1,4 +1,4 @@
-namespace Client.Pages.Ready.Entities;
+namespace Client.Pages.Enums;
 
 public enum ColorEnum
 {

diff --git a/Monopoly.Web/Pages/Enums/GamingStatusEnum.cs b/Monopoly.Web/Pages/Enums/GamingStatusEnum.cs
@@ -0,0 +1,6 @@
+namespace Client.Pages.Enums;
+
+public enum GamingStatusEnum
+{
+    None,
+}
diff --git a/...poly.Web/Pages/Ready/Entities/RoleEnum.cs → Monopoly.Web/Pages/Enums/RoleEnum.cs b/...poly.Web/Pages/Ready/Entities/RoleEnum.cs → Monopoly.Web/Pages/Enums/RoleEnum.cs
@@ -1,4 +1,4 @@
-namespace Client.Pages.Ready.Entities;
+namespace Client.Pages.Enums;
 
 public enum RoleEnum
 {

diff --git a/Monopoly.Web/Pages/Gaming/Components/ChatBox.razor b/Monopoly.Web/Pages/Gaming/Components/ChatBox.razor
@@ -0,0 +1,3 @@
+<dlv class="ChatBox">
+
+</dlv>
diff --git a/Monopoly.Web/Pages/Gaming/Components/ChatBox.razor.cs b/Monopoly.Web/Pages/Gaming/Components/ChatBox.razor.cs
@@ -0,0 +1,5 @@
+namespace Client.Pages.Gaming.Components;
+
+public partial class ChatBox
+{
+}
diff --git a/Monopoly.Web/Pages/Gaming/Components/ChatBox.razor.css b/Monopoly.Web/Pages/Gaming/Components/ChatBox.razor.css
@@ -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;
+}
diff --git a/Monopoly.Web/Pages/Gaming/Components/GameRound.razor b/Monopoly.Web/Pages/Gaming/Components/GameRound.razor
@@ -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>
diff --git a/Monopoly.Web/Pages/Gaming/Components/GameRound.razor.cs b/Monopoly.Web/Pages/Gaming/Components/GameRound.razor.cs
@@ -0,0 +1,5 @@
+namespace Client.Pages.Gaming.Components;
+
+public partial class GameRound
+{
+}
diff --git a/Monopoly.Web/Pages/Gaming/Components/GameRound.razor.css b/Monopoly.Web/Pages/Gaming/Components/GameRound.razor.css
@@ -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;
+    }
diff --git a/Monopoly.Web/Pages/Gaming/Components/Go.razor b/Monopoly.Web/Pages/Gaming/Components/Go.razor
@@ -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>
diff --git a/Monopoly.Web/Pages/Gaming/Components/Go.razor.cs b/Monopoly.Web/Pages/Gaming/Components/Go.razor.cs
@@ -0,0 +1,5 @@
+namespace Client.Pages.Gaming.Components;
+
+public partial class Go
+{
+}
diff --git a/Monopoly.Web/Pages/Gaming/Components/Go.razor.css b/Monopoly.Web/Pages/Gaming/Components/Go.razor.css
@@ -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');
+    }
diff --git a/Monopoly.Web/Pages/Gaming/Components/PlayerInfo.razor b/Monopoly.Web/Pages/Gaming/Components/PlayerInfo.razor
@@ -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>
diff --git a/Monopoly.Web/Pages/Gaming/Components/PlayerInfo.razor.cs b/Monopoly.Web/Pages/Gaming/Components/PlayerInfo.razor.cs
@@ -0,0 +1,5 @@
+namespace Client.Pages.Gaming.Components;
+
+public partial class PlayerInfo
+{
+}
diff --git a/Monopoly.Web/Pages/Gaming/Components/PlayerInfo.razor.css b/Monopoly.Web/Pages/Gaming/Components/PlayerInfo.razor.css
@@ -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;
+    }
diff --git a/Monopoly.Web/Pages/Gaming/Components/PlayerRankList.razor b/Monopoly.Web/Pages/Gaming/Components/PlayerRankList.razor
@@ -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>