Emiel_DK
/
frontend
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

20-mastermind

20-mastermind
emieldkr 4 years ago
parent
54ab50afa7
commit
523e6c308b
5 changed files with 221 additions and 0 deletions
Split View Show Diff Stats
  1. 6
    0
      20-mastermind/.prettierrc
  2. 3
    0
      20-mastermind/debug.log
  3. 64
    0
      20-mastermind/index.html
  4. 73
    0
      20-mastermind/script.js
  5. 75
    0
      20-mastermind/style.css

+ 6
- 0
20-mastermind/.prettierrc View File

@@ -0,0 +1,6 @@
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": true,
"singleQuote": true
}

+ 3
- 0
20-mastermind/debug.log View File

@@ -0,0 +1,3 @@
[0127/101915.149:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0127/101915.150:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0127/101915.150:ERROR:crash_report_database_win.cc(469)] failed to stat report

+ 64
- 0
20-mastermind/index.html View File

@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en">


<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Mastermind</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css"/>
<link rel="stylesheet"
integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>

<body>
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
<h1 class="title">
Mastermind
</h1>
</div>
</div>
</section>
<div class="container">
<section id="solution-container" class="hidden">
<div class="solution-option"></div>
<div class="solution-option"></div>
<div class="solution-option"></div>
<div class="solution-option"></div>
</section>
<!-- Dummy try, which is being duplicated -->
<div class="try dont-show" id="dummy-try">
<div class="try-option-container">
<div class="try-option">1</div>
<div class="try-option">2</div>
<div class="try-option">3</div>
<div class="try-option">4</div>
</div>
<p>Juiste nummer: <span class="correct-color">3</span></p>
<p>Waarvan op de juiste plaats: <span class="correct-place">1</span></p>
</div>
<section id="tries-container">
</section>
<section id="try-input-section" class="">
<div id="try-input-container">
<input class="try-input" type="number" min="1" max="6" step="1">
<input class="try-input" type="number" min="1" max="6" step="1">
<input class="try-input" type="number" min="1" max="6" step="1">
<input class="try-input" type="number" min="1" max="6" step="1">
</div>
<button id="try-submit-btn" class="button is-fullwidth is-primary">Try</button>
</section>
<section id="winner-message-container" class="dont-show">
<button id="winner-submit-btn" class="button is-fullwidth is-primary">You won, try again?</button>
</section>
</div>
<script src="script.js"></script>
</body>
</html>

+ 73
- 0
20-mastermind/script.js View File

@@ -0,0 +1,73 @@
// jshint esversion: 6

const tryButton = document.querySelector('#try-submit-btn');
const tryInputContainer = document.querySelector('#try-input-container');
const triesContainer = document.querySelector('#tries-container');

let inputValues = [];

const gameState = {
code: [],
won: false,
lost: false,
};

function tryButtonPressed(event) {
inputValues[0] = tryInputContainer.children[0].value;
inputValues[1] = tryInputContainer.children[1].value;
inputValues[2] = tryInputContainer.children[2].value;
inputValues[3] = tryInputContainer.children[3].value;

renderInput();
}

function renderInput() {
let div = document.createElement('div');
div.innerHTML = `<div class="try">
<div class="try-option-container">
<div class="try-option">${inputValues[0]}</div>
<div class="try-option">${inputValues[1]}</div>
<div class="try-option">${inputValues[2]}</div>
<div class="try-option">${inputValues[3]}</div>
</div>
<p>Juiste nummer: <span class="correct-color">${checkMatchingNumber()}</span></p>
<p>Waarvan op de juiste plaats: <span class="correct-place">${checkMatchingLocation()}</span></p>
</div>
`;

triesContainer.appendChild(div);
}

function init() {
gameState.code = [
Math.ceil(Math.random() * 6),
Math.ceil(Math.random() * 6),
Math.ceil(Math.random() * 6),
Math.ceil(Math.random() * 6),
];
console.log(gameState.code);
}

function checkMatchingLocation() {
let counter = 0;
for (let i = 0; i < 4; ++i) {
if (gameState.code[i] == inputValues[i]) counter++;
}
return counter;
}

function checkMatchingNumber() {
let counter = 0;
let code = gameState.code;
for (let i = 0; i < 4; i++) {
if (code.includes(inputValues[i])) {
console.log('test');
counter++;
}
}
return counter;
}

tryButton.addEventListener('click', tryButtonPressed);

init();

+ 75
- 0
20-mastermind/style.css View File

@@ -0,0 +1,75 @@
.container {
max-width: 25rem;
font-size: 3rem;
}

section {
padding: 1rem;
}

.container input {
font-size: 3rem;
}

.try {
clear: both;
padding: .8rem 0;
}

.try p {
font-size: .8rem;
width: 50%;
float: left;
}

.try p:last-child {
text-align: right;
}

.try.winner .try-option {
border-color: green;
color: green;
}

#solution-container, .try-option-container {
display: flex;
flex-direction: row;
justify-content: space-between;
}

#solution-container.hidden .solution-option:after {
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: black;
}

.solution-option, .try-option {
width: 4rem;
height: 4rem;
line-height: 4rem;
text-align: center;
border: 2px solid black;
position: relative;
}

#try-input-container {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 1rem;
}

#try-input-container input {
height: 4rem;
width: 4rem;
text-align: center;
}

.dont-show {
display: none !important;
}

Write Preview
Loading…
Cancel
Save