@everymatrix/player-reality-check 0.0.162 → 0.0.166

package/dist/player-reality-check.js

@@ -93,6 +93,14 @@
     function set_current_component(component) {
         current_component = component;
     }
+    function get_current_component() {
+        if (!current_component)
+            throw new Error('Function called outside component initialization');
+        return current_component;
+    }
+    function onMount(fn) {
+        get_current_component().$$.on_mount.push(fn);
+    }
 
     const dirty_components = [];
     const binding_callbacks = [];
@@ -4425,103 +4433,188 @@
 
     function get_each_context(ctx, list, i) {
     	const child_ctx = ctx.slice();
-    	child_ctx[8] = list[i].value;
-    	child_ctx[9] = list[i].text;
-    	child_ctx[11] = i;
+    	child_ctx[17] = list[i].value;
+    	child_ctx[18] = list[i].text;
+    	child_ctx[20] = i;
     	return child_ctx;
     }
 
-    // (23:4) {#if isMobile}
-    function create_if_block(ctx) {
+    // (58:4) {#if isMobile}
+    function create_if_block_1(ctx) {
+    	let t0;
     	let div;
     	let svg;
     	let defs;
     	let style;
-    	let t0;
+    	let t1;
     	let g1;
     	let g0;
     	let path;
-    	let t1;
+    	let t2;
     	let h2;
     	let mounted;
     	let dispose;
+    	let if_block = /*realityCheckSuccess*/ ctx[1] && create_if_block_2(ctx);
 
     	const block = {
     		c: function create() {
+    			if (if_block) if_block.c();
+    			t0 = space();
     			div = element("div");
     			svg = svg_element("svg");
     			defs = svg_element("defs");
     			style = svg_element("style");
-    			t0 = text(".aaa{fill:#d0046c;}");
+    			t1 = text(".aaa{fill:#d0046c;}");
     			g1 = svg_element("g");
     			g0 = svg_element("g");
     			path = svg_element("path");
-    			t1 = space();
+    			t2 = space();
     			h2 = element("h2");
     			h2.textContent = "Reality Check";
-    			add_location(style, file, 24, 95, 1003);
-    			add_location(defs, file, 24, 89, 997);
+    			add_location(style, file, 62, 95, 2059);
+    			add_location(defs, file, 62, 89, 2053);
     			attr_dev(path, "class", "aaa");
     			attr_dev(path, "d", "M7.5,0,6.136,1.364,11.3,6.526H0V8.474H11.3L6.136,13.636,7.5,15,15,7.5Z");
     			attr_dev(path, "transform", "translate(15 15) rotate(180)");
-    			add_location(path, file, 26, 10, 1132);
+    			add_location(path, file, 64, 10, 2188);
     			attr_dev(g0, "transform", "translate(20 158)");
-    			add_location(g0, file, 25, 8, 1088);
+    			add_location(g0, file, 63, 8, 2144);
     			attr_dev(g1, "transform", "translate(-20 -158)");
-    			add_location(g1, file, 24, 136, 1044);
+    			add_location(g1, file, 62, 136, 2100);
     			attr_dev(svg, "xmlns", "http://www.w3.org/2000/svg");
     			attr_dev(svg, "width", "15");
     			attr_dev(svg, "height", "15");
     			attr_dev(svg, "viewBox", "0 0 15 15");
-    			add_location(svg, file, 24, 6, 914);
+    			add_location(svg, file, 62, 6, 1970);
     			attr_dev(h2, "class", "RealityCheckTitleMobile");
-    			add_location(h2, file, 29, 6, 1304);
+    			add_location(h2, file, 67, 6, 2360);
     			attr_dev(div, "class", "MenuReturnButton");
-    			add_location(div, file, 23, 4, 845);
+    			add_location(div, file, 61, 4, 1901);
     		},
     		m: function mount(target, anchor) {
+    			if (if_block) if_block.m(target, anchor);
+    			insert_dev(target, t0, anchor);
     			insert_dev(target, div, anchor);
     			append_dev(div, svg);
     			append_dev(svg, defs);
     			append_dev(defs, style);
-    			append_dev(style, t0);
+    			append_dev(style, t1);
     			append_dev(svg, g1);
     			append_dev(g1, g0);
     			append_dev(g0, path);
-    			append_dev(div, t1);
+    			append_dev(div, t2);
     			append_dev(div, h2);
 
     			if (!mounted) {
-    				dispose = listen_dev(div, "click", /*click_handler*/ ctx[4], false, false, false);
+    				dispose = listen_dev(div, "click", /*click_handler*/ ctx[8], false, false, false);
     				mounted = true;
     			}
     		},
-    		p: noop$1,
+    		p: function update(ctx, dirty) {
+    			if (/*realityCheckSuccess*/ ctx[1]) {
+    				if (if_block) {
+    					if_block.p(ctx, dirty);
+    				} else {
+    					if_block = create_if_block_2(ctx);
+    					if_block.c();
+    					if_block.m(t0.parentNode, t0);
+    				}
+    			} else if (if_block) {
+    				if_block.d(1);
+    				if_block = null;
+    			}
+    		},
     		d: function destroy(detaching) {
+    			if (if_block) if_block.d(detaching);
+    			if (detaching) detach_dev(t0);
     			if (detaching) detach_dev(div);
     			mounted = false;
     			dispose();
     		}
     	};
 
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_if_block_1.name,
+    		type: "if",
+    		source: "(58:4) {#if isMobile}",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    // (59:6) {#if realityCheckSuccess}
+    function create_if_block_2(ctx) {
+    	let div;
+
+    	const block = {
+    		c: function create() {
+    			div = element("div");
+    			div.textContent = `${/*realityCheckSuccessMessage*/ ctx[3]}`;
+    			attr_dev(div, "class", "successMessageMobile");
+    			add_location(div, file, 59, 8, 1816);
+    		},
+    		m: function mount(target, anchor) {
+    			insert_dev(target, div, anchor);
+    		},
+    		p: noop$1,
+    		d: function destroy(detaching) {
+    			if (detaching) detach_dev(div);
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_if_block_2.name,
+    		type: "if",
+    		source: "(59:6) {#if realityCheckSuccess}",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    // (71:4) {#if realityCheckSuccess}
+    function create_if_block(ctx) {
+    	let div;
+    	let t;
+
+    	const block = {
+    		c: function create() {
+    			div = element("div");
+    			t = text(/*realityCheckSuccessMessage*/ ctx[3]);
+    			attr_dev(div, "class", "successMessage " + (/*isMobile*/ ctx[2] ? "successMessageMobile" : ""));
+    			add_location(div, file, 71, 6, 2472);
+    		},
+    		m: function mount(target, anchor) {
+    			insert_dev(target, div, anchor);
+    			append_dev(div, t);
+    		},
+    		p: noop$1,
+    		d: function destroy(detaching) {
+    			if (detaching) detach_dev(div);
+    		}
+    	};
+
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
     		id: create_if_block.name,
     		type: "if",
-    		source: "(23:4) {#if isMobile}",
+    		source: "(71:4) {#if realityCheckSuccess}",
     		ctx
     	});
 
     	return block;
     }
 
-    // (39:10) {#each options as {value, text}
+    // (79:10) {#each realityCheckOptions as {value, text}
     function create_each_block(ctx) {
     	let div;
     	let input;
     	let t0;
     	let label;
-    	let t1_value = /*text*/ ctx[9] + "";
+    	let t1_value = /*text*/ ctx[18] + "";
     	let t1;
     	let t2;
     	let mounted;
@@ -4536,14 +4629,14 @@
     			t1 = text(t1_value);
     			t2 = space();
     			attr_dev(input, "type", "radio");
-    			attr_dev(input, "id", /*value*/ ctx[8]);
-    			input.__value = /*value*/ ctx[8];
+    			attr_dev(input, "id", /*value*/ ctx[17]);
+    			input.__value = /*value*/ ctx[17];
     			input.value = input.__value;
-    			/*$$binding_groups*/ ctx[6][0].push(input);
-    			add_location(input, file, 40, 14, 2028);
-    			attr_dev(label, "for", /*value*/ ctx[8]);
-    			add_location(label, file, 41, 14, 2109);
-    			add_location(div, file, 39, 12, 2008);
+    			/*$$binding_groups*/ ctx[10][0].push(input);
+    			add_location(input, file, 80, 14, 3245);
+    			attr_dev(label, "for", /*value*/ ctx[17]);
+    			add_location(label, file, 81, 14, 3326);
+    			add_location(div, file, 79, 12, 3225);
     		},
     		m: function mount(target, anchor) {
     			insert_dev(target, div, anchor);
@@ -4555,7 +4648,7 @@
     			append_dev(div, t2);
 
     			if (!mounted) {
-    				dispose = listen_dev(input, "change", /*input_change_handler*/ ctx[5]);
+    				dispose = listen_dev(input, "change", /*input_change_handler*/ ctx[9]);
     				mounted = true;
     			}
     		},
@@ -4566,7 +4659,7 @@
     		},
     		d: function destroy(detaching) {
     			if (detaching) detach_dev(div);
-    			/*$$binding_groups*/ ctx[6][0].splice(/*$$binding_groups*/ ctx[6][0].indexOf(input), 1);
+    			/*$$binding_groups*/ ctx[10][0].splice(/*$$binding_groups*/ ctx[10][0].indexOf(input), 1);
     			mounted = false;
     			dispose();
     		}
@@ -4576,7 +4669,7 @@
     		block,
     		id: create_each_block.name,
     		type: "each",
-    		source: "(39:10) {#each options as {value, text}",
+    		source: "(79:10) {#each realityCheckOptions as {value, text}",
     		ctx
     	});
 
