Styling the page to fit the theme of a medieval scroll

app.py

@@ -1,3 +1,5 @@
+# formatted with python black, line length 200
+
 import os, random
 import openai
 import gradio as gr
@@ -7,6 +9,7 @@ from game_content import N_TURNS_REQUIRED_TO_PASS_FIRST_BANDIT_ENCOUNTER, N_TURN
 import decider_utils
 from decider_utils import YES, NO
 from decider_questions import *  # QUESTION_IS_USER_HOME, QUESTION_IS_USER_ENGAGED_WITH_BANDITS, etc.
+from webpage import PAGE_STYLING_JS, PLEASE_BE_PATIENT_DIV, TOP_OF_SCREEN_PADDING_DIV
 
 
 N_COMPLETIONS_WHEN_ELABORATING = 1  # I previously had this set to 3, but that made the program very slow.
@@ -124,6 +127,7 @@ def run_1_game_turn(s_narr_transcript, s_n_turns_elapsed, s_user_transcript, s_u
 openai.organization = os.environ.get("OPENAI_ORGANIZATION")
 openai.api_key = os.environ.get("OPENAI_KEY")
 
+
 demo = gr.Blocks()
 
 with demo:
@@ -132,10 +136,13 @@ with demo:
     s_narr_transcript = game_intro + NOTES_TO_THE_NARRATOR_AT_START + AWAITING_INPUT
     s_user_transcript = game_intro + AWAITING_INPUT
 
+    gr_top_of_scr_padding = gr.HTML(TOP_OF_SCREEN_PADDING_DIV)
+
     gr_narr_transcript = gr.Textbox(label="", value=s_narr_transcript, interactive=False, max_lines=9999, visible=False)
-    gr_user_transcript = gr.Textbox(label="", value=s_user_transcript, interactive=False, max_lines=9999)
+    gr_user_transcript = gr.Textbox(label="", value=s_user_transcript, interactive=False, max_lines=9999, elem_classes="parleygame")
 
-    gr_markdown1 = gr.Markdown("After clicking Run Next Turn, please be patient as it may take up to a minute for the game state to update.")
+    gr_pls_be_patient = gr.HTML(PLEASE_BE_PATIENT_DIV)
+    
     gr_user_input = gr.Textbox(label="", value="", placeholder="Describe your next action here...", interactive=True)
     gr_button1 = gr.Button(value="Run Next Turn")
 
@@ -145,4 +152,8 @@ with demo:
         fn=run_1_game_turn, inputs=[gr_narr_transcript, gr_n_turns_elapsed, gr_user_transcript, gr_user_input], outputs=[gr_narr_transcript, gr_n_turns_elapsed, gr_user_transcript, gr_user_input]
     )
 
+    # See https://discuss.huggingface.co/t/gradio-html-component-with-javascript-code-dont-work/37316/2
+    demo.load(None, None, None, _js=PAGE_STYLING_JS)
+
+
 demo.launch()

game_content.py

@@ -20,27 +20,35 @@ GAME_INTRO_CHOICES = []
 # That way the web version of the game can load instantly
 
 # Intro_1.txt
-GAME_INTRO_CHOICES.append(GAME_HEADER + """The year is 603, in an alternate reality fantasy world with a little bit of magic, although you yourself cannot cast spells and the only magical item you own is your revolver.  Magically-powered firearms are common, especially six-shooter revolvers, which you and almost everyone carries.  You are a seasonal laborer making a once a year summer trek from Tibet across the Himalayas to Nepal to return home to your family with your year's worth of wages which is 100 gold coins.  It is very common to be waylaid by bandits who will try to steal some of your gold, or to take some of it for 'protection'.  If you make it home with less than 30 coins or do not make it home at all, your family will not be able to afford food to eat.
+GAME_INTRO_CHOICES.append(
+    GAME_HEADER
+    + """The year is 603, in an alternate reality fantasy world with a little bit of magic, although you yourself cannot cast spells and the only magical item you own is your revolver.  Magically-powered firearms are common, especially six-shooter revolvers, which you and almost everyone carries.  You are a seasonal laborer making a once a year summer trek from Tibet across the Himalayas to Nepal to return home to your family with your year's worth of wages which is 100 gold coins.  It is very common to be waylaid by bandits who will try to steal some of your gold, or to take some of it for 'protection'.  If you make it home with less than 30 coins or do not make it home at all, your family will not be able to afford food to eat.
 
 You have been travelling for three days now and the journey is almost over. The night before you reach your destination, you set up camp in a secluded area, hoping to make it home without any trouble.  As you are preparing your dinner, you hear a rustling in the bushes. You ready your revolver and prepare for the worst. 
 
 Out of the bushes emerges a group of five bandits. They are all armed with swords and daggers but they also have revolvers at their sides. The leader steps forward and demands that you hand over all your gold coins or else they will kill you and take it by force. You know that if you don't comply, you won't make it home alive or with enough gold to support your family. You also know that if these bandits get their hands on all 100 coins, then your family will suffer greatly this year as they won't be able to afford food or other necessities. 
 
 You must think quickly - do you try to fight them off or do you negotiate with them?
-""")
+"""
+)
 
 # Intro_2.txt
