front/room_editor.html

<html>
    <head>
        <script src="https://unpkg.com/vue@next"></script>
        <link rel="stylesheet" href="css/global.css">
        <link rel="stylesheet" href="css/room_editor.css">
    </head>
    <body>
        <div id="app">
            <room-editor v-on:create-room="createRoom($event)" v-on:join-room="joinRoom($event)"></room-editor>
        </div>
        <script>
            const roomEditor = {
                name: "room-editor",
                data: () => ({
                    isPopupShown: false,
                    // 0 -> join room
                    // 1 -> create room
                    tab: 0,
                    createRoomTitle: "",
                    createRoomDescription: "",
                    joinRoomId: ""
                }),
                methods: {
                    close() {
                        this.isPopupShown = false;
                    },
                    open() {
                        this.isPopupShown = true;
                    }
                },
                emits: ["createRoom", "joinRoom"],
                template: `
                    <div class="room_editor_start" @click="open()">
                        <div class="room_editor_plus"></div>
                    </div>
                    <div v-if="isPopupShown" class="room_editor_wrapper">
                        <div class="room_editor_popup">
                            <div class="room_editor_tabs">
                                <div :class="{ room_editor_selected_tab: tab == 0 }" @click="tab = 0">join</div>
                                <div :class="{ room_editor_selected_tab: tab == 1 }" @click="tab = 1">create</div>
                            </div>
                            <div class="room_editor_content_wrapper" v-if="tab == 0">
                                <label class="room_editor_label" for="id">room id</label>
                                <input name="id" class="room_editor_input" type="text" v-model="joinRoomId"/>
                                <div class="room_editor_submit_wrapper">
                                    <button class="room_editor_button room_editor_cancel" @click="close()">cancel</button>
                                    <button class="room_editor_button room_editor_submit" @click="$emit('joinRoom', joinRoomId)">join</button>
                                </div>
                            </div>
                            <div class="room_editor_content_wrapper" v-if="tab == 1">
                                <label class="room_editor_label" for="room_title">room title</label>
                                <input name="room_title" class="room_editor_input" v-model="createRoomTitle" />
                                <label class="room_editor_label" for="room_desc">room description</label>
                                <textarea name="room_desc" class="room_editor_input" v-model="createRoomDescription"></textarea>
                                <div class="room_editor_submit_wrapper">
                                    <button class="room_editor_button room_editor_cancel" @click="close()">cancel</button>
                                    <button class="room_editor_button room_editor_submit" @click="$emit('createRoom', {title: createRoomTitle, description: createRoomDescription})">create</button>
                                </div>
                            </div>
                        </div>    
                    </div>
                    `
            };
            const app = Vue.createApp({
                name: "app",
                methods: {
                    createRoom(roomData) {
                        // TODO: do whatever
                        console.log(`create room\n title: ${roomData.title}\n desc: ${roomData.description}`);
                    },
                    joinRoom(id) {
                        // TODO: do whatever
                        console.log(`join room '${id}'`);
                    }
                }
            });
            app.component("room-editor", roomEditor);
            app.mount("#app");
        </script>
    </body>
</html>