Skip to content

Commit

Permalink
kit-game
Browse files Browse the repository at this point in the history
  • Loading branch information
@JustinDFuller
JustinDFuller committed Dec 3, 2023
1 parent d4dc335 commit 556278b
Show file tree
Hide file tree
Showing 3 changed files with 114 additions and 99 deletions.
22 changes: 11 additions & 11 deletions make/kit.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
* {
box-sizing: border-box;
box-sizing: border-box;
}

html,
body {
padding: 0;
Expand All @@ -15,7 +15,7 @@ body {
}

main {
padding-bottom: 20px;
padding-bottom: 20px;
}

#root {
Expand Down Expand Up @@ -86,8 +86,8 @@ main {
}

#wizard {
position: absolute;
top: -25px;
position: absolute;
top: -25px;
}

#wizard p {
Expand All @@ -104,7 +104,7 @@ main {
}

#wizard img {
transform: scaleX(-1);
transform: scaleX(-1);
}

#wizard.success {
Expand All @@ -121,8 +121,8 @@ main {
}

blockquote {
max-width: 500px;
margin: auto;
border-left: 3px solid #020215;
padding: 20px;
}
max-width: 500px;
margin: auto;
border-left: 3px solid #020215;
padding: 20px;
}
145 changes: 75 additions & 70 deletions make/kit.js
View file
Original file line number Diff line number Diff line change
@@ -1,71 +1,76 @@
const numbers = [
{ n: 1, selected: false },
{ n: 6, selected: false },
{ n: 8, selected: false },
{ n: 7, selected: false },
{ n: 2, selected: false },
{ n: 3, selected: false },
{ n: 5, selected: false },
{ n: 4, selected: false },
];

const root = document.querySelector("#root");
const wizard = document.querySelector("#wizard");

function init() {
root.innerHTML = "";

let all = true;
for (const i in numbers) {
const n = numbers[i]
if (n.n - 1 !== Number(i)) {
all = false
}
}
if (all) {
wizard.classList.add("success")
}

for (const i in numbers) {
const n = numbers[i]
const step = document.createElement("div");
step.id = n.n;
step.innerText = n.n;
step.classList.add("step")

if (n.n - 1 === Number(i)) {
step.classList.add("correct")
}

root.appendChild(step);
step.addEventListener('click', function(e) {
this.classList.toggle("selected");
if (n.selected) {
n.selected = false
return
}

n.selected = true

for (const j in numbers) {
if (j === i) {
continue
}

const n2 = numbers[j]
if (n2.selected) {
n.selected = false
n2.selected = false
numbers[j] = n
numbers[i] = n2

init()
break
}
}
})
}
}

init()

{ n: 1, selected: false },
{ n: 6, selected: false },
{ n: 8, selected: false },
{ n: 7, selected: false },
{ n: 2, selected: false },
{ n: 3, selected: false },
{ n: 5, selected: false },
{ n: 4, selected: false },
];
const root = document.querySelector("#root");
const wizard = document.querySelector("#wizard");

function init() {
root.innerHTML = "";

let all = true;

for (const i in numbers) {
const n = numbers[i];

if (n.n - 1 !== Number(i)) {
all = false;
}
}

if (all) {
wizard.classList.add("success");
}

for (const i in numbers) {
const n = numbers[i];
const step = document.createElement("div");

step.id = n.n;
step.innerText = n.n;
step.classList.add("step");

if (n.n - 1 === Number(i)) {
step.classList.add("correct");
}

root.appendChild(step);
step.addEventListener("click", function(e) {
this.classList.toggle("selected");

if (n.selected) {
n.selected = false;

return;
}

n.selected = true;

for (const j in numbers) {
if (j === i) {
continue;
}

const n2 = numbers[j];

if (n2.selected) {
n.selected = false;
n2.selected = false;
numbers[j] = n;
numbers[i] = n2;
init();

break;
}
}
});
}
}

init();
46 changes: 28 additions & 18 deletions make/kit.template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,28 +9,38 @@

<body>
<main>
<div id="world">
<div id="wizard">
<img height="150px" src="https://img.freepik.com/premium-vector/pixel-art-wizard-character-with-magic-scepter_534389-27.jpg?w=740" />
<p>WooHoo!</p>
</div>
<img height="50px" id="rabbit" src="https://www.shutterstock.com/image-vector/pixel-art-rabbit-260nw-1355892449.jpg" />
<div id="floor"></div>
</div>
<div id="root">
<div id="world">
<div id="wizard">
<img
height="150px"
src="https://img.freepik.com/premium-vector/pixel-art-wizard-character-with-magic-scepter_534389-27.jpg?w=740"
/>
<p>WooHoo!</p>
</div>
<img
height="50px"
id="rabbit"
src="https://www.shutterstock.com/image-vector/pixel-art-rabbit-260nw-1355892449.jpg"
/>
<div id="floor"></div>
</div>
<div id="root"></div>

<blockquote>
<strong>Kit:</strong> Dad, Can we make a game?
<br />
<strong>Me:</strong> Sure, buddy. What kind of game?
<br />
<strong>Kit:</strong> On the computer! Let's make a game with a bunch of numbers all mixed up. You have to switch the numbers to put them in order. And on the left side there is a wizard who lost his rabbit. On the right side is his rabbit. When you get the numbers in the right order the Wizard crosses to the other side and says, "Woohoo!"
</blockquote>
<blockquote>
<strong>Kit:</strong> Dad, Can we make a game?
<br />
<strong>Me:</strong> Sure, buddy. What kind of game?
<br />
<strong>Kit:</strong> On the computer! Let's make a game with a bunch of
numbers all mixed up. You have to switch the numbers to put them in
order. And on the left side there is a wizard who lost his rabbit. On
the right side is his rabbit. When you get the numbers in the right
order the Wizard crosses to the other side and says, "Woohoo!"
</blockquote>
</main>

<script>
{{ template "/make/kit.js" . }}
{{ template "/make/kit.js" . }}
</script>
</body>
</body>
</html>

0 comments on commit 556278b

Please sign in to comment.