From 0aae6ce4afa92d0a0ce4c586963da9a151d95bca Mon Sep 17 00:00:00 2001
From: Arnas Udovic <zordsdavini@gmail.com>
Date: Fri, 29 Dec 2023 18:22:54 +0200
Subject: [PATCH] working logics

---
 assets/cross.png  | Bin 0 -> 2850 bytes
 assets/nought.png | Bin 0 -> 2984 bytes
 game.go           | 176 +++++++++++++++++++++++++++++++++++++++++++---
 main.go           |  33 ++++++++-
 views/index.html  |  31 +++++---
 5 files changed, 221 insertions(+), 19 deletions(-)
 create mode 100644 assets/cross.png
 create mode 100644 assets/nought.png

diff --git a/assets/cross.png b/assets/cross.png
new file mode 100644
index 0000000000000000000000000000000000000000..2c30910de8df55cf987e0042847e9d485deadb35
GIT binary patch
literal 2850
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

literal 0
HcmV?d00001

diff --git a/assets/nought.png b/assets/nought.png
new file mode 100644
index 0000000000000000000000000000000000000000..cf3951e7a6c7999c4989c22ad965870c688ae4d6
GIT binary patch
literal 2984
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
Zib|bFFk9$qZd^Dv00eAlRBzxJ_kV7ZmWluX

literal 0
HcmV?d00001

diff --git a/game.go b/game.go
index 4b54bbd..259ed3c 100644
--- a/game.go
+++ b/game.go
@@ -1,23 +1,183 @@
 package main
 