-GAME_INTRO_CHOICES.append(GAME_HEADER + """The year is 603, in an alternate reality fantasy world with a little bit of magic, although you yourself cannot cast spells and the only magical item you own is your revolver.  Magically-powered firearms are common, especially six-shooter revolvers, which you and almost everyone carries.  You are a seasonal laborer making a once a year summer trek from Tibet across the Himalayas to Nepal to return home to your family with your year's worth of wages which is 100 gold coins.  It is very common to be waylaid by bandits who will try to steal some of your gold, or to take some of it for 'protection'.  If you make it home with less than 30 coins or do not make it home at all, your family will not be able to afford food to eat.
+GAME_INTRO_CHOICES.append(
+    GAME_HEADER
+    + """The year is 603, in an alternate reality fantasy world with a little bit of magic, although you yourself cannot cast spells and the only magical item you own is your revolver.  Magically-powered firearms are common, especially six-shooter revolvers, which you and almost everyone carries.  You are a seasonal laborer making a once a year summer trek from Tibet across the Himalayas to Nepal to return home to your family with your year's worth of wages which is 100 gold coins.  It is very common to be waylaid by bandits who will try to steal some of your gold, or to take some of it for 'protection'.  If you make it home with less than 30 coins or do not make it home at all, your family will not be able to afford food to eat.
 
 You have been making this journey for the past five years with no problems, but this year the trip has been unusually dangerous.  You have encountered more bandits than usual and you are now down to your last 20 coins.  You are about a day away from home when you come across a group of bandits in the road ahead.  
 
 You recognize one of them as a man who had tried to rob you two days prior. He had failed then, but he is back with reinforcements and they seem determined to take what's left of your gold.  You can tell by their demeanor that they will not be swayed by words or threats, so you draw your revolver and prepare to fight for your money. 
 
 You know that if you can make it past this group, you will be able to make it home safely with enough money for your family to survive the winter.  You take a deep breath and prepare yourself for battle, knowing that this may be your last chance at survival...
-""")
+"""
+)
 
 # Intro_3.txt
-GAME_INTRO_CHOICES.append(GAME_HEADER + """The year is 603, in an alternate reality fantasy world with a little bit of magic, although you yourself cannot cast spells and the only magical item you own is your revolver.  Magically-powered firearms are common, especially six-shooter revolvers, which you and almost everyone carries.  You are a seasonal laborer making a once a year summer trek from Tibet across the Himalayas to Nepal to return home to your family with your year's worth of wages which is 100 gold coins.  It is very common to be waylaid by bandits who will try to steal some of your gold, or to take some of it for 'protection'.  If you make it home with less than 30 coins or do not make it home at all, your family will not be able to afford food to eat.
+GAME_INTRO_CHOICES.append(
+    GAME_HEADER
+    + """The year is 603, in an alternate reality fantasy world with a little bit of magic, although you yourself cannot cast spells and the only magical item you own is your revolver.  Magically-powered firearms are common, especially six-shooter revolvers, which you and almost everyone carries.  You are a seasonal laborer making a once a year summer trek from Tibet across the Himalayas to Nepal to return home to your family with your year's worth of wages which is 100 gold coins.  It is very common to be waylaid by bandits who will try to steal some of your gold, or to take some of it for 'protection'.  If you make it home with less than 30 coins or do not make it home at all, your family will not be able to afford food to eat.
 
 You have been traveling for weeks now and you are nearing the end of your journey. You can see the border between Tibet and Nepal in the distance, but before you can cross it, you must pass through a narrow mountain pass. As you enter the pass, you hear a voice call out from behind you.
 
@@ -49,10 +57,13 @@ You have been traveling for weeks now and you are nearing the end of your journe
 You turn around to find two bandits blocking your path, each armed with a magical revolver. They demand that you hand over half of your gold coins as 'protection money'. You know that if you give them what they want, there's no guarantee that they won't just take all of it anyway. On the other hand, if you refuse to pay up then they could easily shoot you down and take all of your coins anyway. 
 
 What do you do?
-""")
+"""
+)
 
 # Intro_4.txt
