1st commit

Maus3rSR · Mar 21, 2021 · 15c8c65 · 15c8c65
commit 15c8c65
Show file tree

Hide file tree

Showing 7 changed files with 222 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,3 @@
+# Sujet de rattrapage : JanKenPon
+
+Vous allez aider à la correction et finalisation du jeu "Jan Ken Pon", qui est la dénomination japonaise de "Pierre-Feuille-Ciseaux".
diff --git a/images/paper.png b/images/paper.png
diff --git a/images/rock.png b/images/rock.png
diff --git a/images/scissor.png b/images/scissor.png
diff --git a/index.html b/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>Shifumi</title>
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Chango">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
+    <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+    <div class="container">
+        <h1 class="title">
+            <span class="animate__animated animate__bounceInDown">Jan</span><span class="animate__animated animate__bounceInUp">Ken</span><span class="animate__animated animate__bounceInDown">Pon</span>
+        </h1>
+
+        <div class="score_container animate__animated animate__delay-1s animate__fadeIn">
+            <span class="score score__left">0</span>
+            &nbsp;-&nbsp;
+            <span class="score score__right">0</span>
+        </div>
+
+        <div class="hand_container">
+            <div class="hand hand__left animate__animated animate__fadeIn animate__delay-1s">
+                <img src="" alt="Left hand">
+            </div>
+            <div class="hand hand__right animate__animated animate__fadeIn animate__delay-1s">
+                <img src="" alt="Right hand">
+            </div>
+        </div>
+
+        <div class="play_button_container">
+            <button id="play_button" class="btn btn-warning animate__animated animate__bounce">
+                Play !
+            </button>
+        </div>
+    </div>
+    <script src="scripts/main.js"></script>
+</body>
+</html>
diff --git a/scripts/main.js b/scripts/main.js
@@ -0,0 +1,114 @@
+window.onload = () => {
+    const player1 = new Player(
+            new ScoreUI('.score__left'),
+            new HandUI('.hand__left')
+        )
+        , player2 = new Player(
+            new ScoreUI('.score__right'),
+            new HandUI('.hand__right')
+        )
+        , game = new Game(player1, player2, '.hand_container')
+
+    document.querySelector('#play_button').addEventListener('click', event => {
+        event.target.hidden = true
+        game.onPlayed = () => event.target.hidden = false
+        game.play()
+    })
+}
+
+class Game {
+    constructor(player1, player2, hand_container_selector) {
+        this.player1 = player1
+        this.player2 = player2
+        this.is_animation_end = false // animationend event is fired twice because each element will trigger the event thats why we need a boolean
+
+        this.hand_container_element = document.querySelector(hand_container_selector)
+    }
+
+    play() {
+        this.reset()
+        this.hand_container_element.classList.toggle('shuffle')
+
+        this.hand_container_element.addEventListener('animationend', () => {
+            if (this.is_animation_end) return
+
+            const element1 = this.player1.getChoice()
+                , element2 = this.player2.getChoice()
+
+            this.is_animation_end = true
+            this.player1.handUI.updateUI(element1)
+            this.player2.handUI.updateUI(element2)
+
+            if (element1.isBeatenBy(element2)) this.player2.win()
+            else if (element2.isBeatenBy(element1)) this.player1.win()
+
+            this.hand_container_element.classList.toggle('shuffle')
+            this.onPlayed()
+        })
+    }
+
+    reset() {
+        this.is_animation_end = false
+        this.player1.handUI.reset()
+        this.player2.handUI.reset()
+    }
+
+    onPlayed = () => {}
+}
+
+class Player {
+    constructor(scoreUI, handUI) {
+        this.scoreUI = scoreUI
+        this.handUI = handUI
+    }
+
+    win() { this.scoreUI.addPoint() }
+    getChoice() { return JanKenPon.getRandom() }
+}
+
+class HandUI {
+    constructor(hand_selector) {
+        this.element = document.querySelector(hand_selector)
+        this.image_element = this.element.querySelector('img')
+        this.reset()
+    }
+
+    set image(image_name) { this.image_element.setAttribute('src', `images/${image_name}.png`) }
+
+    updateUI(element) { this.image = element.name }
+    reset() { this.updateUI(JanKenPon.default) }
+}
+
+class ScoreUI {
+    constructor(score_selector) {
+        this.element = document.querySelector(score_selector)
+        this.reset()
+    }
+
+    get score() { return this.scoreValue }
+    set score(value) {
+        this.scoreValue = parseInt(value, 10)
+        this.updateUI()
+    }
+
+    updateUI() { this.element.textContent = this.score }
+    addPoint() { this.score++ }
+    reset() { this.score = 0 }
+}
+
+class JanKenPon {
+    static ELEMENTS = {
+        ROCK: { name: "rock", isBeatenBy: element => element.name === this.ELEMENTS.PAPER.name },
+        PAPER: { name: "paper", isBeatenBy: element => element.name === this.ELEMENTS.SCISSOR.name },
+        SCISSOR: { name: "scissor", isBeatenBy: element => element.name === this.ELEMENTS.ROCK.name }
+    }
+
+    static default = this.ELEMENTS.ROCK
+
+    static getRandom() {
+        const ELEMENTS_ARRAY = Object.keys(this.ELEMENTS)
+            , RANDOM_NUM = Math.floor(Math.random() * ELEMENTS_ARRAY.length)
+
+        return this.ELEMENTS[ELEMENTS_ARRAY[RANDOM_NUM]]
+    }
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,61 @@
+body {
+    background-color: #001427;
+    color: #E1E2D3;
+    font-family: 'Chango', serif;
+    font-size: 1rem;
+    overflow: hidden;
+}
+
+.title {
+    text-align: center;
+    margin-top: 15px;
+}
+
+.title > span {
+    display: inline-block;
+}
+
+.score_container {
+    position: absolute;
+    top: 120px;
+    left: 0;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.2rem;
+}
+
+.hand_container {
+    height: 80vh;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.play_button_container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.hand:nth-child(2) {
+    transform: scaleX(-1);
+}
+
+.hand_container.shuffle .hand img {
+    animation: 500ms shuffle;
+    animation-iteration-count: 3;
+    animation-timing-function: step-end;
+}
+
+@keyframes shuffle {
+    50% { transform: rotate(-60deg) translate(40px, -130px); }
+    0%, 100% { transform: rotate(0deg) translate(0px, 0px); }
+}
+