Skip to content

Commit

Permalink
More layout fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
local committed Dec 16, 2024
1 parent a96b8fe commit 42b86e3
Show file tree
Hide file tree
Showing 10 changed files with 39 additions and 29 deletions.
30 changes: 17 additions & 13 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
grid-template-rows: 72% 12% 12%;
height: 120vw;
width: 90vw;
gap: 2%
row-gap: 2%
}

.grid-container {
Expand All @@ -22,13 +22,13 @@
display: grid;
grid-template-columns: 16% 16% 16% 16% 16% 16%;
background-color: #ffffff;
gap:0.8%;
column-gap:0.8%;
}

.info-container {
display: flex;
flex-direction: row;
gap: 2%;
column-gap: 2%;
width: 100%;
height: 100%;
}
Expand All @@ -37,13 +37,14 @@
display: flex;
flex-direction: column;
user-select: none;
gap: 20%;
row-gap: 0%;
}

.info-text {
font-size: 4vh;
text-align: right;
font-size: 4vw;
text-align: center;
user-select: none;
margin:0
}
}

Expand All @@ -54,7 +55,7 @@
grid-template-columns: 72% 12% 12%;
height: 90vh;
width: 120vh;
gap: 2%
column-gap: 2%
}

.grid-container {
Expand All @@ -70,13 +71,13 @@
display: grid;
grid-template-rows: 16% 16% 16% 16% 16% 16%;
background-color: #ffffff;
gap:0.8%;
row-gap:0.8%;
}

.info-container {
display: flex;
flex-direction: column;
gap: 2%;
row-gap: 4%;
width: 100%;
height: 100%;
}
Expand All @@ -85,13 +86,15 @@
display: flex;
flex-direction: row;
user-select: none;
gap: 20%;
column-gap: 20%;
align-items: center;
}

.info-text {
font-size: 4vh;
text-align: right;
user-select: none;
margin:0
}
}

Expand Down Expand Up @@ -155,27 +158,28 @@

.finder {
width:100%;
height:100%;
z-index: 1;
user-select: none;
touch-action: none;
}

.dropzone {
border: dashed 4px transparent;
border: dashed 2px transparent;
border-radius: 4px;
}

.drop-active {
border-color: #aaa;
z-index: 1;
}

.drop-target {
border-color: #a00;
border-style: solid;
z-index: 2;
}

