feat: add tictactoe example by hackyguru

README.md

@@ -12,6 +12,12 @@ See https://examples.waku.org/ for more examples.
 - [website](https://examples.waku.org/web-chat)
 - Demonstrates: Group chat, React/TypeScript, Relay, Store.
 
+### Tic Tac Toe
+
+- [code](examples/tictactoe)
+- [website](https://examples.waku.org/tictactoe)
+- Demonstrates: Gaming, Light Client, Store, NextJS, Waku React.
+
 ### Ethereum Private Messaging
 
 End-to-end encrypted communication between two Ethereum addresses.

ci/Jenkinsfile

@@ -44,6 +44,7 @@ pipeline {
         stage('noise-rtc') { steps { script { buildExample() } } }
         stage('relay-direct-rtc') { steps { script { buildExample() } } }
         stage('rln-js') { steps { script { buildNextJSExample() } } }
+        stage('tictactoe') { steps { script { buildNextJSExample() } } }
       }
     }
 

examples/tictactoe/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/tictactoe/.gitignore

@@ -0,0 +1,32 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel

examples/tictactoe/README.md

@@ -0,0 +1,3 @@
+# TicTacToe with Waku
+
+This repository is a basic implementation of a TicTacToe game where 2 players can join a particular game id which operates through a content topic on top of Waku

examples/tictactoe/components/Hero.js

@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from 'react';
+import Loading from './Loading';
+import ShortUniqueId from 'short-unique-id';
+import Router from 'next/router';
+
+export default function Hero() {
+  const options = { length: 8 };
+  const uid = new ShortUniqueId(options);
+
+  const [room, setRoom] = useState(null);
+  const [game, setGame] = useState(null);
+  const [joinLink, setJoinLink] = useState('');
+
+  useEffect(() => {
+    if (room === null) {
+      setRoom(uid.rnd());
+    }
+  }, []);
+
+  if (room === null) {
+    return <Loading />;
+  }
+
+  const handleNewGameClick = () => {
+    sessionStorage.setItem('roomId', room);
+    sessionStorage.setItem('player', 'x');
+    Router.push(`/game/${room}`);
+  };
+
+  const handleJoinGameClick = () => {
+    setGame('join');
+  };
+
+  const handleJoinLinkChange = (e) => {
+    setJoinLink(e.target.value);
+  };
+
+  const handleJoinButtonClick = () => {
+    Router.push(`/game/${joinLink}`);
+  };
+
+  const handleGoBackClick = () => {
+    setGame(null);
+  };
+
+  return (
+    <section id='hero'>
+      <div className="mx-auto max-w-screen-xl px-4 lg:flex lg:mt-40 lg:items-center mt-40">
+        <div className="mx-auto max-w-xl text-center">
+          <h1 className="text-3xl sm:text-8xl text-white">TicTacToe</h1>
+          <div className='mt-8 sm:text-xl/relaxed text-white opacity-60 flex items-center justify-center'>
+            <p>Built with</p>
+            <img src='https://waku.org/theme/image/logo.svg' />
+            <a href='https://waku.org' className='underline'>
+              Waku
+            </a>
+          </div>
+
+          {game === null && (
+            <div className="mt-20 flex flex-wrap justify-center gap-4">
+              <button
+                className="block w-full bg-white px-12 py-3 text-sm font-medium hover:text-white hover:bg-black hover:border-2  hover:border-white focus:outline-none focus:ring  text-black"
+                onClick={handleNewGameClick}
+              >
+                New game
+              </button>
+              <button
+                onClick={handleJoinGameClick}
+                className="block w-full bg-white px-12 py-3 text-sm font-medium hover:text-white hover:bg-black hover:border-2  hover:border-white focus:outline-none focus:ring  text-black"
+              >
+                Join game
+              </button>
+            </div>
+          )}
+
+          {game === 'join' && (
+            <div className="mt-20 space-y-4">
+              <input
+                value={joinLink}
+                onChange={handleJoinLinkChange}
+                className="px-3 py-3 border-2 border-white w-full"
+                placeholder='Enter the game link'
+              />
+              <div className='flex space-x-5 items-center'>
+                <button
+                  onClick={handleJoinButtonClick}
+                  className="block w-full bg-white px-12 py-3 text-sm font-medium hover:text-white hover:bg-black hover:border-2  hover:border-white focus:outline-none focus:ring  text-black"
+                >
+                  Join game
+                </button>
+                <button
+                  onClick={handleGoBackClick}
+                  className="block w-full bg-white px-12 py-3 text-sm font-medium hover:text-white hover:bg-black hover:border-2  hover:border-white focus:outline-none focus:ring text-black"
+                >
+                  Go back
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}

examples/tictactoe/components/Loading.js

@@ -0,0 +1,20 @@
+import React from 'react'
+
+export default function Loading() {
+    return (
+        <div className='h-screen bg-black flex items-center w-full justify-center'>
+            <svg width="60" height="60" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <g fill="none" stroke="#ffffff" strokeLinecap="round" strokeWidth="2">
+                    <path strokeDasharray="60" strokeDashoffset="60" strokeOpacity=".3" d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3Z">
+                        <animate fill="freeze" attributeName="strokeDashoffset" dur="1.3s" values="60;0" />
+                    </path>
+                    <path strokeDasharray="15" strokeDashoffset="15" d="M12 3C16.9706 3 21 7.02944 21 12">
+                        <animate fill="freeze" attributeName="strokeDashoffset" dur="0.3s" values="15;0" />
+                        <animateTransform attributeName="transform" dur="1.5s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12" />
+                    </path>
+                </g>
+            </svg>
+
+        </div>
+    )
+}