✨ share button

src/front-end/scripts/views/story/actions.vue

@@ -3,6 +3,10 @@ import { defineComponent } from "vue";
 
 const Actions = defineComponent({
 	methods: {
+		async copyUrl() {
+			await window.navigator.clipboard.writeText(window.location.href);
+			alert("The room URL has been copied to your clipboard!");
+		},
 		reveal() {
 			if (
 				this.$store.state.story.story?.owner !== this.$store.state.session.id &&
@@ -21,6 +25,12 @@ export default Actions;
 
 <template>
 	<ul class="x">
+		<li>
+			<button @click="copyUrl">
+				<span aria-hidden="true">📋</span>
+				Share
+			</button>
+		</li>
 		<li>
 			<button :disabled="$store.state.story.story?.revealed" @click="reveal">
 				<span aria-hidden="true">👀</span>
@@ -29,3 +39,9 @@ export default Actions;
 		</li>
 	</ul>
 </template>
+
+<style lang="less" scoped>
+button {
+	margin-right: var(--space-m);
+}
+</style>

src/front-end/styles/index.less

@@ -175,6 +175,10 @@ legend {
 		list-style-position: inside;
 		margin: 0;
 		padding: 0;
+
+		& li {
+			display: inline-block;
+		}
 	}
 }