-GAME_INTRO_CHOICES.append(GAME_HEADER + """The year is 603, in an alternate reality fantasy world with a little bit of magic, although you yourself cannot cast spells and the only magical item you own is your revolver.  Magically-powered firearms are common, especially six-shooter revolvers, which you and almost everyone carries.  You are a seasonal laborer making a once a year summer trek from Tibet across the Himalayas to Nepal to return home to your family with your year's worth of wages which is 100 gold coins.  It is very common to be waylaid by bandits who will try to steal some of your gold, or to take some of it for 'protection'.  If you make it home with less than 30 coins or do not make it home at all, your family will not be able to afford food to eat.
+GAME_INTRO_CHOICES.append(
+    GAME_HEADER
+    + """The year is 603, in an alternate reality fantasy world with a little bit of magic, although you yourself cannot cast spells and the only magical item you own is your revolver.  Magically-powered firearms are common, especially six-shooter revolvers, which you and almost everyone carries.  You are a seasonal laborer making a once a year summer trek from Tibet across the Himalayas to Nepal to return home to your family with your year's worth of wages which is 100 gold coins.  It is very common to be waylaid by bandits who will try to steal some of your gold, or to take some of it for 'protection'.  If you make it home with less than 30 coins or do not make it home at all, your family will not be able to afford food to eat.
 
 You have been walking for weeks and are now in the foothills of the Himalayas. You can see your destination in the distance, but you know that you must get through a dangerous pass before you will be safe. As you approach, you hear voices ahead and see a group of bandits blocking the path. 
 
@@ -63,10 +74,13 @@ The leader of the bandits steps forward and says, "We'll let ye pass if ye give
 You stand firm and hold up your revolver, saying, "I'm not going to pay any tolls here today - I'm just trying to get home with my wages intact." The leader scowls at you and says, "If ye don't pay us what we're asking fer then we'll take it by force!" He motions to his men who all draw their weapons as well. 
 
 Your heart races as you realize that this could easily turn into a fight with deadly consequences. You take a deep breath and try to think quickly - what do you do?
-""")
+"""
+)
 
 # Intro_5.txt
-GAME_INTRO_CHOICES.append(GAME_HEADER + """The year is 603, in an alternate reality fantasy world with a little bit of magic, although you yourself cannot cast spells and the only magical item you own is your revolver.  Magically-powered firearms are common, especially six-shooter revolvers, which you and almost everyone carries.  You are a seasonal laborer making a once a year summer trek from Tibet across the Himalayas to Nepal to return home to your family with your year's worth of wages which is 100 gold coins.  It is very common to be waylaid by bandits who will try to steal some of your gold, or to take some of it for 'protection'.  If you make it home with less than 30 coins or do not make it home at all, your family will not be able to afford food to eat.
+GAME_INTRO_CHOICES.append(
+    GAME_HEADER
+    + """The year is 603, in an alternate reality fantasy world with a little bit of magic, although you yourself cannot cast spells and the only magical item you own is your revolver.  Magically-powered firearms are common, especially six-shooter revolvers, which you and almost everyone carries.  You are a seasonal laborer making a once a year summer trek from Tibet across the Himalayas to Nepal to return home to your family with your year's worth of wages which is 100 gold coins.  It is very common to be waylaid by bandits who will try to steal some of your gold, or to take some of it for 'protection'.  If you make it home with less than 30 coins or do not make it home at all, your family will not be able to afford food to eat.
 
 You have been walking for days and you are now at the foot of the mountain range.  You can see the peaks ahead of you, but they are shrouded in fog.  You can feel a chill in the air and hear a distant rumble like thunder.  The sun is setting and you know that night will come soon.  You must make it across the mountains before nightfall or be stranded on their slopes for the night.
 
@@ -75,10 +89,13 @@ You look around for some shelter, but all you can find is a small cave nearby, b
 Suddenly, you hear voices outside! It sounds like bandits who have caught wind of your presence in this area and are coming to rob you! You quickly grab your revolver from its holster and prepare to defend yourself against these criminals. As they enter the cave, you take aim at them with your revolver, ready to fire if necessary. They seem surprised to see someone with a gun ready to fight back, but they don't back down either - they still demand that you give them all of your gold coins or else they'll kill you!
 
 What do you do? Do you try to reason with them or do you stand firm and fight?
-""")
+"""
+)
 
 # Intro_6.txt
