Skip to content

Commit

Permalink
added more button functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
deilann committed Sep 30, 2023
1 parent 4f6f778 commit 66d6d0e
Show file tree
Hide file tree
Showing 8 changed files with 346 additions and 76 deletions.
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
.vscode/launch.json
.vscode/settings.json
14 changes: 7 additions & 7 deletions data/kData.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
],
"strength": "heavy",
"weakness": "brittle",
"image": "rock.png",
"image": "images/rock.png",
"alt": "A pretty sharp and deadly looking rock.",
"credit": "<a href=\"https://commons.wikimedia.org/wiki/File:Pebble_MET_sf17-193-196s3.jpg\">Metropolitan Museum of Art</a>, CC0, via Wikimedia Commons"
},
Expand All @@ -30,7 +30,7 @@
],
"strength": "sneaky",
"weakness": "floppy",
"image": "paper.png",
"image": "images/paper.png",
"alt": "A crumpled ball of paper.",
"credit": "found on PublicDomainPictures.net but fairly certain the original photo was taken by Porjai after some research: https://www.shutterstock.com/g/porjai+kittawornrat"
},
Expand Down Expand Up @@ -83,7 +83,7 @@
],
"strength": "omnipresent",
"weakness": "toxic af",
"image": "pollution.png",
"image": "images/pollution.png",
"alt": "Pink polluting smoke stacks.",
"credit": "<a href=\"https://commons.wikimedia.org/wiki/File:CHIMNEYS_OF_U.S._STEEL_PLANT_EMIT_SMOKE_24_HOURS_A_DAY_-_NARA_-_545435.jpg\">LeRoy Woodson</a>, Public domain, via Wikimedia Commons"
},
Expand All @@ -100,7 +100,7 @@
],
"strength": "united",
"weakness": "vulnerable",
"image": "village.png",
"image": "images/village.png",
"alt": "A circular cropped photo of a village with red roofed houses and a spire.",
"credit":"<a href=\"https://commons.wikimedia.org/wiki/File:Small_town_red_roofs_(Unsplash).jpg\">David Marcu davidmarcu</a>, CC0, via Wikimedia Commons"

Expand All @@ -118,7 +118,7 @@
],
"strength": "elevating",
"weakness": "flimsy",
"image": "ladder.png",
"image": "images/ladder.png",
"alt": "The top of a yellow step ladder.",
"credit":"Video Girl: https://www.publicdomainpictures.net/en/view-image.php?image=264820&picture=window-cleaners-step-ladders"
},
Expand All @@ -136,7 +136,7 @@
],
"strength": "efficient",
"weakness": "fragile",
"image": "computer.png",
"image": "images/computer.png",
"alt": "A white Apple eMac, a computer and a CRT monitor all in one.",
"credit":"<a href=\"https://commons.wikimedia.org/wiki/File:Apple-eMac-FL.jpg\">Evan-Amos</a>, Public domain, via Wikimedia Commons"
},
Expand All @@ -153,7 +153,7 @@
],
"strength": "insightful",
"weakness": "biased",
"image": "history.png",
"image": "images/history.png",
"alt": "A black and white photo of a cat with a mostly obscured birthday cake.",
"credit":"Frees, H. W., photographer. (ca. 1914) The Birthday Cake. , ca. 1914. June 24. [Photograph] Retrieved from the Library of Congress, https://www.loc.gov/item/2013648266/."
}
Expand Down
31 changes: 15 additions & 16 deletions k-graphing/k.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,26 @@
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../styles/genderstyle.css">
<link rel="stylesheet" href="../styles/kstyle.css">
<title>k</title>
</head>
<body>
<div id="k-container">
<h1>k = <span class="display" id="k-display"></span></h1>
<button onclick="kPlusPlus()" class="modifier" id="k-modifier">k++</button>
<div class="k-header" id="k-container">
<h1>k = <span class="k-modifiers" id="k-display"></span></h1>
</div>

<h2>Choose Wisely</h2>
<div id="buttons"></div>

<div class="k-buttons" id="k-buttons-container">
<button onclick="kPlusPlus()" class="modifier" id="kPlus">k++</button>
<button onclick="kZero()" class="modifier" id="kZero">k=0</button>
<button onclick="kMinusMinus()" class="modifier" id="kMinus">k--</button>
</div>
</div>
<div class="display" id="choosing"><h2><span id="choice-header"></h2></span></div>
<div class="display" id="life-choices">

<!--
<button class="option" name="rock" value=0>rock</button>
<button class="option" name="paper" value=1>paper</button>
<button class="option" name="scissors" value=2>scissors</button>
<h2>Computer Choice: <span class="display" id="computer-choice"></span></h2>
<h2>Your Choice: <span class="display" id="user-choice"></span></h2>
<h2>Outcome: <span class="display" id="outcome"></span></h2> -->

