Skip to content

Commit

Permalink
Fixes mdl29#108 add room editor (mdl29#112)
Browse files Browse the repository at this point in the history
  • Loading branch information
@viandoxdev
viandoxdev authored Apr 25, 2021
1 parent 191745e commit c64244e
Show file tree
Hide file tree
Showing 2 changed files with 216 additions and 0 deletions.
135 changes: 135 additions & 0 deletions front/css/room_editor.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
.room_editor_wrapper {
background-color: rgba(0,0,0,0.2);
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
position: fixed;
top:0;
left: 0;
}

.room_editor_popup {
background-color: var(--bg3);
border-radius: 7px;
padding: 10px 15px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
color: white;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.room_editor_content_wrapper > *, .room_editor_popup > *:not(.room_editor_content_wrapper) {
--margin: 15px;
margin-top: var(--margin);
margin-bottom: var(--margin);
}

.room_editor_tabs {
display: flex;
width: 100%;
}

.room_editor_tabs > * {
flex-grow: 1;
text-align: center;
cursor: pointer;
padding-bottom: 8px;
}

.room_editor_selected_tab {
border-bottom: solid white 2px;
}

.room_editor_content_wrapper {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}

.room_editor_title {
width: 100%;
text-align: center;
font-size: smaller;
}

.room_editor_label {
color: rgb(189, 189, 189);
font-size: 0.8em;
margin-bottom: 0;
}

.room_editor_input {
margin-top: 3px;
outline: 0;
border: none;
border-radius: 4px;
padding: 5px;
font-size: 0.9em;
color: rgb(173, 173, 173);
background-color: var(--bg2);
transition: 0.1s;
width: 30vw;
min-width: 400px;
}

.room_editor_input:focus {
color: white;
}

textarea.room_editor_input {
resize: vertical;
}

.room_editor_submit_wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 5px;
}

.room_editor_button {
border: none;
transition: 0.1s;
border-radius: 4px;
color: white;
padding: 8px 12px;
cursor: pointer;
font-size: 0.9em;
}

.room_editor_button:hover {
filter: brightness(0.8);
}

.room_editor_submit {
background-color: var(--accent);
}

.room_editor_cancel {
background-color: rgb(145, 145, 145);
}

.room_editor_start {
cursor: pointer;
transition: 0.1s all;
width: 45px;
height: 45px;
background-color: var(--accent);
border-radius: var(--border-radius);
}

.room_editor_start:hover {
filter: brightness(0.9);
}

.room_editor_plus {
clip-path: polygon(52.5% 0, 47.5% 0, 47.5% 47.5%, 0 47.5%, 0 52.5%, 47.5% 52.5%, 47.5% 100%, 52.5% 100%, 52.5% 52.5%, 100% 52.5%, 100% 47.5%, 52.5% 47.5%);
background-color: white;
width: 45px;
height: 45px;
transform: scale(0.8);
}
81 changes: 81 additions & 0 deletions front/room_editor.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<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>

0 comments on commit c64244e

Please sign in to comment.