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> |
<!DOCTYPE html> |
||||||
<html xmlns="http://www.w3.org/1999/xhtml"> |
<html> |
||||||
<head> |
<head> |
||||||
<title>Magnum AL Info</title> |
<meta charset="UTF-8" /> |
||||||
<meta charset="utf-8" /> |
<title>Magnum AL Info</title> |
||||||
<link rel="stylesheet" href="WebApplication.css" /> |
<link rel="stylesheet" href="WebApplication.css" /> |
||||||
</head> |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||||
<body> |
</head> |
||||||
<h1>Magnum AL Info</h1> |
<body> |
||||||
<div id="listener"> |
<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> |
<pre id="log"></pre> |
||||||
<div id="status">Initialization...</div> |
<div id="status">Initialization...</div> |
||||||
<div id="statusDescription"></div> |
<div id="status-description"></div> |
||||||
<script src="WindowlessEmscriptenApplication.js"></script> |
<script src="WindowlessEmscriptenApplication.js"></script> |
||||||
<script async="async" src="magnum-al-info.js"></script> |
<script async="async" src="magnum-al-info.js"></script> |
||||||
</div> |
</div></div></div> |
||||||
</body> |
</div> |
||||||
|
</body> |
||||||
</html> |
</html> |
||||||
|
|||||||
@ -1,18 +1,28 @@ |
|||||||
<!DOCTYPE html> |
<!DOCTYPE html> |
||||||
<html> |
<html> |
||||||
<head> |
<head> |
||||||
<meta charset="UTF-8" /> |
<meta charset="UTF-8" /> |
||||||
<title>Magnum Sdl2Application Test</title> |
<title>Magnum Sdl2Application Test</title> |
||||||
<link rel="stylesheet" href="WebApplication.css" /> |
<link rel="stylesheet" href="WebApplication.css" /> |
||||||
</head> |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||||
<body> |
</head> |
||||||
<h1>Magnum Sdl2Application Test</h1> |
<body> |
||||||
<div id="listener"> |
<h1>Magnum Sdl2Application Test</h1> |
||||||
<canvas id="module"></canvas> |
<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="status">Initialization...</div> |
||||||
<div id="statusDescription"></div> |
<div id="status-description"></div> |
||||||
<script src="EmscriptenApplication.js"></script> |
<script src="EmscriptenApplication.js"></script> |
||||||
<script async="async" src="PlatformSdl2ApplicationTest.js"></script> |
<script async="async" src="PlatformSdl2ApplicationTest.js"></script> |
||||||
</div> |
<script> |
||||||
</body> |
/* 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> |
</html> |
||||||
|
|||||||
@ -1,19 +1,22 @@ |
|||||||
<!DOCTYPE html> |
<!DOCTYPE html> |
||||||
<html> |
<html> |
||||||
<head> |
<head> |
||||||
<meta charset="UTF-8" /> |
<meta charset="UTF-8" /> |
||||||
<title>Magnum WindowlessEglApplication Test</title> |
<title>Magnum WindowlessEglApplication Test</title> |
||||||
<link rel="stylesheet" href="WebApplication.css" /> |
<link rel="stylesheet" href="WebApplication.css" /> |
||||||
</head> |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||||
<body> |
</head> |
||||||
<h1>Magnum WindowlessEglApplication Test</h1> |
<body> |
||||||
<div id="listener"> |
<h1>Magnum WindowlessEglApplication Test</h1> |
||||||
|
<div id="container" class=""> |
||||||
|
<div id="sizer"><div id="expander"><div id="listener"> |
||||||
<canvas id="module" class="hidden"></canvas> |
<canvas id="module" class="hidden"></canvas> |
||||||
<pre id="log"></pre> |
<pre id="log"></pre> |
||||||
<div id="status">Initialization...</div> |
<div id="status">Initialization...</div> |
||||||
<div id="statusDescription"></div> |
<div id="status-description"></div> |
||||||
<script src="WindowlessEmscriptenApplication.js"></script> |
<script src="WindowlessEmscriptenApplication.js"></script> |
||||||
<script async="async" src="PlatformWindowlessEglApplicationTest.js"></script> |
<script async="async" src="PlatformWindowlessEglApplicationTest.js"></script> |
||||||
</div> |
</div></div></div> |
||||||
</body> |
</div> |
||||||
|
</body> |
||||||
</html> |
</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 { |
body { |
||||||
margin: 0px; |
margin: 1rem; |
||||||
padding: 0px; |
padding: 0; |
||||||
font-family: sans-serif; |
font-family: sans-serif; |
||||||
background-color: #111111; |
font-size: 16px; |
||||||
color: #aaaaaa; |
background-color: #2f363f; /*var(--background-color)*/ |
||||||
|
color: #dcdcdc; /*var(--color)*/ |
||||||
} |
} |
||||||
|
|
||||||
h1 { |
h1 { |
||||||
text-align: center; |
text-align: center; |
||||||
font-size: 20px; |
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 { |
#listener { |
||||||
border-style: solid; |
position: absolute; |
||||||
border-color: #333333; |
top: 0; |
||||||
border-width: 1px; |
bottom: 0; |
||||||
padding: 1px; |
left: 0; |
||||||
width: 640px; |
right: 0; |
||||||
height: 480px; |
} |
||||||
margin-left: auto; |
#listener::before { |
||||||
margin-right: auto; |
position: absolute; |
||||||
margin-top: 20px; |
content: ' '; |
||||||
margin-bottom: 20px; |
top: 0; |
||||||
position: relative; |
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 { |
/* Canvas size and aspect ratio knobs */ |
||||||
width: 640px; |
#container.fullsize { |
||||||
height: 480px; |
position: absolute; |
||||||
z-index: 10; |
top: 0; |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
#container.fullsize #sizer, #container.fullsize #expander { |
||||||
|
width: 100%; height: 100%; |
||||||
} |
} |
||||||
|
|
||||||
#status { |
#container.width-240 #sizer { width: 240px; } |
||||||
position: absolute; |
#container.width-320 #sizer { width: 320px; } |
||||||
width: 640px; |
#container.width-360 #sizer { width: 360px; } |
||||||
text-align: center; |
#container.width-480 #sizer { width: 480px; } |
||||||
top: 200px; |
#container.width-600 #sizer { width: 600px; } |
||||||
font-size: 30px; |
#container.width-640 #sizer, #container #sizer { |
||||||
font-weight: bold; |
width: 640px; /* default */ |
||||||
z-index: 9; |
|
||||||
} |
} |
||||||
|
#container.width-800 #sizer { width: 800px; } |
||||||
|
|
||||||
#statusDescription { |
#container.aspect-1-1 #expander { padding-bottom: 100%; } |
||||||
position: absolute; |
#container.aspect-4-3 #expander, #container:not(.fullsize) #expander { |
||||||
width: 640px; |
padding-bottom: 75%; /* default */ |
||||||
text-align: center; |
|
||||||
top: 250px; |
|
||||||
font-size: 15px; |
|
||||||
z-index: 9; |
|
||||||
} |
} |
||||||
|
#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 { |
#module.hidden { |
||||||
display: none; |
display: none; |
||||||
} |
} |
||||||
|
pre#log { |
||||||
#log { |
padding: 0.5rem 1rem; |
||||||
width: 640px; |
overflow-x: auto; |
||||||
height: 480px; |
margin-top: 0; /* stupid defaults */ |
||||||
overflow-y: scroll; |
color: #e6e6e6; /*var(--code-color)*/ |
||||||
overflow-x: hidden; |
background-color: #282e36; /*var(--code-background-color)*/ |
||||||
white-space: pre-wrap; |
font-size: 0.8rem; /* so 80 columns fits into 640 pixels */ |
||||||
z-index: 10; |
|
||||||
margin: 0; |
|
||||||
} |
} |
||||||
|
|
||||||
|
/* kate: indent-width 2; */ |
||||||
|
|||||||
@ -1,19 +1,22 @@ |
|||||||
<!DOCTYPE html> |
<!DOCTYPE html> |
||||||
<html xmlns="http://www.w3.org/1999/xhtml"> |
<html> |
||||||
<head> |
<head> |
||||||
<title>Magnum GL Info</title> |
<meta charset="UTF-8" /> |
||||||
<meta charset="utf-8" /> |
<title>Magnum GL Info</title> |
||||||
<link rel="stylesheet" href="WebApplication.css" /> |
<link rel="stylesheet" href="WebApplication.css" /> |
||||||
</head> |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||||
<body> |
</head> |
||||||
<h1>Magnum GL Info</h1> |
<body> |
||||||
<div id="listener"> |
<h1>Magnum GL Info</h1> |
||||||
|
<div id="container"> |
||||||
|
<div id="sizer"><div id="expander"><div id="listener"> |
||||||
<canvas id="module" class="hidden"></canvas> |
<canvas id="module" class="hidden"></canvas> |
||||||
<pre id="log"></pre> |
<pre id="log"></pre> |
||||||
<div id="status">Initialization...</div> |
<div id="status">Initialization...</div> |
||||||
<div id="statusDescription"></div> |
<div id="status-description"></div> |
||||||
<script src="WindowlessEmscriptenApplication.js"></script> |
<script src="WindowlessEmscriptenApplication.js"></script> |
||||||
<script async="async" src="magnum-gl-info.js"></script> |
<script async="async" src="magnum-gl-info.js"></script> |
||||||
</div> |
</div></div></div> |
||||||
</body> |
</div> |
||||||
|
</body> |
||||||
</html> |
</html> |
||||||
|
|||||||
Loading…
Reference in new issue