From d34f72e198cd780f765c9957ba9d1ec4bc3bf313 Mon Sep 17 00:00:00 2001
From: Till Arnold <throwable42@gmail.com>
Date: Mon, 14 Jun 2021 20:20:40 +0200
Subject: [PATCH] Show warning message if BigInt64Array is not available (#209)

* Show warning message if BigInt64Array is not available

* Apply nitpicks
---
 client/web/src/App.vue | 69 +++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 68 insertions(+), 1 deletion(-)

diff --git a/client/web/src/App.vue b/client/web/src/App.vue
index 9cc514e6..179bc74a 100644
--- a/client/web/src/App.vue
+++ b/client/web/src/App.vue
@@ -1,5 +1,20 @@
 <template>
 	<MainWindow />
+	<div class="unsupported-modal-backdrop" v-if="showUnsupportedModal">
+		<div class="unsupported-modal">
+			<h2>Your browser currently doesn't support Graphite</h2>
+			<p>
+				Unfortunately, some features won't work properly in your browser. Please use a modern browser other than Safari, such as Firefox, Chrome, or Edge. Rest assured, Safari compatibility is
+				planned.
+			</p>
+			<p>
+				Your browser is missing support for the
+				<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt64Array#browser_compatibility" target="_blank"><code>BigInt64Array</code></a> JavaScript
+				API which is required for using the editor. You can still explore the user interface.
+			</p>
+			<LayoutRow> <button class="unsupported-modal-button" @click="closeModal()">I understand, let's just see the interface</button> </LayoutRow>
+		</div>
+	</div>
 </template>
 
 <style lang="scss">
@@ -70,13 +85,65 @@ img {
 		margin-top: 8px;
 	}
 }
+
+.unsupported-modal-backdrop {
+	background: rgba(255, 255, 255, 0.6);
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	align-items: center;
+	justify-content: center;
+	display: flex;
+}
+.unsupported-modal {
+	background: var(--color-3-darkgray);
+	border-radius: 4px;
+	box-shadow: 2px 2px 5px 0 var(--floating-menu-shadow);
+	padding: 0 16px 16px 16px;
+	border: 1px solid var(--color-4-dimgray);
+	max-width: 500px;
+
+	& a {
+		color: var(--color-accent-hover);
+	}
+}
+.unsupported-modal-button {
+	flex: 1;
+	background: var(--color-1-nearblack);
+	border: 0 none;
+	padding: 12px;
+	border-radius: 2px;
+
+	&:hover {
+		background-color: var(--color-6-lowergray);
+		color: var(--color-f-white);
+	}
+
+	&:active {
+		background-color: var(--color-accent-hover);
+		color: var(--color-f-white);
+	}
+}
 </style>
 
 <script lang="ts">
 import { defineComponent } from "vue";
 import MainWindow from "./components/window/MainWindow.vue";
+import LayoutRow from "./components/layout/LayoutRow.vue";
 
 export default defineComponent({
-	components: { MainWindow },
+	data() {
+		return {
+			showUnsupportedModal: !("BigInt64Array" in window),
+		};
+	},
+	methods: {
+		closeModal() {
+			this.showUnsupportedModal = false;
+		},
+	},
+	components: { MainWindow, LayoutRow },
 });
 </script>