Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

backport multiplayer #2

Merged
merged 1 commit into from Mar 19, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
Binary file added public/assets/models/hero-2.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/assets/models/hero-3.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/assets/models/hero-4.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions public/assets/redo-alt-solid.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
167 changes: 77 additions & 90 deletions public/index.html
Expand Up @@ -124,6 +124,7 @@

#title-image-container {
text-align: center;
margin-top: auto;
margin-bottom: 20px;
}

Expand All @@ -137,37 +138,59 @@
justify-content: space-evenly;
}

@media screen and (max-width: 620px) {

#menu-element {
flex-direction: column;
}
#menu-element > div {
display: flex;
flex-direction: column;
}

#menu-element>div {
left: 50%;
transform: translateX( -50% );
}
.input {
width: 250px;
border: 1px solid #111;
border-radius: 4px;
margin-bottom: 30px;
white-space: nowrap;
}

.input input, .input button {
border: none;
}
.input button {
height: 24px;
background-color: transparent;
background-image: url(assets/redo-alt-solid.svg);
background-size: auto 75%;
background-repeat: no-repeat;
background-position: 35% 60%;
outline: none !important;
cursor: pointer;
}
.input input {
height: 28px;
width: 200px;
font-size: 20px;
border-right: 1px solid #111;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
margin: 0 1px; padding: 2px 0 0 5px;
}

#credits {
text-align: center;
margin-top: auto;
display: flex;
flex-direction: row;
justify-content: space-evenly;
}

#credits {
margin-top: 20px;
}
/* show the credits as long as we can, but if we cant - just dont: */

@media screen and ( max-height: 400px ) {
#credits { display: none; }
}

.menu-subelement {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-evenly;
padding: 15px 10px 15px 10px;
text-align: center;
background-color: white;
max-width: 220px;
border-radius: 4px;
border-width: 1px;
border-style: solid;
border-color: #111111
}
#credits > div:first-child {
max-width: 250px;
}

.section-title {
font-size: 1.3em;
Expand Down Expand Up @@ -197,29 +220,6 @@
width: 0;
}

#creator {
text-align: center;
}

.musician {
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 2px;
}

.about-button {
background-color: #f2f6f9;
text-decoration: none;
color: black;
padding: 3px;
margin-left: 5px;
border-style: solid;
border-width: 1px;
border-radius: 4px;
font-size: 0.7em;
}




Expand Down Expand Up @@ -695,10 +695,6 @@
<script src="js/SocketIO.js"></script>
<script src="js/soundMixer.js"></script>

<script async defer src="https://buttons.github.io/buttons.js"></script>

<script async defer src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

</head>


Expand Down Expand Up @@ -799,62 +795,53 @@
</div>

<div id="menu-element">

<div class="menu-subelement">

<div>
<div id='start-button'>
Your display name:
<div class="input">
<input autocomplete="off" id="game-name" maxlength="15" placeholder="(for multiplayer)" onclick="this.select()"></input><button
onclick="this.previousSibling.value = utils.randomDisplayName()">&nbsp;</button>
</div>
Your game pass:
<div class="input">
<input autocomplete="off" id="game-pass" maxlength="15" placeholder="(for multiplayer)" onclick="this.select()"></input><button
onclick="this.previousSibling.value = utils.randomString()">&nbsp;</button>
</div>
<div id="start-button">
Start
<div id="start-background">
<div id="start-loaded"></div>
</div>
</div>
</div>

<br>
</div>

<div id="creator">

<a class="github-button" href="https://github.com/felixmariotto/Edelweiss" data-size="large" aria-label="Star felixmariotto/Edelweiss on GitHub"> code on Github</a>
<div id="credits">

<br>
<div>

<a href="https://twitter.com/felix_mariotto?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Twitter</a>
<span class="section-title">Music :</span>

</div>
<br>

</div>
<a target="_blank" href="https://stromnoir.bandcamp.com/">Strom Noir</a>,
<a target="_blank" href="https://simonbainton.bandcamp.com/">Simon Bainton</a>,
<a target="_blank" href="http://www.tobiashellkvist.com/">Tobias Hellkvist</a>,
<a target="_blank" href="https://soundcloud.com/andrewodd/">Andrew Odd</a>,
<a target="_blank" href="https://www.kylepreston.com/">Kyle Preston</a>

<div class="menu-subelement" id="credits">
</div><div>

<span class="section-title">Music :</span>
<span class="section-title">Code :</span>

<br>

<a target="_blank" href="https://twitter.com/intent/follow?screen_name=felix_mariotto">Felix Mariotto</a>

<br>

<p class="musician">
Strom Noir
<a class="about-button" href="https://stromnoir.bandcamp.com/">about</a>
</p>

<p class="musician">
Simon Bainton
<a class="about-button" href="https://simonbainton.bandcamp.com/">about</a>
</p>

<p class="musician">
Tobias Hellkvist
<a class="about-button" href="http://www.tobiashellkvist.com">about</a>
</p>

<p class="musician">
Andrew Odd
<a class="about-button" href="https://soundcloud.com/andrewodd/">about</a>
</p>

<p class="musician">
Kyle Preston
<a class="about-button" href="https://www.kylepreston.com">about</a>
</p>
<a href="https://github.com/felixmariotto/Edelweiss#readme"><img src="https://github.com/favicon.ico" alt="GitHub" /></a>

</div>

Expand Down