229 lines
8.8 KiB
JavaScript
229 lines
8.8 KiB
JavaScript
//
|
|
// triviaPodium.js
|
|
//
|
|
// Created by Rebecca Stankus on 08/01/18
|
|
// Copyright 2018 High Fidelity, Inc.
|
|
//
|
|
// Distributed under the Apache License, Version 2.0.
|
|
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
|
|
|
|
// show choices as overlays
|
|
// on clicking/triggering an overlay, the choice is saved
|
|
// on time up, the choice is shown as an entity on the front of the podium
|
|
|
|
(function() {
|
|
var NUMBER_OF_CHOICES = 4;
|
|
var SELECTED_COLOR = { red: 131, blue: 252, green: 238 };
|
|
var DESELECTED_COLOR = { red: 62, blue: 129, green: 138 };
|
|
var CORRECT_COLOR = { red: 74, blue: 116, green: 255 };
|
|
var INCORRECT_COLOR = { red: 252, blue: 149, green: 131 };
|
|
|
|
var choicesLocalPositions = [
|
|
{ x: -0.13284015655517578, y: 0.55535888671875, z: 0.09815025329589844 },
|
|
{ x: 0.15333318710327148, y: 0.5553245544433594, z: 0.10216426849365234 },
|
|
{ x: -0.13469266891479492, y: 0.5553092956542969, z: 0.24424362182617188 },
|
|
{ x: 0.15348529815673828, y: 0.5552749633789062, z: 0.24558639526367188 }
|
|
];
|
|
var overlays = [];
|
|
var podium;
|
|
var selectedAnswer;
|
|
var questionTextEntity = null;
|
|
var revealTextEntity = null;
|
|
|
|
var _this;
|
|
|
|
var TriviaZone = function() {
|
|
_this = this;
|
|
};
|
|
|
|
TriviaZone.prototype = {
|
|
preload: function(entityID) {
|
|
_this.entityID = entityID;
|
|
podium = Entities.getEntityProperties(_this.entityID, 'parentID').parentID;
|
|
var podiumParts = Entities.getChildrenIDs(podium);
|
|
podiumParts.forEach(function(part) {
|
|
var name = Entities.getEntityProperties(part, 'name').name;
|
|
if (name === "Trivia Podium Question") {
|
|
questionTextEntity = part;
|
|
} else if (name === "Trivia Podium Reveal") {
|
|
revealTextEntity = part;
|
|
}
|
|
});
|
|
},
|
|
|
|
shuffle: function(array) {
|
|
var currentIndex = array.length, temporaryValue, randomIndex;
|
|
|
|
while (currentIndex !== 0) {
|
|
randomIndex = Math.floor(Math.random() * currentIndex);
|
|
currentIndex -= 1;
|
|
temporaryValue = array[currentIndex];
|
|
array[currentIndex] = array[randomIndex];
|
|
array[randomIndex] = temporaryValue;
|
|
}
|
|
return array;
|
|
},
|
|
|
|
createChoiceOverlays: function() {
|
|
var currentLocalPosition = 0;
|
|
while (currentLocalPosition < NUMBER_OF_CHOICES) {
|
|
var overlay = Overlays.addOverlay("text3d", {
|
|
color: { red: 66, blue: 63, green: 0 },
|
|
backgroundColor: SELECTED_COLOR,
|
|
dimensions: { x: 0.2629, y: 0.1214, z: 0.01 },
|
|
parentID: podium,
|
|
lineHeight: 0.03,
|
|
text: "Answer choices\nwill appear here",
|
|
localPosition: choicesLocalPositions[currentLocalPosition],
|
|
localRotation: {
|
|
x: -0.7083390951156616,
|
|
y: 0,
|
|
z: 0,
|
|
w: 0.7058365345001221
|
|
},
|
|
leftMargin: 0.01,
|
|
topMargin: 0.01,
|
|
rightMargin: 0.01,
|
|
bottomMargin: 0.01
|
|
});
|
|
overlays.push(overlay);
|
|
currentLocalPosition++;
|
|
}
|
|
},
|
|
|
|
mouseRelease: function(id, event) {
|
|
if (!event.button === "Primary") {
|
|
return;
|
|
}
|
|
if (overlays.indexOf(id) !== -1) {
|
|
selectedAnswer = Overlays.getProperty(id, 'text');
|
|
overlays.forEach(function(overlay) {
|
|
if (overlay === id) {
|
|
Overlays.editOverlay(overlay, { backgroundColor: SELECTED_COLOR });
|
|
} else {
|
|
var text = Overlays.getProperty(overlay, 'text');
|
|
if (text) {
|
|
Overlays.editOverlay(overlay, { backgroundColor: DESELECTED_COLOR });
|
|
}
|
|
}
|
|
});
|
|
}
|
|
},
|
|
|
|
deleteOverlays: function() {
|
|
overlays.forEach(function(overlay) {
|
|
Overlays.deleteOverlay(overlay);
|
|
});
|
|
},
|
|
|
|
triviaListener: function(channel, message, sender) {
|
|
message = JSON.parse(message);
|
|
if (channel === "TriviaChannel" && message.type === 'newQuestion') {
|
|
_this.newQuestion(message.question, message.choices);
|
|
} else if (channel === "TriviaChannel" && message.type === 'reveal') {
|
|
_this.reveal();
|
|
} else if (channel === "TriviaChannel" && message.type === 'clearPodium') {
|
|
_this.clearPodium();
|
|
} else if (channel === "TriviaChannel" && message.type === 'check') {
|
|
_this.showIfCorrect(message.correct);
|
|
}
|
|
},
|
|
|
|
enterEntity: function() {
|
|
print("subsribing to TriviaChannel");
|
|
Messages.subscribe("TriviaChannel");
|
|
Messages.messageReceived.connect(_this.triviaListener);
|
|
_this.createChoiceOverlays();
|
|
Overlays.mouseReleaseOnOverlay.connect(this.mouseRelease);
|
|
},
|
|
|
|
newQuestion: function(question, choices) {
|
|
selectedAnswer = null;
|
|
Entities.editEntity(questionTextEntity, { text: question });
|
|
Entities.editEntity(revealTextEntity, {
|
|
text: "?",
|
|
backgroundColor: SELECTED_COLOR
|
|
});
|
|
var currentOverlay = 0;
|
|
choices.forEach(function(choice) {
|
|
Overlays.editOverlay(overlays[currentOverlay], {
|
|
text: choice,
|
|
backgroundColor: SELECTED_COLOR,
|
|
visible: true
|
|
});
|
|
currentOverlay++;
|
|
});
|
|
if (choices.length < NUMBER_OF_CHOICES) {
|
|
while (currentOverlay < NUMBER_OF_CHOICES) {
|
|
Overlays.editOverlay(overlays[currentOverlay], {
|
|
text: "",
|
|
visible: false
|
|
});
|
|
currentOverlay++;
|
|
}
|
|
}
|
|
},
|
|
|
|
reveal: function() {
|
|
if (selectedAnswer) {
|
|
if (!revealTextEntity) {
|
|
var podiumParts = Entities.getChildrenIDs(podium);
|
|
podiumParts.forEach(function(part) {
|
|
var name = Entities.getEntityProperties(part, 'name').name;
|
|
if (name === "Trivia Podium Reveal") {
|
|
revealTextEntity = part;
|
|
}
|
|
});
|
|
}
|
|
Entities.editEntity(revealTextEntity, { text: selectedAnswer });
|
|
} else {
|
|
print("no answer was selected");
|
|
}
|
|
overlays.forEach(function(overlay) {
|
|
var text = Overlays.getProperty(overlay, 'text');
|
|
if (text !== selectedAnswer) {
|
|
Overlays.editOverlay(overlay, { visible: false });
|
|
}
|
|
});
|
|
},
|
|
|
|
showIfCorrect: function(correctAnswer) {
|
|
var myAnswer = Entities.getEntityProperties(revealTextEntity, 'text').text;
|
|
if (myAnswer === correctAnswer) {
|
|
Entities.editEntity(revealTextEntity, { backgroundColor: CORRECT_COLOR });
|
|
} else {
|
|
Entities.editEntity(revealTextEntity, { backgroundColor: INCORRECT_COLOR });
|
|
}
|
|
},
|
|
|
|
leaveEntity: function() {
|
|
// Entities.editEntity(questionTextEntity, { text: "Question will appear here" });
|
|
// Entities.editEntity(revealTextEntity, {
|
|
// text: "?",
|
|
// backgroundColor: SELECTED_COLOR
|
|
// });
|
|
Messages.messageReceived.disconnect(_this.triviaListener);
|
|
Messages.unsubscribe("TriviaChannel");
|
|
print("UNSUBSCRIBING to TriviaChannel");
|
|
_this.deleteOverlays();
|
|
overlays = [];
|
|
},
|
|
|
|
clearPodium: function() {
|
|
if (overlays) {
|
|
overlays.forEach(function(overlay) {
|
|
Overlays.editOverlay(overlay, {
|
|
text: "Select an \n answer here",
|
|
visible: true
|
|
});
|
|
});
|
|
}
|
|
},
|
|
|
|
unload: function() {
|
|
_this.leaveEntity();
|
|
}
|
|
};
|
|
|
|
return new TriviaZone;
|
|
});
|