mirror of https://github.com/mosra/magnum.git
Browse Source
What's new: * The style is consistent with the dark m.css theme that's used on the website and so provides a bit better "brand identity". * The canvas is responsive, looking properly on mobile and scaling down with aspect ratio preservation if the screen is too narrow. * It's now possible to override canvas size and aspect ratio or make it "fullscreen", i.e. occupying the whole browser window. * If the app crashes, a helpful message is printed instead of everything just being stuck.pull/272/head
Vladimír Vondruš
8 years ago
10 changed files with 469 additions and 154 deletions
@ -1,18 +1,22 @@
|
||||
<!DOCTYPE html> |
||||
<html xmlns="http://www.w3.org/1999/xhtml"> |
||||
<head> |
||||
<title>Magnum AL Info</title> |
||||
<meta charset="utf-8" /> |
||||
<link rel="stylesheet" href="WebApplication.css" /> |
||||
</head> |
||||
<body> |
||||
<h1>Magnum AL Info</h1> |
||||
<div id="listener"> |
||||
<html> |
||||
<head> |
||||
<meta charset="UTF-8" /> |
||||
<title>Magnum AL Info</title> |
||||
<link rel="stylesheet" href="WebApplication.css" /> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||
</head> |
||||
<body> |
||||
<h1>Magnum AL Info</h1> |
||||
<div id="container"> |
||||
<div id="sizer"><div id="expander"><div id="listener"> |
||||
<canvas id="module" class="hidden"></canvas> |
||||
<pre id="log"></pre> |
||||
<div id="status">Initialization...</div> |
||||
<div id="statusDescription"></div> |
||||
<div id="status-description"></div> |
||||
<script src="WindowlessEmscriptenApplication.js"></script> |
||||
<script async="async" src="magnum-al-info.js"></script> |
||||
</div> |
||||
</body> |
||||
</div></div></div> |
||||
</div> |
||||
</body> |
||||
</html> |
||||
|
||||
@ -1,18 +1,28 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="UTF-8" /> |
||||
<title>Magnum Sdl2Application Test</title> |
||||
<link rel="stylesheet" href="WebApplication.css" /> |
||||
</head> |
||||
<body> |
||||
<h1>Magnum Sdl2Application Test</h1> |
||||
<div id="listener"> |
||||
<canvas id="module"></canvas> |
||||
<head> |
||||
<meta charset="UTF-8" /> |
||||
<title>Magnum Sdl2Application Test</title> |
||||
<link rel="stylesheet" href="WebApplication.css" /> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||
</head> |
||||
<body> |
||||
<h1>Magnum Sdl2Application Test</h1> |
||||
<div id="container"> |
||||
<div id="sizer"><div id="expander"><div id="listener"> |
||||
<canvas id="module" tabindex="0"></canvas> |
||||
<div id="status">Initialization...</div> |
||||
<div id="statusDescription"></div> |
||||
<div id="status-description"></div> |
||||
<script src="EmscriptenApplication.js"></script> |
||||
<script async="async" src="PlatformSdl2ApplicationTest.js"></script> |
||||
</div> |
||||
</body> |
||||
<script> |
||||
/* To test keyboard capture directly on the canvas */ |
||||
Module.keyboardListeningElement = document.getElementById('module'); |
||||
Module.canvas.addEventListener('mousedown', function(event) { |
||||
event.target.focus(); |
||||
}); |
||||
</script> |
||||
</div></div></div> |
||||
</div> |
||||
</body> |
||||
</html> |
||||
|
||||
@ -1,19 +1,22 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="UTF-8" /> |
||||
<title>Magnum WindowlessEglApplication Test</title> |
||||
<link rel="stylesheet" href="WebApplication.css" /> |
||||
</head> |
||||
<body> |
||||
<h1>Magnum WindowlessEglApplication Test</h1> |
||||
<div id="listener"> |
||||
<head> |
||||
<meta charset="UTF-8" /> |
||||
<title>Magnum WindowlessEglApplication Test</title> |
||||
<link rel="stylesheet" href="WebApplication.css" /> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||
</head> |
||||
<body> |
||||
<h1>Magnum WindowlessEglApplication Test</h1> |
||||
<div id="container" class=""> |
||||
<div id="sizer"><div id="expander"><div id="listener"> |
||||
<canvas id="module" class="hidden"></canvas> |
||||
<pre id="log"></pre> |
||||
<div id="status">Initialization...</div> |
||||
<div id="statusDescription"></div> |
||||
<div id="status-description"></div> |
||||
<script src="WindowlessEmscriptenApplication.js"></script> |
||||
<script async="async" src="PlatformWindowlessEglApplicationTest.js"></script> |
||||
</div> |
||||
</body> |
||||
</div></div></div> |
||||
</div> |
||||
</body> |
||||
</html> |
||||
|
||||
@ -1,65 +1,155 @@
|
||||
/* |
||||
This file is part of Magnum. |
||||
|
||||
Copyright © 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018 |
||||
Vladimír Vondruš <mosra@centrum.cz> |
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a |
||||
copy of this software and associated documentation files (the "Software"), |
||||
to deal in the Software without restriction, including without limitation |
||||
the rights to use, copy, modify, merge, publish, distribute, sublicense, |
||||
and/or sell copies of the Software, and to permit persons to whom the |
||||
Software is furnished to do so, subject to the following conditions: |
||||
|
||||
The above copyright notice and this permission notice shall be included |
||||
in all copies or substantial portions of the Software. |
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL |
||||
THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING |
||||
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER |
||||
DEALINGS IN THE SOFTWARE. |
||||
*/ |
||||
|
||||
/* Colors kept in sync with m.css dark theme, http://mcss.mosra.cz */ |
||||
|
||||
*, ::before, ::after { box-sizing: border-box; } |
||||
|
||||
body { |
||||
margin: 0px; |
||||
padding: 0px; |
||||
font-family: sans-serif; |
||||
background-color: #111111; |
||||
color: #aaaaaa; |
||||
margin: 1rem; |
||||
padding: 0; |
||||
font-family: sans-serif; |
||||
font-size: 16px; |
||||
background-color: #2f363f; /*var(--background-color)*/ |
||||
color: #dcdcdc; /*var(--color)*/ |
||||
} |
||||
|
||||
h1 { |
||||
text-align: center; |
||||
font-size: 20px; |
||||
text-align: center; |
||||
font-size: 1.75rem; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
/* #container makes the canvas occupy the whole page width |
||||
#sizer centers it |
||||
#expander does aspect ratio preservation |
||||
#listener snaps to #expander edges |
||||
#listener::before does the border, which finally goes below the canvas */ |
||||
#container { |
||||
margin: 1rem -1rem 1rem -1rem; |
||||
} |
||||
#sizer { |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
max-width: 100%; |
||||
width: 640px; |
||||
} |
||||
#expander { |
||||
position: relative; |
||||
} |
||||
#listener { |
||||
border-style: solid; |
||||
border-color: #333333; |
||||
border-width: 1px; |
||||
padding: 1px; |
||||
width: 640px; |
||||
height: 480px; |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
margin-top: 20px; |
||||
margin-bottom: 20px; |
||||
position: relative; |
||||
position: absolute; |
||||
top: 0; |
||||
bottom: 0; |
||||
left: 0; |
||||
right: 0; |
||||
} |
||||
#listener::before { |
||||
position: absolute; |
||||
content: ' '; |
||||
top: 0; |
||||
bottom: 0; |
||||
left: 0; |
||||
right: 0; |
||||
z-index: -1; |
||||
border-style: solid; |
||||
border-width: 0.125rem; |
||||
border-radius: 0.2rem; /*var(--border-radius)*/ |
||||
border-color: #405363; /*var(--line-color)*/ |
||||
} |
||||
|
||||
#module { |
||||
width: 640px; |
||||
height: 480px; |
||||
z-index: 10; |
||||
/* Canvas size and aspect ratio knobs */ |
||||
#container.fullsize { |
||||
position: absolute; |
||||
top: 0; |
||||
bottom: 0; |
||||
left: 0; |
||||
right: 0; |
||||
margin: 0; |
||||
} |
||||
#container.fullsize #sizer, #container.fullsize #expander { |
||||
width: 100%; height: 100%; |
||||
} |
||||
|
||||
#status { |
||||
position: absolute; |
||||
width: 640px; |
||||
text-align: center; |
||||
top: 200px; |
||||
font-size: 30px; |
||||
font-weight: bold; |
||||
z-index: 9; |
||||
#container.width-240 #sizer { width: 240px; } |
||||
#container.width-320 #sizer { width: 320px; } |
||||
#container.width-360 #sizer { width: 360px; } |
||||
#container.width-480 #sizer { width: 480px; } |
||||
#container.width-600 #sizer { width: 600px; } |
||||
#container.width-640 #sizer, #container #sizer { |
||||
width: 640px; /* default */ |
||||
} |
||||
#container.width-800 #sizer { width: 800px; } |
||||
|
||||
#statusDescription { |
||||
position: absolute; |
||||
width: 640px; |
||||
text-align: center; |
||||
top: 250px; |
||||
font-size: 15px; |
||||
z-index: 9; |
||||
#container.aspect-1-1 #expander { padding-bottom: 100%; } |
||||
#container.aspect-4-3 #expander, #container:not(.fullsize) #expander { |
||||
padding-bottom: 75%; /* default */ |
||||
} |
||||
#container.aspect-3-4 #expander { padding-bottom: 133.3333%; } |
||||
#container.aspect-3-2 #expander { padding-bottom: 66.6667%; } |
||||
#container.aspect-2-3 #expander { padding-bottom: 150%; } |
||||
#container.aspect-16-9 #expander { padding-bottom: 56.25% } |
||||
#container.aspect-9-16 #expander { padding-bottom: 177.7778% } |
||||
#container.aspect-2-1 #expander { padding-bottom: 50%; } |
||||
#container.aspect-1-2 #expander { padding-bottom: 200%; } |
||||
|
||||
#module, pre#log { |
||||
max-width: 100%; |
||||
width: 100%; |
||||
height: 100%; |
||||
z-index: 10; |
||||
border-radius: 0.2rem; /*var(--border-radius)*/ |
||||
} |
||||
#module { |
||||
margin-bottom: -0.25rem; /* otherwise there's scrollbar w/ fullsize (why?) */ |
||||
} |
||||
#status, #status-description { |
||||
position: absolute; |
||||
text-align: center; |
||||
width: 100%; |
||||
z-index: 9; |
||||
} |
||||
#status { |
||||
top: 10%; |
||||
font-size: 1.5rem; |
||||
font-weight: 600; |
||||
} |
||||
#status-description { |
||||
top: 22.5%; |
||||
padding-left: 2rem; |
||||
padding-right: 2rem; |
||||
} |
||||
#module.hidden { |
||||
display: none; |
||||
display: none; |
||||
} |
||||
|
||||
#log { |
||||
width: 640px; |
||||
height: 480px; |
||||
overflow-y: scroll; |
||||
overflow-x: hidden; |
||||
white-space: pre-wrap; |
||||
z-index: 10; |
||||
margin: 0; |
||||
pre#log { |
||||
padding: 0.5rem 1rem; |
||||
overflow-x: auto; |
||||
margin-top: 0; /* stupid defaults */ |
||||
color: #e6e6e6; /*var(--code-color)*/ |
||||
background-color: #282e36; /*var(--code-background-color)*/ |
||||
font-size: 0.8rem; /* so 80 columns fits into 640 pixels */ |
||||
} |
||||
|
||||
/* kate: indent-width 2; */ |
||||
|
||||
@ -1,19 +1,22 @@
|
||||
<!DOCTYPE html> |
||||
<html xmlns="http://www.w3.org/1999/xhtml"> |
||||
<head> |
||||
<title>Magnum GL Info</title> |
||||
<meta charset="utf-8" /> |
||||
<link rel="stylesheet" href="WebApplication.css" /> |
||||
</head> |
||||
<body> |
||||
<h1>Magnum GL Info</h1> |
||||
<div id="listener"> |
||||
<html> |
||||
<head> |
||||
<meta charset="UTF-8" /> |
||||
<title>Magnum GL Info</title> |
||||
<link rel="stylesheet" href="WebApplication.css" /> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||
</head> |
||||
<body> |
||||
<h1>Magnum GL Info</h1> |
||||
<div id="container"> |
||||
<div id="sizer"><div id="expander"><div id="listener"> |
||||
<canvas id="module" class="hidden"></canvas> |
||||
<pre id="log"></pre> |
||||
<div id="status">Initialization...</div> |
||||
<div id="statusDescription"></div> |
||||
<div id="status-description"></div> |
||||
<script src="WindowlessEmscriptenApplication.js"></script> |
||||
<script async="async" src="magnum-gl-info.js"></script> |
||||
</div> |
||||
</body> |
||||
</div></div></div> |
||||
</div> |
||||
</body> |
||||
</html> |
||||
|
||||
Loading…
Reference in new issue