NackenWordle Design

GottfriedsNackenWebseite/.vs/GottfriedsNackenWebseite/project-colors.json

@@ -0,0 +1,11 @@
+{
+  "Version": 1,
+  "ProjectMap": {
+    "464dd643-dad9-4e16-bb24-36f789ed4c15": {
+      "ProjectGuid": "464dd643-dad9-4e16-bb24-36f789ed4c15",
+      "DisplayName": "GottfriedsNackenWebseite",
+      "ColorIndex": 0
+    }
+  },
+  "NextColorIndex": 1
+}

GottfriedsNackenWebseite/GottfriedsNackenWebseite/Pages/Wordle.razor

@@ -2,8 +2,78 @@
 
 <PageTitle>Nacken Wordle</PageTitle>
 
-<h3 align="center">Willkommen zum Nacken Wordle</h3>
+<MudText Align="Align.Center" Class="mt-2 mb-2"> Willkommen zum Nacken Wordle</MudText>
+
+<div hidden="@hideAlert">
+    <MudContainer MaxWidth="MaxWidth.Small">
+        <MudAlert Severity="Severity.Success">Korrekt!</MudAlert>
+    </MudContainer>
+</div>
+
+<div class="d-flex justify-center mt-2 mb-2">
+    <div>
+        @for(int i = 0; i < 6; i++)
+        {
+            <div class="d-flex mb-2">
+                @for(int j = 0; j < 5; j++)
+                {
+                    
+                    <MudPaper Class="mr-2" Width="60px" Height="60px" Outlined="true">
+                        <MudText Typo="Typo.h3" Align="Align.Center"></MudText>
+                    </MudPaper>
+                }
+           </div>
+        }
+    </div>
+</div>
+
+
+<div class="d-flex justify-center">
+    <MudPaper Class="d-flex gap-4" Width="390px">
+        <MudTextField @ref="textField" T="string" FullWidth="true" @bind-Value="Input" Label="Dein Tipp:" Variant="Variant.Outlined" MaxLength="5" Mask="@mask">Hi</MudTextField>
+        
+        <MudButton style="height:56px; margin-top:6px;" Class="justify-center"  Size="Size.Large" Variant="Variant.Outlined" EndIcon="@Icons.Material.Filled.Send" Color="Color.Primary" OnClick=@ButtonOnClick>OK</MudButton>
+    </MudPaper>
+</div>
+
 
 @code {
+    public string Input { get; set; }
 
+    public bool hideAlert = true;
+
+    public MudTextField<string> textField;
+
+    //Keine Ahnung wie das funktionert... Danke StackOverflow :)
+    public IMask mask = new RegexMask(@"^[A-Za-z]{0,5}$");
+
+    private string secret = "penis";
+
+    public void ButtonOnClick()
+    {
+        if(Input != null)
+        {
+            if(secret.ToLower() == Input.ToLower())
+            {
+                textField.Clear();
+                hideAlert = false;
+            }
+            else
+            {
+                textField.Clear();
+            }
+        }
+
+    }
+
+    private Color getColor(char letter, int position, string secret)
+    {
+        if (position > secret.Length) return Color.Primary;
+
+        if(letter == secret[position]) return Color.Success;
+
+        if (secret.Contains(letter)) return Color.Warning;
+
+        return Color.Primary;
+    }
 }

GottfriedsNackenWebseite/GottfriedsNackenWebseite/obj/staticwebassets.pack.sentinel

@@ -30,3 +30,181 @@
 2.0
 2.0
 2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0
+2.0