wancat/linux-odyssey
1
0 Fork 0
mirror of https://github.com/linux-odyssey/linux-odyssey.git synced 2026-11-06 03:20:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

modify background, change color when completed

Browse Source
This commit is contained in:
Annie Huang committed 2023-11-20 01:38:06 +08:00
1 parent 46efb15273
commit c272fe61a8
2 files changed
+230 -32
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/src/components/QuestMap.vue
+224 -25
View File
@@ -1,32 +1,218 @@
<template>
<div class="p-2.5 bg-black w-full h-full flex">
<div class="text-slate-600 absolute w-full z-0 p-2">
<h1 class="relative left-1/3">01010111 01100101 01101100 01100011</h1>
<h1 class="relative left-1/4">
01101111 01101101 01100101 00100000 01110100 01101111
<div class="relative bg-black w-full h-full flex">
<div
class="text-slate-500 relative flex flex-col blur-[2px] w-1/2 h-full flex-wrap"
>
<h1 class="relative flex w-fit" style="left: 38%; height: 3%">
01111000 00100000 01001111 01100100 01111001 01110011
</h1>
<h1 class="relative left-1/4">
00100000 01001100 01101001 01101110 01110101 01111000 00100000
<h1 class="relative flex w-fit" style="left: 26%; height: 3%">
01110011 01100101 01111001 00100001 01010111 01100101
</h1>
<h1 class="relative left-1/4">
01001111 01100100 01111001 01110011 01110011 01100101 01111001
<h1 class="relative flex w-fit" style="left: 20%; height: 3%">
01101100 01100011 01101111 01101101 01100101 00100000
</h1>
<h1 class="relative left-1/4">
00100001 01010111 01100101 01101100 01100011 01101111 01101101 01100101
<h1 class="relative flex w-fit" style="left: 15%; height: 3%">
01110100 01101111 00100000 01001100 01101001 01101110
</h1>
<h1 class="relative left-1/4">
00100000 01110100 01101111 00100000 01001100 01101001 01101110 01110101
<h1 class="relative flex w-fit" style="left: 5%; height: 3%">
01101101 01100101 00100000 01110100 01101111 01101111
<h1 class="relative flex w-fit" style="left: 13%; height: 3%">
01101110 01110101 01111000 00100000 01001111 01100100
</h1>
<h1 class="relative flex w-fit" style="left: 5%; height: 3%">
01010111 01100101 01101100 01100011 01111000
</h1>
<h1 class="relative flex w-fit" style="left: 3%; height: 3%">
01101111 01101101 01100101 00100000 01110100
</h1>
<h1 class="relative flex w-fit" style="left: 13%; height: 3%">
00100000 01001100 01101001 01101110 01110101
</h1>
<h1 class="relative flex w-fit" style="left: 16%; height: 3%">
00100000 01001111 01100100 01111001 01110011
</h1>
<h1 class="relative flex w-fit" style="left: 17%; height: 3%">
01110011 01100101 01111001 00100001 01010111
</h1>
<h1 class="relative flex w-fit" style="left: 12%; height: 3%">
01100101 01101100 01100011 01101111 01101101
</h1>
<h1 class="relative flex w-fit" style="left: 8%; height: 3%">
01100101 00100000 01110100 01101111 01010111
</h1>
<h1 class="relative flex w-fit" style="left: 8%; height: 3%">
00100000 01001100 01101001 01101110 01110101
</h1>
<h1 class="relative flex w-fit" style="left: 9%; height: 3%">
01111000 00100000 01001111 01100100 01111001
</h1>
<h1 class="relative flex w-fit" style="left: 6%; height: 3%">
01110011 01110011 01100101 01101100 01101100 01101001
</h1>
<h1 class="relative flex w-fit" style="left: 5%; height: 3%">
01111001 00100001 01010111 01100011 01100101 01101001
</h1>
<h1 class="relative flex w-fit" style="left: 9%; height: 3%">
01100101 01101100 01110101 01111000 01001100
</h1>
<h1 class="relative flex w-fit" style="left: 7%; height: 3%">
00100000 01001111 01100100 01111001 01110011 01110011
</h1>
<h1 class="relative flex w-fit" style="left: 3%; height: 3%">
01100101 01111001 00100001 01010111 01100101
</h1>
<h1 class="relative flex w-fit" style="left: 6%; height: 3%">
01101111 01101101 01010111 01100101 01101100 01100011
</h1>
<h1 class="relative flex w-fit" style="left: 5%; height: 3%">
01101101 01100101 00100000 01110100 01101111 00100000
</h1>
<h1 class="relative flex w-fit" style="left: 3%; height: 3%">
01101110 01110101 01111000 00100000 01001111 01100100
</h1>
<h1 class="relative flex w-fit" style="left: 6%; height: 3%">
01100011 01101111 01101101 01111001 01110011
</h1>
<h1 class="relative flex w-fit" style="left: 9%; height: 3%">
01100101 00100000 01110100 01001100
</h1>
<h1 class="relative flex w-fit" style="left: 7%; height: 3%">
01101111 00100000 01001100 01101111 01101111
</h1>
<h1 class="relative flex w-fit" style="left: 5%; height: 3%">
01101001 01101110 011101010 1111001 01110011
</h1>
<h1 class="relative flex w-fit" style="left: 6%; height: 3%">
01111000 00100000 01001111 00100000
</h1>
</h1>
<h1 class="relative left-1/4">
01111000 00100000 01001111 01100100 01111001 01110011 01110011 01100101
<h1 class="relative flex w-fit" style="left: 4%; height: 3%">
01100100 01111001 01110011 01110011
</h1>
<h1 class="relative flex w-fit" style="left: 3%; height: 3%">
01100101 01111001 00100001
</h1>
<h1 class="relative flex w-fit" style="left: 5%; height: 3%">
01100101 01101100 01100011 01101111
</h1>
<h1 class="relative flex w-fit" style="left: 2%; height: 3%">
01101101 01100101 00100000 01110100
</h1>
<h1 class="relative flex w-fit" style="left: 3%; height: 3%">
00100000 01001100 01101001 01101110 01110101
</h1>
<h1 class="relative left-1/4">01111001 00100001</h1>
</div>
<h1 class="text-text-primary text-xl absolute left-2 w-full z-1">
<div
class="text-slate-500 relative flex flex-col blur-[2px] w-1/2 h-full flex-wrap"
>
<h1 class="relative flex w-fit" style="left: 7%; height: 3%">
01010111 01100101 01101100 01100011 01001100 01101001 00100000
</h1>
<h1 class="relative flex w-fit" style="left: 14%; height: 3%">
01101111 01101101 01100101 00100000 01110100 01101111 01100100
</h1>
<h1 class="relative flex w-fit" style="left: 18%; height: 3%">
00100000 01001100 01101001 01101110 01110101 01111000
</h1>
<h1 class="relative flex w-fit" style="left: 19%; height: 3%">
00100000 01001111 01100100 01111001 01110011 01101111
</h1>
<h1 class="relative flex w-fit" style="left: 25%; height: 3%">
01110011 01100101 01111001 00100001 01010111 01100100
</h1>
<h1 class="relative flex w-fit" style="left: 24%; height: 3%">
01100101 01101100 01100011 01101111 01101101 01110011
</h1>
<h1 class="relative flex w-fit" style="left: 23%; height: 3%">
01100101 00100000 01110100 01101111 00100000 01111001
</h1>
<h1 class="relative flex w-fit" style="left: 23%; height: 3%">
00100000 01001100 01101001 01101110 01110101 01111001 01110011
</h1>
<h1 class="relative flex w-fit" style="left: 27%; height: 3%">
01111000 00100000 01001111 01100100 01111001 01100100
</h1>
<h1 class="relative flex w-fit" style="left: 29%; height: 3%">
01110011 01110011 01100101 01111001 01110011
</h1>
<h1 class="relative flex w-fit" style="left: 35%; height: 3%">
01111001 00100001 01010111 01101110 01110011
</h1>
<h1 class="relative flex w-fit" style="left: 30%; height: 3%">
01100101 01101100 01100011 01100101 01101100
</h1>
<h1 class="relative flex w-fit" style="left: 20%; height: 3%">
01100011 01101111 01101101 01100100 01111001 01110011
</h1>
<h1 class="relative flex w-fit" style="left: 23%; height: 3%">
01100101 00100000 01110100 01101111 01100101 01101001
</h1>
<h1 class="relative flex w-fit" style="left: 27%; height: 3%">
01101111 00100000 01001100 01100101 01101100 01101111
</h1>
<h1 class="relative flex w-fit" style="left: 28%; height: 3%">
01101001 01101110 01110101 01001100 01101001 01001111
</h1>
<h1 class="relative flex w-fit" style="left: 35%; height: 3%">
01111000 00100000 01001111 00100000 01100011
</h1>
<h1 class="relative flex w-fit" style="left: 32%; height: 3%">
01100100 01111001 01110011 01110011 01010111 01100101
</h1>
<h1 class="relative flex w-fit" style="left: 29%; height: 3%">
01100101 01111001 00100001 01010111 01010111 01101100
</h1>
<h1 class="relative flex w-fit" style="left: 43%; height: 3%">
01100101 01101100 01100011 01101111 01001111
</h1>
<h1 class="relative flex w-fit" style="left: 46%; height: 3%">
01101101 01100101 00100000 01110100
</h1>
<h1 class="relative flex w-fit" style="left: 43%; height: 3%">
00100000 01001100 01101001 01101110 01110101
</h1>
<h1 class="relative flex w-fit" style="left: 45%; height: 3%">
01111000 00100000 01001111 01100100 01111001
</h1>
<h1 class="relative flex w-fit" style="left: 52%; height: 3%">
01110011 01100101 01111001 00100001
</h1>
<h1 class="relative flex w-fit" style="left: 48%; height: 3%">
01101100 01100011 01101111 01101101
</h1>
<h1 class="relative flex w-fit" style="left: 53%; height: 3%">
01110100 01101111 00100000 01001100
</h1>
<h1 class="relative flex w-fit" style="left: 52%; height: 3%">
01110101 01111000 00100000 01001111
</h1>
<h1 class="relative flex w-fit" style="left: 59%; height: 3%">
01100101 01111001 00100001
</h1>
<h1 class="relative flex w-fit" style="left: 50%; height: 3%">
01101111 01101101 01010111 01100101
</h1>
<h1 class="relative flex w-fit" style="left: 51%; height: 3%">
01101101 01100101 00100000 01110100
</h1>
<h1 class="relative flex w-fit" style="left: 50%; height: 3%">
01101110 01110101 01111000 00100000
</h1>
<h1 class="relative flex w-fit" style="left: 52%; height: 3%">
01101101 01100101 00100000 01110100
</h1>
<h1 class="relative flex w-fit" style="left: 43%; height: 3%">
01101110 01110101 01111000 00100000 01101111
</h1>
</div>
<h1
class="text-text-primary text-xl p-2.5 absolute w-fit z-2 font-mono font-bold flex flax-wrap"
>
Get through your linux journey!
</h1>
<div class="p-2.5 relative w-full h-full z-2">
<div ref="chartContainer" class="p-2.5 w-full h-full"></div>
<div class="flex flex-wrap absolute w-full h-full z-1">
<div ref="chartContainer" class="w-full h-full flex flex-wrap"></div>
</div>
</div>
</template>
@@ -44,7 +230,7 @@ import api from '../utils/api'
import { NodeImage } from '../img/svg.js'
const marginX = 100
const marginY = 70
const marginY = 65
const chartContainer = ref(null)
let chartInstance = null
@@ -63,6 +249,7 @@ async function getQuests() {
async function getProgress() {
try {
const res = await api.get('/users/me')
console.log(res.data.progress)
return res.data.progress
} catch (err) {
console.error(err)
@@ -86,10 +273,10 @@ const genOption = (nodes, edges) => ({
roam: true,
label: {
show: true,
fontSize: 20,
fontSize: 22,
},
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [5, 12],
edgeSymbol: ['pin', 'arrow'],
edgeSymbolSize: [2, 15],
edgeLabel: {
fontSize: 25,
},
@@ -99,9 +286,21 @@ const genOption = (nodes, edges) => ({
lineStyle: {
opacity: 4,
width: 3,
curveness: 0,
curveness: 0.08,
},
itemStyle: {
color: (params) => {
const {
data: { completed },
} = params
switch (completed) {
case true:
return '#ADADB5'
default:
return '#454552'
}
},
},
itemStyle: { color: '#454552' },
},
],
})
app/src/views/QuestMapPage.vue
+6 -7
View File
@@ -1,16 +1,15 @@
<template>
<div class="h-[6vh] w-full">
<GameHeaderPart />
<p
class="text-text-primary absolute z-1 left-[3vh] top-[1vh] h-fit font-bold inline-block"
>
Quest Map
</p>
</div>
<div class="flex flex-col justify-center items-center h-[94vh]">
<div class="flex flex-col justify-center items-center w-full h-[94vh]">
<QuestMap />
<!-- <div id="header" class="p-2 bg-slate-700 w-screen flex h-[6vh]">
<h1 class="text-teal-300 text-4xl font-mono font-black skew-y-3">
Quest Map
</h1> -->
<!-- <p>Quest Map Page</p> -->
</div>
<!-- </div> -->
</template>
<script setup>