Merge remote-tracking branch 'nutbuster/lazysnake/feature/ISSUE-3_CG_Gallery' into 5.1.1

game/gui.rpy

@@ -30,7 +30,7 @@ define gui.idle_color = '#FFFE00'
 
 ## The small color is used for small text, which needs to be brighter/darker to
 ## achieve the same effect.
-define gui.idle_small_color = '#0001FF'
+define gui.idle_small_color = '#00E1FF'
 
 ## The color that is used for buttons and bars that are hovered.
 define gui.hover_color = '#00FF03'
@@ -47,10 +47,19 @@ define gui.insensitive_color = '#8888887f'
 define gui.muted_color = '#3d1466'
 define gui.hover_muted_color = '#5b1e99'
 
-## The colors used for dialogue and menu choice text.
+## The colors used for dialogue and menu choice text
 define gui.text_color = '#ffffff'
+#define gui.text_color_outline = '#00000000'
+
 define gui.interface_text_color = '#ffffff'
 
+## Default font outline color
+define gui.default_outline = '#000'
+
+## Namebox outline color
+define gui.name_outline = '#000000dd'
+
+define gui.main_menu_color = '#FFF'
 
 ## Fonts and Font Sizes ########################################################
 
@@ -64,23 +73,30 @@ define gui.name_text_font = "gui/FallingSky.otf"
 define gui.interface_text_font = "gui/FallingSky.otf"
 
 ## The size of normal dialogue text.
-define gui.text_size = 40
+define gui.text_size = 42
+#define gui.text_outlines = [ (absolute(0.5), gui.text_color_outline, 0, 0) ]
 
 ## The size of character names.
 define gui.name_text_size = 45
+define gui.name_text_outlines = [ (absolute(1.5), gui.name_outline, 0, 0) ]
 
 ## The size of text in the game's user interface.
 define gui.interface_text_size = 33
+define gui.interface_text_outlines = [ (1, gui.default_outline, 0, 0) ]
 
 ## The size of labels in the game's user interface.
 define gui.label_text_size = 36
+define gui.label_text_outlines = [ (2, gui.default_outline, 0, 0) ]
 
 ## The size of text on the notify screen.
 define gui.notify_text_size = 24
+#define gui.notify_text_outlines = [ (2, gui.default_outline, 0, 0) ]
 
 ## The size of the game's title.
 define gui.title_text_size = 75
+#define gui.title_text_outlines = [ (2, gui.default_outline, 0, 0) ]
 
+define gui.main_menu_text_size = 60
 
 ## Main and Game Menus #########################################################
 
@@ -105,12 +121,14 @@ define gui.textbox_yalign = 1.0
 
 ## The placement of the speaking character's name, relative to the textbox.
 ## These can be a whole number of pixels from the left or top, or 0.5 to center.
-define gui.name_xpos = 285
-define gui.name_ypos = -90
+define gui.name_xpos = 350
+define gui.name_ypos = -85
+
+define gui.name_large_xpos = 395
 
 ## The horizontal alignment of the character's name. This can be 0.0 for left-
 ## aligned, 0.5 for centered, and 1.0 for right-aligned.
-define gui.name_xalign = 0.0
+define gui.name_xalign = 0.5
 
 ## The width, height, and borders of the box containing the character's name, or
 ## None to automatically size it.
@@ -125,21 +143,21 @@ define gui.namebox_borders = Borders(5, 5, 5, 5)
 ## background of the namebox will be scaled.
 define gui.namebox_tile = False
 
-
 ## The placement of dialogue relative to the textbox. These can be a whole
 ## number of pixels relative to the left or top side of the textbox, or 0.5 to
 ## center.
 #To make the text with the characters align to the normal text, I set this to match up and make it "just werk". It is a horrible, hacky fix, but werks none the less. I hope this fix is so bad that I never get to write gui code ever again.
-define gui.dialogue_xpos = 365
-define gui.dialogue_ypos = 47
-
-## The maximum width of dialogue text, in pixels.
-define gui.dialogue_width = 1116
+#It's still bad but it could be legitmately worse
+define gui.dialogue_ypos = 20
+define gui.dialogue_xpos = 220
+define gui.dialogue_width = 1460
 
 ## The horizontal alignment of the dialogue text. This can be 0.0 for left-
 ## aligned, 0.5 for centered, and 1.0 for right-aligned.
 define gui.dialogue_text_xalign = 0.0
 
+define gui.window_yoffset = 0
+define gui.input_yoffset = 0
 
 ## Buttons #####################################################################
 ##
@@ -428,18 +446,23 @@ init python:
     if renpy.variant("small"):
 
         ## Font sizes.
-        gui.text_size = 45
-        gui.name_text_size = 54
+        gui.text_size = 44
+        gui.name_text_size = 48
         gui.notify_text_size = 38
         gui.interface_text_size = 45
         gui.button_text_size = 45
         gui.label_text_size = 51
 
+        ## Namebox
+        gui.name_xpos = 345
+        gui.name_ypos = -85
+
         ## Adjust the location of the textbox.
-        gui.textbox_height = 360
-        gui.name_xpos = 120
-        gui.text_xpos = 135
-        gui.text_width = 1650
+        gui.dialogue_ypos = 20
+        gui.dialogue_xpos = 240
+        gui.dialogue_width = 1460
+        gui.window_yoffset = -75
+
         ## Change the size and spacing of various things.
         gui.slider_size = 54
 
@@ -453,10 +476,6 @@ init python:
 
         gui.quick_button_text_size = 30
 
-        ## File button layout.
-        gui.file_slot_cols = 2
-        gui.file_slot_rows = 2
-
         ## NVL-mode.
         gui.nvl_height = 255
 
