Skip to content
Snippets Groups Projects
Commit 242cc472 authored by Tim Repke's avatar Tim Repke
Browse files

added ui sidebar

parent 25928d1b
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
registration-system/view/signups/game1/index.php
+ 48
− 14
View file @ 242cc472
......@@ -19,13 +19,13 @@ class Game1SignupMethod extends SignupMethod {
}
public function getJSDependencies() {
return ['jslib/d3.min.js', 'jslib/checkLineIntersection.js', 'jslib/priority-queue.min.js',
'js/camera.js','js/character.js','js/pathFinder.js', 'js/svgUtils.js', 'js/vector.js',
return ['jslib/d3.min.js', 'jslib/priority-queue.min.js', 'jslib/checkLineIntersection.js',
'js/svgUtils.js', 'js/pathFinder.js', 'js/vector.js', 'js/character.js','js/camera.js',
'js/game.js'];
}
public function getCSSDependencies() {
return [];
return ['ui.css'];
}
public function getAdditionalHeader() {
......@@ -33,20 +33,54 @@ class Game1SignupMethod extends SignupMethod {
}
public function showInlineHTML() {
echo '<div id="coords">(0, 0)</div>
<div id="gameCanvas" style="overflow:hidden;position:relative">
<div id="gameRoot" style="position:relative">
echo '
<div id="game-root-container">
<div id="game-sidebar">
<div class="sidebar-section">
<div class="sidebar-section-head">Game log</div>
<div class="sidebar-log"><div>
<ul id="game-log">
<li>Find the students union room</li>
<li>Found the castle entrance</li>
<li>Go inside the castle!</li>
<li>Find the students union room</li>
<li>Found the castle entrance</li>
<li>Go inside the castle!</li>
</ul>
</div></div>
</div>
<div class="sidebar-section">
<div class="sidebar-section-head">Achievements</div>
<div class="status-bar" id="achievement-progress" style="margin-bottom: 0.5em"><span style="width:25%" class="status-bar-bar"></span> <div class="status-bar-text">5/43</div> </div>
<div class="sidebar-log"><div>
<ul id="achievement-log">
<li>Five clicks in 2 seconds!</li>
<li>Took first step!</li>
</ul>
</div></div>
</div>
</div>
<div id="game-game">
<div id="gameCanvas" style="overflow:hidden;position:relative">
<div id="gameRoot" style="position:relative"></div>
</div>
</div>
</div>
<script>
g_smallValue = 0.000001; // fun with floats
var game = new Game({
pathFindingGridSize: 5,
usePathFinding: true,
size: [800, 600]
});
game.run();
g_smallValue = 0.000001; // fun with floats
var FAPI = new FAPI();
var game = new Game({
startMap: \'map_landing.svg\',
showEventLayers: false,
pathFindingGridSize: 5,
usePathFinding: true,
size: [800, 600]
});
game.run();
</script>';
}
......
registration-system/view/signups/game1/test.html
+ 32
− 3
View file @ 242cc472
......@@ -2,6 +2,7 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="ui.css" rel="stylesheet" />
<script src="jslib/d3.min.js" type="text/javascript"></script>
<script src="jslib/priority-queue.min.js" type="text/javascript"></script>
<script src="jslib/checkLineIntersection.js" type="text/javascript"></script>
......@@ -14,9 +15,37 @@
<script src="js/game.js" type="text/javascript"></script>
</head>
<body>
<div id="coords">(0, 0)</div>
<div id="gameCanvas" style="overflow:hidden;position:relative">
<div id="gameRoot" style="position:relative">
<div id="game-root-container">
<div id="game-sidebar">
<div class="sidebar-section">
<div class="sidebar-section-head">Game log</div>
<div class="sidebar-log"><div>
<ul id="game-log">
<li>Find the students union room</li>
<li>Found the castle entrance</li>
<li>Go inside the castle!</li>
<li>Find the students union room</li>
<li>Found the castle entrance</li>
<li>Go inside the castle!</li>
</ul>
</div></div>
</div>
<div class="sidebar-section">
<div class="sidebar-section-head">Achievements</div>
<div class="status-bar" id="achievement-progress" style="margin-bottom: 0.5em"><span style="width:25%" class="status-bar-bar"></span> <div class="status-bar-text">5/43</div> </div>
<div class="sidebar-log"><div>
<ul id="achievement-log">
<li>Five clicks in 2 seconds!</li>
<li>Took first step!</li>
</ul>
</div></div>
</div>
</div>
<div id="game-game">
<div id="gameCanvas" style="overflow:hidden;position:relative">
<div id="gameRoot" style="position:relative"></div>
</div>
</div>
</div>
<script>
......
registration-system/view/signups/game1/ui.css 0 → 100644
+ 123
− 0
View file @ 242cc472
#game-root-container {
height: 600px;
width: 1000px;
overflow: hidden; /* just to be on the save side... */
position: relative;
margin: 0;
padding: 0;
background-color: #323232;
}
#game-game {
position: absolute;
left: 0;
top: 0;
width: 800px;
height: 600px;
}
#game-sidebar {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 189px;
font-family: ‘Lucida Console’, Monaco, monospace;
color: white;
background-color: #323232;
border: 3px solid #4E8260;
outline: 3px solid #2E2E2E;
margin: 3px 2px 3px 3px;
}
/*
#2E2E2E dark
#4E8260 green
#A7ACA6 light bg
#323232 dark bg
*/
.sidebar-section {
}
.sidebar-section-head {
border-top: 2px solid #4E8260;
border-bottom: 2px solid #4E8260;
margin: 1em 4px 0.5em 4px;
padding: 0.2em 0 0.2em 0.5em;
}
.sidebar-log {
position: relative;
overflow: hidden;
border: 1px dotted #A7ACA6;
margin: 0 3px;
padding: 0.5em 0;
}
/* following some css fun to hide the scrollbar */
.sidebar-log, .sidebar-log > div > ul {
height: 100px;
}
.sidebar-log > div {
position: absolute;
left: 0;
overflow-x: hidden;
overflow-y: scroll;
}
.sidebar-log > div > ul {
font-size: 8pt;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-log > div::-webkit-scrollbar {
display: none;
}
.sidebar-log > div > ul > li {
padding: 0.2em 0.5em 0.2em 0.5em;
margin: 0;
border-top: 1px dotted #424242;
text-align: left;
}
.sidebar-log > div > ul > li:first-child {
border-top: 0;
}
.status-bar {
height: 8px;
position: relative;
background: #A7ACA6;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
padding: 1px 2px;
margin: 0 5px;
}
.status-bar > span.status-bar-bar {
display: block;
height: 100%;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
background-color: #4E8260;
position: relative;
overflow: hidden;
}
.status-bar > div.status-bar-text {
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
top: 2px;
font-size: 5pt;
text-align: center;
color: black;
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Impressum | Datenschutzerklärung