Skip to content
This repository was archived by the owner on Jun 7, 2024. It is now read-only.

Commit 4bfdc27

Browse files
rossjrwrossjrw
committed
Split interface and preload CSS across components
1 parent 524d7c0 commit 4bfdc27

File tree

12 files changed

+327
-558
lines changed

12 files changed

+327
-558
lines changed

‎src/components/AppSelector.vue

Lines changed: 24 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,10 @@
11
<template>
22
<ul class="apps">
3-
<AppSelectorButton></AppSelectorButton>
4-
<!-- Replace all of these with that component too-->
5-
<li
6-
id="terminal-app"
7-
class="selector"
8-
ng-click="aic.switchApp('terminal')"
9-
ng-class="[aic.selectedApp == 'terminal' ? 'selected' : null, aic.ready.terminal ? null : 'disabled', aic.vars.terminalEmphasis ? 'emphasis' : null]"
10-
ng-disabled=""
11-
>
12-
<a><i class="material-icons">dvr</i></a>
13-
<div class="notification" ng-show="aic.notifications.terminal > 0">
14-
<p>
15-
{{ aic.notifications.terminal }}
16-
</p>
17-
</div>
18-
</li>
19-
<li
20-
id="messages-app"
21-
class="selector"
22-
ng-click="aic.switchApp('messages')"
23-
ng-class="[aic.selectedApp == 'messages' ? 'selected' : null, aic.ready.messages ? null : 'disabled', aic.vars.messagesEmphasis ? 'emphasis' : null]"
24-
ng-disabled=""
25-
>
26-
<a><i class="material-icons">record_voice_over</i></a>
27-
<div
28-
class="notification"
29-
ng-show="(aic.notifications.breach + aic.notifications.alexandra) > 0"
30-
>
31-
<p>{{ aic.notifications.breach + aic.notifications.alexandra }}</p>
32-
</div>
33-
</li>
34-
<li
35-
id="database-app"
36-
class="selector"
37-
ng-click="aic.switchApp('database')"
38-
ng-class="[aic.selectedApp == 'database' ? 'selected' : null, aic.ready.database ? null : 'disabled', aic.vars.databaseEmphasis ? 'emphasis' : null]"
39-
ng-disabled=""
40-
>
41-
<a><i class="material-icons">library_books</i></a>
42-
<div class="notification" ng-show="aic.notifications.database > 0">
43-
<p>
44-
{{ aic.notifications.database }}
45-
</p>
46-
</div>
47-
</li>
48-
<li
49-
id="run-app"
50-
class="selector"
51-
ng-click="aic.switchApp('run')"
52-
ng-class="[aic.selectedApp == 'run' ? 'selected' : null, aic.ready.run ? null : 'disabled']"
53-
ng-disabled=""
54-
>
55-
<a><i class="material-icons">directions_run</i></a>
56-
<div class="notification" ng-show="aic.notifications.run > 0">
57-
<p>
58-
{{ aic.notifications.run }}
59-
</p>
60-
</div>
61-
</li>
3+
<AppSelectorButton app-name="ending"></AppSelectorButton>
4+
<AppSelectorButton app-name="terminal"></AppSelectorButton>
5+
<AppSelectorButton app-name="messages"></AppSelectorButton>
6+
<AppSelectorButton app-name="database"></AppSelectorButton>
7+
<AppSelectorButton app-name="run"></AppSelectorButton>
628
</ul>
639
</template>
6410

@@ -71,3 +17,22 @@ export default defineComponent({
7117
components: { AppSelectorButton },
7218
})
7319
</script>
20+
21+
<style lang="scss">
22+
ul {
23+
position: absolute;
24+
height: 100%;
25+
margin: 0 -0.3125rem 0 0;
26+
top: -50%;
27+
transform: translate(0, 50%);
28+
right: 0;
29+
padding: 0;
30+
transition: opacity 0.3s var(--ease-in-out) 1.2s;
31+
display: flex;
32+
align-items: center;
33+
justify-content: space-between;
34+
list-style: none;
35+
width: auto;
36+
opacity: 1;
37+
}
38+
</style>

‎src/components/AppSelectorButton.vue

Lines changed: 133 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<template>
22
<li
33
id="ending-app"
4-
class="selector"
5-
ng-click="aic.switchApp('ending')"
6-
ng-class="[aic.selectedApp == 'ending' ? 'selected' : null, aic.ready.ending ? null : 'disabled']"
7-
ng-disabled=""
4+
:class="aic.selectedApp === appName ? 'selected' : null"
5+
@click="aic.switchApp('ending')"
86
>
9-
<a><i class="material-icons">clear</i></a>
10-
<div class="notification" ng-show="aic.notifications.ending > 0">
7+
<button :disabled="!aic.ready.ending">
8+
<i class="material-icons">clear</i>
9+
</button>
10+
<div class="notification" v-if="TODO > 0">
1111
<p>
1212
{{ aic.notifications.ending }}
1313
</p>
@@ -20,7 +20,133 @@ import { defineComponent } from "vue"
2020
2121
export default defineComponent({
2222
name: "AppSelectorButton",
23+
props: {
24+
appName: String,
25+
},
2326
})
2427
</script>
2528

