From 5c5ef21a6ac83d5b12679effdee64d48b8197a13 Mon Sep 17 00:00:00 2001
From: Louis Capitanchik <contact@louiscap.co>
Date: Tue, 2 Aug 2022 20:18:17 +0100
Subject: [PATCH] Fix up 'press play to start' button
---
game_core/flit.toml | 11 +++---
game_core/index.html | 94 ++++++++++++++++++++++++++++++++++++++++++--
2 files changed, 96 insertions(+), 9 deletions(-)
diff --git a/game_core/flit.toml b/game_core/flit.toml
index 69ecdea..38de045 100644
--- a/game_core/flit.toml
+++ b/game_core/flit.toml
@@ -1,12 +1,9 @@
["script[type='module']"]
action = "wrap"
template ='''
-<div id="root">
- <button id="start_game">Start Game</button>
-</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
- document.getElementById('start_game').addEventListener('click', function() {
+ document.getElementById('start_button').addEventListener('click', function() {
let element = document.createElement('{{{TAG}}}');
let attr_string = `{{{ATTR}}}`
attr_string.split(' ').forEach(function(attr) {
@@ -15,7 +12,11 @@ document.addEventListener('DOMContentLoaded', () => {
});
element.innerHTML = `{{{CONTENT}}}`;
document.body.appendChild(element);
-
+ const remove = ['start_container', 'init-styles']
+ remove.forEach(function(id) {
+ let container = document.getElementById(id);
+ container.parentNode.removeChild(container);
+ });
});
});
</script>'''
\ No newline at end of file
diff --git a/game_core/index.html b/game_core/index.html
index ee7ade5..7e303d2 100644
--- a/game_core/index.html
+++ b/game_core/index.html
@@ -10,12 +10,98 @@
padding: 0;
}
</style>
-<!-- <link data-trunk rel="copy-dir" href="credits"/>-->
-<!-- <link data-trunk rel="copy-file" href="build/windows/icon.ico"/>-->
-<!-- <link rel="icon" href="icon.ico">-->
-<!-- <link data-trunk rel="inline" href="build/web/styles.css"/>-->
+ <style id="init-styles">
+ * {
+ transition: all 0.2s linear;
+ }
+
+ #start_container {
+ width: 100vw;
+ height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ }
+
+ h1 {
+ font-family: sans-serif;
+ font-weight: bolder;
+ margin-top: 3rem;
+ margin-bottom: 3rem;
+ animation-name: float-anim;
+ animation-duration: 2.5s;
+ animation-iteration-count: infinite;
+ animation-timing-function: ease-in-out;
+ animation-direction: alternate;
+ }
+
+ @keyframes float-anim {
+ 0% {
+ transform: translateY(10px);
+ }
+ 100% {
+ transform: translateY(-10px);
+ }
+ }
+
+ #start_button {
+ width: 25%;
+ height: 25%;
+ background-color: black;
+ border-radius: 50%;
+ cursor: pointer;
+ }
+
+ .play-button-component {
+ fill: none;
+ stroke: #ffffff;
+ stroke-width: 10;
+ stroke-linecap: round;
+ stroke-linejoin: round;
+ stroke-miterlimit: 4;
+ transform-origin: center;
+ }
+
+ .swircle {
+ stroke-dasharray: 100 50 100;
+ }
+
+ #start_button:hover .swircle:nth-of-type(2n) {
+ transform: rotateZ(-90deg);
+ }
+ #start_button:hover .swircle:first-of-type {
+ transform: rotateZ(90deg);
+ }
+
+ #start_button:hover {
+ background-color: rgba(0, 0, 0, 0.8);
+ }
+ </style>
</head>
<body>
+
+<main id="start_container">
+ <svg
+ width="512"
+ height="512"
+ viewBox="0 0 512 512"
+ id="start_button"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ class="play-button-component swircle"
+ d="M 482.86983,256 A 226.86983,226.86983 0 0 1 256,482.86983 226.86983,226.86983 0 0 1 29.130173,256 226.86983,226.86983 0 0 1 256,29.130173 226.86983,226.86983 0 0 1 482.86983,256 Z"/>
+ <path
+ class="play-button-component swircle"
+ d="M 447.06812,256 A 191.06812,191.06812 0 0 1 256,447.06812 191.06812,191.06812 0 0 1 64.931885,256 191.06812,191.06812 0 0 1 256,64.931885 191.06812,191.06812 0 0 1 447.06812,256 Z"/>
+ <path
+ class="play-button-component"
+ d="M 194.45831,348.47991 V 163.5198 l 159.08378,91.84706 -126.14795,72.83155 V 232.4989" />
+ </svg>
+
+ <h1>Press Start To Play</h1>
+</main>
+
<link data-trunk rel="inline" href="../build/web/audio.js"/>
</body>
</html>
\ No newline at end of file
--
GitLab