63 lines
2.1 KiB
Vue
63 lines
2.1 KiB
Vue
<script setup>
|
|
import { onMounted, onBeforeUnmount } from 'vue'
|
|
import $ from 'jquery'
|
|
|
|
const emits = defineEmits(['connect', 'update:room', 'update:name', 'update:server', 'update:secret'])
|
|
const props = defineProps(['room', 'server', 'secret', 'name', 'joinMsg'])
|
|
|
|
onMounted(() => {
|
|
$(document).foundation();
|
|
$("#welcome").foundation("open")
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
$("#welcome").foundation("close")
|
|
})
|
|
</script>
|
|
<template>
|
|
<div class="reveal" id="welcome" @keyup.enter="$emit('connect')" data-reveal data-close-on-esc="false" data-close-on-click="false">
|
|
<h1>Welcome to Syng</h1>
|
|
<p>
|
|
Please enter the room code and your name
|
|
</p>
|
|
|
|
<div class="grid-container">
|
|
<div class="grid-x grid-padding-x">
|
|
<div class="medium-6 cell">
|
|
<label>Room code
|
|
<input type="text" :value="room" @input="$emit('update:room', $event.target.value)" placeholder="ABCD">
|
|
</label>
|
|
</div>
|
|
<div class="medium-6 cell">
|
|
<label>Name
|
|
<input type="text" @input="$emit('update:name', $event.target.value)" :value="name" placeholder="Arno Nym">
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p v-html="joinMsg">
|
|
</p>
|
|
<button class="button expanded" @click="$emit('connect')">Connect</button>
|
|
<ul class="accordion" data-accordion>
|
|
<li class="accordion-item" data-accordion-item>
|
|
<a href="#" class="accordion-title">Advanced</a>
|
|
<div class="accordion-content" data-tab-content>
|
|
<div class="grid-container">
|
|
<div class="grid-x grid-padding-x">
|
|
<div class="medium-6 cell">
|
|
<label>Syng server
|
|
<input type="text" :value="server" @input="$emit('update:server', $event.target.value)">
|
|
</label>
|
|
</div>
|
|
<div class="medium-6 cell">
|
|
<label>Admin password
|
|
<input type="password" @input="$emit('update:secret', $event.target.value)" :value="secret" placeholder="Leave free, if not admin">
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|