morgan/Grinch-AP
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Updates all styles save for the tooltip and tracker, which are forthcoming. I just really wanted to commit all these changes.

Browse Source
This commit is contained in:
Chris Wilson
2020-11-30 21:15:47 -05:00
parent 7891c2761f
commit bd3b419de0
38 changed files with 300 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
WebHostLib/static/assets/check.js Normal file
View File

@@ -0,0 +1,9 @@
window.addEventListener('load', () => {
document.getElementById('check-button').addEventListener('click', () => {
document.getElementById('file-input').click();
});
document.getElementById('file-input').addEventListener('change', () => {
document.getElementById('check-form').submit();
});
});

4
WebHostLib/static/assets/generate.js
View File

@@ -1,9 +1,9 @@
window.addEventListener('load', () => {
document.getElementById('upload-button').addEventListener('click', () => {
document.getElementById('generate-game-button').addEventListener('click', () => {
document.getElementById('file-input').click();
});
document.getElementById('file-input').addEventListener('change', () => {
document.getElementById('upload-form').submit();
document.getElementById('generate-game-form').submit();
});
});

6
WebHostLib/static/assets/uploads.js → WebHostLib/static/assets/hostGame.js
View File

@@ -1,13 +1,13 @@
window.addEventListener('load', () => {
document.getElementById('upload-button').addEventListener('click', () => {
document.getElementById('host-game-button').addEventListener('click', () => {
document.getElementById('file-input').click();
});
document.getElementById('file-input').addEventListener('change', () => {
document.getElementById('upload-form').submit();
document.getElementById('host-game-form').submit();
});
$("#uploads-table").DataTable({
$("#host-game-table").DataTable({
"paging": false,
"ordering": true,
"order": [[ 3, "desc" ]],

6
WebHostLib/static/assets/player-settings.js
View File

@@ -1,7 +1,7 @@
let spriteData = null;
window.addEventListener('load', () => {
const gameSettings = document.getElementById('game-settings');
const gameSettings = document.getElementById('player-settings');
Promise.all([fetchPlayerSettingsYaml(), fetchPlayerSettingsJson(), fetchSpriteData()]).then((results) => {
// Load YAML into object
const sourceData = jsyaml.safeLoad(results[0], { json: true });
@@ -175,7 +175,7 @@ const buildUI = (settings) => {
}
Object.keys(settingTypes).forEach((settingTypeKey) => {
const sectionHeader = document.createElement('h1');
const sectionHeader = document.createElement('h2');
sectionHeader.innerText = settingTypes[settingTypeKey];
settingsWrapper.appendChild(sectionHeader);
@@ -200,7 +200,7 @@ const buildUI = (settings) => {
});
// Build sprite options
const spriteOptionsHeader = document.createElement('h1');
const spriteOptionsHeader = document.createElement('h2');
spriteOptionsHeader.innerText = 'Sprite Options';
settingsWrapper.appendChild(spriteOptionsHeader);

3
WebHostLib/static/assets/styleController.js Normal file
View File

@@ -0,0 +1,3 @@
window.addEventListener('load', () => {
// Animate the water by swapping out background images every few seconds, maybe?
});

0
WebHostLib/static/assets/view_seed.js → WebHostLib/static/assets/viewSeed.js
View File

8
WebHostLib/static/styles/uploads.css → WebHostLib/static/styles/check.css
View File

@@ -1,22 +1,22 @@
#uploads-wrapper{
#check-wrapper{
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
#uploads{
#check{
width: 620px;
height: 280px;
text-align: center;
}
#uploads-form-wrapper{
#check-form-wrapper{
width: 100%;
text-align: center;
margin-bottom: 1rem;
}
#upload-form{
#check-form{
display: none;
}

11
WebHostLib/static/styles/checkResult.css Normal file
View File

@@ -0,0 +1,11 @@
#check-result-wrapper{
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
#check-result{
width: 540px;
text-align: center;
}

1
WebHostLib/static/styles/cloudHeader.css
View File

@@ -12,6 +12,7 @@
font-family: HyliaSerif, sans-serif;
padding: 10px;
line-height: 2rem;
z-index: 9999;
}
#cloud-header #site-title img{

21
WebHostLib/static/styles/generate.css Normal file
View File

@@ -0,0 +1,21 @@
#generate-game-wrapper{
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
#generate-game{
width: 660px;
text-align: center;
}
#generate-game-form-wrapper{
width: 100%;
text-align: center;
margin-bottom: 1rem;
}
#generate-game-form{
display: none;
}

18
WebHostLib/static/styles/globalStyles.css
View File

@@ -12,7 +12,6 @@ html{
body{
margin: 0;
padding-bottom: 62px;
}
button{
@@ -21,13 +20,24 @@ button{
border-radius: 4px;
}
h1, h2, h3{
h1, h2, h3, h4, h5, h6{
font-family: HyliaSerif, sans-serif;
font-size: 3rem;
font-weight: normal;
margin: 0;
}
h1{ font-size: 3rem; }
h2{ font-size: 2rem; }
h3{ font-size: 1.75rem; }
h4{
font-size: 1.5rem;
margin-bottom:0.5rem;
}
h5, h6{
font-size: 1.25rem;
margin-bottom: 0.5rem;
}
.grass-island{
background:
url('../static/backgrounds/cliffs/grass/cliff-top-left-corner.png') top left no-repeat,
@@ -49,7 +59,7 @@ h1, h2, h3{
20px 140px, /* bottom */
140px 20px, /* left */
140px 20px, /* right */
100px auto; /* center */
140px 140px; /* center */
min-width: 280px;
min-height: 280px;

25
WebHostLib/static/styles/hostGame.css Normal file
View File

@@ -0,0 +1,25 @@
#host-game-wrapper{
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
#host-game{
width: 620px;
text-align: center;
}
#host-game.wider{
width: 980px;
}
#host-game-form-wrapper{
width: 100%;
text-align: center;
margin-bottom: 1rem;
}
#host-game-form{
display: none;
}

26
WebHostLib/static/styles/hostRoom.css Normal file
View File

@@ -0,0 +1,26 @@
html{
background-image: url('../static/backgrounds/dirt/dirt-0005-large.png');
background-repeat: repeat;
background-size: 900px 900px;
}
#host-room{
width: calc(100% - 5rem);
margin-left: auto;
margin-right: auto;
background-color: rgba(0, 0, 0, 0.15);
border-radius: 8px;
padding: 1rem;
color: #ffe993;
}
#host-room a{
color: #ffffff;
}
#host-room input[type=text]{
width: 500px;
min-width: 370px;
padding: 0.125rem;
height: 1.5rem;
}

5
WebHostLib/static/styles/host_room.css
View File

@@ -1,5 +0,0 @@
#host-room input[type=text]{
width: calc(100% - 6px);
padding: 0.125rem;
height: 1.5rem;
}

9
WebHostLib/static/styles/grassFooter.css → WebHostLib/static/styles/islandFooter.css
View File

@@ -3,12 +3,11 @@
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 100%;
height: 62px;
margin-top: 2rem;
width: calc(100% - 0.5rem);
height: 66px;
padding-left: 0.5rem;
line-height: 30px;
position: fixed;
left: 0;
position: absolute;
bottom: 0;
left: 0;
}

52
WebHostLib/static/styles/player-settings.css
View File

@@ -1,87 +1,99 @@
#game-settings{
margin-left: auto;
margin-right: auto;
html{
background-image: url('../static/backgrounds/dirt/dirt-0005-large.png');
background-repeat: repeat;
background-size: 900px 900px;
}
#game-settings code{
background-color: #dbe1bc;
#player-settings{
width: 60rem;
margin-left: auto;
margin-right: auto;
background-color: rgba(0, 0, 0, 0.15);
border-radius: 8px;
padding: 1rem;
color: #ffe993;
}
#player-settings code{
background-color: #d9cd8e;
border-radius: 4px;
padding-left: 0.25rem;
padding-right: 0.25rem;
color: #000000;
}
#game-settings .instructions{
#player-settings .instructions{
text-align: left;
}
#game-settings #settings-wrapper .setting-wrapper{
#player-settings #settings-wrapper .setting-wrapper{
display: flex;
flex-direction: column;
justify-content: flex-start;
width: 100%;
}
#game-settings #settings-wrapper .setting-wrapper .title-span{
#player-settings #settings-wrapper .setting-wrapper .title-span{
font-weight: bold;
}
#game-settings #settings-wrapper{
#player-settings #settings-wrapper{
margin-top: 1.5rem;
}
#game-settings #settings-wrapper #sprite-picker{
#player-settings #settings-wrapper #sprite-picker{
margin-bottom: 2rem;
}
#game-settings #settings-wrapper #sprite-picker #sprite-picker-sprites{
#player-settings #settings-wrapper #sprite-picker #sprite-picker-sprites{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
#game-settings #settings-wrapper #sprite-picker .sprite-img-wrapper{
#player-settings #settings-wrapper #sprite-picker .sprite-img-wrapper{
cursor: pointer;
margin: 10px;
}
/* Center tooltip text for sprite images */
#game-settings #settings-wrapper #sprite-picker .sprite-img-wrapper::after{
#player-settings #settings-wrapper #sprite-picker .sprite-img-wrapper::after{
text-align: center;
}
#game-settings #settings-wrapper #sprite-picker .sprite-img-wrapper img{
#player-settings #settings-wrapper #sprite-picker .sprite-img-wrapper img{
width: 32px;
height: 48px;
}
#game-settings table.option-set{
#player-settings table.option-set{
width: 100%;
margin-bottom: 1.5rem;
}
#game-settings table.option-set td.option-name{
#player-settings table.option-set td.option-name{
width: 150px;
font-weight: bold;
font-size: 1rem;
line-height: 2rem;
}
#game-settings table.option-set td.option-name .delete-button{
#player-settings table.option-set td.option-name .delete-button{
cursor: pointer;
}
#game-settings table.option-set td.option-value{
#player-settings table.option-set td.option-value{
line-height: 2rem;
}
#game-settings table.option-set td.option-value input[type=range]{
#player-settings table.option-set td.option-value input[type=range]{
width: 90%;
min-width: 300px;
vertical-align: middle;
}
#game-settings #game-settings-button-row{
#player-settings #player-settings-button-row{
display: flex;
flex-direction: row;
justify-content: space-between;

