AI tests

client/.eslintrc.cjs

@@ -12,6 +12,7 @@ module.exports = {
     'no-duplicate-imports': 'error',
 
     /* Maybe remove in future */
+    'no-shadow': ['warn'],
     '@typescript-eslint/no-explicit-any': 0,
     '@typescript-eslint/ban-ts-comment': 0,
     '@typescript-eslint/no-extra-semi': 0,

client/src/components/GamesTable.vue

@@ -94,6 +94,7 @@
             :clickable="false"
             :nameFirst="false"
             :username="player"
+            :bot="slotProps.data.bots[slotProps.data.players.indexOf(player)] != null"
           />
         </div>
       </template>

client/src/components/PlatformStats/BotStats.vue

@@ -0,0 +1,58 @@
+<template>
+  <Chart
+    ref="botWinshareChart"
+    type="pie"
+    :data="botWinshareChartData"
+    :height="300"
+    :options="chartOptions"
+  />
+</template>
+
+<script setup lang="ts">
+import type { BotDataset } from '@/../../server/src/sharedTypes/typesPlatformStatistic'
+
+import { ref, watch } from 'vue'
+import Chart from 'primevue/chart'
+import { getGraphColors } from '@/services/graphColors'
+import { i18n } from '@/services/i18n'
+
+const botWinshareChart = ref<any | null>(null)
+const props = defineProps<{ data?: BotDataset }>()
+watch(
+  () => props.data,
+  () => {
+    updateUserAgentChart()
+  },
+  { deep: true }
+)
+
+function updateUserAgentChart() {
+  if (props.data === undefined) {
+    return
+  }
+
+  botWinshareChartData.value.labels = [i18n.global.t('Stats.BotWinshare.lost'), i18n.global.t('Stats.BotWinshare.won')]
+  botWinshareChartData.value.datasets = [
+    {
+      data: [props.data.total - props.data.won, props.data.won],
+      backgroundColor: getGraphColors({ alpha: 0.8 }),
+    },
+  ]
+  botWinshareChart.value?.refresh()
+}
+
+const botWinshareChartData = ref({
+  labels: [] as any[],
+  datasets: [] as any[],
+})
+
+const chartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      reverse: true,
+    },
+  },
+}
+</script>

client/src/components/PlatformStats/PlatformStats.vue

@@ -28,6 +28,10 @@
   <div class="chart-container">
     <UserAgentStats :data="data?.userAgentDataset" />
   </div>
+  <h1>{{ $t('Stats.headerBotWinshare') }}</h1>
+  <div class="chart-container">
+    <BotStats :data="data?.botDataset" />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -37,6 +41,7 @@ import LocaleStats from './LocaleStats.vue'
 import StatsByHour from './StatsByHour.vue'
 import StatsByDay from './StatsByDay.vue'
 import UserAgentStats from './UserAgentStats.vue'
+import BotStats from './BotStats.vue'
 
 import type { PlatformStats } from '@/../../server/src/sharedTypes/typesPlatformStatistic'
 import { ref } from 'vue'

client/src/components/PlayerWithPicture.vue

@@ -11,12 +11,19 @@
       {{ username }}
     </div>
     <ProfilePicture
-      v-if="pictureVisible === true"
+      v-if="pictureVisible === true && !bot"
       :username="username !== '' ? username : $t('Chat.deletedPlayer')"
       :showCrown="showCrown"
       :online="online"
       class="autocompleteImage"
     />
+    <div
+      v-if="pictureVisible === true && bot"
+      class="autocompleteImage"
+      style="line-height: 30px; padding-left: 4px"
+    >
+      🤖
+    </div>
   </div>
 </template>
 
@@ -34,6 +41,7 @@ const props = withDefaults(
     hideIfEmpty?: boolean
     showCrown?: boolean
     online?: boolean
+    bot?: boolean
   }>(),
   {
     nameFirst: true,
@@ -43,6 +51,7 @@ const props = withDefaults(
     hideIfEmpty: true,
     showCrown: true,
     online: undefined,
+    bot: false,
   }
 )
 

client/src/components/RunningGamesWidget.vue

@@ -21,12 +21,13 @@
         <template #body="slotProps">
           <div class="playerContainer">
             <PlayerWithPicture
-              v-for="player in slotProps.data.teams[teamIndex]?.filter((p: string | null) => p != null)"
-              :key="'Team-' + teamIndex + '-Player-' + player"
+              v-for="(_, playerIndex) in slotProps.data.teams[teamIndex]"
+              :key="`Team-${teamIndex}-Player-${playerIndex}`"
               class="player"
               :clickable="false"
               :nameFirst="false"
-              :username="player"
+              :username="slotProps.data.teams[teamIndex][playerIndex] ?? ''"
+              :bot="slotProps.data.bots[teamIndex][playerIndex] ?? false"
             />
           </div>
         </template>

client/src/components/WaitingGame.vue

@@ -62,35 +62,64 @@
           class="playerSlot"
         >
           <div