-GAME_INTRO_CHOICES.append(GAME_HEADER + """The year is 603, in an alternate reality fantasy world with a little bit of magic, although you yourself cannot cast spells and the only magical item you own is your revolver.  Magically-powered firearms are common, especially six-shooter revolvers, which you and almost everyone carries.  You are a seasonal laborer making a once a year summer trek from Tibet across the Himalayas to Nepal to return home to your family with your year's worth of wages which is 100 gold coins.  It is very common to be waylaid by bandits who will try to steal some of your gold, or to take some of it for 'protection'.  If you make it home with less than 30 coins or do not make it home at all, your family will not be able to afford food to eat.
+GAME_INTRO_CHOICES.append(
+    GAME_HEADER
+    + """The year is 603, in an alternate reality fantasy world with a little bit of magic, although you yourself cannot cast spells and the only magical item you own is your revolver.  Magically-powered firearms are common, especially six-shooter revolvers, which you and almost everyone carries.  You are a seasonal laborer making a once a year summer trek from Tibet across the Himalayas to Nepal to return home to your family with your year's worth of wages which is 100 gold coins.  It is very common to be waylaid by bandits who will try to steal some of your gold, or to take some of it for 'protection'.  If you make it home with less than 30 coins or do not make it home at all, your family will not be able to afford food to eat.
 
 You have been travelling for two weeks and you are now at the foot of the Himalayas. You can see the snow-capped peaks in the distance and it is a daunting sight. You know that this is your most dangerous stretch of the journey, as bandits are known to hide in these mountains and prey on unsuspecting travellers. 
 
@@ -89,75 +106,118 @@ You see three men wearing tattered clothes and carrying swords, walking towards
 What do you do? 
 
 You could try to sneak around them, hoping not to be spotted. Or if that doesn't work out, you could try negotiating with them - offering them some gold coins in exchange for safe passage through their territory. If all else fails, you could always try fighting them off with your revolver - although this would be risky given their numbers and weapons. Whatever choice you make, it's important to stay calm and keep your wits about you so that you can make quick decisions if needed!
-""")
+"""
+)
 
 # Intro_7.txt
-GAME_INTRO_CHOICES.append(GAME_HEADER + """The year is 603, in an alternate reality fantasy world with a little bit of magic, although you yourself cannot cast spells and the only magical item you own is your revolver.  Magically-powered firearms are common, especially six-shooter revolvers, which you and almost everyone carries.  You are a seasonal laborer making a once a year summer trek from Tibet across the Himalayas to Nepal to return home to your family with your year's worth of wages which is 100 gold coins.  It is very common to be waylaid by bandits who will try to steal some of your gold, or to take some of it for 'protection'.  If you make it home with less than 30 coins or do not make it home at all, your family will not be able to afford food to eat.
+GAME_INTRO_CHOICES.append(
+    GAME_HEADER
+    + """The year is 603, in an alternate reality fantasy world with a little bit of magic, although you yourself cannot cast spells and the only magical item you own is your revolver.  Magically-powered firearms are common, especially six-shooter revolvers, which you and almost everyone carries.  You are a seasonal laborer making a once a year summer trek from Tibet across the Himalayas to Nepal to return home to your family with your year's worth of wages which is 100 gold coins.  It is very common to be waylaid by bandits who will try to steal some of your gold, or to take some of it for 'protection'.  If you make it home with less than 30 coins or do not make it home at all, your family will not be able to afford food to eat.
 
 You have been travelling for three days, and today is the fourth. You are almost to the border when you hear a voice calling out from the trees. You look up and see five bandits, all armed with magical firearms, standing in a semicircle around you. 
 
 "We're taking your gold," one of them says. "You can either give it to us peacefully or we'll take it by force." 
 
 You know that if you try to fight them off, you'll likely be killed or seriously injured. You also know that if you don't make it home with at least 30 coins, your family will suffer. You must think quickly to decide what to do.
-""")
+"""
+)
 
 # Intro_8.txt
