forked from pretentiousgit/screenperfect-dev
-
Notifications
You must be signed in to change notification settings - Fork 0
/
daimio_sp_client_control.html
196 lines (162 loc) · 6.87 KB
/
daimio_sp_client_control.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Screen Perfect Loves You</title>
<script type="text/javascript" src="/daimio_composite.js"></script>
<style>
body { padding: 0; margin: 0;}
.hidden {
display: none !important;
visibility: hidden;
}
</style>
</head>
<body style="display:none">
<div style="position :relative;">
<div id="rooms" data-daimio-template="build-room-display">
{begin video_template | >$video-template | ""}
<video id="{_key}" class="fullscreen hidden" style="" loop="true" width="{$game.width}" height="{$game.height}">
<source src="{$control-mode | then $game.rooms.{_key}.urls.control else $game.rooms.{_key}.urls.client}" type="video/webm">
Your browser does not support the video tag.
</video>
{end video_template}
{begin image_template | >$image-template | ""}
<img src="{$control-mode | then $game.rooms.{_key}.urls.control else $game.rooms.{_key}.urls.client}"
id="{_key}" class="fullscreen hidden" width="{$game.width}" height="{$game.height}">
{end image_template}
{begin selection | each data $game.rooms}
{ $control-mode
| then $game.rooms.{_key}.urls.control
else $game.rooms.{_key}.urls.client
with $false
| string slice start -3
| is in (:ebm :m4v :mp4 :mov)
| if __
then $video-template
else $image-template
with $false
| run with {* (:key _key :value _value)} }
{end selection}
</div> <!-- TODO: examine this totally freaky webkit whitespace issue -->
<div id="divs" data-daimio-template="show-divs">
{begin divs | merge data $game.rooms.{$room-id}.exits | if $control-mode then __ else ""}
<div class="clickable" data-value="{_room}"
style="top: {_top | or 0}px; left: {_left | or 0}px;
height: {_height | or 100}px; width: {_width | or 100}px;
position: absolute; background-color:green; opacity: {$game.debug | then 0.4 else 0}"></div>
{end divs}
</div>
</div>
<script id="control" type="text/daml" class="spaceseeds">
outer
$game {}
$room-id 0
$control-mode
// NETWORK
@receive-data socket-in game-data
@request-data socket-out request-data
@send-active socket-out
@receive-active socket-in
@init from-js
@init -> @request-data
@mode from-js
@mode -> {__ | >$control-mode }
// DISPLAY
change-id
{__ | >$room-id}
store-game
{__ | >$game | __.rooms | list keys | __.#1}
make-room-packet
{ __ | >in | * (:room _in :game $game._id) }
build-room-display
show-divs
@set-divs dom-set-html divs
@set-room dom-set-html rooms
@room-play
// @receive-data -> {__ | 12341234}
// TODO: check out this weird bug i made dude
@receive-data -> store-game -> build-room-display -> @set-room
store-game -> make-room-packet -> @send-active
@receive-active -> change-id -> show-divs -> @set-divs
change-id -> @room-play
// CLICKS
@clicky dom-on-click .clickable
@clicky -> make-room-packet
</script>
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
D.import_port_flavour('room-play', {
dir: 'out',
outside_exit: function(ship) {
try {
// first just pause freaking everything
[].slice.call(document.getElementsByTagName('video'))
.forEach(function(item) {item.pause()})
var cur = document.getElementsByClassName('visible')[0];
var nxt = document.getElementById(ship);
if(cur && cur.classList) {
cur.classList.add('hidden');
cur.classList.remove('visible'); // for use with selectors
if(cur.pause)
cur.pause();
}
nxt.classList.add('visible');
nxt.classList.remove('hidden');
if(nxt.currentTime)
nxt.currentTime = 0;
if(nxt.play)
nxt.play();
} catch(e) {}
}
})
document.addEventListener('DOMContentLoaded', function() {
D.Etc.socket = io.connect('/')
var template_els = [].slice.call(document.querySelectorAll('[data-daimio-template]'))
, templates = template_els.reduce(function(acc, template) {
var name = template.attributes.getNamedItem('data-daimio-template').value
acc[name] = template.innerHTML .replace(/ \| >/g, ' | >') // dumb dumb dumb
template.innerHTML = ""
return acc
}, {})
document.getElementsByTagName('body')[0].style.display = ''
var seedlikes = Array.prototype.slice.call(
document.getElementsByClassName('spaceseeds')
).map(function(node) {
return node.text
}).join("\n")
var outerseed = D.make_some_space(seedlikes, templates)
OuterSpace = new D.Space(outerseed) // published for debug
// activate init port
var game_id = window.location.pathname.replace(/\/$/, '').split('/')[1]
D.send_value_to_js_port(outerseed, 'init', {game: game_id, session: false})
// activate control mode
if(window.location.pathname.replace(/\/$/, '').split('/').slice(-1)[0] == 'control')
D.send_value_to_js_port(outerseed, 'mode', 'control')
})
// touchy feely stuff. http://stackoverflow.com/questions/5186441/javascript-drag-and-drop-for-touch-devices
function touchHandler(event) {
var first = event.changedTouches[0]
, ttype = event.type
, types = [].concat(ttype == 'touchstart' ? ['mousedown'] : [])
.concat(ttype == 'touchmove' ? ['mousemove'] : [])
.concat(ttype == 'touchend' ? ['mouseup', 'click'] : [])
types.forEach(function(type) {
var simulatedEvent = document.createEvent("MouseEvent")
simulatedEvent.initMouseEvent( type, true, true, window, 1
, first.screenX, first.screenY
, first.clientX, first.clientY
, false, false, false, false, 0, null)
first.target.dispatchEvent(simulatedEvent)
})
//if(dragging) event.preventDefault()
}
~function init() {
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
}()
</script>
</body>
</html>