Game-jam-Devs/Game-Jaming
Game-jam-Devs
/
Game-Jaming
4
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fixed fortune wheel 

Added the wheel to the index page
Fixed the wheel CSS
This commit is contained in:
Kraken 2021-04-07 12:27:52 +02:00
parent ee32bf4e5a
commit 5928c53488
4 changed files with 59 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
Frontend/Html/SpinningWheel.html
View File

@ -1,44 +0,0 @@
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="../Styles/SpinningWheel.css" />
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../Javascript/SpinningWheel.js"></script>
<div id="wrapper">
<div id="wheel">
<div id="inner-wheel">
<div class="sec"><span class="fa">1</span></div>
<div class="sec"><span class="fa">2</span></div>
<div class="sec"><span class="fa">3</span></div>
<div class="sec"><span class="fa">4</span></div>
<div class="sec"><span class="fa">5</span></div>
<div class="sec"><span class="fa">6</span></div>
</div>
<div id="spin">
<div id="inner-spin"></div>
</div>
<div id="shine"></div>
</div>
</div>
<div id="txt">
<ul>
<li>1.</li>
<li>2.</li>
<li>3.</li>
<li>4.</li>
<li>5.</li>
<li>6.</li>
</ul>
</div>
</body>
</html>

69
Frontend/Index.html
View File

@ -8,14 +8,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="Images/UFO.png" />
<!-- Default page settings end -->
<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="Styles/Index.css" />
<link rel="stylesheet" href="Styles/SpinningWheel.css" />
<link rel="stylesheet" href="Styles/minibar.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<!-- CSS end -->
<!-- Header scripts -->
<script src="https://kit.fontawesome.com/57b6c8b971.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
@ -80,7 +79,7 @@
</ul>
<a id="NavUser" type="button" class="nav-link" style="display: none; cursor: default; color: rgba(255, 255, 255, .55);">
</a>
<a id="AdminPanel" type="button" class="nav-link LoginButton" href="/Frontend/Html/AdminPage.html" style="display: none;">
@ -97,7 +96,6 @@
</div>
</nav>
<!-- Navbar end -->
<!-- Login modal -->
<div class="LoginModal">
<div class="modal fade" id="LoginModal" tabindex="-1" aria-labelledby="LoginModalLabel" aria-hidden="true">
@ -154,7 +152,6 @@
<input id="pass1" type="password" class="" placeholder="Password">
<input id="pass2" type="password" class="" name="password" placeholder="Gentag Password">
<select id="GameJamSelect" class="form-select" aria-label="Default select example">
</select>
<input type="hidden" name="groupAmount" id="groupAmount">
@ -221,7 +218,6 @@
</div>
</div>
<!-- Login modal end -->
<!-- Rules Modal -->
<div class="modal fade" id="RulesModal" tabindex="-1" aria-labelledby="RulesModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
@ -243,46 +239,46 @@
<li>
<span>2.</span>
<p>
<strong>Upload dit spil</strong>. Alle hold forventes at uploade en spilbar version af deres spil,
der gør det muligt for besøgende på siden at prøve deres spil. Upload skal begynde senest kl. 12 <a href="https://www.timeanddate.com/time/zones/cet">CET</a> den pågældende dato,
<strong>Upload dit spil</strong>. Alle hold forventes at uploade en spilbar version af deres spil,
der gør det muligt for besøgende på siden at prøve deres spil. Upload skal begynde senest kl. 12 <a href="https://www.timeanddate.com/time/zones/cet">CET</a> den pågældende dato,
derefter er det ikke muligt at uploade flere.
</p>
</li>
<li>
<span>3.</span>
<p>
<strong>Del dit arbejde</strong>. Et af målene er at hjælpe andre med at lære af dit arbejde,
hjælp med dette ved at give folk mulighed for at rode med resultaterne af dit produkt.
Du skal dele enhver kode og aktiver du bruger til at lave spillet med (så længe du lovligt kan dele dem uden at bryde andre juridiske aftaler).
Del ikke kode der tilhører din arbejdsgiver eller andre end dig selv, og upload noget der er under <a href="https://www.amino.dk/ordbog/hvad-er-en-nda.aspx">NDA</a>, eller andre juridiske begrænsninger.
<strong>Del dit arbejde</strong>. Et af målene er at hjælpe andre med at lære af dit arbejde,
hjælp med dette ved at give folk mulighed for at rode med resultaterne af dit produkt.
Du skal dele enhver kode og aktiver du bruger til at lave spillet med (så længe du lovligt kan dele dem uden at bryde andre juridiske aftaler).
Del ikke kode der tilhører din arbejdsgiver eller andre end dig selv, og upload noget der er under <a href="https://www.amino.dk/ordbog/hvad-er-en-nda.aspx">NDA</a>, eller andre juridiske begrænsninger.
</p>
</li>
<li>
<span>4.</span>
<p>
<strong> Husk licensen. </strong> Alle uploads (kode, aktiver, eksekverbare filer osv.) deles og licenseres under <a href = "https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en">Attribution-NonCommercial-ShareAlike 4.0 International Creative Commons License</a>
<strong> Husk licensen. </strong> Alle uploads (kode, aktiver, eksekverbare filer osv.) deles og licenseres under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en">Attribution-NonCommercial-ShareAlike 4.0 International Creative Commons License</a>
</p>
</li>
<li>
<span>5.</span>
<p>
<strong>Respekter jammens idealer</strong>. Uanset hvilke kreative beslutninger du tager når du laver dit spil, skal du huske det fælles mål om at samarbejde,
lære og dele blandt spiludviklingssamfundet. Brug værktøjer og aktiver, der gør det muligt at licensere dit spil under <a href="https://creativecommons.org/licenses/">creative commons</a>.
<strong>Respekter jammens idealer</strong>. Uanset hvilke kreative beslutninger du tager når du laver dit spil, skal du huske det fælles mål om at samarbejde,
lære og dele blandt spiludviklingssamfundet. Brug værktøjer og aktiver, der gør det muligt at licensere dit spil under <a href="https://creativecommons.org/licenses/">creative commons</a>.
Upload så vidt som muligt et komplet og spilbart spil, og inkluder enhver kildekode og aktiver til uddannelsesmæssige formål. Alt hvad du opretter forbliver din ejendom inden for licensaftalen.
</p>
</li>
<li>
<span>6.</span>
<p>
<strong>Pas på dig selv</strong>. Her handler det om at skabe positive oplevelser og minder. Det handler ikke om knas og konkurrence.
<strong>Pas på dig selv</strong>. Her handler det om at skabe positive oplevelser og minder. Det handler ikke om knas og konkurrence.
Husk at være hydreret, spise mad, bevæge dig rundt, tage hvilepauser og give dig selv nok tid til at få masser af søvn hver nat.
</p>
</li>
<li>
<span>7.</span>
<p>
<strong>Hav det sjovt!</strong> Pas på hinanden, lær og skab nye muligheder sammen. Det handler ikke kun om at lave spil,
det er også til for at få nye venskaber, forbindelser, oplevelser og minder.
<strong>Hav det sjovt!</strong> Pas på hinanden, lær og skab nye muligheder sammen. Det handler ikke kun om at lave spil,
det er også til for at få nye venskaber, forbindelser, oplevelser og minder.
</p>
</li>
</ul>
@ -297,7 +293,6 @@
</div>
</div>
<!-- Rules modal end -->
<!-- Page content -->
<div id="content" class="container-fluid text-center">
<div class="text-left CenterDiv">
@ -450,7 +445,7 @@
<hr class="GradientDivider" />
<!-- Spil -->0
<!-- Spil -->0
<section id="spil">
<h3>Spil</h3>
<p>Se de nyesste spil</p>
@ -653,8 +648,35 @@
<section id="lod">
<h3>Lodtrækning</h3>
<div id="chart"></div>
<div id="question"><h1></h1></div>
<div id="wrapper">
<div id="wheel">
<div id="inner-wheel">
<div class="sec"><span class="fa">1</span></div>
<div class="sec"><span class="fa">2</span></div>
<div class="sec"><span class="fa">3</span></div>
<div class="sec"><span class="fa">4</span></div>
<div class="sec"><span class="fa">5</span></div>
<div class="sec"><span class="fa">6</span></div>
</div>
<div id="spin">
<div id="inner-spin"></div>
</div>
<div id="shine"></div>
</div>
</div>
<div id="txt">
<ul>
<li>1.</li>
<li>2.</li>
<li>3.</li>
<li>4.</li>
<li>5.</li>
<li>6.</li>
</ul>
</div>
</section>
<!-- Lodtrækning slut -->
@ -667,17 +689,16 @@
</div>
</div>
<!-- Page content end -->
<!-- Footer -->
<footer id="footer" class="text-center">
<p>Footer Text</p>
</footer>
<!-- Footer end -->
<!-- Body scripts -->
<script src="Javascript/Collapsible.js"></script>
<script src="Javascript/PasswordValidation.js"></script>
<script src="Javascript/Kalender.js"></script>
<script src="Javascript/SpinningWheel.js"></script>
<script src="Javascript/minibar.min.js"></script>
<script src="Javascript/HeaderFunctionality.js"></script>
<script src="Javascript/LoginFunctionality.js"></script>

6
Frontend/Javascript/SpinningWheel.js
View File

@ -34,8 +34,10 @@ $(document).ready(function () {
}
var aoY = t.offset().top;
$("#txt").html(aoY);
console.log(aoY);
//Display Rotation
//$("#txt").html(aoY);
//console.log(aoY);
/*23.7 is the minumum offset number that
each section can get, in a 30 angle degree.

35
Frontend/Styles/SpinningWheel.css
View File

@ -1,31 +1,14 @@
* {
margin: 0;
padding: 0;
}
body {
background: #eaeaea;
color: #fff;
font-size: 18px;
font-family: 'Exo 2', sans-serif;
}
a {
color: #34495e;
}
/*WRAPPER*/
/*WRAPPER*/
#wrapper {
margin: 40px auto 0;
width: 266px;
position: relative;
font-size: 18px;
font-family: 'Exo 2', sans-serif;
}
#txt {
color: rgb(0,0,0);
color: rgba(255,255,255, .55);
}
@ -44,10 +27,12 @@ a {
#wheel:before {
content: '';
position: absolute;
border: 4px solid rgba(0,0,0,0.1);
border: 8px solid rgba(0,0,0,0.1);
width: 242px;
height: 242px;
border-radius: 50%;
top: -4px;
left: -4px;
z-index: 1000;
}
@ -69,8 +54,8 @@ a {
border-width: 130px 75px 0;
border-color: #19c transparent;
transform-origin: 75px 129px;
left: 50px;
top: -4px;
left: 45px;
top: -10px;
opacity: 1;
}
@ -137,7 +122,7 @@ a {
display: block;
text-align: center;
font-size: 36px;
margin-left: -15px;
margin-left: -10px;
text-shadow: rgba(255, 255, 255, 0.1) 0px -1px 0px, rgba(0, 0, 0, 0.2) 0px 1px 0px;
}