26-
<style lang="scss"></style>
29+
<style lang="scss">
30+
li {
31+
position: relative;
32+
list-style: none;
33+
height: 100%;
34+
width: 3.75rem;
35+
margin: 0 0.3125rem;
36+
37+
button {
38+
height: 2.5rem;
39+
width: 2.5rem;
40+
border-radius: 50%;
41+
background-color: white;
42+
display: inline-block;
43+
position: absolute;
44+
color: var(--middle-theme);
45+
border: 0.0625rem white solid;
46+
transition: box-shadow 0.2s var(--ease-in-out) 0s,
47+
border-radius 0.2s var(--ease-in-out) 0s,
48+
height 0.2s var(--ease-in-out) 0s, width 0.1s var(--ease-in-out) 0s,
49+
border-width 0s;
50+
top: 50%;
51+
left: 50%;
52+
margin-right: -50%;
53+
transform: translate(-50%, -50%);
54+
box-shadow: 0 0.125rem 0.125rem 0 rgba(0, 0, 0, 0.14),
55+
0 0.1875rem 0.0625rem -0.125rem rgba(0, 0, 0, 0.12),
56+
0 0.0625rem 0.3125rem 0 rgba(0, 0, 0, 0.2);
57+
58+
&::before,
59+
&::after {
60+
box-shadow: none;
61+
content: " ";
62+
height: 100%;
63+
width: 0.625rem;
64+
position: absolute;
65+
}
66+
67+
&::before {
68+
top: 0;
69+
left: -0.625rem;
70+
}
71+
72+
&::after {
73+
right: -0.625rem;
74+
}
75+
76+
i {
77+
position: absolute;
78+
top: 50%;
79+
left: 50%;
80+
margin-right: -50%;
81+
transform: translate(-50%, -50%);
82+
}
83+
}
84+
85+
&.selected {
86+
transition: background-color 0.2s var(--ease-in-out);
87+
88+
button {
89+
box-shadow: none;
90+
border-radius: 0;
91+
height: 100%;
92+
width: 100%;
93+
border-width: 0;
94+
transition: box-shadow 0.1s var(--ease-in-out) 0s,
95+
border-radius 0.1s var(--ease-in-out) 0s,
96+
height 0.1s var(--ease-in-out) 0s, width 0.2s ease-in 0.2s,
97+
border-width 0s;
98+
animation: none;
99+
}
100+
101+
button::before {
102+
box-shadow: inset -0.1875rem 0 0.125rem -0.125rem rgba(0, 0, 0, 0.28),
103+
inset -0.25rem 0 0.0625rem -0.125rem rgba(0, 0, 0, 0.14),
104+
inset -0.125rem 0 0.3125rem -0.3125rem rgba(0, 0, 0, 0.2);
105+
}
106+
107+
&:not(:last-of-type) button::after {
108+
box-shadow: inset 0.1875rem 0 0.125rem -0.125rem rgba(0, 0, 0, 0.28),
109+
inset 0.25rem 0 0.0625rem -0.125rem rgba(0, 0, 0, 0.14),
110+
inset 0.125rem 0 0.3125rem -0.3125rem rgba(0, 0, 0, 0.2);
111+
}
112+
}
113+
114+
&:not(.selected):hover button {
115+
animation: bounce-with-x-translate 1s linear 1 both;
116+
}
117+
118+
button[disabled] {
119+
border: 0.0625rem var(--middle-theme) solid;
120+
background-color: transparent;
121+
color: transparent;
122+
box-shadow: none;
123+
animation: none;
124+
}
125+
126+
.notification {
127+
position: absolute;
128+
top: 50%;
129+
left: 75%;
130+
margin-right: -50%;
131+
transform: translate(-50%, 50%);
132+
background: linear-gradient(to bottom, #e23, #d02);
133+
min-width: 1.41em;
134+
height: 1.41em;
135+
border-radius: 1.41em;
136+
box-shadow: 0 0.125rem 0.125rem 0 rgba(0, 0, 0, 0.14),
137+
0 0.1875rem 0.0625rem -0.125rem rgba(0, 0, 0, 0.12),
138+
0 0.0625rem 0.3125rem 0 rgba(0, 0, 0, 0.2);
139+
140+
p {
141+
text-align: center;
142+
font-family: Nunito, Arial, Helvetica, sans-serif;
143+
font-size: 0.9em;
144+
position: absolute;
145+
top: 50%;
146+
left: 50%;
147+
margin: 0 -50% 0 0;
148+
transform: translate(-50%, -50%);
149+
}
150+
}
151+
}
152+
</style>

‎src/components/Interface.vue

Lines changed: 88 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44
ng-class="[aic.preload ? 'preload' : null, aic.ready.ending ? 'ended' : null]"
55
ng-cloak
66
>
7-
<div id="app-selector">
7+
<header>
88
<MainTitle></MainTitle>
99
<AppSelector></AppSelector>
10-
</div>
10+
</header>
1111
<TerminalApp></TerminalApp>
1212
<DatabaseApp></DatabaseApp>
1313
</div>
@@ -29,3 +29,89 @@ export default defineComponent({
2929
},
3030
})
3131
</script>
32+
33+
<style lang="scss">
34+
#interface {
35+
--light-theme: hsl(202, 82%, 44%);
36+
--lightish-theme: hsl(209, 77%, 44%);
37+
--middle-theme: hsl(217, 71%, 44%);
38+
--dark-theme: hsl(237, 61%, 43%);
39+
40+
--plain-base: hsl(0, 0%, 100%);
41+
--light-contrast: hsl(0, 0%, 93%);
42+
--neutral-contrast: hsl(0, 0%, 87%);
43+
--heavy-contrast: hsl(0, 0%, 80%);
44+
45+
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
46+
--monospace-font: "Fira Code", "Cousine", "Roboto Mono", monospace;
47+
--app-title-height: 1.875rem;
48+
--selector-shadow: 0 0.125rem 0.125rem 0 rgba(0, 0, 0, 0.14),
49+
0 0.1875rem 0.0625rem -0.125rem rgba(0, 0, 0, 0.12),
50+
0 0.0625rem 0.3125rem 0 rgba(0, 0, 0, 0.2);
51+
52+
&.ended {
53+
--light-theme: hsl(0, 100%, 53%);
54+
--lightish-theme: hsl(0, 90%, 49%);
55+
--middle-theme: hsl(0, 92%, 45%);
56+
--dark-theme: hsl(0, 100%, 37%);
57+
}
58+
59+
&.corrupted {
60+
--light-theme: hsl(0, 0%, 33%);
61+
--lightish-theme: hsl(0, 0%, 27%);
62+
--middle-theme: hsl(0, 0%, 20%);
63+
--dark-theme: hsl(0, 0%, 7%);
64+
}
65+
}
66+
/* The preload class is applied to the interface before the game starts, to
67+
* prompt the title into filling the screen and covering everything else.
68+
*/
69+
.preload header {
70+
height: 100%;
71+
}
72+
.preload header .title {
73+
top: 45%;
74+
transform: translate(0, -50%);
75+
height: 8.75rem;
76+
}
77+
header .title .title-info {
78+
display: none;
79+
}
80+
.preload header .title .title-info {
81+
display: block;
82+
position: absolute;
83+
top: 85%;
84+
width: 100%;
85+
}
86+
.preload header .title .title-info p {
87+
text-align: center;
88+
}
89+
.preload header .title .title-info button {
90+
margin: 0 auto;
91+
}
92+
.preload header .title .title-image {
93+
left: 50%;
94+
transform: translate(-50%, 0);
95+
background-position: center;
96+
}
97+
.preload header ul {
98+
opacity: 0;
99+
top: -999rem;
100+
}
101+
.preload .app-title p {
102+
opacity: 0;
103+
}
104+
.preload *:not(button) {
105+
transition: all 0s !important;
106+
}
107+
108+
header {
109+
--app-selector-height: 4.375rem;
110+
height: var(--app-selector-height);
111+
background: linear-gradient(to right, var(--light-theme), var(--dark-theme));
112+
position: relative;
113+
transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
114+
box-shadow: inset 0 -3px 1px -2px rgba(0, 0, 0, 0.12),
115+
inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
116+
}
117+
</style>