@@ -474,4 +493,7 @@ init python:
         gui.nvl_button_xpos = 30
 
 
+    ## Input, OSK, very specific
+    if renpy.variant("small") or renpy.variant("touch"):
+        gui.input_yoffset = -625
 

game/screens.rpy

@@ -119,11 +119,13 @@ screen say(who, what):
         id "window"
 
         if who is not None:
-
+            background Image("gui/textbox.png", xalign=0.5, yalign=1.0)
             window:
                 id "namebox"
                 style "namebox"
                 text who id "who"
+        else:
+            background Image("gui/textbox_no_hitch.png", xalign=0.5, yalign=1.0)
 
         text what id "what"
 
@@ -152,23 +154,23 @@ style window:
     xfill True
     yalign gui.textbox_yalign
     ysize gui.textbox_height
-
-    background Image("gui/textbox_no_hitch.png", xalign=0.5, yalign=1.0)
+    xoffset 0
+    yoffset gui.window_yoffset
+    xcenter 0.5
 
 style namebox:
+    xalign 0.5
     xpos gui.name_xpos
-    xanchor gui.name_xalign
-    xsize gui.namebox_width
     ypos gui.name_ypos
-    ysize gui.namebox_height
 
-    background Frame("gui/namebox.png", gui.namebox_borders, tile=gui.namebox_tile, xalign=gui.name_xalign)
-    padding gui.namebox_borders.padding
+style namebox_large is namebox:
+    xpos gui.name_large_xpos
 
 style say_label:
     properties gui.text_properties("name", accent=True)
     xalign gui.name_xalign
     yalign 0.5
+    xanchor gui.name_xalign
 
 style say_dialogue:
     properties gui.text_properties("dialogue")
@@ -192,12 +194,13 @@ screen input(prompt):
     style_prefix "input"
 
     window:
-
+        add Image("gui/textbox_no_hitch.png", xalign=0.5, yalign=1.0, yoffset=gui.input_yoffset) #for mobile OSK
         vbox:
             xalign gui.dialogue_text_xalign
             xpos gui.dialogue_xpos
             xsize gui.dialogue_width
             ypos gui.dialogue_ypos
+            yoffset gui.input_yoffset #for mobile OSK
 
             text prompt style "input_prompt"
             input id "input"
@@ -257,6 +260,21 @@ style choice_button_text is default:
 ## The quick menu is displayed in-game to provide easy access to the out-of-game
 ## menus.
 
+screen quick_button(filename, label, function):
+    button:
+        xmaximum 80
+        ymaximum 72
+        action function
+        fixed:
+            add filename xalign 0.5 yalign 0.5 zoom 1
+            text label xalign 0.5 yalign 0.5 xanchor 0.5 size 22 style "quick_button_text"
+
+# label_functions is [ [ "label", function() ], [ "foobar", foobar() ], .. ]
+# Reuse the same image string and keep things 'neat'.
+screen quick_buttons(filename, label_functions):
+    for l_f in label_functions:
+        use quick_button(filename, l_f[0], l_f[1])
+
 screen quick_menu():
 
     ## Ensure this appears on top of other screens.
@@ -268,14 +286,16 @@ screen quick_menu():
         ypos 0.977
         grid 1 4:
             style_prefix "quick"
-            xalign 0.0
-            yalign 0.0
-            #imagebutton auto "gui/button/uioptionbuttons/skip_%s.png" action Rollback()
-            imagebutton auto "gui/button/uioptionbuttons/skip_%s.png" action Skip() alternate Skip(fast=True, confirm=True)
-            imagebutton auto "gui/button/uioptionbuttons/save_%s.png" action ShowMenu('save')
-            imagebutton auto "gui/button/uioptionbuttons/auto_%s.png" action Preference("auto-forward", "toggle")
-            imagebutton auto "gui/button/uioptionbuttons/load_%s.png" action ShowMenu('load')
+            xalign -0.005
+            yalign 0.010
 
+            use quick_buttons("gui/button/uioptionbuttons/template_idle.png", \
+               [ \
+                   [ "Skip", Skip() ], \
+                   [ "Save", ShowMenu('save') ], \
+                   [ "Auto", Preference("auto-forward", "toggle") ], \
+                   [ "Load", ShowMenu('load') ] \
+               ] )
 
 screen score_menu():
     zorder 100
@@ -292,7 +312,6 @@ screen score_menu():
          text "DEBUG SCORE CARD"
 
 
-
 ## This code ensures that the quick_menu screen is displayed in-game, whenever
 ## the player has not explicitly hidden the interface.
 init python:
@@ -307,14 +326,17 @@ style quick_button:
     properties gui.button_properties("quick_button")
 
 style quick_button_text:
-    properties gui.button_text_properties("quick_button")
+    #properties gui.button_text_properties("quick_button")
+    color gui.selected_color
+    hover_color gui.hover_color
+    selected_color gui.accent_color
 
 
 ################################################################################
 ## Main and Game Menu Screens
 ################################################################################
 
-## Navigation screen ###########################################################
+## Navigation screen ##########################################################
 ##
 ## This screen is included in the main and game menus, and provides navigation
 ## to other menus, and to start the game.
@@ -332,8 +354,10 @@ screen navigation():
         textbutton _("History") action ShowMenu("history")
         textbutton _("Save") action ShowMenu("save")
         textbutton _("Load") action ShowMenu("load")
+        textbutton _("Delete") action ShowMenu("delete")
         textbutton _("Options") action ShowMenu("preferences")
         textbutton _("Extras") action ShowMenu("extras")
