Skip to content

Commit 454894f

Browse files
christiannagelchristiannagel
authored
Merge pull request #56 from CodebreakerApp/55-simplification-ui
55 simplification UI
2 parents 9f7e02a + 62f24f6 commit 454894f

38 files changed

Lines changed: 910 additions & 478 deletions

‎src/CodeBreaker.Blazor.Client/CodeBreaker.Blazor.Client.csproj‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,18 +13,16 @@
1313
</ItemGroup>
1414

1515
<ItemGroup>
16-
<PackageReference Include="BlazorApplicationInsights" Version="3.0.4" />
17-
<PackageReference Include="CNinnovation.Codebreaker.GamesClient" Version="3.6.0-beta.23" />
18-
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.1" />
19-
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.1" />
20-
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.1" PrivateAssets="all" />
21-
<PackageReference Include="Microsoft.Authentication.WebAssembly.Msal" Version="8.0.1" />
16+
<PackageReference Include="BlazorApplicationInsights" Version="3.0.5" />
17+
<PackageReference Include="CNinnovation.Codebreaker.GamesClient" Version="3.6.0-beta.24" />
18+
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.4" />
19+
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.4" />
20+
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.4" PrivateAssets="all" />
21+
<PackageReference Include="Microsoft.Authentication.WebAssembly.Msal" Version="8.0.4" />
2222
<PackageReference Include="Microsoft.Extensions.Http" Version="8.0.0" />
23-
<PackageReference Include="Microsoft.Extensions.Localization" Version="8.0.1" />
24-
</ItemGroup>
25-
26-
<ItemGroup>
27-
<ProjectReference Include="..\CodeBreaker.Blazor.UI\CodeBreaker.Blazor.UI.csproj" />
23+
<PackageReference Include="Microsoft.Extensions.Localization" Version="8.0.4" />
24+
<PackageReference Include="Microsoft.FluentUI.AspNetCore.Components" Version="4.7.2" />
25+
<PackageReference Include="Microsoft.FluentUI.AspNetCore.Components.Icons" Version="4.7.2" />
2826
</ItemGroup>
2927

3028
<ItemGroup>

‎src/CodeBreaker.Blazor.Client/Components/FinishedGameDialog.razor‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
@using CodeBreaker.Blazor.Client.Extensions
2+
@inject IStringLocalizer<Resource> Loc
3+
4+
<FluentDialogHeader ShowDismiss="@Dialog.Instance.Parameters.ShowDismiss">
5+
@if (Dialog.Instance.Parameters.ShowTitle)
6+
{
7+
<FluentLabel Typo="Typography.PaneHeader">
8+
@Dialog.Instance.Parameters.Title
9+
</FluentLabel>
10+
}
11+
</FluentDialogHeader>
12+
<FluentDialogBody>
13+
@if (Game is not null)
14+
{
15+
<div class="container">
16+
<div class="numbers">
17+
@for (int i = Game.MaxMoves; i > 0; i--)
18+
{
19+
<div class="move-number">@i</div>
20+
}
21+
</div>
22+
<div class="game-container">
23+
@foreach (var move in _gameMoves?.Reverse() ?? [])
24+
{
25+
<div class="game-move">
26+
@foreach (var guess in move.GuessPegs)
27+
{
28+
<div class="@(guess.GetCssClasses())" />
29+
}
30+
<div class="@($"key-pegs {KeyPegsFormat}")">
31+
@foreach (var keypeg in move.KeyPegs)
32+
{
33+
<div class="@keypeg.ToLowerInvariant()" />
34+
}
35+
</div>
36+
</div>
37+
}
38+
</div>
39+
</div>
40+
}
41+
</FluentDialogBody>
42+
<FluentDialogFooter>
43+
<FluentButton OnClick="CloseDialog">@Loc["Close"]</FluentButton>
44+
</FluentDialogFooter>

