Add play page
This commit is contained in:
Laurent
127
src/app.css
127
src/app.css
@@ -1,127 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root
|
||||
{
|
||||
--font-size : 1vw;
|
||||
}
|
||||
|
||||
*
|
||||
{
|
||||
color: #F5F5F5;
|
||||
text-decoration: none;
|
||||
font-size: var(--font-size, 1vw);
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
h1
|
||||
{
|
||||
font-size: calc(var(--font-size, 1vw) * 2.5);
|
||||
}
|
||||
|
||||
html
|
||||
{
|
||||
background: linear-gradient(45deg, #b9b9c9, #d2379b);
|
||||
height: 100vh;
|
||||
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
height: 100vh;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.container
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
width: 75vw;
|
||||
height: 75vh;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background-color: #A1674A;
|
||||
border: none;
|
||||
|
||||
}
|
||||
|
||||
nav
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-self: start;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 3vh;
|
||||
height: fit-content;
|
||||
|
||||
margin-top: 10vh;
|
||||
margin-bottom: 2vh;
|
||||
}
|
||||
|
||||
nav a
|
||||
{
|
||||
margin-right: 2.5vw;
|
||||
margin-left: 2.5vw;
|
||||
}
|
||||
|
||||
.nav_delimiter
|
||||
{
|
||||
margin-bottom: 5vh;
|
||||
}
|
||||
|
||||
form
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
margin-bottom: 10vh;
|
||||
}
|
||||
|
||||
input
|
||||
{
|
||||
color: #424242;
|
||||
font-size: 2.5vh;
|
||||
|
||||
width: 20vw;
|
||||
height: 4.5vh;
|
||||
|
||||
padding: 1vh;
|
||||
margin: 1.5vh;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bordered
|
||||
{
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
footer
|
||||
{
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
|
||||
position: absolute;
|
||||
bottom: 0.25vh;
|
||||
margin-bottom: 0.25vh;
|
||||
|
||||
width: 100vw;
|
||||
height: 5vh;
|
||||
}
|
||||
|
||||
footer a {
|
||||
margin-right: 2vh;
|
||||
}
|
||||
11
src/app.html
11
src/app.html
@@ -3,10 +3,21 @@
|
||||
<head>
|
||||
<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 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="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
|
||||
%sveltekit.head%
|
||||
|
||||
@@ -33,5 +33,4 @@
|
||||
color: #303633;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@@ -1,5 +1,4 @@
|
||||
<script>
|
||||
import '../app.css';
|
||||
|
||||
import github_mark from '$lib/assets/github-mark-white.svg';
|
||||
import twitter_mark from '$lib/assets/twitter-mark-white.svg';
|
||||
@@ -25,17 +24,15 @@
|
||||
<div class="burger"></div>
|
||||
<nav>
|
||||
|
||||
<NavLink --background-color="#f1ecec" link="/">Leaderboard</NavLink>
|
||||
<NavLink --background-color="#f1ecec" link="/play">Play</NavLink>
|
||||
<NavLink --background-color="#f1ecec" link="/about">About</NavLink>
|
||||
<a href="/">Leaderboard</a>
|
||||
<a href="/play">Play</a>
|
||||
<a href="/about">About</a>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
|
||||
@@ -1,4 +1,98 @@
|
||||
<form>
|
||||
<input/>
|
||||
<button>Let's roll</button>
|
||||
</form>
|
||||
<script>
|
||||
|
||||
import {onMount} from "svelte";
|
||||
|
||||
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>
|
||||
Reference in New Issue
Block a user