Math.min(Math.max(num, min), max);
+ const panVal = rightSideEnd
+ ? clamp(3 * ((-1 / amountTabs) * key + 1) - 2, -1, 1)
+ : clamp(2 * ((-1 / amountTabs) * -1 * key + 1) - 4, -1, 1); // ((-1 / amountTabs) * key + 1);
+ console.log(panVal);
+ const frequencyVal = rightSideEnd
+ ? Math.round((key / amountTabs) * key + 6)
+ : Math.round(((key - amountTabs) / amountTabs) * (key - amountTabs) + 6);
+ var endValueVisible = this.isVisible(document.getElementById(endElement));
+
+ if (endValueVisible) {
+ reachedEndValue = true;
+ }
+
+ if (reachedEndValue && endValueVisible) {
+ //this.playChordEndSound();
+ if (rightSideEnd) {
+ endElement = 1;
+ rightSideEnd = false;
+ } else {
+ endElement = amountTabs;
+ rightSideEnd = true;
+ }
+ } else if (!endValueVisible) {
+ //this.playChordSound(panVal, frequencyVal);
+ //this.playPitchSound(panVal, 200 + 10*key);
+ }
+ }
+
+ // didReachEnd is bad... That is why, I have my own function... :)
+ // This sets it to "visible", if at least some part is visible... But maybe I want to have a percentage-based thing...
+ // If whole viewport is necessary, this makes it also bad, since a scroll all the way is required...
+ // Not really necessary, since the user already "knows", that this is the end...
+ isVisible(el) {
+ var rect = el.getBoundingClientRect();
+
+ return (
+ rect.bottom > 0 &&
+ rect.right > 0 &&
+ rect.left < (window.innerWidth || document.documentElement.clientWidth) &&
+ rect.top < (window.innerHeight || document.documentElement.clientHeight)
+ );
+ }
+
+ render() {
+ //var keys = Array.from({ length: amountTabs }, (_, i) => i + 1);
+ // onFocus as an additional thingy?
+ var tabId = 0;
+ amountTabs = this.props.children.length;
+ endElement = amountTabs;
+
+ var tabs = this.props.children.map((k) => {
+ tabId += 1;
+ return (
+ this.onHoverTab(k)}
+ onMouseOver={() => this.onHoverTab(k)}
+ key={tabId}
+ >
+ {k.props.children}
+
+ );
+ });
+
+ const tabsStyle = {};//{position: "fixed", bottom: "0"};
+
+ return (
+
+ this.onHoverElement()}
+ activeTab={this.state.activeTab}
+ onTabClick={(e, index) => this.onTabClick(e, index)}
+ >
+ {tabs}
+
+
+ );
+ }
+}
diff --git a/src/pages/study_site_2/StartPage2.jsx b/src/pages/study_site_2/StartPage2.jsx
new file mode 100644
index 0000000..5d3405f
--- /dev/null
+++ b/src/pages/study_site_2/StartPage2.jsx
@@ -0,0 +1,102 @@
+import React from "react";
+import { getTranslation } from "../../core/i18n/I18NHandler";
+import WebpageBanner from "../../components/webpage_container/WebpageBanner";
+import { Tab } from "react-tabs-scrollable";
+import {
+ StudySite,
+ getHeatmapData,
+} from "../../components/webpage_container/StudySite";
+import { pushToMouseLog, getSensorLog } from "../../core/log/SensorLogger";
+import { Collapse, Text, Spacer } from "@geist-ui/core";
+import ScrollableTab from "../../components/ScrollableTab";
+import {
+ Emoji,
+ Home,
+ HelpCircle,
+ Map,
+ MapPin,
+ Star,
+ Flag,
+ Key,
+ User,
+ ArrowUpRight,
+} from "@geist-ui/icons";
+
+function StartPage2({ redirectLoc }) {
+ var saveMouseLog = function () {
+ pushToMouseLog(getHeatmapData());
+ //window.location.href = "./" + redirectLoc;
+ };
+
+ // TODO THINK IF I WANT TO JUST USE AN OVERLAY FOR OTHER DUMMY LINKS, WHICH ARENT CORRECT???
+ // IS THAT OKAY???
+
+ return (
+
+
+
+ 
+
+ Hotel Le Laboratoire
+
+
+
+
+
+ Features
+
+
+
+
+ Facilities
+
+
+
+
+ Location
+
+
+
+
+ Flights
+
+
+
+
+ Rooms
+
+
+
+
+ Catering
+
+
+
+
+ Tour Operators
+
+
+
+
+
+
+ Ratings
+
+
+
+
+ Useful Information
+
+
+
+ );
+}
+
+export default StartPage2;
diff --git a/src/pages/study_site_2/TourOperators.jsx b/src/pages/study_site_2/TourOperators.jsx
new file mode 100644
index 0000000..9f68af8
--- /dev/null
+++ b/src/pages/study_site_2/TourOperators.jsx
@@ -0,0 +1,103 @@
+import React from "react";
+import { getTranslation } from "../../core/i18n/I18NHandler";
+import WebpageBanner from "../../components/webpage_container/WebpageBanner";
+import { Tab } from "react-tabs-scrollable";
+import {
+ StudySite,
+ getHeatmapData,
+} from "../../components/webpage_container/StudySite";
+import { pushToMouseLog, getSensorLog } from "../../core/log/SensorLogger";
+import { Divider, Text, Spacer, Card } from "@geist-ui/core";
+import ScrollableTab from "../../components/ScrollableTab";
+import {
+ Emoji,
+ Home,
+ HelpCircle,
+ Map,
+ MapPin,
+ Star,
+ Flag,
+ Key,
+ User,
+ ArrowUpRight,
+} from "@geist-ui/icons";
+
+function TourOperators({ redirectLoc }) {
+ var saveMouseLog = function () {
+ pushToMouseLog(getHeatmapData());
+ //window.location.href = "./" + redirectLoc;
+ };
+
+ // TODO THINK IF I WANT TO JUST USE AN OVERLAY FOR OTHER DUMMY LINKS, WHICH ARENT CORRECT???
+ // IS THAT OKAY???
+
+ return (
+
+
+
+
+
+ Hotel Le Laboratoire
+
+
+
+
+ Haphazard Holidays
+
+
+
+
+
+ Ever thought, how the best experiences in life happen, when you just stumble upon them? That is the goal with Haphazard Holidays.
+
+
+
+
+
+
+
+ Misguided Getaways
+
+
+
+
+
+ We at Misguided Getaways are specialized in hotels and tours, not captured by conventional tour operators to "mis"guide you into your perfect vacation.
+
+
+
+
+
+
+
+ Lost & Found Excursions
+
+
+
+
+
+ Here at Lost & Found Excursions try to capture the same feeling, when you find something precious again by chance but we don't let luck decide upon your perfect holiday or trip.
+
+
+
+
+
+
+
+ );
+}
+
+export default TourOperators;