Hej alle sammen
Nu hvor påsken er over os, så tænkte jeg at jeg ville lave en lille udfordring for dem som vil være med.
Udfordringen går ud på at lave en livs tæller for Magic The Gathering Commander, på billedet nedenunder
kan i se en skitse til hvordan dette skal se ud. Derudover skal plus og minus for hver boks enten tilføje eller fjerne et liv (JavaScript).
Noter
Farver, størrelse på knapper og andre grafiske ændringer er fri til at ændre så længe det overordnede tema forbliver.
Nem
Lav fire bokse som hver tager 25% af skærmen, tilføj tallet i midten og flip den øverste række 180 grader
Moderat
Lav fire bokse som hver tager 25% af skærmen, tilføj tallet i midten og flip den øverste række 180 grader
Tilføj derudover siderne til hver boks.
Svær
Lav fire bokse som hver tager 25% af skærmen, tilføj tallet i midten og flip den øverste række 180 grader
Tilføj derudover siderne til hver boks samt knapperne for at kunne tilføje og fjerne liv.
Til sidst tilføj funktionalitet så knapperne enten tilføjer eller fjerne liv for deres respektive boks ved tryk.
Jeg håber så mange som mulig vil være med så vi kan få en masse gode forslag til hvordan denne udfordring kan løses.
Når påsken er ovre så vil jeg lave et indlæg her i tråden til hvordan jeg selv har løst denne opgave.
God påske til alle!
Udfordring - MTG Life Counter
- Vedhæftede filer
-
- MagicTheGathering_Commander_Life_Counter.PNG (29.9KiB)Vist 8930 gange
Re: Udfordring - MTG Life Counter
Jeg tror ikke helt jeg forstår konceptet. Er det et spil med 4 spillere, hvor man har 'udfordringen' liggende på f.eks en tablet, så man kan se/justere hinandens point?
Re: Udfordring - MTG Life Counter
Jeg ved kun hvad jeg så ved et tilfælde på youtube og tænkte "det kan vi da også lave".jepperask skrev:Jeg tror ikke helt jeg forstår konceptet. Er det et spil med 4 spillere, hvor man har 'udfordringen' liggende på f.eks en tablet, så man kan se/justere hinandens point?
https://youtu.be/uZbkW7aafkU?t=14m50s
Men det jeg ved er at der er 4 spillere, 2 på hver side af bordet. Den sidste der har point tilbage når alle andre er i 0 har tabt.
Skærmen er flippet i de øverste elementer for at dem der sidder på den anden side af bordet kan følge med i deres egne point.
Der er ikke nogen "mester plan" i udfordringen, udover at udfordre sig selv i at lave nye ting og finde løsninger på X. I dette tilfælde MTG Life Counter.
Håber det hjælper
HVIS jeg nu har misforstået ALT eller ikke fået det kommunikeret ud, så er udfordringen her at kode overstående bedst muligt
Re: Udfordring - MTG Life Counter
Så dette er hvad jeg kom frem til med den tid jeg havde til det
Overall så nåede jeg de mål som jeg har sat mig.
Men nu hvor jeg har arbejdet med denne problem stilling så er der en masse ting jeg gerne vil tilføje og rette.
Så dette bliver mit hygge projekt når jeg har brug for at komme væk fra alt andet.
http://mnrb.dk/fun_area/MTG_commander_life_counter/
Jeg har valgt at bruge Foundation 6 og brugt style.css hvor nødvendigt.
JS er et rod som jeg kaster et blik på igen. Men jeg har ikke lige regnet ud hvordan JS kan tage et argument som
hvilket element kaldte det. Sådan så enkel metode kan justere alle livs tællerne, i stedet for separate metoder.
Koden d. 18-04-2017
HTML / JS
CSS
Overall så nåede jeg de mål som jeg har sat mig.
Men nu hvor jeg har arbejdet med denne problem stilling så er der en masse ting jeg gerne vil tilføje og rette.
Så dette bliver mit hygge projekt når jeg har brug for at komme væk fra alt andet.
http://mnrb.dk/fun_area/MTG_commander_life_counter/
Jeg har valgt at bruge Foundation 6 og brugt style.css hvor nødvendigt.
JS er et rod som jeg kaster et blik på igen. Men jeg har ikke lige regnet ud hvordan JS kan tage et argument som
hvilket element kaldte det. Sådan så enkel metode kan justere alle livs tællerne, i stedet for separate metoder.
Koden d. 18-04-2017
HTML / JS
Kode: Vælg alt
<!doctype html>
<html>
<head>
<title>mnrb.dk</title>
<!-- Meta data -->
<meta charset="UTF8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="">
<meta name="description" content="">
<meta name="keywords" content="">
<!-- Foundation 6 stylesheets -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/foundation.css">
<!-- Custom CSS stylesheet -->
<link rel="stylesheet" href="css/style.css">
<!-- Foundation 6 icons -->
<link rel="stylesheet" href="css/foundation-icons.css">
<!-- Icons -->
<!-- Google Analytics -->
</head>
<body>
<!-- test start -->
<header class="expanded row">
<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
<span>
<button class="menu-icon" type="button" data-toggle="example-menu"></button>
</span>
<span>mnrb.dk</span>
</div>
<nav id="example-menu">
<ul id="site-menu" class="medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">
<li class="active">
<a href="#">MTG Commander - Life Counter</a>
</li>
<!-- <li>
<a id="addPlayerButton" href="#">Add Player</a>
</li>
<li>
<a id="removePlayerButton" href="#">Remove Player</a>
</li> -->
<li class="has-submenu">
<a href="#">Player 1</a>
<ul class="submenu menu">
<li>
<a href="#">Color</a>
<ul class="submenu menu">
<li>
<a href="#">Black</a>
</li>
<li>
<a href="#">Grey</a>
</li>
</ul>
</li>
<li>
<form>
<input type="text" id="inputUrl1" placeholder="Place URL" autocomplete="off" onmouseover="this.select()"/>
<input class="button expanded" type="button" id="inputButton1" value="Load"/>
</form>
</li>
</ul>
</li>
<li class="has-submenu">
<a href="#">Player 2</a>
<ul class="submenu menu">
<li>
<a href="#">Color</a>
<ul class="submenu menu">
<li>
<a href="#">Black</a>
</li>
<li>
<a href="#">Grey</a>
</li>
</ul>
</li>
<li>
<form>
<input type="text" id="inputUrl2" placeholder="Place URL" autocomplete="off" onmouseover="this.select()"/>
<input class="button expanded" type="button" id="inputButton2" value="Load"/>
</form>
</li>
</ul>
</li>
<li class="has-submenu">
<a href="#">Player 3</a>
<ul class="submenu menu">
<li>
<a href="#">Color</a>
<ul class="submenu menu">
<li>
<a href="#">Black</a>
</li>
<li>
<a href="#">Grey</a>
</li>
</ul>
</li>
<li>
<form>
<input type="text" id="inputUrl3" placeholder="Place URL" autocomplete="off" onmouseover="this.select()"/>
<input class="button expanded" type="button" id="inputButton3" value="Load"/>
</form>
</li>
</ul>
</li>
<li class="has-submenu">
<a href="#">Player 4</a>
<ul class="submenu menu">
<li>
<a href="#">Color</a>
<ul class="submenu menu">
<li>
<a href="#">Black</a>
</li>
<li>
<a href="#">Grey</a>
</li>
</ul>
</li>
<li>
<form>
<input type="text" id="inputUrl4" placeholder="Place URL" autocomplete="off" onmouseover="this.select()"/>
<input class="button expanded" type="button" id="inputButton4" value="Load"/>
</form>
</li>
</ul>
</li>
</ul>
</nav>
</header>
<!-- test end -->
<div class="row expanded small-up-1 medium-up-2">
<!-- -------- -->
<!-- top left -->
<!-- -------- -->
<div id="top-left" class="column">
<h1 id="lifeRemaining1">40</h1>
<div id="lifeAdd1" class="lifeCounter column small-2 end">
<button id="life1Add" class="button large" type="button">
<!-- Screen readers will see "close" -->
<span class="show-for-sr">Add</span>
<!-- Visual users will see the +, but not the "Add" text -->
<span aria-hidden="true"><i class="fi-plus"></i></span>
</button>
</div>
<div id="lifeSubtract1" class="lifeCounter column small-2">
<button class="button large" type="button">
<!-- Screen readers will see "close" -->
<span class="show-for-sr">Subtract</span>
<!-- Visual users will see the -, but not the "Subtract" text -->
<span aria-hidden="true"><i class="fi-minus"></i></span>
</button>
</div>
</div>
<!-- --------- -->
<!-- top right -->
<!-- --------- -->
<div id="top-right" class="column">
<h1 id="lifeRemaining2">40</h1>
<div id="lifeAdd2" class="lifeCounter column small-2 end">
<button class="button large" type="button">
<!-- Screen readers will see "close" -->
<span class="show-for-sr">Add</span>
<!-- Visual users will see the +, but not the "Add" text -->
<span aria-hidden="true"><i class="fi-plus"></i></span>
</button>
</div>
<div id="lifeSubtract2" class="lifeCounter column small-2">
<button class="button large" type="button">
<!-- Screen readers will see "close" -->
<span class="show-for-sr">Subtract</span>
<!-- Visual users will see the -, but not the "Subtract" text -->
<span aria-hidden="true"><i class="fi-minus"></i></span>
</button>
</div>
</div>
<!-- ----------- -->
<!-- bottom left -->
<!-- ----------- -->
<div id="bottom-left" class="column">
<h1 id="lifeRemaining3">40</h1>
<div id="lifeAdd3" class="lifeCounter column small-2 end">
<button class="button large" type="button">
<!-- Screen readers will see "close" -->
<span class="show-for-sr">Add</span>
<!-- Visual users will see the +, but not the "Add" text -->
<span aria-hidden="true"><i class="fi-plus"></i></span>
</button>
</div>
<div id="lifeSubtract3" class="lifeCounter column small-2">
<button class="button large" type="button">
<!-- Screen readers will see "close" -->
<span class="show-for-sr">Subtract</span>
<!-- Visual users will see the -, but not the "Subtract" text -->
<span aria-hidden="true"><i class="fi-minus"></i></span>
</button>
</div>
</div>
<!-- ------------ -->
<!-- bottom right -->
<!-- ------------ -->
<div id="bottom-right" class="column">
<h1 id="lifeRemaining4">40</h1>
<div id="lifeAdd4" class="lifeCounter column small-2 end">
<button class="button large" type="button">
<!-- Screen readers will see "close" -->
<span class="show-for-sr">Add</span>
<!-- Visual users will see the +, but not the "Add" text -->
<span aria-hidden="true"><i class="fi-plus"></i></span>
</button>
</div>
<div id="lifeSubtract4" class="lifeCounter column small-2">
<button class="button large" type="button">
<!-- Screen readers will see "close" -->
<span class="show-for-sr">Subtract</span>
<!-- Visual users will see the -, but not the "Subtract" text -->
<span aria-hidden="true"><i class="fi-minus"></i></span>
</button>
</div>
</div>
</div>
<!-- Load JS files after loading the page -->
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script> <!-- 1 line? -->
<script>
/* ############ */
/* Life counter */
/* ############ */
/* -------- */
/* Top-left */
/* -------- */
$('#lifeAdd1').on('click', function(){
var life = document.getElementById("lifeRemaining1").innerHTML;
life++;
document.getElementById("lifeRemaining1").innerHTML = life;
});
$('#lifeSubtract1').on('click', function(){
var life = document.getElementById("lifeRemaining1").innerHTML;
life--;
document.getElementById("lifeRemaining1").innerHTML = life;
});
/* -------- */
/* Top-right */
/* -------- */
$('#lifeAdd2').on('click', function(){
var life = document.getElementById("lifeRemaining2").innerHTML;
life++;
document.getElementById("lifeRemaining2").innerHTML = life;
});
$('#lifeSubtract2').on('click', function(){
var life = document.getElementById("lifeRemaining2").innerHTML;
life--;
document.getElementById("lifeRemaining2").innerHTML = life;
});
/* -------- */
/* Bottom-left */
/* -------- */
$('#lifeAdd3').on('click', function(){
var life = document.getElementById("lifeRemaining3").innerHTML;
life++;
document.getElementById("lifeRemaining3").innerHTML = life;
});
$('#lifeSubtract3').on('click', function(){
var life = document.getElementById("lifeRemaining3").innerHTML;
life--;
document.getElementById("lifeRemaining3").innerHTML = life;
});
/* -------- */
/* Bottom-right */
/* -------- */
$('#lifeAdd4').on('click', function(){
var life = document.getElementById("lifeRemaining4").innerHTML;
life++;
document.getElementById("lifeRemaining4").innerHTML = life;
});
$('#lifeSubtract4').on('click', function(){
var life = document.getElementById("lifeRemaining4").innerHTML;
life--;
document.getElementById("lifeRemaining4").innerHTML = life;
});
/* ------------------- */
/* Load image from url */
/* ------------------- */
$('#inputButton1').on('click', function() {
document.getElementById("top-left").style.backgroundImage = "url('" + $('#inputUrl1').val() + "')";
console.log("url('" + $('#inputUrl1').val() + "')");
});
$('#inputButton2').on('click', function() {
document.getElementById("top-right").style.backgroundImage = "url('" + $('#inputUrl2').val() + "')";
console.log("url('" + $('#inputUrl2').val() + "')");
});
$('#inputButton3').on('click', function() {
document.getElementById("bottom-left").style.backgroundImage = "url('" + $('#inputUrl3').val() + "')";
console.log("url('" + $('#inputUrl3').val() + "')");
});
$('#inputButton4').on('click', function() {
document.getElementById("bottom-right").style.backgroundImage = "url('" + $('#inputUrl4').val() + "')";
console.log("url('" + $('#inputUrl4').val() + "')");
});
</script>
</body>
</html>
Kode: Vælg alt
/* ------------------- */
/* Global configuration*/
/* ------------------- */
html {
min-height: 100%;
min-width: 100%;
/*Newer browsers overwrite here*/
min-height: 100vh;
min-width: 100vw;
position: relative
}
body, html {
height: auto;
}
/* ------ */
/* Header */
/* ------ */
eader nav {
padding: 0px;
}
header nav, .title-bar {
box-shadow: 5px 6px 3px hsl(0, 5%, 20%);
}
.title-bar {
background-color: rgb(0,110,147);
}
ul.menu {
background-color: rgb(51,51,51);
border-color: rgb(51, 51, 51);
}
ul.menu li a {
color: white;
}
/* navigation hover effect */
nav ul li a:hover, nav ul li:hover {
background-color: orange;
}
nav ul li ul li a:hover {
background-color: grey;
}
/* ---- */
/* body */
/* ---- */
body div[id^="top"], body div[id^="bottom"] {
height: 50vh;
position: relative;
}
body div[id^="top"] h1, body div[id^="bottom"] h1 {
color: white;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
font-size: 9em;
}
.column {
padding: 0;
}
.lifeCounter {
position: relative;
background-color: hsla(344, 0%, 44%, 0.2);
color: white;
height: 100%;
cursor: pointer;
}
.lifeCounter button {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: hsla(0, 0%, 0%, 0.0);
border-radius: 50px;
border: 5px solid orange;
}
#top-left, #top-right, #bottom-left, #bottom-right {
background-size: 100% 100%;
background-repeat: no-repeat;
}
#top-left {
background-color: hsla(0, 0%, 0%, 1.0);
transform: rotate(180deg);
}
#top-right {
background-color: hsla(0, 0%, 50%, 1.0);
transform: rotate(180deg);
}
#bottom-left {
background-color: hsla(0, 65%, 50%, 1.0);
}
#bottom-right {
background-color: hsla(180, 50%, 60%, 1.0);
}
Re: Udfordring - MTG Life Counter
Prøv det her:cristian skrev: JS er et rod som jeg kaster et blik på igen. Men jeg har ikke lige regnet ud hvordan JS kan tage et argument som
hvilket element kaldte det. Sådan så enkel metode kan justere alle livs tællerne, i stedet for separate metoder.
Kode: Vælg alt
var addSub = function(element) {
var s = this.id;
if (s.indexOf("Add") >= 0) {
var b = s.indexOf("Add");
var id = s.substring((("Add".length)+b),s.length);
var life = document.getElementById("lifeRemaining" + id).innerHTML;
life++;
document.getElementById("lifeRemaining" + id).innerHTML = life;
} else if (s.indexOf("Subtract") >= 0) {
var b = s.indexOf("Subtract");
var id = s.substring((("Subtract".length)+b),s.length);
var life = document.getElementById("lifeRemaining" + id).innerHTML;
life--;
document.getElementById("lifeRemaining" + id).innerHTML = life;
}
}
$(".lifeCounter").on('click', addSub);
Re: Udfordring - MTG Life Counter
Hey Jeppe
Tak for dit svar!
Hvad er lig med?
Når jeg laver en console.log(s); så er s ikke lig med noget objekt eller værdi.
Tak for dit svar!
Hvad er
Kode: Vælg alt
var s = this.id;
Når jeg laver en console.log(s); så er s ikke lig med noget objekt eller værdi.
Re: Udfordring - MTG Life Counter
Den er lig id'et på elementet der har triggered click-eventet, så f.eks lifeSubtract3.cristian skrev:Hey Jeppe
Tak for dit svar!
Hvad erlig med?Kode: Vælg alt
var s = this.id;
Når jeg laver en console.log(s); så er s ikke lig med noget objekt eller værdi.
Hvis du i Chrome Developer Tools sætter et breakpoint på linjen, vil du kunne se alt hvad 'this' indeholder. Jeg kan se at jeg har tilføjet 'element' også, selvom den ikke bliver brugt til noget.