Skip to content

Commit

Permalink
revert mobile stuff -- it doesnt work on mobile!
Browse files Browse the repository at this point in the history
  • Loading branch information
@killerducky
killerducky committed Feb 15, 2024
1 parent fcaeca1 commit bce4a16
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 104 deletions.
100 changes: 51 additions & 49 deletions mahjong/killer_mortal/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,60 +9,62 @@
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="header-title-container">
<h1>Killer Mortal Reviewer</h1>
</div>
</header>
<main>
<div class="outer">
<div class="main-size-container"> <!-- hack for zooming -->
<div class="main-grid">
<span class="grid-hand-p0-container">
<span id="discard-bars" class="discard-bars"></span>
<span class="grid-hand grid-hand-p0"></span>
</span>
<span class="grid-hand rotate grid-hand-p3"></span>
<span class="grid-hand grid-hand-p2"></span>
<span class="grid-hand rotate grid-hand-p1"></span>
<span class="grid-discard grid-discard-p0"></span>
<span class="grid-discard rotate grid-discard-p3"></span>
<span class="grid-discard grid-discard-p2"></span>
<span class="grid-discard rotate grid-discard-p1"></span>
<div class="grid-info">
<button class="info-round"></button>
<dialog class="info-round-modal">
<div class="info-round-table"></div>
<button class="info-round-close">X</button>
</dialog>
<dialog class="info-this-round-modal">
<div class="info-this-round-table"></div>
</dialog>
<span class="info-sticks"></span>
<span class="info-honbas"></span>
<span class="info-doras"></span>
<span class="gi-p0-outer"><span class="gi-p0"></span><span class="gi-p0-result"></span></span>
<span class="gi-p1-outer"><span class="gi-p1"></span><span class="gi-p1-result"></span></span>
<span class="gi-p2-outer"><span class="gi-p2"></span><span class="gi-p2-result"></span></span>
<span class="gi-p3-outer"><span class="gi-p3"></span><span class="gi-p3-result"></span></span>
</div>
<div class="grid-main">
<span class="grid-hand-p0-container">
<span id="discard-bars" class="discard-bars"></span>
<span class="grid-hand grid-hand-p0"></span>
</span>
<span class="grid-hand rotate grid-hand-p3"></span>
<span class="grid-hand grid-hand-p2"></span>
<span class="grid-hand rotate grid-hand-p1"></span>
<span class="grid-discard grid-discard-p0"></span>
<span class="grid-discard rotate grid-discard-p3"></span>
<span class="grid-discard grid-discard-p2"></span>
<span class="grid-discard rotate grid-discard-p1"></span>
<div class="grid-info">
<button class="info-round"></button>
<dialog class="info-round-modal">
<div class="info-round-table"></div>
<button class="info-round-close">X</button>
</dialog>
<dialog class="info-this-round-modal">
<div class="info-this-round-table"></div>
</dialog>
<span class="info-sticks"></span>
<span class="info-honbas"></span>
<span class="info-doras"></span>
<span class="gi-p0-outer"><span class="gi-p0"></span><span class="gi-p0-result"></span></span>
<span class="gi-p1-outer"><span class="gi-p1"></span><span class="gi-p1-result"></span></span>
<span class="gi-p2-outer"><span class="gi-p2"></span><span class="gi-p2-result"></span></span>
<span class="gi-p3-outer"><span class="gi-p3"></span><span class="gi-p3-result"></span></span>
</div>
</div>
<div class="sidebar">
<div class="controls">
<div id="mortal-file-div">
<label id="mortal-html-label" for="mortal-html-file">Choose Mortal File<br>No file loaded</label>
<input type="file" id="mortal-html-file" accept=".html" style="display:none;">
</div>
<button id="hand-dec">&lt; Prev Hand</button>
<button id="hand-inc">Next Hand &gt;</button>
<button id="prev-mismatch">&lt; Prev Error</button>
<button id="next-mismatch">Next Error &gt;</button>
<button id="ply-dec2">&lt; Prev Choice</button>
<button id="ply-inc2">Next Choice &gt;</button>
<button id="ply-dec">&lt; Prev</button>
<button id="ply-inc">Next &gt;</button>
<button id="show-hands">Show hands</button>
</div>
<div class="killer-call-div">
<div class="killer-call-bars"></div>
<img class="killer-call-img" src="media/killerducky.png"></img>
<div class="sidebar">
<div class="controls">
<div id="mortal-file-div">
<label id="mortal-html-label" for="mortal-html-file">Choose Mortal File<br>No file loaded</label>
<input type="file" id="mortal-html-file" style="display:none;">
</div>
<button id="hand-dec">&lt; Prev Hand</button>
<button id="hand-inc">Next Hand &gt;</button>
<button id="prev-mismatch">&lt; Prev Error</button>
<button id="next-mismatch">Next Error &gt;</button>
<button id="ply-dec2">&lt; Prev Choice</button>
<button id="ply-inc2">Next Choice &gt;</button>
<button id="ply-dec">&lt; Prev</button>
<button id="ply-inc">Next &gt;</button>
<button id="show-hands">Show hands</button>
</div>
<div class="killer-call-div">
<div class="killer-call-bars"></div>
<img class="killer-call-img" src="media/killerducky.png"></img>
</div>
</div>
</main>
Expand Down
63 changes: 8 additions & 55 deletions mahjong/killer_mortal/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
--main-width: 750px;
--main-height: 800px;
--neg-margin: -10px;
--zoom: 1.0;

