Last active
December 20, 2015 08:19
-
-
Save epicfaace/6099676 to your computer and use it in GitHub Desktop.
Scatter changetime
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var ScatterGame = new Class({ | |
Binds: "mStart mEnd mDrop mEnter mLeave touchHandler instructionStart".split(" "), | |
TOUCH_EVENT_MAP: { | |
touchstart: "mousedown", | |
touchmove: "mousemove", | |
touchend: "mouseup" | |
}, | |
isDragging: !1, | |
termSidesById: {}, | |
tenths: 0, | |
zindex: 9999, | |
recordTime: !1, | |
ts: !1, | |
minMajorDimension: 950, | |
minMinorDimension: 480, | |
initialize: function (a) { | |
this.scatterBox = $("scatterBox"); | |
this.quizIds = a.quizIds; | |
this.terms = QTerm.dataToArray(a.terms); | |
this.nowShowing = Math.min(8, this.terms.length); | |
this.decimalSeparator = a.decimalSeparator; | |
this.embedding = -1 !== window.location.toString().indexOf("embed"); | |
this.recordTime = (this.loggedIn = a.loggedIn) ? a.recordTime : Cookie.read("scatter-" + this.quizIds); | |
this.qnonce = 1 <= sclicker++ ? a.qnonce + a.qnonce : a.qnonce; | |
this.adjustDimensions(); | |
var b; | |
window.addEvent("resize", function () { | |
this.adjustDimensions(); | |
clearTimeout(b); | |
b = function () { | |
this.setSizeDependents(); | |
var a = window.getSize(); | |
a.x * a.y < this.minMajorDimension * this.minMinorDimension && (this.ts = !0) | |
}.delay(200, this) | |
}.bind(this)); | |
this.beforeStart(); | |
HighScores.init(this.scatterBox.getTop()); | |
_gaq.push(["_trackEvent", "Scatter", "Loaded"]) | |
}, | |
adjustDimensions: function () { | |
this.embedding ? this.scatterBox.setStyle("height", $("footer-ad-wrap").getPosition().y - this.scatterBox.getPosition().y - 40) : this.scatterBox.setStyle("height", $("footer-ad-wrap").getPosition().y - this.scatterBox.getPosition().y - 20) | |
}, | |
beforeStart: function () { | |
var a = $("get-started"); | |
$("start-game-link") && ($("start-game-link").addEvent("click", this.instructionStart), document.addEvent("keypress", function (a) { | |
"enter" === a.key && this.instructionStart() | |
}.bind(this))); | |
if (a) { | |
var b = (window.getHeight() - a.offsetHeight) / 2; | |
(new Fx.Morph(a)).start({ | |
opacity: [0, 1], | |
top: [b + 20, b] | |
}) | |
} else this.clickStart() | |
}, | |
instructionStart: function () { | |
var a = $("get-started"); | |
(new Fx.Morph(a, { | |
onComplete: function () { | |
a.destroy(); | |
this.clickStart() | |
}.bind(this) | |
})).start({ | |
opacity: 0, | |
top: a.getTop() + 20 | |
}); | |
return !1 | |
}, | |
setSizeDependents: function () { | |
Object.each(this.termSidesById, function (a) { | |
a.setSizeDependents() | |
}) | |
}, | |
generatePositions: function () { | |
this.scatterBox.setStyle("opacity", 0); | |
var a, b, c = [], | |
d; | |
this.termSidesById = {}; | |
for (var e = 0; e < this.nowShowing; e++) a = new TermSide(this, this.terms[e], "word"), a.assignNewPosition(), this.termSidesById[a.id] = a, b = new TermSide(this, this.terms[e], "definition"), b.assignNewPosition(), this.termSidesById[b.id] = b, c.push(a.el), c.push(b.el); | |
Object.each(this.termSidesById, function (a) { | |
d = Array.clone(c).erase(a.el); | |
a.el.makeMatchable({ | |
container: this.scatterBox, | |
onStart: this.mStart, | |
onComplete: this.mEnd, | |
onQDrop: this.mDrop, | |
onQEnter: this.mEnter, | |
onQLeave: this.mLeave, | |
droppables: d | |
}); | |
a.el.addEvents({ | |
touchstart: function (a) { | |
this.isDragging || | |
(this.isDragging = !0, this.touchHandler(a)) | |
}.bind(this), | |
touchmove: function (a) { | |
this.isDragging && this.touchHandler(a) | |
}.bind(this), | |
touchend: function (a) { | |
this.touchHandler(a); | |
this.isDragging = !1 | |
}.bind(this), | |
touchcancel: this.touchHandler | |
}) | |
}, this) | |
}, | |
clickStart: function () { | |
this.startGame(); | |
this.startGame = function () {} | |
}, | |
startGame: function () { | |
var a = $("footer-ad-wrap"); | |
a && 0 == a.getStyle("opacity") && a.tween("opacity", 0, 1); | |
var b = window.getSize(); | |
if (!this.embedding && b.x * b.y < this.minMajorDimension * this.minMinorDimension) { | |
window.resizeTo(screen.width, | |
screen.height); | |
var b = window.getSize(), | |
a = screen.width - b.x, | |
b = screen.height - b.y, | |
c = this.minMajorDimension, | |
d = this.minMinorDimension; | |
screen.width < screen.height && (c = this.minMinorDimension, d = this.minMajorDimension); | |
window.resizeTo(Math.min(c + a, screen.width), Math.min(d + b, screen.height)); | |
b = window.getSize(); | |
b.x * b.y < this.minMajorDimension * this.minMinorDimension && (this.ts = !0) | |
} | |
this.startTime = (new Date).getTime(); | |
this.generatePositions(); | |
this.scatterBox.tween("opacity", 0, 1); | |
this.secondTimer = this.refreshTimer.periodical(100, | |
this); | |
_gaq.push(["_trackEvent", "Scatter", "Started"]) | |
}, | |
gameOver: function () { | |
clearInterval(this.secondTimer); | |
(new Request({ | |
url: window.location.toString().split("#")[0], | |
data: { | |
action: "save_score", | |
score: this.tenths, | |
time_started: Quizlet.SERVER_TIME | |
}, | |
onSuccess: HighScores.updateAndShow.bind(HighScores) | |
})).send() | |
}, | |
convertTime: function (a) { | |
a = Math.abs(a); | |
var b = Math.floor(a / 600), | |
c = Math.floor((a - 600 * b) / 10); | |
return { | |
minutes: b, | |
seconds: 10 > c ? "0" + c : "" + c, | |
tenths: a - 600 * b - 10 * c | |
} | |
}, | |
humanTime: function (a) { | |
var b = ""; | |
a = this.convertTime(a); | |
"0" === a.seconds.substring(0, 1) && (a.seconds = a.seconds.substring(1)); | |
0 < a.minutes && (b += a.minutes + (1 === a.minutes ? " minute, " : " minutes, ")); | |
return b += a.seconds + this.decimalSeparator + a.tenths + " seconds" | |
}, | |
serialTime: function (a) { | |
a = this.convertTime(a); | |
return a.minutes + ":" + a.seconds + this.decimalSeparator + a.tenths | |
}, | |
refreshTimer: function () { | |
var a = ("" + ((new Date).getTime() - this.startTime) / 1E3).split("."); | |
this.tenths = parseFloat(a[0] + (1 < a.length ? a[1].substr(0, 1) : 0)); | |
this.recordTime && (this.tenths > this.recordTime && | |
this.tenths < this.recordTime + 3 && "" === $("time").className) && ((new Fx.Tween("time", { | |
duration: 1500 | |
})).start("color", "#b00"), $("time").className = "flipped"); | |
a = this.convertTime(this.tenths); | |
$("tens").set("html", a.tenths); | |
$("seconds").set("html", a.seconds); | |
$("minutes").set("html", a.minutes) | |
}, | |
touchHandler: function (a) { | |
var b = a.changedTouches, | |
c = b[0]; | |
1 === b.length && (a.preventDefault(), a = this.TOUCH_EVENT_MAP[a.type], null !== a && (b = document.createEvent("MouseEvent"), b.initMouseEvent(a, !0, !0, window, 1, c.screenX, c.screenY, | |
c.clientX, c.clientY, !1, !1, !1, !1, 0, null), c.target.dispatchEvent(b))) | |
}, | |
mStart: function (a) { | |
a.setStyle("z-index", --this.zindex); | |
a.removeClass("over"); | |
a.addClass("dragging") | |
}, | |
mEnd: function (a) { | |
a.removeClass("dragging"); | |
termSide = this.termSidesById[a.id]; | |
termSide.cachePosition() | |
}, | |
mEnter: function (a, b) { | |
b.addClass("over") | |
}, | |
mLeave: function (a, b) { | |
b.removeClass("over") | |
}, | |
mDrop: function (a, b) { | |
var c = a.id, | |
d = this.termSidesById[c], | |
e = b.filter(function (a) { | |
a = a.id; | |
var b = this.termSidesById[a]; | |
if (a !== c) { | |
if (b.isValidPosition()) return d.matches(b); | |
b.assignNewPosition(!0) | |
} | |
return !1 | |
}, this); | |
0 < e.length ? (e = e.getLast(), [a, e].each(function (a) { | |
a.removeEvents(); | |
a.set("tween", { | |
duration: 500, | |
onComplete: function () { | |
a.dispose() | |
} | |
}).tween("opacity", 1, 0); | |
a.set("class", "correct") | |
}), this.nowShowing--, 0 === this.nowShowing && this.gameOver()) : d.assignNewPosition(!0) | |
} | |
}), | |
TermSide = new Class({ | |
Binds: ["mOut", "mOver", "cachePosition"], | |
side: "", | |
mateSide: "", | |
prompt: "", | |
answer: "", | |
qterm: null, | |
id: "", | |
el: null, | |
game: null, | |
initialize: function (a, b, c) { | |
this.id = "word" === c ? "w" + b.id : "d" + b.id; | |
this.game = | |
a; | |
this.qterm = b; | |
this.timeclock = $("timeclock"); | |
this.el = new Element("div", { | |
id: this.id, | |
"class": b.getLangClass(c), | |
html: b.displayRich(c, 140) | |
}); | |
this.el.inject(a.scatterBox); | |
this.el.addEvents({ | |
mouseout: this.mOut, | |
mouseover: this.mOver | |
}); | |
this.side = c; | |
this.mateSide = "definition" === c ? "word" : "definition"; | |
this.prompt = this.qterm.getRaw(this.side) + ("definition" === this.side ? this.qterm.photo : ""); | |
this.answer = this.qterm.getRaw(this.mateSide) + ("definition" === this.mateSide ? this.qterm.photo : "") | |
}, | |
matches: function (a) { | |
return this.answer === | |
a.prompt || this.prompt === a.answer | |
}, | |
mOver: function () { | |
this.el.addClass("mouseover") | |
}, | |
mOut: function () { | |
this.el.removeClass("mouseover") | |
}, | |
assignNewPosition: function (a, b) { | |
a = a || !1; | |
if ($defined(b)) { | |
if (0 === b) return | |
} else b = 75; | |
var c = this.el.getSize(), | |
d = this.game.scatterBox.getCoordinates(), | |
e = d.top, | |
g = d.bottom - c.y, | |
d = Number.random(d.left, d.right - c.x), | |
e = Number.random(e, g), | |
c = { | |
x1: d, | |
x2: d + c.x, | |
y1: e, | |
y2: e + c.y | |
}; | |
if (this.overlaps(this.getTimerBoxCoordinates(), c)) return this.assignNewPosition(a, --b); | |
for (var f in this.game.termSidesById) | |
if (this.game.termSidesById.hasOwnProperty(f) && | |
this.id !== f && this.overlaps(this.game.termSidesById[f].getBox(), c)) return this.assignNewPosition(a, --b); | |
a ? (new Fx.Morph(this.el, { | |
onComplete: this.cachePosition | |
})).start({ | |
left: c.x1, | |
top: c.y1 | |
}) : (this.el.setPosition({ | |
x: c.x1, | |
y: c.y1 | |
}), this.cachePosition()) | |
}, | |
getTimerBoxCoordinates: function () { | |
var a = this.timeclock.getCoordinates(); | |
return { | |
x1: a.left, | |
x2: a.right, | |
y1: a.top, | |
y2: a.bottom | |
} | |
}, | |
getBox: function () { | |
var a = this.el.getCoordinates(); | |
return box = { | |
x1: a.left, | |
x2: a.right, | |
y1: a.top, | |
y2: a.bottom | |
} | |
}, | |
overlaps: function (a, b) { | |
return a.x1 < | |
b.x2 && a.x2 > b.x1 && a.y1 < b.y2 && a.y2 > b.y1 | |
}, | |
setSizeDependents: function () { | |
var a = this.game.scatterBox.getCoordinates(), | |
b = this.el.getCoordinates(); | |
(b.right > a.right || b.bottom > a.bottom) && this.assignNewPosition(!0) | |
}, | |
cachePosition: function () { | |
var a = this.el.getCoordinates(); | |
this.cachedX = a.left; | |
this.cachedY = a.top | |
}, | |
isValidPosition: function () { | |
var a = this.el.getCoordinates(); | |
return this.cachedX === a.left && this.cachedY === a.top | |
} | |
}); | |
Drag.Match = new Class({ | |
Extends: Drag.Move, | |
getOverlapping: function () { | |
return this.droppables.filter(function (a, b) { | |
a = this.positions ? this.positions[b] : this.getDroppableCoordinates(a); | |
var c = this.element.getCoordinates(); | |
return c.left < a.right && c.right > a.left && c.top < a.bottom && c.bottom > a.top | |
}, this) | |
}, | |
checkDroppables: function () { | |
var a = this.getOverlapping(); | |
a && a.each(function (a) { | |
(!this.overed || !this.overed.contains(a)) && this.fireEvent("qEnter", [this.element, a]) | |
}, this); | |
this.overed && this.overed.each(function (b) { | |
(!a || !a.contains(b)) && this.fireEvent("qLeave", [this.element, b]) | |
}, this); | |
this.overed = a | |
}, | |
stop: function (a) { | |
var b = this.getOverlapping(); | |
0 < b.length && this.fireEvent("qDrop", [this.element, b, a]); | |
this.overed && this.overed.each(function (a) { | |
this.fireEvent("qLeave", [this.element, a]) | |
}, this); | |
this.parent(a) | |
} | |
}); | |
Element.implement({ | |
makeMatchable: function (a) { | |
a = new Drag.Match(this, a); | |
this.store("dragger", a); | |
return a | |
} | |
}); | |
sclicker = 0; | |
QLoad("scatter"); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment