Skip to content

Commit f55b303

Browse files
bagusnlbagusnl
committed
Feature matix page
1 parent 27f501b commit f55b303

File tree

4 files changed

+389
-0
lines changed

4 files changed

+389
-0
lines changed

‎home/.vitepress/theme/style.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,3 +137,18 @@
137137
--docsearch-primary-color: var(--vp-c-brand-1) !important;
138138
}
139139

140+
:root {
141+
--vp-layout-max-width: 1920px;
142+
}
143+
144+
.VPDoc:not(.has-sidebar) .container {
145+
max-width: 1584px !important;
146+
}
147+
148+
.VPDoc:not(.has-sidebar) .content {
149+
max-width: 1264px !important;
150+
}
151+
152+
.VPDoc.has-aside .content-container {
153+
max-width: 1168px !important;
154+
}

‎home/features.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<script setup>
2+
import featureTable from './scripts/features.vue'
3+
document.title = 'Feature Matrix | Collapse Launcher'
4+
</script>
5+
6+
<featureTable />

‎home/scripts/featureTableData.js‎

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
// Format
2+
// Feature:
3+
// ✅ - Available
4+
// ❌ - Not Available
5+
// ⚠️ - Partially Available
6+
// Feature table matrices:
7+
// Install, Pre-load, Update, Game Repair, Cache Update, Game Settings, Game Region Convert
8+
9+
export const games = [
10+
{
11+
title: "Honkai Impact 3rd",
12+
regions: [
13+
{
14+
name: "Southeast Asia",
15+
features: [
16+
{ emoji: "✅", tooltip: "" },
17+
{ emoji: "✅", tooltip: "" },
18+
{ emoji: "✅", tooltip: "Normal and Delta-patch updates are available" },
19+
{ emoji: "✅", tooltip: "" },
20+
{ emoji: "✅", tooltip: "" },
21+
{ emoji: "✅", tooltip: "" },
22+
{ emoji: "⚠️", tooltip: "From SEA -> Global" }
23+
]
24+
},
25+
{
26+
name: "Global",
27+
features: [
28+
{ emoji: "✅", tooltip: "" },
29+
{ emoji: "✅", tooltip: "" },
30+
{ emoji: "✅", tooltip: "Normal and Delta-patch updates are available" },
31+
{ emoji: "✅", tooltip: "" },
32+
{ emoji: "✅", tooltip: "" },
33+
{ emoji: "✅", tooltip: "" },
34+
{ emoji: "⚠️", tooltip: "From Steam -> Global, From Global -> SEA" }
35+
]
36+
},
37+
{
38+
name: "Mainland China",
39+
features: [
40+
{ emoji: "✅", tooltip: "" },
41+
{ emoji: "✅", tooltip: "" },
42+
{ emoji: "✅", tooltip: "" },
43+
{ emoji: "✅", tooltip: "" },
44+
{ emoji: "✅", tooltip: "" },
45+
{ emoji: "✅", tooltip: "" },
46+
{ emoji: "✅", tooltip: "" }
47+
]
48+
},
49+
{
50+
name: "TW/HK/MO",
51+
features: [
52+
{ emoji: "✅", tooltip: "" },
53+
{ emoji: "✅", tooltip: "" },
54+
{ emoji: "✅", tooltip: "" },
55+
{ emoji: "✅", tooltip: "" },
56+
{ emoji: "✅", tooltip: "" },
57+
{ emoji: "✅", tooltip: "" },
58+
{ emoji: "✅", tooltip: "" }
59+
]
60+
},
61+
{
62+
name: "Japan",
63+
features: [
64+
{ emoji: "✅", tooltip: "" },
65+
{ emoji: "✅", tooltip: "" },
66+
{ emoji: "✅", tooltip: "" },
67+
{ emoji: "✅", tooltip: "" },
68+
{ emoji: "✅", tooltip: "" },
69+
{ emoji: "✅", tooltip: "" },
70+
{ emoji: "✅", tooltip: "" }
71+
]
72+
},
73+
{
74+
name: "Korea",
75+
features: [
76+
{ emoji: "✅", tooltip: "" },
77+
{ emoji: "✅", tooltip: "" },
78+
{ emoji: "✅", tooltip: "" },
79+
{ emoji: "✅", tooltip: "" },
80+
{ emoji: "✅", tooltip: "" },
81+
{ emoji: "✅", tooltip: "" },
82+
{ emoji: "✅", tooltip: "" }
83+
]
84+
}
85+
]
86+
},
87+
{
88+
title: "Genshin Impact",
89+
regions: [
90+
{
91+
name: "Global",
92+
features: [
93+
{ emoji: "✅", tooltip: "" },
94+
{ emoji: "✅", tooltip: "" },
95+
{ emoji: "✅", tooltip: "" },
96+
{ emoji: "✅", tooltip: "" },
97+
{ emoji: "❌", tooltip: "" },
98+
{ emoji: "✅", tooltip: "" },
99+
{ emoji: "❌", tooltip: "" }
100+
]
101+
},
102+
{
103+
name: "Mainland China",
104+
features: [
105+
{ emoji: "✅", tooltip: "" },
106+
{ emoji: "✅", tooltip: "" },
107+
{ emoji: "✅", tooltip: "" },
108+
{ emoji: "✅", tooltip: "" },
109+
{ emoji: "❌", tooltip: "" },
110+
{ emoji: "✅", tooltip: "" },
111+
{ emoji: "❌", tooltip: "" }
112+
]
113+
},
114+
{
115+
name: "Bilibili",
116+
features: [
117+
{ emoji: "✅", tooltip: "" },
118+
{ emoji: "✅", tooltip: "" },
119+
{ emoji: "✅", tooltip: "" },
120+
{ emoji: "✅", tooltip: "" },
121+
{ emoji: "❌", tooltip: "" },
122+
{ emoji: "✅", tooltip: "" },
123+
{ emoji: "❌", tooltip: "" }
124+
]
125+
},
126+
{
127+
name: "Google Play (Global)",
128+
features: [
129+
{ emoji: "✅", tooltip: "" },
130+
{ emoji: "✅", tooltip: "" },
131+
{ emoji: "✅", tooltip: "" },
132+
{ emoji: "✅", tooltip: "" },
133+
{ emoji: "❌", tooltip: "" },
134+
{ emoji: "✅", tooltip: "" },
135+
{ emoji: "❌", tooltip: "" }
136+
]
137+
}
138+
]
139+
},
140+
{
141+
title: "Honkai: Star Rail",
142+
regions: [
143+
{
144+
name: "Global",
145+
features: [
146+
{ emoji: "✅", tooltip: "" },
147+
{ emoji: "✅", tooltip: "" },
148+
{ emoji: "✅", tooltip: "" },
149+
{ emoji: "✅", tooltip: "" },
150+
{ emoji: "✅", tooltip: "" },
151+
{ emoji: "✅", tooltip: "" },
152+
{ emoji: "❌", tooltip: "" }
153+
]
154+
},
155+
{
156+
name: "Mainland China",
157+
features: [
158+
{ emoji: "✅", tooltip: "" },
159+
{ emoji: "✅", tooltip: "" },
160+
{ emoji: "✅", tooltip: "" },
161+
{ emoji: "✅", tooltip: "" },
162+
{ emoji: "✅", tooltip: "" },
163+
{ emoji: "✅", tooltip: "" },
164+
{ emoji: "❌", tooltip: "" }
165+
]
166+
},
167+
{
168+
name: "Bilibili",
169+
features: [
170+
{ emoji: "✅", tooltip: "" },
171+
{ emoji: "✅", tooltip: "" },
172+
{ emoji: "✅", tooltip: "" },
173+
{ emoji: "✅", tooltip: "" },
174+
{ emoji: "✅", tooltip: "" },
175+
{ emoji: "✅", tooltip: "" },
176+
{ emoji: "❌", tooltip: "" }
177+
]
178+
}
179+
]
180+
},
181+
{
182+
title: "Zenless Zone Zero",
183+
regions: [
184+
{
185+
name: "Global",
186+
features: [
187+
{ emoji: "✅", tooltip: "" },
188+
{ emoji: "✅", tooltip: "" },
189+
{ emoji: "✅", tooltip: "" },
190+
{ emoji: "❌", tooltip: "" },
191+
{ emoji: "❌", tooltip: "" },
192+
{ emoji: "✅", tooltip: "" },
193+
{ emoji: "❌", tooltip: "" }
194+
]
195+
},
196+
{
197+
name: "Mainland China",
198+
features: [
199+
{ emoji: "✅", tooltip: "" },
200+
{ emoji: "✅", tooltip: "" },
201+
{ emoji: "✅", tooltip: "" },
202+
{ emoji: "✅", tooltip: "" },
203+
{ emoji: "✅", tooltip: "" },
204+
{ emoji: "✅", tooltip: "" },
205+
{ emoji: "❌", tooltip: "" }
206+
]
207+
}
208+
]
209+
}
210+
];

‎home/scripts/features.vue‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
<template>
2+
<h1 class="center">Feature Matrix Table</h1>
3+
<p>&nbsp;</p>
4+
<section class="featureTable">
5+
<div class="legends">
6+
<p><strong>Feature:</strong> ✅ - Available | ❌ - Not Available | ⚠️ - Partially Available</p>
7+
</div>
8+
<div class="table-container">
9+
<table>
10+
<thead>
11+
<tr>
12+
<th rowspan="2" class="resizable">Game</th>
13+
<th rowspan="2" class="resizable">Region</th>
14+
<th colspan="7">Features</th>
15+
</tr>
16+
<tr>
17+
<th class="feature-header">Install</th>
18+
<th class="feature-header">Pre-load</th>
19+
<th class="feature-header">Update</th>
20+
<th class="feature-header">Game Repair</th>
21+
<th class="feature-header">Cache Update</th>
22+
<th class="feature-header">Game Settings</th>
23+
<th class="feature-header">Game Region Convert</th>
24+
</tr>
25+
</thead>
26+
<tbody>
27+
<template v-for="(game, index) in games" :key="index">
28+
<tr v-for="(region, rIndex) in game.regions" :key="rIndex" :class="'game-row'">
29+
<template v-if="rIndex === 0">
30+
<td :rowspan="game.regions.length" class="resizable">{{ game.title }}</td>
31+
</template>
32+
<td class="resizable">{{ region.name }}</td>
33+
<td v-for="(feature, fIndex) in region.features" :key="fIndex" class="feature-cell">
34+
<span v-if="!feature.tooltip">{{ feature.emoji }}</span>
35+
<span v-else class="tooltip">{{ feature.emoji }}<sup>i</sup><span class="tooltiptext">{{ feature.tooltip }}</span></span>
36+
</td>
37+
</tr>
38+
</template>
39+
</tbody>
40+
</table>
41+
</div>
42+
</section>
43+
</template>
44+
45+
<script>
46+
import { games } from './featureTableData.js';
47+
export default {
48+
data() {
49+
return {
50+
games
51+
};
52+
}
53+
};
54+
</script>
55+
56+
<style scoped>
57+
.center {
58+
text-align: center;
59+
}
60+
61+
.featureTable {
62+
width: 100%;
63+
overflow-x: auto;
64+
max-width: 1200px;
65+
margin: 0 auto;
66+
}
67+
68+
.legends {
69+
margin-bottom: 10px;
70+
font-size: 0.9em;
71+
text-align: left;
72+
}
73+
74+
.table-container {
75+
display: flex;
76+
justify-content: center;
77+
margin: 0 auto;
78+
}
79+
80+
.featureTable table {
81+
width: 100%;
82+
border-collapse: collapse;
83+
text-align: center;
84+
}
85+
86+
.featureTable th, .featureTable td {
87+
border: 1px solid #dddddd1d;
88+
padding: 8px;
89+
}
90+
91+
.featureTable th {
92+
background-color: #f2f2f231;
93+
font-weight: bold;
94+
text-align: center;
95+
}
96+
97+
.featureTable th.feature-header, .featureTable td.feature-cell {
98+
width: 90px;
99+
}
100+
101+
.featureTable th.resizable, .featureTable td.resizable {
102+
width: auto;
103+
}
104+
105+
.featureTable tr:nth-child(even) {
106+
background-color: #f9f9f90b;
107+
}
108+
109+
.featureTable tr:hover, .featureTable tr:hover td {
110+
background-color: #dddddd45;
111+
}
112+
113+
.featureTable .game-row:hover, .featureTable .game-row:hover td {
114+
background-color: #dddddd45;
115+
}
116+
117+
.featureTable .game-row:hover ~ .game-row td {
118+
background-color: initial;
119+
}
120+
121+
.featureTable .game-row:hover ~ .game-row:not(:hover) td {
122+
background-color: initial;
123+
}
124+
125+
.tooltip {
126+
position: relative;
127+
display: inline-block;
128+
cursor: pointer;
129+
}
130+
131+
.tooltip .tooltiptext {
132+
visibility: hidden;
133+
width: 120px;
134+
background-color: #555;
135+
color: #fff;
136+
text-align: center;
137+
border-radius: 6px;
138+
padding: 5px 0;
139+
position: absolute;
140+
z-index: 1;
141+
bottom: 125%; /* Position the tooltip above the text */
142+
left: 50%;
143+
margin-left: -60px;
144+
opacity: 0;
145+
transition: opacity 0.3s;
146+
}
147+
148+
.tooltip:hover .tooltiptext {
149+
visibility: visible;
150+
opacity: 1;
151+
}
152+
153+
.tooltip sup {
154+
font-size: 0.6em;
155+
vertical-align: super;
156+
color: #555;
157+
}
158+
</style>

0 commit comments

Comments
 (0)