-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
200 lines (179 loc) · 8.87 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!-- @Two&HalfDevs -->
<!--
Previous update: June 2, 2019
Last updated: June 9, 2019
-->
<!DOCTYPE html>
<html>
<head>
<link rel="apple-touch-icon" sizes="180x180" href="./icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./icons/favicon-16x16.png">
<link rel="manifest" href="./icons/site.webmanifest">
<link rel="mask-icon" href="./icons/safari-pinned-tab.svg" color="#000000">
<link id="styleSheet" rel="stylesheet" href="./scripts/style.css" />
<meta name="msapplication-TileColor" content="#000000">
<meta name="theme-color" content="#ffffff">
<meta name="viewport" content="user-scalable=no,width=device-width" />
<meta property="og:title" content="2&aHalf Devs indie studio" />
<meta property="og:description" content="Will have some games out soon!" />
<title name="title">Welcome to Two& a Half Devs!</title>
<script type="text/javascript" src="./scripts/fullscreen.js"></script>
<script type="text/javascript">
"use strict";
// Resizes document for good experience on multiple devices
function relocate() {
let docSize = [document.documentElement.clientWidth, document.documentElement.clientHeight];
let styleSheet = document.getElementById("styleSheet");
if(docSize[0] > 750 && docSize[0] < 1080 && styleSheet.href !== window.location.href + "scripts/style.css") {styleSheet.href = './scripts/style.css';}
else if(docSize[0] <= 750 && styleSheet.href !== window.location.href + 'scripts/small.css') {styleSheet.href = "./scripts/small.css";}
// else if(docSize[0] >= 1080 && styleSheet.href !== window.location.href + 'scripts/large.css') {styleSheet.href = "./scripts/large.css";}
}
relocate();
setInterval(relocate, 1000);
var fullscreen = new Fullscreen();
window.onload = function() {
// Project object with methods for opening and closing projects
var Project = {
// Opens project in fullscreen and hides menu
open: function(id = "no") {
let frame = document.createElement("iframe");
let fullscreenWrap = document.getElementById('fullscreenWrapper');
frame.setAttribute("id", "gameFrame");
frame.setAttribute("src", "./games/" + id + "/" + id + ".html");
fullscreenWrap.appendChild(frame);
menu.classList.add('hidden');
document.getElementById("menuButton").setAttribute("style", "background-color: transparent");
menuOpened = false;
fullscreen.request(fullscreenWrap);
document.getElementById("gameFrame").focus();
},
// Closes project and (if needed) exits fullscreen
close: function(id = "no") {
let frame = document.getElementById('gameFrame');
let fullscreenWrap = document.getElementById('fullscreenWrapper');
if(window.inFullscreen) {
fullscreen.exit();
}
frame.outerHTML = "";
}
};
// Stores whether or not menu is opened, default is false
var menuOpened = false;
// Listens for click on the menu button
document.getElementById("menuButton").addEventListener('click', function() {
let menu = document.getElementById('menu');
// Hides or shows the menu based on if menu is open
if(menuOpened) {
menu.classList.add('hidden');
menuOpened = false;
} else {
menu.classList.remove('hidden');
menuOpened = true;
}
}, false);
// Stores id of active project if any, default is false or no active project
var projectId = false;
// Array containing menu items for quick additions to menu
var menuItems = [{
name: "mari-no",
id: "mari-no",
wip: true,
game: true
}, {
name: "Test Project",
id: "testGame",
wip: true,
game: true
}, /*{
name: "Project0 (recoded)",
id: "rewritten",
wip: true,
game: true
},*/ {
name: "Example Game",
id: "exampleGame",
wip: false,
game: true
}]
// Creates menu items with listeners
function generateMenu() {
// Creates all menu items
for (let i = 0; i < menuItems.length; i++) {
let list = document.getElementById('menu');
var link = menuItems[i].game ? ["", ""] : ["<a href='" + menuItems[i].link + "' target='_blank' >", "</a>"]
// If wip is true in the menu item, add in the wip signal into the project name
let projectName = menuItems[i].wip ? menuItems[i].name + "(<span class='wip'>WIP</span>)" : menuItems[i].name;
// Adds new list element to menu with custom id and name
list.innerHTML += "<li style='cursor: pointer;' id='" + menuItems[i].id + "'class='menuItem'>" + link[0] + projectName + link[1] + "</li>";
}
/*
* All you nerds are probably wondering "why's there 2 of the exact same for loops doing different things?"
* well first, thanks for reading my code
* Second, Having everything in one loop only gives the script enough time to attach one listener
*/
// Creates listeners with logic for every game item
for(let i = 0; i < menuItems.length; i++) {
if(menuItems[i].game) {
// Attaches click listener to current game item
document.getElementById(menuItems[i].id).addEventListener('click', function() {
// If there's no active project, open the project and set the active project to this id
if(projectId == false) {
projectId = menuItems[i].id;
Project.open(projectId);
// If the active project isn't this one, close this project, open the new one and set new active project
} else if(typeof projectId == 'string' && projectId !== menuItems[i].id) {
Project.close(projectId);
projectId = menuItems[i].id;
Project.open(projectId);
// If the active project is this one, close it and reset active project
} else {
Project.close(projectId);
projectId = false;
}
}, false);
}
}
}
generateMenu();
};
</script>
</head>
<body>
<div id="fullscreenWrapper">
<div id="menuWrapper">
<span id="menuButton">Menu</span>
<ul id="menu" class="hidden">
</ul>
</div>
</div>
<center>
<div id="vCenter">
<span id="introHeader">
Welcome to <span id="studioName">2<sup class="fraction">1</sup>/<sub class="fraction">2</sub> Devs</span>
</span>
<br />
<br />
<p id="aboutUs">
We're a small group of friends who decided to pull our unique skillsets together as a game studio. Some of us are interested for fun. Others want to grind xp. Either way we're learning more about this as we go.
<br />
Enjoy!
</p>
<br />
<h2 id="teamPlayers">Team comprised of:</h2>
<ul id="devs">
<li><span id="bestGirl">Amy <span id="bestGirlLN">Clarkson</span></span> (Lead Screenwriter)</li>
<li><span id="allan">Allan <span id="allanLN">Langford</span></span> (Lead Audio)</li>
<li><span id="worstBoy">Joey <span id="worstBoyLN">Ladino</span></span> (Lead Developer)</li>
<li><span id="sophie">Sophie <span id="sophieLN">Anderson</span></span> (Lead Character Design)</li>
<li><span id="dani">Daniella <span id="daniLN">Popejoy</span></span> (Lead Background Design)</li>
<!--<li><span id="callum">Callum <span id="callumLN">Gamble</span></span> (Assistant Screenwriter)</li>-->
</ul>
<!--<span id="tapSomeone">(Tap a person for their bio)</span>
<span id="clickSomeone">(Click a person for their bio)</span>-->
<br />
</div>
</center>
<a id="certificate" href="https://www.testdome.com/cert/f17bafd1a92a48719ab1d3430de11e50" class="testdome-certificate-stamp silver"><span class="testdome-certificate-name">Joseph F. Ladino</span><span class="testdome-certificate-test-name">JavaScript </span><span class="testdome-certificate-card-logo">TestDome<br />Certificate</span></a><script type="text/javascript">var stylesheet = "https://www.testdome.com/content/source/stylesheets/embed.css", link = document.createElement("link"); link.href = stylesheet, link.type = "text/css", link.rel = "stylesheet", link.media = "screen,print", document.getElementsByTagName("head")[0].appendChild(link);</script>
</body>
</html>