alternate style for gamebook player
Thibault Duplessis
parent
e52f482614
commit
9892d512a6
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 512px; width: 512px;"><defs><filter id="shadow-3" height="300%" width="300%" x="-100%" y="-100%"><feFlood flood-color="#ffffff" result="flood"></feFlood><feComposite in="flood" in2="SourceGraphic" operator="atop" result="composite"></feComposite><feGaussianBlur in="composite" stdDeviation="15" result="blur"></feGaussianBlur><feOffset dx="13" dy="17" result="offset"></feOffset><feComposite in="SourceGraphic" in2="offset" operator="over"></feComposite></filter></defs><path d="M0 0h512v512H0z" fill="#d0021b" opacity="0"></path><g class="" transform="translate(0,0)" style="touch-action: none;"><path fill="#3893e8" d="M150.25 19.97c-114.48-.574-139.972 184.95 20.563 212.124-29.5.534-55.382 8.11-91.75 25.97C-19.2 306.313.665 462.966 100.874 446c34.48-5.838 51.21-50.325.875-65.375 16.515 29.61-27.968 47.1-41.906 1.938-11.262-36.49 21.145-74.914 52.468-85 30.5-9.82 55.244-10.86 82.47-5.844-36.585 34.247-56.547 80.465-42.376 123.624 44.522 135.595 192.146 82.52 162.844-6.72-10.346-31.506-41.408-46.505-68-10.155 35.164-8.854 50.45 38.75 18.188 49.342-26.355 8.655-60.212-13.527-66.032-41.343-7.82-37.39 19.77-77.195 54.78-95.25 22.176 35.37 38.812 48.68 83.22 72.186 85.843 45.436 212.957-36.54 143.906-110.53-22.626-24.244-54.574-30.02-67.5 13.124 30.188-20.09 60.748 26.8 33.875 47.563-21.95 16.96-61.503 19.135-86.437 5.5-30.797-16.842-53.79-37.798-70.188-66.532 57.07 13.69 119.584-1.065 143-45.342 45.72-86.45-7.046-152.467-59.125-153.375-20.378-.356-40.654 9.237-54.875 31.5-17.85 27.946-9.815 61.533 35.157 59.124-29.11-21.628-1.9-63.623 26.717-45.343 23.378 14.932 22.494 51.88 9.75 77.28-15.165 30.23-60.573 50.738-95.062 24.657-3.008-5.71-5.563-11.683-7.78-17.843 8.99-6.49 14.874-17.028 14.874-28.875 0-17.772-13.252-32.64-30.345-35.218-9.763-47.134-23.34-92.648-84.844-112.594-13.64-4.424-26.437-6.472-38.28-6.53zm117.844 137.405c9.463 0 16.937 7.474 16.937 16.938 0 9.463-7.473 16.937-16.936 16.937-9.463 0-16.906-7.474-16.906-16.938 0-9.463 7.443-16.937 16.906-16.937zm-65.406 10.5c9.463 0 16.937 7.474 16.937 16.938 0 9.463-7.474 16.937-16.938 16.937-9.463 0-16.937-7.474-16.937-16.938 0-9.463 7.474-16.937 16.938-16.937z"></path></g><!-- react-empty: 13 --></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 512px; width: 512px;"><path d="M0 0h512v512H0z" fill="transparent" opacity="0"></path><g class="" transform="translate(0,0)" style="touch-action: none;"><path fill="#3893e8" d="M150.25 19.97c-114.48-.574-139.972 184.95 20.563 212.124-29.5.534-55.382 8.11-91.75 25.97C-19.2 306.313.665 462.966 100.874 446c34.48-5.838 51.21-50.325.875-65.375 16.515 29.61-27.968 47.1-41.906 1.938-11.262-36.49 21.145-74.914 52.468-85 30.5-9.82 55.244-10.86 82.47-5.844-36.585 34.247-56.547 80.465-42.376 123.624 44.522 135.595 192.146 82.52 162.844-6.72-10.346-31.506-41.408-46.505-68-10.155 35.164-8.854 50.45 38.75 18.188 49.342-26.355 8.655-60.212-13.527-66.032-41.343-7.82-37.39 19.77-77.195 54.78-95.25 22.176 35.37 38.812 48.68 83.22 72.186 85.843 45.436 212.957-36.54 143.906-110.53-22.626-24.244-54.574-30.02-67.5 13.124 30.188-20.09 60.748 26.8 33.875 47.563-21.95 16.96-61.503 19.135-86.437 5.5-30.797-16.842-53.79-37.798-70.188-66.532 57.07 13.69 119.584-1.065 143-45.342 45.72-86.45-7.046-152.467-59.125-153.375-20.378-.356-40.654 9.237-54.875 31.5-17.85 27.946-9.815 61.533 35.157 59.124-29.11-21.628-1.9-63.623 26.717-45.343 23.378 14.932 22.494 51.88 9.75 77.28-15.165 30.23-60.573 50.738-95.062 24.657-3.008-5.71-5.563-11.683-7.78-17.843 8.99-6.49 14.874-17.028 14.874-28.875 0-17.772-13.252-32.64-30.345-35.218-9.763-47.134-23.34-92.648-84.844-112.594-13.64-4.424-26.437-6.472-38.28-6.53zm117.844 137.405c9.463 0 16.937 7.474 16.937 16.938 0 9.463-7.473 16.937-16.936 16.937-9.463 0-16.906-7.474-16.906-16.938 0-9.463 7.443-16.937 16.906-16.937zm-65.406 10.5c9.463 0 16.937 7.474 16.937 16.938 0 9.463-7.474 16.937-16.938 16.937-9.463 0-16.937-7.474-16.937-16.938 0-9.463 7.474-16.937 16.938-16.937z" transform="translate(512, 0) scale(-1, 1) rotate(0, 256, 256)"></path></g><!-- react-empty: 6 --></svg>
|
||||
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 1.8 KiB |
|
|
@ -1,5 +1,5 @@
|
|||
.gb_play .lichess_game .lichess_ground {
|
||||
margin-bottom: -140px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.gb_play .gamebook {
|
||||
height: 100%;
|
||||
|
|
@ -21,13 +21,13 @@
|
|||
position: absolute;
|
||||
content: '';
|
||||
bottom: -9px;
|
||||
left: 40%;
|
||||
right: 20%;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: #fff;
|
||||
border-right: 1.5px solid #aaa;
|
||||
border-bottom: 1px solid #aaa;
|
||||
transform: skew(-45deg) rotate(45deg);
|
||||
border-right: 1px solid #aaa;
|
||||
border-bottom: 1.5px solid #aaa;
|
||||
transform: skew(45deg) rotate(45deg);
|
||||
z-index: 1;
|
||||
}
|
||||
.gb_play .comment .content {
|
||||
|
|
@ -44,13 +44,18 @@
|
|||
z-index: 2;
|
||||
}
|
||||
|
||||
.gb_play .floor {
|
||||
margin-top: 20px;
|
||||
flex: 0 0 120px;
|
||||
display: flex;
|
||||
}
|
||||
.gb_play .mascot {
|
||||
margin: 10px 0 -7px 0;
|
||||
flex: 0 0 120px;
|
||||
margin-left: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.gb_play .feedback {
|
||||
flex: 0 0 120px;
|
||||
margin-top: 20px;
|
||||
flex: 1 1 100%;
|
||||
height: 120px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
|
|
@ -88,6 +93,7 @@
|
|||
.gb_play .feedback.end {
|
||||
flex-flow: row;
|
||||
justify-content: space-between;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
.gb_play .feedback.end a {
|
||||
background: rgba(56,147,232,0.8);
|
||||
|
|
@ -103,7 +109,7 @@
|
|||
transition: 0.13s;
|
||||
}
|
||||
.gb_play .feedback.end a::before {
|
||||
font-size: 2em;
|
||||
font-size: 2.5em;
|
||||
margin: 12px 0 8px 0;
|
||||
}
|
||||
.gb_play .feedback.end a:first-child {
|
||||
|
|
|
|||
|
|
@ -23,16 +23,18 @@ export function render(ctrl: GamebookPlayCtrl): VNode {
|
|||
h('div.content', { hook: richHTML(comment) }),
|
||||
state.showHint ? h('div.hint', { hook: richHTML(state.hint!) }) : undefined
|
||||
]) : undefined,
|
||||
h('img.mascot', {
|
||||
attrs: {
|
||||
width: 120,
|
||||
height: 120,
|
||||
src: ctrl.mascot.url(),
|
||||
title: 'Click to choose your teacher'
|
||||
},
|
||||
hook: bind('click', ctrl.mascot.switch, ctrl.redraw)
|
||||
}),
|
||||
renderFeedback(ctrl, state)
|
||||
h('div.floor', [
|
||||
renderFeedback(ctrl, state),
|
||||
h('img.mascot', {
|
||||
attrs: {
|
||||
width: 120,
|
||||
height: 120,
|
||||
src: ctrl.mascot.url(),
|
||||
title: 'Click to choose your teacher'
|
||||
},
|
||||
hook: bind('click', ctrl.mascot.switch, ctrl.redraw)
|
||||
})
|
||||
])
|
||||
]);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue