Upgrade webpack config and inline svg-s
This commit is contained in:
schmelczerandras
parent
81a8834c4d
commit
f1a2131540
4 changed files with 34433 additions and 214 deletions
|
|
@ -50,20 +50,20 @@
|
|||
<section id="settings">
|
||||
<label for="enable-relative-movement">
|
||||
<input id="enable-relative-movement" type="checkbox" />
|
||||
<img alt="a dashed circle" src="static/circle.svg" />
|
||||
<img alt="a dashed circle" src="../static/circle.svg" />
|
||||
</label>
|
||||
|
||||
<label for="enable-vibration">
|
||||
<input id="enable-vibration" type="checkbox" />
|
||||
<img alt="vibrating mobile" src="static/vibrate.svg" />
|
||||
<img alt="vibrating mobile" src="../static/vibrate.svg" />
|
||||
</label>
|
||||
|
||||
<label for="enable-sounds">
|
||||
<input id="enable-sounds" type="checkbox" />
|
||||
<img alt="speaker with sound waves" src="static/volume.svg" />
|
||||
<img alt="speaker with sound waves" src="../static/volume.svg" />
|
||||
</label>
|
||||
|
||||
<img id="logout" alt="logout" src="static/logout.svg" />
|
||||
<img id="logout" alt="logout" src="../static/logout.svg" />
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
id="toggle-settings"
|
||||
class="icon"
|
||||
alt="toggle-settings"
|
||||
src="static/settings.svg"
|
||||
src="../static/settings.svg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -80,13 +80,13 @@
|
|||
class="full-screen-controllers"
|
||||
id="minimize"
|
||||
alt="minimize-application"
|
||||
src="static/minimize.svg"
|
||||
src="../static/minimize.svg"
|
||||
/>
|
||||
<img
|
||||
class="full-screen-controllers"
|
||||
id="maximize"
|
||||
alt="maximize-application"
|
||||
src="static/maximize.svg"
|
||||
src="../static/maximize.svg"
|
||||
/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -11,15 +11,12 @@ import { CharacterView } from './scripts/objects/character-view';
|
|||
import { LampView } from './scripts/objects/lamp-view';
|
||||
import { ProjectileView } from './scripts/objects/projectile-view';
|
||||
import { PlanetView } from './scripts/objects/planet-view';
|
||||
import './styles/main.scss';
|
||||
import './main.scss';
|
||||
import { LandingPageBackground } from './scripts/landing-page-background';
|
||||
import { JoinFormHandler } from './scripts/join-form-handler';
|
||||
import { handleFullScreen } from './scripts/handle-full-screen';
|
||||
import { Game } from './scripts/game';
|
||||
import { PlayerCharacterView } from './scripts/objects/player-character-view';
|
||||
import '../static/settings.svg';
|
||||
import '../static/minimize.svg';
|
||||
import '../static/maximize.svg';
|
||||
import { handleInsights } from './scripts/handle-insights';
|
||||
import { getInsightsFromRenderer } from './scripts/get-insights-from-renderer';
|
||||
import { Renderer } from 'sdf-2d';
|
||||
|
|
@ -90,7 +87,6 @@ const toggleSettings = () =>
|
|||
|
||||
const applyServerContainerShadows = () => {
|
||||
const { scrollHeight, clientHeight, scrollTop } = serverContainer;
|
||||
console.log(scrollHeight, clientHeight, scrollTop);
|
||||
if (scrollHeight > clientHeight) {
|
||||
serverContainer.className = 'scroll';
|
||||
if (scrollTop === 0) {
|
||||
|
|
|
|||
192
frontend/src/main.scss
Normal file
192
frontend/src/main.scss
Normal file
|
|
@ -0,0 +1,192 @@
|
|||
@import './styles/vars.scss';
|
||||
@import './styles/button.scss';
|
||||
@import './styles/form.scss';
|
||||
@import './styles/mixins.scss';
|
||||
@import './styles/settings.scss';
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&family=Open+Sans&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
color: white;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
|
||||
&::selection {
|
||||
color: white;
|
||||
background-color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 0.85rem;
|
||||
@media (max-width: $breakpoint) {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
&,
|
||||
* {
|
||||
font-family: 'Comfortaa', sans-serif;
|
||||
}
|
||||
font-size: 6rem;
|
||||
text-align: center;
|
||||
padding-bottom: $medium-padding;
|
||||
|
||||
@media (max-height: $height-breakpoint) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: $red;
|
||||
&::selection {
|
||||
color: $accent;
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
canvas {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: black;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: hidden;
|
||||
|
||||
#landing-ui {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#overlay {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
h2 {
|
||||
margin: $large-padding 0;
|
||||
}
|
||||
|
||||
.player-tag {
|
||||
font-size: 1.3rem;
|
||||
position: absolute;
|
||||
transform: translateX(-50%) translateY(-50%) rotate(-15deg);
|
||||
transition: left 200ms, top 200ms;
|
||||
|
||||
div {
|
||||
height: 3px;
|
||||
background-color: rebeccapurple;
|
||||
}
|
||||
}
|
||||
|
||||
.ownership {
|
||||
font-size: 1.3rem;
|
||||
position: absolute;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
.planet-progress {
|
||||
position: absolute;
|
||||
top: $small-padding;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 50%;
|
||||
display: flex;
|
||||
$height: 8px;
|
||||
height: $height;
|
||||
|
||||
border-radius: 4px;
|
||||
|
||||
div {
|
||||
height: $height;
|
||||
}
|
||||
|
||||
div:nth-child(1) {
|
||||
background: rebeccapurple;
|
||||
}
|
||||
|
||||
div:nth-child(2) {
|
||||
background: gray;
|
||||
}
|
||||
|
||||
div:nth-child(3) {
|
||||
background: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#server-container {
|
||||
max-height: 30vh;
|
||||
overflow-y: auto;
|
||||
|
||||
&::-webkit-scrollbar-track,
|
||||
&::-webkit-scrollbar {
|
||||
background-color: transparent;
|
||||
width: 3px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: $accent;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
transition: box-shadow $animation-time;
|
||||
&.scroll {
|
||||
box-shadow: inset 0 -8px 8px -8px rgba(0, 0, 0, 0.4),
|
||||
inset 0 8px 8px -8px rgba(0, 0, 0, 0.4);
|
||||
&.top {
|
||||
box-shadow: inset 0 -8px 8px -8px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
&.bottom {
|
||||
box-shadow: inset 0 8px 8px -8px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.full-screen-controllers {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
box-sizing: content-box;
|
||||
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
|
||||
padding: $medium-padding;
|
||||
@include square($large-icon);
|
||||
@media (max-width: $breakpoint) {
|
||||
@include square($small-icon);
|
||||
padding: $small-padding;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -6,7 +6,6 @@
|
|||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
|
@ -16,17 +15,17 @@
|
|||
cursor: pointer;
|
||||
|
||||
#toggle-settings {
|
||||
@include square($large-icon);
|
||||
@media (max-width: $breakpoint) {
|
||||
@include square($small-icon);
|
||||
}
|
||||
|
||||
animation: spin 32s linear infinite;
|
||||
@keyframes spin {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@include square($large-icon);
|
||||
@media (max-width: $breakpoint) {
|
||||
@include square($small-icon);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -59,10 +58,12 @@
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
img {
|
||||
img,
|
||||
svg {
|
||||
cursor: pointer;
|
||||
transition: opacity $animation-time;
|
||||
margin-bottom: $small-padding;
|
||||
margin-left: 0;
|
||||
@include square($large-icon);
|
||||
@media (max-width: $breakpoint) {
|
||||
@include square($small-icon);
|
||||
|
|
@ -73,49 +74,49 @@
|
|||
|
||||
label {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
width: 0;
|
||||
height: 0;
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:not(:checked) + img {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: ' ';
|
||||
background: white;
|
||||
position: absolute;
|
||||
|
||||
$height: 4px;
|
||||
width: $height;
|
||||
top: $height / 2;
|
||||
|
||||
right: 0;
|
||||
transform-origin: top right;
|
||||
border-radius: 100px;
|
||||
input[type='checkbox'] {
|
||||
width: 0;
|
||||
height: 0;
|
||||
transform: rotate(45deg) translateY(17%);
|
||||
transition: height $animation-time;
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
|
||||
@media (max-width: $breakpoint) {
|
||||
$height: 2px;
|
||||
&:not(:checked) + * {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
background: white;
|
||||
position: absolute;
|
||||
|
||||
$height: 4px;
|
||||
width: $height;
|
||||
top: $height / 2;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:checked):after {
|
||||
height: $large-icon;
|
||||
@media (max-width: $breakpoint) {
|
||||
height: $small-icon;
|
||||
right: 0;
|
||||
transform-origin: top right;
|
||||
border-radius: 100px;
|
||||
height: 0;
|
||||
transform: rotate(45deg) translateY(17%);
|
||||
transition: height $animation-time;
|
||||
|
||||
@media (max-width: $breakpoint) {
|
||||
$height: 2px;
|
||||
width: $height;
|
||||
top: $height / 2;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:checked):after {
|
||||
height: $large-icon;
|
||||
@media (max-width: $breakpoint) {
|
||||
height: $small-icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue