init
|
@ -0,0 +1,335 @@
|
||||||
|
|
||||||
|
if(typeof module !== "undefined") {
|
||||||
|
module.exports = Client;
|
||||||
|
WebSocket = require("ws");
|
||||||
|
EventEmitter = require("events").EventEmitter;
|
||||||
|
} else {
|
||||||
|
this.Client = Client;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function mixin(obj1, obj2) {
|
||||||
|
for(var i in obj2) {
|
||||||
|
if(obj2.hasOwnProperty(i)) {
|
||||||
|
obj1[i] = obj2[i];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
function Client(uri) {
|
||||||
|
EventEmitter.call(this);
|
||||||
|
this.uri = uri;
|
||||||
|
this.ws = undefined;
|
||||||
|
this.serverTimeOffset = 0;
|
||||||
|
this.user = undefined;
|
||||||
|
this.participantId = undefined;
|
||||||
|
this.channel = undefined;
|
||||||
|
this.ppl = {};
|
||||||
|
this.connectionTime = undefined;
|
||||||
|
this.connectionAttempts = 0;
|
||||||
|
this.desiredChannelId = undefined;
|
||||||
|
this.desiredChannelSettings = undefined;
|
||||||
|
this.pingInterval = undefined;
|
||||||
|
this.canConnect = false;
|
||||||
|
this.noteBuffer = [];
|
||||||
|
this.noteBufferTime = 0;
|
||||||
|
this.noteFlushInterval = undefined;
|
||||||
|
this['🐈'] = 0;
|
||||||
|
|
||||||
|
this.bindEventListeners();
|
||||||
|
|
||||||
|
this.emit("status", "(Offline mode)");
|
||||||
|
};
|
||||||
|
|
||||||
|
mixin(Client.prototype, EventEmitter.prototype);
|
||||||
|
|
||||||
|
Client.prototype.constructor = Client;
|
||||||
|
|
||||||
|
Client.prototype.isSupported = function() {
|
||||||
|
return typeof WebSocket === "function";
|
||||||
|
};
|
||||||
|
|
||||||
|
Client.prototype.isConnected = function() {
|
||||||
|
return this.isSupported() && this.ws && this.ws.readyState === WebSocket.OPEN;
|
||||||
|
};
|
||||||
|
|
||||||
|
Client.prototype.isConnecting = function() {
|
||||||
|
return this.isSupported() && this.ws && this.ws.readyState === WebSocket.CONNECTING;
|
||||||
|
};
|
||||||
|
|
||||||
|
Client.prototype.start = function() {
|
||||||
|
this.canConnect = true;
|
||||||
|
this.connect();
|
||||||
|
};
|
||||||
|
|
||||||
|
Client.prototype.stop = function() {
|
||||||
|
this.canConnect = false;
|
||||||
|
this.ws.close();
|
||||||
|
};
|
||||||
|
|
||||||
|
Client.prototype.connect = function() {
|
||||||
|
if(!this.canConnect || !this.isSupported() || this.isConnected() || this.isConnecting())
|
||||||
|
return;
|
||||||
|
this.emit("status", "Connecting...");
|
||||||
|
if(typeof module !== "undefined") {
|
||||||
|
// nodejsicle
|
||||||
|
this.ws = new WebSocket(this.uri, {
|
||||||
|
origin: "https://www.multiplayerpiano.com"
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// browseroni
|
||||||
|
this.ws = new WebSocket(this.uri);
|
||||||
|
}
|
||||||
|
var self = this;
|
||||||
|
this.ws.addEventListener("close", function(evt) {
|
||||||
|
self.user = undefined;
|
||||||
|
self.participantId = undefined;
|
||||||
|
self.channel = undefined;
|
||||||
|
self.setParticipants([]);
|
||||||
|
clearInterval(self.pingInterval);
|
||||||
|
clearInterval(self.noteFlushInterval);
|
||||||
|
|
||||||
|
self.emit("disconnect", evt);
|
||||||
|
self.emit("status", "Offline mode");
|
||||||
|
|
||||||
|
// reconnect!
|
||||||
|
if(self.connectionTime) {
|
||||||
|
self.connectionTime = undefined;
|
||||||
|
self.connectionAttempts = 0;
|
||||||
|
} else {
|
||||||
|
++self.connectionAttempts;
|
||||||
|
}
|
||||||
|
var ms_lut = [50, 2950, 7000, 10000];
|
||||||
|
var idx = self.connectionAttempts;
|
||||||
|
if(idx >= ms_lut.length) idx = ms_lut.length - 1;
|
||||||
|
var ms = ms_lut[idx];
|
||||||
|
setTimeout(self.connect.bind(self), ms);
|
||||||
|
});
|
||||||
|
this.ws.addEventListener("error", function(err) {
|
||||||
|
self.emit("wserror", err);
|
||||||
|
self.ws.close(); // self.ws.emit("close");
|
||||||
|
});
|
||||||
|
this.ws.addEventListener("open", function(evt) {
|
||||||
|
self.connectionTime = Date.now();
|
||||||
|
self.sendArray([{"m": "hi", "🐈": self['🐈']++ || undefined }]);
|
||||||
|
self.pingInterval = setInterval(function() {
|
||||||
|
self.sendArray([{m: "t", e: Date.now()}]);
|
||||||
|
}, 20000);
|
||||||
|
//self.sendArray([{m: "t", e: Date.now()}]);
|
||||||
|
self.noteBuffer = [];
|
||||||
|
self.noteBufferTime = 0;
|
||||||
|
self.noteFlushInterval = setInterval(function() {
|
||||||
|
if(self.noteBufferTime && self.noteBuffer.length > 0) {
|
||||||
|
self.sendArray([{m: "n", t: self.noteBufferTime + self.serverTimeOffset, n: self.noteBuffer}]);
|
||||||
|
self.noteBufferTime = 0;
|
||||||
|
self.noteBuffer = [];
|
||||||
|
}
|
||||||
|
}, 200);
|
||||||
|
|
||||||
|
self.emit("connect");
|
||||||
|
self.emit("status", "Joining channel...");
|
||||||
|
});
|
||||||
|
this.ws.addEventListener("message", function(evt) {
|
||||||
|
var transmission = JSON.parse(evt.data);
|
||||||
|
for(var i = 0; i < transmission.length; i++) {
|
||||||
|
var msg = transmission[i];
|
||||||
|
self.emit(msg.m, msg);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
Client.prototype.bindEventListeners = function() {
|
||||||
|
var self = this;
|
||||||
|
this.on("hi", function(msg) {
|
||||||
|
self.user = msg.u;
|
||||||
|
self.receiveServerTime(msg.t, msg.e || undefined);
|
||||||
|
if(self.desiredChannelId) {
|
||||||
|
self.setChannel();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.on("t", function(msg) {
|
||||||
|
self.receiveServerTime(msg.t, msg.e || undefined);
|
||||||
|
});
|
||||||
|
this.on("ch", function(msg) {
|
||||||
|
self.desiredChannelId = msg.ch._id;
|
||||||
|
self.desiredChannelSettings = msg.ch.settings;
|
||||||
|
self.channel = msg.ch;
|
||||||
|
if(msg.p) self.participantId = msg.p;
|
||||||
|
self.setParticipants(msg.ppl);
|
||||||
|
});
|
||||||
|
this.on("p", function(msg) {
|
||||||
|
self.participantUpdate(msg);
|
||||||
|
self.emit("participant update", self.findParticipantById(msg.id));
|
||||||
|
});
|
||||||
|
this.on("m", function(msg) {
|
||||||
|
if(self.ppl.hasOwnProperty(msg.id)) {
|
||||||
|
self.participantUpdate(msg);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.on("bye", function(msg) {
|
||||||
|
self.removeParticipant(msg.p);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
Client.prototype.send = function(raw) {
|
||||||
|
if(this.isConnected()) this.ws.send(raw);
|
||||||
|
};
|
||||||
|
|
||||||
|
Client.prototype.sendArray = function(arr) {
|
||||||
|
this.send(JSON.stringify(arr));
|
||||||
|
};
|
||||||
|
|
||||||
|
Client.prototype.setChannel = function(id, set) {
|
||||||
|
this.desiredChannelId = id || this.desiredChannelId || "lobby";
|
||||||
|
this.desiredChannelSettings = set || this.desiredChannelSettings || undefined;
|
||||||
|
this.sendArray([{m: "ch", _id: this.desiredChannelId, set: this.desiredChannelSettings}]);
|
||||||
|
};
|
||||||
|
|
||||||
|
Client.prototype.offlineChannelSettings = {
|
||||||
|
color:"#ecfaed"
|
||||||
|
};
|
||||||
|
|
||||||
|
Client.prototype.getChannelSetting = function(key) {
|
||||||
|
if(!this.isConnected() || !this.channel || !this.channel.settings) {
|
||||||
|
return this.offlineChannelSettings[key];
|
||||||
|
}
|
||||||
|
return this.channel.settings[key];
|
||||||
|
};
|
||||||
|
|
||||||
|
Client.prototype.setChannelSettings = function(settings) {
|
||||||
|
if(!this.isConnected() || !this.channel || !this.channel.settings) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if(this.desiredChannelSettings){
|
||||||
|
for(var key in settings) {
|
||||||
|
this.desiredChannelSettings[key] = settings[key];
|
||||||
|
}
|
||||||
|
this.sendArray([{m: "chset", set: this.desiredChannelSettings}]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Client.prototype.offlineParticipant = {
|
||||||
|
_id: "",
|
||||||
|
name: "",
|
||||||
|
color: "#777"
|
||||||
|
};
|
||||||
|
|
||||||
|
Client.prototype.getOwnParticipant = function() {
|
||||||
|
return this.findParticipantById(this.participantId);
|
||||||
|
};
|
||||||
|
|
||||||
|
Client.prototype.setParticipants = function(ppl) {
|
||||||
|
// remove participants who left
|
||||||
|
for(var id in this.ppl) {
|
||||||
|
if(!this.ppl.hasOwnProperty(id)) continue;
|
||||||
|
var found = false;
|
||||||
|
for(var j = 0; j < ppl.length; j++) {
|
||||||
|
if(ppl[j].id === id) {
|
||||||
|
found = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(!found) {
|
||||||
|
this.removeParticipant(id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// update all
|
||||||
|
for(var i = 0; i < ppl.length; i++) {
|
||||||
|
this.participantUpdate(ppl[i]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Client.prototype.countParticipants = function() {
|
||||||
|
var count = 0;
|
||||||
|
for(var i in this.ppl) {
|
||||||
|
if(this.ppl.hasOwnProperty(i)) ++count;
|
||||||
|
}
|
||||||
|
return count;
|
||||||
|
};
|
||||||
|
|
||||||
|
Client.prototype.participantUpdate = function(update) {
|
||||||
|
var part = this.ppl[update.id] || null;
|
||||||
|
if(part === null) {
|
||||||
|
part = update;
|
||||||
|
this.ppl[part.id] = part;
|
||||||
|
this.emit("participant added", part);
|
||||||
|
this.emit("count", this.countParticipants());
|
||||||
|
} else {
|
||||||
|
if(update.x) part.x = update.x;
|
||||||
|
if(update.y) part.y = update.y;
|
||||||
|
if(update.color) part.color = update.color;
|
||||||
|
if(update.name) part.name = update.name;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Client.prototype.removeParticipant = function(id) {
|
||||||
|
if(this.ppl.hasOwnProperty(id)) {
|
||||||
|
var part = this.ppl[id];
|
||||||
|
delete this.ppl[id];
|
||||||
|
this.emit("participant removed", part);
|
||||||
|
this.emit("count", this.countParticipants());
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Client.prototype.findParticipantById = function(id) {
|
||||||
|
return this.ppl[id] || this.offlineParticipant;
|
||||||
|
};
|
||||||
|
|
||||||
|
Client.prototype.isOwner = function() {
|
||||||
|
return this.channel && this.channel.crown && this.channel.crown.participantId === this.participantId;
|
||||||
|
};
|
||||||
|
|
||||||
|
Client.prototype.preventsPlaying = function() {
|
||||||
|
return this.isConnected() && !this.isOwner() && this.getChannelSetting("crownsolo") === true;
|
||||||
|
};
|
||||||
|
|
||||||
|
Client.prototype.receiveServerTime = function(time, echo) {
|
||||||
|
var self = this;
|
||||||
|
var now = Date.now();
|
||||||
|
var target = time - now;
|
||||||
|
//console.log("Target serverTimeOffset: " + target);
|
||||||
|
var duration = 1000;
|
||||||
|
var step = 0;
|
||||||
|
var steps = 50;
|
||||||
|
var step_ms = duration / steps;
|
||||||
|
var difference = target - this.serverTimeOffset;
|
||||||
|
var inc = difference / steps;
|
||||||
|
var iv;
|
||||||
|
iv = setInterval(function() {
|
||||||
|
self.serverTimeOffset += inc;
|
||||||
|
if(++step >= steps) {
|
||||||
|
clearInterval(iv);
|
||||||
|
//console.log("serverTimeOffset reached: " + self.serverTimeOffset);
|
||||||
|
self.serverTimeOffset=target;
|
||||||
|
}
|
||||||
|
}, step_ms);
|
||||||
|
// smoothen
|
||||||
|
|
||||||
|
//this.serverTimeOffset = time - now; // mostly time zone offset ... also the lags so todo smoothen this
|
||||||
|
// not smooth:
|
||||||
|
//if(echo) this.serverTimeOffset += echo - now; // mostly round trip time offset
|
||||||
|
};
|
||||||
|
|
||||||
|
Client.prototype.startNote = function(note, vel) {
|
||||||
|
if(this.isConnected()) {
|
||||||
|
var vel = typeof vel === "undefined" ? undefined : +vel.toFixed(3);
|
||||||
|
if(!this.noteBufferTime) {
|
||||||
|
this.noteBufferTime = Date.now();
|
||||||
|
this.noteBuffer.push({n: note, v: vel});
|
||||||
|
} else {
|
||||||
|
this.noteBuffer.push({d: Date.now() - this.noteBufferTime, n: note, v: vel});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Client.prototype.stopNote = function(note) {
|
||||||
|
if(this.isConnected()) {
|
||||||
|
if(!this.noteBufferTime) {
|
||||||
|
this.noteBufferTime = Date.now();
|
||||||
|
this.noteBuffer.push({n: note, s: 1});
|
||||||
|
} else {
|
||||||
|
this.noteBuffer.push({d: Date.now() - this.noteBufferTime, n: note, s: 1});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
|
@ -0,0 +1,85 @@
|
||||||
|
|
||||||
|
var exports = (function() {
|
||||||
|
|
||||||
|
var NoteQuota = function(cb) {
|
||||||
|
this.cb = cb;
|
||||||
|
this.setParams();
|
||||||
|
this.resetPoints();
|
||||||
|
};
|
||||||
|
|
||||||
|
NoteQuota.PARAMS_LOBBY = {allowance: 200, max: 600};
|
||||||
|
NoteQuota.PARAMS_NORMAL = {allowance: 400, max: 1200};
|
||||||
|
NoteQuota.PARAMS_RIDICULOUS = {allowance: 600, max: 1800};
|
||||||
|
NoteQuota.PARAMS_OFFLINE = {allowance: 8000, max: 24000, maxHistLen: 3};
|
||||||
|
|
||||||
|
NoteQuota.prototype.getParams = function() {
|
||||||
|
return {
|
||||||
|
m: "nq",
|
||||||
|
allowance: this.allowance,
|
||||||
|
max: this.max,
|
||||||
|
maxHistLen: this.maxHistLen
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
NoteQuota.prototype.setParams = function(params) {
|
||||||
|
params = params || NoteQuota.PARAMS_OFFLINE;
|
||||||
|
var allowance = params.allowance || this.allowance || NoteQuota.PARAMS_OFFLINE.allowance;
|
||||||
|
var max = params.max || this.max || NoteQuota.PARAMS_OFFLINE.max;
|
||||||
|
var maxHistLen = params.maxHistLen || this.maxHistLen || NoteQuota.PARAMS_OFFLINE.maxHistLen;
|
||||||
|
if(allowance !== this.allowance || max !== this.max || maxHistLen !== this.maxHistLen) {
|
||||||
|
this.allowance = allowance;
|
||||||
|
this.max = max;
|
||||||
|
this.maxHistLen = maxHistLen;
|
||||||
|
this.resetPoints();
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
NoteQuota.prototype.resetPoints = function() {
|
||||||
|
this.points = this.max;
|
||||||
|
this.history = [];
|
||||||
|
for(var i = 0; i < this.maxHistLen; i++)
|
||||||
|
this.history.unshift(this.points);
|
||||||
|
if(this.cb) this.cb(this.points);
|
||||||
|
};
|
||||||
|
|
||||||
|
NoteQuota.prototype.tick = function() {
|
||||||
|
// keep a brief history
|
||||||
|
this.history.unshift(this.points);
|
||||||
|
this.history.length = this.maxHistLen;
|
||||||
|
// hook a brother up with some more quota
|
||||||
|
if(this.points < this.max) {
|
||||||
|
this.points += this.allowance;
|
||||||
|
if(this.points > this.max) this.points = this.max;
|
||||||
|
// fire callback
|
||||||
|
if(this.cb) this.cb(this.points);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
NoteQuota.prototype.spend = function(needed) {
|
||||||
|
// check whether aggressive limitation is needed
|
||||||
|
var sum = 0;
|
||||||
|
for(var i in this.history) {
|
||||||
|
sum += this.history[i];
|
||||||
|
}
|
||||||
|
if(sum <= 0) needed *= this.allowance;
|
||||||
|
// can they afford it? spend
|
||||||
|
if(this.points < needed) {
|
||||||
|
return false;
|
||||||
|
} else {
|
||||||
|
this.points -= needed;
|
||||||
|
if(this.cb) this.cb(this.points); // fire callback
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return NoteQuota;
|
||||||
|
|
||||||
|
})();
|
||||||
|
|
||||||
|
if(typeof module !== "undefined") {
|
||||||
|
module.exports = exports;
|
||||||
|
} else {
|
||||||
|
this.NoteQuota = exports;
|
||||||
|
}
|
|
@ -0,0 +1,27 @@
|
||||||
|
|
||||||
|
<style>
|
||||||
|
body, td {
|
||||||
|
background: #631;
|
||||||
|
color: orange;
|
||||||
|
font: 256px monospace;
|
||||||
|
text-shadow: 10px 10px 5px #531;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<table width="100%" height="100%">
|
||||||
|
<td id="hours" align="center" valign="middle"></td>
|
||||||
|
</table>
|
||||||
|
<script>
|
||||||
|
var then = new Date("January 7 2014 17:13:00 GMT-0400 (EDT)");
|
||||||
|
var div = document.getElementById("hours");
|
||||||
|
setInterval(function() {
|
||||||
|
var now = Date.now();
|
||||||
|
var hours = ((then - now) / (1000 * 60 * 60));
|
||||||
|
hours = Math.round(hours * 100000) / 100000;
|
||||||
|
hours = hours.toString();
|
||||||
|
while(hours.length < 8)
|
||||||
|
hours = hours + "0";
|
||||||
|
hours = hours.substr(0, 8);
|
||||||
|
div.innerHTML = hours;
|
||||||
|
}, 10);
|
||||||
|
</script>
|
After Width: | Height: | Size: 302 B |
After Width: | Height: | Size: 404 B |
After Width: | Height: | Size: 394 B |
After Width: | Height: | Size: 665 B |
After Width: | Height: | Size: 398 B |
After Width: | Height: | Size: 371 B |
After Width: | Height: | Size: 358 B |
After Width: | Height: | Size: 359 B |
After Width: | Height: | Size: 377 B |
After Width: | Height: | Size: 400 B |
After Width: | Height: | Size: 394 B |
After Width: | Height: | Size: 368 B |
After Width: | Height: | Size: 380 B |
After Width: | Height: | Size: 407 B |
After Width: | Height: | Size: 607 B |
After Width: | Height: | Size: 407 B |
After Width: | Height: | Size: 383 B |
After Width: | Height: | Size: 383 B |
After Width: | Height: | Size: 407 B |
After Width: | Height: | Size: 407 B |
After Width: | Height: | Size: 377 B |
After Width: | Height: | Size: 377 B |
After Width: | Height: | Size: 252 B |
After Width: | Height: | Size: 251 B |
After Width: | Height: | Size: 254 B |
After Width: | Height: | Size: 596 B |
After Width: | Height: | Size: 262 B |
After Width: | Height: | Size: 266 B |
After Width: | Height: | Size: 263 B |
After Width: | Height: | Size: 255 B |
After Width: | Height: | Size: 264 B |
After Width: | Height: | Size: 262 B |
After Width: | Height: | Size: 314 B |
After Width: | Height: | Size: 314 B |
After Width: | Height: | Size: 347 B |
After Width: | Height: | Size: 347 B |
After Width: | Height: | Size: 672 B |
After Width: | Height: | Size: 362 B |
After Width: | Height: | Size: 351 B |
After Width: | Height: | Size: 348 B |
After Width: | Height: | Size: 348 B |
After Width: | Height: | Size: 304 B |
After Width: | Height: | Size: 303 B |
After Width: | Height: | Size: 314 B |
After Width: | Height: | Size: 314 B |
After Width: | Height: | Size: 331 B |
After Width: | Height: | Size: 331 B |
After Width: | Height: | Size: 661 B |
After Width: | Height: | Size: 313 B |
After Width: | Height: | Size: 314 B |
After Width: | Height: | Size: 261 B |
After Width: | Height: | Size: 260 B |
After Width: | Height: | Size: 261 B |
After Width: | Height: | Size: 260 B |
After Width: | Height: | Size: 261 B |
After Width: | Height: | Size: 260 B |
After Width: | Height: | Size: 261 B |
After Width: | Height: | Size: 260 B |
After Width: | Height: | Size: 641 B |
After Width: | Height: | Size: 341 B |
After Width: | Height: | Size: 344 B |
After Width: | Height: | Size: 344 B |
After Width: | Height: | Size: 348 B |
After Width: | Height: | Size: 363 B |
After Width: | Height: | Size: 363 B |
After Width: | Height: | Size: 339 B |
After Width: | Height: | Size: 343 B |
After Width: | Height: | Size: 425 B |
After Width: | Height: | Size: 419 B |
After Width: | Height: | Size: 640 B |
After Width: | Height: | Size: 425 B |
After Width: | Height: | Size: 419 B |
After Width: | Height: | Size: 425 B |
After Width: | Height: | Size: 419 B |
After Width: | Height: | Size: 425 B |
After Width: | Height: | Size: 419 B |
After Width: | Height: | Size: 348 B |
After Width: | Height: | Size: 348 B |
After Width: | Height: | Size: 348 B |
After Width: | Height: | Size: 348 B |
After Width: | Height: | Size: 698 B |
After Width: | Height: | Size: 348 B |
After Width: | Height: | Size: 348 B |
After Width: | Height: | Size: 348 B |
After Width: | Height: | Size: 348 B |
After Width: | Height: | Size: 379 B |
After Width: | Height: | Size: 379 B |
After Width: | Height: | Size: 379 B |
After Width: | Height: | Size: 379 B |
After Width: | Height: | Size: 379 B |
After Width: | Height: | Size: 379 B |
After Width: | Height: | Size: 707 B |
After Width: | Height: | Size: 379 B |