Show messages that IE9 and IE10 are deprecated, fix and clean existing systems

* Trim index_old_browser.html (shown on /play/) to simple page
* Fix useragent middleware to attach where needed
* Show IE alert on all pages on application init
This commit is contained in:
Scott Erickson 2016-05-03 14:05:55 -07:00
parent 92de821b76
commit 1489df3f23
3 changed files with 25 additions and 89 deletions

View file

@ -1,96 +1,33 @@
<!doctype html>
<!--[if lt IE 7]> <html class="lt-ie10 lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie10 lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie10 lt-ie9" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="lt-ie10" lang="en"> <![endif]-->
<!--[if !IE]><!--><html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>CodeCombat - Learn how to code by playing a game</title>
<meta name="description" content="Learn programming with a multiplayer live coding strategy game for beginners. Learn Python or JavaScript as you defeat ogres, solve mazes, and level up. Free, open source HTML5 game!">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<meta property="og:title" content="CodeCombat: Learn to Code by Playing a Game">
<meta property="og:url" content="http://codecombat.com">
<meta property="og:type" content="game">
<meta property="og:image" content="http://codecombat.com/images/pages/home/play_img.png">
<meta property="og:site_name" content="CodeCombat">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="CodeCombat: Learn to Code by Playing a Game">
<meta name="twitter:url" content="http://codecombat.com">
<meta name="twitter:site" content="CodeCombat">
<meta name="twitter:image:src" content="http://codecombat.com/images/pages/base/logo_square_250.png">
<meta name="twitter:description" content="Learn programming with a multiplayer live coding strategy game for beginners. Learn Python or JavaScript as you defeat ogres, solve mazes, and level up. Free, open source HTML5 game!">
<link href="https://plus.google.com/115285980638641924488" rel="publisher" />
<link rel="shortcut icon" href="/images/favicon.ico">
<link rel="stylesheet" href="/stylesheets/app.css">
<script src="/lib/ace/ace.js"></script>
<!--[if IE 9]><script src="/javascripts/box2d.js"></script><![endif]-->
<script src="/javascripts/vendor.js"></script>
<script src="/javascripts/aether.js"></script>
<script src="/javascripts/app.js"></script> <!-- it's all Backbone! -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body class="nano clearfix">
<header class="header-container" id="header-container"></header>
<div id="page-container">
<div id="home-view">
<div id="fb-root"></div>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="content clearfix">
<a class="brand" href="/"><img alt="CodeCombat" src="/images/pages/base/logo.png" title="CodeCombat"></a>
<ul class="navbar-link-text nav pull-right">
<li class="blog"><a data-i18n="nav.blog" href="http://blog.codecombat.com/">Blog</a></li>
<li class="forum"><a data-i18n="nav.forum" href="http://discourse.codecombat.com/">Forum</a></li>
<div class="container">
<h1>CodeCombat requires a modern browser to play</h1>
<ul class="list-group">
<li class="list-group-item">Chrome 20+</li>
<li class="list-group-item">Firefox 21+</li>
<li class="list-group-item">Safari 6+</li>
<li class="list-group-item">Internet Explorer 11+ or Edge</li>
</ul>
</div>
</div>
</div>
<div id="outer-content-wrapper">
<div id="inner-content-wrapper">
<div class="main-content-area">
<div>
<del><h1 data-i18n="home.slogan" id="site-slogan">Learn to Code JavaScript by Playing a Game</h1></del>
<div id="front-screenshot"><img alt="" src="/images/pages/home/front_screenshot_01.png"></div>
</div>
<div class="clearfix"></div>
<div class="alert">
<h1>CodeCombat requires a modern browser to play:</h1>
<ul>
<h1><li>Chrome 20+</li></h1>
<h1><li>Firefox 21+</li></h1>
<h1><li>Safari 6+</li></h1>
<h1><li>Internet Explorer 10+</li></h1>
</ul>
<h2>It looks like you have an older browser or a mobile device, so it won't work. Sorry!</h2>
<hr />
<div class="text-center">
<h2><a href="/">Return Home</a></h2>
or
<h2><a href="?try-old-browser-anyway=true">Try Anyway</a></h2>
</div>
</div>
</div>
</div>
<div class="footer">
</div>
</div>
</div>
<div id="modal-wrapper"></div>
</body>
</html>

View file

@ -81,12 +81,11 @@
onLoad = function() {
try {
// IE8 warning
// IE10 warning
var htmlElement = document.querySelector("html");
if (htmlElement) {
var classAttribute = htmlElement.getAttribute('class');
if (classAttribute && classAttribute.indexOf('lt-ie9') >= 0) {
alert("CodeCombat does not run in Internet Explorer 8 or older. Sorry!");
if ($.browser.msie && $.browser.versionNumber < 11) {
alert("CodeCombat does not run in Internet Explorer 10 or older. Sorry!");
}
}

View file

@ -90,7 +90,6 @@ setupExpressMiddleware = (app) ->
app.use(express.static(path.join(__dirname, 'public'), maxAge: 0)) # CloudFlare overrides maxAge, and we don't want local development caching.
setupProxyMiddleware app # TODO: Flatten setup into one function. This doesn't fit its function name.
app.use(useragent.express())
app.use(express.favicon())
app.use(express.cookieParser())
@ -152,9 +151,10 @@ setupMiddlewareToSendOldBrowserWarningWhenPlayersViewLevelDirectly = (app) ->
return true if b is 'Chrome' and v < 17
return true if b is 'Safari' and v < 6
return true if b is 'Firefox' and v < 21
return true if b is 'IE' and v < 10
return true if b is 'IE' and v < 11
false
app.use('/play/', useragent.express())
app.use '/play/', (req, res, next) ->
return next() if req.query['try-old-browser-anyway'] or not isOldBrowser req
res.sendfile(path.join(__dirname, 'public', 'index_old_browser.html'))