From: xangelo <me@xangelo.ca>
Date: Fri, 6 Dec 2024 20:56:25 +0000 (-0500)
Subject: feat(monsters): add monster icons for fights
X-Git-Tag: v0.4.4~6
X-Git-Url: https://git.xangelo.ca/?a=commitdiff_plain;h=41cbb16e1c9427b137c508d2471cf86ac79e842d;p=risinglegends.git

feat(monsters): add monster icons for fights
---

diff --git a/migrations/20241206170712_monster_images.ts b/migrations/20241206170712_monster_images.ts
new file mode 100644
index 0000000..84ee4a0
--- /dev/null
+++ b/migrations/20241206170712_monster_images.ts
@@ -0,0 +1,16 @@
+import { Knex } from "knex";
+
+
+export async function up(knex: Knex): Promise<void> {
+    return knex.schema.alterTable('monsters', (table) => {
+        table.string('icon').nullable();
+    });
+}
+
+
+export async function down(knex: Knex): Promise<void> {
+    return knex.schema.alterTable('monsters', (table) => {
+        table.dropColumn('icon');
+    });
+}
+
diff --git a/public/assets/css/combat.css b/public/assets/css/combat.css
index 2c0b427..2fb9e20 100644
--- a/public/assets/css/combat.css
+++ b/public/assets/css/combat.css
@@ -31,4 +31,13 @@
 
 #fight-results {
     margin: 1rem 0;
+}
+
+#fight-container {
+    .icon-container {
+        .icon {
+            width: 64px;
+            height: 64px;
+        }
+    }
 }
\ No newline at end of file
diff --git a/seeds/monsters.ts b/seeds/monsters.ts
index a8dafe8..94aa0b1 100644
--- a/seeds/monsters.ts
+++ b/seeds/monsters.ts
@@ -63,7 +63,8 @@ export async function createMonsters(): Promise<void> {
           defence: Math.floor(parseInt(r.fields.Defence.toString() || '0')),
           location_id: r.fields.location_id[0],
           faction_id: factionId,
-          time_period: r.fields.time_period ? r.fields.time_period : 'any'
+          time_period: r.fields.time_period ? r.fields.time_period : 'any',
+          icon: r.fields.icon ? r.fields.icon : null
         }
       })).onConflict('id').merge();
 
diff --git a/src/server/monster.ts b/src/server/monster.ts
index 3e7e813..16c12d5 100644
--- a/src/server/monster.ts
+++ b/src/server/monster.ts
@@ -37,7 +37,7 @@ export async function loadMonster(id: number): Promise<Monster> {
 }
 
 export async function loadMonsterFromFight(player_id: string): Promise<Fight> {
-  return await db.first().select('*').from<Fight>('fight').where({
+  return await db.first().select(['fight.*', 'monsters.icon']).from<Fight>('fight').join('monsters', 'fight.ref_id', '=', 'monsters.id').where({
     player_id,
   });
 }
@@ -46,7 +46,7 @@ export async function loadMonsterWithFaction(player_id: string): Promise<Monster
   const res = await db.raw(`
                       select 
                         f.*, fa.id as faction_id, fa.name as faction_name,
-                        m."minLevel", m."maxLevel"
+                        m."minLevel", m."maxLevel", m.icon,
                       from fight f
                       join monsters m on f.ref_id = m.id
                       left outer join factions fa on m.faction_id = fa.id
@@ -87,7 +87,7 @@ export async function createFight(playerId: string, monster: Monster, fightTrigg
     variant = sample(MonsterVariants);
   }
 
-  const monsterData: Omit<Fight, 'id'> = {
+  const monsterData: Omit<Fight, 'id' | 'icon'> = {
     player_id: playerId,
     variant: variant.name,
     name: variant.display.replace("{{name}}", monster.name),
@@ -108,7 +108,11 @@ export async function createFight(playerId: string, monster: Monster, fightTrigg
   const res = await db('fight').insert(monsterData)
                     .returning<Fight[]>('*');
 
-  return res.pop();
+  const fight = res.pop();
+
+  fight.icon = monster.icon;
+
+  return fight;
 }
 
 export async function getMonsterLocation(monsterId: number): Promise<LocationWithCity> {
diff --git a/src/server/views/fight.ts b/src/server/views/fight.ts
index b0d9711..1207e87 100644
--- a/src/server/views/fight.ts
+++ b/src/server/views/fight.ts
@@ -76,14 +76,23 @@ function AttackButton(blockTime?: number): string {
   }
 }
 
+function placeholderMonsterIcon(icon?: string): string {
+  if(icon) {
+    return `<img class="icon" src="/assets/img/icons/monsters/${icon}">`;
+  }
+  else {
+    return `<img class="icon" src="https://via.placeholder.com/64x64">`;
+  }
+}
+
 export function renderFight(monster: Fight, results: string = '', displayFightActions: boolean = true, blockTime: number = 0) {
   const hpPercent = Math.floor((monster.hp / monster.maxHp) * 100);
 
   let html = `
   <div id="fight-container">
     <div id="defender-info">
-      <div class="avatar-container">
-        <img id="avatar" src="https://via.placeholder.com/64x64">
+      <div class="icon-container">
+        ${placeholderMonsterIcon(monster.icon)}
       </div>
       <div id="defender-stat-bars">
         <div class="monster-identifier ${monster.variant}"><span id="defender-name">${monster.name}</span>, level ${monster.level}</div>
diff --git a/src/shared/monsters.ts b/src/shared/monsters.ts
index 203d6e2..423d78a 100644
--- a/src/shared/monsters.ts
+++ b/src/shared/monsters.ts
@@ -17,6 +17,7 @@ export type Monster = {
   location_id: number;
   faction_id: number;
   time_period: TimePeriod;
+  icon: string;
 }
 
 export type MonsterForList = {