+        textbutton _("Return") action Return()
 
 
         if _in_replay:
@@ -345,11 +369,11 @@ screen navigation():
             textbutton _("Main Menu") action MainMenu()
             #textbutton _("Debug Score Card") action ShowMenu("score_menu")
 
-        if renpy.variant("pc"):
+        #if renpy.variant("pc"):
 
             ## The quit button is banned on iOS and unnecessary on Android and
             ## Web.
-            textbutton _("Quit") action Quit()
+            #textbutton _("Quit") action Quit()
 
 
 style navigation_button is gui_button
@@ -369,6 +393,22 @@ style navigation_button_text:
 ##
 ## https://www.renpy.org/doc/html/screen_special.html#main-menu
 
+#similar to quick_button funcs
+screen main_menu_button(filename, label, function):
+    button:
+        xmaximum 500
+        ymaximum 129
+        action function
+        fixed:
+            add filename xalign 0.5 yalign 0.5 zoom 1
+            text label xalign 0.5 yalign 0.5 xanchor 0.5
+
+# label_functions is [ [ "label", function() ], [ "foobar", foobar() ], .. ]
+# Reuse the same image string and keep things 'neat'.
+screen main_menu_buttons(filename, label_functions):
+    for l_f in label_functions:
+        use main_menu_button(filename, l_f[0], l_f[1])
+
 screen main_menu():
 
     ## This ensures that any other menu screen is replaced.
@@ -386,21 +426,25 @@ screen main_menu():
     ## The use statement includes another screen inside this one. The actual
     ## contents of the main menu are in the navigation screen.
     vbox:
-     xpos 1940
-     yalign 0.03
-     if persistent.splashtype == 1:
-          add "gui/sneedgame.png"
-     else:
-          add "gui/snootgame.png"
+        xpos 1940
+        yalign 0.03
+        if persistent.splashtype == 1:
+            add "gui/sneedgame.png"
+        else:
+            add "gui/snootgame.png"
     vbox:
-     spacing 25
-     xpos 1885
-     yalign 0.9
-     imagebutton auto "gui/button/menubuttons/startbutton_%s.png" action Start()
-     imagebutton auto "gui/button/menubuttons/loadbutton_%s.png" action ShowMenu("load")
-     imagebutton auto "gui/button/menubuttons/optionsbutton_%s.png" action ShowMenu("preferences")
-     imagebutton auto "gui/button/menubuttons/extrasbutton_%s.png" action ShowMenu("extras")
-     imagebutton auto "gui/button/menubuttons/quitbutton_%s.png" action Quit(confirm=not main_menu)
+        spacing 25
+        xpos 1885
+        yalign 0.9
+        use main_menu_buttons("gui/button/menubuttons/template_idle.png",
+            [ \
+                [ "Start", Start() ], \
+                [ "Load", ShowMenu("load") ], \
+                [ "Options", ShowMenu("preferences") ], \
+                [ "Extra", ShowMenu("extras") ], \
+                [ "Quit", Quit(confirm=not main_menu) ] \
+            ] )
+        on "show" action renpy.start_predict_screen("cg_gallery")
 
 style main_menu_frame is empty
 style main_menu_vbox is vbox
@@ -419,10 +463,13 @@ style main_menu_vbox:
     xoffset -30
     xmaximum 1200
     yalign 1.0
-    yoffset -30
+    yoffset -60
 
 style main_menu_text:
-    properties gui.text_properties("main_menu", accent=True)
+    properties gui.text_properties("main_menu") #, accent=True)
+    color gui.main_menu_color
+    hover_color gui.hover_color
+    size gui.main_menu_text_size
 
 style main_menu_title:
     properties gui.text_properties("title")
@@ -496,11 +543,6 @@ screen game_menu(title, scroll=None, yinitial=0.0):
 
     use navigation
 
-    textbutton _("Return"):
-        style "return_button"
-
-        action Return()
-
     label title
 
     if main_menu:
@@ -573,7 +615,7 @@ screen about():
 
     add gui.main_menu_background
     add gui.extras_submenu_panel
-    
+
     ## This empty frame darkens the main menu.
     frame:
         pass
@@ -582,9 +624,10 @@ screen about():
     ## contents of the main menu are in the navigation screen.
 
     vbox:
-        xpos 1240
-        ## yalign 0.03
-        ypos 800
+        yalign 0.00
+        yoffset 100
+        xoffset 80
+        xmaximum 1100
         label "[config.name!t]"
         text _("Version [config.version!t]\n")
 
@@ -592,120 +635,9 @@ screen about():
         if gui.about:
             text "[gui.about!t]\n"
 
