Improve UI appearance of Wars

backend/rorapp/functions/war_helper.py

@@ -2,7 +2,6 @@
 import json
 from typing import List
 from django.conf import settings
-from rorapp.functions.matching_war_helper import update_matching_wars
 from rorapp.models import ActionLog, Faction, Game, Step, War
 from rorapp.functions.websocket_message_helper import create_websocket_message
 from rorapp.serializers import (
@@ -125,6 +124,4 @@ def create_new_war(game_id: int, initiating_faction_id: int, name: str) -> List[
 
             first = False
 
-    messages_to_send.extend(update_matching_wars(game_id))
-
     return messages_to_send

backend/rorapp/migrations/0051_remove_war_matching_wars.py

@@ -0,0 +1,17 @@
+# Generated by Django 4.2.3 on 2024-02-24 14:20
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('rorapp', '0050_enemyleader'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='war',
+            name='matching_wars',
+        ),
+    ]

backend/rorapp/models/war.py

@@ -23,4 +23,3 @@ class War(models.Model):
     status = models.CharField(max_length=12, choices=STATUS_CHOICES)
     undefeated_navy = models.BooleanField()
     famine = models.BooleanField()
-    matching_wars = models.ManyToManyField("self", blank=True)

backend/rorapp/serializers/war.py

@@ -20,5 +20,4 @@ class Meta:
             "status",
             "undefeated_navy",
             "famine",
-            "matching_wars"
         )

frontend/classes/War.ts

@@ -12,7 +12,6 @@ interface IWar {
   status: string
   undefeated_navy: boolean
   famine: boolean
-  matching_wars: any
 }
 
 class War {
@@ -27,9 +26,8 @@ class War {
   standoffNumbers: number[]
   spoils: number
   status: string
-  undefeated_navy: boolean
+  undefeatedNavy: boolean
   famine: boolean
-  matchingWars: any
 
   constructor(data: IWar) {
     this.id = data.id
@@ -43,9 +41,8 @@ class War {
     this.standoffNumbers = data.standoff_numbers
     this.spoils = data.spoils
     this.status = data.status
-    this.undefeated_navy = data.undefeated_navy
+    this.undefeatedNavy = data.undefeated_navy
     this.famine = data.famine
-    this.matchingWars = data.matching_wars
   }
 
   getName() {
@@ -59,9 +56,6 @@ class War {
     if (number === 3) return "rd"
     return "th"
   }
-
-  getActualLandStrength = () => this.landStrength * (1 + this.matchingWars.length)
-  getActualNavalStrength = () => this.navalStrength * (1 + this.matchingWars.length)
 }
 
 export default War

frontend/components/EnemyLeaderPortrait.tsx

@@ -0,0 +1,102 @@
+import EnemyLeader from "@/classes/EnemyLeader"
+import Image from "next/image"
+import { useAuthContext } from "@/contexts/AuthContext"
+
+import AntiochusIII from "@/images/enemyLeaders/antiochusIII.png"
+import Hamilcar from "@/images/enemyLeaders/hamilcar.png"
+import Hannibal from "@/images/enemyLeaders/hannibal.png"
+import PhilipV from "@/images/enemyLeaders/philipV.png"
+import { Tooltip } from "@mui/material"
+
+interface EnemyLeaderPortraitProps {
+  enemyLeader: EnemyLeader
+  size: number
+  nameTooltip?: boolean
+}
+
+const EnemyLeaderPortrait = ({
+  enemyLeader,
+  size,
+  nameTooltip,
+}: EnemyLeaderPortraitProps) => {
+  const { darkMode } = useAuthContext()
+
+  // Get number of pixels by which to increase image size, beyond container size
+  const getZoom = () => {
+    let zoom = 0
+    if (size < 80) {
+      zoom = 20
+    } else if (size < 200) {
+      zoom = (200 - size) / 4 // linear relationship
+    }
+    return zoom
+  }
+
+  // Get number of pixels by which to offset image downwards when zooming in, to focus on the face
+  const getOffset = () => {
+    let offset = 0
+    if (size < 80) {
+      offset = 10
+    } else if (size < 200) {
+      offset = (200 - size) / 12 // linear relationship
+    }
+    return offset
+  }
+
+  const getImageSource = () => {
+    switch (enemyLeader.name) {
+      case "Antiochus III":
+        return AntiochusIII
+      case "Hamilcar":
+        return Hamilcar
+      case "Hannibal":
+        return Hannibal
+      case "Philip V":
+        return PhilipV
+    }
+    return AntiochusIII // fallback
+  }
+
+  const getPortrait = () => (
+    <div>
+      <figure
+        style={{ height: size, width: size }}
+        className="ms-0 me-0 m-0 p-0.5 box-border relative flex justify-center items-center bg-stone-700 dark:bg-black select-none rounded shadow"
+      >
+        <div
+          className="absolute overflow-hidden left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] border-2 border-solid border-red-600 dark:border-red-700 rounded-[2px]"
+          style={{
+            background: darkMode
+              ? "radial-gradient(hsl(0 25% 70%), hsl(0 25% 35%))"
+              : "radial-gradient(hsl(0 100% 97%), hsl(0 30% 66%))",
+            height: size - 8,
+            width: size - 8,
+          }}
+        >
+          <Image
+            width={size + getZoom()}
+            height={size + getZoom()}
+            src={getImageSource()}
+            alt="Portrait of enemy leader"
+            placeholder="blur"
+            unoptimized
+            className="absolute left-1/2 top-1/2"
+            style={{ transform: `translate(-50%, -${50 - getOffset()}%)` }}
+          />
+        </div>
+      </figure>
+    </div>
+  )
+
+  if (nameTooltip) {
+    return (
+      <Tooltip title={enemyLeader.name} enterDelay={500} arrow>
+        {getPortrait()}
+      </Tooltip>
+    )
+  } else {
+    return getPortrait()
+  }
+}
+
+export default EnemyLeaderPortrait

frontend/components/GamePage.tsx

@@ -640,7 +640,7 @@ const GamePage = (props: GamePageProps) => {
             <div className="xl:overflow-auto xl:flex-1 xl:max-w-[540px]">
               <DetailSection />
             </div>
-            <div className="xl:flex-1 xl:grow-[2] bg-stone-50 dark:bg-stone-700 rounded shadow">
+            <div className="xl:flex-1 xl:grow-[2] bg-stone-50 dark:bg-stone-700 rounded shadow overflow-auto">
               <section className="flex flex-col h-[75vh] xl:h-full">
                 <div className="border-0 border-b border-solid border-stone-200 dark:border-stone-750">
                   <Tabs

frontend/components/SenatorListItem.tsx

@@ -107,7 +107,7 @@ const SenatorListItem = ({ senator, ...props }: SenatorListItemProps) => {
   return (
     <div
       key={senator.id}
-      className="flex-1 h-[98px] mt-2 mx-2 mb-0 box-border bg-stone-100 dark:bg-stone-700 rounded flex gap-2 border border-solid border-stone-300 dark:border-stone-750"
+      className="flex-1 h-[98px] mt-2 mx-2 mb-0 box-border bg-stone-100 dark:bg-stone-700 rounded flex gap-2 border border-solid border-stone-300 dark:border-stone-800"
       style={
         props.radioSelected ||
         (selectedDetail?.type === "Senator" &&