Archives/tobspr_shapez.io
1
0
Fork 0
mirror of https://github.com/tobspr/shapez.io.git synced 2026-03-02 03:39:21 +00:00
Code Issues Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Tobias Springer
2020-05-09 16:45:23 +02:00
commit 93c6ea683d
304 changed files with 56031 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/css/adinplay.scss Normal file
View File

@@ -0,0 +1,107 @@
#aip_gdpr {
&,
* {
text-shadow: none !important;
pointer-events: all;
color: #111 !important;
}
#aip_gdpr_banner {
padding: 5px 0;
}
#aip_gdpr_message {
padding: 0px 15px;
}
}
#adinplayVideoContainer {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 20000;
background: rgba($mainBgColor, 0.9);
pointer-events: all;
cursor: default;
display: flex;
justify-content: center;
align-items: center;
*,
& {
pointer-events: all;
}
&:not(.visible) {
display: none;
}
&.waitingForFinish {
.videoInner {
@include BorderRadius(4px);
overflow: hidden;
&::after {
content: " ";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba($mainBgColor, 0.9) uiResource("loading.svg") center center / #{D(60px)} no-repeat;
@include InlineAnimation(0.2s ease-in-out) {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
}
}
}
@include InlineAnimation(1s ease-in-out) {
0% {
background: rgba($mainBgColor, 0.1);
}
100% {
background: rgba($mainBgColor, 0.9);
}
}
.adInner {
@include BoxShadow3D(lighten($mainBgColor, 15));
@include BorderRadius(4px);
@include S(padding, 15px);
// max-width: 960px;
display: block !important;
.topbar {
display: grid;
grid-template-columns: 1fr auto;
@include S(margin-bottom, 15px);
@include S(grid-column-gap, 10px);
.desc {
@include TextShadow3D(#fff);
@include PlainText;
}
button.getOnSteam {
@include Text;
}
}
.videoInner {
// width: 960px;
// height: 570px;
// min-width: 960px;
// min-height: 570px;
background: darken($mainBgColor, 1);
display: block !important;
}
}
}

13
src/css/animations.scss Normal file
View File

@@ -0,0 +1,13 @@
@include MakeAnimationWrappedEvenOdd(0.2s ease-in-out, "changeAnim") {
0% {
transform: scale(1, 1);
}
50% {
transform: scale(1.03, 1.03);
}
100% {
transform: scale(1, 1);
}
}

67
src/css/application_error.scss Normal file
View File

@@ -0,0 +1,67 @@
#applicationError {
z-index: 9999;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: $mainBgColor;
color: #333;
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
justify-content: center;
@include S(padding, 30px);
@include Text;
text-align: center;
h1 {
@include TextShadow3D(#ff0b40);
@include S(margin-top, 20px);
@include S(margin-bottom, 30px);
@include SuperHeading;
@include S(font-size, 35px);
}
.desc {
// color: rgba(#fff, 0.6);
color: $themeColor;
text-align: left;
@include PlainText;
font-weight: bold;
a {
cursor: pointer;
pointer-events: all;
font-weight: bold;
display: block;
@include TextShadow3D(#ff0b40);
@include S(margin-top, 10px);
}
display: block;
@include S(max-width, 350px);
width: 100%;
}
.details {
font-size: 11px;
line-height: 15px;
color: #888;
font-family: monospace;
text-align: left;
@include S(padding, 6px);
@include BorderRadius(2px);
@include BoxShadow3D(#eee);
position: absolute;
@include S(bottom, 25px);
left: 50%;
transform: translateX(-50%);
max-width: calc(100vw - 40px);
box-sizing: border-box;
@include BreakText;
min-width: 300px;
}
}

662
src/css/common.scss Normal file
View File

@@ -0,0 +1,662 @@
// Common classes and style
* {
margin: 0;
padding: 0;
touch-action: pan-x pan-y !important;
pointer-events: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
html,
body {
overscroll-behavior: contain;
overflow: hidden;
font-family: $mainFont;
font-synthesis: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
html {
position: fixed;
// scroll-behavior: smooth;
background: $mainBgColor;
// Disable zooming and thus
-ms-touch-action: pan-x, pan-y;
touch-action: pan-x, pan-y;
-ms-content-zooming: none;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #dee1ea;
}
body {
color: #555;
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
background: inherit !important;
text-transform: none;
white-space: normal;
word-break: normal;
word-spacing: normal;
word-wrap: break-word;
font-style: normal;
line-break: auto;
font-stretch: 100%;
text-rendering: optimizeLegibility;
text-decoration: none;
text-size-adjust: 100%;
letter-spacing: normal;
scrollbar-width: 6px;
-webkit-font-smoothing: antialiased;
// -webkit-overflow-scrolling: touch; /* stop scrolling immediately */
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
// Internet explorer
scrollbar-face-color: #888;
scrollbar-track-color: rgba(255, 255, 255, 0.1);
overflow: hidden;
@include Text;
// For recording the bg video
// filter: blur(5px);
// &::after {
// position: fixed;
// top: 0;
// left: 0;
// right: 0;
// bottom: 0;
// z-index: 9999;
// content: " ";
// background: rgba($ingameHudBg, 0.5);
// }
}
// Dirty hack
* {
@include TextShadow3DImpl;
}
img {
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
}
i {
font-style: normal;
}
b,
strong {
font-weight: normal;
}
u,
a {
text-decoration: none;
}
input,
textarea,
select {
font-size: inherit;
font-weight: inherit;
font-family: inherit;
line-height: inherit;
}
button {
background: transparent;
border: 0;
pointer-events: all;
cursor: pointer;
position: relative;
@include TextShadow3D;
&.prefab_BuyButtonWithResources {
display: flex;
box-sizing: border-box;
@include S(padding, 6px, 4px);
// letter-spacing: 0;
background-color: color($cyan, 400);
flex-direction: row;
justify-content: center;
align-items: center;
@include S(width, 85px);
&.tooExpensive {
color: $colorRedBright;
background-color: #555;
cursor: default;
}
.cost_entry {
display: flex;
flex-grow: 1;
justify-content: center;
align-items: center;
}
b {
display: flex;
flex-grow: 1;
justify-content: center;
align-items: center;
}
&.tooExpensive {
cursor: default !important;
background-color: #565859 !important;
b {
color: $colorRedBright !important;
}
.cost_entry {
opacity: 0.6;
}
}
}
}
.styledButton {
background: $themeColor;
text-transform: uppercase;
box-sizing: content-box;
@include S(padding, 3px, 10px);
@include IncreasedClickArea(10px);
@include BorderRadius(4px);
@include TextShadow3D(#fff, $borderColor: #28292a);
@include ButtonText;
@include Button3D($accentColorBright);
border: #{D(1px)} solid rgba(0, 10, 20, 0.2);
@include S(border-bottom-width, 2px);
color: $accentColorDark;
letter-spacing: 0.05em !important;
box-shadow: 0 #{D(1px)} #{D(2px)} 0 rgba(0, 10, 20, 0.2);
.keybinding {
@include S(bottom, -2.5px);
@include S(right, -2px);
}
}
::selection {
background: $colorGreenBright; /* WebKit/Blink Browsers */
}
::-moz-selection {
background: $colorGreenBright; /* Gecko Browsers */
}
input[type="text"],
input[type="email"] {
@include S(padding, 11px, 12px);
@include S(margin, 10px, 0);
border: 0;
cursor: text;
display: block;
text-align: left;
box-sizing: border-box;
background: lighten($mainBgColor, 8);
color: #eee;
text-align: left;
user-select: text !important;
pointer-events: all !important;
@include Text;
@include IncreasedClickArea(15px);
@include BorderRadius(4px);
&::placeholder {
color: #fff;
opacity: 0.4;
}
transition: background-color 0.4s ease-in-out !important;
@include TextShadow3D(#fff);
@include BoxShadow3D(lighten($mainBgColor, 30));
&:focus {
@include BoxShadow3D(lighten($mainBgColor, 35));
}
&.errored {
@include BoxShadow3D(mix(lighten($mainBgColor, 30), #f77, 25%));
&:focus {
@include BoxShadow3D(mix(lighten($mainBgColor, 50), #f77, 25%));
}
}
&.input-token {
@include SuperHeading;
text-align: center;
@include S(letter-spacing, 30px);
@include S(padding-left, 30px);
}
}
a {
color: $themeColor;
}
button,
input,
select,
textarea,
a {
&:focus {
outline: none;
}
font-family: inherit;
font-weight: inherit;
pointer-events: all;
}
a {
text-decoration: none;
cursor: pointer;
pointer-events: all;
}
i {
font-style: normal;
}
input {
user-select: text;
-moz-user-select: text;
pointer-events: all;
cursor: text;
border-radius: 0;
}
canvas {
pointer-events: all;
image-rendering: auto;
// &.smoothed {
// }
// &.unsmoothed {
// }
letter-spacing: 0 !important;
transform: translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.fontPreload {
position: absolute;
top: -100px;
left: -100px;
}
// Scrollbar
::-webkit-scrollbar {
@include S(width, 6px);
@include S(height, 6px);
}
::-webkit-scrollbar-track {
background: rgba(#000, 0.05);
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background: #cdd0d4;
}
::-webkit-scrollbar-thumb:hover {
background: #d8dce0;
}
#uiTestPlaybackCursor {
position: fixed;
top: 100px;
left: 100px;
z-index: 9999;
border-radius: 50%;
background: rgba(255, 255, 0, 0.4);
width: 24px;
height: 24px;
border: 3px solid rgba(0, 0, 0, 0.5);
margin-top: -12px;
margin-left: -12px;
box-sizing: border-box;
}
.pressed {
transform: scale(0.95) !important;
animation: none !important;
}
.pressedSmallElement {
transform: scale(0.88) !important;
animation: none !important;
}
.spritesheetImage {
display: block;
position: absolute;
background-repeat: no-repeat;
z-index: 1;
}
.inlineTextIconSprite {
position: relative;
vertical-align: middle;
display: inline-block;
}
.badged {
color: color($purple, 300);
}
.prefab_LoadingTextWithAnim,
.prefab_LoadingTextWithAnimDelayed {
display: inline-flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
@include Text;
@include TextShadow3D;
opacity: 1;
z-index: 20;
color: #393747;
&::after {
content: " ";
background: uiResource("loading.svg") center center / contain no-repeat;
@include S(width, 15px);
@include S(height, 15px);
@include S(margin-top, 1px);
@include S(margin-left, 5px);
display: inline-block;
vertical-align: middle;
}
}
.prefab_LoadingTextWithAnimDelayed {
@include InlineAnimation(0.6s ease-in-out) {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
}
.prefab_FeatureComingSoon {
position: relative;
&::after {
@include S(top, -5px);
@include S(left, -5px);
@include S(right, -5px);
@include S(bottom, -5px);
content: "Coming soon!";
z-index: 10000;
background: rgba(lighten($mainBgColor, 0), 0.4);
@include BorderRadius(4px);
position: absolute;
display: flex;
justify-content: center;
align-items: center;
pointer-events: all;
@include PlainText;
text-transform: uppercase;
}
opacity: 0.6;
> * {
opacity: 0.5 !important;
}
}
.prefab_InfoIcon {
@include S(width, 25px);
@include S(height, 25px);
// background: uiResource("icons_small/info.png") center center / contain no-repeat;
z-index: 100;
opacity: 0.8;
cursor: pointer;
pointer-events: all;
display: inline-block;
position: relative;
@include IncreasedClickArea(10px);
}
.gameState.prefab_LoadingState {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.loadingImage {
background: uiResource("loading.svg") center center / #{D(60px)} no-repeat;
width: 100%;
display: flex;
flex-grow: 1;
}
.loadingStatus {
position: absolute;
@include S(left, 20px);
@include S(right, 20px);
@include S(bottom, 30px);
@include Text;
@include TextShadow3D(#aaa);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
> .bar {
display: none;
@include S(margin-top, 15px);
width: 80vw;
@include BoxShadow3D(lighten($mainBgColor, 10), $size: 1px);
position: relative;
@include TextShadow3D(#fff);
height: 2px;
.inner {
position: absolute !important;
top: 0;
left: 0;
bottom: 0;
z-index: 1;
@include BoxShadow3D($themeColor, $size: 1px);
@include BorderRadius(4px);
transform-origin: 0% 50%;
@include InlineAnimation(1.3s ease-in-out infinite) {
0% {
background-color: darken($themeColor, 5);
transform: none;
}
50% {
background-color: lighten($themeColor, 10);
transform: scale(1.01);
}
100% {
background-color: darken($themeColor, 5);
transform: none;
}
}
}
.status {
display: none;
position: relative;
z-index: 2;
display: inline-flex;
@include S(padding, 5px);
@include PlainText;
}
}
}
}
.grow {
flex-grow: 1;
}
.checkbox {
$bgColor: darken($mainBgColor, 0);
background-color: $bgColor;
@include S(width, 45px);
@include S(height, 20px);
display: flex;
@include S(padding, 3px);
box-sizing: content-box;
cursor: pointer;
pointer-events: all;
transition: opacity 0.2s ease-in-out, background-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out !important;
position: relative;
@include BorderRadius(20px);
@include IncreasedClickArea(10px);
@include BoxShadow3D($bgColor, $size: 2px);
&.loading {
opacity: 0.2;
}
.knob {
@include S(width, 20px);
@include S(height, 20px);
display: inline-block;
transition: margin-left 0.4s ease-in-out !important;
background: #fff;
position: relative;
@include BorderRadius(20px);
@include BoxShadow3D(#fff, $size: 1px);
}
&.checked {
background-color: $themeColor;
@include BoxShadow3D($themeColor, $size: 2px);
.knob {
@include S(margin-left, 25px);
}
}
}
.keybinding {
background: #fff;
text-transform: uppercase;
@include S(padding, 2px, 1px, 2px);
@include PlainText;
@include BorderRadius(2px);
&,
> span {
@include S(font-size, 9px);
@include S(line-height, 11px);
font-weight: bold !important;
text-shadow: none !important;
// font-family: Arial, sans-serif !important;
}
font-weight: bold;
color: $accentColorDark;
text-align: center;
justify-content: center;
align-items: center;
@include S(min-width, 12px);
display: inline-flex;
position: absolute;
@include S(bottom, 0px);
@include S(right, 0px);
z-index: 999;
box-sizing: border-box;
@include S(height, 12px);
overflow: hidden;
border: #{D(1px)} solid $accentColorDark;
.keybinding_space {
@include S(font-size, 17px);
@include S(line-height, 11px);
@include S(margin-top, -12px);
}
}
.xpaystation-widget-lightbox {
z-index: 19999;
.xpaystation-widget-lightbox-overlay {
background: rgba($mainBgColor, 0.94);
}
&,
iframe {
pointer-events: all;
user-select: all;
}
}
iframe {
pointer-events: all;
user-select: all;
}
// Steam overlay fiy
#steamOverlayCanvasFix {
position: fixed;
top: 0px;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
opacity: 0.01;
pointer-events: none;
z-index: -1;
}
.sentry-error-embed-wrapper {
z-index: 10000;
background: rgba(0, 0, 0, 0.9);
* {
text-shadow: none !important;
pointer-events: all;
}
}
.cpmsrendertarget {
&,
* {
pointer-events: all;
}
background: rgba($mainBgColor, 0.94) !important;
.cpmsvideoclosebanner {
font-family: GameFont !important;
font-size: 16px !important;
border-radius: 2px !important;
background: $themeColor !important;
@include BoxShadow3D(darken($mainBgColor, 12));
color: #eee !important;
&:active {
@include BoxShadow3D(darken($mainBgColor, 12), $size: 1px);
transform: translateY(2px);
}
}
}

43
src/css/dynamic_ui.scss Normal file
View File

@@ -0,0 +1,43 @@
// Removes the unit (px, %, etc) from a value
@function strip-unit($number) {
@if type-of($number) == "number" and not unitless($number) {
@return $number / ($number * 0 + 1);
}
@return $number;
}
// Helper method to scale a value, for use in calc() etc
@function D($v) {
$baseValue: strip-unit($v) * 1px;
@return calc(#{$baseValue} * var(--ui-scale));
}
// Helper method to scale the font size
@mixin ScaleFont($fontSize, $lineHeight) {
font-size: D($fontSize * $mainFontScale);
line-height: D($lineHeight * $mainFontScale);
}
// Helper method to scale a property value
@mixin S($propName, $v1, $v2: "", $v3: "", $v4: "", $important: false) {
$impSuffix: "";
@if $important == true {
$impSuffix: "!important";
}
$v1: D($v1);
@if $v2 != "" {
$v2: D($v2);
}
@if $v3 != "" {
$v3: D($v3);
}
@if $v4 != "" {
$v4: D($v4);
}
#{$propName}: #{$v1} #{$v2} #{$v3} #{$v4} #{$impSuffix};
}

31
src/css/game_state.scss Normal file
View File

@@ -0,0 +1,31 @@
$gameStateTransition: 0.2s ease-out;
@mixin StateAnim($properties...) {
transition: all $gameStateTransition;
transition-property: $properties;
}
.gameState {
display: block;
// background: $mainBgColor;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
overflow: hidden !important;
@include Text;
@include StateAnim(opacity, transform, filter);
opacity: 0;
// transform: scaleX(0.99) skewX(1deg) translate(1%, 0.5%);
&.arrived {
opacity: 1;
filter: none !important;
transform: none;
}
}

22
src/css/icons.scss Normal file
View File

@@ -0,0 +1,22 @@
// $icons: ;
// @each $icon in $icons {
// [data-icon="#{$icon}"] {
// background-image: uiResource("res/ui/#{$icon}");
// }
// }
$buildings: belt, cutter, miner, mixer, painter, rotater, splitter, stacker, trash, underground_belt;
@each $building in $buildings {
[data-icon="building_tutorials/#{$building}.png"] {
background-image: uiResource("res/ui/building_tutorials/#{$building}.png") !important;
}
}
$upgrades: belt, miner, painting, processors;
@each $upgrade in $upgrades {
[data-icon="upgrades/#{$upgrade}.png"] {
background-image: uiResource("res/ui/upgrades/#{$upgrade}.png") !important;
}
}

8
src/css/ingame_hud/beta_overlay.scss Normal file
View File

@@ -0,0 +1,8 @@
#ingame_HUD_BetaOverlay {
position: fixed;
@include S(top, 10px);
@include S(right, 15px);
color: $colorRedBright;
@include Heading;
text-transform: uppercase;
}

8
src/css/ingame_hud/blur_overlay.scss Normal file
View File

@@ -0,0 +1,8 @@
body.ingameDialogOpen {
#ingame_Canvas,
#ingame_HUD_GameMenu,
#ingame_HUD_KeybindingOverlay,
#ingame_HUD_buildings_toolbar {
filter: blur(5px);
}
}

35
src/css/ingame_hud/building_placer.scss Normal file
View File

@@ -0,0 +1,35 @@
#ingame_HUD_building_placer {
position: fixed;
@include S(bottom, 60px);
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
@include S(padding, 6px);
justify-content: center;
align-items: center;
background-color: $ingameHudBg;
@include S(border-radius, 4px);
background: #333;
@include S(width, 300px);
.buildingLabel {
@include PlainText;
color: #fff;
text-transform: uppercase;
@include S(margin-bottom, 2px);
}
.instructions,
.description {
text-align: center;
color: mix($accentColorDark, $accentColorBright, 50%);
@include SuperSmallText;
}
@include StyleBelowWidth(700px) {
display: none !important;
}
}

181
src/css/ingame_hud/buildings_toolbar.scss Normal file
View File

@@ -0,0 +1,181 @@
#ingame_HUD_buildings_toolbar {
position: fixed;
@include S(bottom, 0px);
left: 50%;
transform: translateX(-50%);
$toolbarBg: rgba($accentColorBright, 0.9);
display: flex;
flex-direction: column;
background-color: $toolbarBg;
// border: $ingameHudBorder;
border-bottom-width: 0;
@include S(border-radius, 4px, 4px, 0, 0);
// box-shadow: 0 0 0 #{D(2px)} rgba(darken($toolbarBg, 20), 0.5);
transition: transform 0.12s ease-in-out;
&:not(.visible) {
transform: translateX(-50%) translateY(#{D(100px)});
}
.buildings {
display: grid;
grid-auto-flow: column;
@include S(padding, 0, 5px);
.building {
color: $accentColorDark;
display: flex;
flex-direction: column;
position: relative;
align-items: center;
justify-content: center;
@include S(padding, 5px);
@include S(padding-bottom, 7px);
$buildingIconSize: 32px;
&:not(.unlocked) {
@include S(width, 30px);
.tooltip {
display: none !important;
}
.keybinding,
.iconWrap {
opacity: 0.01;
}
&::before {
opacity: 0.5;
content: " ";
background: uiResource("locked_building.png") center center / #{D(20px)} #{D(20px)}
no-repeat;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 4;
}
}
// &:first-child .tooltip {
// display: flex;
// }
pointer-events: all;
transition: background-color 0.1s ease-in-out;
&.unlocked:hover {
background: rgba($accentColorDark, 0.1);
cursor: pointer;
}
.iconWrap {
position: relative;
@include S(width, $buildingIconSize);
@include S(height, $buildingIconSize);
@include S(margin-top, 3px);
@include S(margin-bottom, 6px);
}
.label {
@include SuperSmallText;
display: none;
font-weight: bold;
text-transform: uppercase;
}
.keybinding {
// position: relative;
right: 50%;
transform: translateX(50%);
background: transparent;
border: 0;
@include S(bottom, 2pxpx);
}
&[data-tilewidth="2"] {
.iconWrap {
@include S(width, 2 * $buildingIconSize);
}
}
&:last-child {
border: none;
}
.tooltip {
position: absolute;
pointer-events: none;
background: #333;
@include S(padding, 7px);
bottom: calc(100% + #{D(10px)});
left: 50%;
transform: translateX(-50%);
box-sizing: content-box;
@include SuperSmallText;
@include S(width, 200px);
@include S(border-radius, 4px);
box-shadow: #{D(1px)} #{D(1px)} 0 0 rgba(0, 10, 25, 0.2);
display: none;
z-index: 9999;
flex-direction: column;
.title {
color: #fff;
@include PlainText;
text-transform: uppercase;
margin-bottom: 5px;
}
.desc {
color: #aaa;
@include SuperSmallText;
margin-bottom: 10px;
strong {
color: #fff;
}
}
.tutorialImage {
display: inline-block;
@include S(width, 200px);
@include S(height, 200px);
@include S(border-radius, 4px);
background-size: contain;
background-repeat: no-repeat;
}
&::after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top-color: #333;
@include S(border-width, 5px);
transform: translateX(-50%);
}
}
&:hover .tooltip {
display: flex;
@include InlineAnimation(0.5s ease-in-out) {
90% {
opacity: 0;
}
0% {
transform: translate(-50%, 5%) scale(0.9);
opacity: 0;
}
}
}
}
}
}

63
src/css/ingame_hud/dialogs.scss Normal file
View File

@@ -0,0 +1,63 @@
.ingameDialog {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: all;
background: $modalDialogBg;
display: flex;
align-items: center;
justify-content: center;
&.visible {
.dialogInner {
opacity: 1;
}
}
.dialogInner {
transition: opacity 0.2s ease-in-out;
opacity: 0;
}
> .dialogInner {
background: #fff;
@include S(min-width, 500px);
max-width: calc(100vw - #{D(50px)});
max-height: calc(100vh - #{D(50px)});
@include S(border-radius, 4px);
display: flex;
flex-direction: column;
@include S(padding, 15px);
pointer-events: all;
> .title {
@include Heading;
margin: 0;
text-transform: uppercase;
display: grid;
grid-template-columns: 1fr auto;
@include S(margin-bottom, 10px);
> .closeButton {
opacity: 0.7;
@include S(width, 20px);
@include S(height, 20px);
background: uiResource("icons/close.png") center center / 60% no-repeat;
cursor: pointer;
pointer-events: all;
transition: opacity 0.2s ease-in-out;
&:hover {
opacity: 0.4;
}
}
}
> .content {
overflow-y: auto;
pointer-events: all;
}
}
}

59
src/css/ingame_hud/game_menu.scss Normal file
View File

@@ -0,0 +1,59 @@
#ingame_HUD_GameMenu {
position: absolute;
top: 0;
left: 50%;
display: grid;
transform: translateX(-50%);
@include S(grid-gap, 3px);
grid-auto-flow: column;
button {
background: $colorGreenBright;
@include PlainText;
color: #fff;
border-color: rgba(0, 0, 0, 0.1);
@include S(padding, 5px, 5px, 5px);
transition: all 0.12s ease-in-out;
transition-property: opacity, transform;
&:hover {
opacity: 0.9;
transform: translateY(3px);
}
@include IncreasedClickArea(10px);
@include ButtonText;
border: #{D(2px)} solid rgba(0, 10, 20, 0.2);
@include S(border-width, 2px);
border-radius: 0 0 #{D(4px)} #{D(4px)};
@include S(border-top-width, 10px);
@include S(padding-left, 30px);
@include S(margin-top, -5px);
@include S(letter-spacing, 1px, $important: true);
background: center #{D(10px)} / #{D(20px)} no-repeat;
@include S(min-height, 47px);
&[data-button-id="shop"] {
background-color: rgb(141, 70, 223);
background-image: uiResource("icons/shop.png");
}
&[data-button-id="stats"] {
background-color: rgb(53, 235, 113);
background-image: uiResource("icons/statistics.png");
}
.keybinding {
border: 0;
color: #fff;
border-top-left-radius: 0;
border-top-right-radius: 0;
bottom: unset;
// background: rgba(0, 10, 20, 0.5);
background: transparent;
@include S(top, -5px);
right: unset;
left: 50%;
transform: translateX(-50%);
}
}
}

78
src/css/ingame_hud/keybindings_overlay.scss Normal file
View File

@@ -0,0 +1,78 @@
#ingame_HUD_KeybindingOverlay {
position: absolute;
@include S(top, 10px);
@include S(left, 10px);
display: flex;
flex-direction: column;
align-items: flex-start;
> .binding {
display: inline-grid;
@include PlainText;
align-items: center;
@include S(margin-bottom, 3px);
grid-auto-flow: column;
@include S(grid-gap, 2px);
i {
display: inline-block;
@include S(height, 10px);
width: 1px;
@include S(margin, 0, 3px);
background-color: #ccc;
transform: rotate(10deg);
// @include S(margin, 0, 3px);
}
code {
position: relative;
top: unset;
left: unset;
margin: 0;
&.rightMouse {
background: #fff uiResource("icons/mouse_right.png") center center / 85% no-repeat;
}
&.leftMouse {
background: #fff uiResource("icons/mouse_left.png") center center / 85% no-repeat;
}
}
label {
color: $accentColorDark;
@include SuperSmallText;
text-transform: uppercase;
@include S(margin-left, 5px);
}
}
&:not(.placementActive) .binding.placementOnly {
display: none;
}
&.placementActive .binding.noPlacementOnly {
display: none;
}
.binding.placementOnly,
&:not(.placementActive) .binding.noPlacementOnly {
transform-origin: 0% 50%;
@include InlineAnimation(0.3s ease-in-out) {
0% {
color: $colorRedBright;
transform: scale(1.2);
}
}
}
.shift .keybinding {
transition: all 0.1s ease-in-out;
transition-property: background-color, color, border-color;
background: $colorRedBright;
border-color: $colorRedBright;
color: #fff;
}
&.shiftDown .shift .keybinding {
border-color: darken($colorRedBright, 40);
}
}

180
src/css/ingame_hud/shop.scss Normal file
View File

@@ -0,0 +1,180 @@
#ingame_HUD_Shop {
.content {
@include S(padding-right, 10px);
display: flex;
flex-direction: column;
.upgrade {
display: grid;
grid-template-columns: auto 1fr auto;
background: #eee;
@include S(border-radius, 3px);
@include S(margin-bottom, 4px);
@include S(padding, 5px, 10px);
@include S(grid-row-gap, 5px);
@include S(height, 95px);
grid-template-rows: #{D(20px)} auto;
&:last-child {
margin-bottom: 0;
}
.title {
grid-column: 2 / 3;
grid-row: 1 / 2;
@include Heading;
display: flex;
align-items: center;
.tier {
@include S(margin-left, 5px);
background: $colorGreenBright;
@include S(border-radius, 4px);
text-transform: uppercase;
@include PlainText;
color: #fff;
font-weight: bold;
@include S(margin-top, 1px);
@include S(padding, 0px, 5px);
&[data-tier="0"] {
background-color: rgb(73, 186, 190);
}
&[data-tier="1"] {
background-color: rgb(73, 94, 190);
}
&[data-tier="2"] {
background-color: rgb(186, 73, 190);
}
&[data-tier="3"] {
background-color: rgb(96, 190, 73);
}
&[data-tier="4"] {
background-color: rgb(190, 91, 73);
}
&[data-tier="5"] {
background-color: rgb(219, 184, 29);
}
&[data-tier="6"] {
background-color: rgb(190, 73, 73);
}
}
}
.icon {
@include S(width, 40px);
@include S(height, 40px);
background: center center / contain no-repeat;
align-self: center;
justify-self: center;
grid-column: 1 / 2;
grid-row: 1 / 4;
@include S(margin-right, 20px);
opacity: 0.2;
}
.description {
grid-column: 3 / 4;
grid-row: 1 / 2;
@include PlainText;
color: #aaa;
align-self: start;
justify-self: end;
}
.requirements {
grid-column: 2 / 3;
grid-row: 3 / 4;
display: grid;
grid-auto-flow: column;
@include S(grid-gap, 15px);
justify-content: start;
.requirement {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
canvas {
@include S(width, 40px);
@include S(height, 40px);
}
.amount {
@include S(margin-top, 4px);
z-index: 10;
@include SuperSmallText;
letter-spacing: 0;
background: #e2e4e6;
@include S(line-height, 13px);
@include S(border-radius, 2px);
@include S(padding, 0, 2px, 3px);
position: relative;
text-align: center;
@include S(min-width, 50px);
overflow: hidden;
.progressBar {
bottom: 0;
left: 0;
right: 0;
top: 0;
@include S(border-radius, 2px);
position: absolute;
display: inline-block;
z-index: -1;
transition: all 0.2s ease-in-out;
transition-property: width, background-color;
background: #bdbfca;
&.complete {
background-color: $colorGreenBright;
}
}
}
}
}
button.buy {
grid-column: 3 / 4;
grid-row: 3 / 4;
align-self: end;
justify-self: end;
// @include S(padding, 4px, 5px);
// @include PlainText;
background-color: $colorGreenBright;
color: #fff;
transition: all 0.2s ease-in-out;
transition-property: background-color, opacity;
&:not(.buyable) {
background-color: #aaa;
cursor: default;
pointer-events: none;
opacity: 0.3;
}
}
&.maxLevel {
button.buy {
opacity: 0 !important;
}
.requirements {
display: none;
}
.description {
// grid-column: 2 / 4;
// grid-row: 2 / 3;
align-self: end;
justify-self: center;
color: $colorGreenBright;
text-transform: uppercase;
@include S(margin-top, 20px);
}
}
}
}
}

134
src/css/ingame_hud/unlock_notification.scss Normal file
View File

@@ -0,0 +1,134 @@
#ingame_HUD_UnlockNotification {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(#333538, 0.95) uiResource("dialog_bg_pattern.png") top left / #{D(10px)} repeat;
display: flex;
justify-content: center;
align-items: flex-start;
pointer-events: all;
@include InlineAnimation(0.1s ease-in-out) {
0% {
opacity: 0;
}
}
.dialog {
background: rgba(#333539, 0.5);
@include S(padding, 30px);
@include InlineAnimation(0.5s ease-in-out) {
0% {
opacity: 0;
}
}
color: #fff;
text-align: center;
.title,
.subTitle {
@include SuperHeading;
text-transform: uppercase;
@include S(font-size, 50px);
@include InlineAnimation(0.5s ease-in-out) {
0% {
transform: translateY(-50vh);
}
50% {
transform: translateY(5vh);
}
75% {
transform: translateY(-2vh);
}
}
}
.subTitle {
@include Heading;
background: $colorGreenBright;
display: inline-block;
@include S(padding, 1px, 6px);
@include S(margin, 20px, 0, 20px);
@include S(border-radius, 4px);
@include InlineAnimation(0.5s ease-in-out) {
0% {
transform: translateY(-60vh);
}
50% {
transform: translateY(6vh);
}
75% {
transform: translateY(-3vh);
}
}
}
.contents {
@include S(width, 400px);
@include InlineAnimation(0.5s ease-in-out) {
0% {
transform: translateX(-100vw);
}
50% {
transform: translateX(5vw);
}
75% {
transform: translateX(-2vw);
}
}
display: grid;
grid-template-columns: auto auto;
align-items: center;
justify-content: center;
@include S(grid-gap, 10px);
.reward {
grid-column: 1 / 3;
@include InlineAnimation(0.5s ease-in-out) {
0% {
transform: translateX(200vw);
}
50% {
transform: translateX(-10vw);
}
75% {
transform: translateX(4vw);
}
}
}
.buildingExplanation {
@include S(width, 200px);
@include S(height, 200px);
display: inline-block;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
@include S(border-radius, 4px);
box-shadow: #{D(2px)} #{D(3px)} 0 0 rgba(0, 0, 0, 0.15);
}
}
button.close {
border: 0;
@include InlineAnimation(0.5s ease-in-out) {
0% {
transform: translateY(50vh);
}
50% {
transform: translateY(-5vh);
}
75% {
transform: translateY(2vh);
}
}
@include S(margin-top, 30px);
}
}
}

50
src/css/main.scss Normal file
View File

@@ -0,0 +1,50 @@
// Control here whether to inline all resources or instead load them
@function uiResource($pth) {
@if (str-index($string: $pth, $substring: ".noinline")) {
@return resolve($pth);
}
@return inline($pth);
}
@import "icons";
@import "trigonometry";
@import "material_colors";
@import "dynamic_ui";
@import "variables";
@import "mixins";
@import "common";
@import "animations";
@import "game_state";
@import "application_error";
@import "textual_game_state";
@import "adinplay";
@import "states/preload";
@import "states/main_menu";
@import "states/ingame";
@import "ingame_hud/buildings_toolbar";
@import "ingame_hud/building_placer";
@import "ingame_hud/beta_overlay";
@import "ingame_hud/keybindings_overlay";
@import "ingame_hud/unlock_notification";
@import "ingame_hud/shop";
@import "ingame_hud/game_menu";
@import "ingame_hud/blur_overlay";
@import "ingame_hud/dialogs";
// Z-Index
$elements: ingame_Canvas, ingame_HUD_building_placer_overlay, ingame_HUD_building_placer,
ingame_HUD_buildings_toolbar, ingame_HUD_GameMenu, ingame_HUD_KeybindingOverlay, ingame_HUD_Shop,
ingame_HUD_BetaOverlay, ingame_HUD_UnlockNotification;
$zindex: 100;
@each $elem in $elements {
##{$elem} {
z-index: $zindex;
}
$zindex: $zindex + 10;
}

319
src/css/material_colors.scss Normal file
View File

@@ -0,0 +1,319 @@
//
// color palette
// sass-lint:disable hex-length
@function color($color, $value: 500) {
@return map-get($color, $value);
}
$red: (
50: #ffebee,
100: #ffcdd2,
200: #ef9a9a,
300: #e57373,
400: #ef5350,
500: #f44336,
600: #e53935,
700: #d32f2f,
800: #c62828,
900: #b71c1c,
a100: #ff8a80,
a200: #ff5252,
a400: #ff1744,
a700: #d50000,
);
$pink: (
50: #fce4ec,
100: #f8bbd0,
200: #f48fb1,
300: #f06292,
400: #ec407a,
500: #e91e63,
600: #d81b60,
700: #c2185b,
800: #ad1457,
900: #880e4f,
a100: #ff80ab,
a200: #ff4081,
a400: #f50057,
a700: hsl(333, 84%, 42%),
);
$purple: (
50: #f3e5f5,
100: #e1bee7,
200: #ce93d8,
300: #ba68c8,
400: #ab47bc,
500: #9c27b0,
600: #8e24aa,
700: #7b1fa2,
800: #6a1b9a,
900: #4a148c,
a100: #ea80fc,
a200: #e040fb,
a400: #d500f9,
a700: #aa00ff,
);
$deep-purple: (
50: #ede7f6,
100: #d1c4e9,
200: #b39ddb,
300: #9575cd,
400: #7e57c2,
500: #673ab7,
600: #5e35b1,
700: #512da8,
800: #4527a0,
900: #311b92,
a100: #b388ff,
a200: #7c4dff,
a400: #651fff,
a700: #6200ea,
);
$indigo: (
50: #e8eaf6,
100: #c5cae9,
200: #9fa8da,
300: #7986cb,
400: #5c6bc0,
500: #3f51b5,
600: #3949ab,
700: #303f9f,
800: #283593,
900: #1a237e,
a100: #8c9eff,
a200: #536dfe,
a400: #3d5afe,
a700: #304ffe,
);
$blue: (
50: #e3f2fd,
100: #bbdefb,
200: #90caf9,
300: #64b5f6,
400: #42a5f5,
500: #2196f3,
600: #1e88e5,
700: #1976d2,
800: #1565c0,
900: #0d47a1,
a100: #82b1ff,
a200: #448aff,
a400: #2979ff,
a700: #2962ff,
);
$light-blue: (
50: #e1f5fe,
100: #b3e5fc,
200: #81d4fa,
300: #4fc3f7,
400: #29b6f6,
500: #03a9f4,
600: #039be5,
700: #0288d1,
800: #0277bd,
900: #01579b,
a100: #80d8ff,
a200: #40c4ff,
a400: #00b0ff,
a700: #0091ea,
);
$cyan: (
50: #e0f7fa,
100: #b2ebf2,
200: #80deea,
300: #4dd0e1,
400: #26c6da,
500: #00bcd4,
600: #00acc1,
700: #0097a7,
800: #00838f,
900: #006064,
a100: #84ffff,
a200: #18ffff,
a400: #00e5ff,
a700: #00b8d4,
);
$teal: (
50: #e0f2f1,
100: #b2dfdb,
200: #80cbc4,
300: #4db6ac,
400: #26a69a,
500: #009688,
600: #00897b,
700: #00796b,
800: #00695c,
900: #004d40,
a100: #a7ffeb,
a200: #64ffda,
a400: #1de9b6,
a700: #00bfa5,
);
$green: (
50: #e8f5e9,
100: #c8e6c9,
200: #a5d6a7,
300: #81c784,
400: #66bb6a,
500: #4caf50,
600: #43a047,
700: #388e3c,
800: #2e7d32,
900: #1b5e20,
a100: #b9f6ca,
a200: #69f0ae,
a400: #00e676,
a700: #00c853,
);
$light-green: (
50: #f1f8e9,
100: #dcedc8,
200: #c5e1a5,
300: #aed581,
400: #9ccc65,
500: #8bc34a,
600: #7cb342,
700: #689f38,
800: #558b2f,
900: #33691e,
a100: #ccff90,
a200: #b2ff59,
a400: #76ff03,
a700: #64dd17,
);
$lime: (
50: #f9fbe7,
100: #f0f4c3,
200: #e6ee9c,
300: #dce775,
400: #d4e157,
500: #cddc39,
600: #c0ca33,
700: #afb42b,
800: #9e9d24,
900: #827717,
a100: #f4ff81,
a200: #eeff41,
a400: #c6ff00,
a700: #aeea00,
);
$yellow: (
50: #fffde7,
100: #fff9c4,
200: #fff59d,
300: #fff176,
400: #ffee58,
500: #ffeb3b,
600: #fdd835,
700: #fbc02d,
800: #f9a825,
900: #f57f17,
a100: #ffff8d,
a200: #ffff00,
a400: #ffea00,
a700: #ffd600,
);
$amber: (
50: #fff8e1,
100: #ffecb3,
200: #ffe082,
300: #ffd54f,
400: #ffca28,
500: #ffc107,
600: #ffb300,
700: #ffa000,
800: #ff8f00,
900: #ff6f00,
a100: #ffe57f,
a200: #ffd740,
a400: #ffc400,
a700: #ffab00,
);
$orange: (
50: #fff3e0,
100: #ffe0b2,
200: #ffcc80,
300: #ffb74d,
400: #ffa726,
500: #ff9800,
600: #fb8c00,
700: #f57c00,
800: #ef6c00,
900: #e65100,
a100: #ffd180,
a200: #ffab40,
a400: #ff9100,
a700: #ff6d00,
);
$deep-orange: (
50: #fbe9e7,
100: #ffccbc,
200: #ffab91,
300: #ff8a65,
400: #ff7043,
500: #ff5722,
600: #f4511e,
700: #e64a19,
800: #d84315,
900: #bf360c,
a100: #ff9e80,
a200: #ff6e40,
a400: #ff3d00,
a700: #dd2c00,
);
$brown: (
50: #efebe9,
100: #d7ccc8,
200: #bcaaa4,
300: #a1887f,
400: #8d6e63,
500: #795548,
600: #6d4c41,
700: #5d4037,
800: #4e342e,
900: #3e2723,
);
$grey: (
50: #fafafa,
100: #f5f5f5,
200: #eeeeee,
300: #e0e0e0,
400: #bdbdbd,
500: #9e9e9e,
600: #757575,
700: #616161,
800: #424242,
900: #212121,
);
$blue-grey: (
50: #eceff1,
100: #cfd8dc,
200: #b0bec5,
300: #90a4ae,
400: #78909c,
500: #607d8b,
600: #546e7a,
700: #455a64,
800: #37474f,
900: #263238,
);

379
src/css/mixins.scss Normal file
View File

@@ -0,0 +1,379 @@
// ----------------------------------------
/* Forces an element to get rendered on its own layer, increasing
the performance when animated. Use only transform and opacity in animations! */
@mixin FastAnimation {
// will-change: transform, opacity;
transform: translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
// Helper which includes the translateZ webkit fix, use together with Fast animation
// $hardwareAcc: translateZ(0);
$hardwareAcc: null;
// ----------------------------------------
/** Increased click area for this element, helpful on mobile */
@mixin IncreasedClickArea($size) {
&::after {
content: "";
position: absolute;
top: #{D(-$size)};
bottom: #{D(-$size)};
left: #{D(-$size)};
right: #{D(-$size)};
// background: rgba(255, 0, 0, 0.3);
}
}
button,
.increasedClickArea {
position: relative;
@include IncreasedClickArea(15px);
}
// ----------------------------------------
/* Duplicates an animation and adds two classes .<classPrefix>Even and .<classPrefix>Odd which uses the
animation. This can be used to replay the animation by toggling between the classes, because
it is not possible to restart a css animation */
@mixin MakeAnimationWrappedEvenOdd($duration, $classPrefix: "anim", $childSelector: "") {
$animName: autogen_anim_#{unique-id()};
@at-root {
@keyframes #{$animName}_even {
@content;
}
@keyframes #{$animName}_odd {
@content;
}
}
&.#{$classPrefix}Even #{$childSelector} {
animation: #{$animName}_even $duration;
}
&.#{$classPrefix}Odd #{$childSelector} {
animation: #{$animName}_odd $duration;
}
}
// ----------------------------------------
/* Allows to use and define an animation without specifying its name */
@mixin InlineAnimation($duration) {
$animName: autogen_anim_#{unique-id()};
@at-root {
@keyframes #{$animName} {
@content;
}
}
animation: $animName $duration !important;
}
// ----------------------------------------
/* Animation prefab for a double bounce pop-in animation, useful for dialogs */
@mixin DoubleBounceAnim($duration: 0.5s ease-in-out, $amount: 0.2, $initialOpacity: 0) {
@include InlineAnimation($duration) {
0% {
opacity: $initialOpacity;
transform: scale(0) $hardwareAcc;
}
25% {
opacity: 0.5;
transform: scale(1 + $amount) $hardwareAcc;
}
50% {
opacity: 1;
transform: scale(1 - $amount * 0.5) $hardwareAcc;
}
75% {
transform: scale(1 + $amount * 0.25) $hardwareAcc;
}
100% {
transform: scale(1) $hardwareAcc;
}
}
opacity: 1;
}
// ----------------------------------------
/* Define a style which is only applied in horizontal mode */
@mixin HorizontalStyle {
@include AppendGlobal(".h") {
@content;
}
}
// ----------------------------------------
/* Define a style which is only applied in vertical mode */
@mixin VerticalStyle {
@include AppendGlobal(".v") {
@content;
}
}
// ----------------------------------------
/* Define a style which is only while the hardware keyboard is open */
@mixin AndroidHwKeyboardOpen {
@include AppendGlobal(".kb") {
@content;
}
}
// ----------------------------------------
/* Automatically transforms the game state if a hardware keyboard is open */
@mixin TransformToMatchKeyboard {
transition: transform 0.2s ease-in-out;
@include AndroidHwKeyboardOpen {
@include VerticalStyle {
transform: translateY(#{D(-125px)}) $hardwareAcc;
}
@include HorizontalStyle {
transform: translateY(#{D(-100px)}) $hardwareAcc;
}
}
}
// ----------------------------------------
/* Define a style which is only applied when the viewport is at least X pixels wide */
@mixin StyleAtWidth($minW) {
@media (min-width: #{$minW}) {
@content;
}
}
// ----------------------------------------
/* Define a style which is only applied when the viewport is at least X pixels height */
@mixin StyleAtHeight($minH) {
@media (min-height: #{$minH}) {
@content;
}
}
// ----------------------------------------
/* Define a style which is only applied when the viewport has at least the given dimensions */
@mixin StyleAtDims($minW, $minH) {
@media (min-height: #{$minH}) and (min-width: #{$minW}) {
@content;
}
}
// ----------------------------------------
/* Define a style which is only applied when the viewport has at maximum the given dimensions */
@mixin StyleBelowDims($maxW, $maxH) {
@media (max-height: #{$maxH}) and (max-width: #{$maxW}) {
@content;
}
}
// ----------------------------------------
/* Define a style which is only applied when the viewport has at maximum the given height */
@mixin StyleBelowHeight($maxH) {
@media (max-height: #{$maxH}) {
@content;
}
}
// ----------------------------------------
/* Define a style which is only applied when the viewport has at maximum the given width */
@mixin StyleBelowWidth($maxW) {
@media (max-width: #{$maxW}) {
@content;
}
}
// ----------------------------------------
// Dynamic graphics quality styles
@mixin BoxShadow3D($bgColor, $size: 3px, $pressEffect: true) {
background-color: $bgColor;
$borderSize: 1.5px;
$borderColor: rgb(18, 20, 24);
// box-shadow: 0 0 0 D($borderSize) $borderColor, 0 D($size) 0 0px rgba(mix(darken($bgColor, 9), #b0e2ff, 95%), 1),
// 0 D($size) 0 D($borderSize) $borderColor;
// box-shadow: 0 0 0 D($borderSize) $borderColor, 0 D($size) 0 D($borderSize) $borderColor,
// D(-$size * 1.5) D($size * 2) 0 D($borderSize) rgba(0, 0, 0, 0.1);
// transition: box-shadow 0.1s ease-in-out;
// @if $pressEffect {
// &.pressed {
// transform: none !important;
// $pSize: max(0, $size - 1.5px);
// transition: none !important;
// box-shadow: 0 0 0 D($borderSize) $borderColor, 0 D($pSize) 0 0px rgba(mix(darken($bgColor, 9), #b0e2ff, 95%), 1),
// 0 D($pSize) 0 D($borderSize) $borderColor;
// top: D($size - $pSize);
// }
// }
}
@mixin BorderRadius($v1: 2px, $v2: "", $v3: "", $v4: "") {
@include S(border-radius, $v1, $v2, $v3, $v4);
}
@mixin BoxShadow($x, $y, $blur, $offset, $color) {
box-shadow: D($x) D($y) D($blur) D($offset) $color;
}
@mixin DropShadow($yOffset: 2px, $blur: 2px, $amount: 0.2) {
@include BoxShadow(0, $yOffset, $blur, 0, rgba(#000, $amount));
}
@mixin TextShadow($yOffset: 2px, $blur: 1px, $amount: 0.6) {
text-shadow: 0 D($yOffset) D($blur) rgba(#000, $amount);
}
@mixin Button3D($bgColor, $pressEffect: true) {
@include BoxShadow3D($bgColor, 2px, $pressEffect);
}
@mixin ButtonDisabled3D($bgColor) {
@include BoxShadow3D($bgColor, 0.5px, false);
}
@mixin BoxShadowInset($bgColor, $size: 3px) {
background-color: $bgColor;
$borderSize: 1px;
$borderColor: rgb(15, 19, 24);
box-shadow: 0 0 0 D($borderSize) $borderColor, 0 D($size) 0 rgba(#fff, 0.07);
border-top: D($size) solid rgba(#000, 0.1);
//, 0 D($size) 0 0px rgba(mix(darken($bgColor, 9), #b0e2ff, 95%), 1),
// 0 D($size + $borderSize) 0 0 $borderColor;
}
@mixin TextShadow3D($color: rgb(222, 234, 238), $borderColor: #000) {
// @if $borderColor != #000 {
// @include TextShadow3DImpl($color: $color, $borderColor: $borderColor);
// }
color: $color;
}
@mixin TextShadow3DImpl(
$color: rgb(222, 234, 238),
$scale: 1,
$additionalShadowAlpha: 1,
$borderColor: #222428
) {
// color: $text3dColor;
$borderColor: rgba(15, 18, 23, 0.9);
// $shadowColor: darken($color, 40%);
$border: 0.07em;
$borderMid: $border * 1.14;
$drop1: $borderMid + 0.02;
$drop2: $borderMid + 0.06em;
// text-shadow: #{$border} #{$border} 0 $borderColor, #{-$border} #{$border} 0 $borderColor, #{$border} #{-$border} 0 $borderColor,
// #{-$border} #{-$border} 0 $borderColor, 0 #{$borderMid} 0 $borderColor, 0 #{-$borderMid} 0 $borderColor,
// #{$borderMid} 0 0 $borderColor, #{-$borderMid} 0 0 $borderColor, 0 #{$drop1} 0 $borderColor, #{$borderMid} #{$drop1} 0 $borderColor,
// #{-$borderMid} #{$drop1} 0 $borderColor, 0 #{$drop2} 0 $borderColor, #{$borderMid} #{$drop2} 0 $borderColor,
// #{-$borderMid} #{$drop2} 0 $borderColor, -0.2em 0.13em 0 rgba(#111, 0.25); // 0px 0.07em 0px $shadowColor,
// 0px 0.15em 0.09em rgba(#333539, $additionalShadowAlpha);;
}
// ----------------------------------------
/* Shine animation prefab, useful for buttons etc. Adds a bright shine which moves over
the button like a reflection. Performance heavy. */
@mixin ShineAnimation($duration, $bgColor, $w: 200px, $shineAlpha: 0.25, $lightenAmount: 7, $bgAnim: true) {
$bgBase: darken($bgColor, 5);
background-color: $bgBase;
@include HighQualityOrMore {
position: relative;
// overflow: hidden;
// overflow: visible;
&:before {
content: " ";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: uiResource("misc/shine_bg.png") 0px center / 100% 100% no-repeat;
@include InlineAnimation($duration ease-in-out infinite) {
0% {
background-position-x: #{D(-$w)};
}
100% {
background-position-x: #{D($w)};
}
}
}
@if ($bgAnim) {
@include InlineAnimation($duration ease-in-out infinite) {
0% {
background-color: $bgBase;
}
50% {
background-color: lighten($bgBase, $lightenAmount);
}
100% {
background-color: $bgBase;
}
}
}
}
}
// ----------------------------------------
/* String replacement */
@function str-replace($string, $search, $replace: "") {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace +
str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
@mixin BounceInFromSide($mul, $duration: 0.18s ease-in-out) {
@include InlineAnimation($duration) {
0% {
transform: translateY(#{D(-100px * $mul)}) scale(0.9);
opacity: 0;
}
100% {
opacity: 1;
transform: none;
}
}
opacity: 1;
transform: none;
}
@mixin BreakText {
word-wrap: break-word;
word-break: break-all;
overflow-wrap: break-all;
}
@mixin SupportsAndroidNotchQuery {
@supports (color: constant(--notch-inset-left)) {
@content;
}
}
@mixin SupportsiOsNotchQuery {
@supports (color: env(safe-area-inset-left, 0px)) {
@content;
}
}

16
src/css/states/ingame.scss Normal file
View File

@@ -0,0 +1,16 @@
#state_InGameState {
.gameLoadingOverlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
align-items: center;
justify-content: center;
pointer-events: all;
display: flex;
background: $mainBgColor;
flex-direction: column;
}
}

27
src/css/states/main_menu.scss Normal file
View File

@@ -0,0 +1,27 @@
#state_MainMenuState {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: uiResource("menu_bg.noinline.jpg") center center / cover no-repeat !important;
.logo {
img {
@include S(width, 350px);
}
}
.mainContainer {
@include S(margin-top, 40px);
display: flex;
.playButton {
@include SuperHeading;
@include S(width, 150px);
@include S(padding, 15px, 20px);
color: #fff;
background-color: $accentColorDark;
}
}
}

100
src/css/states/preload.scss Normal file
View File

@@ -0,0 +1,100 @@
#state_PreloadState {
&.failure {
.loadingImage,
.loadingStatus {
display: none;
}
}
.failureBox {
.logo {
img {
@include S(width, 240px);
}
@include S(margin-bottom, 30px);
}
@include InlineAnimation(0.3s ease-in-out) {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.failureInner {
// background: darken($mainBgColor, 6);
@include S(max-width, 350px);
margin: 0 20px;
text-align: left;
@include BoxShadow3D(#fff);
@include S(padding, 15px);
@include BorderRadius(4px);
@include DropShadow;
.errorHeader {
color: #ef5072;
}
.errorMessage {
@include PlainText;
display: block;
color: #666;
text-align: left;
@include BreakText;
hyphens: auto;
// border: dotted #666;
// @include S(border-width, 1px, 0);
@include S(padding, 10px, 0);
@include S(margin-top, 10px);
}
.supportHelp {
@include S(margin-top, 10px);
@include PlainText;
.email {
color: $themeColor;
cursor: pointer;
pointer-events: all;
}
}
.lower {
display: flex;
align-items: center;
@include S(margin-top, 16px);
i {
flex-grow: 1;
text-align: right;
color: #777;
@include PlainText;
}
button.resetApp {
@include Button3D($colorRedBright);
@include PlainText;
@include S(padding, 5px, 8px, 4px);
}
}
}
}
/* Animations */
.status {
transform: scale(0.7) $hardwareAcc;
opacity: 0;
@include StateAnim(transform, opacity);
}
&.arrived {
.status {
opacity: 1;
transform: none;
}
}
}

267
src/css/textual_game_state.scss Normal file
View File

@@ -0,0 +1,267 @@
.gameState.textualState {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
$padding: 15px;
.bottomPoppingInNotification {
position: absolute;
left: 50%;
text-align: center;
@include BoxShadow3D(mix(lighten($mainBgColor, 12), $colorRedBright, 50%));
@include S(padding, 10px);
max-width: #{D(280px)};
@include S(bottom, 30px);
box-sizing: border-box;
width: 100%;
@include PlainText;
@include BorderRadius(4px);
$baseTransform: translateX(-50%);
transform-origin: 0% 100%;
transform: translateY(500%);
opacity: 0;
display: block;
@include InlineAnimation(5s ease-in-out) {
0% {
opacity: 0;
transform: scale(0) skew(5deg, 5deg) translateY(100%) $baseTransform;
}
8% {
transform: scale(1.05) translateY(-2%) $baseTransform;
}
12% {
transform: scale(1) $baseTransform;
opacity: 1;
}
97% {
transform: scale(1) $baseTransform;
opacity: 1;
}
100% {
opacity: 0;
transform: scale(0) skew(5deg, 5deg) translateY(100%) $baseTransform;
}
}
}
.widthKeeper {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
box-sizing: content-box;
@include S(max-width, 1000px);
@include StyleAtHeight(800px) {
@include S(padding-top, 30px);
}
.headerBar {
display: flex;
@include VerticalStyle {
// margin-top: 1px;
}
// margin-bottom: 15px;
padding: $padding;
$h: 25px;
@include S(min-height, $h);
@include S(max-height, $h);
align-items: center;
justify-content: center;
position: relative;
z-index: 50;
background: transparent;
@include S(padding-top, $padding);
@include S(padding-left, $padding);
@include S(padding-right, $padding);
background-size: calc(100% - #{D(6px)}) 100%;
$paddingBottom: 20px;
@include S(padding-bottom, $paddingBottom);
@include S(margin-bottom, -$h - $padding - $paddingBottom);
h1 {
// text-align: center;
cursor: pointer;
// transform-origin: 0px 50%;
pointer-events: all;
@include S(padding, 5px, 0px, 5px, 30px);
@include S(left, -2px);
@include S(min-width, 100px);
position: relative;
@include IncreasedClickArea(25px);
text-transform: uppercase;
// background: uiResource("back_arrow.png") center center no-repeat;
@include S(background-position-x, -3px);
@include S(background-size, 25px, 25px);
// Due to back button
color: $text3dColor;
@include TextShadow3D($borderColor: #18151d);
@include SuperHeading;
@include StyleBelowWidth(380px) {
@include Heading;
}
}
.grow {
flex-grow: 1;
}
}
.container {
text-align: left;
flex-direction: column;
pointer-events: all;
box-sizing: border-box;
z-index: 25;
position: relative;
@include S(padding-left, 0px);
@include S(padding-right, 0px);
height: 100%;
@include SupportsAndroidNotchQuery {
height: calc(
100% - constant(safe-area-inset-top) - constant(safe-area-inset-bottom) -
var(--notch-inset-top) - var(--notch-inset-bottom)
);
}
@include SupportsiOsNotchQuery {
height: calc(
100% - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) -
var(--notch-inset-top) - var(--notch-inset-bottom)
);
}
.loadingIndicator {
display: none;
}
.errorIndicator {
display: none;
flex-direction: column;
text-align: center;
.errorInner {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
@include S(max-width, 350px);
strong {
$col: #ff4564;
@include TextShadow3D($col);
@include Heading;
}
i {
@include PlainText;
color: #888;
@include S(margin-top, 10px);
display: inline-block;
}
}
}
.loadingIndicator,
.errorIndicator {
box-sizing: border-box;
justify-content: center;
align-items: center;
height: 100%;
@include S(padding, 30px);
}
// Loading state
&.loading {
.mainContent {
animation: none;
display: none !important;
}
.loadingIndicator {
display: flex;
}
}
// Error state
&.errored {
.mainContent {
animation: none;
display: none !important;
}
.errorIndicator {
animation: none;
display: flex;
}
}
}
.mainContent {
overflow-y: auto !important;
overflow-x: hidden;
@include S(padding, $padding);
height: 100%;
width: 100%;
box-sizing: border-box;
@include InlineAnimation(0.4s ease-in-out) {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.category_label {
display: block;
@include S(margin-top, 40px);
text-transform: uppercase;
&:first-child {
margin-top: 0 !important;
}
@include S(margin-bottom, 16px);
@include Heading;
@include TextShadow3D(#68a1bb, $borderColor: #141718);
}
.cardbox {
@include S(padding, 20px, 15px);
$cardBg: lighten($mainBgColor, 9);
background: $cardBg;
margin-bottom: 15px;
@include S(margin-bottom, 15px);
@include BorderRadius(4px);
@include S(padding-bottom, 14px);
@include BoxShadow3D($cardBg);
&:last-child {
border-bottom: 0;
}
}
}
}
&.hasTitle {
.mainContent {
@include S(padding-top, 70px, $important: true);
}
}
}

66
src/css/trigonometry.scss Normal file
View File

@@ -0,0 +1,66 @@
///////////////////////////////////////////////////////////
// Plain SASS Trigonometry Algorithm in Taylor Expansion //
// //
// Based on //
// http://japborst.net/posts/sass-sines-and-cosines //
///////////////////////////////////////////////////////////
$pi: 3.14159265359;
$_precision: 10;
@function pow($base, $exp) {
$value: $base;
@if $exp > 1 {
@for $i from 2 through $exp {
$value: $value * $base;
}
}
@if $exp < 1 {
@for $i from 0 through -$exp {
$value: $value / $base;
}
}
@return $value;
}
@function fact($num) {
$fact: 1;
@if $num > 0 {
@for $i from 1 through $num {
$fact: $fact * $i;
}
}
@return $fact;
}
@function _to_unitless_rad($angle) {
@if unit($angle) == "deg" {
$angle: $angle / 180deg * $pi;
}
@if unit($angle) == "rad" {
$angle: $angle / 1rad;
}
@return $angle;
}
@function sin($angle) {
$a: _to_unitless_rad($angle);
$sin: $a;
@for $n from 1 through $_precision {
$sin: $sin + (pow(-1, $n) / fact(2 * $n + 1)) * pow($a, (2 * $n + 1));
}
@return $sin;
}
@function cos($angle) {
$a: _to_unitless_rad($angle);
$cos: 1;
@for $n from 1 through $_precision {
$cos: $cos + (pow(-1, $n) / fact(2 * $n)) * pow($a, 2 * $n);
}
@return $cos;
}
@function tan($angle) {
@return sin($angle) / cos($angle);
}

195
src/css/variables.scss Normal file
View File

@@ -0,0 +1,195 @@
// When to reduce control elements size for small devices
$layoutExpandMinWidth: 340px;
// Font sizes and line heights
$superHeadingFontSize: 25px;
$superHeadingLineHeight: 24px;
$breakTooltipShowStatsPx: 1023px;
$headingFontSize: 19px;
$headingLineHeight: 21px;
$textFontSize: 16px;
$textLineHeight: 21px;
$plainTextFontSize: 13px;
$plainTextLineHeight: 17px;
$supersmallTextFontSize: 10px;
$supersmallTextLineHeight: 13px;
$buttonFontSize: 14px;
$buttonLineHeight: 18px;
// Main background color
$mainBgColor: #dee1ea;
// Accent colors
$accentColorBright: #e1e4ed;
$accentColorDark: #7d808a;
$colorGreenBright: #66bb6a;
$colorRedBright: #ef5072;
$themeColor: #393747;
$ingameHudBg: rgba($accentColorBright, 0.9);
$ingameHudBorder: #{D(1.5px)} solid $accentColorDark;
$text3dColor: #f4ffff;
// Dialog properties
$modalDialogBg: rgba(#666a73, 0.8);
$dialogBgColor: lighten($mainBgColor, 10);
$lightFontWeight: normal;
$boldFontWeight: 600;
$iconSizeSmall: 30px;
$iconSizeMedium: 40px;
$iconSizeLarge: 60px;
// Poppins 500
// Rubik 400
// Cairo 400
// Viga 400
// Sniglet 400
$mainFont: "GameFont", sans-serif;
// $mainFont: "DK Canoodle";
// $mainFont: "MADE Florence Sans";
$numberFont: $mainFont;
$textFont: $mainFont;
$mainFontWeight: 400;
$mainFontSpacing: 0.04em;
$mainFontScale: 1;
@mixin DebugText($color) {
// font-size: 3px;
// &,
// * {
// color: $color !important;
// }
}
@mixin SuperSmallText {
@include ScaleFont($supersmallTextFontSize, $supersmallTextLineHeight);
font-weight: $mainFontWeight;
font-family: $mainFont;
letter-spacing: $mainFontSpacing;
@include DebugText(green);
}
@mixin PlainText {
@include ScaleFont($plainTextFontSize, $plainTextLineHeight);
font-weight: $mainFontWeight;
font-family: $mainFont;
letter-spacing: $mainFontSpacing;
@include DebugText(red);
}
@mixin Text {
@include ScaleFont($textFontSize, $textLineHeight);
font-weight: $mainFontWeight;
font-family: $mainFont;
letter-spacing: $mainFontSpacing;
@include DebugText(blue);
}
@mixin Heading {
@include ScaleFont($headingFontSize, $headingLineHeight);
font-weight: $mainFontWeight;
font-family: $mainFont;
letter-spacing: $mainFontSpacing;
@include DebugText(yellow);
}
@mixin SuperHeading {
@include ScaleFont($superHeadingFontSize, $superHeadingLineHeight);
font-weight: $mainFontWeight;
font-family: $mainFont;
letter-spacing: $mainFontSpacing;
@include DebugText(orange);
}
@mixin ButtonText {
@include ScaleFont($buttonFontSize, $buttonLineHeight);
font-weight: $mainFontWeight;
font-family: $mainFont;
letter-spacing: $mainFontSpacing;
@include DebugText(purple);
}
@function str-split($string, $separator) {
// empty array/list
$split-arr: ();
// first index of separator in string
$index: str-index($string, $separator);
// loop through string
@while $index != null {
// get the substring from the first character to the separator
$item: str-slice($string, 1, $index - 1);
// push item to array
$split-arr: append($split-arr, $item);
// remove item and separator from string
$string: str-slice($string, $index + 1);
// find new index of separator
$index: str-index($string, $separator);
}
// add the remaining string to list (the last item)
$split-arr: append($split-arr, $string);
@return $split-arr;
}
@function _first-index($string, $direction: "left") {
@for $i from 1 through str-length($string) {
$index: if($direction == "left", $i, -$i);
@if str-slice($string, $index, $index) != " " {
@return $index;
}
}
@return 0;
}
@function trim($string) {
@return str-slice($string, _first-index($string, "left"), _first-index($string, "right"));
}
@mixin AppendGlobal($prefix) {
$strSelector: quote(&);
$selectors: str-split($strSelector, ",");
$builtSelector: null;
@if (& == null) {
$builtSelector: "html" + $prefix;
} @else {
$builtSelector: ();
// @debug ($strSelector, "->>>", $selectors);
@each $srcSelector in $selectors {
$srcSelector: trim($srcSelector);
// @debug ("___", $srcSelector);
$selector: "html" + $prefix + " " + $srcSelector;
@if str-index($srcSelector, "html.") {
$selector: "html" +
$prefix +
"." +
str-slice($srcSelector, str-index($srcSelector, "html.") + 5);
}
// @debug ("_______", $selector);
$builtSelector: append($builtSelector, $selector, comma);
}
}
@at-root #{$builtSelector} {
@content;
}
}