.drop-target-valid {
border-color: #0a0;
border-style: solid;
z-index: 2;
}
Binary file removed img/Erde.png
View file
Binary file not shown.
Binary file removed img/Feuer.png
View file
Binary file not shown.
Binary file removed img/Luft.png
View file
Binary file not shown.
Binary file removed img/Macht.png
View file
Binary file not shown.
Binary file removed img/Wasser.png
View file
Binary file not shown.
Binary file modified img/Wisdom.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed img/Wissen.png
View file
Binary file not shown.
32 changes: 16 additions & 16 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,28 +24,28 @@
<div class="grid-item"><img data-value=0 id="d4" class="element-image dropzone" src="img/Rechts.png" style="transform:rotate(90deg);" /></div>
<div class="grid-item"><img data-value=0 id="d5" class="element-image dropzone" src="img/RechtsUnten.png" style="transform:rotate(90deg);" /></div>
<div class="grid-item"><img data-value=0 id="d6" class="element-image dropzone" src="img/Rechts.png" /></div>
<div class="grid-item"><img data-value=0 id="q0" class="element-image" src="img/Feuer.png" /></div>
<div class="grid-item"><img data-value=0 id="q1" class="element-image" src="img/Feuer.png" /></div>
<div class="grid-item"><img data-value=0 id="q2" class="element-image" src="img/Feuer.png" /></div>
<div class="grid-item"><img data-value=0 id="q3" class="element-image" src="img/Feuer.png" /></div>
<div class="grid-item"><img data-value=0 id="q0" class="element-image" src="img/Empty.png" /></div>
<div class="grid-item"><img data-value=0 id="q1" class="element-image" src="img/Empty.png" /></div>
<div class="grid-item"><img data-value=0 id="q2" class="element-image" src="img/Empty.png" /></div>
<div class="grid-item"><img data-value=0 id="q3" class="element-image" src="img/Empty.png" /></div>
<div class="grid-item"><img data-value=0 id="d16" class="element-image dropzone" src="img/Rechts.png" style="transform:rotate(180deg);" /></div>
<div class="grid-item"><img data-value=0 id="d7" class="element-image dropzone" src="img/Rechts.png" /></div>
<div class="grid-item"><img data-value=0 id="q4" class="element-image" src="img/Feuer.png"/></div>
<div class="grid-item"><img data-value=0 id="q5" class="element-image" src="img/Feuer.png"/></div>
<div class="grid-item"><img data-value=0 id="q6" class="element-image" src="img/Feuer.png"/></div>
<div class="grid-item"><img data-value=0 id="q7" class="element-image" src="img/Feuer.png"/></div>
<div class="grid-item"><img data-value=0 id="q4" class="element-image" src="img/Empty.png"/></div>
<div class="grid-item"><img data-value=0 id="q5" class="element-image" src="img/Empty.png"/></div>
<div class="grid-item"><img data-value=0 id="q6" class="element-image" src="img/Empty.png"/></div>
<div class="grid-item"><img data-value=0 id="q7" class="element-image" src="img/Empty.png"/></div>
<div class="grid-item"><img data-value=0 id="d17" class="element-image dropzone" src="img/Rechts.png" style="transform:rotate(180deg);" /></div>
<div class="grid-item"><img data-value=0 id="d8" class="element-image dropzone" src="img/Rechts.png" /></div>
<div class="grid-item"><img data-value=0 id="q8" class="element-image" src="img/Feuer.png" /></div>
<div class="grid-item"><img data-value=0 id="q9" class="element-image" src="img/Feuer.png" /></div>
<div class="grid-item"><img data-value=0 id="q10" class="element-image" src="img/Feuer.png" /></div>
<div class="grid-item"><img data-value=0 id="q11" class="element-image" src="img/Feuer.png" /></div>
<div class="grid-item"><img data-value=0 id="q8" class="element-image" src="img/Empty.png" /></div>
<div class="grid-item"><img data-value=0 id="q9" class="element-image" src="img/Empty.png" /></div>
<div class="grid-item"><img data-value=0 id="q10" class="element-image" src="img/Empty.png" /></div>
<div class="grid-item"><img data-value=0 id="q11" class="element-image" src="img/Empty.png" /></div>
<div class="grid-item"><img data-value=0 id="d18" class="element-image dropzone" src="img/Rechts.png" style="transform:rotate(180deg);" /></div>
<div class="grid-item"><img data-value=0 id="d9" class="element-image dropzone" src="img/Rechts.png" /></div>
<div class="grid-item"><img data-value=0 id="q12" class="element-image" src="img/Feuer.png"/></div>
<div class="grid-item"><img data-value=0 id="q13" class="element-image" src="img/Feuer.png"/></div>
<div class="grid-item"><img data-value=0 id="q14" class="element-image" src="img/Feuer.png"/></div>
<div class="grid-item"><img data-value=0 id="q15" class="element-image" src="img/Feuer.png"/></div>
<div class="grid-item"><img data-value=0 id="q12" class="element-image" src="img/Empty.png"/></div>
<div class="grid-item"><img data-value=0 id="q13" class="element-image" src="img/Empty.png"/></div>
<div class="grid-item"><img data-value=0 id="q14" class="element-image" src="img/Empty.png"/></div>
<div class="grid-item"><img data-value=0 id="q15" class="element-image" src="img/Empty.png"/></div>
<div class="grid-item"><img data-value=0 id="d19" class="element-image dropzone" src="img/Rechts.png" style="transform:rotate(180deg);" /></div>
<div class="grid-item"><img data-value=0 id="d15" class="element-image dropzone" src="img/RechtsUnten.png" style="transform:rotate(270deg);" /></div>
<div class="grid-item"><img data-value=0 id="d11" class="element-image dropzone" src="img/Rechts.png" style="transform:rotate(270deg);" /></div>
Expand Down
6 changes: 6 additions & 0 deletions js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -283,6 +283,8 @@ interact('.dropzone').dropzone({
event.target.classList.remove('drop-active')
event.target.classList.remove('drop-target')
event.target.classList.remove('drop-target-valid')
event.relatedTarget.style.backgroundColor = "white"
event.relatedTarget.style.zIndex = "1";
if (!fieldFinderIndex.hasFinder(event.relatedTarget))
{
setRelativeFinderPosition(event.relatedTarget, 0, 0);
Expand Down Expand Up @@ -325,6 +327,8 @@ function rerollFinder()
var img = document.createElement("img");
img.classList.add("finder");
img.id = "f" + i;
img.style.backgroundColor = "white"
img.style.zIndex = "1";
rerollId(img);
let finder_src = document.getElementById("pf" + i);
finder_src.appendChild(img);
Expand All @@ -334,6 +338,8 @@ function rerollFinder()
start (event)
{
fieldFinderIndex.removeFinder(event.target);
event.target.style.backgroundColor = ""
event.target.style.zIndex = "3";
},
move (event)
{
Expand Down

0 comments on commit 42b86e3

Please sign in to comment.