-const (
-	GameStateInProgress int = 0
-	GameStateEnded          = 1
-	GameStateDraw           = 2
-	GameStateAIWon          = 3
-	GameStateAILost         = 4
+import (
+	"strconv"
 )
 
+const (
+	GameStateInProgress  int = 0
+	GameStateWaitingUser     = 1
+	GameStateEnded           = 2
+	GameStateDraw            = 3
+	GameStateAIWon           = 4
+	GameStateAILost          = 5
+)
+
+const (
+	ImageCross  string = "cross"
+	ImageNought        = "nought"
+)
+
+const (
+	WinnerNone int = 0
+	WinnerAI       = 1
+	WinnerUser     = 2
+)
+
+var field2point = map[int][2]int{
+	1: {0, 0},
+	2: {0, 1},
+	3: {0, 2},
+	4: {1, 0},
+	5: {1, 1},
+	6: {1, 2},
+	7: {2, 0},
+	8: {2, 1},
+	9: {2, 2},
+}
+
+var FieldClass = map[int]string{
+	1: "tt-item br bb",
+	2: "tt-item bb",
+	3: "tt-item bl bb",
+	4: "tt-item br",
+	5: "tt-item",
+	6: "tt-item bl",
+	7: "tt-item bt br",
+	8: "tt-item bt",
+	9: "tt-item bl bt",
+}
+
+var winner = [][3]int{
+	{1, 2, 3},
+	{4, 5, 6},
+	{7, 8, 9},
+	{1, 4, 7},
+	{2, 5, 8},
+	{3, 6, 9},
+	{1, 5, 9},
+	{7, 5, 3},
+}
+
+type Field struct {
+	disabled bool
+	image    string
+	line     bool
+}
+
 type Game struct {
-	gameFlow string
-	aiSecond bool
+	gameFlow     string
+	aiSecond     bool
+	aiFields     []int
+	userFields   []int
+	fields       map[int]Field
+	state        int
+	winnerFields [3]int
+	winner       int
 }
 
 func newGame(gameFlow string, aiSecond bool) *Game {
+	fields := make(map[int]Field)
+	for i := 1; i < 10; i++ {
+		field := &Field{
+			disabled: false,
+		}
+		fields[i] = *field
+	}
+
 	game := &Game{
 		gameFlow: gameFlow,
 		aiSecond: aiSecond,
+		fields:   fields,
+		winner:   WinnerNone,
+	}
+
+	for i, f := range str2array(game.gameFlow) {
+		fieldNum, _ := strconv.ParseInt(f, 0, 16)
+
+		if field, ok := game.fields[int(fieldNum)]; ok {
+			field.disabled = true
+
+			if i%2 == 0 {
+				field.image = ImageCross
+			} else {
+				field.image = ImageNought
+			}
+
+			game.fields[int(fieldNum)] = field
+		}
+
+		if (i%2 == 0) == game.aiSecond {
+			game.userFields = append(game.userFields, int(fieldNum))
+		} else {
+			game.aiFields = append(game.aiFields, int(fieldNum))
+		}
+	}
+
+	game.calculateState()
+
+	if game.isFinished() && game.winner != WinnerNone {
+		for _, f := range game.winnerFields {
+			if field, ok := game.fields[f]; ok {
+				field.line = true
+				game.fields[f] = field
+			}
+		}
+
+		for i := 1; i < 10; i++ {
+			if field, ok := game.fields[i]; ok {
+				field.disabled = true
+				game.fields[i] = field
+			}
+		}
 	}
 
 	return game
 }
+
+func (game *Game) isFinished() bool {
+	return game.state > GameStateWaitingUser
+}
+
+func (game *Game) calculateState() {
+	game.state = GameStateInProgress
+
+	if "0" == game.gameFlow {
+		game.state = GameStateWaitingUser
+		return
+	}
+
+	for _, w := range winner {
+		if isSubArray(w[:], game.aiFields) {
+			game.state = GameStateAIWon
+			game.winnerFields = w
+			game.winner = WinnerAI
+			return
+		}
+		if isSubArray(w[:], game.userFields) {
+			game.state = GameStateAILost
+			game.winnerFields = w
+			game.winner = WinnerUser
+			return
+		}
+	}
+
+	if len(game.gameFlow) == 9 {
+		game.state = GameStateDraw
+	}
+}
+
+func isSubArray(a, b []int) bool {
+	mb := make(map[int]struct{}, len(b))
+	for _, x := range b {
+		mb[x] = struct{}{}
+	}
+	var diff []int
+	for _, x := range a {
+		if _, found := mb[x]; !found {
+			diff = append(diff, x)
+		}
+	}
+
+	return len(diff) == 0
+}
diff --git a/main.go b/main.go
index b42c797..de992aa 100644
--- a/main.go
+++ b/main.go
@@ -22,6 +22,8 @@ func main() {
 	r.StaticFile("/favicon.ico", "./assets/favicon.ico")
 	r.StaticFile("/sgs.png", "./assets/sgs.png")
 	r.StaticFile("/en.png", "./assets/en.png")
+	r.StaticFile("/cross.png", "./assets/cross.png")
+	r.StaticFile("/nought.png", "./assets/nought.png")
 
 	r.GET("/", func(c *gin.Context) {
 		lang := getLang(c)
@@ -63,13 +65,40 @@ func main() {
 
 		game := newGame(gameFlow, aiSecond)
 
-		gameFlow = gameFlow + getNewClick(gameFlow)
+		fmt.Println(gameState)
+		if gameState == GameStateInProgress && !game.isFinished() {
+			gameFlow = gameFlow + getNewClick(gameFlow)
+			game = newGame(gameFlow, aiSecond)
+		}
+
+		// if game ended - save results
 
 		c.HTML(http.StatusOK, "index", gin.H{
 			"title":    "Index title!",
 			"lang":     lang,
 			"gameFlow": gameFlow,
 			"game":     game,
+			"fields":   [9]int{1, 2, 3, 4, 5, 6, 7, 8, 9},
+			"fieldClass": func(game *Game, fieldNum int) string {
+				fieldClass := FieldClass[fieldNum]
+				if field, ok := game.fields[fieldNum]; ok {
+					if len(field.image) > 0 {
+						fieldClass = fieldClass + " " + field.image
+					}
+					if field.line {
+						fieldClass = fieldClass + " line"
+					}
+				}
+
+				return fieldClass
+			},
+			"disabled": func(game *Game, fieldNum int) bool {
+				if field, ok := game.fields[fieldNum]; ok {
+					return field.disabled
+				}
+
+				return false
+			},
 		})
 	})
 
@@ -108,7 +137,7 @@ func getLang(c *gin.Context) string {
 func getGameFlow(c *gin.Context) (string, int) {
 	gameFlow := c.Param("game")
 	if "0" == gameFlow {
-		return gameFlow, GameStateInProgress
+		return gameFlow, GameStateWaitingUser
 	}
 
 	if "0" == string(gameFlow[0]) {
diff --git a/views/index.html b/views/index.html
index 7697e26..ad1ef62 100644
--- a/views/index.html
+++ b/views/index.html
@@ -21,6 +21,19 @@
         .bt { border-top: 5px solid #333; }
         .bl { border-left: 5px solid #333; }
         .br { border-right: 5px solid #333; }
+
+        .cross { background-image: url('/cross.png'); }
+        .nought { background-image: url('/nought.png'); }
+
+        .line.cross {
+            background-color: #f88;
+            border: 2px solid #f33;
+        }
+        
+        .line.nought {
+            background-color: #aaf;
+            border: 2px solid #33f;
+        }
         
     </style>
 {{end}}
@@ -28,15 +41,15 @@
 
 {{define "content"}}
 <div class="main-content">
-    <a class="tt-item br bb" href="{{ .gameFlow -}}1">&nbsp;</a>
-    <a class="tt-item bb" href="{{ .gameFlow -}}2">&nbsp;</a>
-    <a class="tt-item bl bb" href="{{ .gameFlow -}}3">&nbsp;</a>
-    <a class="tt-item br" href="{{ .gameFlow -}}4">&nbsp;</a>
-    <a class="tt-item" href="{{ .gameFlow -}}5">&nbsp;</a>
-    <a class="tt-item bl" href="{{ .gameFlow -}}6">&nbsp;</a>
-    <a class="tt-item bt br" href="{{ .gameFlow -}}7">&nbsp;</a>
-    <a class="tt-item bt" href="{{ .gameFlow -}}8">&nbsp;</a>
-    <a class="tt-item bl bt" href="{{ .gameFlow -}}9">&nbsp;</a>
+    {{ $Game := .game }}
+    {{ $GameFlow := .gameFlow }}
+    {{ range .fields }}
+        {{ if call $.disabled $Game . }}
+            <span class="{{ call $.fieldClass $Game . }}"></span>
+        {{ else }}
+            <a class="{{ call $.fieldClass $Game . }}" href="{{ $GameFlow -}}{{- . }}"></a>
+        {{ end }}
+    {{ end }}
 </div>
 
 <b>Game:</b> {{.gameFlow}}