-            v-if="game.players[playerIndex(Number(teamIndex), index)] != null"
+            v-if="game.players[playerIndex(Number(teamIndex), index)] != null || game.bots[playerIndex(Number(teamIndex), index)] != null"
             class="playerContainer"
           >
             <div
-              v-if="active && game.players.slice(0, game.nPlayers).every((p) => p != null)"
+              v-if="
+                active &&
+                game.players
+                  .slice(0, game.nPlayers)
+                  .filter((_, i) => game.bots[i] == null)
+                  .every((p) => p != null)
+              "
               class="readyIcon"
             >
               <i
-                v-if="game.ready[playerIndex(Number(teamIndex), index)]"
+                v-if="
+                  (game.players[playerIndex(Number(teamIndex), index)] != null && game.ready[playerIndex(Number(teamIndex), index)]) ||
+                  game.bots[playerIndex(Number(teamIndex), index)] != null
+                "
                 class="pi pi-check"
                 style="color: green"
               />
               <i
-                v-if="!game.ready[playerIndex(Number(teamIndex), index)]"
+                v-if="game.players[playerIndex(Number(teamIndex), index)] != null && !game.ready[playerIndex(Number(teamIndex), index)]"
                 class="pi pi-spin pi-spinner"
                 style="color: red"
               />
             </div>
             <BallsImage
               v-if="activeAndNotNull(playerIndex(Number(teamIndex), index))"
-              :class="['playerBall', game.players[playerIndex(Number(teamIndex), index)] === username ? 'clickable' : '']"
+              :class="[
+                'playerBall',
+                game.players[playerIndex(Number(teamIndex), index)] === username || (game.bots[playerIndex(Number(teamIndex), index)] != null && game.admin === username)
+                  ? 'clickable'
+                  : '',
+              ]"
               :color="game.balls[playerIndex(Number(teamIndex), index)]"
               @click="toggle($event, playerIndex(Number(teamIndex), index))"
             />
             <PlayerWithPicture
-              :username="game.players[playerIndex(Number(teamIndex), index)]"
+              :username="game.players[playerIndex(Number(teamIndex), index)] ?? $t('Waiting.bot')"
               :hideIfEmpty="true"
               :nameFirst="false"
               :clickable="active"
+              :bot="game.bots[playerIndex(Number(teamIndex), index)] != null"
+            />
+            <div
+              v-if="game.adminID === game.playerIDs[playerIndex(Number(teamIndex), index)]"
+              style="margin-left: 5px"
+            >
+              {{ `(${$t('Waiting.adminBadge')})` }}
+            </div>
+          </div>
+          <div v-else>
+            <Button
+              v-if="active && game.admin === username"
+              severity="secondary"
+              :label="`+ ${$t('Waiting.bot')}`"
+              @click="() => emit('add-bot', { gameID: game.id, botID: 3, playerIndex: playerIndex(Number(teamIndex), index) })"
             />
           </div>
           <div class="playerControls">
@@ -102,20 +131,20 @@
                 icon="pi pi-angle-up"
                 class="p-button-rounded p-button-secondary p-button-sm p-button-text buttonUpDown"
                 :disabled="playerIndex(Number(teamIndex), index) <= 0"
-                @click="movePlayer(game.id, game.players[playerIndex(Number(teamIndex), index)], -1)"
+                @click="movePlayerOrBot(game.id, playerIndex(Number(teamIndex), index), -1)"
               />
               <Button
                 icon="pi pi-angle-down"
                 class="p-button-rounded p-button-secondary p-button-sm p-button-text buttonUpDown"
                 :disabled="playerIndex(Number(teamIndex), index) >= game.nPlayers - 1"
-                @click="movePlayer(game.id, game.players[playerIndex(Number(teamIndex), index)], 1)"
+                @click="movePlayerOrBot(game.id, playerIndex(Number(teamIndex), index), 1)"
               />
             </div>
             <Button
               v-if="activeAndSelfOrAdmin(playerIndex(Number(teamIndex), index))"
               icon="pi pi-times"
               class="p-button-rounded p-button-danger p-button-text"
-              @click="removePlayer(game.players[playerIndex(Number(teamIndex), index)])"
+              @click="removePlayerOrBot(playerIndex(Number(teamIndex), index))"
             />
           </div>
         </div>
@@ -144,7 +173,7 @@
         label="Bereit zum Starten?"
         icon="pi pi-caret-right"
         class="p-button-success"
-        :disabled="game.players.slice(0, game.nPlayers).some((p) => p === null) || game.ready.find((_, index) => game.players[index] === username)"
+        :disabled="game.players.slice(0, game.nPlayers).some((p, i) => p === null && game.bots[i] == null) || game.ready.find((_, index) => game.players[index] === username)"
         @click="setPlayerReady()"
       />
     </div>