-        text _("{size=24}Made with {a=https://www.renpy.org/}Ren'Py{/a} [renpy.version_only].\n\n[renpy.license!t]\nTo find more information about the game (and its source code) please visit {a=https://www.snootgame.xyz/}our website{/a}.{/size}")
-        textbutton "Back to Extras" action ShowMenu("extras")
-    vbox:
-        xpos 1942
-        # xalign 1.0
-        yalign 0.95
-        use extrasnavigation
-
-style main_menu_frame is empty
-style main_menu_vbox is vbox
-style main_menu_text is gui_text
-style main_menu_title is main_menu_text
-style main_menu_version is main_menu_text
-
-style main_menu_frame:
-    xsize 420
-    yfill True
-
-    background "gui/overlay/main_menu.png"
-
-style main_menu_vbox:
-    xalign 1.0
-    xoffset -30
-    xmaximum 1200
-    yalign 1.0
-    yoffset -30
-
-style main_menu_text:
-    properties gui.text_properties("main_menu", accent=True)
-
-style main_menu_title:
-    properties gui.text_properties("title")
-
-## Gallery screen ################################################################
-##
-## This screen holds the Gallery.
-##
-
-screen gallery():
-
-    tag menu
-    ## This use statement includes the game_menu screen inside this one. The
-    ## vbox child is then included inside the viewport inside the game_menu
-    ## screen.
-    style_prefix "main_menu"
-
-    add gui.main_menu_background
-    add gui.extras_submenu_panel
-    
-    frame:
-        pass
-    
-    vbox:
-        xpos 500
-        yalign 0.2
-        textbutton "Back to Extras" action ShowMenu("extras")
-
-    vbox:
-        viewport id "gallery": 
-            xpos 700
-            ypos 1000
-            style_prefix "gallery"
-            use images
-        text _("") ## Not sure why, but this keeps the vbox below working ... Renpy quirk? Does it kill scrolling in the viewport? Tune in when we have the gallery populated in the images screen.           
-
-        
-            
-    vbox:
-        xpos 1942
-        # xalign 1.0
-        yalign 0.95
-        use extrasnavigation
-
-style main_menu_frame is empty
-style main_menu_vbox is vbox
-style main_menu_text is gui_text
-style main_menu_title is main_menu_text
-style main_menu_version is main_menu_text
-
-style main_menu_frame:
-    xsize 420
-    yfill True
-
-    background "gui/overlay/main_menu.png"
-
-style main_menu_vbox:
-    xalign 1.0
-    xoffset -30
-    xmaximum 1200
-    yalign 1.0
-    yoffset -30
-
-style main_menu_text:
-    properties gui.text_properties("main_menu", accent=True)
-
-style main_menu_title:
-    properties gui.text_properties("title")
-
-
-## Images Screen ################################################################
-##
-## This is the screen that actually houses the images of the gallery
-screen images():
-    tag menu 
-    style_prefix "main_menu"
-    
-    frame:
-        pass
-    vbox:
-        xpos 600
-        ypos 600
-        text _("Placeholder for gallery.")
-
-
+        style_prefix "quick"
+        text _("{size=30}Made with {a=https://www.renpy.org/}Ren'Py{/a} [renpy.version_only].\n\n[renpy.license!t]\nTo find more information about the game (and its source code) please visit {a=https://www.snootgame.xyz/}our website{/a}.{/size}") text_align 0
+    use extrasnavigation
 
 ## Updates screen ################################################################
 ##
@@ -719,8 +651,8 @@ screen updates():
     style_prefix "main_menu"
 
     add gui.main_menu_background
-    add gui.extras_submenu_background
-    
+    add gui.extras_submenu_panel
+
     ## This empty frame darkens the main menu.
     frame:
         pass
@@ -772,31 +704,6 @@ screen updates():
         yalign 0.95
         use extrasnavigation
 
-style main_menu_frame is empty
-style main_menu_vbox is vbox
-style main_menu_text is gui_text
-style main_menu_title is main_menu_text
-style main_menu_version is main_menu_text
-
-style main_menu_frame:
-    xsize 420
-    yfill True
-
-    background "gui/overlay/main_menu.png"
-
-style main_menu_vbox:
-    xalign 1.0
-    xoffset -30
-    xmaximum 1200
-    yalign 1.0
-    yoffset -30
-
-style main_menu_text:
-    properties gui.text_properties("main_menu", accent=True)
-
-style main_menu_title:
-    properties gui.text_properties("title")
-
 ## Load and Save screens #######################################################
 ##
 ## These screens are responsible for letting the player save the game and load
@@ -819,8 +726,13 @@ screen load():
 
     use file_slots(_("Load"))
 
+screen delete():
 
-screen file_slots(title):
+    tag menu
+
+    use file_slots(_("Delete"), True)
+
+screen file_slots(title, flag=False):
 
     default page_name_value = FilePageNameInputValue(pattern=_("Page {}"), auto=_("Automatic saves"), quick=_("Quick saves"))
 
@@ -832,13 +744,13 @@ screen file_slots(title):
             ## buttons do.
             order_reverse True
 
-            ## The page name, which can be edited by clicking on a button.
+            ## The page name
             button:
                 style "page_label"
 
                 key_events True
                 xalign 0.5
-                action page_name_value.Toggle()
+                #action page_name_value.Toggle()
 
                 input:
                     style "page_label_text"
@@ -858,13 +770,16 @@ screen file_slots(title):
                     $ slot = i + 1
 
                     button:
-                        action FileAction(slot)
+                        if flag:
+                            action FileDelete(slot)
+                        else:
+                            action FileAction(slot)
 
                         has vbox
 
                         add FileScreenshot(slot) xalign 0.5
 
-                        text FileTime(slot, format=_("{#file_time}%A, %B %d %Y, %H:%M"), empty=_("empty slot")):
+                        text FileTime(slot, format=_("{#file_time}%A, %B %d %Y, %H:%M"), empty=_("Empty Slot")):
                             style "slot_time_text"
 
                         text FileSaveName(slot):
@@ -951,7 +866,7 @@ screen preferences():
                     vbox:
                         style_prefix "radio"
                         label _("Display")
-                        textbutton _("Window") action Preference("display", "window")
+                        textbutton _("Window") action Preference("display", "any window")
                         textbutton _("Fullscreen") action Preference("display", "fullscreen")
 
                 vbox:
@@ -965,6 +880,11 @@ screen preferences():
                     label _("Naughty Stuff")
                     textbutton _("Enable Lewd Images") action ToggleVariable("persistent.lewd", True, False)
 
