SplendidBear-Websites/MineSeeker
Private
Public Access
1
0
Fork 0
Code Pull Requests 1 Releases Activity

clipboard - not working #8

Browse Source
This commit is contained in:
Root
2016-11-19 16:37:08 +01:00
parent 47627edca8
commit a1de5ae0c8
5 changed files with 77 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -10,6 +10,7 @@
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.11.1",
"clipboard": "^1.5.15",
"howler": "^2.0.1",
"js-base64": "^2.1.9",
"react": "^15.3.2",

60
src/Mine/SeekerBundle/Resources/public/css/style.mineseeker.css
View File

@@ -103,6 +103,66 @@ main {
font-size: 18px;
}
#mine-wrapper .game-wrapper .game-overlay .game-overlay-window .clippy {
display: flex;
align-items: center;
width: 100%;
}
#mine-wrapper .game-wrapper .game-overlay .game-overlay-window .clippy input {
border: 0;
height: 40px;
width: 90%;
padding: 0 20px;
-webkit-border-top-left-radius: 3px;
border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
border-bottom-left-radius: 3px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
}
#mine-wrapper .game-wrapper .game-overlay .game-overlay-window .clippy button {
border: 0;
width: 10%;
height: 40px;
cursor: pointer;
-webkit-border-top-right-radius: 3px;
border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
}
#mine-wrapper .game-wrapper .game-overlay .game-overlay-window .clippy button img {
width: 15px;
height: 15px;
}
#mine-wrapper .game-wrapper .game-overlay .game-overlay-window a {
background: #d8e3ea;
display: table;
text-decoration: none;
color: #126aa2;
padding: 10px 50px;
margin: 0 auto;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
#mine-wrapper .game-wrapper .game-overlay .game-overlay-window a:hover {
background: #a4afb6;
color: #ffffff;
-webkit-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
#mine-wrapper .game-wrapper .users {
width: 180px;
padding: 0 10px 0 0;

3
src/Mine/SeekerBundle/Resources/public/images/clippy.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg height="1024" width="896" xmlns="http://www.w3.org/2000/svg">
<path d="M128 768h256v64H128v-64z m320-384H128v64h320v-64z m128 192V448L384 640l192 192V704h320V576H576z m-288-64H128v64h160v-64zM128 704h160v-64H128v64z m576 64h64v128c-1 18-7 33-19 45s-27 18-45 19H64c-35 0-64-29-64-64V192c0-35 29-64 64-64h192C256 57 313 0 384 0s128 57 128 128h192c35 0 64 29 64 64v320h-64V320H64v576h640V768zM128 256h512c0-35-29-64-64-64h-64c-35 0-64-29-64-64s-29-64-64-64-64 29-64 64-29 64-64 64h-64c-35 0-64 29-64 64z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 519 B

12
src/Mine/SeekerBundle/Resources/public/js/mine-seeker/app.js
View File

@@ -85,7 +85,17 @@ class MineSeeker extends React.Component {
overlay: true,
overlayTitle: "We are waiting for your opponent...",
overlaySubTitle: this.state.gameAssoc
? <a href={"/play/" + this.state.gameAssoc} target="_blank">Play w/ me!</a>
?
<div>
<div className="clippy">
<input id="foo"
defaultValue={window.location.href + '/' + this.state.gameAssoc}/>
<button className="btn">
<img src="/bundles/mineseeker/images/clippy.svg" alt="Copy to clipboard"/>
</button>
</div>
<a href={"/play/" + this.state.gameAssoc} target="_blank">Play w/ me!</a>
</div>
: '',
renderGridFields: this.state.gameAssoc
});

1
src/Mine/SeekerBundle/Resources/views/Game/play.html.twig
View File

@@ -21,6 +21,7 @@
{{ ws_client() }}
<script type="text/javascript" src="{{ asset('node/howler/dist/howler.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('node/clipboard/dist/clipboard.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('node/js-base64/base64.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/index.js') }}"></script>
{% endblock %}