Improve the warfare UI

backend/rorapp/admin/war.py

@@ -11,7 +11,7 @@ class WarAdmin(admin.ModelAdmin):
         "index",
         "game",
         "land_strength",
-        "naval_support",
+        "fleet_support",
         "naval_strength",
         "disaster_numbers",
         "standoff_numbers",

backend/rorapp/functions/game_starter.py

@@ -324,7 +324,7 @@ def create_first_punic_war(game: Game, wars_dict: dict) -> None:
         index=data["index"],
         game=game,
         land_strength=data["land_strength"],
-        naval_support=data["naval_support"],
+        fleet_support=data["fleet_support"],
         naval_strength=data["naval_strength"],
         disaster_numbers=data["disaster_numbers"],
         standoff_numbers=data["standoff_numbers"],

backend/rorapp/migrations/0045_war.py

@@ -17,7 +17,7 @@ def create_first_punic_war(apps, schema_editor):
                 index=1,
                 game=game,
                 land_strength=10,
-                naval_support=5,
+                fleet_support=5,
                 naval_strength=10,
                 disaster_numbers=[13],
                 standoff_numbers=[11, 14],
@@ -48,7 +48,7 @@ def create_first_punic_war(apps, schema_editor):
                 ("name", models.CharField(max_length=10)),
                 ("index", models.IntegerField()),
                 ("land_strength", models.IntegerField()),
-                ("naval_support", models.IntegerField()),
+                ("fleet_support", models.IntegerField()),
                 ("naval_strength", models.IntegerField()),
                 ("disaster_numbers", models.JSONField()),
                 ("standoff_numbers", models.JSONField()),

backend/rorapp/models/war.py

@@ -8,7 +8,7 @@ class War(models.Model):
     index = models.IntegerField()
     game = models.ForeignKey(Game, on_delete=models.CASCADE)
     land_strength = models.IntegerField()
-    naval_support = models.IntegerField()
+    fleet_support = models.IntegerField()
     naval_strength = models.IntegerField()
     disaster_numbers = models.JSONField()
     standoff_numbers = models.JSONField()

backend/rorapp/presets/war.json

@@ -3,7 +3,7 @@
     "name": "Punic",
     "index": 1,
     "land_strength": 10,
-    "naval_support": 5,
+    "fleet_support": 5,
     "naval_strength": 10,
     "disaster_numbers": [13],
     "standoff_numbers": [11, 14],
@@ -15,7 +15,7 @@
     "name": "Punic",
     "index": 2,
     "land_strength": 15,
-    "naval_support": 5,
+    "fleet_support": 5,
     "naval_strength": 0,
     "disaster_numbers": [10],
     "standoff_numbers": [11, 15],
@@ -27,7 +27,7 @@
     "name": "Illyrian",
     "index": 1,
     "land_strength": 5,
-    "naval_support": 3,
+    "fleet_support": 3,
     "naval_strength": 0,
     "disaster_numbers": [5],
     "standoff_numbers": [17],
@@ -39,7 +39,7 @@
     "name": "Illyrian",
     "index": 2,
     "land_strength": 4,
-    "naval_support": 2,
+    "fleet_support": 2,
     "naval_strength": 0,
     "disaster_numbers": [5],
     "standoff_numbers": [17],
@@ -51,7 +51,7 @@
     "name": "Gallic",
     "index": 1,
     "land_strength": 10,
-    "naval_support": 0,
+    "fleet_support": 0,
     "naval_strength": 0,
     "disaster_numbers": [13],
     "standoff_numbers": [15],
@@ -63,7 +63,7 @@
     "name": "Macedonian",
     "index": 1,
     "land_strength": 12,
-    "naval_support": 10,
+    "fleet_support": 10,
     "naval_strength": 0,
     "disaster_numbers": [12],
     "standoff_numbers": [11, 18],
@@ -75,7 +75,7 @@
     "name": "Macedonian",
     "index": 2,
     "land_strength": 10,
