Add a notification for new turn starting

backend/rorapp/functions/face_mortality.py

@@ -215,6 +215,23 @@ def face_mortality(game, faction, potential_action, step):
             }
         })
 
+        # Issue a notification to say that the next turn has started
+        new_action_log_index = ActionLog.objects.filter(step__phase__turn__game=game).order_by('-index')[0].index + 1
+        action_log = ActionLog(
+            index=new_action_log_index,
+            step=step,
+            type="new_turn",
+            data={"turn_index": new_turn.index}
+        )
+        action_log.save()
+        messages_to_send.append({
+            "operation": "create",
+            "instance": {
+                "class": "action_log",
+                "data": ActionLogSerializer(action_log).data
+            }
+        })
+
         # Create potential actions for the next mortality phase
         factions = Faction.objects.filter(game__id=game.id)
         for faction in factions:

frontend/components/MetaSection.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link'
 import Button from '@mui/material/Button'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faRightFromBracket } from '@fortawesome/free-solid-svg-icons'
-import { faClock } from '@fortawesome/free-regular-svg-icons'
+import { faHourglass } from '@fortawesome/free-regular-svg-icons'
 
 import Turn from "@/classes/Turn"
 import Phase from "@/classes/Phase"
@@ -42,7 +42,7 @@ const MetaSection = (props: MetaSectionProps) => {
           <div>
             <h2>{game.name}</h2>
             <span title={`Step ${latestStep?.index.toString()}`} style={{ fontSize: 14 }}>
-              <FontAwesomeIcon icon={faClock} fontSize={14} style={{marginRight: 4}} />
+              <FontAwesomeIcon icon={faHourglass} fontSize={14} style={{marginRight: 4}} />
               Turn {props.latestTurn.index}, {props.latestPhase.name} Phase
             </span>
           </div>

frontend/components/actionLogs/ActionLog.module.css

@@ -4,3 +4,8 @@
   display: flex;
   justify-content: center;
 }
+
+.faIcon {
+  margin-top: 2px;
+  color: var(--foreground-color);
+}

frontend/components/actionLogs/ActionLog.tsx

@@ -2,6 +2,7 @@ import ActionLog from "@/classes/ActionLog"
 import SelectFactionLeaderNotification from "./ActionLog_SelectFactionLeader"
 import FaceMortalityNotification from "./ActionLog_FaceMortality"
 import TemporaryRomeConsulNotification from "./ActionLog_TemporaryRomeConsul"
+import NewTurnNotification from "./ActionLog_NewTurn"
 
 interface NotificationItemProps {
   notification: ActionLog
@@ -11,7 +12,8 @@ interface NotificationItemProps {
 const notifications: { [key: string]: React.ComponentType<any> } = {
   select_faction_leader: SelectFactionLeaderNotification,
   face_mortality: FaceMortalityNotification,
-  temporary_rome_consul: TemporaryRomeConsulNotification
+  temporary_rome_consul: TemporaryRomeConsulNotification,
+  new_turn: NewTurnNotification
 }
 
 // Container for a notification, which determines the type of notification to render

frontend/components/actionLogs/ActionLog_NewTurn.tsx

@@ -0,0 +1,30 @@
+import { Alert } from "@mui/material"
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faHourglass } from '@fortawesome/free-regular-svg-icons'
+import ActionLog from "@/classes/ActionLog"
+import styles from "./ActionLog.module.css"
+
+interface NotificationProps {
+  notification: ActionLog
+}
+
+// Notification for when a senator dies during the mortality phase
+const NewTurnNotification = ({ notification } : NotificationProps) => {
+  // Get notification-specific data
+  const turnIndex = notification.data?.turn_index ?? null
+
+  const getIcon = () => (
+    <div className={`${styles.icon} ${styles.faIcon}`}>
+      <FontAwesomeIcon icon={faHourglass} />
+    </div>
+  )
+
+  return (
+    <Alert icon={getIcon()} style={{backgroundColor: 'var(--background-color-neutral)'}}>
+      <b>New Turn</b>
+      <p>Turn {turnIndex} has started.</p>
+    </Alert>
+  )
+}
+
+export default NewTurnNotification