Skip to content

Commit

Permalink
imporved display on phone (screen width < 640px)
Browse files Browse the repository at this point in the history
  • Loading branch information
@EnolaK64
EnolaK64 committed Apr 10, 2024
1 parent 139031a commit 5a065fc
Show file tree
Hide file tree
Showing 3 changed files with 105 additions and 53 deletions.
36 changes: 25 additions & 11 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,10 @@
<body>
<!-- <button id="resetCache" class="other">reset</button> -->
<!-- <button id="play" class="other">Play</button> -->
<h1 id="loose" class="end">You lose</h1>
<h1 id="win" class="end">You win</h1>
<div id="title">
<h1 id="loose" class="end">You lose</h1>
<h1 id="win" class="end">You win</h1>
</div>
<div id="game">
</div>

Expand All @@ -32,15 +34,26 @@ <h1 id="win" class="end">You win</h1>
</div>
<div id="bottomThemeSelector">
<div id="inputs">
<input class="inputColor" type="text" maxlength="7" placeholder="The background" id="inputColorBackground">
<input class="inputColor" type="text" maxlength="7" placeholder="The background of guess zone"id="inputColorGuessBg">
<input class="inputColor" type="text" maxlength="7" placeholder="The letter of guess zone"id="inputColorGuessLetters">
<input class="inputColor" type="text" maxlength="7" placeholder="The underline of guess zone"id="inputColorGuessUnderline">
<input class="inputColor" type="text" maxlength="7" placeholder="The hangman" id="inputColorHangman">
<input class="inputColor" type="text" maxlength="7" placeholder="The key" id="inputColorKbBackground">
<input class="inputColor" type="text" maxlength="7" placeholder="The key when you hover"id="inputColorKbHover">
<input class="inputColor" type="text" maxlength="7" placeholder="The letter on the key" id="inputColorKbKey">
<input class="inputColor" type="text" maxlength="7" placeholder="The keys when are used"id="inputColorKbUsed">
<input class="inputColor" type="text" maxlength="7" placeholder="The background"
id="inputColorBackground">
<input class="inputColor" type="text" maxlength="7" placeholder="The background of guess zone"
id="inputColorGuessBg">
<input class="inputColor" type="text" maxlength="7" placeholder="The letter of guess zone"
id="inputColorGuessLetters">
<input class="inputColor" type="text" maxlength="7" placeholder="The underline of guess zone"
id="inputColorGuessUnderline">
<input class="inputColor" type="text" maxlength="7" placeholder="The hangman"
id="inputColorHangman">
<input class="inputColor" type="text" maxlength="7" placeholder="The key"
id="inputColorKbBackground">
<input class="inputColor" type="text" maxlength="7" placeholder="The key when you hover"
id="inputColorKbHover">
<input class="inputColor" type="text" maxlength="7" placeholder="The letter on the key"
id="inputColorKbKey">
<input class="inputColor" type="text" maxlength="7" placeholder="The keys when are used"
id="inputColorKbUsed">
<input class="inputColor" type="text" maxlength="7" placeholder="The background keys when are used"
id="inputColorKbUsedBg">
<input class="inputColor" type="text" maxlength="7" placeholder="Titles" id="inputColorLetters">
</div>
<div id="actual">
Expand All @@ -53,6 +66,7 @@ <h1 id="win" class="end">You win</h1>
<p class="actualColor" id="actualColorKbHover"></p>
<p class="actualColor" id="actualColorKbKey"></p>
<p class="actualColor" id="actualColorKbUsed"></p>
<p class="actualColor" id="actualColorKbUsedBg"></p>
<p class="actualColor" id="actualColorLetters"></p>
</div>
<button id="apply">Apply</button>
Expand Down
50 changes: 38 additions & 12 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,11 @@ let colors = {
},
"hangman": "#ffffff",
"keyboard": {
"bg": "#23272a",
"bg": "#1a1b1e",
"hover": "#2c2f33",
"key": "#ffffff",
"letterUsed": "#555555"
"letterUsed": "#555555",
"letterUsedBg": "#2c2f33"
},
"letters": "#ffffff"
}
Expand Down Expand Up @@ -101,6 +102,26 @@ function write(wordToWrite) {
}
}

//different style of keys
function keyHoverStyle(keyNumber) {
const keyUsed = JSON.parse(localStorage.getItem("usedLetters"))
if (keyUsed[keyNumber] == "") {
key[keyNumber].style.zIndex = "1000"
key[keyNumber].style.boxShadow = "0px 8px 15px rgba(0,0,0,.5)"
}
}

function keyUnHoverStyle(keyNumber) {
key[keyNumber].style.removeProperty("box-shadow")
key[keyNumber].style.removeProperty("z-index")
}

function keyUsedStyle(keyNumber) {
key[keyNumber].style.backgroundColor = colors.keyboard.letterUsedBg
key[keyNumber].style.color = colors.keyboard.letterUsed
}



