Add multiple message types

src/components/Log.svelte

@@ -1,13 +1,16 @@
 <script lang="ts">
-  import { Message } from "../shark/Message";
+  import { Message, MessageType } from "../shark/Message";
   import { SharkGame } from "../shark/SharkGame";
 
-  export function addMessage(message: string): void {
+  export function addMessage(
+    message: string,
+    type: MessageType = MessageType.message
+  ): void {
     SharkGame.messages = [
       ...SharkGame.messages.slice(
         -Math.max(...SharkGame.Settings.logLength.options)
       ),
-      new Message(message),
+      new Message(message, type),
     ];
   }
 
@@ -18,9 +21,19 @@
 <div id="log">
   <button
     on:click={() => {
-      addMessage("test" + SharkGame.messages.length);
+      addMessage("message" + SharkGame.messages.length);
     }}>Add Test Message</button
   >
+  <button
+    on:click={() => {
+      addMessage("warn" + SharkGame.messages.length, MessageType.warning);
+    }}>Add Test Warning</button
+  >
+  <button
+    on:click={() => {
+      addMessage("error" + SharkGame.messages.length, MessageType.error);
+    }}>Add Test Error</button
+  >
   <button
     on:click={() => {
       Message.even = true;
@@ -30,7 +43,9 @@
   <ol>
     {#each displaymessages as message, i}
       {#if i < logLength}
-        <li class={message.isEven ? "even" : "odd"}>{message}</li>
+        <li class={(message.isEven ? "even" : "odd") + " " + message.type}>
+          {message}
+        </li>
       {/if}
     {/each}
   </ol>
@@ -58,6 +73,12 @@
         &.even {
           background-color: var(--color-dark);
         }
+        &.warning {
+          color: darkorange;
+        }
+        &.error {
+          color: red;
+        }
       }
     }
   }

src/shark/Message.ts

@@ -1,11 +1,19 @@
+export enum MessageType {
+  message = "message",
+  warning = "warning",
+  error = "error",
+}
+
 export class Message {
   static even = true;
   isEven: boolean;
   message: string;
+  type: MessageType;
 
-  constructor(message: string) {
+  constructor(message: string, type: MessageType = MessageType.message) {
     this.message = message;
     this.isEven = Message.even;
+    this.type = type;
     Message.even = !Message.even;
   }