# Guide: sten-sax-påse i Kivy

### Del 1 - design

Det första vi behöver göra är att skapa en design för appen. I sten-sax-påse spelet behöver vi följande widgets:

* 3 knappar: sten, sax, påse
* 1 label för datorns val
* 1 label för resultatet

Vi kan göra layouten på olika sätt, men ett alternativ är att ha en vertikal BoxLayout med båda Labels följt av en horisontell layout för knapparna.

### Del 2 - funktion

Spelet kommer gå till så att varje knapp gör följande:

1. Sätter spelarens val utifrån vilken knapp som trycktes
2. Slumpar fram ett val för datorn
3. Skriver ut det valet i labeln för datorns val
4. Avgör vinnaren och skriver ut det i labeln för resultatet

### Del 3 - kod

#### 3a - skapa widgets
Vi börjar med att skapa template-koden för en tom app.

from kivy.app import App

class AppName(App):
    def build(self):
        # Här skapar ni era widgets
        

I build-funktionen vill vi sedan skapa alla våra widgets. Till exempel kan vi skapa vår label för datorns val på följande sätt:

def build(self):
    outerLayout = BoxLayout(orientation="vertical")
    
    compChoiceLabel = Label(text="")
    outerLayout.add_widget(compChoiceLabel)
    
    ...
    
    
    return outerLayout

För knapparna gör vi en BoxLayout *inuti* den andra Layouten

def build(self):
    ...
    
    buttonLayout = BoxLayout(orientation="vertical")
    
    rockButton = Button(text="rock")
    buttonLayout.add_widget(rockButton)
    
    ...
    
    outerLayout.add_widget(buttonLayout)
    
    return outerLayout

Se till att även skapa en label för resultatet och de andra två knapparna (påse och sax).

#### 3b - funktioner till knappar

Nu vill vi se till att knapparna faktiskt gör något när vi trycker på dem. Då är det två saker som vi behöver göra:

1. skapa en funktion som ska anropas när knappen trycks
2. koppla funktionen till knappen

För första steget kan vi skapa en funktion som heter `play`. Vi lägger till den i klassen, men utanför build-funktionen.

class AppName(App):
    def build(self):
        # Här skapar ni era widgets
        #...
    
    def play(self, btn):
        # Här skriver vi koden som körs när en knapp trycks

Vi lägger också till play-funktionen till våra knappar.

def build(self):
    ...
    rockButton = Button(text="rock")
    rockButton.bind(on_press=self.play)
    

Vi ser vad `play`-funktionen ska göra under vår planering (*Del 2 - funktion*). Första steget är att avgöra vad spelaren har valt. Här finns två sätt:

* Alt. 1: vi skapar olika `play`-funktioner för varje knapp: `playRock` `playScissors` och `playPaper` och kopplar rätt funktion till rätt knapp.
* ALt. 2: vi läser texten på knappen som trycktes, den kommer vara "rock" "paper" scissors.

Alternativ 2 löser vi med `btn`-variabeln som finns tillgänlig i `play`-funktionen.

def play(self, btn):
    playerChoice = btn.text

Andra steget var att avgöra datorns val. Det gör vi genom att slumpa fram en siffra mellan 1 och 3 som får representara sten, sax eller påse:

1 --> rock
2 --> scissors
3 --> paper

def play(self, btn):
    playerChoice = btn.text
    
    randomNum = random.randint(1,3)
    computerChoiceText = ""
    if randomNum == 1:
        computerChoiceText = "Rock"
    if randomNum == 2:
        computerChoiceText = "Scissors"
    if randomNum == 3:
        computerChoiceText = "Paper"
        
        
    

När vi vi vet datorns val (som nu är sparat i variabeln `computerChoiceText`) kan vi sätta texten på labeln för datorns val. Då behöver vi komma åt variabeln `compChoiceLabel` från build funktionen. Det gör vi genom att lägga till `self.` innan variabelnamnet. I `play`-funktionen:

self.compChoiceLabel.text = computerChoiceText

Sista steget är att avgöra vinnaren. Till det kommer vi behöva en rad if-satser:

if playerChoice == computerChoiceText:
    #Det blev lika
    self.resultLabel.text = "Tie!"

if playerChoice == "Rock" and computerChoiceText == "Scissors":
    self.resultLabel.text = "Player wins!"
    
if playerChoice == "Paper" and computerChoiceText == "Scissors":
    self.resultLabel.text = "Computer wins!"
    
...

Totalt borde det bli sju if-satser inklusive den som kollar om det blev lika.

#### 3c - förbättringar

Nu borde vi ha ett fungerande spel. För att bygga vidare kan vi göra lite olika förbättringar:

* Lägga till bilder till våra knappar och datorns resultat
* Räkna poäng när man kör flera omgångar
* Egna idéer?

### Del 4 - reflektion

Denna del gör ni individuellt.

I ett google-dokument på classroom svara på följande frågor:

* Vad är du mest nöjd med i din app?
* Vad finns det för förbättringar man skulle kunna göra på er app?
* Välj ut en bit av koden och beskriv vad den gör.