-GAME_INTRO_CHOICES.append(GAME_HEADER + """The year is 603, in an alternate reality fantasy world with a little bit of magic, although you yourself cannot cast spells and the only magical item you own is your revolver.  Magically-powered firearms are common, especially six-shooter revolvers, which you and almost everyone carries.  You are a seasonal laborer making a once a year summer trek from Tibet across the Himalayas to Nepal to return home to your family with your year's worth of wages which is 100 gold coins.  It is very common to be waylaid by bandits who will try to steal some of your gold, or to take some of it for 'protection'.  If you make it home with less than 30 coins or do not make it home at all, your family will not be able to afford food to eat.
+GAME_INTRO_CHOICES.append(
+    GAME_HEADER
+    + """The year is 603, in an alternate reality fantasy world with a little bit of magic, although you yourself cannot cast spells and the only magical item you own is your revolver.  Magically-powered firearms are common, especially six-shooter revolvers, which you and almost everyone carries.  You are a seasonal laborer making a once a year summer trek from Tibet across the Himalayas to Nepal to return home to your family with your year's worth of wages which is 100 gold coins.  It is very common to be waylaid by bandits who will try to steal some of your gold, or to take some of it for 'protection'.  If you make it home with less than 30 coins or do not make it home at all, your family will not be able to afford food to eat.
 
 You have been travelling for the past two weeks, and you are now close to the border between Tibet and Nepal.  You can see the snow-capped peaks of the Himalayas in the distance, but you know that you still have a long way to go before you make it home.  You take a break from your journey and set up camp for the night.  You light a small fire and settle down for some much needed rest.
 
 Just as you are about to drift off to sleep, you hear a rustling in the bushes nearby. You draw your revolver and aim it at the source of the noise, ready to fire if necessary. Suddenly, two bandits emerge from the bushes with their own revolvers pointed at you. They demand that you hand over your gold coins or else they will shoot.
 
 You must make a decision quickly; do you give them your gold coins or fight them?
-""")
+"""
+)
 
 # Intro_9.txt
-GAME_INTRO_CHOICES.append(GAME_HEADER + """
-""")
+GAME_INTRO_CHOICES.append(
+    GAME_HEADER
+    + """
+"""
+)
 
 # Intro_10.txt
-GAME_INTRO_CHOICES.append(GAME_HEADER + """
-""")
+GAME_INTRO_CHOICES.append(
+    GAME_HEADER
+    + """
+"""
+)
 
 # Intro_11.txt
-GAME_INTRO_CHOICES.append(GAME_HEADER + """
-""")
+GAME_INTRO_CHOICES.append(
+    GAME_HEADER
+    + """
+"""
+)
 
 # Intro_12.txt
-GAME_INTRO_CHOICES.append(GAME_HEADER + """
-""")
+GAME_INTRO_CHOICES.append(
+    GAME_HEADER
+    + """
+"""
+)
 
 # Intro_13.txt
-GAME_INTRO_CHOICES.append(GAME_HEADER + """
-""")
+GAME_INTRO_CHOICES.append(
+    GAME_HEADER
+    + """
+"""
+)
 
 # Intro_14.txt
-GAME_INTRO_CHOICES.append(GAME_HEADER + """
-""")
+GAME_INTRO_CHOICES.append(
+    GAME_HEADER
+    + """
+"""
+)
 
 # Intro_15.txt
-GAME_INTRO_CHOICES.append(GAME_HEADER + """
-""")
+GAME_INTRO_CHOICES.append(
+    GAME_HEADER
+    + """
+"""
+)
 
 # Intro_16.txt
-GAME_INTRO_CHOICES.append(GAME_HEADER + """
-""")
+GAME_INTRO_CHOICES.append(
+    GAME_HEADER
+    + """
+"""
+)
 
 # Intro_17.txt
-GAME_INTRO_CHOICES.append(GAME_HEADER + """
-""")
+GAME_INTRO_CHOICES.append(
+    GAME_HEADER
+    + """
+"""
+)
 
 # Intro_18.txt
-GAME_INTRO_CHOICES.append(GAME_HEADER + """
-""")
+GAME_INTRO_CHOICES.append(
+    GAME_HEADER
+    + """
+"""
+)
 
 # Intro_19.txt
-GAME_INTRO_CHOICES.append(GAME_HEADER + """
-""")
+GAME_INTRO_CHOICES.append(
+    GAME_HEADER
+    + """
+"""
+)
 
 # Intro_20.txt
-GAME_INTRO_CHOICES.append(GAME_HEADER + """
-""")
+GAME_INTRO_CHOICES.append(
+    GAME_HEADER
+    + """
+"""
+)
 
 
 NOTES_TO_THE_NARRATOR_AT_START = """