function setListerners() {
document.addEventListener("keypress", (e) => {
Expand All @@ -114,15 +135,19 @@ function setListerners() {
key.forEach((element, index) => {
element.addEventListener('click', () => {
keyPress(element.id, index)
keyUnHoverStyle(index)
})

element.addEventListener('mousedown', () => {
keyUnHoverStyle(index)
})

element.addEventListener('mouseenter', () => {
element.setAttribute("class", "key keyHover")
element.style.backgroundColor = colors.keyboard.hover
keyHoverStyle(index)
})

element.addEventListener('mouseleave', () => {
element.setAttribute("class", "key")
element.style.backgroundColor = colors.keyboard.bg
keyUnHoverStyle(index)
})
})

Expand Down Expand Up @@ -150,8 +175,6 @@ function removeListeners(keyName, index) {
var usedLetters = JSON.parse(localStorage.getItem("usedLetters"))
usedLetters[index] = keyName
localStorage.setItem("usedLetters", JSON.stringify(usedLetters))
const oldAtributes = keyName[index].className
keyName[index].className = oldAtributes + " played"
}

function displayActualColors() {
Expand All @@ -164,7 +187,8 @@ function displayActualColors() {
actualColors[6].innerHTML = colors.keyboard.hover
actualColors[7].innerHTML = colors.keyboard.key
actualColors[8].innerHTML = colors.keyboard.letterUsed
actualColors[9].innerHTML = colors.letters
actualColors[9].innerHTML = colors.keyboard.letterUsedBg
actualColors[10].innerHTML = colors.letters
}

function setColors() {
Expand Down Expand Up @@ -264,7 +288,7 @@ function init() {
function looseGame(word) {
reset(word)
write(word)
looseTile.style.display = "block"
looseTile.style.display = "flex"

}

Expand All @@ -275,10 +299,11 @@ function looseLife() {
}

function winGame() {
winTitle.style.display = "block"
winTitle.style.display = "flex"
}

function keyPress(keyName, number) {
keyUsedStyle(number)
var usedLetters = JSON.parse(localStorage.getItem("usedLetters"))
var found = false
var foundLetters = JSON.parse(localStorage.getItem("foundLetters"))
Expand All @@ -296,7 +321,6 @@ function keyPress(keyName, number) {
numberOfFoundLetters++
}
}
console.log(word == foundLetters, word[1] === foundLetters[1]);
console.log(life);
if (found == false) {
looseLife()
Expand All @@ -315,6 +339,8 @@ function keyPress(keyName, number) {
write(foundLetters)
}

key[number].style.color = colors.keyboard.letterUsed

localStorage.setItem("foundLetters", JSON.stringify(foundLetters))
localStorage.setItem("numberOfFoundLetters", JSON.stringify(numberOfFoundLetters))
localStorage.setItem("usedLetters", JSON.stringify(usedLetters))
Expand Down
72 changes: 42 additions & 30 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@ body {
justify-content: center;
/* align-items: ; */
/* position: relative; */
width: 100vw;
height: 100vh;

margin: 0px;
font-family: "Space Mono", sans-serif;
}
Expand All @@ -20,27 +19,27 @@ button {
align-self: self-start;
}



#game {
/* border: 1px #fff solid; */
top: 200px;
display: flex;
/* top: -38px; */
align-self: center;
justify-self: center;
position: absolute;
z-index: 100;
height: 46px;
background-color: #5865f2;
padding-left: 5px;
padding-top: 5px;
padding-bottom: 35px;
padding-bottom: 15px;
border-radius: 5px;
}

.letter {
/* position: relative; */
/* top: 50px; */
color: #FFF;
font-size: 64px;
font-size: 32px;
align-self: center;
padding: 5px;
padding-bottom: 0px;
Expand All @@ -52,8 +51,8 @@ button {

#keyboard {
display: grid;
grid-template-columns: repeat(20, 5vw);
grid-template-rows: repeat(6, 5vw);
grid-template-columns: repeat(20, 18px);
grid-template-rows: repeat(6, 18px);
grid-column-gap: 0px;
grid-row-gap: 0px;
/* width: 400px;
Expand All @@ -66,50 +65,58 @@ button {

#hangman {
position: absolute;
top: 17vh;
left: 0px;
bottom: 300px;
align-self: center;

}

.parts {
position: absolute;
width: 60vw;
width: 256px;
height: auto;
display: none;
}

.key {
border: 0px #23272a solid;
background-color: #23272a;
transition: 0.3s;
font-size: 5vw;
font-size: 18px;
color: #fff;
border-radius: 5px;
margin: 1px;
}

.keyHover{
/* .keyHover{
box-shadow: 0px 8px 15px rgba(0,0,0,.5);
z-index: 1000;
}
} */

#play {
position: fixed;
top: 0px;
left: 0px;
}

#title{
display: flex;
justify-content: center;
position: absolute;
top: 50px;
width: 300px;
}

.end {
justify-self: center;
font-size: 32px;
position: absolute;
top: 200px;
display: none;
color: #FFF;
}

.played {
/* .played {
color: #555;
}
background-color: #313338;
} */

#themeSelector {
border-radius: 5px;
Expand All @@ -126,7 +133,7 @@ button {
.deployed {
background-color: #5865f2;
width: 300px;
height: 430px;
height: 460px;
}

#brush {
Expand All @@ -148,17 +155,17 @@ button {
left: 5px;
}

#actual{
#actual {
display: flex;
align-items: self-end;
flex-direction: column;
position: absolute;
top: 0px;
right: 5px;

}

.actualColor{
.actualColor {
height: 25px;
width: auto;
font-weight: bold;
Expand All @@ -167,9 +174,9 @@ button {
color: #fff;
}

#bottomThemeSelector{
#bottomThemeSelector {
width: 300px;
height: 390px;
height: 420px;
position: absolute;
top: 40px;
border-top: 2px#4F5CD6 solid;
Expand Down Expand Up @@ -208,7 +215,7 @@ button {
transition: 0.3s;
}

#apply{
#apply {
position: absolute;
bottom: 10px;
right: 10px;
Expand All @@ -232,10 +239,14 @@ button {
height: auto;
}

/* #game{
width: 100vw;
height: 1px;
} */
#game {
padding-bottom: 45px;
top: 100px;
}

.letter{
font-size: 64px;
}

.key {
font-size: 32px;
Expand All @@ -246,6 +257,7 @@ button {

#a {
grid-area: 1 / 1 / 3 / 3;
margin-left: 0px;
}

#z {
Expand Down

0 comments on commit 5a065fc

Please sign in to comment.