‎src/CodeBreaker.Blazor.Client/Components/FinishedGameDialog.razor.cs‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
using Codebreaker.GameAPIs.Client.Models;
2+
using CodeBreaker.Blazor.Client.Models;
3+
using Microsoft.AspNetCore.Components;
4+
using Microsoft.FluentUI.AspNetCore.Components;
5+
6+
namespace CodeBreaker.Blazor.Client.Components;
7+
8+
public partial class FinishedGameDialog : IDialogContentComponent<GameInfo?>
9+
{
10+
[Parameter] public GameInfo? Content { get; set; }
11+
12+
[CascadingParameter] public FluentDialog Dialog { get; set; } = default!;
13+
14+
public GameInfo? Game => Content;
15+
16+
private IEnumerable<SelectionAndKeyPegs>? _gameMoves;
17+
18+
private string KeyPegsFormat => Game?.NumberCodes > 4 ? "three-two" : "two-two";
19+
20+
protected override void OnInitialized()
21+
{
22+
_gameMoves = Game?.Moves.Select(move => new SelectionAndKeyPegs([.. Field.Parse(move.GuessPegs)], move.KeyPegs, move.MoveNumber));
23+
}
24+
25+
private async Task CloseDialog() =>
26+
await Dialog.CloseAsync();
27+
}

‎src/CodeBreaker.Blazor.Client/Components/FinishedGameDialog.razor.css‎

