fix invincible game

tanhongit · Aug 16, 2020 · d2f3cdd · d2f3cdd
1 parent aa53c68
commit d2f3cdd
Show file tree

Hide file tree

Showing 4 changed files with 345 additions and 186 deletions.
diff --git a/app/assets/stylesheets/pages.scss b/app/assets/stylesheets/pages.scss
@@ -163,4 +163,124 @@ h1 {
 
 .btn-4 span:hover:after {
     width: 100%;
-}
+}
+
+td {
+	border        : 2px solid #333;
+	height        : 100px;
+	width         : 100px;
+	text-align    : center;
+	vertical-align: middle;
+	font-size     : 70px;
+	cursor        : pointer;
+	box-shadow    : 0 2px 10px rgba(0, 0, 0, .3);
+}
+
+table tr:first-child td {
+	border-top: 5px solid #333;
+}
+
+table tr:last-child td {
+	border-bottom: 5px solid #333;
+}
+
+table tr td:first-child {
+	border-left: 5px solid #333;
+}
+
+table tr td:last-child {
+	border-right: 5px solid #333;
+}
+
+table {
+	border-collapse: collapse;
+	position       : absolute;
+	left           : 50%;
+	margin-left    : -155px;
+	top            : 250px;
+}
+
+.endgame {
+	display         : none;
+	width           : 200px;
+	top             : 320px;
+	background-color: rgba(37, 167, 54, 0.8);
+	position        : absolute;
+	left            : 50%;
+	margin-left     : -100px;
+	padding-top     : 50px;
+	padding-bottom  : 50px;
+	text-align      : center;
+	border-radius   : 5px;
+	color           : white;
+	font-size       : 2em;
+}
+
+.btn-2 {
+    background: rgb(96, 9, 240);
+    color        : #fff;
+	background: linear-gradient(0deg, rgba(96, 9, 240, 1) 0%, rgba(129, 5, 240, 1) 100%);
+    border    : none;
+    box-shadow   : inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
+		7px 7px 20px 0px rgba(0, 0, 0, .1),
+		4px 4px 5px 0px rgba(0, 0, 0, .1);
+
+}
+
+.btn-2:before {
+	height: 0%;
+	width : 2px;
+}
+
+.btn-2:hover {
+	box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, .5),
+		-4px -4px 6px 0 rgba(116, 125, 136, .5),
+		inset -4px -4px 6px 0 rgba(255, 255, 255, .2),
+		inset 4px 4px 6px 0 rgba(0, 0, 0, .4);
+}
+
+@media (min-width: 1080px) {
+	.replay {
+		left           : 45%;
+		position       : relative;
+		display        : inline-block;
+		padding        : 1.2em 2em;
+		text-decoration: none;
+		text-align     : center;
+		cursor         : pointer;
+		user-select    : none;
+		color          : white;
+	}
+
+	.replay::before {
+		content      : '';
+		position     : absolute;
+		top          : 0;
+		left         : 0%;
+		bottom       : 0;
+		right        : 0;
+		background   : linear-gradient(135deg, #6e8efb, #a777e3);
+		border-radius: 4px;
+		transition   : box-shadow .5s ease, transform .2s ease;
+		will-change  : transform;
+		box-shadow   : 0 2px 5px rgba(0, 0, 0, .2);
+		transform    :
+			translateY(var(--ty, 0)) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateZ(var(--tz, -12px));
+	}
+
+	.replay:hover::before {
+		box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
+	}
+
+	.replay::after {
+		position      : relative;
+		display       : inline-block;
+		content       : attr(data-title);
+		transition    : transform .2s ease;
+		font-weight   : bold;
+		letter-spacing: .01em;
+		will-change   : transform;
+		transform     :
+			translateY(var(--ty, 0)) rotateX(var(--rx, 0)) rotateY(var(--ry, 0));
+	}
+}
diff --git a/app/views/layouts/_navbar.html.erb b/app/views/layouts/_navbar.html.erb
@@ -17,6 +17,9 @@
       <li class="nav-item">
         <%= link_to "Two players", twoplayers_path, class:'nav-link' %>
       </li>
+      <li class="nav-item">
+       <%= link_to "Invincible AI Game!", invincible_path, class:'nav-link  ' %>
+      </li>
     </ul>
     <ul class="navbar-nav ml-auto">
       <% if current_user %>

diff --git a/app/views/pages/home.html.erb b/app/views/pages/home.html.erb
@@ -10,6 +10,7 @@
     <%= link_to "Two players!", twoplayers_path, class:'custom-btn btn-5' %>
     <br />
     <br />
+    <%= link_to "Invincible AI Game!", invincible_path, class:'custom-btn btn-5' %>
     <hr>
     <% if current_user %>
       <%= link_to "Logout", destroy_user_session_path, class:'custom-btn btn-4', method: :delete %>