-
Notifications
You must be signed in to change notification settings - Fork 0
/
utilities.html
129 lines (123 loc) · 5.3 KB
/
utilities.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
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>UTILITIES</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
<link rel="stylesheet" href="/normalize.css" type="text/css">
<link rel="stylesheet" href="/style.css" type="text/css">
-->
<link href="./blueprint.css" rel="stylesheet" />
<link href="./snis-blueprint.css" rel="stylesheet" />
<link href="./snis-basic.css" rel="stylesheet" type="text/css" />
<style>
table.details{ margin-top:2em;}
ul li { margin-top: .5em; }
a.buttonize {
margin-bottom: .5em;
min-width: 12em;
width: 12em;
display: block;
text-align: left;
margin-left: 1em;
}
</style>
</head>
<body>
<div id="main" bp="grid 6@md">
<div>
<div class="panel">
<h1 onClick="toggleFullScreen();">UTILITIES</h1>
</div>
<div class="panel">
<p>This one is mostly client-side only "tools" and "utilities" that might be useful in conjunction with the game, but are not actually directly interacting with the CMD bridge or anything like that.</p>
</div>
<div>
<ul>
<li>
<a id="a_launch_mission_timer" href="./chronometer.html" class="buttonize">CHRONOMETRY</a>
Mission Time, both time passed/stopwatches, and set count-downs .
</li>
<li>
<a id="a_launch_shipslog" href="./shipslog.html" class="buttonize">SHIP'S LOG</a>
Actually allow "stardate" timestamping and record little messages and read them back. Allow download. If some kind of RSS-compliantness is woven in, there could also be a kind of "read remote ship's log" feature; possibly even useful for in-game plot reveals (e.g., COMMS, get me that derelict ship's log! aye captain, scanning now. got it, sending you the URL which captain pops into the remote log reader which retrieves onto the page )
</li>
<li>
<a id="a_launch_cryptography" href="./cryptography.html" class="buttonize">CRYPTOGRAPHY</a>
"decrypt" messages discovered in-game . Maybe also a protected secret keys vault, only the captain can unlock it, but it becomes necessary. ROT-13(x), Vigenère, RailFence, animated "decryption" routines.
<li>
<button id="btn_cartography" >CARTOGRAPHY</button> maybe a list of "Sectors" and a couple of SVGs for each major celestial bodies. would be cool to write some code to extract-and-generate from demon screen.
</li>
<li>
<button id="btn_mainscreen" >MAINSCREEN</button> Simple mainscreen controls. Maybe instead of just "mainscreen" could be "bridge controls", so have a few other things like door locks, ambient lighting, second instance of RED ALERT button.
</li>
<li>
<button id="btn_accesscontrol" >ACCESS CONTROL</button> Simple PIN-pad style pass-key entry. Could generically be put in front of "restricted access" physical doors, or high-security containers or arms controls/launch codes or whatever. Bonus: if a good pure client-side QR Code decoding library can be found, then a simple cheap tablet with webcam could also have a n access card/token functionality, too.
</li>
<li>
<button id="btn_encyclopedia" >ENCYCLOPEDIA/KNOWLEDGEBASE</button> indending to be in-game-knowledge and lore, hopefully useful to the game. maybe helps a player to be 'the expert on the Zarkonians" or whatever.
</li>
<li>
<button id="btn_8ball" >MAGIC 8 BALL/advice/humorous-chat-bot-replies-to-inquiries-to-the-galley/brig/head</button> (could use TTS for this last one, maybe)
</li>
</ul>
</div>
<div class="panel">
<!-- perhaps this should be a partialpage/client-injection (ajax'd into dom), or SSI, "navigation.nonsense.html_fragment" file ...-->
<!-- BEGIN CHUNK -->
<table class="details">
<tr><th>STATION ID</th><th>OPSEC CODE</th></tr>
<tr><td>01</td><td>0307</td></tr>
<tr><td>02</td><td>2600</td></tr>
</table>
<!-- END CHUNK -->
</div>
<div><a id="btn_main_menu" class="buttonize" href="menu.html">MAIN MENU</a></div>
</div>
</div>
</body>
<script>
function toggleFullScreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
}
function command(text) {
var data = { command: text };
//sanitize data?
console.info("Transmitting command: "+text);
//fetch('/SHIP/STATIONNAME/TARGETNOUN/VERB?parametername=value', {
fetch("/SHIP/NAVIGATION/" + text.toUpperCase().replace(" ","/"), {
method: 'POST', // or 'PUT'
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
})
.then(response => response.json())
.then(data => {
console.log('Success:', data);
soundACK.play();
})
.catch((error) => {
console.error('Error:', error);
soundNACK.play();
});
}
</script>
<script src="./howler.js"></script>
<script>
var soundACK = new Howl({ src: ['./sounds/tactinput_acknowledge.ogg', './sounds/tactinput_acknowledge.m4a', './sounds/tactinput_acknowledge.webm'] });
var soundNACK = new Howl({ src: ['./sounds/tactinput_neg_acknowledge.ogg', './sounds/tactinput_neg_acknowledge.m4a', './sounds/tactinput_neg_acknowledge.webm'] });
try {
toggleFullScreen();
} catch (error) {
console.warn("just warning, kinda expected this..." + error);
}
</script>
</html>