import { AppUtils } from "./../app-utils";
import { CabriIntegration } from "./cabri-integration";
import { CabriDataService } from "../services/cabri-data.service";
import { GlobalService } from "../services/global.service";
import { ElementRef, NgZone, Renderer2 } from "@angular/core";
declare var window: {
store: any;
document: any;
innerWidth: any;
innerHeight: any;
outerWidth: any;
outerHeight: any;
Globals: any;
};
declare var BABYLON;
export class CabriIntegrationJeudufuret extends CabriIntegration {
timerPaused: boolean;
planetTexture: any;
planetsMeshes: any[];
planetTextures: any[];
activePlanetTextures: any[];
constructor(
public cabriService: CabriDataService,
public globalService: GlobalService,
public _ngZone: NgZone,
public page,
public renderer: Renderer2
) {
super(cabriService, globalService, _ngZone, page, renderer);
this.cabriRenderStarted = true;
this.page = page;
}
// RESIZE REDONE
/**
* Update DOM Cabri elements
* @param holoMode Holo mode
* @param platform Platform
*/
async updateCabriPosition(holoMode: string = null): Promise<void> {
return new Promise(async (resolve, reject) => {
this.startRender();
if (this.page.cabriTimerStarted) {
this.page.pauseAwardTimer();
this.timerPaused = true;
console.log("RESIZE PAUSE TIMER");
}
await super.updateCabriPosition(holoMode, "jeudufuret");
this.page.resumeAwardTimer();
resolve();
});
}
checkActivityChange(): boolean {
return true;
const activityChange =
this.cabriService.currentSavedDom !== "jeudufuret" ||
this.cabriService.savedDomHoloMode !== this.cabriService.holoMode ||
this.cabriService.savedDomMirrorMode !== this.cabriService.mirrorMode;
// console.log("checkActivityChange = " + activityChange);
return activityChange;
}
saveDom() {
super.saveDom();
this.cabriService.currentSavedDom = "jeudufuret";
}
restoreDom(activityChange: boolean = false) {
window.Globals.HoloFaces = null;
super.restoreDom();
if (window.document.querySelector("#page-div section")) {
window.document.querySelector("#page-div section").style.opacity = "1";
}
if (window.document.querySelector("#page-div")) {
window.document.querySelector("#page-div").style.height = window.innerHeight;
}
if (activityChange) {
// clean all custom elements in #page-div
if (
window.document.querySelector("#page-div #operationWrapper") &&
window.document.querySelector("#page-div #operationWrapper").length > 0
) {
window.document.querySelector("#page-div").removeChild(window.document.querySelector("#page-div #operationWrapper"));
}
if (
window.document.querySelector("#page-div #operationWrapperCordova") &&
window.document.querySelector("#page-div #operationWrapperCordova").length > 0
) {
window.document.querySelector("#page-div").removeChild(window.document.querySelector("#page-div #operationWrapperCordova"));
}
}
this.startRender();
}
getCurrentOperation(): string {
let str = "";
const nbGR = window.store.getters.cps.getValueByName("v-good-responses").value;
const a = window.store.getters.cps.getValueByName("v-first-number").value;
const c = window.store.getters.cps.getValueByName("v-operation").value;
const pas = window.store.getters.cps.getValueByName("v-pas").value;
str = a + nbGR * c * pas + (c > 0 ? " + " : " - ") + pas;
return str;
}
clearResponse(mode: string, value: any): Promise<any> {
// selector
// #cabriText-34531 > div > div.editor-container > div.editor-content > div > p
// if(window.document.querySelector('.ZDR .svg-container')){
// window.document.querySelector('.ZDR .svg-container').innerHTML = '';
// }
// if(window.document.querySelector('.theZDR p')){
// window.document.querySelector('.theZDR p').innerHTML = '';
// window.document.querySelector('.theZDR').style.opacity = '0';
// }
return;
}
setResponse(mode: string, value: any) {
// display response
// window.document.querySelector('.theZDR p').innerHTML = value;
// window.document.querySelector('.theZDR').style.opacity = '1';
}
generateCustomCSS(flatMode: boolean, styleElement: ElementRef) {
// super.generateCustomCSS(holoMode, styleElement);
if (flatMode) {
console.log("CSS FLAT");
const tabCSS = [];
if (this.globalService.isMobile) {
// MOBILE FLAT
const scalingSize = this.globalService.documentHeight < 400 ? 1.3 : 1.2;
tabCSS["cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("z-pas")] = {
margin: "unset!important;",
"line-height": "1.5!important;",
"font-size": "14px!important;",
transform: `scale(${scalingSize}) translateX(-35%) translateY(-30%)!important;`,
};
tabCSS["cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("z-pas-negatif")] = {
margin: "unset!important;",
"line-height": "1.5!important;",
"font-size": "14px!important;",
transform: `scale(${scalingSize}) translateX(-20%) translateY(-30%)!important;`
};
if (this.cabriService.currentActivity.currentVariables["v-cursor-op"] === "1") {
// positiv
tabCSS["cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("z-first-number")] = {
left: "49.8269%",
top: "50.6586%",
margin: "unset!important;",
"line-height": "1.5!important;",
"font-size": "14px!important;",
transform: `scale(${scalingSize}) translateX(-35%) translateY(-35%)!important`
};
} else {
// negativ
tabCSS["cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("z-first-number")] = {
margin: "unset!important;",
"line-height": "1.5!important;",
"font-size": "14px!important;",
transform: `scale(${scalingSize}) translateX(-20%) translateY(-40%)!important`
};
}
tabCSS["cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("z-second-number")] = {
margin: "unset!important;",
"line-height": "1.5!important;",
"font-size": "14px!important;",
transform: `scale(${scalingSize}) translateX(-18%) translateY(20%)!important;`
};
tabCSS["cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("z-third-number")] = {
margin: "unset!important;",
"line-height": "1.5!important;",
"font-size": "14px!important;",
transform: `scale(${scalingSize}) translateX(-22%) translateY(15%)!important;`
};
if (this.cabriService.currentActivity.currentVariables["v-cursor-op"] === "1") {
tabCSS["cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("z-fourth-number")] = {
margin: "unset!important;",
"line-height": "1.5!important;",
"font-size": "14px!important;",
transform: `scale(${scalingSize}) translateX(-20%) translateY(10%)!important`
};
} else {
tabCSS["cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("z-fourth-number")] = {
margin: "unset!important;",
"line-height": "1.5!important;",
"font-size": "14px!important;",
transform: `scale(${scalingSize}) translateX(-20%) translateY(-10%)!important;`
};
}
tabCSS["cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("v-user-response")] = {
margin: "unset!important;",
"line-height": "1.5!important;",
"font-size": "14px!important;",
// padding: 0,
transform: `scale(${scalingSize}) translateX(-35%) translateY(-35%)!important`
};
tabCSS["cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("v-user-response-negatif")] = {
margin: "unset!important;",
"line-height": "1.5!important;",
"font-size": "14px!important;",
transform: `scale(${scalingSize}) translateX(-40%) translateY(-20%)!important;`
};
styleElement.nativeElement.innerHTML = this.generateCss(tabCSS);
} else {
// DESKTOP / TABLETS FLAT
tabCSS["cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("z-pas")] = {
transform: "translateX(-25%) translateY(-30%)!important;",
margin: "unset!important;"
};
tabCSS["cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("z-pas-negatif")] = {
transform: "translateX(-20%) translateY(-30%)!important;",
margin: "unset!important;"
};
tabCSS["cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("z-first-number")] = {
transform: "translateX(-10%) translateY(-40%)!important;",
margin: "unset!important;"
};
tabCSS["cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("z-second-number")] = {
transform: "translateX(-10%) translateY(30%)!important;",
margin: "unset!important;"
};
tabCSS["cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("z-third-number")] = {
transform: "translateX(-10%) translateY(30%)!important;",
margin: "unset!important;"
};
tabCSS["cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("z-fourth-number")] = {
transform: "translateX(-25%) translateY(-20%)!important;",
margin: "unset!important;"
};
tabCSS["cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("v-user-response")] = {
transform: "translateX(-20%) translateY(-35%)!important;",
margin: "unset!important;"
};
tabCSS["cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("v-user-response-negatif")] = {
transform: "translateX(-40%) translateY(-20%)!important;",
margin: "unset!important;"
};
}
styleElement.nativeElement.innerHTML = this.generateCss(tabCSS);
} else {
// HOLO
console.log("CSS HOLO");
const tabCSS = [];
// CSS du pas en mode holo
tabCSS["cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("z-pas")] = {
transform: "translateX(-80%) translateY(-20%)!important;"
};
tabCSS["cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("z-pas") + "_2"] = {
transform: "rotate(90deg) translateX(-80%) translateY(-20%)!important;"
};
tabCSS["cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("z-pas") + "_3"] = {
transform: "rotate(180deg) translateX(-80%) translateY(-20%)!important;"
};
tabCSS["cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("z-pas") + "_4"] = {
transform: "rotate(270deg) translateX(-80%) translateY(-20%)!important;"
};
// CSS du pas négatif en mode holo
tabCSS["cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("z-pas-negatif")] = {
transform: "translateX(-80%) translateY(-20%)!important;"
};
tabCSS["cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("z-pas-negatif") + "_2"] = {
transform: "rotate(90deg) translateX(-80%) translateY(-20%)!important;"
};
tabCSS["cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("z-pas-negatif") + "_3"] = {
transform: "rotate(180deg) translateX(-80%) translateY(-20%)!important;"
};
tabCSS["cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("z-pas-negatif") + "_4"] = {
transform: "rotate(270deg) translateX(-80%) translateY(-20%)!important;"
};
// CSS du premier nombre
tabCSS["cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("z-first-number")] = {
transform: "translateX(-83%) translateY(-40%)!important;"
};
tabCSS["cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("z-first-number") + "_2"] = {
transform: "rotate(90deg) translateX(-80%) translateY(-45%)!important;"
};
tabCSS["cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("z-first-number") + "_3"] = {
transform: "rotate(180deg) translateX(-78%) translateY(-45%)!important;"
};
tabCSS["cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("z-first-number") + "_4"] = {
transform: "rotate(270deg) translateX(-85%) translateY(-45%)!important;"
};
// answer div:
tabCSS["cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("v-user-response")] = {
transform: "translateX(-65%) translateY(-45%)!important;"
};
tabCSS["cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("v-user-response") + "_2"] = {
transform: "rotate(90deg) translateX(-65%) translateY(-45%)!important;"
};
tabCSS["cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("v-user-response") + "_3"] = {
transform: "rotate(180deg) translateX(-65%) translateY(-45%)!important;"
};
tabCSS["cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("v-user-response") + "_4"] = {
transform: "rotate(270deg) translateX(-65%) translateY(-45%)!important;"
};
// answer negative div:
tabCSS["cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("v-user-response-negatif")] = {
transform: "translateX(-60%) translateY(-30%)!important;"
};
tabCSS["cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("v-user-response-negatif") + "_2"] = {
transform: "rotate(90deg) translateX(-55%) translateY(-30%)!important;"
};
tabCSS["cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("v-user-response-negatif") + "_3"] = {
transform: "rotate(180deg) translateX(-58%) translateY(-33%)!important;"
};
tabCSS["cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("v-user-response-negatif") + "_4"] = {
transform: "rotate(270deg) translateX(-61%) translateY(-37%)!important;"
};
styleElement.nativeElement.innerHTML = this.generateCss(tabCSS);
}
}
// toggles user Response div depending on arg and operation type:
async toggleUserResponse(value: boolean, operation: string) {
// timeout to fix last response appearing on next planet after variables update in stt mode + negative mode:
await this.page.timeOut(10);
const userResponse = window.document.querySelector(
"#cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("v-user-response")
);
const userResponseNegatif = window.document.querySelector(
"#cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("v-user-response-negatif")
);
if (userResponse && userResponseNegatif) {
if (operation === "1") {
userResponse.style.display = value ? "block" : "none";
userResponseNegatif.style.display = "none";
if (this.cabriService.holoMode === "1" || this.cabriService.holoMode === "-1") {
window.document.querySelector(
"#cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("v-user-response") + "_2"
).style.display = value ? "block" : "none";
window.document.querySelector(
"#cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("v-user-response") + "_3"
).style.display = value ? "block" : "none";
window.document.querySelector(
"#cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("v-user-response") + "_4"
).style.display = value ? "block" : "none";
window.document.querySelector(
"#cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("v-user-response-negatif") + "_2"
).style.display = "none";
window.document.querySelector(
"#cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("v-user-response-negatif") + "_3"
).style.display = "none";
window.document.querySelector(
"#cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("v-user-response-negatif") + "_4"
).style.display = "none";
}
} else {
userResponseNegatif.style.display = value ? "block" : "none";
userResponse.style.display = "none";
if (this.cabriService.holoMode === "1" || this.cabriService.holoMode === "-1") {
window.document.querySelector(
"#cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("v-user-response-negatif") + "_2"
).style.display = value ? "block" : "none";
window.document.querySelector(
"#cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("v-user-response-negatif") + "_3"
).style.display = value ? "block" : "none";
window.document.querySelector(
"#cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("v-user-response-negatif") + "_4"
).style.display = value ? "block" : "none";
window.document.querySelector(
"#cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("v-user-response") + "_2"
).style.display = "none";
window.document.querySelector(
"#cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("v-user-response") + "_3"
).style.display = "none";
window.document.querySelector(
"#cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("v-user-response") + "_4"
).style.display = "none";
}
}
}
}
updateSVG() {
super.updateSVG();
if (this.cabriService.holoMode === "0") {
let selector = "#page-div expr svg";
if (window.document.querySelectorAll(selector).length < 1) {
selector = "#page-div .expression svg";
}
const cabriSVG = window.document.querySelectorAll(selector);
if (cabriSVG.length > 0) {
cabriSVG.forEach(element => {
const parent = element.closest(".cabri-text");
if (parent) {
// console.log(parent.style.marginLeft);
let x = 0;
if (parent.style.marginLeft) {
x = parseFloat(parent.style.marginLeft);
}
// console.log(( - (parseInt(element.style.width)/2) + 5) + "px");
parent.style.marginLeft = -(Number(element.style.width) / 2 + 5) + "px";
}
});
}
}
}
getPasFromHTML(): string {
if (typeof this.cabriService.currentExercice === "undefined" || this.cabriService.currentExercice.operation === "1") {
const pasId = "#cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("z-pas");
if (window.document.querySelectorAll(pasId).length > 0) {
// get operation
const textList: any[] = window.document.querySelectorAll(pasId)[0].querySelectorAll("text");
let str = "";
textList.forEach(element => {
if (typeof element !== "undefined") {
str += element.innerHTML + " ";
}
});
return str.trim();
} else {
return "";
}
} else {
console.log("bug");
let pasId;
// if (this.globalService.isIos || this.globalService.isSafari) {
// pasId = "#cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("z-pas-negatif-2");
// } else {
pasId = "#cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("z-pas-negatif");
// }
console.log(pasId);
if (window.document.querySelectorAll(pasId).length > 0) {
// get operation
const textList: any[] = window.document.querySelectorAll(pasId)[0].querySelectorAll("text");
let str = "";
textList.forEach(element => {
if (typeof element !== "undefined") {
str += element.innerHTML + " ";
}
});
return str.trim();
} else {
return "";
}
}
}
getFirstNumberFromHTML(): string {
if (typeof this.cabriService.currentExercice === "undefined" || this.cabriService.currentExercice.operation === "1") {
const pasId = "#cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("z-first-number");
if (window.document.querySelectorAll(pasId).length > 0) {
// get operation
const textList: any[] = window.document.querySelectorAll(pasId)[0].querySelectorAll("text");
let str = "";
textList.forEach(element => {
if (typeof element !== "undefined") {
str += element.innerHTML + " ";
}
});
return str.trim();
} else {
return "";
}
} else {
let pasId;
// if (this.globalService.isIos || this.globalService.isSafari) {
// pasId = "#cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("z-first-number-2");
// } else {
pasId = "#cabriText-" + window.store.getters.cps.cpsGetObjectIdByName("z-first-number");
// }
if (window.document.querySelectorAll(pasId).length > 0) {
// get operation
const textList: any[] = window.document.querySelectorAll(pasId)[0].querySelectorAll("text");
let str = "";
textList.forEach(element => {
if (typeof element !== "undefined") {
str += element.innerHTML + " ";
}
});
return str.trim();
} else {
return "";
}
}
}
/**
* get planet meshes -> creates planetTextures array from assets -> update planets textures
*/
async initPlanets() {
this.getPlanets();
// this.createPlanetTexturesArray();
await this.changePlanetsTextures();
}
/**
* get planets meshes -> push em in planetsMeshes array
*/
getPlanets() {
this.startRender();
this.planetsMeshes = new Array();
this.cabriObjects = window.store.getters.cabri.SceneUpdate.CabriObjects;
for (const k in this.cabriObjects) {
if (this.cabriObjects.hasOwnProperty(k)) {
const o = this.cabriObjects[k];
if (o.type === "model") {
const planet = o.meshes[0];
this.planetsMeshes.push(planet);
}
}
}
}
/**
* creates planet textures from assets and store them in planetTextures array
*/
createPlanetTexturesArray() {
this.planetTextures = new Array();
const numberOfTexturesInFolder = 12;
for (let index = 1; index < numberOfTexturesInFolder; index++) {
const url = "assets/babylon/furetTextures/" + index.toString() + "_ios.png";
const planetTexture = new BABYLON.Texture(url, this.scene);
this.planetTextures.push(planetTexture);
}
}
/**
* change all 4 planets textures randomly without repetition
*/
async changePlanetsTextures() {
this.activePlanetTextures = new Array();
const renderWasStarted = this.cabriRenderStarted;
if (!renderWasStarted) {
this.startRender();
}
this.planetsMeshes.forEach(async (planet) => {
planet._material._diffuseTexture = this.chooseRandomPlanetTexture();
});
if (!renderWasStarted) {
await this.timeOut(100);
this.stopRender();
}
}
/**
* extract a random planet texture from planetTextures array
* if planetTextures array is empty -> recreate it + shuffle
*/
chooseRandomPlanetTexture() {
AppUtils.shuffleArray(this.planetTextures);
const [first, ...rest] = this.planetTextures;
const textureAlreadyUsed = this.activePlanetTextures.find(elem => elem.name === first.name)
if (rest.length > 0 && !textureAlreadyUsed) {
this.activePlanetTextures.push(first);
this.planetTextures = rest;
return first;
} else {
this.createPlanetTexturesArray();
return this.chooseRandomPlanetTexture();
}
}
}