@@ -4586,22 +4679,26 @@
     function create_fragment(ctx) {
     	let div2;
     	let t0;
-    	let h2;
     	let t1;
+    	let h2;
     	let t2;
+    	let t3;
     	let div0;
     	let p;
-    	let t3;
+    	let t4;
     	let br0;
     	let br1;
-    	let t4;
     	let t5;
-    	let form;
     	let t6;
+    	let form;
+    	let t7;
     	let div1;
     	let button;
-    	let if_block = /*isMobile*/ ctx[1] && create_if_block(ctx);
-    	let each_value = /*options*/ ctx[2];
+    	let mounted;
+    	let dispose;
+    	let if_block0 = /*isMobile*/ ctx[2] && create_if_block_1(ctx);
+    	let if_block1 = /*realityCheckSuccess*/ ctx[1] && create_if_block(ctx);
+    	let each_value = /*realityCheckOptions*/ ctx[4];
     	validate_each_argument(each_value);
     	let each_blocks = [];
 
@@ -4612,85 +4709,107 @@
     	const block = {
     		c: function create() {
     			div2 = element("div");
-    			if (if_block) if_block.c();
+    			if (if_block0) if_block0.c();
     			t0 = space();
+    			if (if_block1) if_block1.c();
+    			t1 = space();
     			h2 = element("h2");
-    			t1 = text("Reality Check");
-    			t2 = space();
+    			t2 = text("Reality Check");
+    			t3 = space();
     			div0 = element("div");
     			p = element("p");
-    			t3 = text("The Reality Check facility allows you to set the frequency at which you will see a Reality Check on the screen within your gaming session. A Reality Check means a display of the time elapsed since your session began.");
+    			t4 = text("The Reality Check facility allows you to set the frequency at which you will see a Reality Check on the screen within your gaming session. A Reality Check means a display of the time elapsed since your session began.");
     			br0 = element("br");
     			br1 = element("br");
-    			t4 = text("\n          You are able to control the frequency at which the Reality Check will appear on your screen.");
-    			t5 = space();
+    			t5 = text("\n          You are able to control the frequency at which the Reality Check will appear on your screen.");
+    			t6 = space();
     			form = element("form");
 
     			for (let i = 0; i < each_blocks.length; i += 1) {
     				each_blocks[i].c();
     			}
 
-    			t6 = space();
+    			t7 = space();
     			div1 = element("div");
     			button = element("button");
     			button.textContent = "Set frequency";
     			this.c = noop$1;
-    			attr_dev(h2, "class", "RealityCheckTitle " + (/*isMobile*/ ctx[1] ? "RealityCheckTitleNone" : ""));
-    			add_location(h2, file, 33, 4, 1385);
-    			add_location(br0, file, 35, 227, 1797);
-    			add_location(br1, file, 35, 231, 1801);
-    			add_location(p, file, 35, 8, 1578);
+    			attr_dev(h2, "class", "RealityCheckTitle " + (/*isMobile*/ ctx[2] ? "RealityCheckTitleNone" : ""));
+    			add_location(h2, file, 73, 4, 2590);
+    			add_location(br0, file, 75, 227, 3002);
+    			add_location(br1, file, 75, 231, 3006);
+    			add_location(p, file, 75, 8, 2783);
     			attr_dev(form, "class", "customRadio");
-    			add_location(form, file, 37, 8, 1921);
+    			add_location(form, file, 77, 8, 3126);
 
-    			attr_dev(div0, "class", "RealityCheckDescription " + (/*isMobile*/ ctx[1]
+    			attr_dev(div0, "class", "RealityCheckDescription " + (/*isMobile*/ ctx[2]
     			? "RealityCheckDescriptionMobile"
     			: ""));
 
-    			add_location(div0, file, 34, 6, 1482);
+    			add_location(div0, file, 74, 6, 2687);
     			attr_dev(button, "class", "PlayerRealityCheckButton");
-    			add_location(button, file, 47, 8, 2301);
-    			attr_dev(div1, "class", "BottomButtonsArea " + (/*isMobile*/ ctx[1] ? "BottomButtonsAreaMobile" : ""));
-    			add_location(div1, file, 46, 6, 2217);
+    			add_location(button, file, 87, 8, 3518);
+    			attr_dev(div1, "class", "BottomButtonsArea " + (/*isMobile*/ ctx[2] ? "BottomButtonsAreaMobile" : ""));
+    			add_location(div1, file, 86, 6, 3434);
 
-    			attr_dev(div2, "class", "PlayerRealityCheckWrapper " + (/*isMobile*/ ctx[1]
+    			attr_dev(div2, "class", "PlayerRealityCheckWrapper " + (/*isMobile*/ ctx[2]
     			? "PlayerRealityCheckWrapperMobile"
     			: ""));
 
-    			add_location(div2, file, 21, 2, 728);
+    			add_location(div2, file, 56, 2, 1663);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
     		},
     		m: function mount(target, anchor) {
     			insert_dev(target, div2, anchor);
-    			if (if_block) if_block.m(div2, null);
+    			if (if_block0) if_block0.m(div2, null);
     			append_dev(div2, t0);
+    			if (if_block1) if_block1.m(div2, null);
+    			append_dev(div2, t1);
     			append_dev(div2, h2);
-    			append_dev(h2, t1);
-    			append_dev(div2, t2);
+    			append_dev(h2, t2);
+    			append_dev(div2, t3);
     			append_dev(div2, div0);
     			append_dev(div0, p);
-    			append_dev(p, t3);
+    			append_dev(p, t4);
     			append_dev(p, br0);
     			append_dev(p, br1);
-    			append_dev(p, t4);
-    			append_dev(div0, t5);
+    			append_dev(p, t5);
+    			append_dev(div0, t6);
     			append_dev(div0, form);
 
     			for (let i = 0; i < each_blocks.length; i += 1) {
     				each_blocks[i].m(form, null);
     			}
 
-    			append_dev(div2, t6);
+    			append_dev(div2, t7);
     			append_dev(div2, div1);
     			append_dev(div1, button);
+
+    			if (!mounted) {
+    				dispose = listen_dev(button, "click", /*click_handler_1*/ ctx[11], false, false, false);
+    				mounted = true;
+    			}
     		},
     		p: function update(ctx, [dirty]) {
-    			if (/*isMobile*/ ctx[1]) if_block.p(ctx, dirty);
+    			if (/*isMobile*/ ctx[2]) if_block0.p(ctx, dirty);
+
+    			if (/*realityCheckSuccess*/ ctx[1]) {
+    				if (if_block1) {
+    					if_block1.p(ctx, dirty);
+    				} else {
+    					if_block1 = create_if_block(ctx);
+    					if_block1.c();
+    					if_block1.m(div2, t1);
+    				}
+    			} else if (if_block1) {
+    				if_block1.d(1);
+    				if_block1 = null;
+    			}
 
-    			if (dirty & /*options, frequency*/ 5) {
-    				each_value = /*options*/ ctx[2];
+    			if (dirty & /*realityCheckOptions, frequency*/ 17) {
+    				each_value = /*realityCheckOptions*/ ctx[4];
     				validate_each_argument(each_value);
     				let i;
 
@@ -4717,8 +4836,11 @@
     		o: noop$1,
     		d: function destroy(detaching) {
     			if (detaching) detach_dev(div2);
-    			if (if_block) if_block.d();
+    			if (if_block0) if_block0.d();
+    			if (if_block1) if_block1.d();
     			destroy_each(each_blocks, detaching);
+    			mounted = false;
+    			dispose();
     		}
     	};
 
@@ -4736,27 +4858,71 @@
     function instance($$self, $$props, $$invalidate) {
     	let { $$slots: slots = {}, $$scope } = $$props;
     	validate_slots("undefined", slots, []);
+    	let { realitycheck = "" } = $$props;
     	let userAgent = window.navigator.userAgent;
     	let isMobile = getDevice(userAgent) === "PC" ? false : true;
-    	let frequency = "never";
-
-    	let options = [
-    		{ value: "never", text: "Never" },
-    		{ value: "oneHour", text: "1 Hour" },
-    		{ value: "twoHours", text: "2 Hours" },
-    		{ value: "threeHours", text: "3 Hours" },
-    		{ value: "fourHours", text: "4 Hours" }
+    	let frequency = "";
+    	let receivedData = {};
+    	let realityCheckData = {};
+    	let realityCheckSuccess = false;
+    	let realityCheckSuccessMessage = "Reality check ha been successfully updated.";
+
+    	let realityCheckOptions = [
+    		{ value: "0", text: "Never" },
+    		{ value: "60", text: "1 Hour" },
+    		{ value: "120", text: "2 Hours" },
+    		{ value: "180", text: "3 Hours" },
+    		{ value: "240", text: "4 Hours" }
     	];
 
-    	//TODO: this should be used when api will be done
-    	// const submitFrequency = () => {
-    	//   window.postMessage({ type: '' }, window.location.href);
-    	// }
+    	// Send Frequency period and date
+    	const submitFrequency = () => {
+    		window.postMessage(
+    			{
+    				type: "SubmittedRealityCheck",
+    				realityCheckUpdatedValue: frequency
+    			},
+    			window.location.href
+    		);
+    	};
+
     	const toggleScreen = () => {
     		window.postMessage({ type: "ReturnToMenu" }, window.location.href);
     	};
 
-    	const writable_props = [];
+    	const initialLoad = () => {
+    		if (realitycheck) {
+    			$$invalidate(0, frequency = realitycheck);
+    		} else {
+    			$$invalidate(0, frequency = realityCheckOptions[0].value);
+    		}
+    	};
+
+    	const messageHandler = e => {
+    		if (e.data) {
+    			switch (e.data.type) {
+    				case "RealityCheckValueUpdated":
+    					$$invalidate(1, realityCheckSuccess = true);
+    					setTimeout(
+    						() => {
+    							$$invalidate(1, realityCheckSuccess = false);
+    						},
+    						2000
+    					);
+    					break;
+    			}
+    		}
+    	};
+
+    	onMount(() => {
+    		window.addEventListener("message", messageHandler, false);
+
+    		return () => {
+    			window.removeEventListener("message", messageHandler);
+    		};
+    	});
+
+    	const writable_props = ["realitycheck"];
 
     	Object.keys($$props).forEach(key => {
     		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<undefined> was created with unknown prop '${key}'`);
@@ -4770,41 +4936,72 @@
     		$$invalidate(0, frequency);
     	}
 
+    	const click_handler_1 = () => submitFrequency();
+
+    	$$self.$$set = $$props => {
+    		if ("realitycheck" in $$props) $$invalidate(7, realitycheck = $$props.realitycheck);
+    	};
+
     	$$self.$capture_state = () => ({
+    		onMount,
     		getDevice,
+    		realitycheck,
     		userAgent,
     		isMobile,
     		frequency,
-    		options,
-    		toggleScreen
+    		receivedData,
+    		realityCheckData,
+    		realityCheckSuccess,
+    		realityCheckSuccessMessage,
+    		realityCheckOptions,
+    		submitFrequency,
+    		toggleScreen,
+    		initialLoad,
+    		messageHandler
     	});
 
     	$$self.$inject_state = $$props => {
+    		if ("realitycheck" in $$props) $$invalidate(7, realitycheck = $$props.realitycheck);
     		if ("userAgent" in $$props) userAgent = $$props.userAgent;
-    		if ("isMobile" in $$props) $$invalidate(1, isMobile = $$props.isMobile);
+    		if ("isMobile" in $$props) $$invalidate(2, isMobile = $$props.isMobile);
     		if ("frequency" in $$props) $$invalidate(0, frequency = $$props.frequency);
-    		if ("options" in $$props) $$invalidate(2, options = $$props.options);
+    		if ("receivedData" in $$props) receivedData = $$props.receivedData;
+    		if ("realityCheckData" in $$props) realityCheckData = $$props.realityCheckData;
+    		if ("realityCheckSuccess" in $$props) $$invalidate(1, realityCheckSuccess = $$props.realityCheckSuccess);
+    		if ("realityCheckSuccessMessage" in $$props) $$invalidate(3, realityCheckSuccessMessage = $$props.realityCheckSuccessMessage);
+    		if ("realityCheckOptions" in $$props) $$invalidate(4, realityCheckOptions = $$props.realityCheckOptions);
     	};
 
     	if ($$props && "$$inject" in $$props) {
     		$$self.$inject_state($$props.$$inject);
     	}
 
+    	$$self.$$.update = () => {
+    		if ($$self.$$.dirty & /*realitycheck*/ 128) {
+    			realitycheck && initialLoad();
+    		}
+    	};
+
     	return [
     		frequency,
+    		realityCheckSuccess,
     		isMobile,
-    		options,
+    		realityCheckSuccessMessage,
+    		realityCheckOptions,
+    		submitFrequency,
     		toggleScreen,
+    		realitycheck,
     		click_handler,
     		input_change_handler,
-    		$$binding_groups
+    		$$binding_groups,
+    		click_handler_1
     	];
     }
 
     class PlayerRealityCheck extends SvelteElement {
     	constructor(options) {
     		super();
-    		this.shadowRoot.innerHTML = `<style>.customRadio{margin-top:30px}.customRadio div{margin:0 0 30px}.customRadio input[type="radio"]{position:absolute;left:-9999px}.customRadio input[type="radio"]+label{position:relative;padding:3px 0 0 40px;cursor:pointer}.customRadio input[type="radio"]+label:before{content:'';background:#fff;border:1px solid #707070;height:20px;width:20px;border-radius:50%;position:absolute;top:0;left:0}.customRadio input[type="radio"]+label:after{content:'';background:#d0046c;width:18px;height:18px;border-radius:50%;position:absolute;top:2px;left:2px;opacity:0;transform:scale(2);transition:transform 0.3s linear, opacity 0.3s linear}.customRadio input[type="radio"]:checked+label:after{opacity:1;transform:scale(1)}.RealityCheckDescription{color:#58586B;line-height:24px}.PlayerRealityCheckWrapper{color:#07072A;padding:50px;max-width:760px}.PlayerRealityCheckWrapper.PlayerRealityCheckWrapperMobile{padding:20px 15px;max-width:unset}.RealityCheckTitle{font-size:26px;color:#D0046C;font-weight:400}.RealityCheckTitleMobile{font-size:16px;color:#D0046C}.RealityCheckTitleNone{display:none}.BottomButtonsArea{display:grid;grid-column-gap:30px;grid-template-rows:auto;grid-template-columns:1fr 1fr;margin-top:20px}.BottomButtonsArea.BottomButtonsAreaMobile{width:100%;grid-template-columns:1fr}.PlayerRealityCheckButton{cursor:pointer;border-radius:5px;width:100%;height:50px;display:flex;align-items:center;justify-content:center;font-size:15px;color:#FFF;text-transform:uppercase;text-align:center;transition-duration:0.3s;box-sizing:border-box;padding:10px}.PlayerRealityCheckButton{background:transparent;border:1px solid #58586B}.PlayerRealityCheckButton{background:#D0046C;border:1px solid #D0046C}.MenuReturnButton{color:#D0046C;display:inline-flex;align-items:center;column-gap:20PX}.MenuReturnButton svg{fill:#D0046C}</style>`;
+    		this.shadowRoot.innerHTML = `<style>.successMessage{position:absolute;display:block;top:25px;left:50px;background:#16CE16;font-size:14px;border-radius:5px;padding:10px;color:#FFF}.successMessage.successMessageMobile{display:none}.successMessageMobile{display:block;background:#16CE16;font-size:14px;border-radius:5px;padding:10px;color:#FFF}.successMessageMobile.successMessage{display:none}.customRadio{margin-top:15px}.customRadio div{margin:0 0 30px}.customRadio input[type="radio"]{position:absolute;left:-9999px}.customRadio input[type="radio"]+label{position:relative;padding:3px 0 0 40px;cursor:pointer}.customRadio input[type="radio"]+label:before{content:'';background:#fff;border:1px solid #707070;height:20px;width:20px;border-radius:50%;position:absolute;top:0;left:0}.customRadio input[type="radio"]+label:after{content:'';background:#d0046c;width:18px;height:18px;border-radius:50%;position:absolute;top:2px;left:2px;opacity:0;transform:scale(2);transition:transform 0.3s linear, opacity 0.3s linear}.customRadio input[type="radio"]:checked+label:after{opacity:1;transform:scale(1)}.RealityCheckDescription{color:#58586B;line-height:24px}.PlayerRealityCheckWrapper{position:relative;color:#07072A;padding:50px;max-width:760px}.PlayerRealityCheckWrapper.PlayerRealityCheckWrapperMobile{padding:20px 15px;max-width:unset}.RealityCheckTitle{font-size:26px;color:#D0046C;font-weight:400}.RealityCheckTitleMobile{font-size:16px;color:#D0046C}.RealityCheckTitleNone{display:none}.BottomButtonsArea{display:grid;grid-column-gap:30px;grid-template-rows:auto;grid-template-columns:1fr 1fr;margin-top:20px}.BottomButtonsArea.BottomButtonsAreaMobile{width:100%;grid-template-columns:1fr}.PlayerRealityCheckButton{cursor:pointer;border-radius:5px;width:100%;height:50px;display:flex;align-items:center;justify-content:center;font-size:15px;color:#FFF;text-transform:uppercase;text-align:center;transition-duration:0.3s;box-sizing:border-box;padding:10px}.PlayerRealityCheckButton{background:transparent;border:1px solid #58586B}.PlayerRealityCheckButton{background:#D0046C;border:1px solid #D0046C}.MenuReturnButton{color:#D0046C;display:inline-flex;align-items:center;column-gap:20PX}.MenuReturnButton svg{fill:#D0046C}</style>`;
 
     		init(
     			this,
@@ -4816,15 +5013,33 @@
     			instance,
     			create_fragment,
     			safe_not_equal,
-    			{}
+    			{ realitycheck: 7 }
     		);
 
     		if (options) {
     			if (options.target) {
     				insert_dev(options.target, this, options.anchor);
     			}
+
+    			if (options.props) {
+    				this.$set(options.props);
+    				flush();
+    			}
     		}
     	}
+
+    	static get observedAttributes() {
+    		return ["realitycheck"];
+    	}
+
+    	get realitycheck() {
+    		return this.$$.ctx[7];
+    	}
+
+    	set realitycheck(realitycheck) {
+    		this.$set({ realitycheck });
+    		flush();
+    	}
     }
 
     !customElements.get('player-reality-check') && customElements.define('player-reality-check', PlayerRealityCheck);