mirror of
https://github.com/tobspr/shapez.io.git
synced 2024-10-27 20:34:29 +00:00
Rework main menu
This commit is contained in:
tobspr
parent
e0ccf06531
commit
acbbf5a539
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
1
res/ui/main_menu/discord.svg
Normal file
1
res/ui/main_menu/discord.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m433.43 93.222c-32.633-14.973-67.627-26.005-104.216-32.324-.666-.122-1.332.183-1.675.792-4.501 8.005-9.486 18.447-12.977 26.655-39.353-5.892-78.505-5.892-117.051 0-3.492-8.39-8.658-18.65-13.179-26.655-.343-.589-1.009-.894-1.675-.792-36.568 6.298-71.562 17.33-104.216 32.324-.283.122-.525.325-.686.589-66.376 99.165-84.56 195.893-75.64 291.421.04.467.303.914.666 1.199 43.793 32.161 86.215 51.685 127.848 64.627.666.203 1.372-.04 1.796-.589 9.848-13.449 18.627-27.63 26.154-42.543.444-.873.02-1.91-.888-2.255-13.925-5.282-27.184-11.723-39.939-19.036-1.009-.589-1.09-2.032-.161-2.723 2.684-2.011 5.369-4.104 7.932-6.217.464-.386 1.11-.467 1.655-.224 83.792 38.257 174.507 38.257 257.31 0 .545-.264 1.191-.182 1.675.203 2.564 2.113 5.248 4.226 7.952 6.237.928.691.867 2.134-.141 2.723-12.755 7.456-26.014 13.754-39.959 19.016-.908.345-1.312 1.402-.867 2.275 7.689 14.892 16.468 29.073 26.134 42.523.404.569 1.13.813 1.796.609 41.835-12.941 84.257-32.466 128.05-64.627.384-.284.626-.711.666-1.178 10.676-110.441-17.881-206.376-75.7-291.421-.14-.284-.382-.487-.664-.609zm-262.336 233.843c-25.227 0-46.014-23.16-46.014-51.604 0-28.443 20.383-51.604 46.014-51.604 25.831 0 46.417 23.364 46.013 51.604 0 28.444-20.384 51.604-46.013 51.604zm170.127 0c-25.226 0-46.013-23.16-46.013-51.604 0-28.443 20.383-51.604 46.013-51.604 25.832 0 46.417 23.364 46.014 51.604 0 28.444-20.181 51.604-46.014 51.604z" fill="#5865f2"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
1
res/ui/main_menu/github.svg
Normal file
1
res/ui/main_menu/github.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg id="Layer_1" enable-background="new 0 0 100 100" height="512" viewBox="0 0 100 100" width="512" xmlns="http://www.w3.org/2000/svg"><g id="_x35_1.GitHub"><path id="Icon_83_" d="m35.913 90c2.845 0 3.621-1.122 3.621-2.504 0-1.237-.044-4.513-.066-8.854-14.741 3.14-17.85-6.986-17.85-6.986-2.411-6.01-5.896-7.618-5.896-7.618-4.8-3.228.371-3.162.371-3.162 5.322.362 8.117 5.366 8.117 5.366 4.725 7.962 12.405 5.662 15.435 4.332.477-3.37 1.842-5.662 3.356-6.964-11.769-1.303-24.139-5.781-24.139-25.733 0-5.684 2.054-10.329 5.454-13.973-.596-1.316-2.385-6.611.464-13.783 0 0 4.438-1.396 14.573 5.339 4.24-1.157 8.744-1.731 13.249-1.758 4.505.026 9.009.601 13.249 1.758 10.069-6.735 14.507-5.339 14.507-5.339 2.848 7.172 1.06 12.467.53 13.783 3.378 3.643 5.432 8.289 5.432 13.973 0 20.005-12.387 24.408-24.179 25.689 1.855 1.563 3.577 4.756 3.577 9.636 0 6.969-.066 12.569-.066 14.26 0 1.365.59 2.473 3.643 2.473z" fill="#212121"/></g></svg>
|
||||
|
After Width: | Height: | Size: 937 B |
1
res/ui/main_menu/steam.svg
Normal file
1
res/ui/main_menu/steam.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg id="Layer_1" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><path d="m256 6c-138.071 0-250 111.929-250 250s111.929 250 250 250 250-111.929 250-250-111.929-250-250-250zm85.292 277.135-84.525 61.088c-3.067 33.011-31.3 58.846-65.311 58.846a65.8 65.8 0 0 1 -64.228-51.311l-44.472-17.671v-82.169l75.144 30.051c11.727-7 24.9-10.137 40.233-8.791l54.846-77.862c.361-47.723 39.782-86.385 88.133-86.385 48.622 0 88.043 39.111 88.133 87.013-.001 48.256-39.512 87.191-87.953 87.191z"/><path d="m191.456 289.953a46.221 46.221 0 0 0 -10.464 1.166l20.117 8.073a37.848 37.848 0 0 1 21.379 49.427 38.369 38.369 0 0 1 -50.066 21.08c-7.848-3.05-15.876-6.369-23.724-9.329a48.252 48.252 0 1 0 42.758-70.417z"/><path d="m341.2 137.636c-32.745 0-59.176 26.194-59.176 58.4 0 32.383 26.521 58.4 59.176 58.4 32.385.09 59-26.014 58.906-58.4.001-32.206-26.52-58.4-58.906-58.4zm-.135 93.469a35.074 35.074 0 1 1 35.449-35.072 35.2 35.2 0 0 1 -35.448 35.072z"/></svg>
|
||||
|
After Width: | Height: | Size: 996 B |
46
res/ui/main_menu/twitter.svg
Normal file
46
res/ui/main_menu/twitter.svg
Normal file
@ -0,0 +1,46 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 490.659 490.659" style="enable-background:new 0 0 490.659 490.659;" xml:space="preserve">
|
||||
<path style="fill:#03A9F4;" d="M487.84,92.931c-3.262-3.567-8.514-4.494-12.8-2.261c-4.406,2.002-8.964,3.65-13.632,4.928
|
||||
c7.28-9.316,12.777-19.897,16.213-31.211c1.513-5.693-1.876-11.535-7.569-13.048c-3.04-0.808-6.281-0.233-8.857,1.571
|
||||
c-16.219,8.777-33.458,15.52-51.328,20.075c-36.787-34.722-92.823-39.05-134.507-10.389c-32.109,21.71-49.786,59.232-46.08,97.813
|
||||
c-69.603-5.931-133.642-40.422-176.896-95.275c-2.222-2.688-5.584-4.168-9.067-3.989c-3.532,0.212-6.728,2.162-8.533,5.205
|
||||
c-14.68,23.997-18.933,52.944-11.776,80.149c3.67,13.978,9.961,27.132,18.539,38.763c-3.864-1.892-7.5-4.218-10.837-6.933
|
||||
c-4.575-3.711-11.292-3.011-15.004,1.564c-1.54,1.899-2.382,4.269-2.383,6.714c0.634,39.467,22.306,75.588,56.832,94.72
|
||||
c-4.658-0.572-9.256-1.557-13.739-2.944c-5.641-1.697-11.59,1.5-13.287,7.141c-0.74,2.461-0.567,5.107,0.487,7.451
|
||||
c14.985,33.567,44.943,58.084,80.811,66.133c-34.173,19.28-73.523,27.381-112.533,23.168c-5.058-0.646-9.85,2.429-11.371,7.296
|
||||
c-1.568,4.829,0.484,10.093,4.907,12.587c47.765,28.38,102.102,43.82,157.653,44.8c53.294-0.195,105.345-16.113,149.632-45.76
|
||||
c84.544-56.107,137.237-156.843,129.899-246.976c18.077-13.381,33.758-29.725,46.379-48.341
|
||||
C491.587,101.802,491.114,96.488,487.84,92.931z"/>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@ -1,33 +1,36 @@
|
||||
#state_MainMenuState {
|
||||
display: flex;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
grid-template-rows: D(95px) 1fr D(100px);
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
// background: #aaacb4 center center / cover !important;
|
||||
background: #bbc2cf center center / cover !important;
|
||||
|
||||
.topButtons {
|
||||
position: absolute;
|
||||
@include S(top, 20px);
|
||||
@include S(right, 20px);
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
@include S(grid-gap, 15px);
|
||||
@include S(top, 25px);
|
||||
@include S(right, 25px);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
z-index: 20;
|
||||
@include S(gap, 9px);
|
||||
|
||||
.settingsButton,
|
||||
.exitAppButton,
|
||||
.languageChoose {
|
||||
@include S(width, 25px);
|
||||
@include S(height, 25px);
|
||||
@include S(width, 35px);
|
||||
@include S(height, 35px);
|
||||
pointer-events: all;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 D(2px) D(3px) rgba(#000, 0.1);
|
||||
background: rgba(#fff, 1) uiResource("icons/main_menu_settings.png") center center / 70% no-repeat;
|
||||
|
||||
cursor: pointer;
|
||||
& {
|
||||
background: uiResource("icons/main_menu_settings.png") center center / contain no-repeat;
|
||||
}
|
||||
transition: opacity 0.12s ease-in-out;
|
||||
@include IncreasedClickArea(2px);
|
||||
opacity: 0.7;
|
||||
opacity: 0.85;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
@ -35,23 +38,35 @@
|
||||
|
||||
.exitAppButton {
|
||||
background-image: uiResource("icons/main_menu_exit.png");
|
||||
background-size: 90%;
|
||||
}
|
||||
|
||||
.languageChoose {
|
||||
@include S(border-radius, 8px);
|
||||
border: solid #222428;
|
||||
@include S(border-width, 2px);
|
||||
background: rgba(#fff, 1) center center / contain no-repeat;
|
||||
border-radius: 50%;
|
||||
background-color: #222428 !important;
|
||||
background-size: contain !important;
|
||||
background-position: center center !important;
|
||||
opacity: 0.8;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: uiResource("vignette.lossless.png") center center / cover no-repeat;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.fullscreenBackgroundVideo {
|
||||
// display: none !important;
|
||||
z-index: -1;
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
right: 50%;
|
||||
bottom: 50%;
|
||||
@ -61,7 +76,7 @@
|
||||
opacity: 0;
|
||||
display: none;
|
||||
transform: translate(50%, 50%);
|
||||
filter: blur(D(15px));
|
||||
filter: blur(D(10px));
|
||||
|
||||
$opacity: 0.4;
|
||||
&.loaded {
|
||||
@ -80,14 +95,16 @@
|
||||
}
|
||||
|
||||
.mainWrapper {
|
||||
@include S(padding, 0, 10px);
|
||||
@include S(margin-top, 15px);
|
||||
align-items: start;
|
||||
justify-items: center;
|
||||
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
@include S(grid-column-gap, 10px);
|
||||
display: grid;
|
||||
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
grid-template-rows: D(31px) 1fr D(93px);
|
||||
|
||||
&[data-columns="1"] {
|
||||
@ -127,9 +144,10 @@
|
||||
h3 {
|
||||
@include Heading;
|
||||
font-weight: bold;
|
||||
@include S(margin-bottom, 10px);
|
||||
@include S(margin-bottom, 20px);
|
||||
text-align: center;
|
||||
color: #44484f;
|
||||
color: #222;
|
||||
text-shadow: 0 D(1px) D(5px) rgba(#fff, 0.7);
|
||||
}
|
||||
|
||||
p {
|
||||
@ -171,7 +189,7 @@
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
color: transparent;
|
||||
|
||||
box-shadow: 0 D(3px) D(10px) rgba(96, 163, 136, 0.5);
|
||||
box-shadow: 0 D(3px) D(7px) rgba(#000, 0.3);
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
@ -321,13 +339,14 @@
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 20;
|
||||
|
||||
flex-direction: column;
|
||||
@include S(padding-top, 20px);
|
||||
@include S(padding-top, 0px);
|
||||
|
||||
img {
|
||||
@include S(width, 710px / 2.5);
|
||||
@include S(height, 180px / 2.5);
|
||||
@include S(width, 710px / 3);
|
||||
@include S(height, 180px / 3);
|
||||
}
|
||||
position: relative;
|
||||
@include S(left, -8px);
|
||||
@ -547,10 +566,9 @@
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
background: rgba(#fff, 0.9);
|
||||
@include S(padding, 15px);
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
height: 100%;
|
||||
box-shadow: 0 D(5px) D(15px) rgba(#000, 0.2);
|
||||
box-shadow: 0 D(9px) D(15px) rgba(#000, 0.2);
|
||||
width: 100%;
|
||||
position: relative;
|
||||
align-self: center;
|
||||
@ -558,17 +576,88 @@
|
||||
grid-row: 1 / 4;
|
||||
grid-column: 1 / 2;
|
||||
|
||||
// &[data-savegames="0"] {
|
||||
// grid-row: 2 / 3;
|
||||
// }
|
||||
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
|
||||
&[data-savegames="0"] .buttons .outer {
|
||||
grid-template-rows: 1fr 1fr;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
grid-template-rows: 1fr;
|
||||
// flex-direction: column;
|
||||
// align-items: center;
|
||||
width: 100%;
|
||||
background: rgba(0, 20, 40, 0.05);
|
||||
|
||||
@include S(padding, 10px);
|
||||
@include S(grid-gap, 10px);
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.playButton,
|
||||
.continueButton {
|
||||
@include SuperHeading;
|
||||
width: 100%;
|
||||
@include S(padding, 15px, 10px);
|
||||
letter-spacing: 0.1em !important;
|
||||
@include IncreasedClickArea(0px);
|
||||
box-sizing: border-box;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
background-color: $colorGreenBright;
|
||||
transition: transform 0.12s ease-in-out, background-color 0.12s ease-in-out;
|
||||
|
||||
grid-column: 1 / 2;
|
||||
min-width: auto;
|
||||
grid-row: 1 / 1;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($colorGreenBright, 4);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.continueButton {
|
||||
@include Heading;
|
||||
}
|
||||
}
|
||||
|
||||
.outer {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
height: 100%;
|
||||
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 1 / 1;
|
||||
min-width: auto;
|
||||
|
||||
@include S(grid-gap, 5px);
|
||||
width: 100%;
|
||||
|
||||
> button {
|
||||
@include S(padding, 3px, 6px);
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
margin: 0 !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.importButton {
|
||||
@include IncreasedClickArea(0px);
|
||||
}
|
||||
|
||||
.newGameButton {
|
||||
@include IncreasedClickArea(0px);
|
||||
}
|
||||
|
||||
.modsButton {
|
||||
@include IncreasedClickArea(0px);
|
||||
background-color: $modsColor !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modeButtons {
|
||||
@ -578,220 +667,242 @@
|
||||
align-items: start;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.browserWarning {
|
||||
@include S(margin-bottom, 10px);
|
||||
background-color: $colorRedBright;
|
||||
@include PlainText;
|
||||
color: #fff;
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
@include S(padding, 5px);
|
||||
@include S(width, 300px);
|
||||
}
|
||||
|
||||
.playButton,
|
||||
.continueButton {
|
||||
@include SuperHeading;
|
||||
@include S(min-width, 130px);
|
||||
@include S(padding, 15px, 20px);
|
||||
letter-spacing: 0.2em !important;
|
||||
@include IncreasedClickArea(0px);
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
background-color: $colorGreenBright;
|
||||
transition: transform 0.12s ease-in-out, background-color 0.12s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($colorGreenBright, 4);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.continueButton {
|
||||
@include Heading;
|
||||
}
|
||||
}
|
||||
|
||||
.outer {
|
||||
@include S(margin-top, 15px);
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: 1fr;
|
||||
|
||||
@include S(grid-gap, 5px);
|
||||
width: 100%;
|
||||
|
||||
> button {
|
||||
@include S(padding, 3px, 6px);
|
||||
}
|
||||
}
|
||||
|
||||
.importButton {
|
||||
@include IncreasedClickArea(0px);
|
||||
}
|
||||
|
||||
.newGameButton {
|
||||
@include IncreasedClickArea(0px);
|
||||
}
|
||||
|
||||
.modsButton {
|
||||
@include IncreasedClickArea(0px);
|
||||
|
||||
background-position: center center;
|
||||
background-size: D(15px);
|
||||
background-color: $modsColor !important;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.savegames {
|
||||
@include S(max-height, 105px);
|
||||
overflow-y: auto;
|
||||
@include S(min-width, 230px);
|
||||
width: 100%;
|
||||
.steamSso {
|
||||
cursor: default;
|
||||
pointer-events: all;
|
||||
@include S(padding-right, 5px);
|
||||
margin-right: D(-5px);
|
||||
display: inline-flex;
|
||||
@include S(padding, 10px);
|
||||
color: #000;
|
||||
flex-direction: column;
|
||||
line-height: 1em;
|
||||
@include S(gap, 3px);
|
||||
position: relative;
|
||||
background: rgba(0, 20, 40, 0.05);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin-top: auto;
|
||||
display: grid;
|
||||
grid-auto-flow: row;
|
||||
@include S(grid-gap, 5px);
|
||||
@include S(margin-top, 10px);
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
|
||||
.savegame {
|
||||
background: #eee;
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
@include S(padding, 5px);
|
||||
.description {
|
||||
@include SuperSmallText;
|
||||
color: rgba(0, 10, 20, 0.5);
|
||||
}
|
||||
// &:hover {
|
||||
// .tooltip {
|
||||
// opacity: 1;
|
||||
// }
|
||||
// }
|
||||
|
||||
a.ssoSignIn {
|
||||
background: #171a23 uiResource("steam_signin.png") center center / contain no-repeat;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
@include S(height, 19px);
|
||||
@include S(width, 110px);
|
||||
|
||||
display: inline-flex;
|
||||
@include S(border-radius, $globalBorderRadius * 0.5);
|
||||
overflow: hidden;
|
||||
text-indent: -999em;
|
||||
&:hover {
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
box-shadow: 0 D(2px) D(4px) rgba(#000, 0.3);
|
||||
}
|
||||
|
||||
a.ssoSignOut {
|
||||
width: 100%;
|
||||
background: #171a23;
|
||||
color: #fff !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
justify-content: center;
|
||||
@include PlainText;
|
||||
text-transform: uppercase;
|
||||
|
||||
@include S(border-radius, $globalBorderRadius * 0.5);
|
||||
box-shadow: 0 D(1px) D(4px) rgba(#000, 0.3);
|
||||
@include S(padding, 2px, 9px);
|
||||
&:hover {
|
||||
opacity: 0.95;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.savegamesMount {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
@include S(padding, 10px);
|
||||
box-sizing: border-box;
|
||||
|
||||
.savegamesNone {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
@include PlainText;
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
@include S(padding, 0, 20px);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.savegames {
|
||||
@include S(max-height, 105px);
|
||||
overflow-y: auto;
|
||||
@include S(min-width, 230px);
|
||||
width: 100%;
|
||||
pointer-events: all;
|
||||
@include S(padding-right, 5px);
|
||||
margin-right: D(-5px);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr auto auto;
|
||||
grid-template-rows: auto auto;
|
||||
@include S(grid-column-gap, 4px);
|
||||
@include S(grid-row-gap, 1px);
|
||||
grid-auto-flow: row;
|
||||
@include S(grid-gap, 5px);
|
||||
|
||||
.playtime {
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 2 / 3;
|
||||
@include SuperSmallText;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.savegame {
|
||||
background: #eee;
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
@include S(padding, 5px);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr auto auto;
|
||||
grid-template-rows: auto auto;
|
||||
@include S(grid-column-gap, 4px);
|
||||
@include S(grid-row-gap, 1px);
|
||||
|
||||
.level {
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 2 / 3;
|
||||
@include SuperSmallText;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.playtime {
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 2 / 3;
|
||||
@include SuperSmallText;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.name {
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 1 / 2;
|
||||
@include PlainText;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
.level {
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 2 / 3;
|
||||
@include SuperSmallText;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
> span {
|
||||
.name {
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 1 / 2;
|
||||
@include PlainText;
|
||||
display: inline-flex;
|
||||
@include S(max-width, 140px);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
align-items: center;
|
||||
|
||||
button.resumeGame,
|
||||
button.downloadGame,
|
||||
button.deleteGame,
|
||||
button.renameGame {
|
||||
padding: 0;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
@include IncreasedClickArea(0px);
|
||||
background: #44484a center center / 40% no-repeat;
|
||||
}
|
||||
|
||||
button.resumeGame {
|
||||
background-color: #44484a;
|
||||
& {
|
||||
background-image: uiResource("icons/play.png");
|
||||
}
|
||||
}
|
||||
|
||||
button.downloadGame {
|
||||
grid-column: 3 / 4;
|
||||
grid-row: 1 / 2;
|
||||
background-color: transparent;
|
||||
|
||||
& {
|
||||
background-image: uiResource("icons/download.png");
|
||||
}
|
||||
@include S(width, 15px);
|
||||
@include IncreasedClickArea(0px);
|
||||
@include S(height, 15px);
|
||||
background-size: 80%;
|
||||
align-self: start;
|
||||
border-radius: 0;
|
||||
opacity: 0.4;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.5;
|
||||
> span {
|
||||
display: inline-flex;
|
||||
@include S(max-width, 140px);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@include DarkThemeInvert;
|
||||
}
|
||||
|
||||
button.deleteGame {
|
||||
grid-column: 3 / 4;
|
||||
grid-row: 2 / 3;
|
||||
background-color: transparent;
|
||||
@include IncreasedClickArea(0px);
|
||||
|
||||
& {
|
||||
background-image: uiResource("icons/delete.png");
|
||||
}
|
||||
@include S(width, 15px);
|
||||
@include S(height, 15px);
|
||||
align-self: end;
|
||||
background-size: 80%;
|
||||
border-radius: 0;
|
||||
opacity: 0.4;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.5;
|
||||
button.resumeGame,
|
||||
button.downloadGame,
|
||||
button.deleteGame,
|
||||
button.renameGame {
|
||||
padding: 0;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
@include IncreasedClickArea(0px);
|
||||
background: #44484a center center / 40% no-repeat;
|
||||
}
|
||||
|
||||
@include DarkThemeInvert;
|
||||
}
|
||||
|
||||
button.renameGame {
|
||||
background-color: transparent;
|
||||
@include IncreasedClickArea(2px);
|
||||
|
||||
& {
|
||||
background-image: uiResource("icons/edit_key.png");
|
||||
}
|
||||
@include S(width, 10px);
|
||||
@include S(height, 10px);
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
border-radius: 0;
|
||||
background-size: 90%;
|
||||
opacity: 0.4;
|
||||
@include S(margin-left, 4px);
|
||||
|
||||
&:hover {
|
||||
opacity: 0.5;
|
||||
button.resumeGame {
|
||||
background-color: #44484a;
|
||||
& {
|
||||
background-image: uiResource("icons/play.png");
|
||||
}
|
||||
}
|
||||
|
||||
@include DarkThemeInvert;
|
||||
}
|
||||
button.downloadGame {
|
||||
grid-column: 3 / 4;
|
||||
grid-row: 1 / 2;
|
||||
background-color: transparent;
|
||||
|
||||
button.resumeGame {
|
||||
grid-column: 4 / 5;
|
||||
grid-row: 1 / 3;
|
||||
margin: 0;
|
||||
@include S(width, 32px);
|
||||
height: 100%;
|
||||
@include S(margin-left, 4px);
|
||||
& {
|
||||
background-image: uiResource("icons/download.png");
|
||||
}
|
||||
@include S(width, 15px);
|
||||
@include IncreasedClickArea(0px);
|
||||
@include S(height, 15px);
|
||||
background-size: 80%;
|
||||
align-self: start;
|
||||
border-radius: 0;
|
||||
opacity: 0.4;
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background-color: lighten($darkModeControlsBackground, 10);
|
||||
&:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@include DarkThemeInvert;
|
||||
}
|
||||
|
||||
button.deleteGame {
|
||||
grid-column: 3 / 4;
|
||||
grid-row: 2 / 3;
|
||||
background-color: transparent;
|
||||
@include IncreasedClickArea(0px);
|
||||
|
||||
& {
|
||||
background-image: uiResource("icons/delete.png");
|
||||
}
|
||||
@include S(width, 15px);
|
||||
@include S(height, 15px);
|
||||
align-self: end;
|
||||
background-size: 80%;
|
||||
border-radius: 0;
|
||||
opacity: 0.4;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@include DarkThemeInvert;
|
||||
}
|
||||
|
||||
button.renameGame {
|
||||
background-color: transparent;
|
||||
@include IncreasedClickArea(2px);
|
||||
|
||||
& {
|
||||
background-image: uiResource("icons/edit_key.png");
|
||||
}
|
||||
@include S(width, 10px);
|
||||
@include S(height, 10px);
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
border-radius: 0;
|
||||
background-size: 90%;
|
||||
opacity: 0.4;
|
||||
@include S(margin-left, 4px);
|
||||
|
||||
&:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@include DarkThemeInvert;
|
||||
}
|
||||
|
||||
button.resumeGame {
|
||||
grid-column: 4 / 5;
|
||||
grid-row: 1 / 3;
|
||||
margin: 0;
|
||||
@include S(width, 32px);
|
||||
height: 100%;
|
||||
@include S(margin-left, 4px);
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background-color: lighten($darkModeControlsBackground, 10);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -819,15 +930,93 @@
|
||||
}
|
||||
}
|
||||
|
||||
.socialLinks {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@include S(gap, 9px);
|
||||
@include S(top, 25px);
|
||||
@include S(left, 25px);
|
||||
|
||||
> .boxLink {
|
||||
pointer-events: all;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
@include S(gap, 3px);
|
||||
@include S(width, 35px);
|
||||
|
||||
.label {
|
||||
@include SuperSmallText;
|
||||
font-weight: bold;
|
||||
box-sizing: border-box;
|
||||
text-transform: uppercase;
|
||||
opacity: 0;
|
||||
transition: opacity 0.12s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.label {
|
||||
opacity: 1;
|
||||
.thirdpartyLogo {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.thirdpartyLogo {
|
||||
display: inline-flex;
|
||||
@include S(width, 35px);
|
||||
@include S(height, 35px);
|
||||
background: rgba(#fff, 0.9) center center / contain no-repeat;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 D(2px) D(3px) rgba(#000, 0.1);
|
||||
|
||||
transition: background-color 0.12s ease-in-out;
|
||||
|
||||
&.githubLogo {
|
||||
background-image: uiResource("main_menu/github.png");
|
||||
background-size: 66%;
|
||||
background-position: 54% 50%;
|
||||
}
|
||||
|
||||
&.discordLogo {
|
||||
background-image: uiResource("main_menu/discord.svg");
|
||||
background-size: 66%;
|
||||
background-position: 50% 53%;
|
||||
}
|
||||
|
||||
&.redditLogo {
|
||||
background-image: uiResource("main_menu/reddit.svg");
|
||||
background-size: 65%;
|
||||
}
|
||||
&.twitterLogo {
|
||||
background-image: uiResource("main_menu/twitter.svg");
|
||||
background-size: 60%;
|
||||
background-position: 60% 58%;
|
||||
}
|
||||
&.steamLogo {
|
||||
background-image: uiResource("main_menu/steam.svg");
|
||||
background-size: 105%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
align-self: end;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 20;
|
||||
width: 100%;
|
||||
@include S(padding, 10px);
|
||||
box-sizing: border-box;
|
||||
@include S(grid-gap, 4px);
|
||||
@include S(gap, 30px);
|
||||
@include S(padding, 15px, 25px, 15px, 20px);
|
||||
|
||||
&.wegameDisclaimer {
|
||||
@include SuperSmallText;
|
||||
@ -864,178 +1053,44 @@
|
||||
|
||||
.author {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
@include S(width, 110px);
|
||||
justify-content: flex-end;
|
||||
|
||||
a {
|
||||
&:hover img {
|
||||
opacity: 0.85;
|
||||
}
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
transition: opacity 0.12s ease-in-out;
|
||||
@include S(width, 82px);
|
||||
@include S(height, 25px);
|
||||
@include S(width, 82px * 0.8);
|
||||
@include S(height, 25px * 0.8);
|
||||
filter: invert(100%);
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include S(padding, 15px);
|
||||
|
||||
$linkBg: rgba(#fdfdff, 0.5);
|
||||
$linkBgHover: rgba(#fff, 0.7);
|
||||
$linkColor: #55586a;
|
||||
|
||||
> .boxLink {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-columns: 1fr auto;
|
||||
|
||||
justify-content: center;
|
||||
backdrop-filter: blur(5px);
|
||||
background: $linkBg;
|
||||
|
||||
@include S(padding, 5px);
|
||||
@include S(padding-left, 10px);
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
@include SuperSmallText();
|
||||
|
||||
font-weight: bold;
|
||||
box-sizing: border-box;
|
||||
text-transform: uppercase;
|
||||
color: $linkColor;
|
||||
|
||||
transition: background-color 0.12s ease-in-out;
|
||||
pointer-events: all;
|
||||
@include S(width, 120px);
|
||||
@include S(height, 60px);
|
||||
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: $linkBgHover;
|
||||
}
|
||||
|
||||
.thirdpartyLogo {
|
||||
display: inline-block;
|
||||
@include S(width, 50px);
|
||||
@include S(height, 50px);
|
||||
background: center center / 80% no-repeat;
|
||||
&.githubLogo {
|
||||
background-image: uiResource("main_menu/github.png");
|
||||
}
|
||||
&.discordLogo {
|
||||
background-image: uiResource("main_menu/discord.png");
|
||||
background-size: 95%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .steamSso {
|
||||
background: rgba($colorBlueBright, 0.9);
|
||||
&:hover {
|
||||
background: rgba($colorBlueBright, 0.9);
|
||||
}
|
||||
// @include SuperSmallText;
|
||||
// color: #fff;
|
||||
// @include S(max-width, 150px);
|
||||
// @include S(border-radius, $globalBorderRadius);
|
||||
// border-top-left-radius: 0;
|
||||
// border-top-right-radius: 0;
|
||||
@include S(padding, 5px);
|
||||
// box-shadow: 0 D(5px) D(15px) rgba(#000, 0.1);
|
||||
// color: #000;
|
||||
.footerGrow {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
color: #222428;
|
||||
flex-direction: column;
|
||||
|
||||
@include S(font-size, 9px);
|
||||
|
||||
a.ssoSignIn {
|
||||
background: #171a23 uiResource("steam_signin.png") center center / contain no-repeat;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
@include S(height, 16px);
|
||||
@include S(min-height, 16px);
|
||||
|
||||
display: inline-flex;
|
||||
@include S(border-radius, $globalBorderRadius * 0.5);
|
||||
@include S(margin-top, 3px);
|
||||
overflow: hidden;
|
||||
text-indent: -999em;
|
||||
margin-top: auto;
|
||||
&:hover {
|
||||
opacity: 0.95;
|
||||
}
|
||||
}
|
||||
a.ssoSignOut {
|
||||
width: 100%;
|
||||
background: #171a23;
|
||||
color: #fff !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
justify-content: center;
|
||||
margin-top: auto;
|
||||
@include S(border-radius, $globalBorderRadius * 0.5);
|
||||
@include S(padding, 1px, 3px);
|
||||
&:hover {
|
||||
opacity: 0.95;
|
||||
}
|
||||
}
|
||||
|
||||
@include DarkThemeOverride {
|
||||
color: #333539;
|
||||
a {
|
||||
color: #111;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .sidelinks {
|
||||
display: grid;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
@include S(grid-gap, 3px);
|
||||
@include S(height, 60px);
|
||||
|
||||
@include S(gap, 15px);
|
||||
> a {
|
||||
color: $linkColor;
|
||||
background: $linkBg;
|
||||
height: 100%;
|
||||
|
||||
&:hover {
|
||||
background-color: $linkBgHover;
|
||||
}
|
||||
@include SuperSmallText;
|
||||
text-transform: uppercase;
|
||||
width: 100%;
|
||||
@include S(padding, 2px, 10px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
@include S(padding-left, 25px);
|
||||
box-sizing: border-box;
|
||||
@include S(padding, 2px);
|
||||
font-weight: bold;
|
||||
background-position: #{D(5px)} center;
|
||||
background-size: #{D(12px)};
|
||||
background-repeat: no-repeat;
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
|
||||
transition: background-color 0.12s ease-in-out;
|
||||
|
||||
&.redditLink {
|
||||
background-image: uiResource("main_menu/reddit.svg");
|
||||
}
|
||||
&.changelog {
|
||||
background-image: uiResource("main_menu/changelog.svg");
|
||||
}
|
||||
&.helpTranslate {
|
||||
background-image: uiResource("main_menu/translate.svg");
|
||||
color: #000;
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.12s ease-in-out;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,6 +19,7 @@ export const THIRDPARTY_URLS = {
|
||||
reddit: "https://www.reddit.com/r/shapezio",
|
||||
shapeViewer: "https://viewer.shapez.io",
|
||||
|
||||
twitter: "https://twitter.com/tobspr",
|
||||
privacyPolicy: "https://tobspr.io/privacy.html",
|
||||
|
||||
standaloneCampaignLink: G_IS_STANDALONE
|
||||
|
||||
@ -127,8 +127,8 @@ export class MainMenuState extends GameState {
|
||||
|
||||
<div class="logo">
|
||||
<img src="${cachebust("res/" + getLogoSprite())}" alt="shapez.io Logo"
|
||||
width="${Math.round((710 / 2.5) * this.app.getEffectiveUiScale())}"
|
||||
height="${Math.round((180 / 2.5) * this.app.getEffectiveUiScale())}"
|
||||
width="${Math.round((710 / 3) * this.app.getEffectiveUiScale())}"
|
||||
height="${Math.round((180 / 3) * this.app.getEffectiveUiScale())}"
|
||||
>
|
||||
${/*showUpdateLabel ? `<span class="updateLabel">MODS UPDATE!</span>` : ""*/ ""}
|
||||
</div>
|
||||
@ -136,6 +136,31 @@ export class MainMenuState extends GameState {
|
||||
<div class="mainWrapper" data-columns="${showDemoAdvertisement || showPuzzleDLC ? 2 : 1}">
|
||||
<div class="mainContainer">
|
||||
<div class="buttons"></div>
|
||||
<div class="savegamesMount"></div>
|
||||
${
|
||||
G_IS_STANDALONE || WEB_STEAM_SSO_AUTHENTICATED
|
||||
? ""
|
||||
: `<div class="steamSso">
|
||||
<span class="description">${T.mainMenu.playFullVersionV2}</span>
|
||||
<a class="ssoSignIn" href="${
|
||||
this.app.clientApi.getEndpoint() + "/v1/noauth/steam-sso"
|
||||
}">Sign in</a>
|
||||
</div>`
|
||||
}
|
||||
${
|
||||
WEB_STEAM_SSO_AUTHENTICATED
|
||||
? `
|
||||
<div class="steamSso">
|
||||
<span class="description">${T.mainMenu.playingFullVersion}</span>
|
||||
<a class="ssoSignOut" href="?sso_logout_silent">${T.mainMenu.logout}</a>
|
||||
|
||||
</div>
|
||||
`
|
||||
: ""
|
||||
}
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="sideContainer">
|
||||
@ -225,32 +250,22 @@ export class MainMenuState extends GameState {
|
||||
|
||||
<div class="footer ${showExternalLinks ? "" : "noLinks"} ">
|
||||
|
||||
<div class="socialLinks">
|
||||
|
||||
${
|
||||
G_IS_STANDALONE || WEB_STEAM_SSO_AUTHENTICATED
|
||||
? ""
|
||||
: `<div class="steamSso boxLink">
|
||||
${T.mainMenu.playFullVersion}
|
||||
<a class="ssoSignIn" href="${
|
||||
this.app.clientApi.getEndpoint() + "/v1/noauth/steam-sso"
|
||||
}">Sign in</a>
|
||||
</div>`
|
||||
}
|
||||
${
|
||||
WEB_STEAM_SSO_AUTHENTICATED
|
||||
? `
|
||||
<div class="steamSso boxLink">${T.mainMenu.playingFullVersion}
|
||||
<a class="ssoSignOut" href="?sso_logout_silent">${T.mainMenu.logout}</a>
|
||||
</div>
|
||||
`
|
||||
showExternalLinks
|
||||
? `<a class="steamLinkSocial boxLink" target="_blank">
|
||||
<span class="thirdpartyLogo steamLogo"></span>
|
||||
<span class="label">steam</span>
|
||||
</a>`
|
||||
: ""
|
||||
}
|
||||
|
||||
${
|
||||
showExternalLinks && !G_IS_STEAM_DEMO
|
||||
? `
|
||||
<a class="githubLink boxLink" target="_blank">
|
||||
${T.mainMenu.openSourceHint}
|
||||
<span class="thirdpartyLogo githubLogo"></span>
|
||||
<span class="label">GitHub</span>
|
||||
</a>`
|
||||
: ""
|
||||
}
|
||||
@ -258,27 +273,47 @@ export class MainMenuState extends GameState {
|
||||
${
|
||||
showDiscordLink
|
||||
? `<a class="discordLink boxLink" target="_blank">
|
||||
|
||||
${T.mainMenu.discordLink}
|
||||
<span class="thirdpartyLogo discordLogo"></span>
|
||||
</a>`
|
||||
<span class="thirdpartyLogo discordLogo"></span>
|
||||
<span class="label">Discord</span>
|
||||
</a>`
|
||||
: ""
|
||||
}
|
||||
|
||||
<div class="sidelinks">
|
||||
${showExternalLinks ? `<a class="redditLink">${T.mainMenu.subreddit}</a>` : ""}
|
||||
${
|
||||
showExternalLinks
|
||||
? `<a class="redditLink boxLink" target="_blank">
|
||||
<span class="thirdpartyLogo redditLogo"></span>
|
||||
<span class="label">Reddit</span>
|
||||
</a>`
|
||||
: ""
|
||||
}
|
||||
|
||||
${
|
||||
showExternalLinks
|
||||
? `<a class="twitterLink boxLink" target="_blank">
|
||||
<span class="thirdpartyLogo twitterLogo"></span>
|
||||
<span class="label">Twitter</span>
|
||||
</a>`
|
||||
: ""
|
||||
}
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="footerGrow">
|
||||
${showExternalLinks ? `<a class="changelog">${T.changelog.title}</a>` : ""}
|
||||
|
||||
${showExternalLinks ? `<a class="helpTranslate">${T.mainMenu.helpTranslate}</a>` : ""}
|
||||
|
||||
</div>
|
||||
<div class="author"><a class="producerLink" href="https://tobspr.io" target="_blank" title="tobspr Games" rel="follow">
|
||||
<div class="author"><a class="producerLink" href="https://tobspr.io" target="_blank" title="tobspr Games" rel="follow">
|
||||
<img src="${cachebust("res/logo-tobspr-games.svg")}" alt="tobspr Games"
|
||||
height="${25 * this.app.getEffectiveUiScale()}"
|
||||
width="${82 * this.app.getEffectiveUiScale()}"
|
||||
height="${25 * 0.8 * this.app.getEffectiveUiScale()}"
|
||||
width="${82 * 0.8 * this.app.getEffectiveUiScale()}"
|
||||
>
|
||||
|
||||
</a></div>
|
||||
|
||||
</div>
|
||||
|
||||
`
|
||||
@ -400,10 +435,12 @@ export class MainMenuState extends GameState {
|
||||
".settingsButton": this.onSettingsButtonClicked,
|
||||
".languageChoose": this.onLanguageChooseClicked,
|
||||
".redditLink": this.onRedditClicked,
|
||||
".twitterLink": this.onTwitterLinkClicked,
|
||||
".changelog": this.onChangelogClicked,
|
||||
".helpTranslate": this.onTranslationHelpLinkClicked,
|
||||
".exitAppButton": this.onExitAppButtonClicked,
|
||||
".steamLink": this.onSteamLinkClicked,
|
||||
".steamLinkSocial": this.onSteamLinkClickedSocial,
|
||||
".discordLink": () => {
|
||||
this.app.platformWrapper.openExternalLink(THIRDPARTY_URLS.discord);
|
||||
},
|
||||
@ -524,10 +561,12 @@ export class MainMenuState extends GameState {
|
||||
}
|
||||
|
||||
onSteamLinkClicked() {
|
||||
const discount = globalConfig.currentDiscount > 0 ? "_discount" + globalConfig.currentDiscount : "";
|
||||
|
||||
openStandaloneLink(this.app, "shapez_mainmenu");
|
||||
return false;
|
||||
}
|
||||
|
||||
onSteamLinkClickedSocial() {
|
||||
openStandaloneLink(this.app, "shapez_mainmenu_social");
|
||||
return false;
|
||||
}
|
||||
|
||||
@ -543,6 +582,10 @@ export class MainMenuState extends GameState {
|
||||
this.app.platformWrapper.openExternalLink(THIRDPARTY_URLS.reddit);
|
||||
}
|
||||
|
||||
onTwitterLinkClicked() {
|
||||
this.app.platformWrapper.openExternalLink(THIRDPARTY_URLS.twitter);
|
||||
}
|
||||
|
||||
onLanguageChooseClicked() {
|
||||
const setting = /** @type {EnumSetting} */ (this.app.settings.getSettingHandleById("language"));
|
||||
|
||||
@ -591,7 +634,9 @@ export class MainMenuState extends GameState {
|
||||
}
|
||||
const games = this.savedGames;
|
||||
if (games.length > 0) {
|
||||
const parent = makeDiv(this.htmlElement.querySelector(".mainContainer"), null, ["savegames"]);
|
||||
const parent = makeDiv(this.htmlElement.querySelector(".mainContainer .savegamesMount"), null, [
|
||||
"savegames",
|
||||
]);
|
||||
|
||||
for (let i = 0; i < games.length; ++i) {
|
||||
const elem = makeDiv(parent, null, ["savegame"]);
|
||||
@ -646,6 +691,13 @@ export class MainMenuState extends GameState {
|
||||
this.trackClicks(downloadButton, () => this.downloadGame(games[i]));
|
||||
this.trackClicks(resumeButton, () => this.resumeGame(games[i]));
|
||||
}
|
||||
} else {
|
||||
const parent = makeDiv(
|
||||
this.htmlElement.querySelector(".mainContainer .savegamesMount"),
|
||||
null,
|
||||
["savegamesNone"],
|
||||
T.mainMenu.noActiveSavegames
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -99,7 +99,7 @@ mainMenu:
|
||||
title: Aktive Mods
|
||||
warningPuzzleDLC: Das Puzzle-DLC und Mods sind nicht kompatibel. Bitte
|
||||
deaktiviere zuerst alle Mods, um das DLC zu spielen.
|
||||
playFullVersion: Spiel die Vollversion im Browser!
|
||||
playFullVersionV2: Du hast shapez schon auf Steam gekauft? Spiel jetzt die Vollversion im Browser!
|
||||
playingFullVersion: Du spielst jetzt die Vollversion!
|
||||
logout: Ausloggen
|
||||
puzzleMenu:
|
||||
|
||||
@ -130,8 +130,9 @@ mainMenu:
|
||||
discordLink: Official Discord Server
|
||||
helpTranslate: Help translate!
|
||||
madeBy: Made by <author-link>
|
||||
noActiveSavegames: No active savegames found - Click play to start a new game!
|
||||
|
||||
playFullVersion: Play the full version in your Browser!
|
||||
playFullVersionV2: Bough shapez on Steam? Play the full version in your Browser!
|
||||
playingFullVersion: You are now playing the full version!
|
||||
logout: Logout
|
||||
|
||||
|
||||
@ -84,16 +84,17 @@ mainMenu:
|
||||
savegameUnnamed: 存档未命名
|
||||
puzzleMode: 谜题模式
|
||||
back: 返回
|
||||
puzzleDlcText: 持续优化，追求极致效率。在限定空间内使用有限的设施来创造图形！《异形工厂》（Shapez）的首个 DLC
|
||||
puzzleDlcText:
|
||||
持续优化，追求极致效率。在限定空间内使用有限的设施来创造图形！《异形工厂》（Shapez）的首个 DLC
|
||||
“谜题挑战者”将会给大家带来更烧脑、更自由的全新挑战！
|
||||
puzzleDlcWishlist: 添加愿望单！
|
||||
puzzleDlcViewNow: 查看 DLC
|
||||
mods:
|
||||
title: 激活游戏模组（Mods）
|
||||
warningPuzzleDLC: 无法在任何游戏模组（Mods）下进行“谜题挑战者” DLC，请关闭所有游戏模组（Mods）。
|
||||
playFullVersion: Play the full version in your Browser!
|
||||
playingFullVersion: You are now playing the full version!
|
||||
logout: Logout
|
||||
playFullVersion: 在浏览器内玩完整版游戏！
|
||||
playingFullVersion: 您正在玩完整版游戏！
|
||||
logout: 登出
|
||||
dialogs:
|
||||
buttons:
|
||||
ok: 确认
|
||||
@ -157,7 +158,8 @@ dialogs:
|
||||
desc: 您还没有解锁蓝图功能！通过第 12 关的挑战后可解锁蓝图。
|
||||
keybindingsIntroduction:
|
||||
title: 实用快捷键
|
||||
desc: 这个游戏有很多有用的快捷键设定。以下是其中的一些介绍，记得在<strong>按键设置</strong>中查看其他按键设定！<br><br>
|
||||
desc:
|
||||
这个游戏有很多有用的快捷键设定。以下是其中的一些介绍，记得在<strong>按键设置</strong>中查看其他按键设定！<br><br>
|
||||
<code class='keybinding'>CTRL 键</code> + 拖动：选择区域以复制或删除。<br> <code
|
||||
class='keybinding'>SHIFT 键</code>： 按住以放置多个同一种设施。<br> <code
|
||||
class='keybinding'>ALT 键</code>：反向放置传送带。<br>
|
||||
@ -251,29 +253,23 @@ dialogs:
|
||||
missingMods: 缺失的游戏模组（Mods）
|
||||
newMods: 新安装的游戏模组（Mods）
|
||||
resourceLoadFailed:
|
||||
title: Resources failed to load
|
||||
demoLinkText: shapez demo on Steam
|
||||
descWeb: "One ore more resources could not be loaded. Make sure you have a
|
||||
stable internet connection and try again. If this still doesn't
|
||||
work, make sure to also disable any browser extensions (including
|
||||
adblockers).<br><br> As an alternative, you can also play the
|
||||
<demoOnSteamLinkText>. <br><br> Error Message:"
|
||||
descSteamDemo: "One ore more resources could not be loaded. Try restarting the
|
||||
game - If that does not help, try reinstalling and verifying the
|
||||
game files via Steam. <br><br> Error Message:"
|
||||
title: 资源载入失败
|
||||
demoLinkText: Steam上的《异形工厂》（Shapez）Demo
|
||||
descWeb: “一个或多个资源载入失败，请确认您的网络连接正常并再次尝试。如果仍然载入失败，
|
||||
请确认您已经关闭了所有浏览器插件（比如"广告屏蔽"）。<br><br>或者，你也可以试玩
|
||||
<demoOnSteamLinkText>。<br><br> 错误提示：”
|
||||
descSteamDemo: “一个或多个资源载入失败，请重新启动游戏。
|
||||
如果仍然存在问题，请重新安装游戏或者通过Steam验证游戏安装文件。
|
||||
<br><br> 错误提示：”
|
||||
steamSsoError:
|
||||
title: Full Version Logout
|
||||
desc: You have been logged out from the Full Browser Version since either your
|
||||
network connection is unstable or you are playing on another
|
||||
device.<br><br> Please make sure you don't have shapez open in any
|
||||
other browser tab or another computer with the same Steam
|
||||
account.<br><br> You can login again in the main menu.
|
||||
title: 从完整版登出
|
||||
desc: 由于您的网络连接不稳定，或者您已在另一台设备上开始游戏。您已经从浏览器登出了完整版游戏。
|
||||
<br><br> 请确认您没有在其他浏览器或电脑用同一Steam账号登录《异形工厂》（Shapez）。<br><br>
|
||||
您可以从主界面再次登录。
|
||||
steamSsoNoOwnership:
|
||||
title: Full Edition not owned
|
||||
desc: In order to play the Full Edition in your Browser, you need to own both
|
||||
the base game and the Puzzle DLC on your Steam account.<br><br>
|
||||
Please make sure you own both, signed in with the correct Steam
|
||||
account and then try again.
|
||||
title: 尚未获得完整版
|
||||
desc: 在浏览器内玩完整版游戏，您需要通过Steam购买游戏本体和DLC<br><br>
|
||||
请确认您已经购买，请使用同一Steam账号登录并再次尝试。
|
||||
ingame:
|
||||
keybindingsOverlay:
|
||||
moveMap: 移动地图
|
||||
@ -359,11 +355,13 @@ ingame:
|
||||
hints:
|
||||
1_1_extractor: 在<strong>圆形</strong>上放置一个<strong>开采器</strong>来获取圆形！<br><br>提示：<strong>按下鼠标左键</strong>选中<strong>开采器</strong>
|
||||
1_2_conveyor: 用<strong>传送带</strong>将您的开采器连接到中心基地上！<br><br>提示：选中<strong>传送带</strong>后<strong>按下鼠标左键可拖动</strong>布置传送带！
|
||||
1_3_expand: 您可以放置更多的<strong>开采器</strong>和<strong>传送带</strong>来更有效率地完成关卡目标。<br><br>
|
||||
1_3_expand:
|
||||
您可以放置更多的<strong>开采器</strong>和<strong>传送带</strong>来更有效率地完成关卡目标。<br><br>
|
||||
提示：按住 <strong>SHIFT</strong> 键可放置多个<strong>开采器</strong>，注意用
|
||||
<strong>R</strong> 键可旋转<strong>开采器</strong>的出口方向，确保开采的图形可以顺利传送。
|
||||
2_1_place_cutter: 现在放置一个<strong>切割器</strong>，这个设施可把<strong>圆形</strong>切成两半！<br><br>注意：无论如何放置，切割机总是<strong>从上到下</strong>切割。
|
||||
2_2_place_trash: 使用切割机后产生的废弃图形会导致<strong>堵塞</strong>。<br><br>注意使用<strong>垃圾桶</strong>清除当前
|
||||
2_2_place_trash:
|
||||
使用切割机后产生的废弃图形会导致<strong>堵塞</strong>。<br><br>注意使用<strong>垃圾桶</strong>清除当前
|
||||
(!) 不需要的废物。
|
||||
2_3_more_cutters: 干的好！现在放置 <strong>2
|
||||
个以上的切割机</strong>来加快当前缓慢的过程！<br><br>提示：用<strong>快捷键 0 - 9
|
||||
@ -427,9 +425,9 @@ ingame:
|
||||
achievements:
|
||||
title: 成就
|
||||
desc: 挑战全成就解锁！
|
||||
titleV2: "Get the full version now on Steam to unlock:"
|
||||
titleExpiredV2: Demo completed!
|
||||
titleEnjoyingDemo: Enjoy the demo?
|
||||
titleV2: “现在就购买完整版游戏以解锁”
|
||||
titleExpiredV2: “恭喜，Demo通关！”
|
||||
titleEnjoyingDemo: 游戏愉快！
|
||||
puzzleEditorSettings:
|
||||
zoneTitle: 区域
|
||||
zoneWidth: 宽度
|
||||
@ -669,7 +667,8 @@ storyRewards:
|
||||
desc: 恭喜！您解锁了<strong>旋转机</strong>。它会顺时针将输入的<strong>图形旋转90度</strong>。
|
||||
reward_painter:
|
||||
title: 上色
|
||||
desc: 恭喜！您解锁了<strong>上色器</strong>。开采一些颜色（就像您开采图形一样），将其在上色器中与图形结合来将图形上色！
|
||||
desc:
|
||||
恭喜！您解锁了<strong>上色器</strong>。开采一些颜色（就像您开采图形一样），将其在上色器中与图形结合来将图形上色！
|
||||
<br>注意：如果您不幸患有色盲，可以在设置中启用<strong>色盲模式</strong>
|
||||
reward_mixer:
|
||||
title: 混合颜色
|
||||
@ -686,11 +685,13 @@ storyRewards:
|
||||
desc: 恭喜！您解锁了<strong>隧道</strong>。它可放置在<strong>传送带</strong>或<strong>设施</strong>下方以运送物品。
|
||||
reward_rotater_ccw:
|
||||
title: 逆时针旋转
|
||||
desc: 恭喜！您解锁了<strong>旋转机</strong>的<strong>逆时针</strong>变体。它可以逆时针旋转<strong>图形</strong>。
|
||||
desc:
|
||||
恭喜！您解锁了<strong>旋转机</strong>的<strong>逆时针</strong>变体。它可以逆时针旋转<strong>图形</strong>。
|
||||
<br>选择<strong>旋转机</strong>然后按 "T" 键来选取这个变体。
|
||||
reward_miner_chainable:
|
||||
title: 链式开采器
|
||||
desc: 您已经解锁了<strong>链式开采器</strong>！它能<strong>转发资源</strong>给其他的开采器，这样您就能更有效率的开采各类资源了！<br><br>
|
||||
desc:
|
||||
您已经解锁了<strong>链式开采器</strong>！它能<strong>转发资源</strong>给其他的开采器，这样您就能更有效率的开采各类资源了！<br><br>
|
||||
注意：新的开采器已替换了工具栏里旧的开采器！
|
||||
reward_underground_belt_tier_2:
|
||||
title: 二级隧道
|
||||
@ -707,12 +708,14 @@ storyRewards:
|
||||
<br>它<strong>优先从左边</strong>输出，这样您就可以用它做一个<strong>溢流门</strong>了！
|
||||
reward_freeplay:
|
||||
title: 自由模式
|
||||
desc: 成功了！您解锁了<strong>自由模式</strong>！挑战升级！这意味着现在将<strong>随机</strong>生成图形！
|
||||
desc:
|
||||
成功了！您解锁了<strong>自由模式</strong>！挑战升级！这意味着现在将<strong>随机</strong>生成图形！
|
||||
从现在起，中心基地最为需要的是<strong>产量</strong>，强烈建议您去制造一台能够自动交付所需图形的机器！<br><br>
|
||||
基地会在<strong>电线层</strong>输出需要的图形，您需要去分析图形并在此基础上自动配置您的工厂。
|
||||
reward_blueprints:
|
||||
title: 蓝图
|
||||
desc: 您现在可以<strong>复制粘贴</strong>您的工厂的一部分了！按住 CTRL 键并拖动鼠标来选择一块区域，然后按 C 键复制。
|
||||
desc:
|
||||
您现在可以<strong>复制粘贴</strong>您的工厂的一部分了！按住 CTRL 键并拖动鼠标来选择一块区域，然后按 C 键复制。
|
||||
<br><br>粘贴并<strong>不是免费的</strong>，您需要制造<strong>蓝图图形</strong>来负担。蓝图图形是您刚刚交付的图形。
|
||||
no_reward:
|
||||
title: 下一关
|
||||
@ -740,7 +743,8 @@ storyRewards:
|
||||
<br>注意：您注意到<strong>传送读取器</strong>和<strong>存储器</strong>输出的他们最后读取的物品了吗？试着在显示屏上展示一下！
|
||||
reward_constant_signal:
|
||||
title: 恒定信号
|
||||
desc: 恭喜！您解锁了生成于电线层之上的<strong>恒定信号</strong>，把它连接到<strong>过滤器</strong>时非常有用。
|
||||
desc:
|
||||
恭喜！您解锁了生成于电线层之上的<strong>恒定信号</strong>，把它连接到<strong>过滤器</strong>时非常有用。
|
||||
<br>比如，它能发出图形、颜色、开关值（1 / 0）的固定信号。
|
||||
reward_logic_gates:
|
||||
title: 逻辑门
|
||||
@ -759,7 +763,8 @@ storyRewards:
|
||||
<strong>提示</strong>：可在设置中打开电线层教程！
|
||||
reward_filter:
|
||||
title: 物品过滤器
|
||||
desc: 恭喜！您解锁了<strong>物品过滤器</strong>！它会根据在电线层上输入的信号决定是从上面还是右边输出物品。<br><br>
|
||||
desc:
|
||||
恭喜！您解锁了<strong>物品过滤器</strong>！它会根据在电线层上输入的信号决定是从上面还是右边输出物品。<br><br>
|
||||
您也可以输入开关值（1 / 0）信号来激活或者禁用它。
|
||||
reward_demo_end:
|
||||
title: 试玩结束
|
||||
@ -815,7 +820,8 @@ settings:
|
||||
light: 浅色
|
||||
refreshRate:
|
||||
title: 模拟频率、刷新频率
|
||||
description: 在这里更改刷新频率，这样游戏可以正确地根据您的屏幕进行模拟。但是如果您的电脑性能不佳，提高刷新频率可能降低帧数。注意，60Hz
|
||||
description:
|
||||
在这里更改刷新频率，这样游戏可以正确地根据您的屏幕进行模拟。但是如果您的电脑性能不佳，提高刷新频率可能降低帧数。注意，60Hz
|
||||
以上的任何频率都会导致游戏卡顿！
|
||||
alwaysMultiplace:
|
||||
title: 多重放置
|
||||
@ -1152,8 +1158,8 @@ mods:
|
||||
noModSupport: 您需要在 Steam 平台获得完整版才可以安装游戏模组（Mods）。
|
||||
togglingComingSoon:
|
||||
title: 即将开放
|
||||
description: 当前只能通过将游戏模组（Mods）文件复制到 mods 文件夹或从 mods 文件夹移除来启用或禁用游戏模组（Mods）。
|
||||
description:
|
||||
当前只能通过将游戏模组（Mods）文件复制到 mods 文件夹或从 mods 文件夹移除来启用或禁用游戏模组（Mods）。
|
||||
但是，可以切换游戏模组（Mods）已经计划在之后的更新中实现！
|
||||
modWebsite: 模组网站
|
||||
browserNoSupport: Due to browser restrictions it is currently only possible to
|
||||
install mods in the Steam version - Sorry!
|
||||
browserNoSupport: 由于浏览器功能限制，目前游戏模组（Mods）只能在Steam版本中安装进行。敬请理解！
|
||||
|
||||
Loading…
Reference in New Issue
Block a user