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

Commit

Permalink
Split interface and preload CSS across components
Browse files Browse the repository at this point in the history
  • Loading branch information
@rossjrw
rossjrw committed Apr 20, 2021
1 parent 524d7c0 commit a25ba42
Show file tree
Hide file tree
Showing 11 changed files with 327 additions and 519 deletions.
83 changes: 24 additions & 59 deletions src/components/AppSelector.vue
View file
Original file line number Diff line number Diff line change
@@ -1,64 +1,10 @@
<template>
<ul class="apps">
<AppSelectorButton></AppSelectorButton>
<!-- Replace all of these with that component too-->
<li
id="terminal-app"
class="selector"
ng-click="aic.switchApp('terminal')"
ng-class="[aic.selectedApp == 'terminal' ? 'selected' : null, aic.ready.terminal ? null : 'disabled', aic.vars.terminalEmphasis ? 'emphasis' : null]"
ng-disabled=""
>
<a><i class="material-icons">dvr</i></a>
<div class="notification" ng-show="aic.notifications.terminal > 0">
<p>
{{ aic.notifications.terminal }}
</p>
</div>
</li>
<li
id="messages-app"
class="selector"
ng-click="aic.switchApp('messages')"
ng-class="[aic.selectedApp == 'messages' ? 'selected' : null, aic.ready.messages ? null : 'disabled', aic.vars.messagesEmphasis ? 'emphasis' : null]"
ng-disabled=""
>
<a><i class="material-icons">record_voice_over</i></a>
<div
class="notification"
ng-show="(aic.notifications.breach + aic.notifications.alexandra) > 0"
>
<p>{{ aic.notifications.breach + aic.notifications.alexandra }}</p>
</div>
</li>
<li
id="database-app"
class="selector"
ng-click="aic.switchApp('database')"
ng-class="[aic.selectedApp == 'database' ? 'selected' : null, aic.ready.database ? null : 'disabled', aic.vars.databaseEmphasis ? 'emphasis' : null]"
ng-disabled=""
>
<a><i class="material-icons">library_books</i></a>
<div class="notification" ng-show="aic.notifications.database > 0">
<p>
{{ aic.notifications.database }}
</p>
</div>
</li>
<li
id="run-app"
class="selector"
ng-click="aic.switchApp('run')"
ng-class="[aic.selectedApp == 'run' ? 'selected' : null, aic.ready.run ? null : 'disabled']"
ng-disabled=""
>
<a><i class="material-icons">directions_run</i></a>
<div class="notification" ng-show="aic.notifications.run > 0">
<p>
{{ aic.notifications.run }}
</p>
</div>
</li>
<AppSelectorButton app-name="ending"></AppSelectorButton>
<AppSelectorButton app-name="terminal"></AppSelectorButton>
<AppSelectorButton app-name="messages"></AppSelectorButton>
<AppSelectorButton app-name="database"></AppSelectorButton>
<AppSelectorButton app-name="run"></AppSelectorButton>
</ul>
</template>

Expand All @@ -71,3 +17,22 @@ export default defineComponent({
components: { AppSelectorButton },
})
</script>

<style lang="scss">
ul {
position: absolute;
height: 100%;
margin: 0 -0.3125rem 0 0;
top: -50%;
transform: translate(0, 50%);
right: 0;
padding: 0;
transition: opacity 0.3s var(--ease-in-out) 1.2s;
display: flex;
align-items: center;
justify-content: space-between;
list-style: none;
width: auto;
opacity: 1;
}
</style>
140 changes: 133 additions & 7 deletions src/components/AppSelectorButton.vue
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
<template>
<li
id="ending-app"
class="selector"
ng-click="aic.switchApp('ending')"
ng-class="[aic.selectedApp == 'ending' ? 'selected' : null, aic.ready.ending ? null : 'disabled']"
ng-disabled=""
:class="aic.selectedApp === appName ? 'selected' : null"
@click="aic.switchApp('ending')"
>
<a><i class="material-icons">clear</i></a>
<div class="notification" ng-show="aic.notifications.ending > 0">
<button :disabled="!aic.ready.ending">
<i class="material-icons">clear</i>
</button>
<div class="notification" v-if="TODO > 0">
<p>
{{ aic.notifications.ending }}
</p>
Expand All @@ -20,7 +20,133 @@ import { defineComponent } from "vue"
export default defineComponent({
name: "AppSelectorButton",
props: {
appName: String,
},
})
</script>

