Get some more images when starting the game

typeclasses/characters.py

@@ -29,9 +29,9 @@ from typeclasses.tutorial import TutorBird, TutorialState
 
 
 INTRO = """
-As the surrounding mists dissipate, you find yourself in an ancient, halcyon forest dripping with moss. You see an envelope of parchment wedged under a scaly protrusion of bark...inside, a letter in familiar penmanship, personally addressed to you, which you pick up.
+                                    . o O o .
 
-A little gray bird flies by you, almost grazing your ear!"""
+As the surrounding mists dissipate, you find yourself in an ancient, halcyon forest dripping with moss. You see an envelope of parchment wedged under a scaly protrusion of bark...inside, a letter in familiar penmanship, personally addressed to you, which you pick up. A little gray bird flies by... wait, was it sporting a top hat!?"""
 
 READ_LETTER = """You read a letter with an oddly familiar penmanship:
 

typeclasses/tutorial.py

@@ -17,8 +17,9 @@ from utils.word_list import routput
 
 MSGS = {
     "START": [
-        "A small bird flies over to you, and perches on your shoulder. \"Hello,\" it says in your ear. \"I'm Bubba Joe Washington, the Third,\" it chirps, \"and I'm here to break the fourth wall, and help you figure out this game. Feel free to |gshoo|n me away, and I'll leave you alone to explore.\"",
+        "A small bird flies over to you, and perches on your shoulder. It definitely has a top hat. \"Hello,\" it says in your ear. \"I'm Bubba Joe Washington, the Third, and I'm here to help you figure out this game by breaking the fourth wall. Feel free to |gshoo|n me away, and I'll leave you alone to explore.\"",
         "The bird with yellow cheeks says, \"In this story game, you type commands (verbs) to do things. For instance, type the word |glook|n, and press the |wReturn|n key to look around at your surroundings and to see where you are, what you can do, and where you can go.\"",
+        "\"That's right,\" it chirps, \"Any words in this game, shown in |gthis color|n are commands that you can type.\""
         "The bird perched on your shoulder looks at you expectantly.",
         "\"Go ahead,\" says the bird, \"Type |glook|n. If you are on the web site, you may need to click in the box in the lower part of the screen.\"",
         "The bird preens itself.",
@@ -163,12 +164,19 @@ class TutorBird(CarriableNPC):
             "typeclass": "typeclasses.tutorial.TutorBird",
             "key": "bird",
             "aliases": ["cockatiel", "tutor", "tutor bird"],
-            "desc": "Gray feathered bird perched on your shoulder. It's large black eyes looks at you quizically. Its yellow cheeks are adorable, making it seem overly helpful.",
+            "desc": "Gray feathered bird with a top hat perched on your shoulder. It's large black eyes looks at you quizically. Its yellow cheeks are adorable, making it seem overly helpful.",
         })[0]
         bird.location = character
-        delay(1, bird.display_image)
+        delay(1, bird.display_first_image)
+        delay(10, bird.display_first_image)
 
-    def display_image(self):
+    def display_first_image(self):
+        """
+        Displays an image for the tutorial for the webclient.
+        """
+        self.location.msg(image=("https://www.howardabrams.com/cozy-players-guide/bubba-flying.jpg"))
+
+    def display_second_image(self):
         """
         Displays an image for the tutorial for the webclient.
         """

web/static/webclient/css/custom.css

@@ -10,6 +10,10 @@
     max-width: 900px;
 }
 
+#messagewindow img {
+    max-width: 100%;
+}
+
 div.out {
     background-color: transparent;
     color: #26201a;