Lines changed: 278 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,278 @@
1+
.container {
2+
--game-field-width: 3rem;
3+
--game-field-height: 3rem;
4+
--key-pegs-width: 90%;
5+
--key-pegs-height: 90%;
6+
align-items: center;
7+
justify-content: center;
8+
padding: 1rem;
9+
animation: enterPlayground;
10+
animation-iteration-count: 1;
11+
animation-duration: 2s;
12+
}
13+
14+
@keyframes enterPlayground {
15+
0% {
16+
transform: scale(0.5);
17+
pointer-events: none;
18+
}
19+
20+
100% {
21+
transform: scale(1.0);
22+
pointer-events: initial;
23+
}
24+
}
25+
26+
@media only screen and (max-width: 763px) {
27+
.container {
28+
--game-field-width: 2.25rem;
29+
--game-field-height: 2.25rem;
30+
}
31+
}
32+
33+
@media only screen and (max-height: 900px) {
34+
.container {
35+
--game-field-width: 2.25rem;
36+
--game-field-height: 2.25rem;
37+
}
38+
}
39+
40+
@media only screen and (max-width: 599px) and (min-height: 800px) {
41+
.container {
42+
--game-field-width: 2rem;
43+
--game-field-height: 2rem;
44+
}
45+
}
46+
47+
@media only screen and (max-width: 599px) and (max-height: 800px) {
48+
.container {
49+
--game-field-width: 1.5rem;
50+
--game-field-height: 1.5rem;
51+
}
52+
}
53+
54+
.container,
55+
.game-container,
56+
.colors,
57+
.numbers,
58+
.game-container .game-row,
59+
.game-container .game-move {
60+
display: flex;
61+
gap: 0.5rem;
62+
}
63+
64+
.game-container, .colors, .numbers {
65+
flex-direction: column;
66+
}
67+
68+
.numbers, .game-container {
69+
align-self: flex-end;
70+
}
71+
72+
.game-container .game-row,
73+
.game-container .game-move,
74+
.colors div {
75+
pointer-events: none;
76+
}
77+
78+
.game-container {
79+
cursor: pointer;
80+
pointer-events: initial;
81+
}
82+
83+
.game-container .game-row div.move-number,
84+
.game-container .game-row div.key-pegs,
85+
.game-container .game-row div.color {
86+
cursor: auto;
87+
}
88+
89+
.game-container .game-row div,
90+
.game-container .game-move div,
91+
.colors div,
92+
.numbers div {
93+
width: var(--game-field-width);
94+
height: var(--game-field-height);
95+
border: 1px solid var(--move-border-color);
96+
border-radius: 100vh;
97+
display: flex;
98+
align-items: center;
99+
justify-content: center;
100+
transition: background-color .5s ease-in-out;
101+
}
102+
103+
.game-container .game-row div.key-pegs {
104+
width: calc(var(--game-field-width) - 4px);
105+
height: calc(var(--game-field-height) - 4px);
106+
}
107+
108+
.game-container .game-move div {
109+
margin: 0 auto;
110+
}
111+
112+
.colors div {
113+
pointer-events: none;
114+
cursor: auto;
115+
}
116+
117+
118+
119+
/* Colors */
120+
.red, .blue, .green, .black, .orange, .purple {
121+
color: var(--white);
122+
}
123+
124+
.white {
125+
background-color: var(--white);
126+
color: var(--black);
127+
}
128+
129+
.yellow {
130+
background-color: var(--yellow);
131+
color: var(--black);
132+
}
133+
134+
.black {
135+
background-color: var(--black);
136+
}
137+
138+
.red {
139+
background-color: var(--red);
140+
}
141+
142+
.blue {
143+
background-color: var(--blue);
144+
}
145+
146+
.green {
147+
background-color: var(--green);
148+
}
149+
150+
.purple {
151+
background-color: var(--purple);
152+
}
153+
154+
.orange {
155+
background-color: var(--orange);
156+
}
157+
158+
.pink {
159+
background-color: var(--pink);
160+
}
161+
162+
.brown {
163+
background-color: var(--brown);
164+
}
165+
166+
/* Shapes */
167+
.rectangle, .circle, .square, .triangle, .star {
168+
display: inline-block;
169+
font-family: "bootstrap-icons";
170+
font-style: normal;
171+
font-size: 25px;
172+
}
173+
174+
.rectangle::before {
175+
content: '\F3C0';
176+
transform: rotate(90deg);
177+
}
178+
179+
.circle::before {
180+
content: '\F28A';
181+
}
182+
183+
.square::before {
184+
content: '\F584';
185+
}
186+
187+
.triangle::before {
188+
content: '\F5E5';
189+
}
190+
191+
.star::before {
192+
content: '\F588';
193+
}
194+
195+
196+
.key-pegs {
197+
padding: 0.125rem;
198+
width: calc(var(--game-field-width) - 4px) !important;
199+
height: calc(var(--game-field-height) - 4px) !important;
200+
background-color: lightgray;
201+
}
202+
203+
.key-pegs.two-two {
204+
display: grid !important;
205+
grid-template-columns: 1fr 1fr;
206+
grid-template-rows: 1fr 1fr;
207+
}
208+
209+
.key-pegs.two-two div {
210+
width: var(--key-pegs-width) !important;
211+
height: var(--key-pegs-height) !important;
212+
}
213+
214+
.key-pegs.two-two div:first-child {
215+
border-radius: 100vh 0 0 0;
216+
}
217+
218+
.key-pegs.two-two div:nth-child(2) {
219+
border-radius: 0 100vh 0 0;
220+
}
221+
222+
.key-pegs.two-two div:nth-child(3) {
223+
border-radius: 0 0 0 100vh;
224+
}
225+
226+
.key-pegs.two-two div:nth-child(4) {
227+
border-radius: 0 0 100vh 0;
228+
}
229+
230+
.key-pegs.three-two {
231+
overflow: hidden;
232+
position: relative;
233+
margin: 1em auto;
234+
border: dashed 1px;
235+
border-radius: 50%;
236+
}
237+
238+
.key-pegs.three-two div {
239+
border-radius: 0;
240+
overflow: hidden;
241+
position: absolute;
242+
top: 0;
243+
right: 0;
244+
width: 50%;
245+
height: 50%;
246+
transform-origin: 0% 100%;
247+
}
248+
249+
250+
.key-pegs.three-two div:first-child {
251+
transform: rotate(0deg) skewY(-16deg);
252+
}
253+
254+
.key-pegs.three-two div:nth-child(2) {
255+
transform: rotate(75deg) skewY(-16deg);
256+
}
257+
258+
.key-pegs.three-two div:nth-child(3) {
259+
transform: rotate(146deg) skewY(-16deg);
260+
}
261+
262+
.key-pegs.three-two div:nth-child(4) {
263+
transform: rotate(218deg) skewY(-16deg);
264+
}
265+
266+
.key-pegs.three-two div:nth-child(5) {
267+
transform: rotate(288deg) skewY(-16deg);
268+
}
269+
270+
271+
272+
.key-pegs .white {
273+
background-color: var(--white);
274+
}
275+
276+
.key-pegs .black {
277+
background-color: var(--black);
278+
}

‎src/CodeBreaker.Blazor.Client/Components/LanguageSelector.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,5 @@
22

33
@if (_items.Count != 0)
44
{
5-
<CodeBreakerSelect Items="_items" @bind-Value="Culture" />
5+
<FluentSelect Items="_items.Keys" @bind-Value="SelectedCultureKey" />
66
}

0 commit comments

Comments
 (0)