</div>
<div class="k-buttons" id="buttons-home"></div>
</div>
<script src="k_classes.js" charset="utf-8"></script>
<script src="kApp.js" charset="utf-8"></script>
</body>
</html>
85 changes: 32 additions & 53 deletions k-graphing/kApp.js
Original file line number Diff line number Diff line change
@@ -1,76 +1,55 @@
const JSON_PATH = '../data/kData.json'
const computerChoice = document.getElementById('computer-choice')
const userChoice = document.getElementById('user-choice')
const outcome = document.getElementById('outcome')
const kView = document.getElementById('k-display')
const validChoices = document.querySelectorAll('.option')
const kSpace = document.getElementById('k-container')
var buttonContainer = document.getElementById('buttons')
const choiceHead = document.getElementById('choice-header')
const buttonContainer = document.getElementById('buttons-home')
const lifeChoices = document.getElementById('life-choices')


let k = 0
kView.innerHTML = k
let weapons_info = []
const k = new oddInteger()
kView.innerHTML = k
choiceHead.innerHTML = 'Choose Wisely'


function populateWeapons() {

function populate() {
weapons_info = []
let n = 2*k + 1
fetch(JSON_PATH)
.then(res => res.json())
.then(data => {
let mixer = Array.from({ length: data['weapons'].length }, (value, index) => index)
var mixed = mixer.sort(function(){ return 0.5 - Math.random() })
var picks = mixed.slice(0,n)
let i = 0
let mixed = mixer.sort(function(){ return 0.5 - Math.random() })
let picks = mixed.slice(0,k.getN())

picks.forEach(element => {
weapons_info.push(data['weapons'][element])
var button = document.createElement("button")
button.setAttribute("value", i)
i++
let button = document.createElement("button")
button.setAttribute("value", (weapons_info.length-1))
button.setAttribute("class", 'option')
button.setAttribute("name", data['weapons'][element]['name'])
button.style.backgroundImage = 'url(' + data['weapons'][element]['image'] + ')'
button.innerHTML=data['weapons'][element]['name']
buttons.appendChild(button);
button.setAttribute("title", data['weapons'][element]['alt'])
console.log(data['weapons'][element]['alt'])
buttonContainer.appendChild(button)

button.addEventListener("click", function(event) {
var btn = event.target;
var page = btn.getAttribute("pageto");
options.appendChild(btn);
alert(page);
})
let choice = event.target
// userChoice.innerHTML = choice.name
// play(choice.value)
})
})


})
}







// var button = document.createElement('button')
// button.setAttribute('value', i)
// button.setAttribute('name', weapon['name'])
// button.setAttribute('class', 'option')
// button.innerHTML=weapon['name']
// button.addEventListener('click', (e) => {
// userChoice.innerHTML = e.target.name
// })
// optionButtons.appendChild(button)
// i++
// })





})
}

function kPlusPlus() {
k++
k.plusPlus()
kView.innerHTML = k
buttonContainer.textContent = ''
populateWeapons()
populate()
}

populateWeapons()
function play(node) {
const selector = Math.floor(Math.random() * defineNumbers[n])
let choiceString = ('selector')
lifeChoices.innerHTML = choiceString
}
45 changes: 45 additions & 0 deletions k-graphing/k_classes.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
class oddInteger {

#k;
#n;

constructor(k=0) {
this.#k = k
this.#n = 2*k + 1
}

plusPlus() {
this.#k++
this.#n += 2
}

minusMinus() {
this.#k--
this.#n -= 2
}

reset() {
this.#k = 0
this.#n = 1
}

getK() {
return this.#k
}

getN() {
return this.#n
}

valueOf() {
return this.getK()
}

toString() {
return this.getK()
}

makeDiff(a, b) {
return (((a - b) % this.#n) + this.#n) % this.#n
}
}
37 changes: 37 additions & 0 deletions k-graphing/k_unused.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
// const k = {

// k: 0,
// n: 1,

// plusPlus() {
// this.k++
// this.n = 2 * this.k + 1
// },

// minusMinus() {
// this.k--
// this.n = 2 * this.k + 1
// },

// setValue(k) {
// this.k = k
// this.n = 2 * k + 1
// },

// getK() {
// return this.k
// },

// getN() {
// return this.n
// },

// valueOf() {
// return this.getK()
// },

// toString() {
// return this.getK()
// }

// }
4 changes: 4 additions & 0 deletions styles/genderstyle.css
Original file line number Diff line number Diff line change
Expand Up @@ -185,4 +185,8 @@ footer {
padding: 16px;
background: #09183380;
color: #bdbdbd;
}

.hidden {
visibility: hidden;
}
Loading

0 comments on commit 66d6d0e

Please sign in to comment.