Add signal R

Wordle.Api/Wordle.Api/Program.cs

@@ -3,7 +3,6 @@
 using Microsoft.EntityFrameworkCore;
 using Microsoft.IdentityModel.Tokens;
 using Microsoft.OpenApi.Models;
-using System;
 using System.Text;
 using Wordle.Api;
 using Wordle.Api.Identity;
@@ -24,17 +23,20 @@
 {
     options.AddPolicy(name: AllOrigins, policy =>
     {
-        policy.WithOrigins("*");
+        policy.WithOrigins("http://localhost:3000");
         policy.AllowAnyMethod();
         policy.AllowAnyHeader();
+        policy.AllowCredentials();
     });
 });
 
 builder.Services.AddControllers();
 // Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
 builder.Services.AddEndpointsApiExplorer();
+builder.Services.AddSignalR();
 builder.Services.AddSwaggerGen(config =>
     {
+        config.AddSignalRSwaggerGen();
         config.SwaggerDoc("v1", new OpenApiInfo { Title = "Wordle API", Version = "v1" });
         config.AddSecurityDefinition("Bearer", new OpenApiSecurityScheme
         {
@@ -63,6 +65,7 @@
 
 builder.Services.AddScoped<WordOfTheDayService>();
 builder.Services.AddScoped<GameService>();
+builder.Services.AddScoped<WordleHub>();
 
 // Identity Services
 builder.Services.AddIdentityCore<AppUser>(options => options.SignIn.RequireConfirmedAccount = false)
@@ -128,6 +131,10 @@ await IdentitySeed.SeedAsync(
 
 app.MapControllers();
 
+app.UseRouting();
+
+app.MapHub<WordleHub>("hub");
+
 app.Run();
 
 public partial class Program { }

Wordle.Api/Wordle.Api/Wordle.Api.csproj

@@ -8,14 +8,17 @@
   </PropertyGroup>
 
   <ItemGroup>
+    <PackageReference Include="Microsoft.AspNet.SignalR.Core" Version="2.4.3" />
     <PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="8.0.4" />
     <PackageReference Include="Microsoft.AspNetCore.Identity.EntityFrameworkCore" Version="8.0.4" />
+    <PackageReference Include="Microsoft.AspNetCore.SignalR.Common" Version="8.0.6" />
     <PackageReference Include="Microsoft.EntityFrameworkCore" Version="8.0.4" />
     <PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="8.0.4">
       <PrivateAssets>all</PrivateAssets>
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
     </PackageReference>
     <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="8.0.4" />
+    <PackageReference Include="SignalRSwaggerGen" Version="4.5.0" />
     <PackageReference Include="Swashbuckle.AspNetCore" Version="6.4.0" />
   </ItemGroup>
 

Wordle.Api/Wordle.Api/WordleHub.cs

@@ -0,0 +1,14 @@
+using Microsoft.AspNetCore.SignalR;
+using SignalRSwaggerGen.Attributes;
+using Wordle.Api.Models;
+
+namespace Wordle.Api;
+[SignalRHub]
+public class WordleHub : Hub
+{
+    [SignalRMethod]
+    public async void SendMessage(string message)
+    {
+        await Clients.All.SendAsync("ReceiveMessage", message);
+    } 
+}

wordle-web/components/Chat.vue

@@ -0,0 +1,47 @@
+<template>
+  <v-card height="92%" variant="tonal" :color="cardColor">
+    <v-card-text>
+      <p v-for="(message, i) of signalRService.messages.value" :key="i">
+        <v-avatar
+          icon="mdi-account"
+          :color="cardColor"
+          size="small"
+          class="mr-2"
+        />
+        <ChatMessage :message="message" />
+        <v-divider class="my-2" />
+      </p>
+    </v-card-text>
+  </v-card>
+  <v-text-field
+    class="mt-2"
+    label="Message"
+    @keyup.stop
+    @keyup.enter="sendMessage"
+    v-model="message"
+    @click:append-inner="sendMessage"
+    append-inner-icon="mdi-send"
+  />
+</template>
+
+<script setup lang="ts">
+import SignalRService from "~/scripts/signalRService";
+import { useTheme } from "vuetify";
+
+const message = ref<string>("");
+const signalRService = new SignalRService();
+
+const theme = useTheme();
+const cardColor = computed(() => {
+  return theme.global.name.value == "dark" ? "secondary" : "primary";
+});
+
+function parseWord(message: string) {
+  return message.split(" ")[1];
+}
+
+function sendMessage() {
+  signalRService.sendMessage(message.value);
+  message.value = "";
+}
+</script>

wordle-web/components/ChatMessage.vue

@@ -0,0 +1,44 @@
+<template>
+  <span v-for="(msg, i) in messageArray" :key="msg + i">
+    <span v-if="isWordToTry(msg)">
+        <v-btn @click="tryWord(msg)" variant="text" class="pa-1">
+            {{ msg }}
+        </v-btn>
+        {{ " " }}
+    </span>
+    <span v-else>
+        {{ msg + " " }}
+    </span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from 'vue';
+import type { Game } from '~/scripts/game';
+
+const props = defineProps<{
+  message: string;
+}>();
+
+const game: Game = inject("GAME")!;
+
+const messageArray = props.message.split(" ");
+
+function isWordToTry(messageFragment: string): boolean {
+  const pattern = /^'\w{5}'.*$/;
+  return pattern.test(messageFragment);
+}
+
+function tryWord(word: string) {
+  console.log(word);
+  const match = word.match(/^'(\w{5})'/);
+  if (match) {
+    const extractedWord = match[1];
+    for (const letter of extractedWord) {
+      game.addLetter(letter.toUpperCase());
+    }
+  }
+}
+
+</script>
+

wordle-web/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@mdi/font": "^7.4.47",
+    "@microsoft/signalr": "^8.0.0",
     "axios": "^1.6.8",
     "nuxt": "^3.11.1",
     "nuxt-storage": "^1.2.2",