+                vbox:
+                 style_prefix "check"
+                 label _("Requires Restart")
+                 textbutton _("Enable Forward-Scroll Movement") action ToggleVariable("persistent.scroll", True, False)
+
 
                 vbox:
                     style_prefix "check"
@@ -1199,96 +1119,36 @@ screen extras():
 
     add gui.main_menu_background
 
-    
     ## This empty frame darkens the main menu.
     frame:
         pass
 
-    ## The use statement includes another screen inside this one. The actual
-    ## contents of the main menu are in the navigation screen.
-    # vbox:
-#         xpos 1940
-#         yalign 0.03
-#         if persistent.splashtype == 1:
-#             add "gui/sneedgame.png"
-#         else:
-#             add "gui/snootgame.png"
-#     vbox:
-#         spacing 25
-#         xpos 1885
-#         yalign 0.9
-#         imagebutton auto "gui/button/menubuttons/helpbutton_%s.png" action ShowMenu("help")
-#         imagebutton auto "gui/button/menubuttons/aboutbutton_%s.png" action ShowMenu("about")
-#         imagebutton auto "gui/button/menubuttons/updatesbutton_%s.png" action ShowMenu("updates")
-#         imagebutton auto "gui/button/menubuttons/gallerybutton_%s.png" action ShowMenu("gallery")
-#         imagebutton auto "gui/button/menubuttons/returnbutton_%s.png" action ShowMenu("main_menu")
-        
-
-    
-# #    if gui.show_name:
-# #
-# #        vbox:
-# #            text "[config.version]":
-
-# #                style "main_menu_version"
-    vbox:
-        xpos 1942
-        # xalign 1.0
-        yalign 0.95
-        use extrasnavigation
-
-
-style main_menu_frame is empty
-style main_menu_vbox is vbox
-style main_menu_text is gui_text
-style main_menu_title is main_menu_text
-style main_menu_version is main_menu_text
-
-style main_menu_frame:
-    xsize 420
-    yfill True
-
-    background "gui/overlay/main_menu.png"
-
-style main_menu_vbox:
-    xalign 1.0
-    xoffset -30
-    xmaximum 1200
-    yalign 1.0
-    yoffset -30
-
-style main_menu_text:
-    properties gui.text_properties("main_menu", accent=True)
-
-style main_menu_title:
-    properties gui.text_properties("title")
-
+    use extrasnavigation
 
 ##Extras Navigation Screen #####################################################
 ##
 ##This screen is to be reused in
-screen extrasnavigation():    
+screen extrasnavigation():
     vbox:
-        #xalign 1.0
-        xpos 665
-        ypos 270
-        
+        xpos 1940
+        yalign 0.03
+
         if persistent.splashtype == 1:
             add "gui/sneedgame.png"
         else:
             add "gui/snootgame.png"
     vbox:
         spacing 25
-        # xpos 590
-        xalign 0.79
-        yalign 1.0 #0.9
-        imagebutton auto "gui/button/menubuttons/helpbutton_%s.png" action ShowMenu('help')
-        imagebutton auto "gui/button/menubuttons/aboutbutton_%s.png" action ShowMenu('about')
-        imagebutton auto "gui/button/menubuttons/updatesbutton_%s.png" action ShowMenu('updates')
-        #imagebutton auto "gui/button/menubuttons/gallerybutton_%s.png" action ShowMenu('gallery')
-        imagebutton auto "gui/button/menubuttons/gallerybutton_%s.png" action Notify('coming soon ;)')
-        imagebutton auto "gui/button/menubuttons/returnbutton_%s.png" action ShowMenu('main_menu')
-        
+        xpos 1885
+        yalign 0.9
+        use main_menu_buttons("gui/button/menubuttons/template_idle.png",
+            [
+                [ "Help", ShowMenu("help") ],
+                [ "About",  ShowMenu("about") ],
+                [ "Updates",  ShowMenu("updates") ],
+                [ "Gallery", ShowMenu("cg_gallery") ],
+                [ "Return",  ShowMenu("main_menu") ]
+            ] )
 
 ## Help screen #################################################################
 ##
@@ -1304,7 +1164,7 @@ screen help():
 
     add gui.main_menu_background
     add gui.extras_submenu_panel
-    
+
     ## This empty frame darkens the main menu.
     frame:
         pass
@@ -1317,37 +1177,30 @@ screen help():
     #     yalign 0.4
     #     spacing 23
 
-    hbox:
-        xpos 200
-        ## ypos 1000
-        yalign 0.3
-        spacing 23
-        style_prefix "help"
-        textbutton _("Keyboard") action SetScreenVariable("device", "keyboard")
-        textbutton _("Mouse") action SetScreenVariable("device", "mouse")
-        if GamepadExists():
-            textbutton _("Gamepad") action SetScreenVariable("device", "gamepad")
-        textbutton "Back to Extras" action ShowMenu("extras")
+    fixed:
+        hbox:
+            xpos 200
+            spacing 23
+            style_prefix "help"
+            textbutton _("Keyboard") action SetScreenVariable("device", "keyboard")
+            textbutton _("Mouse") action SetScreenVariable("device", "mouse")
+            if GamepadExists():
+                textbutton _("Gamepad") action SetScreenVariable("device", "gamepad")
+
+        vbox:
+            yalign 0.5
+            xpos 1100
+            if device == "keyboard":
+                use keyboard_help
+            elif device == "mouse":
+                use mouse_help
+            elif device == "gamepad":
+                use gamepad_help
+        text _("") ## again in here to keep vbox in check
+
+    use extrasnavigation
 
