mirror of
https://github.com/linux-odyssey/linux-odyssey.git
synced 2026-11-05 19:20:12 +08:00
fix: improve game page UI
This commit is contained in:
Chen, Tai-Lin committed
1 parent
93d4f9d46b
commit
00fcf353ba
6 files changed
+112
-91
No files matched your search
@@ -1,15 +1,7 @@
|
||||
<template>
|
||||
<div class="bg-background-primary h-screen">
|
||||
<!--header-->
|
||||
<!-- <div id="header" class="bg-background-secondary content-center h-[6vh] p-1">
|
||||
<HeaderPart />
|
||||
</div> -->
|
||||
<!-- route outlet -->
|
||||
<!-- component matched by the route will render here -->
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import HeaderPart from './components/HeaderPart.vue'
|
||||
</script>
|
||||
@@ -84,7 +84,7 @@ const handleChange = () => {
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<!--login page-->
|
||||
<!-- login page -->
|
||||
<div
|
||||
class="bg-background border-8 border-background-primary flex flex-1 flex-col items-center justify-center rounded-3xl p-10"
|
||||
>
|
||||
@@ -114,7 +114,12 @@ const handleChange = () => {
|
||||
<span class="font-medium">Continue with GitHub</span>
|
||||
</a>
|
||||
</div>
|
||||
<p class="text-text-secondary flex justify-center mt-3">or</p>
|
||||
<p
|
||||
class="text-text-secondary flex justify-center mt-3"
|
||||
v-if="type === 'login' || type === 'register'"
|
||||
>
|
||||
or
|
||||
</p>
|
||||
<div class="mb-6">
|
||||
<input
|
||||
type="text"
|
||||
@@ -156,7 +161,7 @@ const handleChange = () => {
|
||||
@input="handleChange()"
|
||||
/>
|
||||
</div>
|
||||
<p class="text-red-500 flex justify-center" v-if="errorMessage">
|
||||
<p class="text-error flex justify-center" v-if="errorMessage">
|
||||
{{ errorMessage }}
|
||||
</p>
|
||||
<button
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { logout } from '../utils/auth'
|
||||
import api from '../utils/api'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const handleLogout = async () => {
|
||||
await logout()
|
||||
router.push({ name: 'login' })
|
||||
}
|
||||
|
||||
const questData = ref(null)
|
||||
const questErr = ref(null)
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const res = await api.get('/quests/helloworld')
|
||||
questData.value = res.data
|
||||
} catch (err) {
|
||||
questErr.value = err
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
id="header"
|
||||
class="bg-background-secondary content-center h-full w-full p-1"
|
||||
>
|
||||
<div class="h-full flex items-center justify-center mx-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<button id="stream" class="flex items-center">
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'bars']"
|
||||
class="text-text-primary h-5 w-5"
|
||||
/>
|
||||
</button>
|
||||
<button id="backward" class="flex items-center">
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'arrow-left']"
|
||||
class="text-text-tertiary h-5 w-5"
|
||||
/>
|
||||
</button>
|
||||
<button>
|
||||
<p
|
||||
class="text-text-primary inline-block font-bold whitespace-nowrap"
|
||||
v-if="questData"
|
||||
>
|
||||
{{ questData.title }}
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
<div class="h-full w-full flex gap-3 items-center justify-end">
|
||||
<button id="warning" class="flex items-center">
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'triangle-exclamation']"
|
||||
class="text-text-primary h-5 w-5"
|
||||
/>
|
||||
</button>
|
||||
<button id="setting" class="flex items-center">
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'gear']"
|
||||
class="text-text-primary h-5 w-5"
|
||||
/>
|
||||
</button>
|
||||
<button id="fullscreen" class="flex items-center">
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'expand']"
|
||||
class="text-text-primary h-5 w-5"
|
||||
/>
|
||||
</button>
|
||||
<button @click="handleLogout">
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'arrow-right-from-bracket']"
|
||||
class="text-text-primary h-5 w-5"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,67 +0,0 @@
|
||||
<script setup>
|
||||
import { useRouter } from 'vue-router'
|
||||
import { logout } from '../utils/auth'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const handleLogout = async () => {
|
||||
await logout()
|
||||
router.push({ name: 'login' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-full flex items-center justify-center mx-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<button id="stream" class="flex items-center">
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'bars']"
|
||||
class="text-text-primary h-5 w-5"
|
||||
/>
|
||||
</button>
|
||||
<button id="backward" class="flex items-center">
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'arrow-left']"
|
||||
class="text-text-tertiary h-5 w-5"
|
||||
/>
|
||||
</button>
|
||||
<button>
|
||||
<p class="text-text-primary inline-block font-bold whitespace-nowrap">
|
||||
1. Command's Basics
|
||||
</p>
|
||||
</button>
|
||||
<p class="text-text-primary inline-block font-bold">●</p>
|
||||
<button>
|
||||
<p class="text-text-primary inline-block font-bold whitespace-nowrap">
|
||||
1. Try Your First Command
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
<div class="h-full w-full flex gap-3 items-center justify-end">
|
||||
<button id="warning" class="flex items-center">
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'triangle-exclamation']"
|
||||
class="text-text-primary h-5 w-5"
|
||||
/>
|
||||
</button>
|
||||
<button id="setting" class="flex items-center">
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'gear']"
|
||||
class="text-text-primary h-5 w-5"
|
||||
/>
|
||||
</button>
|
||||
<button id="fullscreen" class="flex items-center">
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'expand']"
|
||||
class="text-text-primary h-5 w-5"
|
||||
/>
|
||||
</button>
|
||||
<button @click="handleLogout">
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'arrow-right-from-bracket']"
|
||||
class="text-text-primary h-5 w-5"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -17,7 +17,7 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="overflow-auto h-full w-full max-h-full">
|
||||
<div class="h-full w-full max-h-full">
|
||||
<h1 id="topic" class="text-red-500" v-if="questErr">
|
||||
Failed to get quest infomation
|
||||
</h1>
|
||||
|
||||
+20
-12
@@ -2,6 +2,7 @@
|
||||
import { onMounted, ref } from 'vue'
|
||||
import socket from '../utils/socket'
|
||||
import sessionManager from '../utils/session'
|
||||
import GameHeaderPart from '../components/GameHeaderPart.vue'
|
||||
import CommandlistPart from '../components/CommandlistPart.vue'
|
||||
import HintPart from '../components/HintPart.vue'
|
||||
import QuestPart from '../components/QuestPart.vue'
|
||||
@@ -43,11 +44,15 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!--main-->
|
||||
<div id="main" class="h-[94vh] grid grid-cols-3 gap-3 p-3">
|
||||
<!--Topic and Command List-->
|
||||
<div class="bg-background-secondary h-full rounded-lg">
|
||||
<section id="quest" class="h-2/3 m-3">
|
||||
<!-- game header -->
|
||||
<div class="h-[5vh] w-full">
|
||||
<GameHeaderPart />
|
||||
</div>
|
||||
<!-- main -->
|
||||
<div id="main" class="h-[95vh] w-full flex p-3 space-x-3">
|
||||
<!-- Topic and Command List -->
|
||||
<div class="bg-background-secondary h-full w-1/3 rounded-lg">
|
||||
<section id="quest" class="h-2/3 p-3">
|
||||
<QuestPart />
|
||||
</section>
|
||||
<hr class="border-text-tertiary border" />
|
||||
@@ -55,8 +60,8 @@ onMounted(async () => {
|
||||
<CommandlistPart />
|
||||
</section>
|
||||
</div>
|
||||
<!--Terminal and Hint-->
|
||||
<div class="bg-background h-full rounded-lg">
|
||||
<!-- Terminal and Hint -->
|
||||
<div class="bg-background h-full w-1/3 rounded-lg">
|
||||
<section id="terminal" class="h-3/5">
|
||||
<TerminalPart />
|
||||
</section>
|
||||
@@ -64,11 +69,14 @@ onMounted(async () => {
|
||||
<HintPart />
|
||||
</section>
|
||||
</div>
|
||||
<!--Visualization-->
|
||||
<div class="h-full">
|
||||
<div class="bg-border rounded-xl h-[90%] px-3 py-6">
|
||||
<div class="bg-background rounded-xl h-full px-1 py-6">
|
||||
<section id="visualization" class="bg-background-primary h-full">
|
||||
<!-- Visualization -->
|
||||
<div class="h-full w-1/3">
|
||||
<div class="bg-border rounded-xl h-[90%] p-2">
|
||||
<div class="bg-background rounded-lg h-full p-2">
|
||||
<section
|
||||
id="visualization"
|
||||
class="bg-background-primary h-full rounded-md"
|
||||
>
|
||||
<VisualizationPart />
|
||||
</section>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user