Adds warning banner for desktop users

lukebatchelor · Oct 15, 2018 · 99ddb31 · 99ddb31
1 parent f6b9e52
commit 99ddb31
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -4,6 +4,8 @@ A super simple "rhythm" game (with no sound) built entirely out of HTML and CSS
 
 ![Example Gameplay](./gameplay.gif)
 
+> **Important note:** This game works best on mobiles or by having dev tools open with mobile emulation turned on. This is because click events on moving targets are treated very differently to touch events and make the game pretty much unplayable.
+
 ## Why?
 
 I've been building a series of these silly experiments to explore what is possible using only CSS on a page.

diff --git a/build-html.js b/build-html.js
@@ -33,6 +33,11 @@ const htmlTemplate = `
     <link href="./max-streak-rules.css" rel="stylesheet"></head>
   </head>
   <body>
+  <div class="warningBanner">
+    This page is best viewed on mobile or with dev tools open (and mobile emulation turned on)<br>
+    This is because click events on moving targets are treated very different to touch events, and make the game unplayable. <br>
+    Enjoy!
+  </div>
   <div class="app">
     <h1>CSS Rhythm Game</h1>
     <p>This game is built entirely out of HTML and CSS, no JavaScript™ at all!</p>

diff --git a/styles.less b/styles.less
@@ -13,6 +13,19 @@ body, html {
   box-sizing: border-box;
 }
 
+.warningBanner {
+  background-color: red;
+  text-align: center;
+  padding: 15px;
+  height:80px;
+}
+
+@media only screen 
+  and (min-device-width : 320px) 
+  and (max-device-width : 480px){ 
+  .warningBanner { display: none;}
+}
+
 .maxStreakBoard {
   position: absolute;
   top: 225px;
-Original file line number
+Diff line change
@@ Expand Up @@
     ![Example Gameplay](./gameplay.gif)
+    > **Important note:** This game works best on mobiles or by having dev tools open with mobile emulation turned on. This is because click events on moving targets are treated very differently to touch events and make the game pretty much unplayable.
     ## Why?
     I've been building a series of these silly experiments to explore what is possible using only CSS on a page.
@@ Expand Down @@