feat: edit player page (#1)

src/database/models/player.model.ts

@@ -24,5 +24,5 @@ export interface PlayerModel {
   etf2lProfileId?: number
   cooldownLevel: number
   activeGame?: GameNumber
-  skill?: Record<Tf2ClassName, number>
+  skill?: Partial<Record<Tf2ClassName, number>>
 }

src/games/create.ts

@@ -70,7 +70,7 @@ async function queueSlotToPlayerSlot(queueSlot: QueueSlotModel): Promise<PlayerS
 
   const { skill: playerSkill } = await players.bySteamId(player)
   if (playerSkill && gameClass in playerSkill) {
-    skill = playerSkill[gameClass]
+    skill = playerSkill[gameClass]!
   }
 
   return { player, gameClass, skill }

src/html/components/admin-panel.tsx

@@ -0,0 +1,33 @@
+import type { Children } from '@kitajs/html'
+
+export function AdminPanel(props?: { children?: Children }) {
+  return <div class="container mx-auto grid grid-cols-6 gap-8">{props?.children}</div>
+}
+
+export function AdminPanelSidebar(props?: { children?: Children }) {
+  return <div class="flex flex-col gap-y-1">{props?.children}</div>
+}
+
+export function AdminPanelLink(props: { href: string; active?: boolean; children: Children }) {
+  return (
+    <a href={props.href} class={['admin-panel-link', props.active && 'active']}>
+      {props.children}
+    </a>
+  )
+}
+
+export function AdminPanelBody(props?: { children?: Children }) {
+  return <div class="col-span-5">{props?.children}</div>
+}
+
+export function AdminPanelHeader(props?: { children?: Children }) {
+  return <h1 class="text-[32px] text-abru-light-75 mb-6">{props?.children}</h1>
+}
+
+export function AdminPanelContent(props?: { children?: Children }) {
+  return <div class="bg-abru-dark-25 rounded-2xl p-8">{props?.children}</div>
+}
+
+export function AdminPanelGroup(props?: { children?: Children }) {
+  return <div class="bg-abru-light-5 rounded-lg">{props?.children}</div>
+}

src/html/components/icons/icon-ban.tsx

@@ -0,0 +1,10 @@
+import { makeIcon } from './make-icon'
+
+export const IconBan = makeIcon(
+  'ban',
+  <>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
+    <path d="M5.7 5.7l12.6 12.6" />
+  </>,
+)

src/html/components/icons/icon-chart-arrows-vertical.tsx

@@ -0,0 +1,15 @@
+import { makeIcon } from './make-icon'
+
+export const IconChartArrowsVertical = makeIcon(
+  'chart-arrows-vertical',
+  <>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M18 21v-14" />
+    <path d="M9 15l3 -3l3 3" />
+    <path d="M15 10l3 -3l3 3" />
+    <path d="M3 21l18 0" />
+    <path d="M12 21l0 -9" />
+    <path d="M3 6l3 -3l3 3" />
+    <path d="M6 21v-18" />
+  </>,
+)

src/html/components/icons/icon-edit.tsx

@@ -0,0 +1,11 @@
+import { makeIcon } from './make-icon'
+
+export const IconEdit = makeIcon(
+  'edit',
+  <>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" />
+    <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" />
+    <path d="M16 5l3 3" />
+  </>,
+)

src/html/components/icons/icon-user-scan.tsx

@@ -0,0 +1,14 @@
+import { makeIcon } from './make-icon'
+
+export const IconUserScan = makeIcon(
+  'user-scan',
+  <>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M10 9a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
+    <path d="M4 8v-2a2 2 0 0 1 2 -2h2" />
+    <path d="M4 16v2a2 2 0 0 0 2 2h2" />
+    <path d="M16 4h2a2 2 0 0 1 2 2v2" />
+    <path d="M16 20h2a2 2 0 0 0 2 -2v-2" />
+    <path d="M8 16a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2" />
+  </>,
+)

src/html/components/icons/index.ts

@@ -1,12 +1,15 @@
 export { IconAlignBoxBottomRight } from './icon-align-box-bottom-right'
+export { IconBan } from './icon-ban'
 export { IconBrandDiscord } from './icon-brand-discord'
+export { IconChartArrowsVertical } from './icon-chart-arrows-vertical'
 export { IconBrandSteam } from './icon-brand-steam'
 export { IconChartPie } from './icon-chart-pie'
 export { IconChevronLeft } from './icon-chevron-left'
 export { IconChevronRight } from './icon-chevron-right'
 export { IconCopy } from './icon-copy'
 export { IconCrown } from './icon-crown'
 export { IconDeviceDesktopAnalytics } from './icon-device-desktop-analytics'
+export { IconEdit } from './icon-edit'
 export { IconExclamationCircleFilled } from './icon-exclamation-circle-filled'
 export { IconEye } from './icon-eye'
 export { IconHeartFilled } from './icon-heart-filled'
@@ -22,4 +25,5 @@ export { IconReplaceFilled } from './icon-replace-filled'
 export { IconSettings } from './icon-settings'
 export { IconStars } from './icon-stars'
 export { IconUserCircle } from './icon-user-circle'
+export { IconUserScan } from './icon-user-scan'
 export { IconX } from './icon-x'

src/main.css

@@ -367,3 +367,71 @@ dialog::backdrop {
 .masked-overflow::-webkit-scrollbar-track {
   background-color: transparent;
 }
+
+.admin-panel-link {
+  display: flex;
+  flex-flow: flex nowrap;
+  align-items: center;
+  gap: 4px;
+  color: theme(colors.abru.light.75);
+  font-weight: 500;
+  font-size: 18px;
+  border-radius: 4px;
+  padding: 6px 12px;
+  position: relative;
+
+  &:hover {
+    background-color: theme(colors.abru.dark.25 / 20%);
+  }
+
+  &.active {
+    background-color: theme(colors.abru.dark.25);
+
+    &:before {
+      position: absolute;
+      left: 4px;
+      top: 4px;
+      content: '';
+      width: 4px;
+      height: calc(100% - 8px);
+      background-color: theme(colors.accent.DEFAULT);
+      border-radius: 2px;
+    }
+  }
+}
+
+.admin-panel-content {
+  background-color: theme(colors.abru.dark.25);
+  border-radius: 16px;
+  padding: 32px;
+
+  .group {
+    background-color: theme(colors.abru.light.5);
+    border-radius: 8px;
+    padding: 16px;
+    color: theme(colors.abru.light.75);
+    font-size: 18px;
+
+    input[type='text'],
+    input[type='number'] {
+      background-color: theme(colors.abru.dark.25);
+      color: theme(colors.white);
+      border-radius: 8px;
+      padding: 8px;
+      font-size: 16px;
+      font-weight: 500;
+    }
+
+    .input-group {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+
+      .label {
+        color: theme(colors.abru.light.50);
+        font-size: 16px;
+        font-weight: 500;
+      }
+    }
+  }
+}