-    vbox:
-        xpos 1100
-        ypos 1000
-        # yalign 0.4
-        if device == "keyboard":
-            use keyboard_help
-        elif device == "mouse":
-            use mouse_help
-        elif device == "gamepad":
-            use gamepad_help
-    text _("") ## again in here to keep vbox in check
 
-    vbox:
-        xpos 1942
-        # xalign 1.0
-        yalign 0.95
-        use extrasnavigation
-    
-        
 
 screen keyboard_help():
     style_prefix "help"
@@ -1419,7 +1272,7 @@ screen mouse_help():
         text _("Rolls forward to later dialogue.")
 
 
-screen gamepad_help():    
+screen gamepad_help():
     style_prefix "help"
     hbox:
         label _("Right Trigger\nA/Bottom Button")
@@ -1471,32 +1324,6 @@ style help_label_text:
     xalign 1.0
     text_align 1.0
 
-
-style main_menu_frame is empty
-# style main_menu_vbox is vbox
-# style main_menu_text is gui_text
-# style main_menu_title is main_menu_text
-# style main_menu_version is main_menu_text
-
-style main_menu_frame:
-    xsize 420
-    yfill True
-
-    background "gui/overlay/main_menu.png"
-
-style main_menu_vbox:
-    xalign 1.0
-    xoffset -30
-    xmaximum 1200
-    yalign 1.0
-    yoffset -30
-
-style main_menu_text:
-    properties gui.text_properties("main_menu", accent=True)
-
-style main_menu_title:
-    properties gui.text_properties("title")
-
 ################################################################################
 ## Additional screens
 ################################################################################
@@ -1789,28 +1616,33 @@ style pref_vbox:
 
 ## Since a mouse may not be present, we replace the quick menu with a version
 ## that uses fewer and bigger buttons that are easier to touch.
+
+#redefine function
+screen quick_button(filename, label, function):
+    variant "small"
+    button:
+        xmaximum 180
+        ymaximum 100
+        action function
+        fixed:
+            add filename xalign 0.5 yalign 0.5 zoom 1.75
+            text label xalign 0.5 yalign 0.5 size 42 style "quick_button_text"
+
 screen quick_menu():
-    variant "touch"
-
+    variant "small"
     zorder 100
-
     if quick_menu:
-
         hbox:
             style_prefix "quick"
-
             xalign 0.5
-            yalign 1.0
-
-            textbutton _("Back") action Rollback()
-            textbutton _("Skip") action Skip() alternate Skip(fast=True, confirm=True)
-            textbutton _("Auto") action Preference("auto-forward", "toggle")
-            textbutton _("Menu") action ShowMenu()
-
-
-style window:
-    variant "small"
-    background "gui/phone/textbox.png"
+            yalign 0.975
+            use quick_buttons("gui/button/uioptionbuttons/template_idle.png", \
+               [ \
+                   [ "Back", Rollback() ], \
+                   [ "Skip", Skip() ], \
+                   [ "Auto", Preference("auto-forward", "toggle") ], \
+                   [ "Menu", ShowMenu() ] \
+               ] )
 
 style radio_button:
     variant "small"
@@ -1824,10 +1656,6 @@ style nvl_window:
     variant "small"
     background "gui/phone/nvl.png"
 
-style main_menu_frame:
-    variant "small"
-    background "gui/phone/overlay/main_menu.png"
-
 style game_menu_outer_frame:
     variant "small"
     background "gui/phone/overlay/game_menu.png"

game/script.rpy

@@ -23,9 +23,8 @@ init python:
         picked = random.randint(0,length - 1)
         fileName = files[picked]
         renpy.show(fileName, at_list=[randPosition])
-      #for issue #13 not finalized
-      #if persistent.scroll == True:
-      #   config.keymap['dismiss'].append('mousedown_5')
+      if persistent.scroll == True:
+        config.keymap['dismiss'].append('mousedown_4')
 
 transform randPosition:
   alpha 0.0
@@ -81,34 +80,40 @@ transform randPosition:
 #    attribute guitar:
 #         "guitar.webp"
 
+#Raw Image & kwargs for long textboxes
+define long_textbox_img = Image("gui/textbox_long.png", xalign=0.5, yalign=1.0)
+define long_textbox = { "window_background": long_textbox_img, 'namebox_style': "namebox_large" }
 
 #Characters
