Naaturel/unluckiest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add play page

Browse Source
This commit is contained in:
Laurent
2024-10-13 22:14:58 +02:00
parent 9e07f00899
commit cf2234e704
7 changed files with 140 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/app.html
View File

@@ -3,10 +3,21 @@
<head> <head>
<title>Unluckiest</title> <title>Unluckiest</title>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Afacad+Flux">
<style>
body {
font-family: 'Afacad Flux', serif;
font-size: 48px;
}
</style>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="%sveltekit.assets%/style/app.css" />
<link rel="stylesheet" href="%sveltekit.assets%/style/menu.css" /> <link rel="stylesheet" href="%sveltekit.assets%/style/menu.css" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
%sveltekit.head% %sveltekit.head%

1
src/lib/components/NavLink.svelte
View File

@@ -33,5 +33,4 @@
color: #303633; color: #303633;
} }
</style> </style>

9
src/routes/+layout.svelte
View File

@@ -1,5 +1,4 @@
<script> <script>
import '../app.css';
import github_mark from '$lib/assets/github-mark-white.svg'; import github_mark from '$lib/assets/github-mark-white.svg';
import twitter_mark from '$lib/assets/twitter-mark-white.svg'; import twitter_mark from '$lib/assets/twitter-mark-white.svg';
@@ -25,18 +24,16 @@
<div class="burger"></div> <div class="burger"></div>
<nav> <nav>
<NavLink --background-color="#f1ecec" link="/">Leaderboard</NavLink> <a href="/">Leaderboard</a>
<NavLink --background-color="#f1ecec" link="/play">Play</NavLink> <a href="/play">Play</a>
<NavLink --background-color="#f1ecec" link="/about">About</NavLink> <a href="/about">About</a>
</nav> </nav>
</div> </div>
<div class="container"> <div class="container">
<div class="row">
<slot></slot> <slot></slot>
</div> </div>
</div>
<footer> <footer>
<a href="https://github.com/naaturel"> <a href="https://github.com/naaturel">

102
src/routes/play/+page.svelte
View File

@@ -1,4 +1,98 @@
<form> <script>
<input/>
<button>Let's roll</button> import {onMount} from "svelte";
</form>
let range = 100;
let result = 0;
onMount(async () => {
const jQuery = await import('jquery');
const $ = jQuery.default;
window.$ = $;
window.jQuery = $;
});
async function roll() {
toggleLoading();
result = Math.floor(Math.random() * (range + 1));
await new Promise(r => setTimeout(r, 3000));
toggleLoading();
window.$(".result").text(`Result : ${result}/${range}`)
}
function toggleLoading(){
window.$(".loader").toggleClass("disabled");
window.$(".player").toggleClass("disabled");
}
</script>
<div class="container">
<div class="loader disabled">
<svg class="circular-loader" viewBox="0 0 30 30">
<circle class="loader-path" cx="15" cy="15" r="5" fill="none" stroke="#f1ecec" stroke-width="0.7" />
</svg>
<div class="info">Rolling a random numbers within range 0-{range}...</div>
</div>
<div class="player">
<button on:click={roll}>Let's roll !</button>
<div class="result"></div>
</div>
</div>
<style>
.disabled
{
display: none;
}
.container
{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.circular-loader
{
stroke-dasharray: 100, 125;
stroke-dashoffset: -5;
animation: rotate 2s ease-in-out infinite;
stroke-linecap: round;
}
.loader-path {
width: 25vw;
height: 25vh;
}
button
{
color: black;
width: 18vw;
height: 18vh;
border-radius: 10px;
background-color: #f1ecec;
border: 2px solid #A1674A;
background-size: 1800% 1800%;
box-shadow: 0 0 10px #343232;
}
button:hover{
transform: scale(1.1);
}
@keyframes rotate {
to{transform: rotate(360deg)}
}
</style>

0
src/routes/play/+page.svlete
View File

12
src/app.css → static/style/app.css
View File

@@ -1,10 +1,6 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
:root :root
{ {
--font-size : 1vw; --font-size : 1.25vmax;
} }
* *
@@ -23,8 +19,6 @@ h1
html html
{ {
background: linear-gradient(45deg, #b9b9c9, #d2379b); background: linear-gradient(45deg, #b9b9c9, #d2379b);
height: 100vh;
} }
body body
@@ -32,8 +26,10 @@ body
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 100vh;
align-items: center; align-items: center;
justify-content: center;
height: 98vh;
} }
.container .container

42
static/style/menu.css
View File

@@ -1,4 +1,4 @@
.b-a, .burger:after, .burger:before, .burger { .burger:after, .burger:before, .burger {
transition: all 0.25s; transition: all 0.25s;
content: ""; content: "";
position: absolute; position: absolute;
@@ -9,22 +9,6 @@
background-color: rgba(255, 255, 255, 0.95); background-color: rgba(255, 255, 255, 0.95);
} }
.menu-collapsed {
transition: all 0.25s;
position: fixed;
top: 10px;
left: 9px;
height: 36px;
width: 36px;
z-index: 1;
cursor: pointer;
}
.menu-collapsed a {
transition: all 0s;
position: fixed;
left: -9000px;
}
.burger { .burger {
position: fixed; position: fixed;
left: 12px; left: 12px;
@@ -39,18 +23,38 @@
top: 8px; top: 8px;
} }
.b-a-expanded, .menu-expanded .burger:after, .menu-expanded .burger:before { .menu-expanded .burger:after, .menu-expanded .burger:before {
transition: all 0.25s; transition: all 0.25s;
top: 0px; top: 0px;
} }
.menu-collapsed {
transition: all 0.25s;
position: fixed;
top: 10px;
left: 9px;
height: 36px;
width: 36px;
z-index: 1;
cursor: pointer;
}
.menu-collapsed a {
transition: all 0s;
position: fixed;
left: -9000px;
}
.menu-expanded { .menu-expanded {
transition: all 0.25s; transition: all 0.25s;
text-align: center; text-align: center;
line-height: 200px; line-height: 200px;
height: 100%; height: 100%;
width: 100%; width: 100%;
border-radius: 0px; border-radius: 0px;
top: 0; top: 0;
left: 0; left: 0;
background-color: rgba(0, 0, 0, 0.85); background-color: rgba(0, 0, 0, 0.85);
@@ -59,6 +63,8 @@
.menu-expanded a { .menu-expanded a {
transition: all 0s; transition: all 0s;
position: relative; position: relative;
width: 100vw;
height: 25vh;
left: 0; left: 0;
z-index: 2; z-index: 2;
} }