4
WebHostLib/static/styles/tablepage.css
View File

@@ -19,7 +19,7 @@ table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTa
}
table.dataTable thead{
background-color: #b0a77d;
/* background-color: #b0a77d; */
}
table.dataTable thead tr th{
@@ -32,5 +32,5 @@ table.dataTable tbody tr{
}
table.dataTable tbody tr:hover{
background-color: #e2eabb;
/* background-color: #e2eabb; */
}

25
WebHostLib/static/styles/tutorial.css
View File

@@ -1,6 +1,21 @@
html{
background-image: url('../static/backgrounds/dirt/dirt-0005-large.png');
background-repeat: repeat;
background-size: 900px 900px;
}
#tutorial-wrapper{
width: 70rem;
margin-left: auto;
margin-right: auto;
background-color: rgba(0, 0, 0, 0.15);
border-radius: 8px;
padding: 1rem;
color: #ffe993;
}
#tutorial-wrapper a{
color: #ffffff;
}
#tutorial-wrapper h1{
@@ -9,6 +24,7 @@
border-bottom: 1px solid #9f916a;
cursor: pointer;
width: 100%;
margin-bottom: 0.5rem;
}
#tutorial-wrapper h2{
@@ -17,6 +33,7 @@
border-bottom: 1px solid #9f916a;
cursor: pointer;
width: 100%;
margin-bottom: 0.5rem;
}
#tutorial-wrapper h3{
@@ -25,12 +42,14 @@
text-align: left;
cursor: pointer;
width: 100%;
margin-bottom: 0.5rem;
}
#tutorial-wrapper h4{
font-size: 1.5rem;
font-weight: normal;
cursor: pointer;
margin-bottom: 0.5rem;
}
#tutorial-wrapper h5{
@@ -64,16 +83,18 @@
#tutorial-wrapper pre{
padding: 0.5rem 0.25rem;
background-color: #dce2bd;
background-color: #d9cd8e;
border: 1px solid #9f916a;
border-radius: 6px;
color: #000000;
}
#tutorial-wrapper code{
background-color: #dce2bd;
background-color: #d9cd8e;
border-radius: 4px;
padding-left: 0.25rem;
padding-right: 0.25rem;
color: #000000;
}
#tutorial-wrapper #tutorial-video-container{

26
WebHostLib/static/styles/viewSeed.css Normal file
View File

@@ -0,0 +1,26 @@
#view-seed-wrapper{
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
#view-seed-wrapper table td{
vertical-align: top;
}
#view-seed{
width: 620px;
min-height: 360px;
text-align: center;
}
#view-seed h3{
margin-bottom: 0.5rem;
}
#view-seed table{
text-align: left;
margin-left: auto;
margin-right: auto;
}

9
WebHostLib/static/styles/view_seed.css
View File

@@ -1,9 +0,0 @@
#view-seed-wrapper{
display: flex;
flex-direction: row;
justify-content: center;
}
#view-seed-wrapper table td{
vertical-align: top;
}