-define A = Character ('Anon',color="#36E12D",window_background="gui/textbox.png",window_xoffset=120,window_yoffset=-79,what_xpos=245,what_ypos=125,who_xpos=-120,who_ypos=110) #Light Green
-define F = Character ('Fang',color="#7E2DE1",window_background="gui/textbox.png",window_xoffset=120,window_yoffset=-79,what_xpos=245,what_ypos=125,who_xpos=-125,who_ypos=111) #Purple
-define Lucy = Character ('Lucy',color="#7E2DE1",window_background="gui/textbox.png",window_xoffset=120,window_yoffset=-79,what_xpos=245,what_ypos=125,who_xpos=-125,who_ypos=111) #Purple
-define Ro = Character ('Rosa',color="#E12D36",window_background="gui/textbox.png",window_xoffset=120,window_yoffset=-79,what_xpos=245,what_ypos=125,who_xpos=-125,who_ypos=111) #Red
-define St = Character ('Stella',color="#E17E2D",window_background="gui/textbox.png",window_xoffset=120,window_yoffset=-79,what_xpos=245,what_ypos=125,who_xpos=-125,who_ypos=111) #orang
-define N = Character ('Naomi',color="#2D36E1",window_background="gui/textbox.png",window_xoffset=120,window_yoffset=-79,what_xpos=245,what_ypos=125,who_xpos=-125,who_ypos=111) #Blue
-define Nas = Character ('Naser',color="#501D5E",window_background="gui/textbox.png",window_xoffset=120,window_yoffset=-79,what_xpos=245,what_ypos=125,who_xpos=-125,who_ypos=111) #Dark Purple
-define T = Character ('Trish',color="#8A0036",window_background="gui/textbox.png",window_xoffset=120,window_yoffset=-79,what_xpos=245,what_ypos=125,who_xpos=-125,who_ypos=111) #Maroon
-define Attendant = Character ('Attendant',color="#8A0036",window_background="gui/textbox.png",window_xoffset=120,window_yoffset=-79,what_xpos=245,what_ypos=125,who_xpos=-155,who_ypos=111) #Maroon
-define Sp = Character ('Spears',color="#7B8A00",window_background="gui/textbox.png",window_xoffset=120,window_yoffset=-79,what_xpos=245,what_ypos=125,who_xpos=-125,who_ypos=111) #Dark Yellow
-define Re = Character ('Reed',color="#368A00",window_background="gui/textbox.png",window_xoffset=120,window_yoffset=-79,what_xpos=245,what_ypos=125,who_xpos=-125,who_ypos=111) #Dark Green
-define D = Character ('Driver',color="#098A00",window_background="gui/textbox.png",window_xoffset=120,window_yoffset=-79,what_xpos=245,what_ypos=125,who_xpos=-125,who_ypos=111)
-define FM = Character ('Fangs Mom',color="#EA1A84",window_background="gui/textbox.png",window_xoffset=120,window_yoffset=-79,what_xpos=245,what_ypos=125,who_xpos=-170,who_ypos=108)
-define FD = Character ('Fangs Dad',color="#1A1CEA",window_background="gui/textbox.png",window_xoffset=120,window_yoffset=-79,what_xpos=245,what_ypos=125,who_xpos=-170,who_ypos=108)
-define Tsuki = Character ('Mr. Tsuki',color="#CEAF23",window_background="gui/textbox.png",window_xoffset=120,window_yoffset=-79,what_xpos=245,what_ypos=125,who_xpos=-150,who_ypos=111)
-define unknown = Character ('    (???)',color="#000000",window_background="gui/textbox.png",window_xoffset=120,window_yoffset=-79,what_xpos=245,what_ypos=125,who_xpos=-170,who_ypos=110)
-define jingo = Character ('Mr. Jingo',color="#42C053",window_background="gui/textbox.png",window_xoffset=120,window_yoffset=-79,what_xpos=245,what_ypos=125,who_xpos=-170,who_ypos=110)
-define MaitD = Character ('Maitre D',color="#42C053",window_background="gui/textbox.png",window_xoffset=120,window_yoffset=-79,what_xpos=245,what_ypos=125,who_xpos=-170,who_ypos=110)
-define Moe = Character('    Moe',color="#42C053",window_background="gui/textbox.png",window_xoffset=120,window_yoffset=-79,what_xpos=245,what_ypos=125,who_xpos=-170,who_ypos=110)
-define Vince = Character ('Vince',color="#3C770D",window_background="gui/textbox.png",window_xoffset=120,window_yoffset=-79,what_xpos=245,what_ypos=125,who_xpos=-125,who_ypos=111) #Dark Green
-define Waitress = Character ('Waitress',color="#C89B19",window_background="gui/textbox.png",window_xoffset=120,window_yoffset=-79,what_xpos=245,what_ypos=125,who_xpos=-140,who_ypos=111) #Gold
+define A = Character ('Anon',color="#36E12D") #Light Green
+define F = Character ('Fang',color="#7E2DE1") #Purple
+define Lucy = Character ('Lucy',color="#7E2DE1") #Purple
+define Ro = Character ('Rosa',color="#E12D36") #Red
+define St = Character ('Stella',color="#E17E2D") #orang
+define N = Character ('Naomi',color="#2D36E1") #Blue
+define Nas = Character ('Naser',color="#501D5E") #Dark Purple
+define T = Character ('Trish',color="#8A0036") #Maroon
+define Attendant = Character ('Attendant',color="#8A0036") #Maroon
+define Sp = Character ('Spears',color="#7B8A00") #Dark Yellow
+define Re = Character ('Reed',color="#368A00") #Dark Green
+define D = Character ('Driver',color="#098A00")
+define FM = Character ('Fangs Mom',color="#EA1A84")
+define FD = Character ('Fangs Dad',color="#1A1CEA")
+define Tsuki = Character ('Mr. Tsuki',color="#CEAF23")
+define unknown = Character ('(???)',color="#000000")
+define jingo = Character ('Mr. Jingo',color="#42C053")
+define MaitD = Character ('Maitre D',color="#42C053")
+define Moe = Character('Moe',color="#42C053")
+define Vince = Character ('Vince',color="#3C770D") #Dark Green
+define Waitress = Character ('Waitress',color="#C89B19") #Gold
 #long TB chars
-define AnonAndFang = Character('  Anon and Fang',color="34F313",window_background="gui/textbox_long.png",window_xoffset=120,window_yoffset=-79,what_xpos=245,what_ypos=125,who_xpos=-170,who_ypos=110)
-define SV = Character ('Street Vendor',color="#420046",window_background="gui/textbox_long.png",window_xoffset=120,window_yoffset=-79,what_xpos=245,what_ypos=125,who_xpos=-145,who_ypos=110)
-define carl = Character ('Mr. Carldewskii',color="#4963A5",window_background="gui/textbox_long.png",window_xoffset=120,window_yoffset=-79,what_xpos=245,what_ypos=125,who_xpos=-170,who_ypos=110)
-define Drf = Character ('  Dr. Fernsworth',color="#4963A5",window_background="gui/textbox_long.png",window_xoffset=120,window_yoffset=-79,what_xpos=245,what_ypos=125,who_xpos=-170,who_ypos=110)
+
+define AnonAndFang = Character('Anon and Fang',color="34F313", **long_textbox)
+define SV = Character ('Street Vendor',color="#420046", **long_textbox)
+define carl = Character ('Mr. Carldewskii',color="#4963A5", **long_textbox)
+define Drf = Character ('Dr. Fernsworth',color="#4963A5", **long_textbox)
+define FRT = Character ('Fang Reed & Trish',color="#4963A5", **long_textbox)
+
 
 #Extra image translations
 #siloettes

