-<!-- TODO: click : on image (show computer move on same image) + show network-matrix on the right (top-bottom, 5 per row) -->
+<!doctype html>
+<html lang="en">
-<div id="rpsls">
- <input id="drawIsLost" type="checkbox" v-model="drawIsLost">
- <label for="drawIsLost"> Draw count as loss ?</label>
- <input id="nInput" type="number" v-model="nInput" @change="reinitialize()">
- <label for="nInput">Number of inputs</label>
- <input id="humanMove" type="number" v-model="humanMove" @change="play()">
- <label for="humanMove">Move ?</label>
- <input id="gameState" type="number" v-model="gameState" disabled>
- <label for="gameState">Score of computer</label>
-</div>
+ <head>
+ <meta charset="utf-8">
+ <title>Rock Paper Scissors Lizard Spock</title>
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
+ <link rel="stylesheet" href="css/rpsls.css">
+ </head>
+ <body>
+ <div class="container" id="rpsls">
+ <div class="row">
+ <div class="col s12">
+ <form class="center">
+ <div class="input-field inline">
+ <input id="nInput" type="number" v-model="nInput" @change="reinitialize()">
+ <label for="nInput">Number of inputs</label>
+ </div>
+ <span class="leftSpacing">
+ <input id="drawIsLost" type="checkbox" v-model="drawIsLost">
+ <label for="drawIsLost"> Draw count as loss ?</label>
+ </span>
+ </form>
+ </div>
+ </div>
+ <div class="row topSpacing">
+ <img v-for="(symb,i) in symbols" class="image" :class="{compChoice:compMove==i,humanChoice:humanMove==i}" :src="imgSource(symb)" @click="play(i)">
+ <p class="blue-text center message topSpacing" v-if="humanMove>=0 && compMove>=0">{{ symbols[humanMove] + " " + messages[humanMove][compMove] + " " + symbols[compMove] }}</p>
+ <p class="center scoreMsg topSpacing">
+ <span>Score: </span>
+ <span class="score">{{ gameState }}</span>
+ </p>
+ </div>
+ </div>
+ <footer class="center grey-text">
+ <p>Images were found on the web; if they should be removed, let me know: yagu0 on github</p>
+ </footer>
+ </body>
+
+<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
-<script src="./rpsls.js"></script>
+<script src="js/rpsls.js"></script>
-const nChoice = 3; //fixed for this game
+const nChoice = 5; //fixed for this game
-// Rewards matrix. Order: rock, lizard, Spock, scissors, paper
+const symbols = [ "Rock", "Lizard", "Spock", "Scissors", "Paper" ];
+
+// Same order as in symbols
+const messages = [
+ [ "=", "crushes", "is vaporized by", "cruches", "is covered by" ],
+ [ "is crushed by", "=", "poisons", "is decapitated by", "eats" ],
+ [ "vaporizes", "is poisoned by", "=", "smashes", "is disproved by" ],
+ [ "is crushed by", "decapitates", "is smashed by", "=", "cuts" ],
+ [ "covers", "is eaten by", "disproves", "is cut by", "=" ],
+];
+
+// Rewards matrix, order as in symbols
const rewards = Array.from(Array(nChoice)).map( (e,i) => { //lines
return Array.from(Array(nChoice)).map( (f,j) => { //columns
// i against j: gain from i viewpoint
- if (j == (i+1) % nChoice)// || j == (i+3) % nChoice)
+ if (j == (i+1) % nChoice || j == (i+3) % nChoice)
return 1; //I win :)
else if (i != j)
return -1; //I lose :(
- else //i == j
- return 0;
+ return 0; //i==j
});
});
-const symbols = [ "Rock", "Lizard", "Spock", "Scissors", "Paper" ];
-
new Vue({
el: "#rpsls",
data: {
- humanMove: -1, //integer in 0...nChoice-1
nInput: 5, //default
humanHistory: [ ], //your nInput last moves, stored (oldest first)
- gameState: 0, //total points of the computer
+ humanMove: -1,
+ gameState: 0, //total points of the human
+ compMove: -1, //last move played by computer
drawIsLost: false, //normal (or true: draw is considered loss)
rewards: [ ], //initialized at first human move with new nInput
weights: [ ], //same as above
+ symbols: symbols,
+ messages: messages,
},
created: function() {
this.reinitialize();
if (this.humanHistory.length > this.nInput)
this.humanHistory.splice(this.nInput);
},
- // Play a move given current data (*after* human move: trigger onChange)
- play: function() {
+ // Play a move given current data (*after* human move)
+ play: function(humanMove) {
+ this.humanMove = humanMove;
let candidates = [ ];
Array.from(Array(nChoice)).forEach( (e,i) => {
// Sum all weights from an activated input to this output
return 0;
return input[ this.humanHistory[j] ];
}, 0 );
- let currentValue = {
+ let move = {
val: sumWeights,
- index: i
+ index: i,
};
if (candidates.length == 0 || sumWeights > candidates[0].val)
- candidates = [ currentValue ];
+ candidates = [move];
else if (sumWeights == candidates[0].val)
- candidates.push(currentValue);
+ candidates.push(move);
});
// Pick a choice at random in maxValue (total random for first move)
- let randIdx = Math.floor((Math.random() * candidates.length) + 1);
- this.updateGameState(candidates[randIdx].index);
- },
- updateGameState: function(index) {
- let reward = rewards[index][this.humanMove]; //viewpoint of computer
- this.gameState += reward;
- this.updateWeights(reward, index);
+ let randIdx = Math.floor(Math.random() * candidates.length);
+ this.compMove = candidates[randIdx].index;
+ // Update game state
+ let reward = rewards[this.compMove][humanMove]; //viewpoint of computer
+ this.gameState -= reward;
+ this.updateWeights(reward);
+ // Update human moves history
+ this.humanHistory.push(humanMove);
+ if (this.humanHistory.length > this.nInput)
+ this.humanHistory.shift();
},
- updateWeights: function(reward, index) {
+ updateWeights: function(reward) {
let delta = Math.sign(reward);
if (this.drawIsLost && reward == 0)
delta = -1;
- this.weights[index].forEach( (input,i) => {
+ this.weights[this.compMove].forEach( (input,i) => {
if (i < this.humanHistory.length)
input[ this.humanHistory[i] ] += delta;
});
- this.postUpdate();
- },
- // Finalize weights update
- postUpdate: function() {
// Re-center the weights
let sumAllWeights = this.weights.reduce( (a,output) => {
return a + output.reduce( (b,input) => {
input[i] -= meanWeight;
});
});
- // Update human moves history
- this.humanHistory.push(this.humanMove);
- if (this.humanHistory.length > this.nInput)
- this.humanHistory.shift();
+ },
+ imgSource: function(symbol) {
+ return "img/" + symbol + ".png";
},
},
});
projects / rpsls-bot.git / commitdiff
