diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md deleted file mode 100644 index 2bb8e0c..0000000 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ /dev/null @@ -1,32 +0,0 @@ -## CSOC Task 1 Submission - - -### Track - -- [ ] Android -- [ ] Flutter -- [ ] Web Devlopment - -### Task Completed - -#### Tic Tac Toe - -- [ ] **Task 1**: Implement a two-player mode that allows two people to compete against each other. -- [ ] **Task 2**: Add a single-player mode that allows users to play with an intelligent bot that never loses. -- [ ] **Task 3**: Add an option to select which shape to begin with (X/O). -- [ ] **Task 4:** In single-player mode, add an option to choose who will start first - computer or player. -- [ ] **Extras:** You may keep a record of scores and use player names for interactivity. - -#### Sudoku - -- [ ] **Task 1**: Implement a Sudoku game. (The board may remain the same every time). -- [ ] **Task 2**: Implement a board generator and generate a random board in every game. You may use backtracking or naive approaches to generate the board. -- [ ] **Task 3:** Add a timer to the game, where the user may select a particular time to complete the game within it. **Bonus**: As the time reaches 0, the user can be warned about the time running out. -- [ ] **Task 4:** Warning the user about incorrect inputs and user engagement. -- [ ] **Extras:** To make the game more engaging, you may provide hints if the user is stuck for like 10-20 seconds. - -### Submission - - -[Repo](link) -[APK|Web Site](link) diff --git a/.github/labeler.yml b/.github/labeler.yml deleted file mode 100644 index 714b6e5..0000000 --- a/.github/labeler.yml +++ /dev/null @@ -1,8 +0,0 @@ -android: -- any: ['Android.md'] - -flutter: -- any: ['Flutter.md'] - -web: -- any: ['WebDev.md'] diff --git a/.github/workflows/labeler.yml b/.github/workflows/labeler.yml deleted file mode 100644 index 331ddc9..0000000 --- a/.github/workflows/labeler.yml +++ /dev/null @@ -1,11 +0,0 @@ -name: "Pull Request Labeler" -on: -- pull_request_target - -jobs: - triage: - runs-on: ubuntu-latest - steps: - - uses: actions/labeler@v3 - with: - repo-token: "${{ secrets.GITHUB_TOKEN }}" diff --git a/Android.md b/Android.md deleted file mode 100644 index f2eb313..0000000 --- a/Android.md +++ /dev/null @@ -1,64 +0,0 @@ -# CSOC Week1 Android - -## Introduction -The aptest definition for android is - "Android is a mobile operating system based on a modified version of the Linux kernel and other open-source software, designed primarily for touchscreen mobile devices such as smartphones and tablets." -In short, we can say that it is an Operating system for touchscreen devices, and any device that runs on this Operating System is known as an Android Device. Now for every operating system, some applications can run on it to perform specific tasks. Similarly, for Android Devices, we have Android Apps that can run on them to perform specific tasks. - -Evident enough that the software engineering field for developing such apps is known as Android App Development. -The official language for Android development is Kotlin, but Java is still used in many famous courses and many projects, so you are free to use any of them. - -## Installation - -### Android Studio - -Android Studio is the official Integrated Development Environment (IDE) for Android app development. This software is a bit heavy on normal systems (8 GB Ram & 1 TB HDD) and can be quite laggy for any systems below this configuration. - -[](https://developer.android.com/studio/install) - -While developing an android app you will need to test it on a device. You can test it in two ways - - -- [Real Device (Preferred for slower systems)](https://developer.android.com/studio/debug/dev-options) -For testing you apps on a real device you will need to have a USB cable and an Android device. Follow this tutorial to enable USB debugging in order to run your app in the device. - -- [Emulator](https://developer.android.com/studio/run/emulator) -An Android Emulator simulates Android devices on your computer so that you can test your application on a variety of devices and Android API levels without needing to have each physical device. It provides almost all of the capabilities of a real Android device. - - -## How to get started - -If you haven't had any chance to develop android apps earlier then don't worry it's not too late to start now. Here are few resources to start with android development. - -- Video Tutorial - - [Android development tutorial 1](https://www.youtube.com/playlist?list=PLUcsbZa0qzu3Mri2tL1FzZy-5SX75UJfb) - - [Android development tutorial 2](https://www.youtube.com/playlist?list=PLgCYzUzKIBE8TUoCyjomGFqzTFcJ05OaC) -- Written Tutorials - - [Create a project](https://developer.android.com/training/basics/firstapp/creating-project) - - [Run your app](https://developer.android.com/training/basics/firstapp/running-app) - - [Include new UI](https://developer.android.com/training/basics/firstapp/building-ui) - - [Make it functional](https://developer.android.com/training/basics/firstapp/starting-activity) - -## Submission Guidelines : - -Submission has to be done by sharing your github repo link and the .apk file of your android app - -- Fork and then Clone your repository -- Make a new entry into submissions as explained in comments -- Commit and Push the changes -- Make a Pull request - -## Submissions - - - - - - -- Raina Jain - [TicTacToe](https://github.com/RainaJain5/TicTacToe) [APK](https://github.com/RainaJain5/TicTacToe/blob/master/TicTacToe.apk) -- Mihir Kumar Badkur - [Tic-Tac-Toe](https://github.com/mihir02badkur/Tic-Tac-Toe) [APK](https://github.com/mihir02badkur/Tic-Tac-Toe/blob/master/TIC-TAC-TOE.apk) -- Ayushi Gupta - [Tic_-.Tac_-.Toe04](https://github.com/ayushigupta931/Tic_-.Tac_-.Toe04) [APK](https://github.com/ayushigupta931/Tic_-.Tac_-.Toe04/blob/master/app-debug.apk) diff --git a/Flutter.md b/Flutter.md deleted file mode 100644 index 599d16b..0000000 --- a/Flutter.md +++ /dev/null @@ -1,82 +0,0 @@ -# CSoC Week-1 Flutter - -# Introduction - -Flutter - promises cross platform, natively compiled apps, with slick smooth UIs. Developed by Google, the framework is gaining in popularity, especially amongst new startups. - -## Single Codebase…like Java? - -Flutter’s major selling point is that it allows developers to create mobile apps for Android and iOS using a single codebase. It’s possible to build a Flutter app targeting Android and build the same project on a Mac for iOS devices without changing a single line of code. - -Unlike most other mobile app frameworks Flutter does not use WebView nor OEM widgets. Instead, Flutter uses its own rendering engine to draw widgets. - -Apps are natively compiled too, so you’ll need a machine with Android SDK installed for targetting Android and you’ll need to be running XCode to build for iOS devices. - -# Getting Started - -## Installation - -Here is how you can install Flutter. Do not install Android Studio right now, this week you do not require it. Read until writing your first flutter app. - -[Install](https://flutter.dev/docs/get-started/install) - -To use flutter consistently between different terminal sessions, go through this - -[Linux install](https://flutter.dev/docs/get-started/install/linux#update-your-path) - -Install a suitable IDE. VS Code (compared to Android Studio) is good choice for a light and better experience. - -# For Basic Understanding - -- [Flutter Widgets - Javatpoint](https://www.javatpoint.com/flutter-widgets) -- [Flutter - Container Cheat Sheet](https://medium.com/jlouage/container-de5b0d3ad184) -- [Flutter Tutorial for Beginners - Build iOS and Android Apps with Google's Flutter & Dart](https://youtu.be/GLSG_Wh_YWc) -- [The Flutter Series: Exploring a Flutter project and building your first Flutter app](https://medium.com/@dev.n/the-complete-flutter-series-article-1-exploring-a-flutter-project-and-building-your-first-flutter-e438ea941d70) - -- [The Flutter Series: Basic Widgets and Layout](https://medium.com/@dev.n/the-complete-flutter-series-article-2-basic-widgets-and-layout-in-flutter-92a4fbd4a3e1) - -Don't forget to switch on USB Debugging on your mobile. (In case you are not using an emulator) - -For reference, keep this handy - -[Flutter - Dart API docs](https://api.flutter.dev/) - -# Challenge - -As an aspiring developer, you'd need to keep building things to keep your knowledge on tips. Now that you are good to go with the basics of native Android Development, we want you to build **one of the games** from the following list on your own. - -1. Tic-Tac-Toe Game -2. Sudoku game - -You have to provide your Repo and APK File as part of submission - -### **Judging** - -The evaluation would be done mainly on the following basis: - -1. User Interface and User Experience -2. Authenticity and readability of the code -3. Completion of mentioned tasks -4. Bonus Points for implementing extra features depending on your creativity😉 - -Remember, the deadline for this week's task is **June 13th, 2021, 23:59**. - -## Submission Guidelines : - -Submission has to be done by sharing your github repo link and the .apk file of your application - -- Fork and then Clone your repository -- Make a new entry into submissions as explained in comments -- Commit and Push the changes -- Make a Pull request - -## Submissions - -- Parth Bansal - [tic_tac_toe](https://github.com/parthb83/tic_tac_toe) [APK](https://github.com/parthb83/tic_tac_toe/blob/master/app-release.apk) -- Parth Gupta - [Tic Tac](https://github.com/parthg48/tictactoe_flutter) [APK](https://github.com/king-11/Vue-Birthday/blob/master/public/favicon.ico) -- Drishti Bansal - [Tic-Tac-toe](https://github.com/stuck-in-a-conundrum/Tic-Tac-toe.git) [APK](https://github.com/stuck-in-a-conundrum/Tic-Tac-toe/blob/main/build/app/outputs/apk/debug/app-debug.apk) -- Pawan Kumar [Tic Tac](https://github.com/blackpearl13246/MY_GAME) [APK](build/app/outputs/flutter-apk/app-armeabi-v7a-release.apk) -- Dhroov Singh - [Tictactoe](https://github.com/singhdhroov/Tictactoe.git) [APK](https://github.com/singhdhroov/Tictactoe/blob/master/app-release.apk) -- Dhruv Agarwal - [CSOC-Week1-Tic-Tac-Toe-Flutter](https://github.com/dhruxy/CSOC-Week1-Tic-Tac-Toe-Flutter) [APK](https://github.com/dhruxy/CSOC-Week1-Tic-Tac-Toe-Flutter/blob/main/app-release.apk) -- Dev Raj R - [flutter-tic-tac-toe](https://github.com/dev-raj-1729/flutter-tic-tac-toe) [APK](https://github.com/dev-raj-1729/hello-world/blob/4fcb8a45ae3215ba385a6799e874d812ead23b53/app-release.apk) -- Chirayu Mittal - [tic-tac-toe_Chirayu](https://github.com/chirayumit001/tic-tac-toe_Chirayu) [Site](https://mine-tic-tac-toe-game.netlify.app/#/) diff --git a/README.md b/README.md deleted file mode 100644 index 5508813..0000000 --- a/README.md +++ /dev/null @@ -1,66 +0,0 @@ -# CSOC Week1 - -This week, we'll jump with the basics of development with three tracks - - -1. Android Development -2. Web Development -3. Cross Platform Development using Flutter - -Having knowledge of the previous week is necessary since Git remains highly used in this week. If you think you're weak in any of the topics, then try to revise them. - -There's a basic project in each track as well to finish by the end of this week (June 13), so get your tools back in shape! - -You may choose to compete in any number of tracks. -## Assignment - -This week tasks will be on the basic of UI and UX development. It will comprise of making simple games like TIC-TAC-TOE and SUDOKU . - -**Note** : You have to choose one of them. - -### [TIC-TAC-TOE](https://en.m.wikipedia.org/wiki/Tic-tac-toe) - -The task that we'll be working over is to build a TIC-TAC-TOE game , a multi-player classic game where both players will have to choose between X or O .The first player to complete a diagonal, vertical or a horizontal blocks wins the game. - -### Tasks - -- **Task 1**: Implement a two-player mode that allows two people to compete against each other. -- **Task 2**: Add a single-player mode that allows users to play with an intelligent bot that never loses. -- **Task 3**: Add an option to select which shape to begin with (X/O). -- **Task 4:** In single-player mode, add an option to choose who will start first - computer or player. -- **Extras:** You may keep a record of scores and use player names for interactivity. - - -### [SUDOKU](https://en.wikipedia.org/wiki/Sudoku) - -Sudoku is a logic-based puzzle game .The aim of the Sudoku puzzle is to put in a numerical digit from 1 through 9 in each -cell of a 9×9 grid made up of 3×3 sub-grids (called "block”), starting with various digits -given in some cells (the "givens") with the others empty; each row, column, and block -must contain only one instance of each numeral. - -Complexity of the algorithm that are used in building are divided into two parts. -- One is the complexity of the algorithm to generate the complete grid. We discover the randomness of generating complete grid increases when the complexity increases, that is, the randomness higher and the complexity greater. - -- Second, is the algorithm to assign numbers in grid and check for each row , column and block and declare the final result . - -### Tasks - -- **Task 1**: Implement a Sudoku game. (The board may remain the same every time). -- **Task 2**: Implement a board generator and generate a random board in every game. You may use backtracking or naive approaches to generate the board. -- **Task 3:** Add a timer to the game, where the user may select a particular time to complete the game within it. **Bonus**: As the time reaches 0, the user can be warned about the time running out. -- **Task 4:** Warning the user about incorrect inputs and user engagement. -- **Extras:** To make the game more engaging, you may provide hints if the user is stuck for like 10-20 seconds. - -## Judging - -The evaluation would be done mainly on the following basis: - -1. User Interface and User Experience -2. Authenticity and readability of the code -3. Completion of mentioned tasks -4. Bonus Points for implementing extra features depending on your creativity😉 - -## Tracks - -- [Web Development](/WebDev.md) -- [Android](/Android.md) -- [Flutter](/Flutter.md) diff --git a/WebDev.md b/WebDev.md deleted file mode 100644 index 90c6b6b..0000000 --- a/WebDev.md +++ /dev/null @@ -1,63 +0,0 @@ -# CSOC Week1 Web Development - -## Introduction - -Web development is a basic skill that is often said as a good start to the development field. This week you will learn the basics of web development. You will get familiar with HTML, CSS, and JavaScript. On completion, you will be able to make simple static websites for both desktop and mobile. - -## Responsive UI - -One major thing to ensure while working on Web Apps is to ensure that most people will open your websites on mobile first based on that we develop our site on Mobile First approach and then make changes to scale with increasing screen size - -### Native CSS Tools - -These are vanilla CSS Tools that will allow you to make your UI respond to changes in the screen size. - -- Flexbox -- Grid -- Float -- Media Queries - -### CSS Frameworks - -They provide you with a set of classes and components that scale with the screen size. Although its only recommended to use them when you understand native CSS properly. - -- Bootstrap 5 -- TailwindCSS 2 -- Bulma -- Materialize - -## Submission Guidelines : - -Submission has to be done by sharing your github repo link and deployment link of site - -- Fork and then Clone your repository -- Make a new entry into submissions as explained in comments -- Commit and Push the changes -- Make a Pull request - -## Submissions - - - -- Aniruddh Patil - [repo](https://github.com/lelouch-of-the-code/csoc-week1-wd) | [live site](https://anii-sudoku.netlify.app/) -- Yash Raj - [Sudoku-Game](https://github.com/tiger-yash/Sudoku-Game) [SUDOKU](https://tiger-yash.github.io/Sudoku-Game/) -- Naveen Kumar - [Tic-Tac-Toe](https://github.com/Majesty-12/Tic-Tac-Toe) [Website](https://naveen-tic-tac-toe.netlify.app) -- Sanskar Santosh Totla - [Sudoku-Game](https://github.com/it-is-skywalkerl/Sudoku-Game) [Site](https://it-is-skywalkerl.github.io/Sudoku-Game/) -- Manali Pawar - [Sudoku-Game] (https://github.com/ManaliPawar/Sudoku-Game) [Site](https://manalipawar.github.io/Sudoku-Game/) -- Pratik Mishra [Sudoku_CSoC_2021-web](https://github.com/DolceParadise/Sudoku_CSoC_2021-web) [Site](https://dolceparadise.github.io/Sudoku_CSoC_2021-web/) -- Ashwat Kumar Singh - [Tic Tac](https://github.com/NerdyLucifer/Tic-Tac-Toe) [Site](https://nerdylucifer.github.io/Tic-Tac-Toe/singlePlayerMode.html) -- Ankur Agrawal - [Repo Name](https://github.com/Ankur-Agrawal-ece20/Tic-Tac-Toe) [Site](https://ankur-agrawal-ece20.github.io/Tic-Tac-Toe/index.html) -- Danish Ahmed Mirza - [Tic Tac](https://github.com/try-catch-stack/Tic-Tac-Toe) [Site](https://try-catch-stack.github.io/Tic-Tac-Toe/) -- Tarun Arora - [CSOC-Week1-Tic-Tac-Toe](https://github.com/Tarun-Arora/CSOC-Week1-Tic-Tac-Toe) [Site](https://tarun-arora.github.io/CSOC-Week1-Tic-Tac-Toe/) -- Aditya Chhaparia - [sudoku-game](https://github.com/aditya-chhaparia/sudoku-game) [Site](https://aditya-chhaparia.github.io/sudoku-game/) -- Shubhangi Choudhary - [TicTacToe](https://github.com/shubhangi013/TicTacToe) [Site](https://shubhangi013.github.io/TicTacToe/) -- Sahil saini - [tic-tac-toe](https://github.com/sahilsaini110/tic-tac-toe) [sahilsaini-tic-tac-toe](https://sahilsaini-tic-tac-toe.netlify.app) -- Manu Shukla - [Tic Tac Toe](https://github.com/manu-shukla/Tic-Tac-Toe) [Site](https://manu-shukla.github.io/Tic-Tac-Toe/) -- Divyansh Srivastava [Tic-tac-toe](https://github.com/Divyansh013/Tic-Tac-Toe) [Site](https://divyansh013.github.io/Tic-Tac-Toe/) -- Ashlesha Dixit - [TicTacToe](https://github.com/sakshi-2412/TicTacToe) [Site](https://sakshi-2412.github.io/TicTacToe/) -- Harshita Singh - [TIC-TAC-TOE](https://github.com/hiya-09/TIC-TAC-TOE.git) [Site](https://github.com/hiya-09) -- Apoorve shukla - [Tic-Tac-Toe_game](https://github.com/shukapurv/Tic-Tac-Toe_game) [Site](https://shukapurv.github.io/Tic-Tac-Toe_game/) -- Deepak Verma - [github Repo](https://github.com/Deepakv14/TicTacToeFinal.github.io) [Web Site](https://deepakv14.github.io/TicTacToeFinal.github.io/) -- Debarati Bandopadhyay - [tic-tac-toe](https://github.com/debarati-06/tic-tac-toe) [Site](https://debarati-06.github.io/tic-tac-toe/) -- Ayush Tiwari - [tictactoe.github.io](https://github.com/Ayush-AT24/tictactoe.github.io)[site](https://ayush-at24.github.io/tictactoe.github.io/) -- Somesh Ranjan - [Tic-Tac-Toe](https://github.com/somesh202/Tic-Tac-Toe) [Site](https://somesh202.github.io/Tic-Tac-Toe/) diff --git a/img1.jpeg b/img1.jpeg new file mode 100644 index 0000000..e95092f Binary files /dev/null and b/img1.jpeg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..b4f558b --- /dev/null +++ b/index.html @@ -0,0 +1,62 @@ + + + + + Tic Tac Toe Game + + + +
+
+
Tic Tac Toe
+
+
Play versus
+
+ + +
+
+ +
+
Select the shape to start with
+
+ + +
+
+ +
+
+ +
+
+ + + +
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+ + +
+ +
+ + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..dd9b281 --- /dev/null +++ b/script.js @@ -0,0 +1,891 @@ +var players2 = document.getElementById('players2'); +var singleplayer = document.getElementById('singleplayer'); +var shape = document.getElementById('shape'); +var reset = document.getElementsByClassName('reset'); +var result = document.getElementById('result'); +var boards = document.getElementsByClassName('board'); +var selectbox = document.getElementById('select-box'); +var init_height = selectbox.style.height; +var start = document.getElementsByClassName('start'); +var arr = [players2, singleplayer, shape]; +var x_score = document.getElementById('x_score'); +var o_score = document.getElementById('o_score'); +var initialO = document.getElementsByClassName('O'); +var initialX = document.getElementsByClassName('X'); +var title = document.getElementsByClassName('title'); +var friend = document.getElementById('friend'); +var computer = document.getElementById('computer'); +var turn = document.getElementById('turn'); +var home = document.getElementsByClassName('home'); +var bgimage = document.getElementsByClassName('bg-image'); +var wasResult = false; +var buttons = document.getElementsByTagName('button'); +var player = "notyetassigned"; +var initialSign ="notyetassigned"; +var scoreX = 0; +var scoreO = 0; +var player1name = ""; +var player2name = ""; +var playername = ""; + +var gameResult = false; +friend.onclick = function(){playerInitial('friend')}; +computer.onclick = function(){playerInitial('computer')}; + +var checkFilling = [0,0,0,0,0,0,0,0,0]; +var signsOfBoxes = ['_','_','_','_','_','_','_','_','_']; + +const box1 = document.getElementById('topleft'); +const box2 = document.getElementById('top'); +const box3 = document.getElementById('topright'); +const box4 = document.getElementById('left'); +const box5 = document.getElementById('middle'); +const box6 = document.getElementById('right'); +const box7 = document.getElementById('bottomleft'); +const box8 = document.getElementById('bottom'); +const box9 = document.getElementById('bottomright'); + +function playerInitial(p){ + player = p; + let foo; + if(p == 'friend'){ + buttons[0].style.backgroundColor = "#00BBF0"; + buttons[1].style.backgroundColor = "#162447"; + title[1].innerHTML = "Select the shape to start with"; + buttons[2].innerHTML = "O"; + buttons[3].innerHTML = "X"; + do{ + foo = prompt('Enter player1\'s name'); + }while(foo != null && foo === ""); + player1name = foo; + do{ + foo = prompt('Enter player2\'s name'); + }while(foo != null && foo === ""); + player2name = foo; + } + else{ + buttons[1].style.backgroundColor = "#00BBF0"; + buttons[0].style.backgroundColor = "#162447"; + title[1].innerHTML = "Who will play first?"; + buttons[2].innerHTML = "Computer"; + buttons[3].innerHTML = "You"; + let foo; + do{ + foo = prompt('Enter your name'); + }while(foo != null && foo === ""); + playername= foo; + } +} + +initialO[0].onclick = function(){signfunction('O')}; +initialX[0].onclick = function(){signfunction('X')}; +function signfunction(p){ + initialSign = p; + if(p=='X'){ + buttons[2].style.backgroundColor = "#00BBF0"; + buttons[3].style.backgroundColor = "#162447"; + } + else{ + buttons[3].style.backgroundColor = "#00BBF0"; + buttons[2].style.backgroundColor = "#162447"; + } +} + +start[0].onclick = function() {hide()}; +function hide(){ + if(player == "notyetassigned" || initialSign == "notyetassigned"){ + if(player == "notyetassigned"){ + title[0].style.color = "red"; + } + else{ + title[0].style.color = "black"; + } + if(initialSign == "notyetassigned"){ + title[1].style.color = "red"; + } + else{ + title[1].style.color = "black"; + } + } + else{ + for(var i=0; i 10 || player2name.length > 10) + { + x_score.innerHTML = "X's score: " + scoreX; + o_score.innerHTML = "O's score: " + scoreO; + } + else{ + x_score.innerHTML = player1name + "'s score: " + scoreX; + o_score.innerHTML = player2name + "'s score: " + scoreO; + } + } + else{ + if(typeof(playername) == 'object' || playername.length > 10) + { + x_score.innerHTML = "Computer's score: " + scoreX; + o_score.innerHTML = "O's score: " + scoreO; + } + else{ + x_score.innerHTML = "Computer's score: " + scoreX; + o_score.innerHTML = playername + "'s score: " + scoreO; + } + } + bgimage[0].style.visibility = "hidden"; + bgimage[0].style.overflow = "hidden"; + if(player=='friend'){ + if(typeof(player1name) != 'object' && typeof(player2name) != 'object' && initialSign=='X') alert(player1name + " will play first"); + if(typeof(player1name) != 'object' && typeof(player2name) != 'object' && initialSign == 'O') alert(player2name + " will play first"); + turn.style.visibility = "visible"; + turn.innerHTML = initialSign +"'s turn"; + two_playersgame(); + } + else { + turn.style.visibility = "visible"; + turn.innerHTML = initialSign +"'s turn"; + one_playergame(); + } + + } + +} + + + +/*********************************************************************************** */ +function two_playersgame(){ + turn.innerHTML = initialSign + "'s turn"; + box1.onclick = function() {myfunction('topleft')}; + box2.onclick = function() {myfunction('top')}; + box3.onclick = function() {myfunction('topright')}; + box4.onclick = function() {myfunction('left')}; + box5.onclick = function() {myfunction('middle')}; + box6.onclick = function() {myfunction('right')}; + box7.onclick = function() {myfunction('bottomleft')}; + box8.onclick = function() {myfunction('bottom')}; + box9.onclick = function() {myfunction('bottomright')}; +} +function Xwon(){ + result.style.visibility = "visible"; + if(typeof(player1name) == 'object' || typeof(player2name) == 'object') + { + result.innerHTML = "X won"; + } + else{ + result.innerHTML = player1name + " won"; + } + for(var i=0; i<9; i++) checkFilling[i]=1; + if(!wasResult) scoreX+=1; + if(typeof(player1name) == 'object' || typeof(player2name) == 'object' || (player1name.length>10 || player2name.length>10)) + { + x_score.innerHTML = "X's score: " + scoreX; + } + else{ + x_score.innerHTML = player1name + "'s score: " + scoreX; + } + home[0].style.visibility = "visible"; + wasResult = true; + turn.style.visibility = "hidden"; +} +function Owon(){ + result.style.visibility = "visible"; + if(typeof(player1name) === 'object' || typeof(player2name) === 'object') + { + result.innerHTML = "O won"; + } + else{ + result.innerHTML = player2name + " won"; + } + for(var i=0; i<9; i++) checkFilling[i]=1; + if(!wasResult) scoreO+=1; + + if(typeof(player1name) === 'object' || typeof(player2name) === 'object' || (player1name.length>10 || player2name.length>10)) + { + o_score.innerHTML = "O's score: " + scoreO; + } + else{ + o_score.innerHTML = player2name + "'s score: " + scoreO; + } + home[0].style.visibility = "visible"; + wasResult = true; + turn.innerHTML = initialSign +"'s turn"; + turn.style.visibility = "hidden"; +} +function myfunction(x){ + if(x == "topleft"){ + if(checkFilling[0]==0) + { + document.getElementById(x).innerHTML = initialSign; + signsOfBoxes[0] = initialSign; + if (initialSign == 'X') initialSign = 'O'; else initialSign = 'X'; + checkFilling[0]=1; + } + turn.innerHTML = initialSign + "'s turn"; + } + else if(x == "top"){ + if(checkFilling[1]==0) + { + document.getElementById(x).innerHTML = initialSign; + signsOfBoxes[1] = initialSign; + if (initialSign == 'X') initialSign = 'O'; else initialSign = 'X'; + checkFilling[1]=1; + } + turn.innerHTML = initialSign + "'s turn"; + } + else if(x == "topright"){ + if(checkFilling[2]==0) + { + document.getElementById(x).innerHTML = initialSign; + signsOfBoxes[2] = initialSign; + if (initialSign == 'X') initialSign = 'O'; else initialSign = 'X'; + checkFilling[2]=1; + } + turn.innerHTML = initialSign + "'s turn"; + } + else if(x == "left"){ + if(checkFilling[3]==0) + { + document.getElementById(x).innerHTML = initialSign; + signsOfBoxes[3] = initialSign; + if (initialSign == 'X') initialSign = 'O'; else initialSign = 'X'; + checkFilling[3]=1; + } + turn.innerHTML = initialSign + "'s turn"; + } + else if(x == "middle"){ + if(checkFilling[4]==0) + { + document.getElementById(x).innerHTML = initialSign; + signsOfBoxes[4] = initialSign; + if (initialSign == 'X') initialSign = 'O'; else initialSign = 'X'; + checkFilling[4]=1; + } + turn.innerHTML = initialSign + "'s turn"; + } + else if(x == "right"){ + if(checkFilling[5]==0) + { + document.getElementById(x).innerHTML = initialSign; + signsOfBoxes[5] = initialSign; + if (initialSign == 'X') initialSign = 'O'; else initialSign = 'X'; + checkFilling[5]=1; + } + turn.innerHTML = initialSign + "'s turn"; + } + else if(x == "bottomleft"){ + if(checkFilling[6]==0) + { + document.getElementById(x).innerHTML = initialSign; + signsOfBoxes[6] = initialSign; + if (initialSign == 'X') initialSign = 'O'; else initialSign = 'X'; + checkFilling[6]=1; + } + turn.innerHTML = initialSign + "'s turn"; + } + else if(x == "bottom"){ + if(checkFilling[7]==0) + { + document.getElementById(x).innerHTML = initialSign; + signsOfBoxes[7] = initialSign; + if (initialSign == 'X') initialSign = 'O'; else initialSign = 'X'; + checkFilling[7]=1; + } + turn.innerHTML = initialSign + "'s turn"; + } + else if(x == "bottomright"){ + if(checkFilling[8]==0) + { + document.getElementById(x).innerHTML = initialSign; + signsOfBoxes[8] = initialSign; + if (initialSign == 'X') initialSign = 'O'; else initialSign = 'X'; + checkFilling[8]=1; + } + turn.innerHTML = initialSign + "'s turn"; + } + + if((signsOfBoxes[0] == 'X') && signsOfBoxes[0] == signsOfBoxes[3] && signsOfBoxes[3] == signsOfBoxes[6]){ + box1.style.backgroundColor = "#071E54"; + box4.style.backgroundColor = "#071E54"; + box7.style.backgroundColor = "#071E54"; + Xwon(); + } + else if((signsOfBoxes[0] == 'X') && signsOfBoxes[0] == signsOfBoxes[1] && signsOfBoxes[1] == signsOfBoxes[2]){ + box1.style.backgroundColor = "#071E54"; + box2.style.backgroundColor = "#071E54"; + box3.style.backgroundColor = "#071E54"; + Xwon(); + } + else if((signsOfBoxes[3] == 'X') && signsOfBoxes[3] == signsOfBoxes[4] && signsOfBoxes[4] == signsOfBoxes[5]){ + box4.style.backgroundColor = "#071E54"; + box5.style.backgroundColor = "#071E54"; + box6.style.backgroundColor = "#071E54"; + Xwon(); + } + else if((signsOfBoxes[1] == 'X') && signsOfBoxes[1] == signsOfBoxes[4] && signsOfBoxes[4] == signsOfBoxes[7]){ + box2.style.backgroundColor = "#071E54"; + box5.style.backgroundColor = "#071E54"; + box8.style.backgroundColor = "#071E54"; + Xwon(); + } + else if((signsOfBoxes[6] == 'X') && signsOfBoxes[6] == signsOfBoxes[7] && signsOfBoxes[7] == signsOfBoxes[8]){ + box7.style.backgroundColor = "#071E54"; + box8.style.backgroundColor = "#071E54"; + box9.style.backgroundColor = "#071E54"; + Xwon(); + } + else if((signsOfBoxes[2] == 'X') && signsOfBoxes[2] == signsOfBoxes[5] && signsOfBoxes[5] == signsOfBoxes[8]){ + box3.style.backgroundColor = "#071E54"; + box6.style.backgroundColor = "#071E54"; + box9.style.backgroundColor = "#071E54"; + Xwon(); + } + else if((signsOfBoxes[0] == 'X') && signsOfBoxes[0] == signsOfBoxes[4] && signsOfBoxes[4] == signsOfBoxes[8]){ + box1.style.backgroundColor = "#071E54"; + box5.style.backgroundColor = "#071E54"; + box9.style.backgroundColor = "#071E54"; + Xwon(); + } + else if((signsOfBoxes[2] == 'X') && signsOfBoxes[2] == signsOfBoxes[4] && signsOfBoxes[4] == signsOfBoxes[6]){ + box3.style.backgroundColor = "#071E54"; + box5.style.backgroundColor = "#071E54"; + box7.style.backgroundColor = "#071E54"; + Xwon(); + } + else if((signsOfBoxes[0] == 'O') && signsOfBoxes[0] == signsOfBoxes[3] && signsOfBoxes[3] == signsOfBoxes[6]){ + box1.style.backgroundColor = "#071E54"; + box4.style.backgroundColor = "#071E54"; + box7.style.backgroundColor = "#071E54"; + Owon(); + } + else if((signsOfBoxes[0] == 'O') && signsOfBoxes[0] == signsOfBoxes[1] && signsOfBoxes[1] == signsOfBoxes[2]){ + box1.style.backgroundColor = "#071E54"; + box2.style.backgroundColor = "#071E54"; + box3.style.backgroundColor = "#071E54"; + Owon(); + } + else if((signsOfBoxes[3] == 'O') && signsOfBoxes[3] == signsOfBoxes[4] && signsOfBoxes[4] == signsOfBoxes[5]){ + box4.style.backgroundColor = "#071E54"; + box5.style.backgroundColor = "#071E54"; + box6.style.backgroundColor = "#071E54"; + Owon(); + } + else if((signsOfBoxes[1] == 'O') && signsOfBoxes[1] == signsOfBoxes[4] && signsOfBoxes[4] == signsOfBoxes[7]){ + box2.style.backgroundColor = "#071E54"; + box5.style.backgroundColor = "#071E54"; + box8.style.backgroundColor = "#071E54"; + Owon(); + } + else if((signsOfBoxes[6] == 'O') && signsOfBoxes[6] == signsOfBoxes[7] && signsOfBoxes[7] == signsOfBoxes[8]){ + box7.style.backgroundColor = "#071E54"; + box8.style.backgroundColor = "#071E54"; + box9.style.backgroundColor = "#071E54"; + Owon(); + } + else if((signsOfBoxes[2] == 'O') && signsOfBoxes[2] == signsOfBoxes[5] && signsOfBoxes[5] == signsOfBoxes[8]){ + box3.style.backgroundColor = "#071E54"; + box6.style.backgroundColor = "#071E54"; + box9.style.backgroundColor = "#071E54"; + Owon(); + } + else if((signsOfBoxes[0] == 'O') && signsOfBoxes[0] == signsOfBoxes[4] && signsOfBoxes[4] == signsOfBoxes[8]){ + box1.style.backgroundColor = "#071E54"; + box5.style.backgroundColor = "#071E54"; + box9.style.backgroundColor = "#071E54"; + Owon(); + } + else if((signsOfBoxes[2] == 'O') && signsOfBoxes[2] == signsOfBoxes[4] && signsOfBoxes[4] == signsOfBoxes[6]){ + box3.style.backgroundColor = "#071E54"; + box5.style.backgroundColor = "#071E54"; + box7.style.backgroundColor = "#071E54"; + Owon(); + } + let countnumberOfmoves = 0; + for(var i=0; i<9; i++){ + if(signsOfBoxes[i] == 'O' || signsOfBoxes[i] == 'X') countnumberOfmoves++; + } + if(countnumberOfmoves == 9 && !wasResult) { + result.style.visibility = "visible"; + result.innerHTML = "Draw"; + turn.style.visibility = "hidden"; + } +} + +reset[0].onclick = function() {resetall()}; +function resetall(){ + home[0].style.visibility = "hidden"; + for(var i=0; i<9; i++) checkFilling[i]=0; + box1.innerHTML=""; + box2.innerHTML=""; + box3.innerHTML=""; + box4.innerHTML=""; + box5.innerHTML=""; + box6.innerHTML=""; + box7.innerHTML=""; + box8.innerHTML=""; + box9.innerHTML=""; + box1.style.backgroundColor="rgb(77, 109, 199)"; + box2.style.backgroundColor="rgb(77, 109, 199)"; + box3.style.backgroundColor="rgb(77, 109, 199)"; + box4.style.backgroundColor="rgb(77, 109, 199)"; + box5.style.backgroundColor="rgb(77, 109, 199)"; + box6.style.backgroundColor="rgb(77, 109, 199)"; + box7.style.backgroundColor="rgb(77, 109, 199)"; + box8.style.backgroundColor="rgb(77, 109, 199)"; + box9.style.backgroundColor="rgb(77, 109, 199)"; + + result.style.visibility = "hidden"; + + for(var i=0; i<9; i++) signsOfBoxes[i] = "P"; + + (initialSign == 'O') ? initialSign = 'X' : initialSign = 'O'; + wasResult = false; + turn.style.visibility = 'visible'; + for(var i=0; i<3; i++) for(var j=0; j<3; j++) board[i][j] = '_'; + if(player == 'friend') + two_playersgame(); + else { + (initialSign == 'X') ? (initialSign = 'O') : (initialSign = 'X'); + turn.style.visibility = "visible"; + one_playergame(); + } +} + +function goTohome(){ + window.location.reload(); +} +home[0].onclick = function(){goTohome()}; + + +/************************************************** ONE PLAYER MODE ****************************************************** */ +var board = [ [ '_', '_', '_' ], + [ '_', '_', '_' ], + [ '_', '_', '_' ] ]; +function roboPlays(){ + class Move + { + constructor() + { + let row,col; + } + } + + let player = initialSign, opponent = (player == 'X') ? 'O' : 'X'; + + function isMovesLeft(board) + { + for(let i = 0; i < 3; i++) + for(let j = 0; j < 3; j++) + if (board[i][j] == '_') + return true; + + return false; + } + function evaluate(b) + { + for(let row = 0; row < 3; row++) + { + if (b[row][0] == b[row][1] && + b[row][1] == b[row][2]) + { + if (b[row][0] == player) + return +10; + + else if (b[row][0] == opponent) + return -10; + } + } + for(let col = 0; col < 3; col++) + { + if (b[0][col] == b[1][col] && + b[1][col] == b[2][col]) + { + if (b[0][col] == player) + return +10; + + else if (b[0][col] == opponent) + return -10; + } + } + if (b[0][0] == b[1][1] && b[1][1] == b[2][2]) + { + if (b[0][0] == player) + return +10; + + else if (b[0][0] == opponent) + return -10; + } + + if (b[0][2] == b[1][1] && + b[1][1] == b[2][0]) + { + if (b[0][2] == player) + return +10; + + else if (b[0][2] == opponent) + return -10; + } + return 0; + } + function minimax(board, depth, isMax) + { + let score = evaluate(board); + + if (score == 10) + return score; + + if (score == -10) + return score; + + if (isMovesLeft(board) == false) + return 0; + + if (isMax) + { + let best = -1000; + for(let i = 0; i < 3; i++) + { + for(let j = 0; j < 3; j++) + { + if (board[i][j]=='_') + { + board[i][j] = player; + best = Math.max(best, minimax(board, + depth + 1, !isMax)); + board[i][j] = '_'; + } + } + } + return best; + } + else + { + let best = 1000; + for(let i = 0; i < 3; i++) + { + for(let j = 0; j < 3; j++) + { + if (board[i][j] == '_') + { + board[i][j] = opponent; + best = Math.min(best, minimax(board,depth + 1, !isMax)); + board[i][j] = '_'; + } + } + } + return best; + } + } + function findBestMove(board) + { + let bestVal = -1000; + let bestMove = new Move(); + bestMove.row = -1; + bestMove.col = -1; + + for(let i = 0; i < 3; i++) + { + for(let j = 0; j < 3; j++) + { + if (board[i][j] == '_') + { + board[i][j] = player; + let moveVal = minimax(board, 0, false); + board[i][j] = '_'; + if (moveVal > bestVal) + { + bestMove.row = i; + bestMove.col = j; + bestVal = moveVal; + } + } + } + } + return bestMove; + } + + let bestMove = findBestMove(board); + if(board[1][1] == '_') { + board[1][1] = 'X'; + document.getElementById('middle').innerHTML = 'X'; + checkFilling[4] = 1; + return; + } + else{ + try { + board[bestMove.row][bestMove.col] = 'X'; + } catch (error) { + home[0].style.visibility = "visible"; + result.style.visibility = "visible"; + result.innerHTML = "Draw"; + } + } + + if(bestMove.row == 0 && bestMove.col==0) { + checkFilling[0] = 1; + box1.innerHTML = 'X'; + return; + } + else if(bestMove.row == 0 && bestMove.col==1) { + checkFilling[1] = 1; + box2.innerHTML = 'X'; + return; + } + else if(bestMove.row == 0 && bestMove.col==2) { + checkFilling[2] = 1; + box3.innerHTML = 'X'; + return; + } + else if(bestMove.row == 1 && bestMove.col==0) { + checkFilling[3] = 1; + box4.innerHTML = 'X'; + return; + } + else if(bestMove.row == 1 && bestMove.col==1) { + checkFilling[4] = 1; + box5.innerHTML = 'X'; + return; + } + else if(bestMove.row == 1 && bestMove.col==2) { + checkFilling[5] = 1; + box6.innerHTML = 'X'; + } + else if(bestMove.row == 2 && bestMove.col==0) { + checkFilling[6] = 1; + box7.innerHTML = 'X'; + return; + } + else if(bestMove.row == 2 && bestMove.col==1) { + checkFilling[7] = 1; + box8.innerHTML = 'X'; + return; + } + else if(bestMove.row == 2 && bestMove.col==2) { + checkFilling[8] = 1; + box9.innerHTML = 'X'; + return; + } + checkifWon(); +} +var resHide = false; +function checkifWon(){ + resHide = false; + if((board[0][0]==board[0][1] && board[0][0] == board[0][2]) && board[0][0] == 'X' ) { + scoreX++; + box1.style.backgroundColor = "#071E54"; + box2.style.backgroundColor = "#071E54"; + box3.style.backgroundColor = "#071E54"; + x_score.innerHTML = "Computer's score: " + scoreX; + home[0].style.visibility = "visible"; + result.style.visibility = "visible"; + result.innerHTML = "Computer Won"; + for(var i=0; i<9; i++) checkFilling[i]=1; + resHide = true; + } + if((board[1][0]==board[1][1] && board[1][0] == board[1][2]) && board[1][0] == 'X' ) { + scoreX++; + box4.style.backgroundColor = "#071E54"; + box5.style.backgroundColor = "#071E54"; + box6.style.backgroundColor = "#071E54"; + x_score.innerHTML = "Computer's score: " + scoreX; + home[0].style.visibility = "visible"; + result.style.visibility = "visible"; + result.innerHTML = "Computer Won"; + for(var i=0; i<9; i++) checkFilling[i]=1; + resHide = true; + } + if((board[2][0]==board[2][1] && board[2][0] == board[2][2]) && board[2][0] == 'X' ) { + scoreX++; + box7.style.backgroundColor = "#071E54"; + box8.style.backgroundColor = "#071E54"; + box9.style.backgroundColor = "#071E54"; + x_score.innerHTML = "Computer's score: " + scoreX; + home[0].style.visibility = "visible"; + result.style.visibility = "visible"; + result.innerHTML = "Computer Won"; + for(var i=0; i<9; i++) checkFilling[i]=1; + resHide = true; + } + if((board[0][0]==board[1][0] && board[0][0] == board[2][0]) && board[2][0] == 'X' ) { + scoreX++; + box1.style.backgroundColor = "#071E54"; + box4.style.backgroundColor = "#071E54"; + box7.style.backgroundColor = "#071E54"; + x_score.innerHTML = "Computer's score: " + scoreX; + home[0].style.visibility = "visible"; + result.style.visibility = "visible"; + result.innerHTML = "Computer Won"; + for(var i=0; i<9; i++) checkFilling[i]=1; + resHide = true; + } + if((board[0][1]==board[1][1] && board[0][1] == board[2][1]) && board[0][1] == 'X' ) { + scoreX++; + box2.style.backgroundColor = "#071E54"; + box5.style.backgroundColor = "#071E54"; + box8.style.backgroundColor = "#071E54"; + x_score.innerHTML = "Computer's score: " + scoreX; + home[0].style.visibility = "visible"; + result.style.visibility = "visible"; + result.innerHTML = "Computer Won"; + for(var i=0; i<9; i++) checkFilling[i]=1; + resHide = true; + } + if((board[0][2]==board[1][2] && board[0][2] == board[2][2]) && board[0][2] == 'X' ) { + scoreX++; + box3.style.backgroundColor = "#071E54"; + box6.style.backgroundColor = "#071E54"; + box9.style.backgroundColor = "#071E54"; + x_score.innerHTML = "Computer's score: " + scoreX; + home[0].style.visibility = "visible"; + result.style.visibility = "visible"; + result.innerHTML = "Computer Won"; + for(var i=0; i<9; i++) checkFilling[i]=1; + resHide = true; + } + if((board[0][0]==board[1][1] && board[0][0] == board[2][2]) && board[0][0] == 'X' ) { + scoreX++; + box1.style.backgroundColor = "#071E54"; + box5.style.backgroundColor = "#071E54"; + box9.style.backgroundColor = "#071E54"; + x_score.innerHTML = "Computer's score: " + scoreX; + home[0].style.visibility = "visible"; + result.style.visibility = "visible"; + result.innerHTML = "Computer Won"; + for(var i=0; i<9; i++) checkFilling[i]=1; + resHide = true; + } + if((board[0][2]==board[1][1] && board[0][2] == board[2][0]) && board[0][2] == 'X' ) { + scoreX++; + box3.style.backgroundColor = "#071E54"; + box5.style.backgroundColor = "#071E54"; + box7.style.backgroundColor = "#071E54"; + result.style.visibility = "visible"; + result.innerHTML = "Computer Won"; + home[0].style.visibility = "visible"; + x_score.innerHTML = "Computer's score: " + scoreX; + for(var i=0; i<9; i++) checkFilling[i]=1; + resHide = true; + } + + if(resHide == true) turn.style.visibility = "hidden"; + var count_numberofO = 0; + var count_numberofX = 0; + for(var i=0; i<3; i++){ + for(var j=0; j<3; j++){ + if(board[i][j] == 'X') count_numberofX++; + if(board[i][j] == 'O') count_numberofO++; + } + } + if(count_numberofO + count_numberofX == 9){ + result.style.visibility = "visible"; + result.innerHTML = "Draw"; + turn.style.visibility = "hidden"; + home[0].style.visibility = "visible"; + } +} +function one_playergame(){ + if(initialSign == 'O') + { + roboPlays(); + player(); + } + else{ + turn.innerHTML = "O's turn"; + player(); + } + + function player(){ + + $('#topleft').click(function(){ + if(checkFilling[0]==0){ + document.getElementById('topleft').innerHTML = 'O'; + board[0][0] = 'O'; + checkFilling[0]=1; + roboPlays(); + checkifWon(); + } + }); + $('#top').click(function(){ + if(checkFilling[1]==0){ + document.getElementById('top').innerHTML = 'O'; + board[0][1] = 'O'; + checkFilling[1]=1; + roboPlays(); + checkifWon(); + } + }); + $('#topright').click(function(){ + if(checkFilling[2]==0){ + document.getElementById('topright').innerHTML = 'O'; + board[0][2] = 'O'; + checkFilling[2]=1; + roboPlays(); + checkifWon(); + } + }); + $('#left').click(function(){ + if(checkFilling[3]==0){ + document.getElementById('left').innerHTML = 'O'; + board[1][0] = 'O'; + checkFilling[3]=1; + roboPlays(); + checkifWon(); + } + }); + $('#middle').click(function(){ + if(checkFilling[4]==0){ + document.getElementById('middle').innerHTML = 'O'; + board[1][1] = 'O'; + checkFilling[4]=1; + roboPlays(); + checkifWon(); + } + }); + $('#right').click(function(){ + if(checkFilling[5]==0){ + document.getElementById('right').innerHTML = 'O'; + board[1][2] = 'O'; + checkFilling[5]=1; + roboPlays(); + checkifWon(); + } + }); + $('#bottomleft').click(function(){ + if(checkFilling[6]==0){ + document.getElementById('bottomleft').innerHTML = 'O'; + board[2][0] = 'O'; + checkFilling[6]=1; + roboPlays(); + checkifWon(); + } + }); + $('#bottom').click(function(){ + if(checkFilling[7]==0){ + document.getElementById('bottom').innerHTML = 'O'; + board[2][1] = 'O'; + checkFilling[7]=1; + roboPlays(); + checkifWon(); + } + }); + $('#bottomright').click(function(){ + if(checkFilling[8]==0){ + document.getElementById('bottomright').innerHTML = 'O'; + board[2][2] = 'O'; + checkFilling[8]=1; + roboPlays(); + checkifWon(); + } + }); + } +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..c1abde5 --- /dev/null +++ b/style.css @@ -0,0 +1,204 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; +} +body{ + background-image: url("img1.jpeg"); + opacity: 0.96; + background-size:cover; + overflow: hidden; + background-repeat: no-repeat; + height: 110vh; + width: 110vw; +} +.bg-image{ + background-image: url("img1.jpeg"); + filter:blur(6px); + -webkit-filter: blur(6px); + height:100vw; + overflow-y: visible; + background-size:cover; + overflow: hidden; + background-repeat: no-repeat; + height: 110vh; + width: 110vw; +} +#select-box{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + transition: all 0.3s ease; + background: #fff; + padding: 20px 25px 25px; + border-radius: 10px; + max-width: 400px; + width: 100% !important; + height: 500px !important; +} +#select-box.hide{ + opacity: 0; + pointer-events: none; +} +#select-box header{ + font-size: 30px; + font-weight: 600; + padding-bottom: 10px; + padding-left: 30%; + border-bottom: 1px solid lightgrey; +} +#select-box .title{ + font-size: 22px; + font-weight: 500; + margin: 20px 0; +} +#select-box .options{ + display: flex; + width: 100%; +} +.options button{ + width: 95%; + font-size: 20px; + font-weight: 500; + padding: 10px 0; + border: none; + background: #00BBF0; + border-radius: 5px; + color: #fff; + outline: none; + cursor: pointer; + transition: all 0.3s ease; +} +.options button:hover, +.btn button:hover{ + transform: scale(0.96); +} +.options button{ + margin-right: 5px; +} +.options button.friend, .options button.X{ + margin-left: 5px; +} +#select-box .credit{ + text-align: center; + margin-top: 20px; + font-size: 18px; + font-weight: 500; +} +#select-box .credit a{ + color: #00BBF0; + text-decoration: none; +} +.enternames input{ + all:none; + margin-left: 10%; + width:80%; + height:30px; + margin-bottom: 10px; + border: 2px solid black; +} +.start{ + margin-top: 30px; + margin-left: 3px; +} +.reset{ + width:65px; + height:35px; + border: none; + color: blue; + font-size: 20px; + float: right; + visibility: hidden; + margin-top: 255px; + cursor:pointer; +} +.home{ + width:65px; + height:35px; + height:0; + border: none; + color: blue; + font-size: 20px; + float: left; + visibility: hidden; + margin-top: 255px; + cursor:pointer; + background: #00BBF0 !important; +} + +#turn{ + float: left; + font-weight: bold; + /* height:23px !important; + width:70px; */ + background-color: rgb(219, 217, 82); + /* padding: 5px; */ + /* visibility: ; */ + padding: 5px; + visibility: hidden; + margin-left: 4.5vw; + margin-top: 3px; + padding-bottom: 0; +} +.box { + border: none; + display: flex; + justify-content: center; + align-items: center; + background-color: rgb(77, 109, 199); + height: 12rem; + width: 12rem; + cursor: pointer; + opacity:100%; +} +.board { + border: none; + display: grid; + margin-top: 0rem; + margin-left: 8.7rem; + grid-gap: 0.6rem; + background-color: black; + grid-template-columns: repeat(3, 12rem); + grid-template-rows: repeat(3, 12rem); + visibility: hidden; + height:0px; + font-size: 50px; + color: aqua; + font-weight: 900; +} +#x_score { + float: left; + font-weight: bold; + height:23px !important; + background-color: rgb(219, 217, 82); + padding: 5px; + visibility: hidden; +} + +#o_score { + float: right; + font-weight: bold; + height:23px !important;background-color: rgb(219, 217, 82); + padding: 5px; + visibility: hidden; +} +#result { + text-align: center; + padding: 0%; + margin-bottom:-10px; + padding-top: 10px; + font-size: 1.2rem; + font-weight: bold; + clear: both; + visibility: hidden; + height:50px !important; + width:150px !important; + padding-top: 0; + margin-left: 7vw; +} +header{ + padding-left: 3.5vw; +} \ No newline at end of file