\n \n \n \n\n \n\n \n \n \n\n \n \n\n \n \n
\n\n \n\n \n If you have any questions about Summer Science, please email\n \n exhibition@royalsociety.org\n \n
\n\n\n\n\n\n\n\n","\n \n\n\n\n\n\n","\n","import { render } from \"./introduction.svg?vue&type=template&id=06625e1a\"\nconst script = {}\nscript.render = render\n\nexport default script","\n","import { render } from \"./upcoming-workshops.svg?vue&type=template&id=9d6176aa\"\nconst script = {}\nscript.render = render\n\nexport default script","\n\n \n \n \n
\n \n
\n\n \n
\n {{ state.value.title }}
\n{{ state.value.subtitle }}
\n{{ state.value.description }}
\n\n \n
\n\n\n\n\n\n","\nimport { defineComponent, ref } from 'vue';\nimport gsap from 'gsap';\n\nexport default defineComponent({\n name: 'Video',\n props: {\n src: String,\n style: Object,\n },\n\n setup() {\n const container = ref\n
\n\n\n\n\n\n\n\n","\n","import { render } from \"./microphone.svg?vue&type=template&id=aca193ce\"\nconst script = {}\nscript.render = render\n\nexport default script","\nimport { defineComponent } from 'vue';\nimport SVGMicrophone from '@/svgs/microphone.svg';\n\nexport default defineComponent({\n components: { SVGMicrophone },\n name: 'LiveView',\n});\n","import { render } from \"./LiveView.vue?vue&type=template&id=b69cf094&scoped=true\"\nimport script from \"./LiveView.vue?vue&type=script&lang=ts\"\nexport * from \"./LiveView.vue?vue&type=script&lang=ts\"\n\nimport \"./LiveView.vue?vue&type=style&index=0&id=b69cf094&lang=postcss\"\nimport \"./LiveView.vue?vue&type=style&index=1&id=b69cf094&lang=postcss&scoped=true\"\nscript.render = render\nscript.__scopeId = \"data-v-b69cf094\"\n\nexport default script","\nimport { defineComponent } from 'vue';\nimport gsap, { Back } from 'gsap';\nimport store from './store';\nimport Video from '../Video.vue';\nimport LiveView from '../LiveView.vue';\n\ninterface DialogStyle {\n width: string;\n height: string;\n animationDuration: string;\n}\n\nexport default defineComponent({\n name: 'modal',\n components: { Video, LiveView },\n\n props: {\n duration: { type: Number, default: 300 },\n measure: { type: String, default: 'px' },\n mask: { type: Boolean, default: true },\n closeButton: { type: Boolean, default: true },\n closeOnEsc: { type: Boolean, default: false },\n closeOnClickMask: { type: Boolean, default: true },\n className: { type: String, default: '' },\n customStyles: { type: Object, default: () => ({}) },\n customMaskStyles: { type: Object, default: () => ({}) },\n },\n\n data() {\n return {\n state: store.state,\n width: store.state.value.width || 400,\n height: store.state.value.height || 240,\n };\n },\n\n created() {\n window.addEventListener('resize', this.resize);\n },\n\n unmounted() {\n window.removeEventListener('resize', this.resize);\n },\n\n computed: {\n show(): boolean {\n return this.state.value.isVisible;\n },\n style(): { animationDuration: string } {\n return {\n animationDuration: `${this.duration}ms`\n };\n },\n dialogStyle(): DialogStyle {\n return {\n width: this.state.value.width + this.measure,\n height: this.state.value.height + this.measure,\n animationDuration: `${this.duration}ms`,\n ...this.customStyles\n };\n }\n },\n\n watch: {\n show(isShow) {\n if (isShow) {\n document.body.style.cursor = '';\n\n this.$nextTick(() => {\n this.$el.focus();\n });\n }\n }\n },\n\n methods: {\n async leave(element: Element, done: () => void) {\n await gsap.to(element, {\n duration: 0.3,\n opacity: 0,\n y: 100,\n scaleX: 0.9,\n scaleY: 1.1,\n ease: Back.easeOut.config(1.7),\n });\n\n store.clear();\n done();\n },\n\n beforeEnter(element: Element) {\n gsap.set(element, {\n y: 100,\n scaleX: 0.9,\n scaleY: 1.1,\n });\n },\n enter(element: Element, done: () => void) {\n gsap.to(element, {\n duration: 0.4,\n opacity: 1,\n scale: 1.0,\n y: 0,\n onComplete: done,\n ease: Back.easeOut.config(3),\n });\n },\n\n hide() {\n store.hide();\n },\n\n resize() {\n const w = window.innerWidth;\n const h = window.innerHeight;\n\n if (w < ((this.state.value.width || 400))) {\n this.state.value.width = w * 0.925;\n } else if ((store.state.value.width || 400) < w * 0.925) {\n this.state.value.width = store.state.value.width;\n }\n\n if (h < ((this.state.value.height || 240))) {\n this.state.value.height = h * 0.925;\n } else if ((store.state.value.height || 240) < w * 0.925) {\n this.state.value.height = store.state.value.height;\n }\n },\n onEsc() {\n if (this.show && this.closeOnEsc) {\n // this.$emit('hide');\n this.hide();\n }\n },\n onClickMask() {\n this.$emit('clickMask');\n if (this.closeOnClickMask) {\n // this.$emit('hide');\n this.hide();\n }\n }\n }\n});\n","import { render } from \"./Modal.vue?vue&type=template&id=52819b28&scoped=true\"\nimport script from \"./Modal.vue?vue&type=script&lang=ts\"\nexport * from \"./Modal.vue?vue&type=script&lang=ts\"\n\nimport \"./Modal.vue?vue&type=style&index=0&id=52819b28&lang=postcss&scoped=true\"\nscript.render = render\nscript.__scopeId = \"data-v-52819b28\"\n\nexport default script","\n \n \n Watch on Youtube\n \n
\n\n \n \n
\n Watch the LIVE stream here
\n\n
\n \n \n
\n \n No LIVE stream available now, please come back later.\n
\n\n \n \n\n \n
\n \n \n \n \n \n Explore the answer\n \n
\n\n {{ info.subtitle }}
\n{{ info.description }}
\n\n\n \n \n\n
\n \n
\n \n \n \n {{ item.title }}\n \n\n \n \n {{ item.materialIcon }}\n \n \n\n \n {{ item.title }}\n \n \n
\n \n \n \n \n \n
\n\n \n \n\n \n \n \n \n {{ article.title }}\n \n \n \n \n
\n \n \n
\n\n \n Talks and activities\n
\n\n\n \n Upcoming\n \n \n On demand\n \n
\n \n ![]()
\n
\n \n
\n {{ article.title }}
\n\n {{ article.startDateFormat }} - {{ article.endTimeFormat }}\n
\n\n
\n\n\n\n\n\n","","import { render } from \"./language_black_24dp.svg?vue&type=template&id=d144793e\"\nconst script = {}\nscript.render = render\n\nexport default script","","import { render } from \"./close_black_24dp.svg?vue&type=template&id=3ecd8716\"\nconst script = {}\nscript.render = render\n\nexport default script","\n \n \n \n {{ item.name }}\n \n \n
\n\n \n Zone\n \n {{ `${index + 1}/${scenes.length}` }}\n \n
\n\n \n\n\n
\n \n
\n\n\n\n\n\n","\n","import { render } from \"./back.svg?vue&type=template&id=d1715c36\"\nconst script = {}\nscript.render = render\n\nexport default script","\nimport { defineComponent, PropType } from 'vue';\nimport Button from '@/components/Button.vue';\nimport SVGBack from '@/svgs/back.svg';\n\nexport default defineComponent({\n name: 'Back',\n props: { onClick: Function as PropType<(payload: MouseEvent) => void> },\n components: { Button, SVGBack },\n});\n","import { render } from \"./Back.vue?vue&type=template&id=3db98c94&scoped=true\"\nimport script from \"./Back.vue?vue&type=script&lang=ts\"\nexport * from \"./Back.vue?vue&type=script&lang=ts\"\n\nimport \"./Back.vue?vue&type=style&index=0&id=3db98c94&scoped=true&lang=postcss\"\nscript.render = render\nscript.__scopeId = \"data-v-3db98c94\"\n\nexport default script","\n \n \n
\n\n
\n \n
\n\n \n
\n\n \n\n \n
\n\n \n
\n\n \n \n ![\"pill\"]()
\n \n \n \n Click on a doodle to explore answers to big questions through innovative digital experiences, from escape rooms and quizzes to virtual tours and digital games.\n \n
\n\n \n