-    "naval_support": 5,
+    "fleet_support": 5,
     "naval_strength": 0,
     "disaster_numbers": [13],
     "standoff_numbers": [14],
@@ -87,7 +87,7 @@
     "name": "Syrian",
     "index": 1,
     "land_strength": 6,
-    "naval_support": 2,
+    "fleet_support": 2,
     "naval_strength": 0,
     "disaster_numbers": [16],
     "standoff_numbers": [15],

backend/rorapp/serializers/war.py

@@ -7,11 +7,12 @@ class WarSerializer(serializers.ModelSerializer):
     class Meta:
         model = War
         fields = (
+            "id",
             "name",
             "index",
             "game",
             "land_strength",
-            "naval_support",
+            "fleet_support",
             "naval_strength",
             "disaster_numbers",
             "standoff_numbers",

frontend/classes/War.ts

@@ -4,7 +4,7 @@ interface IWar {
   index: number
   game: number
   land_strength: number
-  naval_support: number
+  fleet_support: number
   naval_strength: number
   disaster_numbers: any
   standoff_numbers: any
@@ -19,11 +19,11 @@ class War {
   name: string
   index: number
   game: number
-  land_strength: number
-  naval_support: number
-  naval_strength: number
-  disaster_numbers: number[]
-  standoff_numbers: number[]
+  landStrength: number
+  fleetSupport: number
+  navalStrength: number
+  disasterNumbers: number[]
+  standoffNumbers: number[]
   spoils: number
   status: string
   naval_defeated: boolean
@@ -34,11 +34,11 @@ class War {
     this.name = data.name
     this.index = data.index
     this.game = data.game
-    this.land_strength = data.land_strength
-    this.naval_support = data.naval_support
-    this.naval_strength = data.naval_strength
-    this.disaster_numbers = data.disaster_numbers
-    this.standoff_numbers = data.standoff_numbers
+    this.landStrength = data.land_strength
+    this.fleetSupport = data.fleet_support
+    this.navalStrength = data.naval_strength
+    this.disasterNumbers = data.disaster_numbers
+    this.standoffNumbers = data.standoff_numbers
     this.spoils = data.spoils
     this.status = data.status
     this.naval_defeated = data.naval_defeated

frontend/components/SenatorListItem.tsx

@@ -62,7 +62,13 @@ const SenatorListItem = ({ senator, ...props }: SenatorListItemProps) => {
         skillsJSON.colors.number[item.name as FixedAttribute]
       }`
     } else {
-      const attributeBgColor = darkMode ? (index % 2 == 0 ? "#57534e" : "#78716c") : (index % 2 == 0 ? "#e7e5e4" : "white")
+      const attributeBgColor = darkMode
+        ? index % 2 == 0
+          ? "#57534e"
+          : "#78716c"
+        : index % 2 == 0
+        ? "#e7e5e4"
+        : "white"
       style.backgroundColor = attributeBgColor
       style.boxShadow = `0px 0px 2px 2px ${attributeBgColor}`
     }

frontend/components/WarPortrait.tsx

@@ -0,0 +1,37 @@
+import Image from "next/image"
+import Punic1 from "@/images/wars/punic1.png"
+import MilitaryIcon from "@/images/icons/military.svg"
+import War from "@/classes/War"
+
+interface WarPortraitProps {
+  war: War
+}
+
+const WarPortrait = ({ war }: WarPortraitProps) => {
+  return (
+    <div>
+      <div className="p-0.5 bg-black rounded">
+        <div className="relative p-0.5 bg-red-600 dark:bg-red-800 flex">
+          <div className="absolute rounded-tl bg-black/75 h-[36px] w-[36px] flex justify-center items-center">
+            <Image src={MilitaryIcon} alt="War Icon" height={30} width={30} />
+          </div>
+          <div className="absolute right-0.5 bottom-0.5 h-[36px] w-[36px] flex justify-center items-center">
+            <div className="h-[26px] w-[26px] bg-black/75 rounded-full flex justify-center items-center">
+              <div className="h-[16px] w-[16px] bg-green-500 rounded-full"></div>
+            </div>
+          </div>
+          <Image
+            src={Punic1}
+            alt={`Portrait of the ${war.getName()}`}
+            height={120}
+            width={120}
+            placeholder="blur"
+            unoptimized
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default WarPortrait

frontend/components/WarfareTab.tsx

@@ -1,17 +1,59 @@
 import { useGameContext } from "@/contexts/GameContext"
+import WarPortrait from "@/components/WarPortrait"
 import { capitalize } from "@mui/material/utils"
+import getDiceRollProbability from "@/functions/probability"
 
 const WarfareTab = () => {
   const { wars } = useGameContext()
 
   return (
     <div className="m-4">
-      <h2>Wars</h2>
-      <ul>
+      <h3 className="mb-4">Wars</h3>
+      <ul className="flex flex-col p-0">
         {wars.asArray.map((war) => (
-          <li key={war.id}>
-            <div>
-              <p>{war.getName()} ({capitalize(war.status)})</p>
+          <li key={war.id} className="list-none flex">
+            <div className="flex gap-4 p-2 rounded border border-solid border-stone-300 dark:border-stone-750 bg-stone-100 dark:bg-stone-600">
+              <WarPortrait war={war} />
+              <div className="flex flex-col">
+                <div className="flex items-baseline justify-between">
+                  <h4 className="text-2xl">{war.getName()}</h4>
+                  <p className="pr-2">
+                    <b>{capitalize(war.status)}</b>
+                  </p>
+                </div>
+                <div className="h-full flex gap-12 mt-2">
+                  <div className="h-full flex flex-col justify-between">
+                    <div>
+                      <p className="text-sm">Strength</p>
+                      <p>
+                        <b>{war.landStrength} Land</b>,{" "}
+                        <b>{war.landStrength} Naval</b>{" "}
+                      </p>
+                    </div>
+                    <div>
+                      <p className="text-sm">Spoils</p>
+                      <p>
+                        <b>{war.spoils} Talents</b>
+                      </p>
+                    </div>
+                  </div>
+                  <div className="h-full flex items-end">
+                    <div className="flex flex-col gap-1 bg-stone-200 dark:bg-stone-650 px-2 py-1 rounded">
+                      <p>
+                        Requires <b>{war.fleetSupport}</b> Fleet Support
+                      </p>
+                      <p>
+                        <b>{getDiceRollProbability(3, war.disasterNumbers)}</b>{" "}
+                        chance of Disaster
+                      </p>
+                      <p>
+                        <b>{getDiceRollProbability(3, war.standoffNumbers)}</b>{" "}
+                        chance of Standoff
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </li>
         ))}

frontend/functions/probability.ts

@@ -0,0 +1,28 @@
+const getDiceRollProbability = (
+  dice_count: number,
+  target_numbers: number[]
+) => {
+  // Work out the probability of a dice roll hitting any of the target numbers
+  const dice_sides = [1, 2, 3, 4, 5, 6]
+  let outcomes = [1, 2, 3, 4, 5, 6]
+  for (let dice_index = 1; dice_index < dice_count; dice_index++) {
+    let next_set_of_outcomes: number[] = []
+    outcomes.forEach((outcome) => {
+      for (let side_index = 0; side_index < dice_sides.length; side_index++) {
+        next_set_of_outcomes.push(outcome + dice_sides[side_index])
+      }
+    })
+    outcomes = next_set_of_outcomes
+  }
+  let match_count = 0
+  outcomes.forEach((outcome) => {
+    if (target_numbers.includes(outcome)) {
+      match_count += 1
+    }
+  })
+  const probability =
+    match_count === 1 ? 1 : Math.round((match_count / outcomes.length) * 100)
+  return `${probability}%`
+}
+
+export default getDiceRollProbability

roronline.code-workspace

@@ -62,6 +62,7 @@
 			"sulpicius",
 			"terentius",
 			"tullius",
+			"unoptimized",
 			"unprosecuted",
 			"valerius",
 			"verrucosus",