game/script/2.fourth-day-of-school.rpy

@@ -1377,7 +1377,7 @@ label chapter_2:
 
     A "Well…"
 
-    "Fang Reed and Trish" "Ohfuck. Sorry Anon, we gotta bail."
+    FRT "Ohfuck. Sorry Anon, we gotta bail."
     show fang neutral flip
     show trish neutral flip
     hide trish with moveoutright
@@ -1513,4 +1513,4 @@ label chapter_2:
 
     scene black with fade
 
-    return
+    return

game/src/cg_gallery.rpy

@@ -0,0 +1,100 @@
+init python:
+
+    # CONST PARAMS
+    GALLERY_COLS = 3
+    GALLERY_CGS_PER_PAGE = 6
+    PREFERRED_WIDTH = 432 #px (1920 * 0.225)
+    PREFERRED_HEIGHT = 243 #px (1080 * 0.225)
+    DEFAULT_WIDTH_SCALE_RATIO = round(float(PREFERRED_WIDTH) / float(1920), 4)
+    DEFAULT_HEIGHT_SCALE_RATIO = round(float(PREFERRED_HEIGHT) / float(1080), 4)
+    NOT_UNLOCKED_COVER = im.FactorScale("gui/gallery/unlocked_cg_button_cover.png", DEFAULT_WIDTH_SCALE_RATIO, DEFAULT_HEIGHT_SCALE_RATIO)
+    ACCEPTED_EXTENSIONS = ["jpg", "png"]
+    CG_PATHS = "images/cgs/"
+
+    # GALLERY OBJECT
+    # Handles unlockables via ren'py
+    g = Gallery()
+    g.transition = dissolve
+    g.locked_button = NOT_UNLOCKED_COVER
+
+    # GALLERY ITEMS
+    # Data structure that holds the data for each cg and button
+    # item is the key in the Gallery
+    # ext is the file extension
+    # { item: string; cg: Displayable; ext: string }[]
+    galleryItems = []
+
+    # Make a scaled cg button
+    # (cg: string; ext: string; w: float; h: float; unlocked?: boolean): Displayable
+    def cg(fname, ext, w, h):
+        scaleFactor = getBoxNormalizerRatio(w, h)
+        return im.FactorScale(CG_PATHS + fname + "." + ext, scaleFactor["x"], scaleFactor["y"], False)
+
+    # Create an object in g:Gallery, add to galleryItems
+    # (imageName: string; ext: string; w: float; h: float) -> None
+    def addGalleryItem(imageName, ext, w, h):
+        g.button(imageName)
+        g.image(imageName)
+
+        horizontalPan = Pan((w - 1920, h - 1080), (0, h - 1080), 30.0)
+        verticalPan = Pan((w - 1920, h - 1080), (w - 1920, 0), 30.0)
+        g.transform(horizontalPan if w > h else verticalPan) #TODO: niceify
+
+        str = "renpy.seen_image('"+imageName+"')"
+        g.condition(str)
+
+        galleryItems.append({
+            "item": imageName,
+            "cg": cg(imageName, ext, w, h),
+            "ext": ext
+        })
+        return
+
+    # Reads /images/cgs dir for all image files
+    # Populates g:Gallery and galleryItems
+    # Appends extra spaces at the end
+    # () -> None
+    def loadGallery():
+
+        list_img = renpy.list_images()
+
+        # Add each image to the gallery
+        for str in list_img:
+            _str = CG_PATHS+str+"."+ACCEPTED_EXTENSIONS[0]
+            if renpy.loadable(_str): #brute force
+                image = renpy.image_size(Image(_str))
+                addGalleryItem(str, ACCEPTED_EXTENSIONS[0], image[0], image[1])
+        return
+
+
+    # Returns what params to call im.FactorScale with for cg button size
+    # Basically the delta diff dimensions
+    # (w: int; h: int) -> { x: float; y: float }
+    def getBoxNormalizerRatio(w, h):
+        x = round(float(PREFERRED_WIDTH) / float(w), 4)
+        y = round(float(PREFERRED_HEIGHT) / float(h), 4)
+
+        return { "x": x, "y": y }
+
+    # Call to loading the gallery
+    loadGallery()
+
+## CG Gallery screen ########################################################
+## A screen that shows the image gallery
+screen cg_gallery():
+    python:
+        items = len(galleryItems)
+        galleryRows = (items / GALLERY_COLS) + 1
+        extraSpaces = GALLERY_COLS - (items % GALLERY_COLS)
+    tag menu
+    use game_menu(_("Gallery"), scroll="viewport"):
+        grid GALLERY_COLS galleryRows:
+            spacing 8
+            for item in galleryItems:
+#                vbox:
+#                    text item["item"] size 8
+                add g.make_button(item["item"], item["cg"], xalign = 0.5, yalign = 0.5)
+            # Add empty items to fill grid after last cg button
+            for i in range(0, extraSpaces):
+                null height 20
+