Merge pull request #1953 from Beuc/variants-web

web: set variants according to what the browser runs on

gui/game/screens.rpy

@@ -323,12 +323,14 @@ screen navigation():
 
         textbutton _("About") action ShowMenu("about")
 
-        if renpy.variant("pc"):
+        if renpy.variant("pc") or (renpy.variant("web") and not renpy.variant("mobile")):
 
             ## Help isn't necessary or relevant to mobile devices.
             textbutton _("Help") action ShowMenu("help")
 
-            ## The quit button is banned on iOS and unnecessary on Android.
+        if renpy.variant("pc"):
+
+            ## The quit button is banned on iOS and unnecessary on Android and Web.
             textbutton _("Quit") action Quit(confirm=not main_menu)
 
 
@@ -725,7 +727,7 @@ screen preferences():
             hbox:
                 box_wrap True
 
-                if renpy.variant("pc"):
+                if renpy.variant("pc") or renpy.variant("web"):
 
                     vbox:
                         style_prefix "radio"

renpy/main.py

@@ -228,11 +228,56 @@ def choose_variants():
             renpy.config.variants.insert(0, 'phone')
             renpy.config.variants.insert(0, 'small')
 
-    else:
-        if renpy.emscripten:
-            renpy.config.variants.insert(0, 'web')
+    elif renpy.emscripten:
+        import emscripten, re
+
+        # web
+        renpy.config.variants.insert(0, 'web')
+
+        # mobile
+        userAgent = emscripten.run_script_string(r'''navigator.userAgent''')
+        mobile = re.search('Mobile|Android|iPad|iPhone', userAgent)
+        if mobile:
+            renpy.config.variants.insert(0, 'mobile')
+        # Reserve android/ios for when the OS API is exposed
+        #if re.search('Android', userAgent):
+        #    renpy.config.variants.insert(0, 'android')
+        #if re.search('iPad|iPhone', userAgent):
+        #    renpy.config.variants.insert(0, 'ios')
+
+        # touch
+        touch = emscripten.run_script_int(r'''
+          ('ontouchstart' in window) ||
+            (navigator.maxTouchPoints > 0) ||
+            (navigator.msMaxTouchPoints > 0)''')
+        if touch == 1:
+            # mitigate hybrids (e.g. ms surface) by restricting touch to mobile
+            if mobile:
+                renpy.config.variants.insert(0, 'touch')
+
+        # large/medium/small
+        # tablet/phone
+        # screen.width/height is auto-adjusted by browser,
+        # so it can be used as a physical sizereference
+        # (see also window.devicePixelRatio)
+        # e.g. Galaxy S5:
+        # - physical / OpenGL: 1080x1920
+        # - web screen: 360x640 w/ devicePixelRatio=3
+        ref_width  = emscripten.run_script_int(r'''screen.width''')
+        ref_height = emscripten.run_script_int(r'''screen.height''')
+        # medium reference point: ipad 1024x768, ipad pro 1336x1024 (browser "pixels")
+        if mobile:
+            if (ref_width < 768 or ref_height < 768):
+                renpy.config.variants.insert(0, 'small')
+                renpy.config.variants.insert(0, 'phone')
+            else:
+                renpy.config.variants.insert(0, 'medium')
+                renpy.config.variants.insert(0, 'tablet')
         else:
-            renpy.config.variants.insert(0, 'pc')
+            renpy.config.variants.insert(0, 'large')
+
+    else:
+        renpy.config.variants.insert(0, 'pc')
 
         renpy.config.variants.insert(0, 'large')
 

sphinx/source/screens.rst

@@ -2035,16 +2035,15 @@ and choosing the entries that apply to the current platform.
    also defined).
 
 ``"mobile"``
-   Defined on mobile platforms, such as Android and iOS.
+   Defined on mobile platforms, such as Android, iOS and mobile web browsers.
 
 ``"pc"``
    Defined on Windows, Mac OS X, and Linux. A PC is expected to have
    a mouse and keyboard present, to allow buttons to be hovered, and
    to allow precise pointing.
 
 ``"web"``
-    Defined when running inside a web browser. There are no guarantees
-    as to what the hardware that runs the web browser is like.
+   Defined when running inside a web browser.
 
 ``None``
    Always defined.

the_question/game/screens.rpy

@@ -318,12 +318,14 @@ screen navigation():
 
         textbutton _("About") action ShowMenu("about")
 
-        if renpy.variant("pc"):
+        if renpy.variant("pc") or (renpy.variant("web") and not renpy.variant("mobile")):
 
             ## Help isn't necessary or relevant to mobile devices.
             textbutton _("Help") action ShowMenu("help")
 
-            ## The quit button is banned on iOS and unnecessary on Android.
+        if renpy.variant("pc"):
+
+            ## The quit button is banned on iOS and unnecessary on Android and Web.
             textbutton _("Quit") action Quit(confirm=not main_menu)
 
 
@@ -769,7 +771,7 @@ screen preferences():
             hbox:
                 box_wrap True
 
-                if renpy.variant("pc"):
+                if renpy.variant("pc") or renpy.variant("web"):
 
                     vbox:
                         style_prefix "radio"

tutorial/game/screens.rpy

@@ -328,12 +328,14 @@ screen navigation():
 
         textbutton _("About") action ShowMenu("about")
 
-        if renpy.variant("pc"):
+        if renpy.variant("pc") or (renpy.variant("web") and not renpy.variant("mobile")):
 
             ## Help isn't necessary or relevant to mobile devices.
             textbutton _("Help") action ShowMenu("help")
 
-            ## The quit button is banned on iOS and unnecessary on Android.
+        if renpy.variant("pc"):
+
+            ## The quit button is banned on iOS and unnecessary on Android and Web.
             textbutton _("Quit") action Quit(confirm=not main_menu)
 
 
@@ -736,7 +738,7 @@ screen preferences():
             hbox:
                 box_wrap True
 
-                if renpy.variant("pc"):
+                if renpy.variant("pc") or renpy.variant("web"):
 
                     vbox:
                         style_prefix "radio"