<style lang="scss"></style>
<style lang="scss">
li {
position: relative;
list-style: none;
height: 100%;
width: 3.75rem;
margin: 0 0.3125rem;
button {
height: 2.5rem;
width: 2.5rem;
border-radius: 50%;
background-color: white;
display: inline-block;
position: absolute;
color: var(--middle-theme);
border: 0.0625rem white solid;
transition: box-shadow 0.2s var(--ease-in-out) 0s,
border-radius 0.2s var(--ease-in-out) 0s,
height 0.2s var(--ease-in-out) 0s, width 0.1s var(--ease-in-out) 0s,
border-width 0s;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
box-shadow: 0 0.125rem 0.125rem 0 rgba(0, 0, 0, 0.14),
0 0.1875rem 0.0625rem -0.125rem rgba(0, 0, 0, 0.12),
0 0.0625rem 0.3125rem 0 rgba(0, 0, 0, 0.2);
&::before,
&::after {
box-shadow: none;
content: " ";
height: 100%;
width: 0.625rem;
position: absolute;
}
&::before {
top: 0;
left: -0.625rem;
}
&::after {
right: -0.625rem;
}
i {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
}
&.selected {
transition: background-color 0.2s var(--ease-in-out);
button {
box-shadow: none;
border-radius: 0;
height: 100%;
width: 100%;
border-width: 0;
transition: box-shadow 0.1s var(--ease-in-out) 0s,
border-radius 0.1s var(--ease-in-out) 0s,
height 0.1s var(--ease-in-out) 0s, width 0.2s ease-in 0.2s,
border-width 0s;
animation: none;
}
button::before {
box-shadow: inset -0.1875rem 0 0.125rem -0.125rem rgba(0, 0, 0, 0.28),
inset -0.25rem 0 0.0625rem -0.125rem rgba(0, 0, 0, 0.14),
inset -0.125rem 0 0.3125rem -0.3125rem rgba(0, 0, 0, 0.2);
}
&:not(:last-of-type) button::after {
box-shadow: inset 0.1875rem 0 0.125rem -0.125rem rgba(0, 0, 0, 0.28),
inset 0.25rem 0 0.0625rem -0.125rem rgba(0, 0, 0, 0.14),
inset 0.125rem 0 0.3125rem -0.3125rem rgba(0, 0, 0, 0.2);
}
}
&:not(.selected):hover button {
animation: bounce-with-x-translate 1s linear 1 both;
}
button[disabled] {
border: 0.0625rem var(--middle-theme) solid;
background-color: transparent;
color: transparent;
box-shadow: none;
animation: none;
}
.notification {
position: absolute;
top: 50%;
left: 75%;
margin-right: -50%;
transform: translate(-50%, 50%);
background: linear-gradient(to bottom, #e23, #d02);
min-width: 1.41em;
height: 1.41em;
border-radius: 1.41em;
box-shadow: 0 0.125rem 0.125rem 0 rgba(0, 0, 0, 0.14),
0 0.1875rem 0.0625rem -0.125rem rgba(0, 0, 0, 0.12),
0 0.0625rem 0.3125rem 0 rgba(0, 0, 0, 0.2);
p {
text-align: center;
font-family: Nunito, Arial, Helvetica, sans-serif;
font-size: 0.9em;
position: absolute;
top: 50%;
left: 50%;
margin: 0 -50% 0 0;
transform: translate(-50%, -50%);
}
}
}
</style>
90 changes: 88 additions & 2 deletions src/components/Interface.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@
ng-class="[aic.preload ? 'preload' : null, aic.ready.ending ? 'ended' : null]"
ng-cloak
>
<div id="app-selector">
<header>
<MainTitle></MainTitle>
<AppSelector></AppSelector>
</div>
</header>
<TerminalApp></TerminalApp>
<DatabaseApp></DatabaseApp>
</div>
Expand All @@ -29,3 +29,89 @@ export default defineComponent({
},
})
</script>

<style lang="scss">
#interface {
--light-theme: hsl(202, 82%, 44%);
--lightish-theme: hsl(209, 77%, 44%);
--middle-theme: hsl(217, 71%, 44%);
--dark-theme: hsl(237, 61%, 43%);
--plain-base: hsl(0, 0%, 100%);
--light-contrast: hsl(0, 0%, 93%);
--neutral-contrast: hsl(0, 0%, 87%);
--heavy-contrast: hsl(0, 0%, 80%);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--monospace-font: "Fira Code", "Cousine", "Roboto Mono", monospace;
--app-title-height: 1.875rem;
--selector-shadow: 0 0.125rem 0.125rem 0 rgba(0, 0, 0, 0.14),
0 0.1875rem 0.0625rem -0.125rem rgba(0, 0, 0, 0.12),
0 0.0625rem 0.3125rem 0 rgba(0, 0, 0, 0.2);
&.ended {
--light-theme: hsl(0, 100%, 53%);
--lightish-theme: hsl(0, 90%, 49%);
--middle-theme: hsl(0, 92%, 45%);
--dark-theme: hsl(0, 100%, 37%);
}
&.corrupted {
--light-theme: hsl(0, 0%, 33%);
--lightish-theme: hsl(0, 0%, 27%);
--middle-theme: hsl(0, 0%, 20%);
--dark-theme: hsl(0, 0%, 7%);
}
}
/* The preload class is applied to the interface before the game starts, to
* prompt the title into filling the screen and covering everything else.
*/
.preload header {
height: 100%;
}
.preload header .title {
top: 45%;
transform: translate(0, -50%);
height: 8.75rem;
}
header .title .title-info {
display: none;
}
.preload header .title .title-info {
display: block;
position: absolute;
top: 85%;
width: 100%;
}
.preload header .title .title-info p {
text-align: center;
}
.preload header .title .title-info button {
margin: 0 auto;
}
.preload header .title .title-image {
left: 50%;
transform: translate(-50%, 0);
background-position: center;
}
.preload header ul {
opacity: 0;
top: -999rem;
}
.preload .app-title p {
opacity: 0;
}
.preload *:not(button) {
transition: all 0s !important;
}
header {
--app-selector-height: 4.375rem;
height: var(--app-selector-height);
background: linear-gradient(to right, var(--light-theme), var(--dark-theme));
position: relative;
transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
box-shadow: inset 0 -3px 1px -2px rgba(0, 0, 0, 0.12),
inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
}
</style>
29 changes: 24 additions & 5 deletions src/components/MainTitle.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,6 @@
></div>
<div class="title-info">
<p>{{ ::aic.lang.version }}</p>
<p ng-hide="true">
This text should not be visible (unless you have javascript disabled) -
if you can see this text, please contact the author.
</p>
<p ng-show="aic.onMobile">{{ ::aic.lang.mobileWarning }}</p>
<button id="boot-up" class="option speech" ng-click="aic.bootUp()">
{{ ::aic.lang.bootUp }}
Expand All @@ -26,4 +22,27 @@ export default defineComponent({
})
</script>

<style lang="scss"></style>
<style lang="scss">
.title {
display: block;
height: var(--app-selector-height);
margin: 0 5%;
position: relative;
transition: all 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
top: 0;
transform: translate(0, 0);
.title-image {
height: 100%;
transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 1.2s;
position: absolute;
width: 100%;
top: 0;
left: 0;
transform: translate(0, 0);
background-size: contain;
background-repeat: no-repeat;
background-position: center left;
}
}
</style>
Loading

0 comments on commit a25ba42

Please sign in to comment.