/* blue-green, accents go darker */
--color-main: hsl(190, 100%, 27%);
Expand All @@ -13,18 +12,9 @@
/* Analagous to main: -> green-yellow -> yellow */
--color-bar-mortal: hsl(120, 81%, 34%);
--color-bar-hero: hsl(70, 72%, 48%);
/* Discard background */
--color-tsumogiri: hsl(30, 11%, 78%);
}
@media (max-width: 1010px) {
:root {
--zoom: 0.7;
}
}
@media (max-width: 600px) {
:root {
--zoom: 0.48;
}
}
body, .info-round-modal, .info-round-close, .info-this-round-modal {
font-family: sans-serif;
max-width: 1100px;
Expand All @@ -38,11 +28,10 @@ h1{
text-align: center;
}
.outer {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
display: grid;
grid-template-columns: var(--main-width) 1fr;
}
.main-grid {
.grid-main{
display: grid;
width: var(--main-width);
height: var(--main-height);
Expand All @@ -53,28 +42,6 @@ h1{
"ah-p3 ad-p3 a-info ad-p1 ah-p1"
"ah-p3 . ad-p0 . ah-p1"
"ah-p0 ah-p0 ah-p0 ah-p0 ah-p1";
transform: scale(var(--zoom));
transform-origin: 0% 0% 0px;
}
.sidebar {
width: 260px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
@media (max-width: 1010px) {
.sidebar {
width: 530px;
}
}
@media (max-width: 600px) {
.sidebar {
width: 360px;
}
}
.main-size-container {
width: calc(var(--main-width)*var(--zoom));
height: calc(var(--main-height)*var(--zoom));
}
.grid-hand-p3{
grid-area: ah-p3;
Expand Down Expand Up @@ -219,24 +186,6 @@ h1{
border-color:black;
border-width:2px;
}
@media (max-width: 600px) {
.controls {
width: auto;
grid-template-columns: repeat(2, 60px);
overflow: hidden;
padding:2px;
}
.controls > * {
margin:2px;
padding:8px;
background: var(--color-accent2);
color:var(--color-text);
border-style:outset;
border-color:black;
border-width:2px;
font-size: x-small;
}
}

.info-round, .info-this-round {
background: var(--color-accent2);
Expand Down Expand Up @@ -304,3 +253,7 @@ button:hover {
margin: auto;
margin-top: 20px;
}
/* svg {
filter: drop-shadow(3px 0px 2px rgb(0 0 0 / 0.4)) url(#inset-shadow);
box-shadow: 0 0 15px 6px inset rgba(255,0,96,0.8);
} */

0 comments on commit bce4a16

Please sign in to comment.