Eric WagonerandClaude Fable 5
1b9e6e32d8
Already live on the server via rsync; bringing the repo in sync. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
421 lines
9.3 KiB
CSS
421 lines
9.3 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap');
|
|
html {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: black;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
min-height: 100%;
|
|
touch-action: manipulation;
|
|
}
|
|
body {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: black;
|
|
color: rgb(203 203 203);
|
|
display: flex;
|
|
flex: 1;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
}
|
|
input {
|
|
font-size: 14px;
|
|
}
|
|
button {
|
|
font-size: 14px;
|
|
}
|
|
body.play {
|
|
overflow: hidden;
|
|
}
|
|
main {
|
|
margin: 0;
|
|
padding: 0;
|
|
position: relative;
|
|
}
|
|
body.play main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
}
|
|
a, a:visited, a:active {
|
|
color: #fff;
|
|
text-decoration: underline;;
|
|
}
|
|
a:hover, a:active {
|
|
color: rgb(185 54 61);
|
|
}
|
|
#intro {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
max-width: 640px;
|
|
max-height: 1000px;
|
|
text-align: center;
|
|
opacity: 1;
|
|
padding: 20px 20px;
|
|
transition: max-height 250ms, opacity 250ms, padding 250ms;
|
|
}
|
|
body.play #intro {
|
|
border: solid 0 transparent;
|
|
opacity: 0;
|
|
max-height: 0;
|
|
padding: 0;
|
|
}
|
|
#intro #header {
|
|
border: solid 3px rgb(185 54 61);
|
|
border-radius: 10px;
|
|
padding: 5px 50px;
|
|
background: #242424;
|
|
text-shadow: 3px 3px 1px rgb(0 0 0);
|
|
margin: 0 auto 30px auto;
|
|
display: inline-block;
|
|
background-image: url('../images/dragonBackground.jpg');
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
#intro #header h1 {
|
|
font-family: MedievalSharp;
|
|
color: #fff;
|
|
font-size: 1.4em;
|
|
font-weight: 700;
|
|
line-height: 1.3em;
|
|
}
|
|
#intro .subtext {
|
|
color: #999;
|
|
font-size: .75em;
|
|
}
|
|
#intro .subtext a {
|
|
color: #999
|
|
}
|
|
#intro .subtext a:hover, a:active {
|
|
color: rgb(185 54 61);
|
|
}
|
|
#intro .subtext a:hover, a:active {
|
|
color: rgb(185 54 61);
|
|
}
|
|
#container {
|
|
position: relative;
|
|
display: block;
|
|
width: 90vmin;
|
|
height: 30%;
|
|
margin: 0 auto;
|
|
transition: width 250ms, height 250ms, margin 250ms;
|
|
}
|
|
body.play #container {
|
|
height: 90vmin;
|
|
margin: auto;
|
|
}
|
|
#start {
|
|
display: flex;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 10000;
|
|
background-color: rgba(0,0,0,.7);
|
|
text-align: center;
|
|
cursor: pointer;
|
|
align-content: center;
|
|
justify-content: center;
|
|
}
|
|
#start .text {
|
|
background-color: 242424;
|
|
padding: 10px 15px;
|
|
border-radius: 5px;
|
|
font-weight: 700;
|
|
border: solid 3px rgb(185 54 61);
|
|
z-index: 10001;
|
|
box-shadow: 0px 0px 20px 5px black;
|
|
display: inline-block;
|
|
margin: auto;
|
|
font-family: 'MedievalSharp';
|
|
text-shadow: 3px 3px 1px rgb(0 0 0);
|
|
vertical-align: middle;
|
|
letter-spacing: normal;
|
|
color: #fff;
|
|
}
|
|
body.play #start {
|
|
display: none;
|
|
}
|
|
#board {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
display: flex;
|
|
margin: 0;
|
|
background-image: url('../images/board.jpg');
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
background-position: center;
|
|
transition: width 250ms ease-in-out, height 250ms ease-in-out, margin 250ms ease-in-out;
|
|
}
|
|
body.play #home {
|
|
display: flex;
|
|
}
|
|
#menu {
|
|
display: none;
|
|
flex-direction: row;
|
|
position: fixed;
|
|
top: 5px;
|
|
right: 5px;
|
|
left: 5px;
|
|
padding: 5px;
|
|
align-items: center;
|
|
color: #bebebe;
|
|
}
|
|
#menuLeft {
|
|
display: flex;
|
|
width: 30%;
|
|
justify-content: flex-start;
|
|
}
|
|
#menuCenter {
|
|
display: flex;
|
|
flex: 1;
|
|
justify-content: center;
|
|
}
|
|
#menuRight {
|
|
display: flex;
|
|
width: 30%;
|
|
justify-content: flex-end;
|
|
}
|
|
#menu a, #menu a:visited {
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
color: #bebebe;
|
|
}
|
|
#menu a:hover, #menu a:active {
|
|
color: rgb(185 54 61);
|
|
text-decoration: underline;
|
|
}
|
|
#menu button {
|
|
color: #bebebe;
|
|
border: solid 2px rgb(185 54 61);
|
|
border-radius: 5px;
|
|
background-color: rgba(0,0,0,.7);
|
|
padding: 3px 15px;
|
|
outline: none;
|
|
cursor: pointer;
|
|
transition: background-color 250ms;
|
|
}
|
|
#menu button:hover {
|
|
background-color: rgba(185, 54, 61, .6);
|
|
color: #fff;
|
|
}
|
|
#menu input[type=checkbox] {
|
|
margin-right: 5px;
|
|
cursor: pointer;
|
|
}
|
|
#menu label {
|
|
cursor: pointer;
|
|
}
|
|
body.play #menu {
|
|
display: flex;
|
|
}
|
|
#helpMessage {
|
|
opacity: 0;
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
text-align: center;
|
|
margin: 0 0 10px 0;
|
|
transition: opacity 250ms;
|
|
}
|
|
body.play #helpMessage.show {
|
|
opacity: 1;
|
|
}
|
|
#grid {
|
|
display: none;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
height: 90vmin;
|
|
width: 90vmin;
|
|
margin: auto;
|
|
}
|
|
body.play #grid {
|
|
display: block;
|
|
}
|
|
#grid .row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
#grid .col {
|
|
display: flex;
|
|
width: 7.7vmin;
|
|
height: 7.4vmin;
|
|
margin: 0;
|
|
border-radius: 1px;
|
|
transition: box-shadow 100ms ease-in-out;
|
|
}
|
|
#grid .cell {
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
z-index: 1000;
|
|
}
|
|
#grid .row:first-child {
|
|
margin-top: 21.2vmin;
|
|
}
|
|
#grid .button {
|
|
margin-left: 11vmin;
|
|
margin-right: 1.7vmin;
|
|
}
|
|
#grid .button.switch .cell {
|
|
margin: 1.7vmin 1.3vmin .9vmin 1.3vmin;
|
|
border-radius: .25vmin;
|
|
transition: box-shadow 250ms, background-color 250ms;
|
|
}
|
|
#grid .button.selected .cell {
|
|
box-shadow: 0 0 1vmin 0.5vmin rgb(255 80 80);
|
|
background-color: rgba(255,180,180,.5);
|
|
}
|
|
#grid .button, #grid .chamber {
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
#grid .chamber .southWall {
|
|
visibility: hidden;
|
|
width: 100%;
|
|
position: absolute;
|
|
bottom: -1vmin;
|
|
left: 0;
|
|
height: 1.9vmin;
|
|
display: block;
|
|
z-index: 10;
|
|
background-image: url('../images/southWall.png');
|
|
background-size: contain;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
#grid .chamber .eastWall {
|
|
visibility: hidden;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
right: -1.1vmin;
|
|
width: 2vmin;
|
|
display: block;
|
|
z-index: 10;
|
|
background-image: url('../images/eastWall.png');
|
|
background-size: contain;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
#grid .chamber .secretRoomOne, #grid .chamber .secretRoomTwo, #grid .chamber .treasureRoom {
|
|
position: absolute;
|
|
left: 1vmin;
|
|
top: 1.3vmin;
|
|
right: 1.1vmin;
|
|
bottom: 1.2vmin;
|
|
background-size: contain;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
#grid .chamber .secretRoomOne {
|
|
background-image: url('../images/warriorOneMarker.png');
|
|
}
|
|
#grid .chamber .secretRoomTwo {
|
|
background-image: url('../images/warriorTwoMarker.png');
|
|
}
|
|
#grid .chamber .treasureRoom {
|
|
background-image: url('../images/treasureMarker.png');
|
|
}
|
|
#grid .chamber .warriorOne, #grid .chamber .warriorTwo, #grid .chamber .dragon, #grid .chamber .treasure {
|
|
background-position: bottom center;
|
|
background-repeat: no-repeat;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 1vmin;
|
|
}
|
|
#grid .chamber .warriorOne, #grid .chamber .warriorTwo {
|
|
display: none;
|
|
height: 11vmin;
|
|
}
|
|
.gameStarted #grid .chamber .warriorOne, .gameStarted #grid .chamber .warriorTwo {
|
|
display: block;
|
|
}
|
|
#grid .chamber .warriorOne {
|
|
background-size: auto 90%;
|
|
background-image: url("../images/warriorOne.png");
|
|
}
|
|
#grid .chamber .warriorTwo {
|
|
background-size: auto 100%;
|
|
background-image: url("../images/warriorTwo.png");
|
|
}
|
|
#grid .chamber .dragon {
|
|
background-size: auto 100%;
|
|
height: 14vmin;
|
|
background-image: url("../images/dragon.png");
|
|
}
|
|
#grid .chamber .treasure {
|
|
background-size: auto 100%;
|
|
height: 10vmin;
|
|
background-image: url("../images/treasure.png");
|
|
}
|
|
#grid .chamber .treasure.withWarrior {
|
|
transform: translate(1.7vmin, 2.9vmin) scale(.5);
|
|
}
|
|
|
|
body.debug #container.layoutDebug #grid .col.button, body.debug #container.layoutDebug #grid .col.chamber {
|
|
background-color: rgba(0,0,0,.4);
|
|
}
|
|
body.debug #grid .cell.northWallDebug {
|
|
border-top: solid .5vmin #eee;
|
|
}
|
|
body.debug #grid .cell.eastWallDebug {
|
|
border-right: solid .5vmin #eee;
|
|
}
|
|
body.debug #grid .cell.southWallDebug {
|
|
border-bottom: solid .5vmin #eee;
|
|
}
|
|
body.debug #grid .cell.westWallDebug {
|
|
border-left: solid .5vmin #eee;
|
|
}
|
|
body.debug #grid .cell.northDoorDebug {
|
|
border-top: dotted .5vmin #eee;
|
|
}
|
|
body.debug #grid .cell.eastDoorDebug {
|
|
border-right: dotted .5vmin #eee;
|
|
}
|
|
body.debug #grid .cell.southDoorDebug {
|
|
border-bottom: dotted .5vmin #eee;
|
|
}
|
|
body.debug #grid .cell.westDoorDebug {
|
|
border-left: dotted .5vmin #eee;
|
|
}
|
|
body.debug #grid .cell.northOpenDebug {
|
|
border-top: dotted .5vmin rgba(255,255,255,.25);
|
|
}
|
|
body.debug #grid .cell.eastOpenDebug {
|
|
border-right: dotted .5vmin rgba(255,255,255,.25);
|
|
}
|
|
body.debug #grid .cell.southOpenDebug {
|
|
border-bottom: dotted .5vmin rgba(255,255,255,.25);
|
|
}
|
|
body.debug #grid .cell.westOpenDebug {
|
|
border-left: dotted .5vmin rgba(255,255,255,.25);
|
|
}
|
|
body.debug #grid .chamber.traveledDebug .cell {
|
|
background-color: rgba(0,0,255,.4);
|
|
}
|
|
body.debug #grid .chamber.travelingDebug .cell {
|
|
background-color: rgba(255,0,0,.4);
|
|
}
|
|
body.debug #grid .chamber.treasureOptionDebug .cell {
|
|
background-color: rgba(255,215,0,.4);
|
|
}
|
|
body.debug #grid .chamber.treasureDebug .cell {
|
|
background-color: rgba(255,215,0, .6);
|
|
}
|
|
body.debug #grid .chamber .dragon {
|
|
display: block;
|
|
}
|