‎src/components/MainTitle.vue

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,6 @@
66
></div>
77
<div class="title-info">
88
<p>{{ ::aic.lang.version }}</p>
9-
<p ng-hide="true">
10-
This text should not be visible (unless you have javascript disabled) -
11-
if you can see this text, please contact the author.
12-
</p>
139
<p ng-show="aic.onMobile">{{ ::aic.lang.mobileWarning }}</p>
1410
<button id="boot-up" class="option speech" ng-click="aic.bootUp()">
1511
{{ ::aic.lang.bootUp }}
@@ -26,4 +22,27 @@ export default defineComponent({
2622
})
2723
</script>
2824

29-
<style lang="scss"></style>
25+
<style lang="scss">
26+
.title {
27+
display: block;
28+
height: var(--app-selector-height);
29+
margin: 0 5%;
30+
position: relative;
31+
transition: all 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
32+
top: 0;
33+
transform: translate(0, 0);
34+
35+
.title-image {
36+
height: 100%;
37+
transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 1.2s;
38+
position: absolute;
39+
width: 100%;
40+
top: 0;
41+
left: 0;
42+
transform: translate(0, 0);
43+
background-size: contain;
44+
background-repeat: no-repeat;
45+
background-position: center left;
46+
}
47+
}
48+
</style>

0 commit comments

Comments
 (0)