Skip to content

Commit ccb8cff

Browse files
BdR76BdR76
committed
update layout test page
update layout test page
1 parent 88c4982 commit ccb8cff

File tree

1 file changed

+126
-5
lines changed

1 file changed

+126
-5
lines changed

‎css/layout_tester.html‎

Lines changed: 126 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,145 @@
44
<title>css test2</title>
55
</head>
66
<link rel="stylesheet" type="text/css" href="lcdstyle.css">
7+
<script>
8+
var IMG_URL = "../games/highway/img/highway_back.jpg";
9+
var cvs, ctx;
710

8-
<body>
11+
function displayInfobox() {
12+
hideScorebox();
13+
document.getElementById("infobox").style.display = "inherit";
14+
//event.stopPropagation(); // stop propagation on button click event
15+
}
16+
17+
function hideInfobox() {
18+
//var target = event.target || event.srcElement;
19+
// filter event handling when the event bubbles
20+
//if (event.currentTarget == target) {
21+
document.getElementById("infobox").style.display = "none";
22+
//}
23+
}
24+
25+
function displayScorebox() {
26+
hideInfobox();
27+
document.getElementById("scorebox").style.display = "inherit";
28+
//event.stopPropagation(); // stop propagation on button click event
29+
}
30+
31+
function hideScorebox() {
32+
//var target = event.target || event.srcElement;
33+
// filter event handling when the event bubbles
34+
//if (event.currentTarget == target) {
35+
document.getElementById("scorebox").style.display = "none";
36+
//}
37+
}
38+
39+
function loadbackground() {
40+
cvs = document.getElementById("mycanvas");
41+
ctx = cvs.getContext("2d");
42+
43+
imageBackground = new Image();
44+
imageBackground.addEventListener("load", this.onImageLoaded.bind(this));
45+
imageBackground.src = IMG_URL;
46+
}
47+
48+
function onImageLoaded() {
49+
50+
cvs.width = imageBackground.width;
51+
cvs.height = imageBackground.height;
52+
ctx.drawImage(imageBackground, 0, 0);
53+
54+
resizeCanvas();
55+
resizeInfobox(document.getElementById("infobox"));
56+
resizeInfobox(document.getElementById("scorebox"));
57+
58+
}
59+
60+
function resizeCanvas() {
61+
62+
// determine which is limiting factor for current window/frame size; width or height
63+
var scrratio = window.innerWidth / window.innerHeight;
64+
var imgratio = cvs.width / cvs.height;
65+
66+
// determine screen/frame size
67+
var w = cvs.width;
68+
var h = cvs.height;
69+
70+
if (imgratio > scrratio) {
71+
// width of image should take entire width of screen
72+
w = window.innerWidth;
73+
this.scaleFactor = w / cvs.width;
74+
h = cvs.height * this.scaleFactor;
75+
76+
// set margins for full height
77+
var ymargin = (window.innerHeight - h) / 2;
78+
cvs.style["margin-top"] = ymargin+"px";
79+
cvs.style["margin-bottom"] = -ymargin+"px";
80+
cvs.style["margin-left"] = "0px";
81+
} else {
82+
// height of image should take entire height of screen
83+
h = window.innerHeight;
84+
this.scaleFactor = h / cvs.height;
85+
w = cvs.width * this.scaleFactor;
86+
87+
// set margins for full height
88+
var xmargin = (window.innerWidth - w) / 2;
89+
cvs.style["margin-left"] = xmargin+"px";
90+
cvs.style["margin-right"] = -xmargin+"px";
91+
cvs.style["margin-top"] = "0px";
92+
}
93+
94+
// set canvas size
95+
cvs.style.width = w+"px";
96+
cvs.style.height = h+"px";
97+
98+
// set canvas properties
99+
cvs.style.display = "block";
100+
cvs.style["touch-action"] = "none"; // no text select on touch
101+
cvs.style["user-select"] = "none"; // no text select on touch
102+
cvs.style["-webkit-tap-highlight-color"] = "rgba(0, 0, 0, 0)"; // not sure what this does
103+
};
104+
105+
function resizeInfobox(box) {
106+
107+
// determine screen/frame size
108+
var w = box.offsetWidth;
109+
var h = box.offsetHeight;
110+
var rect = box.getBoundingClientRect();
111+
if (rect) {
112+
w = rect.width;
113+
h = rect.height;
114+
};
115+
116+
var xmargin = (window.innerWidth - w) / 2;
117+
var ymargin = (window.innerHeight - h) / 2;
118+
119+
// set margins for full height
120+
box.style["margin-left"] = xmargin+"px";
121+
box.style["margin-right"] = -xmargin+"px";
122+
box.style["margin-top"] = ymargin+"px";
123+
box.style["margin-bottom"] = -ymargin+"px";
124+
};
125+
126+
</script>
127+
128+
<body onload="loadbackground()">
9129

10130
<div class="container">
11131
<canvas id="mycanvas" class="gamecvs" width="400" height="300"></canvas>
12-
<a class="mybutton btnmenu">info1</a>
13-
<a class="mybutton btnmenu" onclick="displayInfobox();">help2</a>
132+
<a class="mybutton btnmenu" onclick="displayInfobox();">info</a>
133+
<a class="mybutton btnmenu" onclick="displayScorebox();">scores</a>
14134

15135
<div class="infobox" id="infobox">
16136
<div>
17-
<h1>test123</h1>
18-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
137+
<h1>CSS Layout Tester</h1>
138+
This is a test page to preview the CSS layout and test the resizing events.
19139
</div>
20140
<a class="mybutton btnpop" onclick="hideInfobox();">Ok</a>
21141
</div>
22142

23143
<div class="infobox" id="scorebox">
24144
<div>
145+
<h1>CSS Layout Tester (Game 1)</h1>
25146
<table>
26147
<tr><td>Rk.</td><td>Name</td><td>Score</td></tr>
27148
<tr><td>1.</td><td>First name</td><td>1000</td></tr>

0 commit comments

Comments
 (0)