@@ -171,10 +200,13 @@
 const props = withDefaults(defineProps<{ game: WaitingGame; active?: boolean }>(), { active: false })
 
 const emit = defineEmits<{
+  'add-bot': [data: { gameID: number; botID: number; playerIndex: number }]
   'move-player': [data: { gameID: number; username: string; steps: number }]
+  'move-bot': [data: { gameID: number; playerIndex: number; steps: number }]
   'remove-player': [username: string]
+  'remove-bot': [data: { gameID: number; playerIndex: number }]
   'ready-player': [gameID: number]
-  'color-player': [username: string, gameID: number, color: string]
+  'color-player': [username: string, gameID: number, color: string, botIndex: number | null]
 }>()
 
 const opRef = ref<OverlayPanel | null>(null)
@@ -188,42 +220,58 @@
 }
 
 const activeAndNotNull = (index: number) => {
-  return props.game.players[index] != null && props.active
+  return (props.game.players[index] != null || props.game.bots[index] != null) && props.active
 }
 
 const activeAndSelf = (index: number) => {
   return props.game.players[index] != null && props.active && props.game.players[index] === username.value
 }
 
 const activeAndSelfOrAdmin = (index: number) => {
-  return props.game.players[index] != null && props.active && (props.game.players[index] === username.value || props.game.admin === username.value)
+  return (
+    props.active &&
+    ((props.game.players[index] != null && (props.game.players[index] === username.value || props.game.admin === username.value)) ||
+      (props.game.bots[index] != null && props.game.admin === username.value))
+  )
 }
 
-const movePlayer = (gameID: number, username: string, steps: number) => {
-  emit('move-player', {
-    gameID: gameID,
-    username: username,
-    steps: steps,
-  })
+const movePlayerOrBot = (gameID: number, index: number, steps: number) => {
+  if (props.game.players[index] != null) {
+    emit('move-player', {
+      gameID,
+      username: props.game.players[index],
+      steps: steps,
+    })
+  }
+  if (props.game.bots[index] != null) {
+    emit('move-bot', { gameID, playerIndex: index, steps: steps })
+  }
 }
 
 const removePlayer = (username: string) => {
   emit('remove-player', username)
 }
 
+const removePlayerOrBot = (index: number) => {
+  if (props.game.players[index] != null) emit('remove-player', props.game.players[index])
+  if (props.game.bots[index] != null) emit('remove-bot', { gameID: props.game.id, playerIndex: index })
+}
+
 const setPlayerReady = () => {
   emit('ready-player', props.game.id)
 }
 
+let playerIndexForColorChange: number | null = null
 const toggle = (event: Event, index: number) => {
-  if (activeAndSelf(index)) {
+  playerIndexForColorChange = index
+  if (activeAndSelf(index) || (props.game.bots[index] != null && props.game.admin === username.value)) {
     opRef.value?.toggle(event)
   }
 }
 
 const switchColor = (color: string) => {
   opRef.value?.hide()
-  emit('color-player', username.value ?? '', props.game.id, color)
+  emit('color-player', username.value ?? '', props.game.id, color, playerIndexForColorChange)
 }
 </script>
 

client/src/components/WaitingOverview.vue

@@ -161,8 +161,11 @@
       class="activeGame"
       :game="waitingStore.ownGame"
       :active="true"
+      @add-bot="addBot"
       @move-player="movePlayer"
+      @move-bot="moveBot"
       @remove-player="removePlayer"
+      @remove-bot="removeBot"
       @ready-player="setPlayerReady"
       @color-player="setPlayerColor"
     />
@@ -271,28 +274,41 @@ function joinGame(game: WaitingGameType) {
   socket.emitWithAck(5000, 'waiting:joinGame', game.id)
 }
 
+function addBot(data: { gameID: number; botID: number; playerIndex: number }) {
+  socket.emitWithAck(5000, 'waiting:addBot', data.gameID, data.botID, data.playerIndex)
+}
+
 function movePlayer(data: { gameID: number; username: string; steps: number }) {
   socket.emitWithAck(5000, 'waiting:movePlayer', data)
 }
 
+function moveBot(data: { gameID: number; playerIndex: number; steps: number }) {
+  socket.emitWithAck(5000, 'waiting:moveBot', data)
+}
+
 function removePlayer(usernameToRemove: string) {
   const confirmText = i18n.global.t(usernameToRemove === username.value ? 'Waiting.removePlayerConfirmSelf' : 'Waiting.removePlayerConfirmOther')
   if (confirm(confirmText)) {
     socket.emitWithAck(5000, 'waiting:removePlayer', usernameToRemove)
   }
 }
 
+function removeBot(data: { gameID: number; playerIndex: number }) {
+  socket.emitWithAck(5000, 'waiting:removeBot', data.gameID, data.playerIndex)
+}
+
 function setPlayerReady(gameID: number) {
   socket.emitWithAck(5000, 'waiting:readyPlayer', {
     gameID: gameID,
   })
 }
 
-function setPlayerColor(usernameToChange: string, gameID: number, color: string) {
+function setPlayerColor(usernameToChange: string, gameID: number, color: string, botIndex: number | null) {
   socket.emitWithAck(5000, 'waiting:switchColor', {
-    gameID: gameID,
+    gameID,
     username: usernameToChange,
-    color: color,
+    color,
+    botIndex,
   })
 }
 </script>