dorian
/
godot-html-js-int-demo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve style for frame.
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Dorian Pula 2020-12-17 14:10:19 -05:00
parent 58be256f8a
commit b6d95a7dde
1 changed files with 19 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
fixed-size.html
View File

@ -195,7 +195,7 @@
$GODOT_HEAD_INCLUDE $GODOT_HEAD_INCLUDE
</head> </head>
<body> <body>
<div id="game_box" class="game_frame hidden"> <div id="game" class="pretty-frame hidden">
<h1>Click to Victory!</h1> <h1>Click to Victory!</h1>
<div id="container"> <div id="container">
<canvas id="canvas" width="640" height="480"> <canvas id="canvas" width="640" height="480">
@ -415,8 +415,16 @@ $GODOT_HEAD_INCLUDE
const gameLauncher = document.querySelector("#gameLauncher"); const gameLauncher = document.querySelector("#gameLauncher");
gameLauncher.remove(); gameLauncher.remove();
const gameFrame = document.querySelector("#game_box"); const gameFrame = document.querySelector("#game");
gameFrame.className = "game_frame"; showElement(gameFrame);
}
const hideElement = (element) => {
element.className = "pretty-frame hidden"
}
const showElement = (element) => {
element.className = "pretty-frame"
} }
window.addEventListener("load", () => { window.addEventListener("load", () => {
@ -436,10 +444,10 @@ $GODOT_HEAD_INCLUDE
} }
const showScoresAfterGameEnd = () => { const showScoresAfterGameEnd = () => {
const game_box = document.querySelector('#game_box'); const game = document.querySelector('#game');
game_box.remove(); hideElement(game);
const score_list = document.querySelector('#scoreList'); const finalScoreBox = document.querySelector('#scoreList');
score_list.className = "game_frame"; showElement(finalScoreBox);
} }
const updateScoreMessage = () => { const updateScoreMessage = () => {
@ -457,7 +465,7 @@ $GODOT_HEAD_INCLUDE
height: 0px; height: 0px;
} }
.game_frame { .pretty-frame {
background-color: #383838; background-color: #383838;
color: #f0f0f0; color: #f0f0f0;
width: 66%; width: 66%;
@ -468,7 +476,7 @@ $GODOT_HEAD_INCLUDE
} }
</style> </style>
<div id="gameLauncher" class="game_frame"> <div id="gameLauncher" class="pretty-frame">
<h1>Click to Victory!</h1> <h1>Click to Victory!</h1>
<form> <form>
<label for="playerName">Player Name</label> <label for="playerName">Player Name</label>
@ -477,7 +485,7 @@ $GODOT_HEAD_INCLUDE
</form> </form>
</div> </div>
<div id="scoreList" class="game_frame hidden"> <div id="scoreList" class="pretty-frame hidden">
<h1 id="scoreMessage">Your Score Here</h2> <h1 id="scoreMessage">Your Score Here</h2>
</div> </div>
<!-- End of Custom Game block --> <!-- End of Custom Game block -->